@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-chip.js

@@ -1,97 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { D as DesktopMediaQuery } from './media-query.service.js';
-import { d as defineCustomElement$3 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$2 } from './swirl-progress-indicator2.js';
-
-const swirlChipCss = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.3125rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}";
-
-const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.chipClick = createEvent(this, "chipClick", 7);
-        this.removeChip = createEvent(this, "remove", 7);
-        this.borderRadius = "pill";
-        this.iconColor = "default";
-        this.intent = "default";
-        this.interactive = false;
-        this.progressBarLabel = "Loading progress";
-        this.removeButtonLabel = "Remove";
-        this.size = "m";
-        this.variant = "outline";
-        this.mediaQueryUnsubscribe = () => { };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        if (!Boolean(this.iconEl)) {
-            return;
-        }
-        const icon = this.iconEl.children[0];
-        const iconSize = this.size === "s" ? "16" : smallIcon ? "20" : "24";
-        icon?.setAttribute("size", iconSize);
-    }
-    render() {
-        const Tag = this.interactive || this.pressed !== undefined ? "button" : "span";
-        const showAvatar = Boolean(this.el.querySelector('[slot="avatar"]'));
-        const showIcon = !showAvatar && Boolean(this.icon);
-        const className = classNames("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
-            "chip--pressed": this.pressed,
-            "chip--has-progress": this.progress !== undefined,
-            "chip--interactive": this.interactive || this.pressed !== undefined,
-            "chip--removable": this.removable,
-        });
-        return (h(Host, { key: 'b0e65c521dcde5335f3bcd7daaf7359ba5bbe3ec' }, h(Tag, { key: 'a5198b26f19750bd4c8372acdc21e26f3ed8cfe1', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '2ed93ce33faf8a1bdc4b07e4f866a10650ae8395', class: "chip__inner" }, showAvatar && (h("span", { key: 'ec44e6a99988aa14dcf330098de8593a1deeaed8', class: "chip__avatar" }, h("slot", { key: '880a8c96422c0f31cbf603676ffecef66c6bff21', name: "avatar" }))), showIcon && (h("span", { key: 'b5ba3f75080b5452fce8886c513eaa6abcd58009', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '808fe136faee7570c2329a300fafba4e0efcbed8', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '50b4eb47a59290e9c21570e0b2d91a8aa7a97723', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'e0d54da0d2c6a325f6068740bba0c72b0837fb87', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'ec75adbbf28bf1df36d7532d832137f795973dab', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '85c241bc56caaf410421b102607f902f1c4b33ef', size: 20 })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlChipCss; }
-}, [6, "swirl-chip", {
-        "borderRadius": [1, "border-radius"],
-        "icon": [1],
-        "iconColor": [1, "icon-color"],
-        "intent": [1],
-        "interactive": [4],
-        "label": [1],
-        "progress": [2],
-        "pressed": [4],
-        "progressBarLabel": [1, "progress-bar-label"],
-        "removable": [4],
-        "removeButtonLabel": [1, "remove-button-label"],
-        "size": [1],
-        "variant": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-chip", "swirl-icon-close", "swirl-progress-indicator"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-chip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlChip$1);
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-progress-indicator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlChip = SwirlChip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlChip, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as r,createEvent as c,h as s,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as h}from"./swirl-icon-close2.js";import{d as p}from"./swirl-progress-indicator2.js";const l=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.forceIconProps(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){if(!this.iconEl)return;const r=this.iconEl.children[0],c="s"===this.size?"16":i?"20":"24";r?.setAttribute("size",c)}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",r=!!this.el.querySelector('[slot="avatar"]'),c=!r&&!!this.icon,a=t("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return s(e,{key:"6fd934d641c04962a1f2920dd57faf830634e1eb"},s(i,{key:"0bc441004247be153c2c1280703c89889aa2f230","aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:a,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},s("span",{key:"3ef09811696596dfb8f2141ecfeb2819b1742cfd",class:"chip__inner"},r&&s("span",{key:"cd77f9c95445c07e4ee7589fd587472371f52d84",class:"chip__avatar"},s("slot",{key:"f9d82bdda1f3f83cd844c695ea6b446867a3b9d2",name:"avatar"})),c&&s("span",{key:"333f1be6734c7974336a58ddb79a624e8d754a85",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),s("span",{key:"3d2922138dab62f88f3c633f7aef1c8b99265f20",class:"chip__label"},this.label)),void 0!==this.progress&&s("span",{key:"c50bc0181d835ee2847c5e3afaa47dd21eb3267c",class:"chip__progress-indicator"},s("swirl-progress-indicator",{key:"149a7f2977e7c3ebb1d222728848f51287a61910",label:this.progressBarLabel,value:this.progress}))),this.removable&&s("button",{key:"c73c634af8d1c733e7ef7c84dd254b876fe52bb1","aria-label":this.removeButtonLabel,class:"chip__remove-button",onClick:this.removeChip.emit,type:"button"},s("swirl-icon-close",{key:"ad1819db5a0e47c964831b1a14c7ef820b05017c",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip{border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],icon:[1],iconColor:[1,"icon-color"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],variant:[1]}]),n=l,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(a(i))||customElements.define(a(i),l);break;case"swirl-icon-close":customElements.get(a(i))||h();break;case"swirl-progress-indicator":customElements.get(a(i))||p()}}))};export{n as SwirlChip,d as defineCustomElement}

package/dist/components/swirl-color-input.js

@@ -1,509 +1 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$4 } from './swirl-box2.js';
-import { d as defineCustomElement$3 } from './swirl-popover2.js';
-import { d as defineCustomElement$2 } from './swirl-popover-trigger2.js';
-import { v as v4 } from './v4.js';
-
-// Clamps a value between an upper and lower bound.
-// We use ternary operators because it makes the minified code
-// 2 times shorter then `Math.min(Math.max(a,b),c)`
-const clamp = (number, min = 0, max = 1) => {
-    return number > max ? max : number < min ? min : number;
-};
-const round = (number, digits = 0, base = Math.pow(10, digits)) => {
-    return Math.round(base * number) / base;
-};
-
-const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
-const hexToRgba = (hex) => {
-    if (hex[0] === '#')
-        hex = hex.substring(1);
-    if (hex.length < 6) {
-        return {
-            r: parseInt(hex[0] + hex[0], 16),
-            g: parseInt(hex[1] + hex[1], 16),
-            b: parseInt(hex[2] + hex[2], 16),
-            a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
-        };
-    }
-    return {
-        r: parseInt(hex.substring(0, 2), 16),
-        g: parseInt(hex.substring(2, 4), 16),
-        b: parseInt(hex.substring(4, 6), 16),
-        a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1
-    };
-};
-const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
-const hsvaToHsla = ({ h, s, v, a }) => {
-    const hh = ((200 - s) * v) / 100;
-    return {
-        h: round(h),
-        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
-        l: round(hh / 2),
-        a: round(a, 2)
-    };
-};
-const hsvaToHslString = (hsva) => {
-    const { h, s, l } = hsvaToHsla(hsva);
-    return `hsl(${h}, ${s}%, ${l}%)`;
-};
-const hsvaToRgba = ({ h, s, v, a }) => {
-    h = (h / 360) * 6;
-    s = s / 100;
-    v = v / 100;
-    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
-    return {
-        r: round([v, c, b, b, d, v][module] * 255),
-        g: round([d, v, v, c, b, b][module] * 255),
-        b: round([b, b, d, v, v, c][module] * 255),
-        a: round(a, 2)
-    };
-};
-const format = (number) => {
-    const hex = number.toString(16);
-    return hex.length < 2 ? '0' + hex : hex;
-};
-const rgbaToHex = ({ r, g, b, a }) => {
-    const alphaHex = a < 1 ? format(round(a * 255)) : '';
-    return '#' + format(r) + format(g) + format(b) + alphaHex;
-};
-const rgbaToHsva = ({ r, g, b, a }) => {
-    const max = Math.max(r, g, b);
-    const delta = max - Math.min(r, g, b);
-    // prettier-ignore
-    const hh = delta
-        ? max === r
-            ? (g - b) / delta
-            : max === g
-                ? 2 + (b - r) / delta
-                : 4 + (r - g) / delta
-        : 0;
-    return {
-        h: round(60 * (hh < 0 ? hh + 6 : hh)),
-        s: round(max ? (delta / max) * 100 : 0),
-        v: round((max / 255) * 100),
-        a
-    };
-};
-
-const equalColorObjects = (first, second) => {
-    if (first === second)
-        return true;
-    for (const prop in first) {
-        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)
-        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)
-        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,
-        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if
-        // there is or not), and then as a type TS can iterate over.
-        if (first[prop] !==
-            second[prop])
-            return false;
-    }
-    return true;
-};
-const equalHex = (first, second) => {
-    if (first.toLowerCase() === second.toLowerCase())
-        return true;
-    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects
-    return equalColorObjects(hexToRgba(first), hexToRgba(second));
-};
-
-const cache = {};
-const tpl = (html) => {
-    let template = cache[html];
-    if (!template) {
-        template = document.createElement('template');
-        template.innerHTML = html;
-        cache[html] = template;
-    }
-    return template;
-};
-const fire = (target, type, detail) => {
-    target.dispatchEvent(new CustomEvent(type, {
-        bubbles: true,
-        detail
-    }));
-};
-
-let hasTouched = false;
-// Check if an event was triggered by touch
-const isTouch = (e) => 'touches' in e;
-// Prevent mobile browsers from handling mouse events (conflicting with touch ones).
-// If we detected a touch interaction before, we prefer reacting to touch events only.
-const isValid = (event) => {
-    if (hasTouched && !isTouch(event))
-        return false;
-    if (!hasTouched)
-        hasTouched = isTouch(event);
-    return true;
-};
-const pointerMove = (target, event) => {
-    const pointer = isTouch(event) ? event.touches[0] : event;
-    const rect = target.el.getBoundingClientRect();
-    fire(target.el, 'move', target.getMove({
-        x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-        y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)
-    }));
-};
-const keyMove = (target, event) => {
-    // We use `keyCode` instead of `key` to reduce the size of the library.
-    const keyCode = event.keyCode;
-    // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.
-    if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)
-        return;
-    // Do not scroll page by keys when color picker element has focus.
-    event.preventDefault();
-    // Send relative offset to the parent component.
-    fire(target.el, 'move', target.getMove({
-        x: keyCode === 39 // Arrow Right
-            ? 0.01
-            : keyCode === 37 // Arrow Left
-                ? -0.01
-                : keyCode === 34 // Page Down
-                    ? 0.05
-                    : keyCode === 33 // Page Up
-                        ? -0.05
-                        : keyCode === 35 // End
-                            ? 1
-                            : keyCode === 36 // Home
-                                ? -1
-                                : 0,
-        y: keyCode === 40 // Arrow down
-            ? 0.01
-            : keyCode === 38 // Arrow Up
-                ? -0.01
-                : 0
-    }, true));
-};
-class Slider {
-    constructor(root, part, aria, xy) {
-        const template = tpl(`<div role="slider" tabindex="0" part="${part}" ${aria}><div part="${part}-pointer"></div></div>`);
-        root.appendChild(template.content.cloneNode(true));
-        const el = root.querySelector(`[part=${part}]`);
-        el.addEventListener('mousedown', this);
-        el.addEventListener('touchstart', this);
-        el.addEventListener('keydown', this);
-        this.el = el;
-        this.xy = xy;
-        this.nodes = [el.firstChild, el];
-    }
-    set dragging(state) {
-        const toggleEvent = state ? document.addEventListener : document.removeEventListener;
-        toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);
-        toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);
-    }
-    handleEvent(event) {
-        switch (event.type) {
-            case 'mousedown':
-            case 'touchstart':
-                event.preventDefault();
-                // event.button is 0 in mousedown for left button activation
-                if (!isValid(event) || (!hasTouched && event.button != 0))
-                    return;
-                this.el.focus();
-                pointerMove(this, event);
-                this.dragging = true;
-                break;
-            case 'mousemove':
-            case 'touchmove':
-                event.preventDefault();
-                pointerMove(this, event);
-                break;
-            case 'mouseup':
-            case 'touchend':
-                this.dragging = false;
-                break;
-            case 'keydown':
-                keyMove(this, event);
-                break;
-        }
-    }
-    style(styles) {
-        styles.forEach((style, i) => {
-            for (const p in style) {
-                this.nodes[i].style.setProperty(p, style[p]);
-            }
-        });
-    }
-}
-
-class Hue extends Slider {
-    constructor(root) {
-        super(root, 'hue', 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', false);
-    }
-    update({ h }) {
-        this.h = h;
-        this.style([
-            {
-                left: `${(h / 360) * 100}%`,
-                color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })
-            }
-        ]);
-        this.el.setAttribute('aria-valuenow', `${round(h)}`);
-    }
-    getMove(offset, key) {
-        // Hue measured in degrees of the color circle ranging from 0 to 360
-        return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };
-    }
-}
-
-class Saturation extends Slider {
-    constructor(root) {
-        super(root, 'saturation', 'aria-label="Color"', true);
-    }
-    update(hsva) {
-        this.hsva = hsva;
-        this.style([
-            {
-                top: `${100 - hsva.v}%`,
-                left: `${hsva.s}%`,
-                color: hsvaToHslString(hsva)
-            },
-            {
-                'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })
-            }
-        ]);
-        this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
-    }
-    getMove(offset, key) {
-        // Saturation and brightness always fit into [0, 100] range
-        return {
-            s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,
-            v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)
-        };
-    }
-}
-
-var css = `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;
-
-var hueCss = `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
-
-var saturationCss = `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
-
-const $isSame = Symbol('same');
-const $color = Symbol('color');
-const $hsva = Symbol('hsva');
-const $update = Symbol('update');
-const $parts = Symbol('parts');
-const $css = Symbol('css');
-const $sliders = Symbol('sliders');
-class ColorPicker extends HTMLElement {
-    static get observedAttributes() {
-        return ['color'];
-    }
-    get [$css]() {
-        return [css, hueCss, saturationCss];
-    }
-    get [$sliders]() {
-        return [Saturation, Hue];
-    }
-    get color() {
-        return this[$color];
-    }
-    set color(newColor) {
-        if (!this[$isSame](newColor)) {
-            const newHsva = this.colorModel.toHsva(newColor);
-            this[$update](newHsva);
-            this[$color] = newColor;
-        }
-    }
-    constructor() {
-        super();
-        const template = tpl(`<style>${this[$css].join('')}</style>`);
-        const root = this.attachShadow({ mode: 'open' });
-        root.appendChild(template.content.cloneNode(true));
-        root.addEventListener('move', this);
-        this[$parts] = this[$sliders].map((slider) => new slider(root));
-    }
-    connectedCallback() {
-        // A user may set a property on an _instance_ of an element,
-        // before its prototype has been connected to this class.
-        // If so, we need to run it through the proper class setter.
-        if (this.hasOwnProperty('color')) {
-            const value = this.color;
-            delete this['color'];
-            this.color = value;
-        }
-        else if (!this.color) {
-            this.color = this.colorModel.defaultColor;
-        }
-    }
-    attributeChangedCallback(_attr, _oldVal, newVal) {
-        const color = this.colorModel.fromAttr(newVal);
-        if (!this[$isSame](color)) {
-            this.color = color;
-        }
-    }
-    handleEvent(event) {
-        // Merge the current HSV color object with updated params.
-        const oldHsva = this[$hsva];
-        const newHsva = { ...oldHsva, ...event.detail };
-        this[$update](newHsva);
-        let newColor;
-        if (!equalColorObjects(newHsva, oldHsva) &&
-            !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {
-            this[$color] = newColor;
-            fire(this, 'color-changed', { value: newColor });
-        }
-    }
-    [$isSame](color) {
-        return this.color && this.colorModel.equal(color, this.color);
-    }
-    [$update](hsva) {
-        this[$hsva] = hsva;
-        this[$parts].forEach((part) => part.update(hsva));
-    }
-}
-
-const colorModel = {
-    defaultColor: '#000',
-    toHsva: hexToHsva,
-    fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),
-    equal: equalHex,
-    fromAttr: (color) => color
-};
-class HexBase extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
-}
-
-/**
- * A color picker custom element that uses HEX format.
- *
- * @element hex-color-picker
- *
- * @prop {string} color - Selected color in HEX format.
- * @attr {string} color - Selected color in HEX format.
- *
- * @fires color-changed - Event fired when color property changes.
- *
- * @csspart hue - A hue selector container.
- * @csspart saturation - A saturation selector container
- * @csspart hue-pointer - A hue pointer element.
- * @csspart saturation-pointer - A saturation pointer element.
- */
-class HexColorPicker extends HexBase {
-}
-customElements.define('hex-color-picker', HexColorPicker);
-
-const swirlColorInputCss = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}";
-
-const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput extends HTMLElement$1 {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.inputBlur = createEvent(this, "inputBlur", 7);
-        this.inputFocus = createEvent(this, "inputFocus", 7);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.pickerButtonLabel = "Open color picker";
-        this.pickerLabel = "Color picker";
-        this.pickerId = `color-picker-${v4()}`;
-        this.onPickerChange = (event) => {
-            this.value = event.detail.value;
-        };
-        this.onChange = (event) => {
-            const el = event.target;
-            this.value = el.value;
-        };
-        this.onBlur = (event) => {
-            this.inputBlur.emit(event);
-        };
-        this.onFocus = (event) => {
-            this.inputFocus.emit(event);
-            this.handleAutoSelect(event);
-        };
-        this.onInput = (event) => {
-            this.onChange(event);
-        };
-    }
-    componentDidLoad() {
-        // see https://stackoverflow.com/a/27314017
-        if (this.autoFocus) {
-            setTimeout(() => {
-                this.inputEl.focus();
-            });
-        }
-        this.picker.addEventListener("color-changed", this.onPickerChange);
-    }
-    disconnectedCallback() {
-        this.picker?.removeEventListener("color-changed", this.onPickerChange);
-    }
-    watchValue(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.valueChange.emit(newValue);
-        }
-    }
-    handleAutoSelect(event) {
-        if (!this.autoSelect) {
-            return;
-        }
-        event.target.select();
-    }
-    render() {
-        const ariaInvalid = this.invalid === true || this.invalid === false
-            ? String(this.invalid)
-            : undefined;
-        const className = classNames("color-input", {
-            "color-input--inline": this.inline,
-        });
-        return (h(Host, { key: '4e556c1960c88e253d8dfd97d8d4040105cb9125' }, h("div", { key: '787fe533537482e441ae13e18b4795f830b12c43', class: className }, h("input", { key: '9986b5b6bcdd93549d9d7223ddb7a4a9ddf700f3', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: '7ba560c23145afdc2bd0fd56f54f5344ed1377f9', swirlPopover: this.pickerId }, h("button", { key: 'd8def2cdd2a0889558b6a95b8c6da3ff6d898617', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
-                backgroundColor: this.disabled
-                    ? "var(--s-border-subdued)"
-                    : this.value,
-            }, type: "button" })), h("swirl-popover", { key: '074de9aa04701d1a785e93b56c1907e47d13233a', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'd30ff0d9a45ed792cd8fbc341812ecd426a52c5a', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: '9e903737a4948aa7512d02769c14defacc756557', color: this.value, ref: (el) => (this.picker = el) }))))));
-    }
-    static get watchers() { return {
-        "value": ["watchValue"]
-    }; }
-    static get style() { return swirlColorInputCss; }
-}, [2, "swirl-color-input", {
-        "autoFocus": [4, "auto-focus"],
-        "autoSelect": [4, "auto-select"],
-        "disabled": [4],
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "inline": [4],
-        "invalid": [4],
-        "pickerButtonLabel": [1, "picker-button-label"],
-        "pickerLabel": [1, "picker-label"],
-        "placeholder": [1],
-        "required": [4],
-        "value": [1537],
-        "readonly": [4]
-    }, undefined, {
-        "value": ["watchValue"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-color-input", "swirl-box", "swirl-popover", "swirl-popover-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-color-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlColorInput$1);
-            }
-            break;
-        case "swirl-box":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-popover-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlColorInput = SwirlColorInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlColorInput, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";import{v as h}from"./v4.js";const d=(t,e=0,r=1)=>t>r?r:t<e?e:t,u=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,p=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?u(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?u(parseInt(t.substring(6,8),16)/255,2):1}),b=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:u(t),s:u(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:u(i/2),a:u(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},m=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},f=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},g={},v=t=>{let e=g[t];return e||(e=document.createElement("template"),e.innerHTML=t,g[t]=e),e},w=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let x=!1;const k=t=>"touches"in t,y=(t,e)=>{const r=k(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();w(t.el,"move",t.getMove({x:d((r.pageX-(s.left+window.pageXOffset))/s.width),y:d((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class _{constructor(t,e,r,s){const i=v(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(x?"touchmove":"mousemove",this),e(x?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(x&&!k(t)||(x||(x=k(t)),0)))(t)||!x&&0!=t.button)return;this.el.focus(),y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),w(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class E extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:b({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+u(t))}getMove(t,e){return{h:e?d(this.h+360*t.x,0,360):360*t.x}}}class $ extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:b(t)},{"background-color":b({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100*t.x,0,100):100*t.x,v:e?d(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const I=Symbol("same"),S=Symbol("color"),C=Symbol("hsva"),M=Symbol("update"),z=Symbol("parts"),B=Symbol("css"),L=Symbol("sliders");class j extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[L](){return[$,E]}get color(){return this[S]}set color(t){if(!this[I](t)){const e=this.colorModel.toHsva(t);this[M](e),this[S]=t}}constructor(){super();const t=v(`<style>${this[B].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[z]=this[L].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[I](s)||(this.color=s)}handleEvent(t){const e=this[C],r={...e,...t.detail};let s;this[M](r),f(r,e)||this[I](s=this.colorModel.fromHsva(r))||(this[S]=s,w(this,"color-changed",{value:s}))}[I](t){return this.color&&this.colorModel.equal(t,this.color)}[M](t){this[C]=t,this[z].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:u(60*(n<0?n+6:n)),s:u(i?o/i*100:0),v:u(i/255*100),a:s}})(p(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?m(u(255*s)):"";return"#"+m(t)+m(e)+m(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/360*6),o=r*(1-e),n=r*(1-(t-i)*e),a=r*(1-(1-t+i)*e),l=i%6;return{r:u(255*[r,n,o,o,a,r][l]),g:u(255*[a,r,r,n,o,o][l]),b:u(255*[o,o,a,r,r,n][l]),a:u(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||f(p(t),p(e)),fromAttr:t=>t};class A extends j{get colorModel(){return H}}customElements.define("hex-color-picker",class extends A{});const F=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+h(),this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"4e556c1960c88e253d8dfd97d8d4040105cb9125"},s("div",{key:"787fe533537482e441ae13e18b4795f830b12c43",class:e},s("input",{key:"9986b5b6bcdd93549d9d7223ddb7a4a9ddf700f3","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"7ba560c23145afdc2bd0fd56f54f5344ed1377f9",swirlPopover:this.pickerId},s("button",{key:"d8def2cdd2a0889558b6a95b8c6da3ff6d898617",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"074de9aa04701d1a785e93b56c1907e47d13233a",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"d30ff0d9a45ed792cd8fbc341812ecd426a52c5a",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"9e903737a4948aa7512d02769c14defacc756557",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),q=F,T=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))||customElements.define(o(t),F);break;case"swirl-box":customElements.get(o(t))||a();break;case"swirl-popover":customElements.get(o(t))||l();break;case"swirl-popover-trigger":customElements.get(o(t))||c()}}))};export{q as SwirlColorInput,T as defineCustomElement}