@duetds/components 9.1.2 → 9.2.1

package/lib/cjs/duet-chip.cjs.entry.js

@@ -1,290 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9e6f7e53.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.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(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(207, 210, 212);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(207, 207, 209)}.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(101, 119, 135) !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(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.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, 245, 247);border-color:rgb(245, 245, 247)}.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(0, 41, 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(230, 242, 248);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(205, 229, 241)}.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, 245, 247);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(228, 228, 230)}.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(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus{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{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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.duetChange = index.createEvent(this, "duetChange", 3);
-        this.duetRemove = index.createEvent(this, "duetRemove", 3);
-        this.duetFocus = index.createEvent(this, "duetFocus", 7);
-        this.duetBlur = index.createEvent(this, "duetBlur", 7);
-        /**
-         * Own Properties.
-         */
-        this.chipId = createId.createID("DuetChip");
-        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.stopPropagation();
-            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.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.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() {
-        themeableComponent.inheritGlobalTheme(this);
-        this.popupSetUp();
-        this.enforceNoDisabledSelected();
-    }
-    connectedCallback() {
-        keyboardUtils.subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        keyboardUtils.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;
-        }
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        setTimeout(() => this.focusableElement.focus(options), 200);
-    }
-    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-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 (index.h(index.Host, { key: '83bf513ef7192b64d92eb428ca47fbdf317468d9', class: { [this.variation]: true } }, this.variation === "button" && (index.h("span", { key: '750fdb0037f02571a465c86dfed9f81a4e4f1110', class: classes }, index.h("button", Object.assign({ key: '49d5409a3600f91d6feefdafb207d17e330f53a3', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), index.h("span", { key: '609549b8eb1bc7b9c3e7049f94dc9678b9dc259f', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: '9167ad7ccd13479061d6849af2938bc868e51677', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: 'f8ab715a57220b96dbdbd2478207c4ba40ba325b' })))), this.variation === "input" && (index.h("span", { key: '0f1faa69c817a88de8716de8b261fa63688c899b', class: classes }, index.h("button", Object.assign({ key: '1955c7a24051d1c5b7671bf4a8438ee1c014b7cc', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel }, focusHandlers), index.h("span", { key: '3d69ad3ec1037f7b8278156392e902a2317f758c', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: 'c056e4f37ca87f98fb8743d5b723232e8335f83c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: 'f257712ed166db7feb280d894bb1c111fa6fe171' })), index.h("button", { key: '0735914e5223ab4aed75f03e08e39af6a10ced8e', class: "duet-chip-remove-button", onClick: this.onRemoveClick }, index.h("duet-icon", { key: '3478c9f87f043e61f96a7595a35db8849c0c730c', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (index.h("span", { key: 'a656fd6ce69c6201d0dd7407170c88c47e8f2a67', class: classes }, index.h("input", Object.assign({ key: '51dd1e0898d2af86d493e25b9d623d422a1e3ca8', "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)), index.h("label", { key: '60a550a09fcebb26e886503f0d9c637e6e2447cc', htmlFor: identifier }, this.icon && (index.h("span", { key: 'ba317cf437844d8c8694956e114687fa0d531daf', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: '4e6bd4e5e0003bf649929dfdb36ca0f5b00e3e4c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: '7d427ed0b6d4d15a1eb1b3c0515e3d0d119a5197', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: '943da2eae596920b321008ca6d927411109555db' }), this.popupElement && (index.h("span", { key: 'ccff1c7a99e9bf1b96449d061526a6f207907dfe', class: "duet-chip-popup-disclosure" }, index.h("duet-icon", { key: 'b381a2ae097f9de261f971882520688b0857a02f', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (index.h("span", { key: '804eec75bc2347e568c5ebe9c994d909df7a6d15', class: classes }, index.h("slot", { key: '74bef72f091082f56c3cbdc01c6284a347de775f', name: "input" }), index.h("label", { key: '2a1fb8e4e0da4b7aa89fad54677e8cc3c0ea318f', htmlFor: identifier }, this.icon && (index.h("span", { key: '6bf61ec47a6647c05ef31fcef2d955740a37e55e', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: '0c780d8a156ebb569408bbac96838b8627818b79', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: 'ed9beaf0e2c72f762c8abcc8ebec1a149ce4f31e', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: 'b1c9725c085d8d27b273eae4eba95b8c911343db' }))))));
-    }
-    get element() { return index.getElement(this); }
-    static get watchers() { return {
-        "checked": ["clearOtherRadioButtons"]
-    }; }
-};
-DuetChip.style = DuetChipStyle0;
-
-exports.duet_chip = DuetChip;

package/lib/cjs/duet-popup-menu-item.cjs.entry.js

@@ -1,83 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9e6f7e53.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-
-const duetPopupMenuItemCss = "*,*::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:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start}.duet-popup-menu-item{display:flex;flex-grow:1;gap:12px;align-items:center;height:100%;padding:8px;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.5;color:rgb(0, 41, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-popup-menu-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-popup-menu-item:focus,.duet-popup-menu-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-popup-menu-item.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)}.duet-popup-menu-item.active{background:rgb(243, 249, 252)}.duet-popup-menu-item.active.duet-theme-turva{background:rgb(245, 245, 247)}.duet-popup-menu-item:hover{background:rgb(230, 242, 248)}.duet-popup-menu-item:hover.duet-theme-turva{background:rgb(228, 228, 230)}.duet-popup-menu-item .duet-popup-menu-item-label{flex-grow:1}.duet-popup-menu-item .duet-popup-menu-item-trailing{padding-left:20px}";
-const DuetPopupMenuItemStyle0 = duetPopupMenuItemCss;
-
-const DuetPopupMenuItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.duetFocus = index.createEvent(this, "duetFocus", 7);
-        this.duetBlur = index.createEvent(this, "duetBlur", 7);
-        /**
-         * Component event handling.
-         */
-        this.onFocus = (ev) => {
-            this.focus = true;
-            this.duetFocus.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-popup-menu-item",
-            });
-        };
-        this.onBlur = (ev) => {
-            this.focus = false;
-            this.duetBlur.emit({
-                originalEvent: ev,
-                value: this.value,
-                component: "duet-popup-menu-item",
-            });
-        };
-        this.focus = false;
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menuitem";
-        this.theme = "";
-        this.url = undefined;
-        this.external = false;
-        this.targetLanguage = undefined;
-        this.value = undefined;
-        this.leadingIcon = undefined;
-        this.leadingIconColor = undefined;
-        this.trailingIcon = undefined;
-        this.trailingText = undefined;
-        this.active = false;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        themeableComponent.inheritGlobalTheme(this);
-    }
-    /**
-     * Sets focus. Use this method instead of the global focus().
-     */
-    async setFocus(options) {
-        setTimeout(() => this.itemElement.focus(options), 200);
-    }
-    /**
-     * isFocused.
-     */
-    async isFocused() {
-        return this.focus;
-    }
-    render() {
-        const TagName = this.url ? "a" : "button";
-        const classes = {
-            "duet-popup-menu-item": true,
-            active: this.active,
-            "duet-theme-turva": this.theme === "turva",
-        };
-        return (index.h(index.Host, { key: '35289f7f89fa2e759761d2b5309c1c50903cde81', role: this.accessibleRole }, index.h(TagName, { key: 'dd0cb6088ab305ed97ff28598ca5424893c71aab', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (index.h("duet-icon", { key: 'b877792e8c47959bfa240713f74a510930630cdf', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), index.h("span", { key: '99d5337b72c8aa36a6ae2962e4112cf0158ea3e2', class: "duet-popup-menu-item-label" }, index.h("slot", { key: 'ca46da07ce9fdd7e9a080a1f592b213dac6e7ede' })), (this.trailingIcon || this.active) && (index.h("duet-icon", { key: '22bdf49aaed6e82113dd096de1e8f6c730034c3c', name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && index.h("span", { key: '3ab96002796300ed841354ad491ec77c99be97b5', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
-    }
-    get element() { return index.getElement(this); }
-};
-DuetPopupMenuItem.style = DuetPopupMenuItemStyle0;
-
-exports.duet_popup_menu_item = DuetPopupMenuItem;

package/lib/cjs/duet-popup-menu.cjs.entry.js

@@ -1,250 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9e6f7e53.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-806e7c53.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const focusUtils = require('./focus-utils-8bf2f9fe.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const teleport = require('./teleport-c6f8391a.js');
-
-const duetPopupMenuCss = "*,*::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-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(0, 41, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}";
-const DuetPopupMenuStyle0 = duetPopupMenuCss;
-
-const DuetPopupMenu = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.duetToggle = index.createEvent(this, "duetToggle", 7);
-        this.setOpenButton = (element) => {
-            if (!element) {
-                return;
-            }
-            try {
-                const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
-                button.setAttribute("trailing-icon", "action-arrow-down-small");
-                this.openButton = button;
-            }
-            catch (_e) { }
-        };
-        this.openButtonEventListener = () => {
-            this.toggle();
-        };
-        this.updatePlacement = async () => {
-            if (!this.openButton) {
-                return;
-            }
-            const middleware = [
-                floatingUi_dom_esm.offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
-                floatingUi_dom_esm.flip({ mainAxis: !this.forcePlacement }),
-            ];
-            const coordinates = await floatingUi_dom_esm.computePosition(this.openButton, this.menuElement, {
-                middleware,
-                placement: this.placement,
-                strategy: this.position,
-            });
-            this.menuY = coordinates.y;
-            this.menuX = coordinates.x;
-        };
-        this.open = false;
-        this.menuY = undefined;
-        this.menuX = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menu";
-        this.theme = "";
-        this.skipTeleport = undefined;
-        this.controller = undefined;
-        this.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        themeableComponent.inheritGlobalTheme(this);
-    }
-    componentDidLoad() {
-        {
-            this.updatePlacement();
-        }
-    }
-    connectedCallback() {
-        this.handleControllerChange(this.controller, null);
-        if (!this.teleport) {
-            this.teleport = new teleport.Teleport(this.element);
-        }
-        if (this.teleport) {
-            this.teleport.activate();
-        }
-    }
-    disconnectedCallback() {
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-            this.openButton.removeAttribute("trailing-icon");
-        }
-    }
-    /**
-     * Component event handling.
-     */
-    handleKeyUp(evt) {
-        if (this.open) {
-            // When Esc is pressed the menu should be closed
-            if (keyboardUtils.isEscapeKey(evt)) {
-                this.focusOpenButton();
-                this.hide();
-            }
-        }
-    }
-    async handleKeyDown(evt) {
-        if (this.open) {
-            if (keyboardUtils.isArrowDownKey(evt)) {
-                evt.preventDefault();
-                const current = await this.getFocusedItemIndex();
-                if (current !== -1) {
-                    if (current < this.itemElements.length - 1) {
-                        this.itemElements[current + 1].setFocus();
-                    }
-                    else {
-                        this.itemElements[0].setFocus();
-                    }
-                }
-            }
-            if (keyboardUtils.isArrowUpKey(evt)) {
-                evt.preventDefault();
-                const current = await this.getFocusedItemIndex();
-                if (current !== -1) {
-                    if (current === 0) {
-                        this.itemElements[this.itemElements.length - 1].setFocus();
-                    }
-                    else {
-                        this.itemElements[current - 1].setFocus();
-                    }
-                }
-            }
-            if (keyboardUtils.isTabKey(evt) && this.accessibleRole === "menu") {
-                evt.preventDefault();
-                this.hide();
-            }
-        }
-    }
-    handleClick(evt) {
-        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.openButton);
-        if (this.open && isClickOutside) {
-            this.hide();
-        }
-    }
-    /**
-     * isOpen.
-     */
-    async isOpen() {
-        return this.open;
-    }
-    /**
-     * Show.
-     */
-    async show() {
-        this.open = true;
-    }
-    /**
-     * Hide.
-     */
-    async hide() {
-        this.open = false;
-    }
-    /**
-     * Toggle.
-     */
-    async toggle() {
-        if (this.open) {
-            this.hide();
-        }
-        else {
-            this.show();
-        }
-    }
-    handleControllerChange(newValue, oldValue) {
-        if (!!newValue === !!oldValue) {
-            return;
-        }
-        if (typeof this.controller === "string") {
-            this.setOpenButton(document.getElementById(this.controller));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(this.controller);
-        }
-    }
-    handleOpenChange(newValue, oldValue) {
-        if (!!newValue === !!oldValue) {
-            return;
-        }
-        if (this.open && !oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
-            this.teleport.makeSiblingsInert();
-            this.updatePlacement();
-            setTimeout(() => {
-                if (this.accessibleRole === "menu") {
-                    this.itemElements[0].setFocus();
-                }
-                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-            }, 200);
-        }
-        else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
-            setTimeout(() => {
-                if (this.accessibleRole === "menu") {
-                    this.focusOpenButton();
-                }
-                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-                this.teleport.removeInertFromSiblings();
-            }, 200);
-        }
-    }
-    focusOpenButton() {
-        if (this.open) {
-            focusUtils.focusElement(this.openButton);
-        }
-    }
-    get itemElements() {
-        return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
-    }
-    async getFocusedItemIndex() {
-        const items = this.itemElements;
-        for (let i = 0; i < items.length; i++) {
-            if (await items[i].isFocused()) {
-                return i;
-            }
-        }
-        return -1;
-    }
-    render() {
-        const positionStyles = {
-            top: `${this.menuY}px`,
-            left: `${this.menuX}px`,
-            position: this.position,
-        };
-        return (index.h(index.Host, { key: 'dbd5d6ba344124704ad5798622aeed8e2f1edb1b' }, index.h("div", { key: 'a59dd98042f84b7460956b4b94870691f7af399e', ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, index.h("slot", { key: '2a0d9c72cc78e95918685a0b13f9c184d352867e' }))));
-    }
-    get element() { return index.getElement(this); }
-    static get watchers() { return {
-        "controller": ["handleControllerChange"],
-        "open": ["handleOpenChange"]
-    }; }
-};
-DuetPopupMenu.style = DuetPopupMenuStyle0;
-
-exports.duet_popup_menu = DuetPopupMenu;