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

package/lib/dist-custom-elements/duet-multiselect.js

@@ -1,346 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d77db171.js';
-import { D as DuetInternalLabel } from './p-42619f94.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { b as isEscapeKey, d as isTabKey, c as isEnterKey, h as isArrowLeftKey, e as isArrowUpKey, j as isArrowRightKey, f as isArrowDownKey } from './p-ca700701.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { c as checkNamedSlotElement } from './p-ad615991.js';
-import { p as parsePossibleJSON } from './p-9c3c64b9.js';
-import { d as defineCustomElement$8 } from './p-d2a5148f.js';
-import { d as defineCustomElement$7 } from './p-2f25dfb3.js';
-import { d as defineCustomElement$6 } from './p-4da43fbc.js';
-import { d as defineCustomElement$5 } from './p-fe9e47d9.js';
-import { d as defineCustomElement$4 } from './p-36ab2d57.js';
-import { d as defineCustomElement$3 } from './p-89b10856.js';
-import { d as defineCustomElement$2 } from './p-02f97b91.js';
-
-const duetMultiselectCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !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 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}*,*::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:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}.duet-multiselect-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){.duet-multiselect-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-multiselect-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-multiselect-container{position:relative;width:100%}.duet-multiselect-wrapper{position:relative;width:100%;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:400;line-height:1.25}.duet-theme-turva .duet-multiselect-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-multiselect{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:8rem;padding:12px 14px !important;overflow:hidden;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:400;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(8, 42, 77);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.duet-multiselect .duet-multiselect-label{overflow:hidden;text-overflow:ellipsis}.duet-multiselect:hover{border-color:rgb(127, 150, 165);box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-multiselect:hover{border-color:rgb(143, 147, 158);box-shadow:0 0 0 1px #747475}.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #e55039}.duet-multiselect:focus,.duet-multiselect.duet-multiselect-active{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-multiselect:focus,.duet-theme-turva .duet-multiselect.duet-multiselect-active{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.has-error .duet-multiselect:focus,.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:focus,.duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #e55039}.duet-multiselect[disabled]{color:rgb(8, 42, 77) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-theme-turva .duet-multiselect[disabled]{color:rgb(23, 28, 58) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important;-webkit-text-fill-color:rgb(23, 28, 58) !important}.duet-multiselect>:first-child{flex:1;min-height:24px}.duet-multiselect .duet-multiselect-badge{padding:4px 8px 4px;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.75rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);background:#d9ebf4;border-radius:20rem}.duet-theme-turva .duet-multiselect .duet-multiselect-badge{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-multiselect .duet-multiselect-icon{margin-left:12px}.has-error .duet-multiselect{border-color:rgb(214, 28, 82) !important}.has-error .duet-multiselect .duet-multiselect-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-multiselect{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva .duet-multiselect{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(143, 147, 158)}.duet-multiselect svg{width:20px;height:20px;color:rgb(8, 42, 77);pointer-events:none}.duet-theme-turva .duet-multiselect svg{color:rgb(23, 28, 58)}.duet-multiselect svg.duet-multiselect-icon--rotate{transform:rotate(180deg)}.duet-multiselect-checkboxes{position:absolute;z-index:700;width:100%;padding:16px;margin:8px 0 0;visibility:hidden;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-theme-turva .duet-multiselect-checkboxes{background:rgb(255, 255, 255);border-color:rgb(222, 224, 228);box-shadow:0 4px 10px 0 rgba(23, 28, 58, 0.15)}.duet-multiselect-checkboxes.duet-multiselect-checkboxes-active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons{padding:8px 0;margin:-16px;margin-bottom:16px;border-bottom:1px solid rgb(212, 223, 229)}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button{padding:6px 16px;margin:-4px 0;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;color:rgb(0, 119, 179);cursor:pointer;border-radius:4px}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus,.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child{border-right:1px solid rgb(212, 223, 229)}.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(198, 12, 48)}.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover{color:rgb(23, 28, 58)}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover{color:rgb(8, 42, 77)}.duet-multiselect-checkboxes fieldset{margin-top:8px;margin-bottom:12px}.duet-multiselect-checkboxes fieldset+fieldset{margin-top:28px}.duet-multiselect-checkboxes legend{margin-bottom:12px;font-size:1rem;font-weight:600}.duet-multiselect-help{display:block;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:400;line-height:1.25;color:rgb(98, 121, 138);border-radius:4px}.duet-multiselect-help span{display:block;margin-top:8px}.duet-theme-turva .duet-multiselect-help{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(143, 147, 158)}.has-error .duet-multiselect-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-multiselect-help{color:rgb(214, 28, 82)}.duet-label-hidden .duet-internal-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const DuetMultiselectStyle0 = duetMultiselectCss;
-
-function toggleInArray(arr, item) {
-    return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
-}
-const DuetMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class DuetMultiselect extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        /**
-         * Own Properties
-         */
-        this.errorId = createID("DuetError");
-        this.labelId = createID("DuetLabel");
-        this.topCaptionId = createID("DuetCaptionTop");
-        this.selectedLangObject = {
-            en: "selected",
-            fi: "valittu",
-            sv: "vald",
-        };
-        this.selectAllLabel = {
-            en: "Select all",
-            fi: "Valitse kaikki",
-            sv: "Välj alla",
-        };
-        this.clearAllLabel = {
-            en: "Clear all",
-            fi: "Tyhjennä kaikki",
-            sv: "Rensa alla",
-        };
-        this.placeholderLabel = {
-            en: "Hint",
-            fi: "Vihje",
-            sv: "Tips",
-        };
-        /**
-         * Component event handling.
-         */
-        this.onChange = (ev) => {
-            this.duetChange.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-multiselect",
-            });
-        };
-        this.onBlur = (ev) => {
-            this.duetBlur.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-multiselect",
-            });
-        };
-        this.onFocus = (ev) => {
-            this.duetFocus.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-multiselect",
-            });
-        };
-        this.onMultiselectKeyDown = (e) => {
-            if (isEscapeKey(e) || isTabKey(e)) {
-                if (this.checkboxesVisible) {
-                    this.checkboxesVisible = false;
-                    this.multiselectElement.focus();
-                    e.preventDefault();
-                }
-            }
-        };
-        this.onMultiselectInputKeyDown = (e) => {
-            if (isEnterKey(e)) {
-                e.preventDefault();
-                this.toggleCheckboxes();
-                setTimeout(() => {
-                    if (this.checkboxesVisible) {
-                        const firstOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(this.allControls ? -2 : 0)}`);
-                        if (firstOption) {
-                            firstOption.focus();
-                        }
-                    }
-                }, 200);
-            }
-        };
-        this.onCheckboxKeyDown = (e, key) => {
-            let nextOption;
-            if (isArrowLeftKey(e) || isArrowUpKey(e)) {
-                nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key - 1)}`);
-            }
-            else if (isArrowRightKey(e) || isArrowDownKey(e)) {
-                nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key + 1)}`);
-            }
-            if (nextOption) {
-                nextOption.focus();
-                e.preventDefault();
-                this.activeDescendant = nextOption.id;
-            }
-        };
-        this.toggleCheckboxes = () => {
-            this.checkboxesVisible = !this.checkboxesVisible;
-        };
-        this.toggleCheckbox = (e, item) => {
-            this.value = toggleInArray(this.value, item);
-            this.onChange(e);
-        };
-        this.handleSelectAllClick = (e) => {
-            this.value = this.processedItems;
-            this.onChange(e);
-        };
-        this.handleClearAllClick = (e) => {
-            this.value = [];
-            this.onChange(e);
-        };
-        this.getOptionIdentifier = (key) => {
-            return `${this.identifier}-option-${key}`;
-        };
-        this.getDescribedBy = () => {
-            const describedBy = [];
-            if (this.isCaptionVisible && this.topCaptionId) {
-                describedBy.push(this.topCaptionId);
-            }
-            if (this.accessibleDescribedBy) {
-                describedBy.push(this.accessibleDescribedBy);
-            }
-            if (this.error) {
-                describedBy.push(this.errorId);
-            }
-            return describedBy.length > 0 ? describedBy.join(" ") : null;
-        };
-        this.processedItems = [];
-        this.processedGroups = [];
-        this.checkboxesVisible = false;
-        this.activeDescendant = "";
-        this.language = getLanguage();
-        this.margin = "auto";
-        this.error = "";
-        this.accessibleLiveError = "polite";
-        this.expand = false;
-        this.value = [];
-        this.theme = "";
-        this.labelHidden = false;
-        this.identifier = createID("DuetMultiselect");
-        this.allControls = false;
-        this.placeholder = "";
-        this.caption = undefined;
-        this.items = undefined;
-        this.disabled = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-    }
-    handleFocus(e) {
-        const isClickOutside = e.composedPath().every(node => node !== this.element);
-        if (isClickOutside) {
-            this.checkboxesVisible = false;
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.isCaptionVisible = !!this.caption;
-        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
-        this.refresh();
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this);
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    /**
-     * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
-     * `multiselect.focus()`.
-     */
-    async setFocus(options) {
-        if (this.multiselectElement) {
-            this.multiselectElement.focus(options);
-        }
-    }
-    /**
-     * Sets the value of the multiselect to contain the items matching the given array. Does not clear the previous value.
-     * If multiple items share the same value that is included in the array, they all get selected.
-     */
-    async selectWithValues(values) {
-        const itemsMatchingValues = this.processedItems.filter(item => values.includes(item.value));
-        this.value = Array.from(new Set([...this.value, ...itemsMatchingValues]));
-    }
-    /**
-     * Local methods.
-     */
-    async refresh() {
-        const items = parsePossibleJSON(this.items);
-        this.processedItems = [];
-        this.processedGroups = [];
-        if (!items || items.length === 0) {
-            return;
-        }
-        if (items[0].items !== undefined) {
-            // given as groups
-            this.processedGroups = items;
-        }
-        else {
-            // gives as items, add them in a single unlabelled group
-            this.processedGroups = [{ label: "", items }];
-        }
-        this.processedGroups.forEach(group => group.items.forEach(item => this.processedItems.push(item)));
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        var _a;
-        return (h(Host, { key: '66db5f574c720ea5892865581aaaca95e7bfc202', class: {
-                "duet-m-0": this.margin === "none",
-                "duet-expand": this.expand,
-            } }, h("div", { key: '18447b64923b698d42addcd13946ae5b79d7c367', class: {
-                "duet-multiselect-container": true,
-                "duet-label-hidden": this.labelHidden,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-input-top-caption-shown": this.isCaptionVisible,
-                "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '92b58e72baf765345116e2d8aeadb73f2081f93e', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'fead19d08c45ed8cbc145afe829b09d0397428e9', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '462b6065093b4d84bcfdb35398eb726289bf8a04', name: "tooltip" }), this.caption && (h("duet-caption", { key: '6671b5e26502d71c3232822fe12e880a18c6a6e1', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '9b7b7dcfc90d7ac84a065822cc942908f1c5db23', class: "duet-multiselect-wrapper" }, h("button", { key: '2245ab42ac2ae7e8b058f6d3e040370a9d87f268', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'bf248bbe82cc02c50116cec46aa4a770557a7dc1', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '2a257d9881a89deb043d104e39915201364f0eb1', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '59e46400cc9f5b4cff182d0171ffd92efcbd28be' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '8bc274f5908872b24f0665f1b9e320bc3cef9d0d', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '737a6a477e1555ba07abd6bf584fd53c5922833b', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '34738d348dd5456962d4b992b769a6d94bec9495', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
-                "duet-multiselect-checkboxes": true,
-                "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '9b11edb9360d491679322c8ad4deb6a68bb1e8b5', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '62404c51498d8a9946ab949ab0e0fe084e989eee', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: 'c157c1fc780f85ca1e2c8268ff4e1c71dd40b6e4', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
-            this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
-                var _a, _b;
-                return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '74e0ecd38efb1cd7851f16e542eac089080bd3f2', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '7a1632365136bc299d70f12d986622451ad4661f' }, this.error)))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "items": ["refresh"]
-    }; }
-    static get style() { return DuetMultiselectStyle0; }
-}, [1, "duet-multiselect", {
-        "margin": [1],
-        "error": [1],
-        "accessibleLiveError": [1, "accessible-live-error"],
-        "expand": [4],
-        "value": [1040],
-        "theme": [1025],
-        "labelHidden": [4, "label-hidden"],
-        "identifier": [1],
-        "allControls": [4, "all-controls"],
-        "placeholder": [1],
-        "caption": [1],
-        "items": [1],
-        "disabled": [516],
-        "label": [1],
-        "labelColor": [1025, "label-color"],
-        "labelWeight": [1025, "label-weight"],
-        "accessibleDescribedBy": [1, "accessible-described-by"],
-        "tooltip": [1],
-        "tooltipDirection": [1, "tooltip-direction"],
-        "processedItems": [32],
-        "processedGroups": [32],
-        "checkboxesVisible": [32],
-        "activeDescendant": [32],
-        "language": [32],
-        "setFocus": [64],
-        "selectWithValues": [64]
-    }, [[8, "click", "handleFocus"]], {
-        "items": ["refresh"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-multiselect", "duet-caption", "duet-checkbox", "duet-icon", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-multiselect":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetMultiselect$1);
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetMultiselect = DuetMultiselect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetMultiselect, defineCustomElement };

package/lib/dist-custom-elements/duet-nav.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetNav extends Components.DuetNav, HTMLElement {}
-export const DuetNav: {
-    prototype: DuetNav;
-    new (): DuetNav;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-nav.js

@@ -1,54 +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';
-
-const duetNavCss = "*,*::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;width:100%}:host([sticky]){position:relative;z-index:300}.container{position:relative;z-index:400}::slotted(*[slot=mobile]){display:inherit}::slotted(*[slot=desktop]){display:none}@media (min-width: 62em){::slotted(*[slot=mobile]){display:none}::slotted(*[slot=desktop]){display:inherit}}.sticky{position:sticky;top:0}@media (min-width: 62em){.sticky{position:relative;top:unset}}";
-const DuetNavStyle0 = duetNavCss;
-
-const DuetNav$1 = /*@__PURE__*/ proxyCustomElement(class DuetNav extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.sticky = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '95a630a67e5b566bc05641ac7a676ed3ac63f5ee' }, h("div", { key: 'abcbac50ff4631707152e35779d9519a845a38b8', class: { container: true, sticky: this.sticky } }, h("slot", { key: '5f39c9e47f3897bd0c2911e40c71e6944aef19d6' }), h("slot", { key: 'd1c4f88457d7db9695701abbc982b1f589909871', name: "mobile" }), h("slot", { key: '810fa9cf8b03c900cd4923d2b8a3fc89f8c872af', name: "desktop" }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetNavStyle0; }
-}, [1, "duet-nav", {
-        "theme": [1025],
-        "sticky": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-nav"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-nav":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetNav$1);
-            }
-            break;
-    } });
-}
-
-const DuetNav = DuetNav$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetNav, defineCustomElement };

package/lib/dist-custom-elements/duet-notification-drawer.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetNotificationDrawer extends Components.DuetNotificationDrawer, HTMLElement {}
-export const DuetNotificationDrawer: {
-    prototype: DuetNotificationDrawer;
-    new (): DuetNotificationDrawer;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-notification-drawer.js

@@ -1,168 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h } from './p-d77db171.js';
-import { a as actionArrowDownSmall } from './p-115c79b6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
-import { a as getLanguage, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$4 } from './p-1296f851.js';
-import { d as defineCustomElement$3 } from './p-4da43fbc.js';
-import { d as defineCustomElement$2 } from './p-174a9d1d.js';
-
-const duetNotificationDrawerCss = "*,*::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;display:block;width:100%}.duet-drawer{position:relative}@media (min-width: 62em){.duet-drawer{display:inline-block}}.duet-drawer-toggle{position:relative;display:flex;align-items:center;width:100%;height:48px;padding:0 20px;overflow:hidden;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:400;font-variant-numeric:tabular-nums;line-height:48px;color:rgb(8, 42, 77);text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229);border-radius:0;-webkit-appearance:none;appearance:none}@media (min-width: 62em){.duet-drawer-toggle{z-index:200;width:auto;max-width:200px;padding:0 30px 0 12px;overflow:hidden;font-size:0.875rem;line-height:4rem;border:0;border-radius:4px;transition:border 300ms ease}}.duet-theme-turva .duet-drawer-toggle{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);background-color:rgb(255, 255, 255);border-color:rgb(222, 224, 228)}.duet-drawer-toggle:active{opacity:0.75}.duet-drawer-toggle:focus{outline:0}:host(.user-is-tabbing) .duet-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-drawer-toggle:hover{color:rgb(0, 75, 129)}.duet-theme-turva .duet-drawer-toggle:hover{color:rgb(113, 118, 132)}.duet-drawer-toggle::after{display:none !important}@media (min-width: 62em){.duet-drawer-toggle::after{position:absolute;top:auto;bottom:0;left:0;display:block !important;width:100%;height:3px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(3px)}.duet-theme-turva .duet-drawer-toggle::after{background:rgb(198, 12, 48)}}.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{color:rgb(0, 75, 129);border-bottom:1px solid rgb(245, 248, 250);border-radius:0}.duet-theme-turva .duet-drawer-toggle[aria-expanded=true],.duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover{color:rgb(113, 118, 132);border-color:rgb(245, 247, 250)}@media (min-width: 62em){.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{border:0}.duet-drawer-toggle[aria-expanded=true]::after,.duet-drawer-toggle[aria-expanded=true]:hover::after{left:0;width:100%;transform:translateY(0)}}.duet-drawer-icon{position:relative;display:inline-flex;min-width:12px;margin-right:12px;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-drawer-icon{margin-right:8px}}.duet-drawer-label{line-height:1}.duet-drawer-caret{position:absolute;top:50%;right:20px;display:flex;width:10px;height:10px;margin-left:8px;line-height:normal;pointer-events:none;transition:300ms ease;transform:translateY(-50%);transform-origin:50% 50%}@media (min-width: 62em){.duet-drawer-caret{right:16px;width:7px;height:7px}}.duet-drawer-caret duet-icon{width:10px}.duet-drawer-toggle[aria-expanded=true] .duet-drawer-caret{transform:translateY(-50%) rotate(180deg)}.duet-drawer-badge{position:absolute;top:0;right:0;display:inline-block;width:6px;height:6px;background:rgb(247, 178, 40);border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-drawer-badge{background:rgb(247, 178, 40)}.duet-drawer-content{display:none;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229)}.duet-drawer-content:focus{outline:0}.duet-theme-turva .duet-drawer-content{background-color:rgb(255, 255, 255);border-color:rgb(212, 223, 229)}@media (min-width: 62em){.duet-drawer-content{position:absolute;top:100%;z-index:600;display:block;width:450px;max-height:420px;padding-left:0;overflow-y:auto;visibility:hidden;background-color:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:300ms ease;transform:scale(0.95) translateZ(0) translateY(-10px);transform-origin:50% 0}.duet-theme-turva .duet-drawer-content{background-color:rgb(255, 255, 255)}.duet-drawer-content.duet-drawer-left{right:0}.duet-drawer-content.duet-drawer-right{left:0}}.duet-drawer-content.duet-drawer-open{display:block}@media (min-width: 62em){.duet-drawer-content.duet-drawer-open{visibility:visible;opacity:1;transform:scale(1) translateZ(0) translateY(0)}}";
-const DuetNotificationDrawerStyle0 = duetNotificationDrawerCss;
-
-const ESC_KEY = 27;
-const DuetNotificationDrawer$1 = /*@__PURE__*/ proxyCustomElement(class DuetNotificationDrawer extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Component event handling.
-         */
-        this.handleKeyDown = (ev) => {
-            if (this.isOpen && ev.keyCode === ESC_KEY) {
-                this.close();
-            }
-        };
-        this.toggleMenu = (e) => {
-            // this is needed to prevent the main menu closing on mobile
-            e.stopPropagation();
-            this.isOpen ? this.close() : this.open();
-        };
-        this.updateNotificationState = () => {
-            this.hasNotifications = this.element.children.length > 0;
-        };
-        this.isOpen = false;
-        this.hasNotifications = undefined;
-        this.icon = "";
-        this.label = "Label";
-        this.language = getLanguage();
-        this.accessibleLabelNotificationsDefaults = {
-            en: "No notifications",
-            fi: "Ei ilmoituksia",
-            sv: "Inga notifikationer",
-        };
-        this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
-        this.badge = false;
-        this.theme = "";
-        this.direction = "left";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.updateNotificationState();
-    }
-    connectedCallback() {
-        this.observer = new MutationObserver(this.updateNotificationState);
-        this.observer.observe(this.element, { childList: true });
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        this.observer.disconnect();
-        this.observer = null;
-        unsubscribeTabbingChange(this);
-    }
-    handleClickFocusOutside(e) {
-        const target = e.target;
-        if (this.isOpen && !this.element.contains(target)) {
-            this.close(false);
-        }
-    }
-    /**
-     * Move focus to the menu's button. Use instead of the native `focus()` method
-     * @param options
-     */
-    async setFocus(options) {
-        this.drawerButtonEl.focus(options);
-    }
-    /**
-     * Open the menu
-     */
-    async open() {
-        const header = this.element.closest("duet-header");
-        if (header) {
-            header.closeMenus();
-        }
-        this.isOpen = true;
-        this.drawerContentEl.scrollTop = 0;
-    }
-    /**
-     * Close the menu
-     * @param moveFocusToButton should focus be moved to the menu's button on close?
-     */
-    async close(moveFocusToButton = true) {
-        this.isOpen = false;
-        if (moveFocusToButton) {
-            this.setFocus({ preventScroll: true });
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h("div", { key: '1fcd96bf0423aef4ee96911cda6cbfd17dd7b5af', class: {
-                "duet-drawer": true,
-                "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '816332facf413ea0d4982e49a75bd6c8deb01384', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '2f2bb9fc0bf11b71afc63b575b558580be8d2bef', class: "duet-drawer-icon" }, h("duet-icon", { key: '894cf661f00dd98fde6c4588eff2f0e117294b6c', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '58e7f6dd2b4d6900bc1eb5b80c5f82a26a1eed5b', class: "duet-drawer-badge" }))), h("span", { key: 'd6fc2d433a6eabc135bc6298fc9ef47c2633b876', class: "duet-drawer-label" }, this.label), h("div", { key: 'd6e08501623205f6dfd9c9196fa19b5b44a5246f', class: "duet-drawer-caret" }, h("duet-icon", { key: '265d0ff440812f953004ec0e621e6c568635968b', margin: "none", size: "auto", icon: actionArrowDownSmall.svg, color: "currentColor" }))), h("div", { key: '0f557b4cd9db14546ae95e18f0e790bb30cbb93d', id: "duet-drawer-content", class: {
-                "duet-drawer-content": true,
-                "duet-drawer-right": this.direction === "right",
-                "duet-drawer-left": this.direction === "left",
-                "duet-drawer-open": this.isOpen,
-            }, ref: element => (this.drawerContentEl = element) }, this.hasNotifications ? (h("div", { role: "list" }, h("slot", null))) : (h("duet-empty-state", { size: "small" }, h("duet-paragraph", { size: "small", margin: "none" }, this.accessibleLabelNotifications))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetNotificationDrawerStyle0; }
-}, [1, "duet-notification-drawer", {
-        "icon": [1],
-        "label": [1],
-        "language": [1],
-        "accessibleLabelNotificationsDefaults": [1, "accessible-label-notification-default"],
-        "accessibleLabelNotifications": [1, "accessible-label-notifications"],
-        "badge": [4],
-        "theme": [1025],
-        "direction": [1],
-        "isOpen": [32],
-        "hasNotifications": [32],
-        "setFocus": [64],
-        "open": [64],
-        "close": [64]
-    }, [[6, "focus", "handleClickFocusOutside"], [6, "click", "handleClickFocusOutside"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-notification-drawer", "duet-empty-state", "duet-icon", "duet-paragraph"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-notification-drawer":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetNotificationDrawer$1);
-            }
-            break;
-        case "duet-empty-state":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-paragraph":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetNotificationDrawer = DuetNotificationDrawer$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetNotificationDrawer, defineCustomElement };

package/lib/dist-custom-elements/duet-notification.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetNotification extends Components.DuetNotification, HTMLElement {}
-export const DuetNotification: {
-    prototype: DuetNotification;
-    new (): DuetNotification;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;