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

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

@@ -0,0 +1,356 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+var index = require('./index-B1t_Yumd.js');
+var themeableComponent = require('./themeable-component-DmPMm0Cz.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-Ce6b_uA3.js');
+require('./string-utils-B35hEUBv.js');
+
+const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;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;line-height:1.1;color:rgb(8, 42, 77) !important;text-align:center;hyphens:none;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:8px}.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:12px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:12px}.duet-chip-container duet-icon:not(.check-mark){visibility:visible;width:auto;transform:scaleX(1);transition:width 300ms ease, transform 300ms ease}.duet-chip-container duet-icon.check-mark{visibility:hidden;width:0;overflow:hidden;transform:scaleX(0);transition:width 300ms ease, transform 300ms ease}.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){visibility:hidden;width:0;overflow:hidden;transform:scaleX(0);transition:width 300ms ease, transform 300ms ease}.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{visibility:visible;width:auto;transform:scaleX(1);transition:width 300ms ease, transform 300ms ease}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(255, 241, 241);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(255, 213, 215)}.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(255, 241, 241);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 18px}.duet-chip-container.large.duet-chip-has-icon .duet-chip-icon-container{width:30px;padding-right:10px}.duet-chip-container.large .duet-chip-popup-disclosure{padding-right:6.5px;padding-left:14.5px}:host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva2,.duet-theme-turva :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-chip-container input,*::slotted([slot=input]){position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-width:2px;border-radius:8px;opacity:0}*::slotted([slot=input]:not([aria-disabled=true])){z-index:1}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva{color:rgb(23, 42, 59) !important;border-color:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva:hover{border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked,:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked{background:rgb(253, 247, 242);border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-checked:hover,:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-radio-checked:hover{background:rgb(251, 225, 209)}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-filter-popup-open{background:rgb(253, 247, 242);border-color:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input:hover{border-color:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-hover,:host(.duet-theme-turva2) .duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected{border-color:rgb(230, 23, 64)}";
+
+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);
+        this.focus = false;
+        /**
+         * Own Properties.
+         */
+        this.chipId = createId.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.inputChipHover = false;
+        this.inputChipDeleteFocus = false;
+        /**
+         * Variation of the chip.
+         * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
+         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
+         * used with a value. Input represents items input by the user, and the chip can be removed with a click.
+         * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+         */
+        this.variation = "button";
+        /**
+         * Size of the chip. Use "large" for a chip that has the same height as default duet-input and duet-button.
+         */
+        this.size = "medium";
+        /**
+         * Icon to display to the left of the chip content.
+         */
+        this.icon = "";
+        /**
+         * Theme of the button.
+         */
+        this.theme = "";
+        /**
+         * Selected state of the input chip. Deleting the input chip with backspace key should be done only for a selected
+         * chip. If a chip is not selected, backspace key should select it.
+         * @internal
+         */
+        this.selected = false;
+        /**
+         * Checked state of the filter chip.
+         */
+        this.checked = false;
+        /**
+         * Makes the chip look inactive and announced as unavailable to assistive technologies. Prevents the default action.
+         * Not available for the input variation.
+         */
+        this.disabled = false;
+        /**
+         * Use this property to add an aria-haspopup attribute.
+         */
+        this.accessiblePopup = "false";
+        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");
+            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;
+            radioInput.ariaLabel = this.element.textContent;
+            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();
+        };
+    }
+    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;
+                }
+            });
+        }
+    }
+    removeDisabledAttributeWhenFalse() {
+        if (!this.disabled) {
+            this.element.removeAttribute("disabled");
+        }
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        this.removeDisabledAttributeWhenFalse();
+        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;
+        }
+    }
+    getAccessibleDeleteLabel() {
+        return `${languageUtils.getLocaleString(this.deleteLabels)} ${this.element.textContent}`;
+    }
+    getAccessibleInputChipLabel() {
+        return `${this.element.textContent}${this.selected ? ` (${languageUtils.getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
+    }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        keyboardUtils.enableUserIsTabbing();
+        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 (index.h(index.Host, { key: 'fec47aedb512eead9eb64575e8f98b678e53f41d', class: { [this.variation]: true } }, this.variation === "button" && (index.h("span", { key: 'eff19ffc79c16ebd3bacbbdf5fb02ce1feb26c49', class: classes }, index.h("button", Object.assign({ key: '7e2f2da2eb55db53d182bab0283746543bbf7052', 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), index.h("span", { key: '8ed98fe02241fe8ba40388532df90c056697a8eb', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: 'c9e40650866119a9c8609bce2525fb2e0ae7a4b7', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: '91d3860bd84c5665487440a84dc7139cc057da9b' })))), this.variation === "input" && (index.h("span", { key: '0edd53d2a0b5eaf47e8a7ba9260997ab8a893a90', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, index.h("button", Object.assign({ key: '1390d0b60f05efe534ce7a93e0fd1e1013b4fcf7', 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), index.h("span", { key: 'a77442337da66dcca7e46eac520ea2601a0f200e', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: 'a95497c8e5dd1fbeb97715f19678c66448fc3981', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: 'b4d281bfb01a611d911b4ee1780c1c36df499943' })), index.h("button", { key: '621d6fc5dc6d2f820ab8f570921ee8335d6992dd', 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) }, index.h("duet-icon", { key: 'bc8ef1b7a5026b38f088507488e372eb94fe24d3', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (index.h("span", { key: 'a23d77fb07a75d9dad213738cde1b8f7fc065a75', class: classes }, index.h("input", Object.assign({ key: 'bece465fae4c3428c895cb1e28f5bb370f7226d7', "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: 'c8ca07278535a0735aaf0b3609b057b7b07d73a7', htmlFor: identifier }, this.icon && (index.h("span", { key: 'b2040b8ad45d57cae370db873126f6af04103e35', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: 'de63c47bcd290a7bb278d18044dcbb59f3d36bdd', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: 'e85e6a5937affd776ad433d0fff928e2985606f6', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: 'be966f534808d4c13283c7a428b8bd5f220f57ac' }), this.popupElement && (index.h("span", { key: '1f3d21e7eba82aa859081602aa42a9f84d320de2', class: "duet-chip-popup-disclosure" }, index.h("duet-icon", { key: 'af6883b215be51bbfd4d4a763f9a7f93a3196368', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (index.h("span", { key: '30bd7e485658623c6bb9ee6f72f6e90a145fcd62', class: classes }, index.h("slot", { key: 'da5cb9135a68d3d76a81d5c129b4065dc79dcb58', name: "input" }), index.h("label", { key: 'bc19df62252b9a253d26bc989c6c8120c89d56a3', htmlFor: identifier }, this.icon && (index.h("span", { key: 'd35af1432d982b9ba952abed1395b90748501f11', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: 'd75598a3891d73aaac169b59201294c462fe3e5c', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: '88a3bbd9d095a53fef6b723f96fc3818b28889db', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: '7c2b2e07d9b91726f23248f13abe2c7a0816ddfe' }))))));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["clearOtherRadioButtons"],
+        "disabled": ["removeDisabledAttributeWhenFalse"]
+    }; }
+};
+DuetChip.style = duetChipCss;
+
+exports.duet_chip = DuetChip;