@chayns-components/color-picker 5.5.35 → 5.5.37

package/lib/cjs/components/color-picker-popup/ColorPickerPopup.js

@@ -11,7 +11,7 @@ var _ColorPickerPopup = require("./ColorPickerPopup.styles");
 var _MoreOptions = _interopRequireDefault(require("./more-options/MoreOptions"));
 var _PresetColors = _interopRequireDefault(require("./preset-colors/PresetColors"));
 var _Sliders = _interopRequireDefault(require("./sliders/Sliders"));
-var _textstring = require("@chayns-components/textstring");
+var _textstrings = require("@chayns/textstrings");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ColorPickerPopupContent = ({
@@ -48,8 +48,9 @@ const ColorPickerPopupContent = ({
     onPresetColorAdd: onPresetColorAdd,
     onPresetColorRemove: onPresetColorRemove,
     shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
-  }), shouldShowMoreOptions && /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
-    libraryName: "@chayns-components-color-picker"
+  }), shouldShowMoreOptions && /*#__PURE__*/_react.default.createElement(_textstrings.TextStringProviderSSR, {
+    libraries: "chayns-components-v5-color-picker",
+    id: "color-picker-popup"
   }, /*#__PURE__*/_react.default.createElement(_MoreOptions.default, {
     shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })));

package/lib/cjs/components/color-picker-popup/ColorPickerPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireWildcard","require","_ColorPickerProvider","_interopRequireDefault","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","_textstring","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ColorPickerPopupContent","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","shouldEnableKeyboardHighlighting","popupRef","useRef","useEffect","animationFrameId","window","requestAnimationFrame","_popupRef$current","current","querySelector","focus","cancelAnimationFrame","createElement","StyledColorPickerPopup","ref","TextstringProvider","libraryName","exports","displayName","ColorPickerPopup","onSelect","selectedColor","props","_default"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport interface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    selectedColor?: string;\n    onSelect?: (color: string) => void;\n}\n\ntype ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;\n\nexport const ColorPickerPopupContent = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerPopupContentProps) => {\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const animationFrameId = window.requestAnimationFrame(() => {\n            popupRef.current\n                ?.querySelector<HTMLElement>(\n                    '[tabindex=\"0\"], input:not([disabled]), button:not([disabled])',\n                )\n                ?.focus();\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, []);\n\n    return (\n        <StyledColorPickerPopup ref={popupRef}>\n            {!shouldHideColorArea && (\n                <ColorArea shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting} />\n            )}\n            {!shouldHideColorArea && (\n                <Sliders\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowTransparencySlider={shouldShowTransparencySlider}\n                />\n            )}\n            {shouldShowPresetColors && (\n                <PresetColors\n                    shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                    presetColors={presetColors}\n                    shouldUseSiteColors={shouldUseSiteColors}\n                    onPresetColorAdd={onPresetColorAdd}\n                    onPresetColorRemove={onPresetColorRemove}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n            {shouldShowMoreOptions && (\n                <TextstringProvider libraryName=\"@chayns-components-color-picker\">\n                    <MoreOptions\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    />\n                </TextstringProvider>\n            )}\n        </StyledColorPickerPopup>\n    );\n};\n\nColorPickerPopupContent.displayName = 'ColorPickerPopupContent';\n\nconst ColorPickerPopup = ({\n    onSelect,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    ...props\n}: ColorPickerPopupProps) => (\n    <ColorPickerProvider onSelect={onSelect} selectedColor={selectedColor}>\n        <ColorPickerPopupContent {...props} />\n    </ColorPickerProvider>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireWildcard","require","_ColorPickerProvider","_interopRequireDefault","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","_textstrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ColorPickerPopupContent","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","shouldEnableKeyboardHighlighting","popupRef","useRef","useEffect","animationFrameId","window","requestAnimationFrame","_popupRef$current","current","querySelector","focus","cancelAnimationFrame","createElement","StyledColorPickerPopup","ref","TextStringProviderSSR","libraries","id","exports","displayName","ColorPickerPopup","onSelect","selectedColor","props","_default"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\n\nexport interface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    selectedColor?: string;\n    onSelect?: (color: string) => void;\n}\n\ntype ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;\n\nexport const ColorPickerPopupContent = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerPopupContentProps) => {\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const animationFrameId = window.requestAnimationFrame(() => {\n            popupRef.current\n                ?.querySelector<HTMLElement>(\n                    '[tabindex=\"0\"], input:not([disabled]), button:not([disabled])',\n                )\n                ?.focus();\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, []);\n\n    return (\n        <StyledColorPickerPopup ref={popupRef}>\n            {!shouldHideColorArea && (\n                <ColorArea shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting} />\n            )}\n            {!shouldHideColorArea && (\n                <Sliders\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowTransparencySlider={shouldShowTransparencySlider}\n                />\n            )}\n            {shouldShowPresetColors && (\n                <PresetColors\n                    shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                    presetColors={presetColors}\n                    shouldUseSiteColors={shouldUseSiteColors}\n                    onPresetColorAdd={onPresetColorAdd}\n                    onPresetColorRemove={onPresetColorRemove}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n            {shouldShowMoreOptions && (\n                <TextStringProviderSSR\n                    libraries=\"chayns-components-v5-color-picker\"\n                    id=\"color-picker-popup\"\n                >\n                    <MoreOptions\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    />\n                </TextStringProviderSSR>\n            )}\n        </StyledColorPickerPopup>\n    );\n};\n\nColorPickerPopupContent.displayName = 'ColorPickerPopupContent';\n\nconst ColorPickerPopup = ({\n    onSelect,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    ...props\n}: ColorPickerPopupProps) => (\n    <ColorPickerProvider onSelect={onSelect} selectedColor={selectedColor}>\n        <ColorPickerPopupContent {...props} />\n    </ColorPickerProvider>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,aAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,QAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,YAAA,GAAAR,OAAA;AAA4D,SAAAE,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAU,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAmBrD,MAAMgB,uBAAuB,GAAGA,CAAC;EACpCC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;EACnBC;AAC0B,CAAC,KAAK;EAChC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAE7C,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,qBAAqB,CAAC,MAAM;MAAA,IAAAC,iBAAA;MACxD,CAAAA,iBAAA,GAAAN,QAAQ,CAACO,OAAO,cAAAD,iBAAA,gBAAAA,iBAAA,GAAhBA,iBAAA,CACME,aAAa,CACX,+DACJ,CAAC,cAAAF,iBAAA,eAHLA,iBAAA,CAIMG,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAML,MAAM,CAACM,oBAAoB,CAACP,gBAAgB,CAAC;EAC9D,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5C,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAAC9C,iBAAA,CAAA+C,sBAAsB;IAACC,GAAG,EAAEb;EAAS,GACjC,CAACF,mBAAmB,iBACjBvC,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAAC/C,UAAA,CAAAQ,OAAS;IAAC2B,gCAAgC,EAAEA;EAAiC,CAAE,CACnF,EACA,CAACD,mBAAmB,iBACjBvC,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAAC3C,QAAA,CAAAI,OAAO;IACJ2B,gCAAgC,EAAEA,gCAAiC;IACnEL,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACAD,sBAAsB,iBACnBlC,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAAC5C,aAAA,CAAAK,OAAY;IACTuB,6BAA6B,EAAEA,6BAA8B;IAC7DL,YAAY,EAAEA,YAAa;IAC3BM,mBAAmB,EAAEA,mBAAoB;IACzCJ,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA,mBAAoB;IACzCQ,gCAAgC,EAAEA;EAAiC,CACtE,CACJ,EACAF,qBAAqB,iBAClBtC,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAAC1C,YAAA,CAAA6C,qBAAqB;IAClBC,SAAS,EAAC,mCAAmC;IAC7CC,EAAE,EAAC;EAAoB,gBAEvBzD,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAAC7C,YAAA,CAAAM,OAAW;IACR2B,gCAAgC,EAAEA;EAAiC,CACtE,CACkB,CAEP,CAAC;AAEjC,CAAC;AAACkB,OAAA,CAAA5B,uBAAA,GAAAA,uBAAA;AAEFA,uBAAuB,CAAC6B,WAAW,GAAG,yBAAyB;AAE/D,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,QAAQ;EACRC,aAAa,GAAG,qBAAqB;EACrC,GAAGC;AACgB,CAAC,kBACpB/D,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAACjD,oBAAA,CAAAU,OAAmB;EAACgD,QAAQ,EAAEA,QAAS;EAACC,aAAa,EAAEA;AAAc,gBAClE9D,MAAA,CAAAa,OAAA,CAAAuC,aAAA,CAACtB,uBAAuB,EAAKiC,KAAQ,CACpB,CACxB;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAAC,IAAAK,QAAA,GAAAN,OAAA,CAAA7C,OAAA,GAEnC+C,gBAAgB","ignoreList":[]}

package/lib/cjs/components/color-picker-popup/more-options/MoreOptions.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../../utils/color");
 var _ColorPickerProvider = require("../../ColorPickerProvider");
 var _MoreOptions = require("./MoreOptions.styles");
-var _textstring = require("@chayns-components/textstring");
+var _textstrings = require("@chayns/textstrings");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -97,9 +97,10 @@ const MoreOptions = ({
       }
     }
   }, [selectedColor]);
-  const title = (0, _textstring.useTextstringValue)({
-    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.colorPickerPopup.moreOptions.accordionTitle)
-  });
+  const {
+    t
+  } = (0, _textstrings.useTranslation)();
+  const title = t(_textStrings.default.components.colorPickerPopup.moreOptions.accordionTitle);
   return /*#__PURE__*/_react.default.createElement(_MoreOptions.StyledMoreOptions, null, /*#__PURE__*/_react.default.createElement(_core.AccordionGroup, {
     isWrapped: true
   }, /*#__PURE__*/_react.default.createElement(_core.Accordion, {

package/lib/cjs/components/color-picker-popup/more-options/MoreOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreOptions.js","names":["_core","require","_colors","_react","_interopRequireWildcard","_color","_ColorPickerProvider","_MoreOptions","_textstring","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MoreOptions","shouldEnableKeyboardHighlighting","selectedColor","updateSelectedColor","updateShouldCallOnSelect","useContext","ColorPickerContext","areaProvider","AreaContext","tmpHexValue","setTmpHexValue","useState","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","areInputsMounted","setAreInputsMounted","hexInputRef","useRef","rgbInputRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","updateKey","setHexInputRef","useCallback","element","current","setRgbInputRef","shouldChangeColor","useMemo","handleHexChange","event","target","value","isValid","isHex","g","b","a","hexToRgb","handleRgbChange","isValidRGBA","useEffect","rgbToHex","extractRgbValues","title","useTextstringValue","textstring","ttsToITextString","textStrings","components","colorPickerPopup","moreOptions","accordionTitle","createElement","StyledMoreOptions","AccordionGroup","isWrapped","Accordion","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","ref","$shouldChangeColor","onChange","$isInvalid","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import {\n    Accordion,\n    AccordionGroup,\n    AreaContext,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n} from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, {\n    type ChangeEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\ntype MoreOptionsProps = {\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst MoreOptions = ({ shouldEnableKeyboardHighlighting }: MoreOptionsProps) => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n    const areaProvider = useContext(AreaContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n    const [areInputsMounted, setAreInputsMounted] = useState(false);\n    const hexInputRef = useRef<HTMLInputElement | null>(null);\n    const rgbInputRef = useRef<HTMLInputElement | null>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(hexInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n    useFocusRingPortal(rgbInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n\n    const setHexInputRef = useCallback((element: HTMLInputElement | null) => {\n        hexInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const setRgbInputRef = useCallback((element: HTMLInputElement | null) => {\n        rgbInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            if (isValidRGBA(selectedColor)) {\n                setTmpRgbValue(selectedColor);\n                setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n            } else {\n                const { r, g, b, a } = hexToRgb(selectedColor);\n\n                setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n                setTmpHexValue(selectedColor);\n            }\n        }\n    }, [selectedColor]);\n\n    const title = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.colorPickerPopup.moreOptions.accordionTitle,\n        ),\n    });\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title={title}>\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            ref={setHexInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            ref={setRgbInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MoreOptions.js","names":["_core","require","_colors","_react","_interopRequireWildcard","_color","_ColorPickerProvider","_MoreOptions","_textstrings","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MoreOptions","shouldEnableKeyboardHighlighting","selectedColor","updateSelectedColor","updateShouldCallOnSelect","useContext","ColorPickerContext","areaProvider","AreaContext","tmpHexValue","setTmpHexValue","useState","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","areInputsMounted","setAreInputsMounted","hexInputRef","useRef","rgbInputRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","updateKey","setHexInputRef","useCallback","element","current","setRgbInputRef","shouldChangeColor","useMemo","handleHexChange","event","target","value","isValid","isHex","g","b","a","hexToRgb","handleRgbChange","isValidRGBA","useEffect","rgbToHex","extractRgbValues","useTranslation","title","textStrings","components","colorPickerPopup","moreOptions","accordionTitle","createElement","StyledMoreOptions","AccordionGroup","isWrapped","Accordion","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","ref","$shouldChangeColor","onChange","$isInvalid","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import {\n    Accordion,\n    AccordionGroup,\n    AreaContext,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n} from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, {\n    type ChangeEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\nimport { useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../../constants/textStrings';\n\ntype MoreOptionsProps = {\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst MoreOptions = ({ shouldEnableKeyboardHighlighting }: MoreOptionsProps) => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n    const areaProvider = useContext(AreaContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n    const [areInputsMounted, setAreInputsMounted] = useState(false);\n    const hexInputRef = useRef<HTMLInputElement | null>(null);\n    const rgbInputRef = useRef<HTMLInputElement | null>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(hexInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n    useFocusRingPortal(rgbInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n\n    const setHexInputRef = useCallback((element: HTMLInputElement | null) => {\n        hexInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const setRgbInputRef = useCallback((element: HTMLInputElement | null) => {\n        rgbInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            if (isValidRGBA(selectedColor)) {\n                setTmpRgbValue(selectedColor);\n                setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n            } else {\n                const { r, g, b, a } = hexToRgb(selectedColor);\n\n                setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n                setTmpHexValue(selectedColor);\n            }\n        }\n    }, [selectedColor]);\n\n    const { t } = useTranslation();\n    const title = t(textStrings.components.colorPickerPopup.moreOptions.accordionTitle);\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title={title}>\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            ref={setHexInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            ref={setRgbInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/constants/textStrings.js

@@ -9,7 +9,7 @@ var _default = exports.default = {
     colorPickerPopup: {
       moreOptions: {
         accordionTitle: {
-          stringName: 'txt_chayns_components_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',
+          stringName: 'txt_chayns_components_v5_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',
           fallback: 'Erweitert'
         }
       }

package/lib/cjs/constants/textStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStrings.js","names":["components","colorPickerPopup","moreOptions","accordionTitle","stringName","fallback"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        colorPickerPopup: {\n            moreOptions: {\n                accordionTitle: {\n                    stringName:\n                        'txt_chayns_components_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',\n                    fallback: 'Erweitert',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,gBAAgB,EAAE;MACdC,WAAW,EAAE;QACTC,cAAc,EAAE;UACZC,UAAU,EACN,2FAA2F;UAC/FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"textStrings.js","names":["components","colorPickerPopup","moreOptions","accordionTitle","stringName","fallback"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        colorPickerPopup: {\n            moreOptions: {\n                accordionTitle: {\n                    stringName:\n                        'txt_chayns_components_v5_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',\n                    fallback: 'Erweitert',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,gBAAgB,EAAE;MACdC,WAAW,EAAE;QACTC,cAAc,EAAE;UACZC,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/esm/components/color-picker-popup/ColorPickerPopup.js

@@ -5,7 +5,7 @@ import { StyledColorPickerPopup } from './ColorPickerPopup.styles';
 import MoreOptions from './more-options/MoreOptions';
 import PresetColors from './preset-colors/PresetColors';
 import Sliders from './sliders/Sliders';
-import { TextstringProvider } from '@chayns-components/textstring';
+import { TextStringProviderSSR } from '@chayns/textstrings';
 export const ColorPickerPopupContent = ({
   presetColors,
   onPresetColorRemove,
@@ -39,8 +39,9 @@ export const ColorPickerPopupContent = ({
     onPresetColorAdd: onPresetColorAdd,
     onPresetColorRemove: onPresetColorRemove,
     shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
-  }), shouldShowMoreOptions && /*#__PURE__*/React.createElement(TextstringProvider, {
-    libraryName: "@chayns-components-color-picker"
+  }), shouldShowMoreOptions && /*#__PURE__*/React.createElement(TextStringProviderSSR, {
+    libraries: "chayns-components-v5-color-picker",
+    id: "color-picker-popup"
   }, /*#__PURE__*/React.createElement(MoreOptions, {
     shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })));

package/lib/esm/components/color-picker-popup/ColorPickerPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.js","names":["React","useEffect","useRef","ColorPickerProvider","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","TextstringProvider","ColorPickerPopupContent","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","shouldEnableKeyboardHighlighting","popupRef","animationFrameId","window","requestAnimationFrame","current","querySelector","focus","cancelAnimationFrame","createElement","ref","libraryName","displayName","ColorPickerPopup","onSelect","selectedColor","props"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport interface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    selectedColor?: string;\n    onSelect?: (color: string) => void;\n}\n\ntype ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;\n\nexport const ColorPickerPopupContent = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerPopupContentProps) => {\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const animationFrameId = window.requestAnimationFrame(() => {\n            popupRef.current\n                ?.querySelector<HTMLElement>(\n                    '[tabindex=\"0\"], input:not([disabled]), button:not([disabled])',\n                )\n                ?.focus();\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, []);\n\n    return (\n        <StyledColorPickerPopup ref={popupRef}>\n            {!shouldHideColorArea && (\n                <ColorArea shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting} />\n            )}\n            {!shouldHideColorArea && (\n                <Sliders\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowTransparencySlider={shouldShowTransparencySlider}\n                />\n            )}\n            {shouldShowPresetColors && (\n                <PresetColors\n                    shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                    presetColors={presetColors}\n                    shouldUseSiteColors={shouldUseSiteColors}\n                    onPresetColorAdd={onPresetColorAdd}\n                    onPresetColorRemove={onPresetColorRemove}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n            {shouldShowMoreOptions && (\n                <TextstringProvider libraryName=\"@chayns-components-color-picker\">\n                    <MoreOptions\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    />\n                </TextstringProvider>\n            )}\n        </StyledColorPickerPopup>\n    );\n};\n\nColorPickerPopupContent.displayName = 'ColorPickerPopupContent';\n\nconst ColorPickerPopup = ({\n    onSelect,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    ...props\n}: ColorPickerPopupProps) => (\n    <ColorPickerProvider onSelect={onSelect} selectedColor={selectedColor}>\n        <ColorPickerPopupContent {...props} />\n    </ColorPickerProvider>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SAASC,kBAAkB,QAAQ,+BAA+B;AAmBlE,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACpCC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;EACnBC;AAC0B,CAAC,KAAK;EAChC,MAAMC,QAAQ,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACZ,MAAMqB,gBAAgB,GAAGC,MAAM,CAACC,qBAAqB,CAAC,MAAM;MACxDH,QAAQ,CAACI,OAAO,EACVC,aAAa,CACX,+DACJ,CAAC,EACCC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAMJ,MAAM,CAACK,oBAAoB,CAACN,gBAAgB,CAAC;EAC9D,CAAC,EAAE,EAAE,CAAC;EAEN,oBACItB,KAAA,CAAA6B,aAAA,CAACxB,sBAAsB;IAACyB,GAAG,EAAET;EAAS,GACjC,CAACF,mBAAmB,iBACjBnB,KAAA,CAAA6B,aAAA,CAACzB,SAAS;IAACgB,gCAAgC,EAAEA;EAAiC,CAAE,CACnF,EACA,CAACD,mBAAmB,iBACjBnB,KAAA,CAAA6B,aAAA,CAACrB,OAAO;IACJY,gCAAgC,EAAEA,gCAAiC;IACnEL,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACAD,sBAAsB,iBACnBd,KAAA,CAAA6B,aAAA,CAACtB,YAAY;IACTS,6BAA6B,EAAEA,6BAA8B;IAC7DL,YAAY,EAAEA,YAAa;IAC3BM,mBAAmB,EAAEA,mBAAoB;IACzCJ,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA,mBAAoB;IACzCQ,gCAAgC,EAAEA;EAAiC,CACtE,CACJ,EACAF,qBAAqB,iBAClBlB,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IAACsB,WAAW,EAAC;EAAiC,gBAC7D/B,KAAA,CAAA6B,aAAA,CAACvB,WAAW;IACRc,gCAAgC,EAAEA;EAAiC,CACtE,CACe,CAEJ,CAAC;AAEjC,CAAC;AAEDV,uBAAuB,CAACsB,WAAW,GAAG,yBAAyB;AAE/D,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,QAAQ;EACRC,aAAa,GAAG,qBAAqB;EACrC,GAAGC;AACgB,CAAC,kBACpBpC,KAAA,CAAA6B,aAAA,CAAC1B,mBAAmB;EAAC+B,QAAQ,EAAEA,QAAS;EAACC,aAAa,EAAEA;AAAc,gBAClEnC,KAAA,CAAA6B,aAAA,CAACnB,uBAAuB,EAAK0B,KAAQ,CACpB,CACxB;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ColorPickerPopup.js","names":["React","useEffect","useRef","ColorPickerProvider","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","TextStringProviderSSR","ColorPickerPopupContent","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","shouldEnableKeyboardHighlighting","popupRef","animationFrameId","window","requestAnimationFrame","current","querySelector","focus","cancelAnimationFrame","createElement","ref","libraries","id","displayName","ColorPickerPopup","onSelect","selectedColor","props"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\n\nexport interface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    selectedColor?: string;\n    onSelect?: (color: string) => void;\n}\n\ntype ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;\n\nexport const ColorPickerPopupContent = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerPopupContentProps) => {\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const animationFrameId = window.requestAnimationFrame(() => {\n            popupRef.current\n                ?.querySelector<HTMLElement>(\n                    '[tabindex=\"0\"], input:not([disabled]), button:not([disabled])',\n                )\n                ?.focus();\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, []);\n\n    return (\n        <StyledColorPickerPopup ref={popupRef}>\n            {!shouldHideColorArea && (\n                <ColorArea shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting} />\n            )}\n            {!shouldHideColorArea && (\n                <Sliders\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowTransparencySlider={shouldShowTransparencySlider}\n                />\n            )}\n            {shouldShowPresetColors && (\n                <PresetColors\n                    shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                    presetColors={presetColors}\n                    shouldUseSiteColors={shouldUseSiteColors}\n                    onPresetColorAdd={onPresetColorAdd}\n                    onPresetColorRemove={onPresetColorRemove}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n            {shouldShowMoreOptions && (\n                <TextStringProviderSSR\n                    libraries=\"chayns-components-v5-color-picker\"\n                    id=\"color-picker-popup\"\n                >\n                    <MoreOptions\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    />\n                </TextStringProviderSSR>\n            )}\n        </StyledColorPickerPopup>\n    );\n};\n\nColorPickerPopupContent.displayName = 'ColorPickerPopupContent';\n\nconst ColorPickerPopup = ({\n    onSelect,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    ...props\n}: ColorPickerPopupProps) => (\n    <ColorPickerProvider onSelect={onSelect} selectedColor={selectedColor}>\n        <ColorPickerPopupContent {...props} />\n    </ColorPickerProvider>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SAASC,qBAAqB,QAAQ,qBAAqB;AAmB3D,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACpCC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;EACnBC;AAC0B,CAAC,KAAK;EAChC,MAAMC,QAAQ,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACZ,MAAMqB,gBAAgB,GAAGC,MAAM,CAACC,qBAAqB,CAAC,MAAM;MACxDH,QAAQ,CAACI,OAAO,EACVC,aAAa,CACX,+DACJ,CAAC,EACCC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAMJ,MAAM,CAACK,oBAAoB,CAACN,gBAAgB,CAAC;EAC9D,CAAC,EAAE,EAAE,CAAC;EAEN,oBACItB,KAAA,CAAA6B,aAAA,CAACxB,sBAAsB;IAACyB,GAAG,EAAET;EAAS,GACjC,CAACF,mBAAmB,iBACjBnB,KAAA,CAAA6B,aAAA,CAACzB,SAAS;IAACgB,gCAAgC,EAAEA;EAAiC,CAAE,CACnF,EACA,CAACD,mBAAmB,iBACjBnB,KAAA,CAAA6B,aAAA,CAACrB,OAAO;IACJY,gCAAgC,EAAEA,gCAAiC;IACnEL,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACAD,sBAAsB,iBACnBd,KAAA,CAAA6B,aAAA,CAACtB,YAAY;IACTS,6BAA6B,EAAEA,6BAA8B;IAC7DL,YAAY,EAAEA,YAAa;IAC3BM,mBAAmB,EAAEA,mBAAoB;IACzCJ,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA,mBAAoB;IACzCQ,gCAAgC,EAAEA;EAAiC,CACtE,CACJ,EACAF,qBAAqB,iBAClBlB,KAAA,CAAA6B,aAAA,CAACpB,qBAAqB;IAClBsB,SAAS,EAAC,mCAAmC;IAC7CC,EAAE,EAAC;EAAoB,gBAEvBhC,KAAA,CAAA6B,aAAA,CAACvB,WAAW;IACRc,gCAAgC,EAAEA;EAAiC,CACtE,CACkB,CAEP,CAAC;AAEjC,CAAC;AAEDV,uBAAuB,CAACuB,WAAW,GAAG,yBAAyB;AAE/D,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,QAAQ;EACRC,aAAa,GAAG,qBAAqB;EACrC,GAAGC;AACgB,CAAC,kBACpBrC,KAAA,CAAA6B,aAAA,CAAC1B,mBAAmB;EAACgC,QAAQ,EAAEA,QAAS;EAACC,aAAa,EAAEA;AAAc,gBAClEpC,KAAA,CAAA6B,aAAA,CAACnB,uBAAuB,EAAK2B,KAAQ,CACpB,CACxB;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}

package/lib/esm/components/color-picker-popup/more-options/MoreOptions.js

@@ -4,7 +4,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';
 import { ColorPickerContext } from '../../ColorPickerProvider';
 import { StyledMoreOptions, StyledMoreOptionsInput, StyledMoreOptionsInputWrapper } from './MoreOptions.styles';
-import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
+import { useTranslation } from '@chayns/textstrings';
 import textStrings from '../../../constants/textStrings';
 const MoreOptions = ({
   shouldEnableKeyboardHighlighting
@@ -89,9 +89,10 @@ const MoreOptions = ({
       }
     }
   }, [selectedColor]);
-  const title = useTextstringValue({
-    textstring: ttsToITextString(textStrings.components.colorPickerPopup.moreOptions.accordionTitle)
-  });
+  const {
+    t
+  } = useTranslation();
+  const title = t(textStrings.components.colorPickerPopup.moreOptions.accordionTitle);
   return /*#__PURE__*/React.createElement(StyledMoreOptions, null, /*#__PURE__*/React.createElement(AccordionGroup, {
     isWrapped: true
   }, /*#__PURE__*/React.createElement(Accordion, {

package/lib/esm/components/color-picker-popup/more-options/MoreOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","useFocusRingPortal","useKeyboardFocusHighlighting","isHex","React","useCallback","useContext","useEffect","useMemo","useRef","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","ttsToITextString","useTextstringValue","textStrings","MoreOptions","shouldEnableKeyboardHighlighting","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","areInputsMounted","setAreInputsMounted","hexInputRef","rgbInputRef","shouldShowKeyboardHighlighting","isEnabled","updateKey","setHexInputRef","element","current","setRgbInputRef","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","title","textstring","components","colorPickerPopup","moreOptions","accordionTitle","createElement","isWrapped","ref","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import {\n    Accordion,\n    AccordionGroup,\n    AreaContext,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n} from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, {\n    type ChangeEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\ntype MoreOptionsProps = {\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst MoreOptions = ({ shouldEnableKeyboardHighlighting }: MoreOptionsProps) => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n    const areaProvider = useContext(AreaContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n    const [areInputsMounted, setAreInputsMounted] = useState(false);\n    const hexInputRef = useRef<HTMLInputElement | null>(null);\n    const rgbInputRef = useRef<HTMLInputElement | null>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(hexInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n    useFocusRingPortal(rgbInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n\n    const setHexInputRef = useCallback((element: HTMLInputElement | null) => {\n        hexInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const setRgbInputRef = useCallback((element: HTMLInputElement | null) => {\n        rgbInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            if (isValidRGBA(selectedColor)) {\n                setTmpRgbValue(selectedColor);\n                setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n            } else {\n                const { r, g, b, a } = hexToRgb(selectedColor);\n\n                setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n                setTmpHexValue(selectedColor);\n            }\n        }\n    }, [selectedColor]);\n\n    const title = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.colorPickerPopup.moreOptions.accordionTitle,\n        ),\n    });\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title={title}>\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            ref={setHexInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            ref={setRgbInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","useFocusRingPortal","useKeyboardFocusHighlighting","isHex","React","useCallback","useContext","useEffect","useMemo","useRef","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","useTranslation","textStrings","MoreOptions","shouldEnableKeyboardHighlighting","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","areInputsMounted","setAreInputsMounted","hexInputRef","rgbInputRef","shouldShowKeyboardHighlighting","isEnabled","updateKey","setHexInputRef","element","current","setRgbInputRef","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","t","title","components","colorPickerPopup","moreOptions","accordionTitle","createElement","isWrapped","ref","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import {\n    Accordion,\n    AccordionGroup,\n    AreaContext,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n} from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, {\n    type ChangeEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\nimport { useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../../constants/textStrings';\n\ntype MoreOptionsProps = {\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst MoreOptions = ({ shouldEnableKeyboardHighlighting }: MoreOptionsProps) => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n    const areaProvider = useContext(AreaContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n    const [areInputsMounted, setAreInputsMounted] = useState(false);\n    const hexInputRef = useRef<HTMLInputElement | null>(null);\n    const rgbInputRef = useRef<HTMLInputElement | null>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(hexInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n    useFocusRingPortal(rgbInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n\n    const setHexInputRef = useCallback((element: HTMLInputElement | null) => {\n        hexInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const setRgbInputRef = useCallback((element: HTMLInputElement | null) => {\n        rgbInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            if (isValidRGBA(selectedColor)) {\n                setTmpRgbValue(selectedColor);\n                setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n            } else {\n                const { r, g, b, a } = hexToRgb(selectedColor);\n\n                setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n                setTmpHexValue(selectedColor);\n            }\n        }\n    }, [selectedColor]);\n\n    const { t } = useTranslation();\n    const title = t(textStrings.components.colorPickerPopup.moreOptions.accordionTitle);\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title={title}>\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            ref={setHexInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            ref={setRgbInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/constants/textStrings.js

@@ -3,7 +3,7 @@ export default {
     colorPickerPopup: {
       moreOptions: {
         accordionTitle: {
-          stringName: 'txt_chayns_components_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',
+          stringName: 'txt_chayns_components_v5_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',
           fallback: 'Erweitert'
         }
       }

package/lib/esm/constants/textStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStrings.js","names":["components","colorPickerPopup","moreOptions","accordionTitle","stringName","fallback"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        colorPickerPopup: {\n            moreOptions: {\n                accordionTitle: {\n                    stringName:\n                        'txt_chayns_components_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',\n                    fallback: 'Erweitert',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,gBAAgB,EAAE;MACdC,WAAW,EAAE;QACTC,cAAc,EAAE;UACZC,UAAU,EACN,2FAA2F;UAC/FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"textStrings.js","names":["components","colorPickerPopup","moreOptions","accordionTitle","stringName","fallback"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        colorPickerPopup: {\n            moreOptions: {\n                accordionTitle: {\n                    stringName:\n                        'txt_chayns_components_v5_color_picker_components_colorPickerPopup_moreOptions_accordionTitle',\n                    fallback: 'Erweitert',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,gBAAgB,EAAE;MACdC,WAAW,EAAE;QACTC,cAAc,EAAE;UACZC,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/types/constants/textStrings.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         readonly colorPickerPopup: {
             readonly moreOptions: {
                 readonly accordionTitle: {
-                    readonly stringName: "txt_chayns_components_color_picker_components_colorPickerPopup_moreOptions_accordionTitle";
+                    readonly stringName: "txt_chayns_components_v5_color_picker_components_colorPickerPopup_moreOptions_accordionTitle";
                     readonly fallback: "Erweitert";
                 };
             };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/color-picker",
-    "version": "5.5.35",
+    "version": "5.5.37",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -69,9 +69,9 @@
         "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.34",
-        "@chayns-components/textstring": "^5.5.34",
+        "@chayns-components/core": "^5.5.37",
         "@chayns/colors": "^2.0.2",
+        "@chayns/textstrings": "^1.0.1",
         "react-compiler-runtime": "^1.0.0",
         "uuid": "^10.0.0"
     },
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a2df4cdf1aabcfae54fc995d8b5af61490fc52d5"
+    "gitHead": "d54ff7f9ff20ebb76f33a5539cbb610b107a0cc7"
 }