npm - @limetech/lime-elements - Versions diffs - 38.23.1 → 38.23.2 - Mend

@limetech/lime-elements 38.23.1 → 38.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,12 @@
+## [38.23.2](https://github.com/Lundalogik/lime-elements/compare/v38.23.1...v38.23.2) (2025-09-08)
+### Bug Fixes
+* **chip:** ensure chessboard background effect is cross-browser reliable ([f5d8d90](https://github.com/Lundalogik/lime-elements/commit/f5d8d9048c7ff0be0b4a284e35a85da24a8b7ac1))
+* **color-picker:** ensure chessboard background effect is cross-browser reliable ([c105009](https://github.com/Lundalogik/lime-elements/commit/c1050090fd8c9cf8545248b2fecec25c91ac6ed8))
 ## [38.23.1](https://github.com/Lundalogik/lime-elements/compare/v38.23.0...v38.23.1) (2025-09-03)

package/dist/cjs/limel-chip_2.cjs.entry.js CHANGED Viewed

@@ -26,7 +26,7 @@ require('./_baseIsEqual-2203758e.js');
 require('./eq-282c9b48.js');
 require('./_isIndex-b40f4fc5.js');
-const chipCss = "@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:min(var(--chip-max-width, 100%), 25rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip: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(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover,.chip:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.chip:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}.chip: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);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");background-size:0.5rem;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem;font-size:var(--limel-theme-default-font-size)}.trailing-button{all:unset;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:transparent;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover,.trailing-button:focus,.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}.trailing-button:hover,.trailing-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.trailing-button:hover{box-shadow:var(--button-shadow-hovered)}.trailing-button: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)}.trailing-button:hover,.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-menu[open] button[slot=trigger]{box-shadow:var(--button-shadow-inset)}.text{transition:padding-left 0.4s ease}limel-linear-progress{position:absolute;z-index:1;margin:auto;left:0.25rem;width:1.25rem}:host(limel-chip[loading]) .chip:before{content:\"\";position:absolute;left:0;width:var(--limel-chip-height);height:var(--limel-chip-height);border-radius:50%;scale:0.9;background-color:rgba(var(--contrast-600), 0.8)}:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text{padding-left:calc(var(--limel-chip-height) + 0.25rem)}div[role=progressbar]{--limel-chip-progressbar-offset:0.1875rem;--limel-chip-progressbar-stripe-color:rgb(var(--contrast-100), 0.3);--limel-chip-progressbar-stripe-size:1.5rem;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:end;inset:var(--limel-chip-progressbar-offset);max-width:calc(100% - var(--limel-chip-progressbar-offset) * 2);border-radius:inherit;background-color:var(--chip-progress-color, rgb(var(--contrast-700)));width:var(--limel-chip-progress-percentage);opacity:0.8;mix-blend-mode:var(--limel-chip-progress-mix-blend-mode)}div[role=progressbar]:after{content:\"\";transform:translate3d(0, 0, 0);position:absolute;inset:1px;background-image:linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);z-index:1;background-size:var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);animation:move 2.5s linear infinite;border-radius:inherit}@media (prefers-reduced-motion){div[role=progressbar]:after{animation:none}}@keyframes move{0%{background-position:0 0}100%{background-position:calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1)}}";
+const chipCss = "@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:min(var(--chip-max-width, 100%), 25rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip: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(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover,.chip:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.chip:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}.chip: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);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{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;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem;font-size:var(--limel-theme-default-font-size)}.trailing-button{all:unset;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:transparent;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover,.trailing-button:focus,.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}.trailing-button:hover,.trailing-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.trailing-button:hover{box-shadow:var(--button-shadow-hovered)}.trailing-button: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)}.trailing-button:hover,.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-menu[open] button[slot=trigger]{box-shadow:var(--button-shadow-inset)}.text{transition:padding-left 0.4s ease}limel-linear-progress{position:absolute;z-index:1;margin:auto;left:0.25rem;width:1.25rem}:host(limel-chip[loading]) .chip:before{content:\"\";position:absolute;left:0;width:var(--limel-chip-height);height:var(--limel-chip-height);border-radius:50%;scale:0.9;background-color:rgba(var(--contrast-600), 0.8)}:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text{padding-left:calc(var(--limel-chip-height) + 0.25rem)}div[role=progressbar]{--limel-chip-progressbar-offset:0.1875rem;--limel-chip-progressbar-stripe-color:rgb(var(--contrast-100), 0.3);--limel-chip-progressbar-stripe-size:1.5rem;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:end;inset:var(--limel-chip-progressbar-offset);max-width:calc(100% - var(--limel-chip-progressbar-offset) * 2);border-radius:inherit;background-color:var(--chip-progress-color, rgb(var(--contrast-700)));width:var(--limel-chip-progress-percentage);opacity:0.8;mix-blend-mode:var(--limel-chip-progress-mix-blend-mode)}div[role=progressbar]:after{content:\"\";transform:translate3d(0, 0, 0);position:absolute;inset:1px;background-image:linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);z-index:1;background-size:var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);animation:move 2.5s linear infinite;border-radius:inherit}@media (prefers-reduced-motion){div[role=progressbar]:after{animation:none}}@keyframes move{0%{background-position:0 0}100%{background-position:calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1)}}";
 const Chip = class {
   constructor(hostRef) {

package/dist/cjs/limel-chip_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-chip.limel-chip-set.entry.cjs.js","mappings":"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","names":["h","getRel","DELETE","BACKSPACE","translate","makeEnterClickable","removeEnterClickable","Host","getIconName","isEmpty","ARROW_LEFT","ARROW_RIGHT","ENTER","ESCAPE","createRandomString","MDCTextField","isEqual","index","getHref","getTarget"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n* @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.\n* @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.\n/\n\n:host(limel-chip) {\n --limel-chip-height: var(--limel-chip-size, 1.75rem);\n --limel-chip-gap: 0.5rem;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n\n:host(limel-chip[size='small']) {\n --limel-chip-height: 1.5rem;\n --limel-chip-gap: 0.25rem;\n}\n\n {\n box-sizing: border-box;\n}\n\n.chip {\n all: unset;\n position: relative;\n\n min-width: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n max-width: min(var(--chip-max-width, 100%), 25rem);\n height: var(--limel-chip-height);\n\n border-radius: var(--limel-chip-height);\n font-size: clamp(\n 0.8125rem /* 13px /,\n calc(var(--limel-chip-height) - 0.875rem / 14px /),\n 1rem\n );\n padding: 0 0.125rem;\n\n &:has(limel-icon),\n &:has(img) {\n .text {\n padding-left: 0;\n }\n }\n\n &:not([disabled]) {\n @include mixins.visualize-keyboard-focus;\n @include mixins.is-elevated-inset-clickable;\n }\n\n &:has(limel-badge) {\n padding-right: 0.375rem;\n\n .text {\n padding-right: 0;\n }\n }\n\n &:has(+ .remove-button:hover) {\n box-shadow: var(--shadow-depth-8-error);\n }\n\n &:has(+ limel-menu),\n &:has(+ .trailing-button) {\n padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n .text {\n padding-right: 0;\n }\n }\n}\n\n:host(limel-chip[disabled]:not([disabled='false'])) {\n .chip {\n // Similar to `limel-button[disabled]`\n color: rgba(var(--contrast-1600), 0.37);\n background-color: rgba(var(--contrast-1600), 0.1);\n box-shadow: none;\n }\n}\n\n:host(limel-chip[readonly]:not([readonly='false'])) {\n .chip {\n box-shadow: 0 0 0 1px\n var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));\n }\n}\n\n:host(limel-chip[selected]:not([selected='false'])) {\n .chip {\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow:\n var(--button-shadow-inset), var(--shadow-depth-8-focused);\n }\n\n &:active {\n box-shadow: var(--button-shadow-inset-pressed);\n }\n }\n .text {\n color: var(--lime-primary-color, var(--limel-theme-primary-color));\n }\n}\n\n:host(limel-chip[type='filter']) {\n .chip {\n border-top-left-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n\n &:after {\n content: '';\n transition:\n background-color 0.4s ease 0.2s,\n box-shadow 0.6s ease 0.2s;\n box-sizing: border-box;\n position: absolute;\n bottom: 0.125rem;\n left: 0.125rem;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: rgb(var(--contrast-800), 0.8);\n box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n .chip {\n &:after {\n background-color: rgb(var(--color-green-default));\n box-shadow:\n 0 0 0.375rem 0 rgb(var(--color-green-light)),\n 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\n:host(limel-chip[invalid]) {\n .chip {\n background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n background-size: 0.5rem;\n background-color: rgb(var(--color-red-default));\n }\n\n .text {\n color: rgb(var(--color-white));\n }\n}\n\nimg,\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n}\n\nimg {\n object-fit: cover;\n border-radius: 50%;\n}\n\nlimel-icon {\n padding: 0.0625rem;\n}\n\nlimel-badge {\n pointer-events: none;\n}\n\n.text {\n @include mixins.truncate-text;\n line-height: 1.2;\n padding: 0 0.5rem;\n font-size: var(--limel-theme-default-font-size);\n}\n\n.trailing-button {\n all: unset;\n @include mixins.is-flat-clickable();\n\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin-left: calc(var(--limel-chip-height) -1 + 0.125rem);\n margin-right: 0.125rem;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n\n border-radius: 50%;\n\n svg {\n transition:\n color 0.2s ease,\n transform 0.2s ease;\n width: 1.25rem;\n }\n\n &.remove-button:hover {\n color: rgb(var(--color-red-dark));\n svg {\n transform: scale(0.8);\n }\n }\n}\n\nlimel-menu {\n button[slot='trigger'] {\n @include mixins.visualize-keyboard-focus;\n }\n\n &[open] {\n button[slot='trigger'] {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\n@import './partial-styles/_loading.scss';\n@import './partial-styles/_progress.scss';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' \| 'badge'> {\n /*\n Identifier for the chip. Must be unique.\n /\n identifier?: number \| string;\n\n /\n The value of the badge.\n /\n badge?: string \| number;\n}\n\n/\n Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n \n :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n \n Buttons:\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n \n Chips:\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n \n For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n \n @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-size\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n /\n@Component({\n tag: 'limel-chip',\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /\n Defines the language for translations.\n * Will translate the translatable strings on the components.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Label displayed on the chip\n /\n @Prop({ reflect: true })\n public text: string;\n\n /\n Icon of the chip.\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n A picture to be displayed instead of the icon on the chip.\n /\n @Prop()\n public image?: Image;\n\n /\n If supplied, the chip will become a clickable link.\n /\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /\n The value of the badge, displayed on the chip.\n /\n @Prop({ reflect: true })\n public badge?: string \| number;\n\n /\n Set to `true` to disable the chip.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n /\n @Prop({ reflect: true })\n public selected = false;\n\n /\n Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Set to `true` to render a remove button on the chip.\n /\n @Prop({ reflect: true })\n public removable = false;\n\n /\n Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n \n /\n @Prop({ reflect: true })\n public type?: ChipType = 'default';\n\n /*\n Set to `true` to put the component in the `loading` state,\n * and render an indeterminate progress indicator inside the chip.\n * This does _not_ disable the interactivity of the chip!\n /\n @Prop({ reflect: true })\n public loading? = false;\n\n /\n Reflects the current value of a progress bar on the chip,\n * visualizing the percentage of an ongoing process.\n * Must be a number between `0` and `100`.\n /\n @Prop({ reflect: true })\n public progress?: number;\n\n /\n Identifier for the chip. Must be unique.\n /\n @Prop({ reflect: true })\n public identifier?: number \| string = crypto.randomUUID();\n\n /\n Defines the size of the chip.\n /\n @Prop({ reflect: true })\n public size: 'small' \| 'default' = 'default';\n\n /\n When provided, the chip will render an ellipsis menu with the supplied items.\n * Also, this will hide the \"remove button\" when `removable={true}`, as\n * the remove button will automatically become the last item in the menu.\n /\n @Prop()\n public menuItems?: Array<MenuItem \| ListSeparator> = [];\n\n /\n Fired when clicking on the remove button of a `removable` chip.\n * The value of `identifier` is emitted as the event detail.\n /\n @Event()\n public remove: EventEmitter<number \| string>;\n\n /\n Emitted when a menu item is selected from the actions menu.\n /\n @Event()\n public menuItemSelected: EventEmitter<MenuItem>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n id={'chip-' + this.identifier}\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled \|\| this.readonly}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </button>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderAsLink = () => {\n const rel = getRel(this.link?.target, this.link?.rel);\n\n return [\n <a\n id={'chip-' + this.identifier}\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n rel={rel}\n aria-disabled={this.disabled \|\| this.readonly}\n tabindex={this.disabled \|\| this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </a>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderPicture() {\n const icon = getIconName(this.icon);\n\n if (!icon && !this.image) {\n return;\n }\n\n if (!isEmpty(this.image)) {\n return (\n <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n );\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (\n !this.removable \|\|\n this.readonly \|\|\n this.disabled \|\|\n !!this.menuItems?.length\n ) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel()}\n aria-controls={'chip-' + this.identifier}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private renderActionsMenu() {\n if (!this.menuItems?.length) {\n return;\n }\n\n const svgData =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n const menuItems = this.getMenuItems();\n\n return (\n <limel-menu\n items={menuItems}\n onSelect={this.handleActionMenuSelect}\n openDirection=\"bottom-end\"\n onCancel={this.handleActionMenuCancel}\n >\n <button\n slot=\"trigger\"\n disabled={this.disabled}\n class=\"trailing-button\"\n aria-label={this.actionMenuLabel()}\n innerHTML={svgData}\n />\n </limel-menu>\n );\n }\n\n private getMenuItems() {\n let menuItems = [...this.menuItems];\n\n if (this.removable) {\n menuItems = [\n ...menuItems,\n { separator: true },\n {\n text: this.removeChipLabel(),\n icon: {\n name: 'delete_sign',\n color: 'rgb(var(--color-red-default))',\n },\n value: '_remove',\n },\n ];\n }\n\n return menuItems;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled \|\| this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent \| KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit(this.identifier);\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n\n if (keys.includes(event.key)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return `${this.getTranslation('remove')} ${this.text}`;\n };\n\n private actionMenuLabel = (): string => {\n return this.getTranslation('file-viewer.more-actions');\n };\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-linear-progress indeterminate={true} />;\n }\n\n private renderProgressBar() {\n if (!this.progress) {\n return;\n }\n\n const currentPercentage = this.progress + '%';\n\n return (\n <div\n role=\"progressbar\"\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.progress}\n style={{\n '--limel-chip-progress-percentage': currentPercentage,\n }}\n />\n );\n }\n\n private handleActionMenuSelect = (\n event: LimelMenuCustomEvent<MenuItem>\n ) => {\n const menuItem = event.detail;\n\n if (!menuItem) {\n return;\n }\n\n if (menuItem.value === '_remove') {\n this.remove.emit(this.identifier);\n\n return;\n }\n\n this.menuItemSelected.emit(menuItem);\n };\n\n private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n event.stopPropagation();\n };\n}\n","import {\n ARROW_LEFT,\n ARROW_RIGHT,\n BACKSPACE,\n DELETE,\n ENTER,\n ESCAPE,\n} from '../../util/keycodes';\n\n/\n Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n \n @param event - event\n \n /\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n if (this.textValue.length > 0) {\n // If there is any text in the input field, keyboard input should\n // navigate the text, not the chips.\n return;\n }\n\n if (!this.value?.length) {\n // If there are no chips, there is nothing to select.\n return;\n }\n\n const isArrowLeft = event.key === ARROW_LEFT;\n const isArrowRight = event.key === ARROW_RIGHT;\n const isEnter = event.key === ENTER;\n const isDelete = event.key === DELETE;\n const isBackspace = event.key === BACKSPACE;\n const isEscape = event.key === ESCAPE;\n\n if (isArrowLeft) {\n return handleLeft(this, event);\n }\n\n if (isArrowRight) {\n return handleRight(this, event);\n }\n\n if (isEnter) {\n return handleEnter(this, event);\n }\n\n if (isDelete) {\n return handleDelete(this, event);\n }\n\n if (isBackspace) {\n return handleBackspace(this, event);\n }\n\n if (isEscape) {\n return handleEscape(this, event);\n }\n}\n\nfunction handleLeft(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = host.value.length - 1;\n\n return;\n }\n\n if (host.inputChipIndexSelected <= 0) {\n return;\n }\n\n host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = 0;\n\n return;\n }\n\n if (host.inputChipIndexSelected >= host.value.length - 1) {\n return;\n }\n\n host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.emitInteraction(host.value[host.inputChipIndexSelected]);\n }\n}\n\nfunction handleEscape(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.inputChipIndexSelected = null;\n }\n}\n\nfunction handleDelete(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n }\n}\n\nfunction handleBackspace(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n } else if (!event.repeat) {\n host.inputChipIndexSelected = host.value.length - 1;\n }\n}\n\nfunction removeChip(host) {\n if (host.inputChipIndexSelected !== null) {\n host.removeChip(host.value[host.inputChipIndexSelected].id);\n host.inputChipIndexSelected = null;\n }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n\n/\n @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n /\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.leading-icon;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n isolation: isolate;\n}\n\n:host(limel-chip-set[type='input']) {\n limel-notched-outline {\n [slot='content'] {\n min-height: shared_input-select-picker.$height-of-mdc-text-field;\n }\n }\n}\n\n:host(limel-chip-set:not([type='input'])) {\n .limel-notched-outline {\n --limel-notched-outline-border-color: transparent;\n --limel-notched-outline-background-color: transparent;\n }\n}\n\n.mdc-chip-set {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n min-height: shared_input-select-picker.$height-of-mdc-text-field;\n position: relative;\n\n &.mdc-chip-set--input {\n padding: 0.4rem 0.5rem;\n width: 100%;\n }\n\n &.has-clear-all-button {\n &.mdc-chip-set--input {\n padding-right: functions.pxToRem(\n 32\n ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n }\n }\n}\n\n.mdc-text-field__input {\n .mdc-text-field:not(.mdc-text-field--disabled) & {\n color: shared_input-select-picker.$input-text-color;\n font-size: var(--limel-theme-default-font-size) !important;\n font-family: inherit !important;\n }\n .mdc-text-field.mdc-text-field--disabled & {\n color: shared_input-select-picker.$input-text-color-disabled;\n }\n}\n\n.mdc-text-field {\n height: auto;\n cursor: text;\n flex-wrap: wrap;\n row-gap: 0.5rem;\n\n .mdc-text-field__input {\n @include shared_input-select-picker.input-field-placeholder;\n\n width: auto;\n padding: 0 0.5rem;\n\n flex-grow: 1;\n flex-shrink: 0;\n\n &.hidden {\n // This class is added, as soon as there is a chip selected and displayed\n // This input field should not be visually visible as it breaks the UI in some cases\n // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n transition: all 0s;\n opacity: 0;\n position: absolute;\n z-index: -100; // to let users interact with chips, in case they're covered\n }\n &[type='search'] {\n -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n background-color: transparent; // overides styles caused by previous line\n\n &::-webkit-search-cancel-button {\n display: none; // removes the default X button\n }\n }\n }\n}\n\n.clear-all-button {\n @include mixins.clear-all-button;\n @include mixins.visualize-keyboard-focus;\n\n position: absolute;\n right: 0.5rem;\n top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n &:focus,\n .has-chips:not(.disabled):hover &,\n .has-chips:not(.disabled).mdc-text-field--focused & {\n opacity: 1;\n outline: none;\n }\n\n .mdc-chip-set:not(.has-chips) &,\n .has-chips.disabled & {\n display: none; // Won't receive focus when disabled\n }\n}\n\n.has-leading-icon {\n &:not(.has-chips) {\n .mdc-text-field__input {\n padding-left: $leading-icon-space;\n }\n }\n\n limel-chip {\n &:first-of-type {\n margin-left: 1.5rem;\n }\n }\n\n .search-icon {\n transition: transform 0.2s ease;\n position: absolute;\n top: functions.pxToRem(9);\n left: 0.25rem;\n }\n\n limel-icon {\n background-color: transparent;\n }\n}\n\n.delimiter {\n opacity: 0.5;\n padding: 0 functions.pxToRem(2);\n color: var(--limel-theme-on-surface-color);\n}\n\nlimel-chip {\n border-radius: 2rem;\n\n &.can-be-removed {\n // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n box-shadow: var(--shadow-depth-8-error);\n }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_helper-text';\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/\n :::note\n * Regarding `click` and `interact` events:\n \n The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n \n However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n \n Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n \n Example usage:\n * ```ts\n * private handleClick(event: Event) {\n * if (event && 'Lime' in event && (event.Lime as any).chip) {\n * if ((event.Lime as { chip: Chip }).chip.href) {\n * // Chip has href, so let the browser open the link.\n * return;\n * }\n * // handle click on chip without href\n * } else {\n * // handle click elsewhere\n * }\n * }\n * ```\n * :::\n \n @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n /\n@Component({\n tag: 'limel-chip-set',\n shadow: true,\n styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n /\n List of chips for the set\n /\n @Prop()\n public value: Chip[] = [];\n\n /\n Type of chip set\n \n - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n * - `filter` renders a set of selectable chips where all are selectable.\n * - `input` renders a set of chips that can be used in conjunction with an input field\n \n If no type is set, a basic set of chips without additional functionality will be rendered\n /\n @Prop({ reflect: true })\n public type?: 'choice' \| 'filter' \| 'input';\n\n /\n Label for the chip-set\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the chipset.\n * When type is `input`, the helper text is displayed below the\n * input field when it has focus.\n * When type is not `input`, the helper text is always displayed\n * if the device is touch screen; otherwise it is shown when chip-set\n * is hovered or focused using keyboard navigation.\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n True if the chip set should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n For chip-sets of type `input`, set to `true` to disable adding and\n * removing chips, but allow interaction with existing chips in the set.\n * For any other types, setting either `readonly` or `disabled` disables\n * the chip-set.\n /\n @Prop({ reflect: true })\n public readonly: boolean = 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 For chip-sets of type `input`. Value to use for the `type` attribute on the\n * input field inside the chip-set.\n /\n @Prop({ reflect: true })\n public inputType: 'search' \| 'text' = 'text';\n\n /\n For chip-sets of type `input`. Limits the maximum number of chips.\n * When the value is `0` or not set, no limit is applied.\n /\n @Prop({ reflect: true })\n public maxItems: number;\n\n /\n True if the control requires a value\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n Search label to display when type is `input` and component is in search mode\n /\n @Prop({ reflect: true })\n public searchLabel: string;\n\n /\n Whether the input field should be emptied when the chip-set loses focus.\n /\n @Prop({ reflect: true })\n public emptyInputOnBlur: boolean = true;\n\n /\n Whether the \"Clear all\" buttons should be shown\n /\n @Prop()\n public clearAllButton: boolean = true;\n\n /\n For chip-sets of type `input`. When the value is null, no leading icon is used.\n * Leading icon to show to the far left in the text field\n /\n @Prop({ reflect: true })\n public leadingIcon: string = null;\n\n /\n For chip-set of type `input`. Sets delimiters between chips.\n /\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /\n For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n * Read more about the `autocomplete` attribute\n * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n @Prop({ reflect: true })\n public autocomplete: string = 'off';\n\n /\n Defines the language for translations.\n * Will translate the translatable strings on the components. For example, the clear all chips label.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a chip is interacted with\n /\n @Event()\n private readonly interact: EventEmitter<Chip>;\n\n /\n Dispatched when a chip is selected/deselected\n /\n @Event()\n private readonly change: EventEmitter<Chip \| Chip[]>;\n\n /\n Emitted when an input chip set has received focus and editing in the text field has started\n /\n @Event()\n private readonly startEdit: EventEmitter<void>;\n\n /\n Emitted when an input chip set has lost focus and editing in the text field has ended\n /\n @Event()\n private readonly stopEdit: EventEmitter<void>;\n\n /\n Dispatched when the input is changed for type `input`\n /\n @Event()\n private readonly input: EventEmitter<string>;\n\n @Element()\n private readonly host: HTMLLimelChipSetElement;\n\n @State()\n private editMode: boolean = false;\n\n @State()\n private textValue: string = '';\n\n @State()\n private blurred: boolean = false;\n\n @State()\n private inputChipIndexSelected: number = null;\n\n @State()\n private selectedChipIds: Array<string \| number>;\n\n private mdcTextField: MDCTextField;\n private readonly handleKeyDown = handleKeyboardEvent;\n private labelId: string;\n\n constructor() {\n this.labelId = createRandomString();\n this.renderChip = this.renderChip.bind(this);\n this.renderInputChip = this.renderInputChip.bind(this);\n this.isFull = this.isFull.bind(this);\n this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handleTextInput = this.handleTextInput.bind(this);\n this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.inputHidden = this.inputHidden.bind(this);\n this.handleDeleteAllIconClick =\n this.handleDeleteAllIconClick.bind(this);\n this.renderDelimiter = this.renderDelimiter.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length > 0) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /\n Used to find out whether the chip-set is in edit mode.\n \n @returns `true` if the chip-set is in edit mode, `false` otherwise.\n /\n @Method()\n public async getEditMode(): Promise<boolean> {\n return this.editMode;\n }\n\n /\n Used to set focus to the chip-set input field.\n \n @param emptyInput - if `true`, any text in the input is discarded\n * @returns does not return anything, but methods have to be async\n /\n @Method()\n public async setFocus(emptyInput: boolean = false) {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.editMode = true;\n if (emptyInput) {\n this.textValue = '';\n }\n\n this.host.shadowRoot.querySelector('input').focus();\n this.startEdit.emit();\n }\n\n /\n Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n * consumer control when the input is emptied.\n \n @returns does not return anything, but methods have to be async\n /\n @Method()\n public async emptyInput() {\n this.syncEmptyInput();\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field')\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n }\n\n public render() {\n const classes = {\n 'mdc-chip-set': true,\n 'mdc-text-field--with-trailing-icon': true,\n disabled: this.disabled \|\| this.readonly,\n };\n\n if (this.type) {\n classes[`mdc-chip-set--${this.type}`] = true;\n }\n\n if (this.type === 'input') {\n Object.assign(classes, {\n 'mdc-text-field': true,\n 'mdc-text-field--outlined': true,\n 'mdc-chip-set--input': true,\n 'lime-text-field--readonly': this.readonly,\n 'has-chips': this.value.length > 0,\n 'has-leading-icon': this.leadingIcon !== null,\n 'has-clear-all-button': this.clearAllButton,\n });\n }\n\n const value = this.getValue();\n\n return [\n <limel-notched-outline\n labelId={this.labelId}\n label={this.label}\n required={this.required}\n invalid={this.invalid \|\| this.isInvalid()}\n disabled={this.disabled}\n readonly={this.readonly}\n hasValue={!!this.value?.length}\n hasLeadingIcon={!!this.leadingIcon}\n hasFloatingLabel={this.floatLabelAbove()}\n >\n <div slot=\"content\" {...this.getContentProps()} class={classes}>\n {this.renderContent(value)}\n </div>\n </limel-notched-outline>,\n this.renderHelperLine(),\n ];\n }\n\n private getContentProps() {\n if (this.type === 'input') {\n return {\n onClick: this.handleTextFieldFocus,\n };\n }\n\n return {\n role: 'grid',\n };\n }\n\n private renderContent = (value: Chip[]) => {\n if (this.type === 'input') {\n return this.renderInputChips();\n }\n\n return value.map(this.renderChip);\n };\n\n private readonly getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\n }));\n };\n\n @Watch('value')\n protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.syncEmptyInput();\n this.initialize();\n }\n\n private renderInputChips() {\n return [\n this.value.map(this.renderInputChip),\n <input\n tabIndex={INPUT_FIELD_TABINDEX}\n type={this.inputType}\n id={this.labelId}\n disabled={this.readonly \|\| this.disabled}\n class={{\n 'mdc-text-field__input': true,\n hidden: this.inputHidden(),\n }}\n value={this.textValue}\n onBlur={this.handleInputBlur}\n onFocus={this.handleTextFieldFocus}\n onKeyDown={this.handleKeyDown}\n onInput={this.handleTextInput}\n // Some browsers emit a change event on input elements, we need to stop\n // that event from propagating since we are emitting our own change event\n onChange={this.inputFieldOnChange}\n placeholder={this.isFull() ? '' : this.searchLabel}\n readonly={this.isFull()}\n autocomplete={this.autocomplete}\n />,\n this.renderLeadingIcon(),\n this.renderClearAllChipsButton(),\n ];\n }\n\n private readonly floatLabelAbove = () => {\n if (\n this.value.length > 0 \|\|\n this.editMode \|\|\n this.readonly \|\|\n this.textValue\n ) {\n return true;\n }\n };\n\n private isFull(): boolean {\n return !!this.maxItems && this.value.length >= this.maxItems;\n }\n\n private isInvalid() {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n\n if (!this.required) {\n return false;\n }\n\n if (!this.blurred) {\n return false;\n }\n\n return !this.value?.length;\n }\n\n private inputFieldOnChange(event) {\n event.stopPropagation();\n }\n\n /\n Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n /\n private handleTextFieldFocus() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (this.editMode) {\n return;\n }\n\n this.editMode = true;\n this.startEdit.emit();\n }\n\n /\n Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n * additional space when the user it not typing anything\n /\n private handleInputBlur() {\n if (this.emptyInputOnBlur) {\n this.syncEmptyInput();\n }\n\n this.editMode = false;\n this.blurred = true;\n this.inputChipIndexSelected = null;\n\n // This timeout is needed in order to let a new element receive focus\n setTimeout(() => {\n this.stopEdit.emit();\n }, 0);\n }\n\n private syncEmptyInput() {\n this.textValue = '';\n }\n\n private inputHidden() {\n if (this.editMode) {\n return this.isFull();\n }\n\n // If there are chips in the picker, hide the input to avoid the input\n // being placed on a new line and adding ugly space beneath the chips.\n // If there are no chips, show the input, or the picker will look weird.\n return !!this.value?.length;\n }\n\n private handleTextInput(event) {\n event.stopPropagation();\n this.inputChipIndexSelected = null;\n this.textValue = event.target.value;\n this.input.emit(event.target.value?.trim());\n }\n\n private emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\n }\n\n private readonly hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private readonly renderHelperLine = () => {\n const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n if (!maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n const chipProps = this.getChipProps(chip, 'default');\n const isLastChip = index === chips.length - 1;\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable =\n this.type === 'input' && chip.removable && !this.readonly;\n const readonly = this.readonly && this.type !== 'input';\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n image: chip.image,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n loading: chip.loading,\n readonly: readonly,\n type: chipType,\n removable: removable,\n menuItems: chip.menuItems,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n /\n * We need to add the `chip` to the event object so that the consumer\n * can get the chip object when the chip is clicked.\n * This is necessary for the consumer to be able to handle the click\n * event itself, based on which chip was clicked, or whether the click\n * was on a chip or elsewhere. The reason the consumer can't just look\n * at the event target is that that information is hidden by the\n * shadow DOM.\n \n See documentation for the `interact` event for more information.\n */\n (event as any).Lime = { chip: chip };\n\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number \| string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number \| string): boolean {\n return this.selectedChipIds.includes(id);\n }\n\n private updateFilterTypeSelectedIds(id: number \| string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id\n );\n }\n\n private addChipIdToSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private readonly handleRemoveChip = (\n event: LimelChipCustomEvent<string \| number>\n ) => {\n this.removeChip(event.detail);\n };\n\n private readonly removeChip = (identifier: string \| number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\n };\n\n private renderLeadingIcon() {\n if (!this.leadingIcon) {\n return;\n }\n\n return (\n <i class=\"mdc-text-field__icon search-icon\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n\n private renderClearAllChipsButton() {\n if (this.disabled \|\| this.readonly \|\| !this.clearAllButton) {\n return;\n }\n\n return (\n <a\n href=\"\"\n onClick={this.handleDeleteAllIconClick}\n class=\"mdc-text-field__icon clear-all-button\"\n tabindex=\"0\"\n role=\"button\"\n title={this.clearAllChipsLabel()}\n aria-label={this.clearAllChipsLabel()}\n />\n );\n }\n\n private readonly clearAllChipsLabel = (): string => {\n return translate.get('chip-set.clear-all', this.language);\n };\n\n private handleDeleteAllIconClick(event: Event) {\n event.preventDefault();\n this.change.emit([]);\n }\n\n private renderDelimiter() {\n if (!this.delimiter) {\n return;\n }\n\n return <div class=\"delimiter\">{this.delimiter}</div>;\n }\n\n private triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor \|\|\n chip.iconBackgroundColor \|\|\n chip.iconTitle)\n ) {\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n );\n }\n }\n }\n}\n"],"version":3}
1	+ {"file":"limel-chip.limel-chip-set.entry.cjs.js","mappings":"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","names":["h","getRel","DELETE","BACKSPACE","translate","makeEnterClickable","removeEnterClickable","Host","getIconName","isEmpty","ARROW_LEFT","ARROW_RIGHT","ENTER","ESCAPE","createRandomString","MDCTextField","isEqual","index","getHref","getTarget"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n* @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.\n* @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.\n/\n\n:host(limel-chip) {\n --limel-chip-height: var(--limel-chip-size, 1.75rem);\n --limel-chip-gap: 0.5rem;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n\n:host(limel-chip[size='small']) {\n --limel-chip-height: 1.5rem;\n --limel-chip-gap: 0.25rem;\n}\n\n {\n box-sizing: border-box;\n}\n\n.chip {\n all: unset;\n position: relative;\n\n min-width: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n max-width: min(var(--chip-max-width, 100%), 25rem);\n height: var(--limel-chip-height);\n\n border-radius: var(--limel-chip-height);\n font-size: clamp(\n 0.8125rem /* 13px /,\n calc(var(--limel-chip-height) - 0.875rem / 14px /),\n 1rem\n );\n padding: 0 0.125rem;\n\n &:has(limel-icon),\n &:has(img) {\n .text {\n padding-left: 0;\n }\n }\n\n &:not([disabled]) {\n @include mixins.visualize-keyboard-focus;\n @include mixins.is-elevated-inset-clickable;\n }\n\n &:has(limel-badge) {\n padding-right: 0.375rem;\n\n .text {\n padding-right: 0;\n }\n }\n\n &:has(+ .remove-button:hover) {\n box-shadow: var(--shadow-depth-8-error);\n }\n\n &:has(+ limel-menu),\n &:has(+ .trailing-button) {\n padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n .text {\n padding-right: 0;\n }\n }\n}\n\n:host(limel-chip[disabled]:not([disabled='false'])) {\n .chip {\n // Similar to `limel-button[disabled]`\n color: rgba(var(--contrast-1600), 0.37);\n background-color: rgba(var(--contrast-1600), 0.1);\n box-shadow: none;\n }\n}\n\n:host(limel-chip[readonly]:not([readonly='false'])) {\n .chip {\n box-shadow: 0 0 0 1px\n var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));\n }\n}\n\n:host(limel-chip[selected]:not([selected='false'])) {\n .chip {\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow:\n var(--button-shadow-inset), var(--shadow-depth-8-focused);\n }\n\n &:active {\n box-shadow: var(--button-shadow-inset-pressed);\n }\n }\n .text {\n color: var(--lime-primary-color, var(--limel-theme-primary-color));\n }\n}\n\n:host(limel-chip[type='filter']) {\n .chip {\n border-top-left-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n\n &:after {\n content: '';\n transition:\n background-color 0.4s ease 0.2s,\n box-shadow 0.6s ease 0.2s;\n box-sizing: border-box;\n position: absolute;\n bottom: 0.125rem;\n left: 0.125rem;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: rgb(var(--contrast-800), 0.8);\n box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n .chip {\n &:after {\n background-color: rgb(var(--color-green-default));\n box-shadow:\n 0 0 0.375rem 0 rgb(var(--color-green-light)),\n 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\n:host(limel-chip[invalid]) {\n .chip {\n @include mixins.add-chessboard-background();\n background-color: rgb(var(--color-red-default));\n }\n\n .text {\n color: rgb(var(--color-white));\n }\n}\n\nimg,\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n}\n\nimg {\n object-fit: cover;\n border-radius: 50%;\n}\n\nlimel-icon {\n padding: 0.0625rem;\n}\n\nlimel-badge {\n pointer-events: none;\n}\n\n.text {\n @include mixins.truncate-text;\n line-height: 1.2;\n padding: 0 0.5rem;\n font-size: var(--limel-theme-default-font-size);\n}\n\n.trailing-button {\n all: unset;\n @include mixins.is-flat-clickable();\n\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin-left: calc(var(--limel-chip-height) -1 + 0.125rem);\n margin-right: 0.125rem;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n\n border-radius: 50%;\n\n svg {\n transition:\n color 0.2s ease,\n transform 0.2s ease;\n width: 1.25rem;\n }\n\n &.remove-button:hover {\n color: rgb(var(--color-red-dark));\n svg {\n transform: scale(0.8);\n }\n }\n}\n\nlimel-menu {\n button[slot='trigger'] {\n @include mixins.visualize-keyboard-focus;\n }\n\n &[open] {\n button[slot='trigger'] {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\n@import './partial-styles/_loading.scss';\n@import './partial-styles/_progress.scss';\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' \| 'badge'> {\n /*\n Identifier for the chip. Must be unique.\n /\n identifier?: number \| string;\n\n /\n The value of the badge.\n /\n badge?: string \| number;\n}\n\n/\n Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n \n :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n \n Buttons:\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n \n Chips:\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n \n For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n \n @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-size\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n /\n@Component({\n tag: 'limel-chip',\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /\n Defines the language for translations.\n * Will translate the translatable strings on the components.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Label displayed on the chip\n /\n @Prop({ reflect: true })\n public text: string;\n\n /\n Icon of the chip.\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n A picture to be displayed instead of the icon on the chip.\n /\n @Prop()\n public image?: Image;\n\n /\n If supplied, the chip will become a clickable link.\n /\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /\n The value of the badge, displayed on the chip.\n /\n @Prop({ reflect: true })\n public badge?: string \| number;\n\n /\n Set to `true` to disable the chip.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n /\n @Prop({ reflect: true })\n public selected = false;\n\n /\n Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Set to `true` to render a remove button on the chip.\n /\n @Prop({ reflect: true })\n public removable = false;\n\n /\n Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n \n /\n @Prop({ reflect: true })\n public type?: ChipType = 'default';\n\n /*\n Set to `true` to put the component in the `loading` state,\n * and render an indeterminate progress indicator inside the chip.\n * This does _not_ disable the interactivity of the chip!\n /\n @Prop({ reflect: true })\n public loading? = false;\n\n /\n Reflects the current value of a progress bar on the chip,\n * visualizing the percentage of an ongoing process.\n * Must be a number between `0` and `100`.\n /\n @Prop({ reflect: true })\n public progress?: number;\n\n /\n Identifier for the chip. Must be unique.\n /\n @Prop({ reflect: true })\n public identifier?: number \| string = crypto.randomUUID();\n\n /\n Defines the size of the chip.\n /\n @Prop({ reflect: true })\n public size: 'small' \| 'default' = 'default';\n\n /\n When provided, the chip will render an ellipsis menu with the supplied items.\n * Also, this will hide the \"remove button\" when `removable={true}`, as\n * the remove button will automatically become the last item in the menu.\n /\n @Prop()\n public menuItems?: Array<MenuItem \| ListSeparator> = [];\n\n /\n Fired when clicking on the remove button of a `removable` chip.\n * The value of `identifier` is emitted as the event detail.\n /\n @Event()\n public remove: EventEmitter<number \| string>;\n\n /\n Emitted when a menu item is selected from the actions menu.\n /\n @Event()\n public menuItemSelected: EventEmitter<MenuItem>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n id={'chip-' + this.identifier}\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled \|\| this.readonly}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </button>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderAsLink = () => {\n const rel = getRel(this.link?.target, this.link?.rel);\n\n return [\n <a\n id={'chip-' + this.identifier}\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n rel={rel}\n aria-disabled={this.disabled \|\| this.readonly}\n tabindex={this.disabled \|\| this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderSpinner()}\n {this.renderPicture()}\n {this.renderLabel()}\n {this.renderBadge()}\n {this.renderProgressBar()}\n </a>,\n this.renderRemoveButton(),\n this.renderActionsMenu(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderPicture() {\n const icon = getIconName(this.icon);\n\n if (!icon && !this.image) {\n return;\n }\n\n if (!isEmpty(this.image)) {\n return (\n <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n );\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (\n !this.removable \|\|\n this.readonly \|\|\n this.disabled \|\|\n !!this.menuItems?.length\n ) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel()}\n aria-controls={'chip-' + this.identifier}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private renderActionsMenu() {\n if (!this.menuItems?.length) {\n return;\n }\n\n const svgData =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n const menuItems = this.getMenuItems();\n\n return (\n <limel-menu\n items={menuItems}\n onSelect={this.handleActionMenuSelect}\n openDirection=\"bottom-end\"\n onCancel={this.handleActionMenuCancel}\n >\n <button\n slot=\"trigger\"\n disabled={this.disabled}\n class=\"trailing-button\"\n aria-label={this.actionMenuLabel()}\n innerHTML={svgData}\n />\n </limel-menu>\n );\n }\n\n private getMenuItems() {\n let menuItems = [...this.menuItems];\n\n if (this.removable) {\n menuItems = [\n ...menuItems,\n { separator: true },\n {\n text: this.removeChipLabel(),\n icon: {\n name: 'delete_sign',\n color: 'rgb(var(--color-red-default))',\n },\n value: '_remove',\n },\n ];\n }\n\n return menuItems;\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled \|\| this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent \| KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit(this.identifier);\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n\n if (keys.includes(event.key)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return `${this.getTranslation('remove')} ${this.text}`;\n };\n\n private actionMenuLabel = (): string => {\n return this.getTranslation('file-viewer.more-actions');\n };\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private renderSpinner() {\n if (!this.loading) {\n return;\n }\n\n return <limel-linear-progress indeterminate={true} />;\n }\n\n private renderProgressBar() {\n if (!this.progress) {\n return;\n }\n\n const currentPercentage = this.progress + '%';\n\n return (\n <div\n role=\"progressbar\"\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.progress}\n style={{\n '--limel-chip-progress-percentage': currentPercentage,\n }}\n />\n );\n }\n\n private handleActionMenuSelect = (\n event: LimelMenuCustomEvent<MenuItem>\n ) => {\n const menuItem = event.detail;\n\n if (!menuItem) {\n return;\n }\n\n if (menuItem.value === '_remove') {\n this.remove.emit(this.identifier);\n\n return;\n }\n\n this.menuItemSelected.emit(menuItem);\n };\n\n private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n event.stopPropagation();\n };\n}\n","import {\n ARROW_LEFT,\n ARROW_RIGHT,\n BACKSPACE,\n DELETE,\n ENTER,\n ESCAPE,\n} from '../../util/keycodes';\n\n/\n Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n \n @param event - event\n \n /\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n if (this.textValue.length > 0) {\n // If there is any text in the input field, keyboard input should\n // navigate the text, not the chips.\n return;\n }\n\n if (!this.value?.length) {\n // If there are no chips, there is nothing to select.\n return;\n }\n\n const isArrowLeft = event.key === ARROW_LEFT;\n const isArrowRight = event.key === ARROW_RIGHT;\n const isEnter = event.key === ENTER;\n const isDelete = event.key === DELETE;\n const isBackspace = event.key === BACKSPACE;\n const isEscape = event.key === ESCAPE;\n\n if (isArrowLeft) {\n return handleLeft(this, event);\n }\n\n if (isArrowRight) {\n return handleRight(this, event);\n }\n\n if (isEnter) {\n return handleEnter(this, event);\n }\n\n if (isDelete) {\n return handleDelete(this, event);\n }\n\n if (isBackspace) {\n return handleBackspace(this, event);\n }\n\n if (isEscape) {\n return handleEscape(this, event);\n }\n}\n\nfunction handleLeft(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = host.value.length - 1;\n\n return;\n }\n\n if (host.inputChipIndexSelected <= 0) {\n return;\n }\n\n host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n event.preventDefault();\n if (host.inputChipIndexSelected === null) {\n host.inputChipIndexSelected = 0;\n\n return;\n }\n\n if (host.inputChipIndexSelected >= host.value.length - 1) {\n return;\n }\n\n host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.emitInteraction(host.value[host.inputChipIndexSelected]);\n }\n}\n\nfunction handleEscape(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n host.inputChipIndexSelected = null;\n }\n}\n\nfunction handleDelete(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n }\n}\n\nfunction handleBackspace(host, event) {\n if (host.inputChipIndexSelected !== null) {\n event.preventDefault();\n removeChip(host);\n } else if (!event.repeat) {\n host.inputChipIndexSelected = host.value.length - 1;\n }\n}\n\nfunction removeChip(host) {\n if (host.inputChipIndexSelected !== null) {\n host.removeChip(host.value[host.inputChipIndexSelected].id);\n host.inputChipIndexSelected = null;\n }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n\n/\n @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n /\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.leading-icon;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n isolation: isolate;\n}\n\n:host(limel-chip-set[type='input']) {\n limel-notched-outline {\n [slot='content'] {\n min-height: shared_input-select-picker.$height-of-mdc-text-field;\n }\n }\n}\n\n:host(limel-chip-set:not([type='input'])) {\n .limel-notched-outline {\n --limel-notched-outline-border-color: transparent;\n --limel-notched-outline-background-color: transparent;\n }\n}\n\n.mdc-chip-set {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n min-height: shared_input-select-picker.$height-of-mdc-text-field;\n position: relative;\n\n &.mdc-chip-set--input {\n padding: 0.4rem 0.5rem;\n width: 100%;\n }\n\n &.has-clear-all-button {\n &.mdc-chip-set--input {\n padding-right: functions.pxToRem(\n 32\n ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n }\n }\n}\n\n.mdc-text-field__input {\n .mdc-text-field:not(.mdc-text-field--disabled) & {\n color: shared_input-select-picker.$input-text-color;\n font-size: var(--limel-theme-default-font-size) !important;\n font-family: inherit !important;\n }\n .mdc-text-field.mdc-text-field--disabled & {\n color: shared_input-select-picker.$input-text-color-disabled;\n }\n}\n\n.mdc-text-field {\n height: auto;\n cursor: text;\n flex-wrap: wrap;\n row-gap: 0.5rem;\n\n .mdc-text-field__input {\n @include shared_input-select-picker.input-field-placeholder;\n\n width: auto;\n padding: 0 0.5rem;\n\n flex-grow: 1;\n flex-shrink: 0;\n\n &.hidden {\n // This class is added, as soon as there is a chip selected and displayed\n // This input field should not be visually visible as it breaks the UI in some cases\n // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n transition: all 0s;\n opacity: 0;\n position: absolute;\n z-index: -100; // to let users interact with chips, in case they're covered\n }\n &[type='search'] {\n -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n background-color: transparent; // overides styles caused by previous line\n\n &::-webkit-search-cancel-button {\n display: none; // removes the default X button\n }\n }\n }\n}\n\n.clear-all-button {\n @include mixins.clear-all-button;\n @include mixins.visualize-keyboard-focus;\n\n position: absolute;\n right: 0.5rem;\n top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n &:focus,\n .has-chips:not(.disabled):hover &,\n .has-chips:not(.disabled).mdc-text-field--focused & {\n opacity: 1;\n outline: none;\n }\n\n .mdc-chip-set:not(.has-chips) &,\n .has-chips.disabled & {\n display: none; // Won't receive focus when disabled\n }\n}\n\n.has-leading-icon {\n &:not(.has-chips) {\n .mdc-text-field__input {\n padding-left: $leading-icon-space;\n }\n }\n\n limel-chip {\n &:first-of-type {\n margin-left: 1.5rem;\n }\n }\n\n .search-icon {\n transition: transform 0.2s ease;\n position: absolute;\n top: functions.pxToRem(9);\n left: 0.25rem;\n }\n\n limel-icon {\n background-color: transparent;\n }\n}\n\n.delimiter {\n opacity: 0.5;\n padding: 0 functions.pxToRem(2);\n color: var(--limel-theme-on-surface-color);\n}\n\nlimel-chip {\n border-radius: 2rem;\n\n &.can-be-removed {\n // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n box-shadow: var(--shadow-depth-8-error);\n }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_helper-text';\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/\n :::note\n * Regarding `click` and `interact` events:\n \n The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n \n However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n \n Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n \n Example usage:\n * ```ts\n * private handleClick(event: Event) {\n * if (event && 'Lime' in event && (event.Lime as any).chip) {\n * if ((event.Lime as { chip: Chip }).chip.href) {\n * // Chip has href, so let the browser open the link.\n * return;\n * }\n * // handle click on chip without href\n * } else {\n * // handle click elsewhere\n * }\n * }\n * ```\n * :::\n \n @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n /\n@Component({\n tag: 'limel-chip-set',\n shadow: true,\n styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n /\n List of chips for the set\n /\n @Prop()\n public value: Chip[] = [];\n\n /\n Type of chip set\n \n - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n * - `filter` renders a set of selectable chips where all are selectable.\n * - `input` renders a set of chips that can be used in conjunction with an input field\n \n If no type is set, a basic set of chips without additional functionality will be rendered\n /\n @Prop({ reflect: true })\n public type?: 'choice' \| 'filter' \| 'input';\n\n /\n Label for the chip-set\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the chipset.\n * When type is `input`, the helper text is displayed below the\n * input field when it has focus.\n * When type is not `input`, the helper text is always displayed\n * if the device is touch screen; otherwise it is shown when chip-set\n * is hovered or focused using keyboard navigation.\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n True if the chip set should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n For chip-sets of type `input`, set to `true` to disable adding and\n * removing chips, but allow interaction with existing chips in the set.\n * For any other types, setting either `readonly` or `disabled` disables\n * the chip-set.\n /\n @Prop({ reflect: true })\n public readonly: boolean = 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 For chip-sets of type `input`. Value to use for the `type` attribute on the\n * input field inside the chip-set.\n /\n @Prop({ reflect: true })\n public inputType: 'search' \| 'text' = 'text';\n\n /\n For chip-sets of type `input`. Limits the maximum number of chips.\n * When the value is `0` or not set, no limit is applied.\n /\n @Prop({ reflect: true })\n public maxItems: number;\n\n /\n True if the control requires a value\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n Search label to display when type is `input` and component is in search mode\n /\n @Prop({ reflect: true })\n public searchLabel: string;\n\n /\n Whether the input field should be emptied when the chip-set loses focus.\n /\n @Prop({ reflect: true })\n public emptyInputOnBlur: boolean = true;\n\n /\n Whether the \"Clear all\" buttons should be shown\n /\n @Prop()\n public clearAllButton: boolean = true;\n\n /\n For chip-sets of type `input`. When the value is null, no leading icon is used.\n * Leading icon to show to the far left in the text field\n /\n @Prop({ reflect: true })\n public leadingIcon: string = null;\n\n /\n For chip-set of type `input`. Sets delimiters between chips.\n /\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /\n For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n * Read more about the `autocomplete` attribute\n * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n /\n @Prop({ reflect: true })\n public autocomplete: string = 'off';\n\n /\n Defines the language for translations.\n * Will translate the translatable strings on the components. For example, the clear all chips label.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a chip is interacted with\n /\n @Event()\n private readonly interact: EventEmitter<Chip>;\n\n /\n Dispatched when a chip is selected/deselected\n /\n @Event()\n private readonly change: EventEmitter<Chip \| Chip[]>;\n\n /\n Emitted when an input chip set has received focus and editing in the text field has started\n /\n @Event()\n private readonly startEdit: EventEmitter<void>;\n\n /\n Emitted when an input chip set has lost focus and editing in the text field has ended\n /\n @Event()\n private readonly stopEdit: EventEmitter<void>;\n\n /\n Dispatched when the input is changed for type `input`\n /\n @Event()\n private readonly input: EventEmitter<string>;\n\n @Element()\n private readonly host: HTMLLimelChipSetElement;\n\n @State()\n private editMode: boolean = false;\n\n @State()\n private textValue: string = '';\n\n @State()\n private blurred: boolean = false;\n\n @State()\n private inputChipIndexSelected: number = null;\n\n @State()\n private selectedChipIds: Array<string \| number>;\n\n private mdcTextField: MDCTextField;\n private readonly handleKeyDown = handleKeyboardEvent;\n private labelId: string;\n\n constructor() {\n this.labelId = createRandomString();\n this.renderChip = this.renderChip.bind(this);\n this.renderInputChip = this.renderInputChip.bind(this);\n this.isFull = this.isFull.bind(this);\n this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handleTextInput = this.handleTextInput.bind(this);\n this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.inputHidden = this.inputHidden.bind(this);\n this.handleDeleteAllIconClick =\n this.handleDeleteAllIconClick.bind(this);\n this.renderDelimiter = this.renderDelimiter.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length > 0) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /\n Used to find out whether the chip-set is in edit mode.\n \n @returns `true` if the chip-set is in edit mode, `false` otherwise.\n /\n @Method()\n public async getEditMode(): Promise<boolean> {\n return this.editMode;\n }\n\n /\n Used to set focus to the chip-set input field.\n \n @param emptyInput - if `true`, any text in the input is discarded\n * @returns does not return anything, but methods have to be async\n /\n @Method()\n public async setFocus(emptyInput: boolean = false) {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.editMode = true;\n if (emptyInput) {\n this.textValue = '';\n }\n\n this.host.shadowRoot.querySelector('input').focus();\n this.startEdit.emit();\n }\n\n /\n Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n * consumer control when the input is emptied.\n \n @returns does not return anything, but methods have to be async\n /\n @Method()\n public async emptyInput() {\n this.syncEmptyInput();\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field')\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n }\n\n public render() {\n const classes = {\n 'mdc-chip-set': true,\n 'mdc-text-field--with-trailing-icon': true,\n disabled: this.disabled \|\| this.readonly,\n };\n\n if (this.type) {\n classes[`mdc-chip-set--${this.type}`] = true;\n }\n\n if (this.type === 'input') {\n Object.assign(classes, {\n 'mdc-text-field': true,\n 'mdc-text-field--outlined': true,\n 'mdc-chip-set--input': true,\n 'lime-text-field--readonly': this.readonly,\n 'has-chips': this.value.length > 0,\n 'has-leading-icon': this.leadingIcon !== null,\n 'has-clear-all-button': this.clearAllButton,\n });\n }\n\n const value = this.getValue();\n\n return [\n <limel-notched-outline\n labelId={this.labelId}\n label={this.label}\n required={this.required}\n invalid={this.invalid \|\| this.isInvalid()}\n disabled={this.disabled}\n readonly={this.readonly}\n hasValue={!!this.value?.length}\n hasLeadingIcon={!!this.leadingIcon}\n hasFloatingLabel={this.floatLabelAbove()}\n >\n <div slot=\"content\" {...this.getContentProps()} class={classes}>\n {this.renderContent(value)}\n </div>\n </limel-notched-outline>,\n this.renderHelperLine(),\n ];\n }\n\n private getContentProps() {\n if (this.type === 'input') {\n return {\n onClick: this.handleTextFieldFocus,\n };\n }\n\n return {\n role: 'grid',\n };\n }\n\n private renderContent = (value: Chip[]) => {\n if (this.type === 'input') {\n return this.renderInputChips();\n }\n\n return value.map(this.renderChip);\n };\n\n private readonly getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\n }));\n };\n\n @Watch('value')\n protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.syncEmptyInput();\n this.initialize();\n }\n\n private renderInputChips() {\n return [\n this.value.map(this.renderInputChip),\n <input\n tabIndex={INPUT_FIELD_TABINDEX}\n type={this.inputType}\n id={this.labelId}\n disabled={this.readonly \|\| this.disabled}\n class={{\n 'mdc-text-field__input': true,\n hidden: this.inputHidden(),\n }}\n value={this.textValue}\n onBlur={this.handleInputBlur}\n onFocus={this.handleTextFieldFocus}\n onKeyDown={this.handleKeyDown}\n onInput={this.handleTextInput}\n // Some browsers emit a change event on input elements, we need to stop\n // that event from propagating since we are emitting our own change event\n onChange={this.inputFieldOnChange}\n placeholder={this.isFull() ? '' : this.searchLabel}\n readonly={this.isFull()}\n autocomplete={this.autocomplete}\n />,\n this.renderLeadingIcon(),\n this.renderClearAllChipsButton(),\n ];\n }\n\n private readonly floatLabelAbove = () => {\n if (\n this.value.length > 0 \|\|\n this.editMode \|\|\n this.readonly \|\|\n this.textValue\n ) {\n return true;\n }\n };\n\n private isFull(): boolean {\n return !!this.maxItems && this.value.length >= this.maxItems;\n }\n\n private isInvalid() {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n\n if (!this.required) {\n return false;\n }\n\n if (!this.blurred) {\n return false;\n }\n\n return !this.value?.length;\n }\n\n private inputFieldOnChange(event) {\n event.stopPropagation();\n }\n\n /\n Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n /\n private handleTextFieldFocus() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (this.editMode) {\n return;\n }\n\n this.editMode = true;\n this.startEdit.emit();\n }\n\n /\n Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n * additional space when the user it not typing anything\n /\n private handleInputBlur() {\n if (this.emptyInputOnBlur) {\n this.syncEmptyInput();\n }\n\n this.editMode = false;\n this.blurred = true;\n this.inputChipIndexSelected = null;\n\n // This timeout is needed in order to let a new element receive focus\n setTimeout(() => {\n this.stopEdit.emit();\n }, 0);\n }\n\n private syncEmptyInput() {\n this.textValue = '';\n }\n\n private inputHidden() {\n if (this.editMode) {\n return this.isFull();\n }\n\n // If there are chips in the picker, hide the input to avoid the input\n // being placed on a new line and adding ugly space beneath the chips.\n // If there are no chips, show the input, or the picker will look weird.\n return !!this.value?.length;\n }\n\n private handleTextInput(event) {\n event.stopPropagation();\n this.inputChipIndexSelected = null;\n this.textValue = event.target.value;\n this.input.emit(event.target.value?.trim());\n }\n\n private emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\n }\n\n private readonly hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private readonly renderHelperLine = () => {\n const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n if (!maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n const chipProps = this.getChipProps(chip, 'default');\n const isLastChip = index === chips.length - 1;\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable =\n this.type === 'input' && chip.removable && !this.readonly;\n const readonly = this.readonly && this.type !== 'input';\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n image: chip.image,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n loading: chip.loading,\n readonly: readonly,\n type: chipType,\n removable: removable,\n menuItems: chip.menuItems,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n /\n * We need to add the `chip` to the event object so that the consumer\n * can get the chip object when the chip is clicked.\n * This is necessary for the consumer to be able to handle the click\n * event itself, based on which chip was clicked, or whether the click\n * was on a chip or elsewhere. The reason the consumer can't just look\n * at the event target is that that information is hidden by the\n * shadow DOM.\n \n See documentation for the `interact` event for more information.\n */\n (event as any).Lime = { chip: chip };\n\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number \| string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number \| string): boolean {\n return this.selectedChipIds.includes(id);\n }\n\n private updateFilterTypeSelectedIds(id: number \| string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id\n );\n }\n\n private addChipIdToSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private readonly handleRemoveChip = (\n event: LimelChipCustomEvent<string \| number>\n ) => {\n this.removeChip(event.detail);\n };\n\n private readonly removeChip = (identifier: string \| number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\n };\n\n private renderLeadingIcon() {\n if (!this.leadingIcon) {\n return;\n }\n\n return (\n <i class=\"mdc-text-field__icon search-icon\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n\n private renderClearAllChipsButton() {\n if (this.disabled \|\| this.readonly \|\| !this.clearAllButton) {\n return;\n }\n\n return (\n <a\n href=\"\"\n onClick={this.handleDeleteAllIconClick}\n class=\"mdc-text-field__icon clear-all-button\"\n tabindex=\"0\"\n role=\"button\"\n title={this.clearAllChipsLabel()}\n aria-label={this.clearAllChipsLabel()}\n />\n );\n }\n\n private readonly clearAllChipsLabel = (): string => {\n return translate.get('chip-set.clear-all', this.language);\n };\n\n private handleDeleteAllIconClick(event: Event) {\n event.preventDefault();\n this.change.emit([]);\n }\n\n private renderDelimiter() {\n if (!this.delimiter) {\n return;\n }\n\n return <div class=\"delimiter\">{this.delimiter}</div>;\n }\n\n private triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor \|\|\n chip.iconBackgroundColor \|\|\n chip.iconTitle)\n ) {\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n );\n }\n }\n }\n}\n"],"version":3}

package/dist/cjs/limel-color-picker-palette.cjs.entry.js CHANGED Viewed

@@ -44,7 +44,7 @@ function getCssColor(color, brightness) {
   return `rgb(var(${getColorName(color, brightness)}))`;
 }
-const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.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{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";
+const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.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{position:relative;--popover-surface-width:50rem}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-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}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";
 const Palette = class {
   constructor(hostRef) {

package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-color-picker-palette.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9E;;;;;SAKgB,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;AAED;;;;;SAKgB,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D;;ACzCA,MAAM,qBAAqB,GAAG,~~qycAAqyc~~;;~~MCYtzc~~,OAAO;;;;IAiDR,mBAAc,GAAG;MACrB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;OACrD,CAAC,CAAC;KACN,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,KAAK,CAAC,UAAkB;MACzD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,GAAG,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,QACIA,oBACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,KAAK,CAAC,KAAiB;MACrD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEpE,OAAO;MACHA,iBAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/DA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,+BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACFA,iBAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;;","names":["h"],"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\n/*\n \n * @param color\n * @param brightness\n /\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\n/\n \n * @param color\n * @param brightness\n /\nexport function getCssColor(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n display: grid;\n gap: 0.25rem;\n grid-auto-flow: column;\n grid-template-columns: repeat(20, 1fr);\n grid-template-rows: repeat(4, 1fr) auto;\n margin: 1rem;\n}\n\n.chosen-color-name {\n box-sizing: border-box;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.5rem;\n}\n\n.chosen-color-preview {\n border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n // colors in shared_input-select-picker.scss\n border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n border: none;\n aspect-ratio: 1;\n\n @include mixins.visualize-keyboard-focus();\n\n // We could use the `@include mixins.is-flat-clickable();` mixin\n // But its `background-color` arguments would interfere with the\n // styles here. So we just copy/pasted the useful parts of the mixin here\n transition:\n color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n transform 0.1s ease-out;\n\n &:hover {\n box-shadow: var(--button-shadow-hovered);\n }\n\n &:active {\n box-shadow: var(--button-shadow-pressed);\n\n transform: translate3d(0, 0.08rem, 0);\n }\n cursor: pointer;\n\n &:focus-visible {\n box-shadow:\n var(--shadow-depth-8-focused),\n 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.swatch--selected {\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\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 Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\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 class=\"color-picker-palette\">{this.renderSwatches()}</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 />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"],"version":3}
1	+ {"file":"limel-color-picker-palette.entry.cjs.js","mappings":";;;;;;AAAO,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9E;;;;;SAKgB,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;AAED;;;;;SAKgB,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D;;ACzCA,MAAM,qBAAqB,GAAG,uzcAAuzc;;MCYx0c,OAAO;;;;IAiDR,mBAAc,GAAG;MACrB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;OACrD,CAAC,CAAC;KACN,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,KAAK,CAAC,UAAkB;MACzD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,GAAG,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,QACIA,oBACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,KAAK,CAAC,KAAiB;MACrD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEpE,OAAO;MACHA,iBAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/DA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,+BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACFA,iBAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;;","names":["h"],"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\n/*\n \n * @param color\n * @param brightness\n /\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\n/\n \n * @param color\n * @param brightness\n /\nexport function getCssColor(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n display: grid;\n gap: 0.25rem;\n grid-auto-flow: column;\n grid-template-columns: repeat(20, 1fr);\n grid-template-rows: repeat(4, 1fr) auto;\n margin: 1rem;\n}\n\n.chosen-color-name {\n box-sizing: border-box;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.5rem;\n}\n\n.chosen-color-preview {\n border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n // colors in shared_input-select-picker.scss\n border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n border: none;\n aspect-ratio: 1;\n\n @include mixins.visualize-keyboard-focus();\n\n // We could use the `@include mixins.is-flat-clickable();` mixin\n // But its `background-color` arguments would interfere with the\n // styles here. So we just copy/pasted the useful parts of the mixin here\n transition:\n color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n transform 0.1s ease-out;\n\n &:hover {\n box-shadow: var(--button-shadow-hovered);\n }\n\n &:active {\n box-shadow: var(--button-shadow-pressed);\n\n transform: translate3d(0, 0.08rem, 0);\n }\n cursor: pointer;\n\n &:focus-visible {\n box-shadow:\n var(--shadow-depth-8-focused),\n 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.swatch--selected {\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\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 Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\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 class=\"color-picker-palette\">{this.renderSwatches()}</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 />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"],"version":3}

package/dist/cjs/limel-color-picker.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-174a078a.js');
-const colorPickerCss = "@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{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}";
+const colorPickerCss = "@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{position:relative;--popover-surface-width:50rem}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-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}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}";
 const ColorPicker = class {
   constructor(hostRef) {