@limetech/lime-elements 38.27.0 → 38.28.0

package/dist/lime-elements/lime-elements.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,+kaAAuCH"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,qpaAAuCH"}

package/dist/lime-elements/{p-e1213871.entry.js → p-489d7f63.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as r,H as o}from"./p-288f0842.js";const i='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker){display:grid;gap:0.25rem;grid-template-columns:auto 1fr}button[slot=trigger]{all:unset;box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem;border-radius:0.5rem}button[slot=trigger]:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:not([disabled]):not([disabled=true]):focus{outline:none}button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]:before,button[slot=trigger]:after{content:"";position:absolute;inset:0;border-radius:inherit}button[slot=trigger]:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}button[slot=trigger]:after{z-index:1;box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset;background:var(--background)}:host([readonly]:not([readonly=false])) limel-input-field{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc( 2.5rem / 4 ))}:host([readonly]:not([readonly=false])) button[slot=trigger],:host([disabled]:not([disabled=false])) button[slot=trigger]{border:1px solid rgba(var(--contrast-700), 0.65)}';const l=class{constructor(o){e(this,o);this.change=t(this,"change",7);this.shouldFocus=false;this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return r("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return r("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),r("limel-color-picker-palette",{ref:this.setColorPickerPaletteElement,value:this.value,label:this.label,helperText:this.helperText,placeholder:this.placeholder,invalid:this.invalid,onChange:this.handleChange,required:this.required,palette:this.palette,columnCount:this.paletteColumnCount}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return r("button",{slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button",disabled:this.readonly||this.disabled})};this.setColorPickerPaletteElement=e=>{this.contentElement=e};this.openPopover=e=>{e.stopPropagation();this.isOpen=true;this.shouldFocus=this.isOpen};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.disabled=false;this.readonly=false;this.invalid=false;this.placeholder=undefined;this.palette=undefined;this.paletteColumnCount=undefined;this.isOpen=false}componentDidRender(){var e;if(this.shouldFocus&&this.isOpen){this.shouldFocus=false;(e=this.contentElement)===null||e===void 0?void 0:e.focus()}}render(){return r(o,null,this.renderTooltip(),this.renderPickerPalette(),r("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,disabled:this.disabled,invalid:this.invalid,placeholder:this.placeholder}))}};l.style=i;export{l as limel_color_picker};
-//# sourceMappingURL=p-e1213871.entry.js.map
+import{r as e,c as t,h as r,H as o}from"./p-288f0842.js";const i='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker){display:grid;gap:0.25rem;grid-template-columns:auto 1fr}button[slot=trigger]{all:unset;box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem;border-radius:0.5rem}button[slot=trigger]:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:not([disabled]):not([disabled=true]):focus{outline:none}button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]:before,button[slot=trigger]:after{content:"";position:absolute;inset:0;border-radius:inherit}button[slot=trigger]:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}button[slot=trigger]:after{z-index:1;box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset;background:var(--background)}:host([readonly]:not([readonly=false])) limel-input-field{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc( 2.5rem / 4 ))}:host([readonly]:not([readonly=false])) button[slot=trigger],:host([disabled]:not([disabled=false])) button[slot=trigger]{border:1px solid rgba(var(--contrast-700), 0.65)}';const l=class{constructor(o){e(this,o);this.change=t(this,"change",7);this.shouldFocus=false;this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return r("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return r("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),r("limel-color-picker-palette",{ref:this.setColorPickerPaletteElement,value:this.value,label:this.label,helperText:this.helperText,placeholder:this.placeholder,invalid:this.invalid,onChange:this.handleChange,required:this.required,palette:this.palette,columnCount:this.paletteColumnCount,manualInput:this.manualInput}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return r("button",{slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button",disabled:this.readonly||this.disabled})};this.setColorPickerPaletteElement=e=>{this.contentElement=e};this.openPopover=e=>{e.stopPropagation();this.isOpen=true;this.shouldFocus=this.isOpen};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.disabled=false;this.readonly=false;this.invalid=false;this.placeholder=undefined;this.manualInput=true;this.palette=undefined;this.paletteColumnCount=undefined;this.isOpen=false}componentDidRender(){var e;if(this.shouldFocus&&this.isOpen){this.shouldFocus=false;(e=this.contentElement)===null||e===void 0?void 0:e.focus()}}render(){return r(o,null,this.renderTooltip(),this.renderPickerPalette(),r("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,disabled:this.disabled||!this.manualInput,invalid:this.invalid,placeholder:this.placeholder}))}};l.style=i;export{l as limel_color_picker};
+//# sourceMappingURL=p-489d7f63.entry.js.map

package/dist/lime-elements/p-489d7f63.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","placeholder","invalid","onChange","handleChange","required","palette","columnCount","paletteColumnCount","manualInput","background","slot","style","role","onClick","openPopover","id","disabled","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render","Host"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,8uI,MCiCVC,EAAW,M,wDAwGZC,KAAAC,YAAc,MAqBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,YAAanB,KAAKmB,YAClBC,QAASpB,KAAKoB,QACdC,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfC,QAASxB,KAAKwB,QACdC,YAAazB,KAAK0B,mBAClBC,YAAa3B,KAAK2B,cAEV,EAIhB3B,KAAAS,oBAAsB,KAC1B,MAAMmB,EAAa5B,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIwB,KAAK,UACLC,MAAOF,EACPG,KAAK,SACLC,QAAShC,KAAKiC,YACdC,GAAG,iBACHC,SAAUnC,KAAKG,UAAYH,KAAKmC,UAClC,EAIFnC,KAAAgB,6BACJoB,IAEApC,KAAKqC,eAAiBD,CAAO,EAGzBpC,KAAAiC,YAAeK,IACnBA,EAAMC,kBACNvC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBwB,IACtBA,EAAMC,kBACNvC,KAAKW,OAAS,KAAK,EAGfX,KAAAsB,aAAgBgB,IACpBA,EAAMC,kBACNvC,KAAKwC,OAAOC,KAAKH,EAAMI,OAAO,E,sIAlKhB,M,cAQA,M,aAOD,M,4CAeI,K,qEAyBJ,K,CAEVC,qB,MACH,GAAI3C,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnB2C,EAAA5C,KAAKqC,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,OACIzC,EAAC0C,EAAI,KACA/C,KAAKE,gBACLF,KAAKQ,sBACNH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZI,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfpB,SAAUH,KAAKG,SACfgC,SAAUnC,KAAKmC,WAAanC,KAAK2B,YACjCP,QAASpB,KAAKoB,QACdD,YAAanB,KAAKmB,c"}

package/dist/lime-elements/{p-0345965e.entry.js → p-4f85b3c4.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as o}from"./p-288f0842.js";const t=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const l=["lighter","light","default","dark","darker"];function i(e,r){return`--color-${e}-${r}`}function a(e,r){return`rgb(var(${i(e,r)}))`}function n(e,r){return`${e} ${r}`}function s(e,r){return{name:n(e,r),value:a(e,r)}}const c='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker-palette){--limel-color-palette-gap:0.25rem;--limel-color-palette-max-column-count:25;--limel-color-palette-min-width:8rem;box-sizing:border-box;border-radius:0.75rem;display:flex;flex-direction:column;gap:1rem;padding:0.75rem}*,*:before,:after{box-sizing:border-box}.color-picker-palette{display:grid;gap:var(--limel-color-palette-gap);grid-template-columns:repeat(min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)), 1fr);width:100%;max-width:58rem;min-width:var(--limel-color-palette-min-width)}.chosen-color-name{display:flex;gap:0.5rem}limel-input-field{flex-grow:1;width:min-content}.chosen-color-preview{flex-shrink:0;isolation:isolate;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.chosen-color-preview:before,.chosen-color-preview:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after{background:var(--background);z-index:1}button.swatch{all:unset;position:relative;display:flex;justify-content:center;align-items:center;max-width:3rem;min-width:max(2rem, 100% / min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - (min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - 1) * var(--limel-color-palette-gap));aspect-ratio:1;border-radius:0.1875rem;background-color:var(--limel-color-picker-swatch-color)}button.swatch:focus{outline:none}button.swatch:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.swatch:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus,button.swatch:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button.swatch:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.swatch:focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.125rem rgb(var(--contrast-100)) inset}button.swatch[disabled]{cursor:not-allowed;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset}button.swatch[disabled]:after{content:"";position:absolute;inset:0;margin:auto;width:0.125rem;height:100%;opacity:0.6;rotate:45deg;border-radius:1rem;background-color:rgb(var(--contrast-100))}button.swatch--selected{box-shadow:var(--button-shadow-inset);border-radius:50%}';const d=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.renderSwatches=()=>this.getPalette().map(this.renderSwatchButton);this.renderSwatchButton=(e,r)=>{const t=this.value===e.value;const l={swatch:true,"swatch--selected":t,"custom-swatch":this.usesCustomPalette()};return o("button",{class:l,style:{"--limel-color-picker-swatch-color":e.value},title:e.name,disabled:e.disabled,"data-index":r,key:r,onClick:this.handleSwatchClick(e.value)})};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.handleSwatchClick=e=>r=>{r.stopPropagation();const o=this.value===e?"":e;this.change.emit(o)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.placeholder=undefined;this.required=undefined;this.invalid=false;this.columnCount=undefined;this.palette=undefined}render(){const e=this.value?{"--background":this.value}:{};return[o("div",{class:"color-picker-palette",style:{"--color-picker-column-count":`${this.getColumnCount()}`}},this.renderSwatches()),o("div",{class:"chosen-color-name"},o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,invalid:this.invalid,placeholder:this.placeholder}),o("div",{class:"chosen-color-preview",style:e}))]}getPalette(){if(this.usesCustomPalette()){return(this.palette||[]).map((e=>{const r=this.normalizeEntry(e);return{name:r.name||r.value,value:r.value,disabled:r.disabled}}))}const e=[];for(const r of l){for(const o of t){e.push(s(o,r))}}return e}normalizeEntry(e){if(typeof e==="string"){return{value:e}}return e}usesCustomPalette(){var e;return((e=this.palette)===null||e===void 0?void 0:e.length)>0}getColumnCount(){if(this.columnCount>0){return this.columnCount}if(!this.usesCustomPalette()){return 20}const e=this.getPalette();return e.length>0?e.length:1}static get delegatesFocus(){return true}};d.style=c;export{d as limel_color_picker_palette};
-//# sourceMappingURL=p-0345965e.entry.js.map
+import{r as e,c as r,h as o}from"./p-288f0842.js";const t=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const i=["lighter","light","default","dark","darker"];function l(e,r){return`--color-${e}-${r}`}function a(e,r){return`rgb(var(${l(e,r)}))`}function n(e,r){return`${e} ${r}`}function s(e,r){return{name:n(e,r),value:a(e,r)}}const c='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker-palette){--limel-color-palette-gap:0.25rem;--limel-color-palette-max-column-count:25;--limel-color-palette-min-width:8rem;box-sizing:border-box;border-radius:0.75rem;display:flex;flex-direction:column;gap:1rem;padding:0.75rem}*,*:before,:after{box-sizing:border-box}.color-picker-palette{display:grid;gap:var(--limel-color-palette-gap);grid-template-columns:repeat(min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)), 1fr);width:100%;max-width:58rem;min-width:var(--limel-color-palette-min-width)}.chosen-color-name{display:flex;gap:0.5rem}limel-input-field{flex-grow:1;width:min-content}.chosen-color-preview{flex-shrink:0;isolation:isolate;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.chosen-color-preview:before,.chosen-color-preview:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after{background:var(--background);z-index:1}button.swatch{all:unset;position:relative;display:flex;justify-content:center;align-items:center;max-width:3rem;min-width:max(2rem, 100% / min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - (min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - 1) * var(--limel-color-palette-gap));aspect-ratio:1;border-radius:0.1875rem;background-color:var(--limel-color-picker-swatch-color)}button.swatch:focus{outline:none}button.swatch:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.swatch:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus,button.swatch:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button.swatch:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.swatch:focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.125rem rgb(var(--contrast-100)) inset}button.swatch[disabled]{cursor:not-allowed;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset}button.swatch[disabled]:after{content:"";position:absolute;inset:0;margin:auto;width:0.125rem;height:100%;opacity:0.6;rotate:45deg;border-radius:1rem;background-color:rgb(var(--contrast-100))}button.swatch--selected{box-shadow:var(--button-shadow-inset);border-radius:50%}';const d=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.renderSwatches=()=>this.getPalette().map(this.renderSwatchButton);this.renderSwatchButton=(e,r)=>{const t=this.value===e.value;const i={swatch:true,"swatch--selected":t,"custom-swatch":this.usesCustomPalette()};return o("button",{class:i,style:{"--limel-color-picker-swatch-color":e.value},title:e.name,disabled:e.disabled,"data-index":r,key:r,onClick:this.handleSwatchClick(e.value)})};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.handleSwatchClick=e=>r=>{r.stopPropagation();const o=this.value===e?"":e;this.change.emit(o)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.placeholder=undefined;this.required=undefined;this.invalid=false;this.manualInput=true;this.columnCount=undefined;this.palette=undefined}render(){const e=this.value?{"--background":this.value}:{};return[o("div",{class:"color-picker-palette",style:{"--color-picker-column-count":`${this.getColumnCount()}`}},this.renderSwatches()),o("div",{class:"chosen-color-name"},o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,invalid:this.invalid,placeholder:this.placeholder,disabled:!this.manualInput}),o("div",{class:"chosen-color-preview",style:e}))]}getPalette(){if(this.usesCustomPalette()){return(this.palette||[]).map((e=>{const r=this.normalizeEntry(e);return{name:r.name||r.value,value:r.value,disabled:r.disabled}}))}const e=[];for(const r of i){for(const o of t){e.push(s(o,r))}}return e}normalizeEntry(e){if(typeof e==="string"){return{value:e}}return e}usesCustomPalette(){var e;return((e=this.palette)===null||e===void 0?void 0:e.length)>0}getColumnCount(){if(this.columnCount>0){return this.columnCount}if(!this.usesCustomPalette()){return 20}const e=this.getPalette();return e.length>0?e.length:1}static get delegatesFocus(){return true}};d.style=c;export{d as limel_color_picker_palette};
+//# sourceMappingURL=p-4f85b3c4.entry.js.map

package/dist/lime-elements/p-4f85b3c4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getSwatchValue","getSwatchName","createSwatch","name","value","colorPickerPaletteCss","Palette","this","renderSwatches","getPalette","map","renderSwatchButton","swatch","index","isSelected","classList","usesCustomPalette","h","class","style","title","disabled","key","onClick","handleSwatchClick","handleChange","event","stopPropagation","change","emit","detail","newValue","render","background","getColumnCount","label","helperText","onChange","required","invalid","placeholder","manualInput","palette","entry","normalized","normalizeEntry","swatches","b","push","_a","length","columnCount"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport interface Swatch {\n    name: string;\n    value: string;\n    disabled?: boolean;\n}\n\n/**\n * Returns the CSS variable name holding the RGB triplet for the color & brightness.\n *\n * @param color the base color identifier (e.g. \"red\", \"blue\")\n * @param brightness the brightness variant (e.g. \"light\", \"default\")\n * @returns CSS variable name in the form --color-{color}-{brightness}\n */\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\n/**\n * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))\n * @param color\n * @param brightness\n */\nexport function getSwatchValue(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n\n/**\n * Swatch name: human readable label like \"red default\"\n * @param color\n * @param brightness\n */\nexport function getSwatchName(color: string, brightness: string): string {\n    return `${color} ${brightness}`;\n}\n\n/**\n * Convenience factory returning both name & value.\n * @param color\n * @param brightness\n */\nexport function createSwatch(color: string, brightness: string): Swatch {\n    return {\n        name: getSwatchName(color, brightness),\n        value: getSwatchValue(color, brightness),\n    };\n}\n\n/**\n * Returns the CSS color value for the given color and brightness.\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n    return getSwatchValue(color, brightness);\n}\n","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker-palette) {\n    --limel-color-palette-gap: 0.25rem;\n    --limel-color-palette-max-column-count: 25;\n    --limel-color-palette-min-width: 8rem;\n    box-sizing: border-box;\n\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 0.75rem;\n}\n\n*,\n*:before,\n:after {\n    box-sizing: border-box;\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: var(--limel-color-palette-gap);\n    grid-template-columns: repeat(\n        min(\n            var(--color-picker-column-count),\n            var(--limel-color-palette-max-column-count)\n        ),\n        1fr\n    );\n    width: 100%;\n    max-width: 58rem;\n    min-width: var(--limel-color-palette-min-width);\n}\n\n.chosen-color-name {\n    display: flex;\n    gap: 0.5rem;\n}\n\nlimel-input-field {\n    flex-grow: 1;\n    width: min-content;\n}\n\n.chosen-color-preview {\n    flex-shrink: 0;\n    isolation: isolate;\n\n    position: relative;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border: 1px solid rgba(var(--contrast-700), 0.65);\n    border-radius: 50%;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\nbutton.swatch {\n    all: unset;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    max-width: 3rem;\n    min-width: max(\n        2rem,\n        100% /\n            min(\n                var(--color-picker-column-count),\n                var(--limel-color-palette-max-column-count)\n            ) -\n            (\n                min(\n                        var(--color-picker-column-count),\n                        var(--limel-color-palette-max-column-count)\n                    ) -\n                    1\n            ) *\n            var(--limel-color-palette-gap)\n    );\n    aspect-ratio: 1;\n    border-radius: 0.1875rem;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // Since the background color will be overwritten by the mixin,\n    // we need to set it explicitly here and repeated in the mixin.\n    background-color: var(--limel-color-picker-swatch-color);\n    &:not([disabled]) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--limel-color-picker-swatch-color),\n            $background-color--hovered: var(--limel-color-picker-swatch-color)\n        );\n    }\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.125rem rgb(var(--contrast-100)) inset;\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n        box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset;\n\n        &:after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            margin: auto;\n            width: 0.125rem;\n            height: 100%;\n\n            opacity: 0.6;\n            rotate: 45deg;\n            border-radius: 1rem;\n            background-color: rgb(var(--contrast-100));\n        }\n    }\n}\n\nbutton.swatch--selected {\n    box-shadow: var(--button-shadow-inset);\n\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette.\n     */\n    @Prop({ reflect: true })\n    public columnCount?: number;\n\n    /**\n     * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n     */\n    @Prop()\n    public palette?: CustomPalette;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div\n                class=\"color-picker-palette\"\n                style={{\n                    '--color-picker-column-count': `${this.getColumnCount()}`,\n                }}\n            >\n                {this.renderSwatches()}\n            </div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                    disabled={!this.manualInput}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return this.getPalette().map(this.renderSwatchButton);\n    };\n\n    private getPalette(): Swatch[] {\n        if (this.usesCustomPalette()) {\n            return (this.palette || []).map((entry) => {\n                const normalized = this.normalizeEntry(entry);\n                return {\n                    name: normalized.name || normalized.value,\n                    value: normalized.value,\n                    disabled: normalized.disabled,\n                };\n            });\n        }\n\n        // Order default swatches by brightness first, then by color.\n        // This gives a more intuitive CSS grid layout logic, and\n        // enables adding the `columnCount` prop.\n        const swatches: Swatch[] = [];\n        for (const b of brightnesses) {\n            for (const color of colors) {\n                swatches.push(createSwatch(color, b));\n            }\n        }\n        return swatches;\n    }\n\n    private renderSwatchButton = (swatch: Swatch, index: number) => {\n        const isSelected = this.value === swatch.value;\n        const classList = {\n            swatch: true,\n            'swatch--selected': isSelected,\n            'custom-swatch': this.usesCustomPalette(),\n        };\n\n        return (\n            <button\n                class={classList}\n                style={{ '--limel-color-picker-swatch-color': swatch.value }}\n                title={swatch.name}\n                disabled={swatch.disabled}\n                data-index={index}\n                key={index}\n                onClick={this.handleSwatchClick(swatch.value)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n        event.stopPropagation();\n        const newValue = this.value === value ? '' : value;\n        this.change.emit(newValue);\n    };\n\n    private normalizeEntry(\n        entry: string | CustomColorSwatch\n    ): CustomColorSwatch {\n        if (typeof entry === 'string') {\n            return { value: entry };\n        }\n        return entry;\n    }\n\n    private usesCustomPalette(): boolean {\n        return this.palette?.length > 0;\n    }\n\n    private getColumnCount(): number {\n        if (this.columnCount > 0) {\n            return this.columnCount;\n        }\n\n        // Default palette: fixed 20 columns (one per base color)\n        if (!this.usesCustomPalette()) {\n            return 20;\n        }\n\n        // Custom palette: span all provided swatches unless empty\n        const palette = this.getPalette();\n        return palette.length > 0 ? palette.length : 1;\n    }\n}\n"],"mappings":"kDAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAepDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAOgBC,EAAeF,EAAeC,GAC1C,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,C,SAOgBE,EAAcH,EAAeC,GACzC,MAAO,GAAGD,KAASC,GACvB,C,SAOgBG,EAAaJ,EAAeC,GACxC,MAAO,CACHI,KAAMF,EAAcH,EAAOC,GAC3BK,MAAOJ,EAAeF,EAAOC,GAErC,CCtEA,MAAMM,EAAwB,whK,MCajBC,EAAO,M,wDA4FRC,KAAAC,eAAiB,IACdD,KAAKE,aAAaC,IAAIH,KAAKI,oBA2B9BJ,KAAAI,mBAAqB,CAACC,EAAgBC,KAC1C,MAAMC,EAAaP,KAAKH,QAAUQ,EAAOR,MACzC,MAAMW,EAAY,CACdH,OAAQ,KACR,mBAAoBE,EACpB,gBAAiBP,KAAKS,qBAG1B,OACIC,EAAA,UACIC,MAAOH,EACPI,MAAO,CAAE,oCAAqCP,EAAOR,OACrDgB,MAAOR,EAAOT,KACdkB,SAAUT,EAAOS,SAAQ,aACbR,EACZS,IAAKT,EACLU,QAAShB,KAAKiB,kBAAkBZ,EAAOR,QACzC,EAIFG,KAAAkB,aAAgBC,IACpBA,EAAMC,kBACNpB,KAAKqB,OAAOC,KAAKH,EAAMI,OAAO,EAG1BvB,KAAAiB,kBAAqBpB,GAAmBsB,IAC5CA,EAAMC,kBACN,MAAMI,EAAWxB,KAAKH,QAAUA,EAAQ,GAAKA,EAC7CG,KAAKqB,OAAOC,KAAKE,EAAS,E,oIAhHb,M,iBAMI,K,kDAqBdC,SACH,MAAMC,EAAa1B,KAAKH,MAAQ,CAAE,eAAgBG,KAAKH,OAAU,GAEjE,MAAO,CACHa,EAAA,OACIC,MAAM,uBACNC,MAAO,CACH,8BAA+B,GAAGZ,KAAK2B,qBAG1C3B,KAAKC,kBAEVS,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIkB,MAAO5B,KAAK4B,MACZC,WAAY7B,KAAK6B,WACjBhC,MAAOG,KAAKH,MACZiC,SAAU9B,KAAKkB,aACfa,SAAU/B,KAAK+B,SACfC,QAAShC,KAAKgC,QACdC,YAAajC,KAAKiC,YAClBnB,UAAWd,KAAKkC,cAEpBxB,EAAA,OAAKC,MAAM,uBAAuBC,MAAOc,K,CAS7CxB,aACJ,GAAIF,KAAKS,oBAAqB,CAC1B,OAAQT,KAAKmC,SAAW,IAAIhC,KAAKiC,IAC7B,MAAMC,EAAarC,KAAKsC,eAAeF,GACvC,MAAO,CACHxC,KAAMyC,EAAWzC,MAAQyC,EAAWxC,MACpCA,MAAOwC,EAAWxC,MAClBiB,SAAUuB,EAAWvB,SACxB,G,CAOT,MAAMyB,EAAqB,GAC3B,IAAK,MAAMC,KAAKnD,EAAc,CAC1B,IAAK,MAAME,KAASH,EAAQ,CACxBmD,EAASE,KAAK9C,EAAaJ,EAAOiD,G,EAG1C,OAAOD,C,CAmCHD,eACJF,GAEA,UAAWA,IAAU,SAAU,CAC3B,MAAO,CAAEvC,MAAOuC,E,CAEpB,OAAOA,C,CAGH3B,oB,MACJ,QAAOiC,EAAA1C,KAAKmC,WAAO,MAAAO,SAAA,SAAAA,EAAEC,QAAS,C,CAG1BhB,iBACJ,GAAI3B,KAAK4C,YAAc,EAAG,CACtB,OAAO5C,KAAK4C,W,CAIhB,IAAK5C,KAAKS,oBAAqB,CAC3B,OAAO,E,CAIX,MAAM0B,EAAUnC,KAAKE,aACrB,OAAOiC,EAAQQ,OAAS,EAAIR,EAAQQ,OAAS,C"}

package/dist/types/components/color-picker/color-picker-palette.d.ts

@@ -31,6 +31,10 @@ export declare class Palette implements FormComponent {
    * invalid.
    */
   invalid: boolean;
+  /**
+   * Set to `false` to disallow custom color values to be typed into the input field.
+   */
+  manualInput: boolean;
   /**
    * Defines the number of columns in the color swatch grid.
    * If not provided, it will default to the number of colors in the palette.

package/dist/types/components/color-picker/color-picker.d.ts

@@ -12,9 +12,10 @@ import type { CustomColorSwatch } from './color-picker.types';
  * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
  * :::
  *
- * @exampleComponent limel-example-color-picker
- * @exampleComponent limel-example-color-picker-readonly
+ * @exampleComponent limel-example-color-picker-basic
  * @exampleComponent limel-example-color-picker-custom-palette
+ * @exampleComponent limel-example-color-picker-manual-input
+ * @exampleComponent limel-example-color-picker-composite
  */
 export declare class ColorPicker implements FormComponent {
   /**
@@ -60,6 +61,12 @@ export declare class ColorPicker implements FormComponent {
    * when the field is focused and empty.
    */
   placeholder: string;
+  /**
+   * Set to `false` to disallow custom color values to be typed into the input field.
+   * Setting this to `false` does not completely disable the color picker.
+   * It will only allow users to pick from the provided color palette.
+   */
+  manualInput: boolean;
   /**
    * An array of either color value strings, or objects with a `name` and a `value`,
    * which replaces the default palette. Any valid CSS color format is accepted as value

package/dist/types/components.d.ts

@@ -947,9 +947,10 @@ export namespace Components {
      * :::note
      * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
      * :::
-     * @exampleComponent limel-example-color-picker
-     * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-basic
      * @exampleComponent limel-example-color-picker-custom-palette
+     * @exampleComponent limel-example-color-picker-manual-input
+     * @exampleComponent limel-example-color-picker-composite
      */
     interface LimelColorPicker {
         /**
@@ -968,6 +969,10 @@ export namespace Components {
           * The label of the input field
          */
         "label": string;
+        /**
+          * Set to `false` to disallow custom color values to be typed into the input field. Setting this to `false` does not completely disable the color picker. It will only allow users to pick from the provided color palette.
+         */
+        "manualInput": boolean;
         /**
           * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
          */
@@ -1017,6 +1022,10 @@ export namespace Components {
           * Label of the input field
          */
         "label": string;
+        /**
+          * Set to `false` to disallow custom color values to be typed into the input field.
+         */
+        "manualInput": boolean;
         /**
           * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
          */
@@ -3902,9 +3911,10 @@ declare global {
      * :::note
      * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
      * :::
-     * @exampleComponent limel-example-color-picker
-     * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-basic
      * @exampleComponent limel-example-color-picker-custom-palette
+     * @exampleComponent limel-example-color-picker-manual-input
+     * @exampleComponent limel-example-color-picker-composite
      */
     interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
     }
@@ -6013,9 +6023,10 @@ declare namespace LocalJSX {
      * :::note
      * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
      * :::
-     * @exampleComponent limel-example-color-picker
-     * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-basic
      * @exampleComponent limel-example-color-picker-custom-palette
+     * @exampleComponent limel-example-color-picker-manual-input
+     * @exampleComponent limel-example-color-picker-composite
      */
     interface LimelColorPicker {
         /**
@@ -6034,6 +6045,10 @@ declare namespace LocalJSX {
           * The label of the input field
          */
         "label"?: string;
+        /**
+          * Set to `false` to disallow custom color values to be typed into the input field. Setting this to `false` does not completely disable the color picker. It will only allow users to pick from the provided color palette.
+         */
+        "manualInput"?: boolean;
         /**
           * Emits chosen value to the parent component
          */
@@ -6087,6 +6102,10 @@ declare namespace LocalJSX {
           * Label of the input field
          */
         "label"?: string;
+        /**
+          * Set to `false` to disallow custom color values to be typed into the input field.
+         */
+        "manualInput"?: boolean;
         /**
           * Emits chosen value to the parent component
          */
@@ -9059,9 +9078,10 @@ declare module "@stencil/core" {
              * :::note
              * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
              * :::
-             * @exampleComponent limel-example-color-picker
-             * @exampleComponent limel-example-color-picker-readonly
+             * @exampleComponent limel-example-color-picker-basic
              * @exampleComponent limel-example-color-picker-custom-palette
+             * @exampleComponent limel-example-color-picker-manual-input
+             * @exampleComponent limel-example-color-picker-composite
              */
             "limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.27.0",
+  "version": "38.28.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-0345965e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getSwatchValue","getSwatchName","createSwatch","name","value","colorPickerPaletteCss","Palette","this","renderSwatches","getPalette","map","renderSwatchButton","swatch","index","isSelected","classList","usesCustomPalette","h","class","style","title","disabled","key","onClick","handleSwatchClick","handleChange","event","stopPropagation","change","emit","detail","newValue","render","background","getColumnCount","label","helperText","onChange","required","invalid","placeholder","palette","entry","normalized","normalizeEntry","swatches","b","push","_a","length","columnCount"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport interface Swatch {\n    name: string;\n    value: string;\n    disabled?: boolean;\n}\n\n/**\n * Returns the CSS variable name holding the RGB triplet for the color & brightness.\n *\n * @param color the base color identifier (e.g. \"red\", \"blue\")\n * @param brightness the brightness variant (e.g. \"light\", \"default\")\n * @returns CSS variable name in the form --color-{color}-{brightness}\n */\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\n/**\n * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))\n * @param color\n * @param brightness\n */\nexport function getSwatchValue(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n\n/**\n * Swatch name: human readable label like \"red default\"\n * @param color\n * @param brightness\n */\nexport function getSwatchName(color: string, brightness: string): string {\n    return `${color} ${brightness}`;\n}\n\n/**\n * Convenience factory returning both name & value.\n * @param color\n * @param brightness\n */\nexport function createSwatch(color: string, brightness: string): Swatch {\n    return {\n        name: getSwatchName(color, brightness),\n        value: getSwatchValue(color, brightness),\n    };\n}\n\n/**\n * Returns the CSS color value for the given color and brightness.\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n    return getSwatchValue(color, brightness);\n}\n","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker-palette) {\n    --limel-color-palette-gap: 0.25rem;\n    --limel-color-palette-max-column-count: 25;\n    --limel-color-palette-min-width: 8rem;\n    box-sizing: border-box;\n\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 0.75rem;\n}\n\n*,\n*:before,\n:after {\n    box-sizing: border-box;\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: var(--limel-color-palette-gap);\n    grid-template-columns: repeat(\n        min(\n            var(--color-picker-column-count),\n            var(--limel-color-palette-max-column-count)\n        ),\n        1fr\n    );\n    width: 100%;\n    max-width: 58rem;\n    min-width: var(--limel-color-palette-min-width);\n}\n\n.chosen-color-name {\n    display: flex;\n    gap: 0.5rem;\n}\n\nlimel-input-field {\n    flex-grow: 1;\n    width: min-content;\n}\n\n.chosen-color-preview {\n    flex-shrink: 0;\n    isolation: isolate;\n\n    position: relative;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border: 1px solid rgba(var(--contrast-700), 0.65);\n    border-radius: 50%;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\nbutton.swatch {\n    all: unset;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    max-width: 3rem;\n    min-width: max(\n        2rem,\n        100% /\n            min(\n                var(--color-picker-column-count),\n                var(--limel-color-palette-max-column-count)\n            ) -\n            (\n                min(\n                        var(--color-picker-column-count),\n                        var(--limel-color-palette-max-column-count)\n                    ) -\n                    1\n            ) *\n            var(--limel-color-palette-gap)\n    );\n    aspect-ratio: 1;\n    border-radius: 0.1875rem;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // Since the background color will be overwritten by the mixin,\n    // we need to set it explicitly here and repeated in the mixin.\n    background-color: var(--limel-color-picker-swatch-color);\n    &:not([disabled]) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--limel-color-picker-swatch-color),\n            $background-color--hovered: var(--limel-color-picker-swatch-color)\n        );\n    }\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.125rem rgb(var(--contrast-100)) inset;\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n        box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset;\n\n        &:after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            margin: auto;\n            width: 0.125rem;\n            height: 100%;\n\n            opacity: 0.6;\n            rotate: 45deg;\n            border-radius: 1rem;\n            background-color: rgb(var(--contrast-100));\n        }\n    }\n}\n\nbutton.swatch--selected {\n    box-shadow: var(--button-shadow-inset);\n\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette.\n     */\n    @Prop({ reflect: true })\n    public columnCount?: number;\n\n    /**\n     * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n     */\n    @Prop()\n    public palette?: CustomPalette;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div\n                class=\"color-picker-palette\"\n                style={{\n                    '--color-picker-column-count': `${this.getColumnCount()}`,\n                }}\n            >\n                {this.renderSwatches()}\n            </div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return this.getPalette().map(this.renderSwatchButton);\n    };\n\n    private getPalette(): Swatch[] {\n        if (this.usesCustomPalette()) {\n            return (this.palette || []).map((entry) => {\n                const normalized = this.normalizeEntry(entry);\n                return {\n                    name: normalized.name || normalized.value,\n                    value: normalized.value,\n                    disabled: normalized.disabled,\n                };\n            });\n        }\n\n        // Order default swatches by brightness first, then by color.\n        // This gives a more intuitive CSS grid layout logic, and\n        // enables adding the `columnCount` prop.\n        const swatches: Swatch[] = [];\n        for (const b of brightnesses) {\n            for (const color of colors) {\n                swatches.push(createSwatch(color, b));\n            }\n        }\n        return swatches;\n    }\n\n    private renderSwatchButton = (swatch: Swatch, index: number) => {\n        const isSelected = this.value === swatch.value;\n        const classList = {\n            swatch: true,\n            'swatch--selected': isSelected,\n            'custom-swatch': this.usesCustomPalette(),\n        };\n\n        return (\n            <button\n                class={classList}\n                style={{ '--limel-color-picker-swatch-color': swatch.value }}\n                title={swatch.name}\n                disabled={swatch.disabled}\n                data-index={index}\n                key={index}\n                onClick={this.handleSwatchClick(swatch.value)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n        event.stopPropagation();\n        const newValue = this.value === value ? '' : value;\n        this.change.emit(newValue);\n    };\n\n    private normalizeEntry(\n        entry: string | CustomColorSwatch\n    ): CustomColorSwatch {\n        if (typeof entry === 'string') {\n            return { value: entry };\n        }\n        return entry;\n    }\n\n    private usesCustomPalette(): boolean {\n        return this.palette?.length > 0;\n    }\n\n    private getColumnCount(): number {\n        if (this.columnCount > 0) {\n            return this.columnCount;\n        }\n\n        // Default palette: fixed 20 columns (one per base color)\n        if (!this.usesCustomPalette()) {\n            return 20;\n        }\n\n        // Custom palette: span all provided swatches unless empty\n        const palette = this.getPalette();\n        return palette.length > 0 ? palette.length : 1;\n    }\n}\n"],"mappings":"kDAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAepDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAOgBC,EAAeF,EAAeC,GAC1C,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,C,SAOgBE,EAAcH,EAAeC,GACzC,MAAO,GAAGD,KAASC,GACvB,C,SAOgBG,EAAaJ,EAAeC,GACxC,MAAO,CACHI,KAAMF,EAAcH,EAAOC,GAC3BK,MAAOJ,EAAeF,EAAOC,GAErC,CCtEA,MAAMM,EAAwB,whK,MCajBC,EAAO,M,wDAqFRC,KAAAC,eAAiB,IACdD,KAAKE,aAAaC,IAAIH,KAAKI,oBA2B9BJ,KAAAI,mBAAqB,CAACC,EAAgBC,KAC1C,MAAMC,EAAaP,KAAKH,QAAUQ,EAAOR,MACzC,MAAMW,EAAY,CACdH,OAAQ,KACR,mBAAoBE,EACpB,gBAAiBP,KAAKS,qBAG1B,OACIC,EAAA,UACIC,MAAOH,EACPI,MAAO,CAAE,oCAAqCP,EAAOR,OACrDgB,MAAOR,EAAOT,KACdkB,SAAUT,EAAOS,SAAQ,aACbR,EACZS,IAAKT,EACLU,QAAShB,KAAKiB,kBAAkBZ,EAAOR,QACzC,EAIFG,KAAAkB,aAAgBC,IACpBA,EAAMC,kBACNpB,KAAKqB,OAAOC,KAAKH,EAAMI,OAAO,EAG1BvB,KAAAiB,kBAAqBpB,GAAmBsB,IAC5CA,EAAMC,kBACN,MAAMI,EAAWxB,KAAKH,QAAUA,EAAQ,GAAKA,EAC7CG,KAAKqB,OAAOC,KAAKE,EAAS,E,oIAzGb,M,kDAqBVC,SACH,MAAMC,EAAa1B,KAAKH,MAAQ,CAAE,eAAgBG,KAAKH,OAAU,GAEjE,MAAO,CACHa,EAAA,OACIC,MAAM,uBACNC,MAAO,CACH,8BAA+B,GAAGZ,KAAK2B,qBAG1C3B,KAAKC,kBAEVS,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIkB,MAAO5B,KAAK4B,MACZC,WAAY7B,KAAK6B,WACjBhC,MAAOG,KAAKH,MACZiC,SAAU9B,KAAKkB,aACfa,SAAU/B,KAAK+B,SACfC,QAAShC,KAAKgC,QACdC,YAAajC,KAAKiC,cAEtBvB,EAAA,OAAKC,MAAM,uBAAuBC,MAAOc,K,CAS7CxB,aACJ,GAAIF,KAAKS,oBAAqB,CAC1B,OAAQT,KAAKkC,SAAW,IAAI/B,KAAKgC,IAC7B,MAAMC,EAAapC,KAAKqC,eAAeF,GACvC,MAAO,CACHvC,KAAMwC,EAAWxC,MAAQwC,EAAWvC,MACpCA,MAAOuC,EAAWvC,MAClBiB,SAAUsB,EAAWtB,SACxB,G,CAOT,MAAMwB,EAAqB,GAC3B,IAAK,MAAMC,KAAKlD,EAAc,CAC1B,IAAK,MAAME,KAASH,EAAQ,CACxBkD,EAASE,KAAK7C,EAAaJ,EAAOgD,G,EAG1C,OAAOD,C,CAmCHD,eACJF,GAEA,UAAWA,IAAU,SAAU,CAC3B,MAAO,CAAEtC,MAAOsC,E,CAEpB,OAAOA,C,CAGH1B,oB,MACJ,QAAOgC,EAAAzC,KAAKkC,WAAO,MAAAO,SAAA,SAAAA,EAAEC,QAAS,C,CAG1Bf,iBACJ,GAAI3B,KAAK2C,YAAc,EAAG,CACtB,OAAO3C,KAAK2C,W,CAIhB,IAAK3C,KAAKS,oBAAqB,CAC3B,OAAO,E,CAIX,MAAMyB,EAAUlC,KAAKE,aACrB,OAAOgC,EAAQQ,OAAS,EAAIR,EAAQQ,OAAS,C"}

package/dist/lime-elements/p-e1213871.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","placeholder","invalid","onChange","handleChange","required","palette","columnCount","paletteColumnCount","background","slot","style","role","onClick","openPopover","id","disabled","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render","Host"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n * @exampleComponent limel-example-color-picker-custom-palette\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,8uI,MCgCVC,EAAW,M,wDAgGZC,KAAAC,YAAc,MAqBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,YAAanB,KAAKmB,YAClBC,QAASpB,KAAKoB,QACdC,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfC,QAASxB,KAAKwB,QACdC,YAAazB,KAAK0B,qBAEV,EAIhB1B,KAAAS,oBAAsB,KAC1B,MAAMkB,EAAa3B,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIuB,KAAK,UACLC,MAAOF,EACPG,KAAK,SACLC,QAAS/B,KAAKgC,YACdC,GAAG,iBACHC,SAAUlC,KAAKG,UAAYH,KAAKkC,UAClC,EAIFlC,KAAAgB,6BACJmB,IAEAnC,KAAKoC,eAAiBD,CAAO,EAGzBnC,KAAAgC,YAAeK,IACnBA,EAAMC,kBACNtC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBuB,IACtBA,EAAMC,kBACNtC,KAAKW,OAAS,KAAK,EAGfX,KAAAsB,aAAgBe,IACpBA,EAAMC,kBACNtC,KAAKuC,OAAOC,KAAKH,EAAMI,OAAO,E,sIAzJhB,M,cAQA,M,aAOD,M,gGAgCA,K,CAEVC,qB,MACH,GAAI1C,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnB0C,EAAA3C,KAAKoC,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,OACIxC,EAACyC,EAAI,KACA9C,KAAKE,gBACLF,KAAKQ,sBACNH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZI,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfpB,SAAUH,KAAKG,SACf+B,SAAUlC,KAAKkC,SACfd,QAASpB,KAAKoB,QACdD,YAAanB,KAAKmB,c"}