{"version":3,"sources":["LocaleSelector.tsx"],"sourcesContent":["import {\n    addPropertyControls,\n    ControlType,\n    // @ts-ignore Internal function\n    useLocaleInfo,\n    // @ts-ignore Internal function\n    useLocalesForCurrentRoute,\n    withCSS,\n} from \"framer\"\nimport { useId, useRef, useState } from \"react\"\nimport {\n    getBorderStyle,\n    borderControls,\n    BorderOptions,\n} from \"./utils/border.ts\"\nimport { getFocusStyle, focusControls, FocusOptions } from \"./utils/focus.ts\"\nimport { FontOptions, getTextHeight } from \"./utils/font.ts\"\nimport { getHoverStyle, hoverControls, HoverOptions } from \"./utils/hover.ts\"\nimport {\n    getPaddingStyle,\n    paddingControls,\n    PaddingOptions,\n} from \"./utils/padding.ts\"\nimport {\n    getRadiusStyle,\n    radiusControls,\n    RadiusOptions,\n} from \"./utils/radius.ts\"\n\nconst className = \"framer-locale-picker\"\n\ndeclare module \"react\" {\n    interface CSSProperties {\n        \"--framer-background-color\"?: string\n        \"--framer-color\"?: string\n    }\n}\n\nfunction addPixel(value: string | number) {\n    if (typeof value === \"number\") {\n        return `${value}px`\n    }\n\n    return value\n}\n\nenum IconType {\n    Default = \"default\",\n    Custom = \"custom\",\n}\n\ninterface ResponsiveImage {\n    src: string\n    alt?: string\n}\n\ninterface IconOptions {\n    type?: \"default\" | \"custom\"\n    color?: string\n    image?: ResponsiveImage\n    size?: number\n}\n\nfunction Icon({ type, color, image, size }: IconOptions) {\n    if (type === IconType.Custom && image) {\n        return <img {...image} width={size} height={size} />\n    }\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 256 256\"\n            width={size}\n            height={size}\n            fill={color}\n        >\n            <path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm87.63,96H175.8c-1.41-28.46-10.27-55.47-25.12-77A88.2,88.2,0,0,1,215.63,120ZM128,215.89c-18.73-20.27-30.09-49-31.77-79.89h63.54C158.09,166.87,146.73,195.62,128,215.89ZM96.23,120c1.68-30.87,13-59.62,31.77-79.89,18.73,20.27,30.09,49,31.77,79.89Zm9.09-77C90.47,64.53,81.61,91.54,80.2,120H40.37A88.2,88.2,0,0,1,105.32,43ZM40.37,136H80.2c1.41,28.46,10.27,55.47,25.12,77A88.2,88.2,0,0,1,40.37,136Zm110.31,77c14.85-21.56,23.71-48.57,25.12-77h39.83A88.2,88.2,0,0,1,150.68,213Z\" />\n        </svg>\n    )\n}\n\nenum CaretType {\n    Default = \"default\",\n    Custom = \"custom\",\n}\n\ninterface CaretOptions {\n    type?: \"default\" | \"custom\"\n    color?: string\n    image?: ResponsiveImage\n    size?: number\n}\n\nfunction Caret({ type, color, image, size }: CaretOptions) {\n    if (type === CaretType.Custom && image) {\n        return <img {...image} width={size} height={size} />\n    }\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 12 12\"\n            width={size}\n            height={size}\n        >\n            <path\n                d=\"M 2 4.5 L 6 8.5 L 10 4.5\"\n                fill=\"none\"\n                stroke={color}\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    )\n}\n\ninterface Options {\n    title?: boolean\n    gap?: number\n    border?: BorderOptions\n    hover?: HoverOptions\n    focus?: FocusOptions\n}\n\ninterface LocaleSelectorProps extends PaddingOptions, RadiusOptions {\n    font?: FontOptions\n    fillColor?: string\n    textColor?: string\n    icon?: IconOptions\n    caret?: CaretOptions\n    options?: Options\n    style?: React.CSSProperties\n}\n\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any\n * @framerDisableUnlink\n * @framerIntrinsicWidth 120\n * @framerIntrinsicHeight 34\n */\nconst LocaleSelector: React.ComponentType<LocaleSelectorProps> = withCSS(\n    ({\n        font,\n        fillColor,\n        textColor,\n        icon,\n        caret,\n        options: { title, gap, border, hover, focus },\n        style,\n        ...props\n    }) => {\n        const id = useId()\n\n        const { activeLocale, locales, setLocale } = useLocaleInfo()\n        const localesForCurrentRoute = useLocalesForCurrentRoute()\n        const activeLocaleId = activeLocale?.id ?? \"default\"\n        const [lastActiveLocaleId, setLastActiveLocaleId] =\n            useState(activeLocaleId)\n        // The useLocaleInfo hook updates the activeLocale variable inside\n        // a startTransition to load the translations with Suspense. To make\n        // the component feel responsive we update our own state without Suspense.\n        const [selectedLocaleId, setSelectedLocaleId] = useState(activeLocaleId)\n\n        const selectedLocale = locales.find(\n            (locale) => locale.id === selectedLocaleId\n        )\n\n        // The active locale was updated. Ensure we update our internal state as well.\n        if (lastActiveLocaleId !== activeLocaleId) {\n            setLastActiveLocaleId(activeLocaleId)\n\n            if (selectedLocaleId !== activeLocaleId) {\n                setSelectedLocaleId(activeLocaleId)\n            }\n        }\n\n        function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {\n            const localeId = event.target.value\n            setSelectedLocaleId(localeId)\n            const locale = locales.find((locale) => locale.id === localeId)\n            setLocale(locale)\n        }\n\n        return (\n            <div className={className} style={style}>\n                <label htmlFor={id}>Select Language</label>\n\n                <select\n                    id={id}\n                    value={selectedLocaleId}\n                    onChange={handleChange}\n                    // If a navigation occurs from switching locales\n                    // the browser can attempt to autofill the select to the last value\n                    // when you use browser back navigation. We don't want that.\n                    autoComplete=\"off\"\n                >\n                    {localesForCurrentRoute.map((locale) => (\n                        <option key={locale.id} value={locale.id}>\n                            {locale.name}\n                        </option>\n                    ))}\n                </select>\n\n                <div\n                    className=\"input\"\n                    style={{\n                        ...font,\n                        \"--framer-background-color\": fillColor,\n                        \"--framer-color\": textColor,\n                        ...getPaddingStyle(props),\n                        ...getRadiusStyle(props),\n                        ...getBorderStyle(border),\n                        ...getHoverStyle(hover),\n                        ...getFocusStyle(focus),\n                        gap,\n                    }}\n                >\n                    {icon && (\n                        <div className=\"icon\">\n                            <Icon {...icon} />\n                        </div>\n                    )}\n\n                    {title && (\n                        <div className=\"title\">\n                            {selectedLocale?.name ?? \"English\"}\n                        </div>\n                    )}\n\n                    {caret && (\n                        <div className=\"caret\">\n                            <Caret {...caret} />\n                        </div>\n                    )}\n                </div>\n            </div>\n        )\n    },\n    [\n        `\n            .${className} {\n                position: relative;\n            }\n        `,\n        `\n            .${className} label {\n                position: absolute;\n                width: 1px;\n                height: 1px;\n                margin: -1px;\n                overflow: hidden;\n                white-space: nowrap;\n                clip: rect(0 0 0 0);\n                clip-path: inset(50%);\n            }\n        `,\n        `\n            .${className} select {\n                appearance: none;\n                position: absolute;\n                opacity: 0;\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                cursor: inherit;\n                width: 100%;\n            }\n        `,\n        `\n            .${className} .input {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                height: 100%;\n                pointer-events: none;\n                overflow: hidden;\n                background-color: var(--framer-background-color);\n                color: var(--framer-color);\n                border-color: var(--framer-border-color);\n            }\n        `,\n        `\n            .${className} select:focus-visible + .input  {\n                outline: var(--framer-focus-outline, none);\n                outline-offset: var(--framer-focus-outline-offset);\n            }\n        `,\n        `\n            .${className}:hover .input {\n                background-color: var(--framer-hover-background-color, var(--framer-background-color));\n                color: var(--framer-hover-color, var(--framer-color));\n                border-color: var(--framer-hover-border-color, var(--framer-border-color));\n            }\n        `,\n        `\n            .${className} .title {\n                flex: 1 1 auto;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                overflow: hidden;\n            }\n        `,\n        `\n            .${className} .icon, .${className} .caret {\n                display: flex;\n                align-items: center;\n            }\n        `,\n    ],\n    \"framer-library-LocalePicker\"\n)\n\nLocaleSelector.displayName = \"Locale Selector\"\n\naddPropertyControls(LocaleSelector, {\n    font: {\n        // @ts-ignore\n        type: ControlType.Font,\n        controls: \"extended\",\n        defaultFontType: \"sans-serif\",\n        defaultValue: {\n            fontSize: 14,\n            lineHeight: \"1.5em\",\n        },\n    },\n\n    fillColor: {\n        type: ControlType.Color,\n        title: \"Fill\",\n        optional: true,\n        defaultValue: \"#eee\",\n    },\n\n    textColor: {\n        type: ControlType.Color,\n        title: \"Text\",\n        defaultValue: \"#000\",\n    },\n\n    ...paddingControls,\n\n    ...radiusControls,\n\n    icon: {\n        type: ControlType.Object,\n        buttonTitle: \"Size, Color\",\n        optional: true,\n        controls: {\n            type: {\n                type: ControlType.Enum,\n                title: \"Icon\",\n                options: Object.values(IconType),\n                optionTitles: [\"Default\", \"Custom\"],\n                displaySegmentedControl: true,\n                defaultValue: \"default\",\n            },\n\n            color: {\n                type: ControlType.Color,\n                defaultValue: \"#000\",\n                hidden: (props) => props.type !== IconType.Default,\n            },\n\n            image: {\n                type: ControlType.ResponsiveImage,\n                title: \"File\",\n                hidden: (props) => props.type !== IconType.Custom,\n            },\n\n            size: {\n                type: ControlType.Number,\n                displayStepper: true,\n                defaultValue: 18,\n            },\n        },\n    },\n\n    caret: {\n        type: ControlType.Object,\n        buttonTitle: \"Size, Color\",\n        optional: true,\n        controls: {\n            type: {\n                type: ControlType.Enum,\n                title: \"Icon\",\n                options: Object.values(CaretType),\n                optionTitles: [\"Default\", \"Custom\"],\n                displaySegmentedControl: true,\n                defaultValue: \"default\",\n            },\n\n            color: {\n                type: ControlType.Color,\n                defaultValue: \"#000\",\n                hidden: (props) => props.type !== CaretType.Default,\n            },\n\n            image: {\n                type: ControlType.ResponsiveImage,\n                title: \"File\",\n                hidden: (props) => props.type !== CaretType.Custom,\n            },\n\n            size: {\n                type: ControlType.Number,\n                displayStepper: true,\n                defaultValue: 12,\n            },\n        },\n        defaultValue: {},\n    },\n\n    options: {\n        type: ControlType.Object,\n        title: \"Options\",\n        buttonTitle: \"Border, Hover\",\n        controls: {\n            title: {\n                type: ControlType.Boolean,\n                defaultValue: true,\n            },\n\n            gap: {\n                type: ControlType.Number,\n                displayStepper: true,\n                defaultValue: 5,\n            },\n\n            border: {\n                type: ControlType.Object,\n                buttonTitle: \"Color, Width\",\n                optional: true,\n                controls: borderControls,\n            },\n\n            hover: {\n                type: ControlType.Object,\n                buttonTitle: \"Fill, Border\",\n                optional: true,\n                controls: hoverControls,\n            },\n\n            focus: {\n                type: ControlType.Object,\n                buttonTitle: \"Color, Width\",\n                controls: focusControls,\n            },\n        },\n    },\n})\n\nexport default LocaleSelector\n"],"names":[],"mappings":"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"}