@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/dist-custom-elements/p-3431b690.js

@@ -1,368 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
-import { g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$1 } from './p-4da43fbc.js';
-
-const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.input){margin-top:6px !important;margin-right:0 !important;margin-bottom:6px !important;margin-left:4px !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(8, 42, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(181, 198, 208);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(199, 202, 207)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(98, 121, 138) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:8px 14px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;line-height:1rem;color:rgb(8, 42, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{padding:0 !important;background:rgb(228, 241, 247);border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(198, 225, 238)}.duet-chip-container.duet-chip-filter-checked.chip-has-icon button,.duet-chip-container.duet-chip-filter-checked.chip-has-icon label,.duet-chip-container.duet-chip-radio-checked.chip-has-icon button,.duet-chip-container.duet-chip-radio-checked.chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(222, 224, 228)}.duet-chip-container .duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container .duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(240, 247, 250);border-color:rgb(240, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(245, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input:hover{padding:1px !important;border-color:rgb(181, 198, 208);border-width:1px}.duet-chip-container.duet-chip-input.duet-chip-hover,.duet-chip-container.duet-chip-input.duet-chip-selected{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-input.duet-chip-hover .duet-chip-remove-button,.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button{right:0;width:34px;height:34px;background:transparent}.duet-chip-container.duet-chip-input.duet-chip-delete-focus{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input .duet-chip-input-button{margin-right:22px}.duet-chip-container.duet-chip-input .duet-chip-remove-button{position:absolute;top:-1px;right:-1px;width:36px;height:36px;padding-left:10px;border:3px solid transparent;border-radius:8px}.duet-chip-container.duet-chip-input .duet-chip-remove-button:hover{background:rgb(217, 236, 245);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-chip-selected{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input.duet-chip-selected.duet-chip-hover{background:rgb(217, 236, 245)}.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(198, 225, 238);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-theme-turva:hover{border-color:rgb(199, 202, 207)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-hover{border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-input.duet-theme-turva .duet-chip-remove-button:hover{background:rgb(255, 241, 241)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected{background:rgb(255, 241, 241)}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected.duet-chip-hover{background:rgb(255, 213, 215);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(255, 185, 190);background-clip:padding-box}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input,*::slotted([slot=input]){position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;margin:0;cursor:pointer;border-width:2px;border-radius:8px;opacity:0;appearance:none}*::slotted([slot=input]:not([aria-disabled=true])){z-index:1}";
-const DuetChipStyle0 = duetChipCss;
-
-const DuetChip = /*@__PURE__*/ proxyCustomElement(class DuetChip extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.duetRemove = createEvent(this, "duetRemove", 3);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        /**
-         * Own Properties.
-         */
-        this.chipId = createID("DuetChip");
-        this.deleteLabels = {
-            fi: "Poista",
-            en: "Remove",
-            sv: "Ta bort",
-        };
-        this.selectedForDeletionLabels = {
-            fi: "Valittu, poista askelpalautinnäppäimellä",
-            en: "Selected, remove with backspace",
-            sv: "Valt, ta bort med backsteg",
-        };
-        this.enforceNoDisabledSelected = () => {
-            if (this.disabled && this.checked) {
-                console.error("Duet error: pre-selected chip may not be disabled");
-                this.disabled = false;
-            }
-        };
-        this.radioInputListenersRemove = radioInput => {
-            radioInput.removeEventListener("change", this.onRadioChange);
-            radioInput.removeEventListener("click", this.onRadioClick);
-            radioInput.removeEventListener("focus", this.onFocus);
-            radioInput.removeEventListener("blur", this.onBlur);
-        };
-        this.radioInputListenersAdd = radioInput => {
-            radioInput.addEventListener("change", this.onRadioChange);
-            radioInput.addEventListener("click", this.onRadioClick);
-            radioInput.addEventListener("focus", this.onFocus);
-            radioInput.addEventListener("blur", this.onBlur);
-        };
-        this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=input]");
-            const radioInput = slotInput || document.createElement("input");
-            radioInput.slot = "input";
-            radioInput.ariaDisabled = this.disabled ? "true" : undefined;
-            radioInput.id = this.identifier || this.chipId;
-            radioInput.type = "radio";
-            radioInput.name = this.name;
-            radioInput.value = this.value;
-            radioInput.checked = this.checked;
-            if (slotInput) {
-                this.radioInputListenersRemove(radioInput);
-            }
-            else {
-                this.element.appendChild(radioInput);
-            }
-            this.radioInputListenersAdd(radioInput);
-            this.focusableElement = radioInput;
-        };
-        this.popupSetUp = () => {
-            const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
-            if (popup) {
-                this.popupElement = popup;
-                popup.controller = this.element;
-                const originalText = this.element.textContent;
-                const originalValue = this.value;
-                if (!popup.id) {
-                    popup.id = "popup-menu";
-                }
-                popup.addEventListener("duetToggle", (evt) => {
-                    this.popupOpen = evt.detail.open;
-                });
-                const clearActive = () => {
-                    popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
-                        item.active = false;
-                    });
-                };
-                popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
-                    item.addEventListener("click", evt => {
-                        var _a;
-                        const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.innerText;
-                        if (!item.active) {
-                            clearActive();
-                            item.active = true;
-                            this.element.textContent = item.innerText;
-                            this.value = value;
-                            this.checked = true;
-                        }
-                        else {
-                            clearActive();
-                            this.element.textContent = originalText;
-                            this.value = originalValue;
-                            this.checked = false;
-                        }
-                        this.emitChange(evt);
-                        // A workaround to the difference of event handling between the browers.
-                        // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
-                        // open the popup again. Firefox does not have this behavior.
-                        setTimeout(() => {
-                            if (this.popupElement.isOpen()) {
-                                this.popupElement.hide();
-                            }
-                        });
-                    });
-                });
-            }
-        };
-        /**
-         * Component event handling.
-         */
-        this.onFocus = (ev) => {
-            this.focus = true;
-            this.duetFocus.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-        };
-        this.onBlur = (ev) => {
-            this.focus = false;
-            this.duetBlur.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-        };
-        this.emitChange = originalEvent => {
-            this.duetChange.emit({
-                originalEvent,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-        };
-        /**
-         * Change checked state and emit duetChange event.
-         */
-        this.onFilterChange = (evt) => {
-            this.checked = !this.checked;
-            this.emitChange(evt);
-        };
-        /**
-         * Change checked state and emit duetChange event.
-         */
-        this.onRadioChange = (evt) => {
-            const input = this.focusableElement;
-            const inputChecked = input.checked;
-            this.checked = inputChecked;
-            this.emitChange(evt);
-        };
-        this.onRadioClick = (evt) => {
-            if (this.disabled) {
-                evt.preventDefault();
-            }
-        };
-        /**
-         * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
-         */
-        this.onFilterClick = (evt) => {
-            if (this.disabled) {
-                evt.stopPropagation();
-                evt.preventDefault();
-                return;
-            }
-            if (this.popupElement) {
-                evt.stopPropagation();
-                evt.preventDefault();
-                this.popupElement.toggle();
-            }
-        };
-        /**
-         * Remove input chip
-         */
-        this.onRemoveClick = (evt) => {
-            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-            this.duetRemove.emit({
-                originalEvent: evt,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-chip",
-            });
-            this.element.remove();
-        };
-        this.focus = false;
-        this.popupElement = undefined;
-        this.popupOpen = undefined;
-        this.inputChipHover = false;
-        this.inputChipDeleteFocus = false;
-        this.accessibleLabel = undefined;
-        this.variation = "button";
-        this.size = "medium";
-        this.popup = undefined;
-        this.icon = "";
-        this.theme = "";
-        this.identifier = undefined;
-        this.value = undefined;
-        this.name = undefined;
-        this.selected = false;
-        this.checked = false;
-        this.disabled = false;
-        this.accessibleExpanded = undefined;
-        this.accessiblePopup = "false";
-    }
-    clearOtherRadioButtons() {
-        if (this.variation === "radio" && this.checked) {
-            const chips = document.querySelectorAll(`duet-chip[variation="radio"][name="${this.name}"]`);
-            chips.forEach(chip => {
-                if (chip !== this.element) {
-                    chip.checked = false;
-                }
-            });
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.popupSetUp();
-        this.enforceNoDisabledSelected();
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    componentDidRender() {
-        if (this.variation === "radio") {
-            this.radioInputSetUp();
-        }
-    }
-    getAccessibleExpanded() {
-        if (this.accessibleExpanded != null) {
-            return (!!this.accessibleExpanded).toString();
-        }
-        if (this.popupElement) {
-            return this.popupOpen ? "true" : "false";
-        }
-        return undefined;
-    }
-    getAccessiblePopup() {
-        if (this.popupElement) {
-            return "true";
-        }
-        else {
-            return this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined;
-        }
-    }
-    getAccessibleDeleteLabel() {
-        return `${getLocaleString(this.deleteLabels)} ${this.element.textContent}`;
-    }
-    getAccessibleInputChipLabel() {
-        return `${this.element.textContent}${this.selected ? ` (${getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        setTimeout(() => this.focusableElement.focus(options), 200);
-    }
-    /**
-     * @internal
-     */
-    async setDeleteFocus() {
-        setTimeout(() => this.deleteButtonElement.focus(), 200);
-    }
-    /**
-     * Removes input chip. Use this method instead of the native remove() so the component can
-     * emit appropriate event
-     */
-    async removeChip() {
-        this.onRemoveClick();
-    }
-    render() {
-        var _a;
-        const identifier = this.identifier || this.chipId;
-        const classes = {
-            "duet-chip-container": true,
-            [`duet-chip-${this.variation}`]: true,
-            "duet-chip-focus": this.focus,
-            "duet-chip-selected": this.selected,
-            "duet-chip-hover": this.inputChipHover,
-            "duet-chip-delete-focus": this.inputChipDeleteFocus,
-            "duet-chip-has-icon": !!this.icon,
-            "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
-            "duet-theme-turva": this.theme === "turva",
-            "duet-chip-filter-checked": this.variation === "filter" && this.checked,
-            "duet-chip-radio-checked": this.variation === "radio" && this.checked,
-            "duet-chip-filter-popup-open": this.popupOpen,
-            "duet-chip-disabled": this.disabled,
-            [this.size]: true,
-        };
-        const focusHandlers = {
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
-            ref: el => (this.focusableElement = el),
-        };
-        return (h(Host, { key: 'c807c6a1d6acd3d0962de84a928a38cf53236a5a', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '654486c3496a0967a02987d40d8b8bd03c8d1670', class: classes }, h("button", Object.assign({ key: '819d1fadbf81a1e7deea06efc7c8ad55544f77bb', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '043b8a685b69fd201c8a081902f6197c87201d95', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '7ca324221a0d9408218d525187d3dcda8e006946', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '0cda4e568fc73c0e51053068649a1d1fb4fc1177' })))), this.variation === "input" && (h("span", { key: '4bdfa14a7478fe54a31d6d3519fe7a38a28e8a64', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '60f136d595f23bec8a342b725826b824f72be70d', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '8e9e702baeb8b2fe5fdc3767e679dbe938adf2c8', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '799c6adbd554313f3500698037c0441bd784ec14', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'b1b7649a3beff52e78f0d2007446b4284c13301d' })), h("button", { key: 'b28b696e73ece749bc5c3ac0a731eb12a74da0fb', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '77be3ad13c9f382af3f937ed5b1310b966e51a9f', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '93b90e998c5a818f72f0d6d93d236ca292027a2f', class: classes }, h("input", Object.assign({ key: 'fbc7ce95bc52c216fa093d8f8626953ffb813329', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '820f38348fd3237fa736c42db58592aceecbc6d8', htmlFor: identifier }, this.icon && (h("span", { key: '8053c7905e2d4b3e307122ed0019abf487f33ddb', class: "duet-chip-icon-container" }, h("duet-icon", { key: '62b6b611984e54ec22ac7f893e913a13ed79f183', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'bc6cc9a473b6e2ff0579bf2ed90bb9b93676217c', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '6acef4f05a0f83c4678687dd3ca78cdaf1b85047' }), this.popupElement && (h("span", { key: '04fd8374230c5f07247d141543e6ed469d5a2f3e', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '2bda624c98b44339a4107b9619873ce1cc3257b6', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'fb27bb6b3d1d4bbb71a2f5f3da20fdce13e1f3dc', class: classes }, h("slot", { key: 'a1a2b8eabfae06bcbbab88b3578598cceac14be7', name: "input" }), h("label", { key: 'e81d7abd6774b9980454d70548c8c23ffb62a083', htmlFor: identifier }, this.icon && (h("span", { key: 'ef056f08b0f3aa56ec9403066f9c49c106405d42', class: "duet-chip-icon-container" }, h("duet-icon", { key: '1e7dc968a93057da85bfad2d9311f9cb1345671e', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'fc5ecbe16b5154635cfbb6bd4d1422eaf118b837', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'bec129dc84a1a901d84dfd5b57bf3f0f455e1822' }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "checked": ["clearOtherRadioButtons"]
-    }; }
-    static get style() { return DuetChipStyle0; }
-}, [1, "duet-chip", {
-        "accessibleLabel": [1, "accessible-label"],
-        "variation": [1],
-        "size": [1],
-        "popup": [1],
-        "icon": [1],
-        "theme": [1025],
-        "identifier": [1],
-        "value": [1537],
-        "name": [1],
-        "selected": [1028],
-        "checked": [1540],
-        "disabled": [4],
-        "accessibleExpanded": [1540, "accessible-expanded"],
-        "accessiblePopup": [1537, "accessible-popup"],
-        "focus": [32],
-        "popupElement": [32],
-        "popupOpen": [32],
-        "inputChipHover": [32],
-        "inputChipDeleteFocus": [32],
-        "setFocus": [64],
-        "setDeleteFocus": [64],
-        "removeChip": [64]
-    }, undefined, {
-        "checked": ["clearOtherRadioButtons"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-chip", "duet-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-chip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetChip);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetChip as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-35375593.js

@@ -1,161 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import './p-993aea39.js';
-import { c as convertHtmlQuotes } from './p-9c3c64b9.js';
-
-const localeLookUpTable = {
-    fi: "fi-FI",
-    en: "en-GB",
-    us: "en-US",
-    sv: "sv-SE",
-};
-const localeMonetarySignifierLookUpTable = {
-    fi: "€",
-    en: "£",
-    us: "$",
-    sv: "€",
-};
-const defLanguageArray = ["fi", "en", "sv"];
-const defaultLanguage = "fi";
-const getCurrentLanguage = () => {
-    return document.documentElement.lang ? document.documentElement.lang.toLowerCase() : defaultLanguage;
-};
-const isOfTypeLanguage = (keyInput) => {
-    return defLanguageArray.includes(keyInput);
-};
-const checkForLanguage = (languageString = getCurrentLanguage()) => {
-    if (isOfTypeLanguage(languageString)) {
-        return languageString;
-    }
-    else {
-        return defaultLanguage;
-    }
-};
-/**
- * Returns the current language as a string representation (taken from html lang attribute)
- * If language is not fi|sv|en it will default to "fi"
- * @param {string} lang=fi - "fi" | "sv" | "en"
- * @default {string} "fi"
- */
-const getLanguage = (languageString = getCurrentLanguage()) => checkForLanguage(languageString);
-/**
- * Returns the current language and locale
- * If language is not fi|sv|en it will default to "fi"
- * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
- * @param {string} lang="fi" - "fi" | "sv" | "en" | "us"
- * @default {object} {locale: "fi-FI", money: "€"}
- */
-const getLocale = (lang) => {
-    const returnObj = {
-        locale: localeLookUpTable[lang],
-        money: localeMonetarySignifierLookUpTable[lang],
-    };
-    if (returnObj.locale && returnObj.money) {
-        return returnObj;
-    }
-    throw new Error(`Locale for "${lang}" not found`);
-};
-/**
- * Takes any json object that is passed and/or htmlencoded and converts it to proper json
- */
-const sanitizeString = (string) => {
-    const argIsString = typeof string === "string";
-    if (argIsString) {
-        try {
-            return JSON.parse(convertHtmlQuotes(string));
-        }
-        catch (e) {
-            console.log("sanitizeString received a string, that didnt parse to json object", string, e);
-        }
-    }
-    return string;
-};
-/**
- * Returns the current string / object from a given translation object
- * If language is not fi|sv|en it will default to "fi"
- * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
- * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"} | string will get JSON.parsed
- * @param {boolean} languageOverride = false - in case you want to override the actual language set in html tag
- * @default {object} {locale: "fi-FI", money: "€"}
- * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
- */
-const getLocaleString = (langObject, languageOverride) => {
-    const obj = sanitizeString(langObject);
-    if (languageOverride) {
-        return obj[checkForLanguage(languageOverride)];
-    }
-    else {
-        return obj[getLanguage()];
-    }
-};
-/**
- * Language change observer
- *
- * Change component's language property or state when the html lang attribute changes. Can also change default labeles to new language.
- * For now the <html> element must have the data-duet-lang-observe attribute set to a truthy value for the
- * language change to happen. At a later point this will be done without requiring the data attribute.
- *
- * Usage:
- * Call in component's connectedCallback
- * connectLanguageChangeObserver(this)
- * or
- * connectLanguageChangeObserver(this, [{ prop: "labelProp", defaults: "labelPropDefaults" }])
- *
- * Call in disconnectedCallback
- * disconnectLanguageChangeObserver(this)
- */
-/**
- * Component instances that have subscribed to language change.
- */
-const languageChangeSubscribers = new Set();
-/**
- * Label properties that should be changed when language changes.
- */
-const languageChangeTargets = new WeakMap();
-const languagaChangeObserverCallback = mutationList => {
-    let oldValue = defaultLanguage;
-    for (const mutation of mutationList) {
-        if (mutation.type === "attributes" && mutation.attributeName === "lang") {
-            oldValue = mutation.oldValue;
-            break;
-        }
-    }
-    if (document.documentElement.dataset.duetLangObserve !== "false") {
-        languageChangeSubscribers.forEach((component) => {
-            if (component.language) {
-                component.language = getLanguage();
-            }
-            if (languageChangeTargets.has(component)) {
-                languageChangeTargets.get(component).forEach(target => {
-                    if (component[target.defaults] && component[target.prop] === component[target.defaults][oldValue]) {
-                        component[target.prop] = getLocaleString(component[target.defaults]);
-                    }
-                });
-            }
-        });
-    }
-};
-{
-    const languageChangeObserver = new MutationObserver(languagaChangeObserverCallback);
-    languageChangeObserver.observe(document.documentElement, { attributeFilter: ["lang"], attributeOldValue: true });
-}
-const connectLanguageChangeObserver = (component, targets) => {
-    languageChangeSubscribers.add(component);
-    if (targets) {
-        if (!Array.isArray(targets)) {
-            targets = [targets];
-        }
-        if (targets.some(t => !(t.prop in component) || !(t.defaults in component))) {
-            console.error("connectLanguageChangeObserver: component must have target.prop and target.defaults properties");
-            targets = targets.filter(t => t.prop in component && t.defaults in component);
-        }
-        languageChangeTargets.set(component, targets);
-    }
-};
-const disconnectLanguageChangeObserver = (component) => {
-    languageChangeSubscribers.delete(component);
-    languageChangeTargets.delete(component);
-};
-
-export { getLanguage as a, getLocale as b, connectLanguageChangeObserver as c, disconnectLanguageChangeObserver as d, getLocaleString as g, sanitizeString as s };

package/lib/dist-custom-elements/p-36ab2d57.js

@@ -1,83 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
-import { d as defineCustomElement$1 } from './p-02f97b91.js';
-
-const duetTooltipButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-tooltip-button{z-index:100;display:inline-block;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 !important;margin-right:-12px;line-height:normal !important;color:rgb(0, 119, 179);white-space:nowrap;cursor:pointer;background:transparent !important;border-radius:4px}.duet-tooltip-button.duet-theme-turva{color:rgb(198, 12, 48)}.duet-tooltip-button.duet-tooltip-button-negative{color:rgb(255, 255, 255)}.duet-tooltip-button:hover{color:rgb(0, 75, 129)}.duet-tooltip-button:hover.duet-theme-turva{color:rgb(126, 2, 35)}.duet-tooltip-button:hover.duet-tooltip-button-negative{color:rgb(255, 255, 255)}.duet-tooltip-button:focus{background:transparent !important;outline:0}:host(.user-is-tabbing) .duet-tooltip-button:focus{background:transparent !important;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tooltip-button svg{width:20px;height:20px;pointer-events:none}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-label{position:relative;z-index:100;display:inline-block;max-width:calc(100% - 30px);margin-left:12px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;text-align:left;white-space:normal;vertical-align:top}.duet-theme-turva .duet-tooltip-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}";
-const DuetTooltipButtonStyle0 = duetTooltipButtonCss;
-
-const DuetTooltipButton = /*@__PURE__*/ proxyCustomElement(class DuetTooltipButton extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.label = "";
-        this.accessibleLabel = undefined;
-        this.theme = "";
-        this.negative = false;
-        this.active = undefined;
-        this.tooltipId = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    async setFocus(options) {
-        if (this.buttonElement) {
-            this.buttonElement.focus(options);
-        }
-    }
-    /**
-     * render() function.
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: 'ae2e6b2178ee576213dd23b3454d9301c7d76445' }, h("button", { key: '828b657596897f539bcb09e9c61f8351a105dbf3', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
-                "duet-tooltip-button": true,
-                "duet-tooltip-button-has-label": !!this.label,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-tooltip-button-negative": this.negative,
-            } }, h("svg", { key: 'f1910fbcf2abe0cd566aafc35bff9aafafba261c', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cb30d10b660bb70e460cc38411be2085d25e40f5', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '0aa8e5f682f4d4bbfde4b77ef9a1db672cabb281', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'c35b7243eb4c68c3668ecfaa0c90fb2672b7d25e', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
-    }
-    get element() { return this; }
-    static get style() { return DuetTooltipButtonStyle0; }
-}, [1, "duet-tooltip-button", {
-        "label": [1],
-        "accessibleLabel": [1, "accessible-label"],
-        "theme": [1025],
-        "negative": [4],
-        "active": [4],
-        "tooltipId": [1, "tooltip-id"],
-        "setFocus": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-tooltip-button", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetTooltipButton);
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetTooltipButton as D, defineCustomElement as d };