@duetds/components 8.0.6 → 8.1.0

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

@@ -5,201 +5,201 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2cce7b13.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
-const createId = require('./create-id-167cd350.js');
+const index = require('./index-ce232ed8.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const createId = require('./create-id-1f8c438f.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}.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(144, 149, 153);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(23, 28, 58)}.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:7px 16px;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, 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;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow: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{background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(205, 229, 241);border-color:rgb(205, 229, 241)}.duet-chip-container.duet-chip-filter-checked button,.duet-chip-container.duet-chip-filter-checked label,.duet-chip-container.duet-chip-radio-checked button,.duet-chip-container.duet-chip-radio-checked 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;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;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(245, 245, 247)}.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);border-color:rgb(228, 228, 230)}.duet-chip-container div.duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container div.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}: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{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
 
 const DuetChip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetChange = index.createEvent(this, "duetChange", 3);
-    this.duetFocus = index.createEvent(this, "duetFocus", 7);
-    this.duetBlur = index.createEvent(this, "duetBlur", 7);
-    /**
-     * Own Properties.
-     */
-    this.chipId = createId.createID("DuetChip");
-    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;
-          });
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.duetChange = index.createEvent(this, "duetChange", 3);
+        this.duetFocus = index.createEvent(this, "duetFocus", 7);
+        this.duetBlur = index.createEvent(this, "duetBlur", 7);
+        /**
+         * Own Properties.
+         */
+        this.chipId = createId.createID("DuetChip");
+        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",
+            });
         };
-        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;
+        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);
+        };
+        /**
+         * 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;
             }
-            else {
-              clearActive();
-              this.element.textContent = originalText;
-              this.value = originalValue;
-              this.checked = false;
+            if (this.popupElement) {
+                evt.stopPropagation();
+                evt.preventDefault();
+                this.popupElement.toggle();
             }
-            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();
-              }
+        };
+        /**
+         * Remove input chip
+         */
+        this.onRemoveClick = (evt) => {
+            evt.stopPropagation();
+            evt.preventDefault();
+            this.element.remove();
+        };
+        this.focus = false;
+        this.popupElement = undefined;
+        this.popupOpen = undefined;
+        this.accessibleLabel = undefined;
+        this.variation = "button";
+        this.popup = undefined;
+        this.icon = "";
+        this.theme = "";
+        this.identifier = undefined;
+        this.value = undefined;
+        this.name = undefined;
+        this.checked = false;
+        this.disabled = 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 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);
-    };
+        }
+    }
     /**
-     * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+     * Component lifecycle events.
      */
-    this.onFilterClick = (evt) => {
-      if (this.disabled) {
-        evt.stopPropagation();
-        evt.preventDefault();
-        return;
-      }
-      if (this.popupElement) {
-        evt.stopPropagation();
-        evt.preventDefault();
-        this.popupElement.toggle();
-      }
-    };
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        this.popupSetUp();
+    }
     /**
-     * Remove input chip
+     * Sets focus. Use this method instead of the global focus().
      */
-    this.onRemoveClick = (evt) => {
-      evt.stopPropagation();
-      evt.preventDefault();
-      this.element.remove();
-    };
-    this.focus = false;
-    this.popupElement = undefined;
-    this.popupOpen = undefined;
-    this.accessibleLabel = undefined;
-    this.variation = "button";
-    this.popup = undefined;
-    this.icon = "";
-    this.theme = "";
-    this.identifier = undefined;
-    this.value = undefined;
-    this.name = undefined;
-    this.checked = false;
-    this.disabled = 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;
-        }
-      });
+    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,
+        };
+        const focusHandlers = {
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            ref: el => (this.focusableElement = el),
+        };
+        return (index.h(index.Host, null, this.variation === "button" && (index.h("div", { class: classes }, index.h("button", Object.assign({ 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("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", null)))), this.variation === "input" && (index.h("div", { class: classes }, index.h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), index.h("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", null)), index.h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, index.h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (index.h("div", { class: classes }, index.h("input", Object.assign({ "aria-haspopup": this.popupElement && "menu", "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popupElement ? (this.popupOpen ? "true" : "false") : undefined, "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", { htmlFor: identifier }, index.h("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), index.h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), index.h("slot", null), this.popupElement && (index.h("div", { class: "duet-chip-popup-disclosure" }, index.h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (index.h("div", { class: classes }, index.h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), index.h("label", { htmlFor: identifier }, index.h("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), index.h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), index.h("slot", null))))));
     }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    this.popupSetUp();
-  }
-  /**
-   * 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,
-    };
-    const focusHandlers = {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      ref: el => (this.focusableElement = el),
-    };
-    return (index.h(index.Host, null, this.variation === "button" && (index.h("div", { class: classes }, index.h("button", Object.assign({ 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("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", null)))), this.variation === "input" && (index.h("div", { class: classes }, index.h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), index.h("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", null)), index.h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, index.h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (index.h("div", { class: classes }, index.h("input", Object.assign({ "aria-haspopup": this.popupElement && "menu", "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popupElement ? (this.popupOpen ? "true" : "false") : undefined, "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", { htmlFor: identifier }, index.h("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), index.h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), index.h("slot", null), this.popupElement && (index.h("div", { class: "duet-chip-popup-disclosure" }, index.h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (index.h("div", { class: classes }, index.h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), index.h("label", { htmlFor: identifier }, index.h("div", { class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), index.h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), index.h("slot", null))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "checked": ["clearOtherRadioButtons"]
-  }; }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["clearOtherRadioButtons"]
+    }; }
 };
 DuetChip.style = duetChipCss;