@db-ux/wc-core-components 4.7.0-tabs-34782eb → 4.7.1

package/dist/collection/components/tab-item/tab-item.js

@@ -1,4 +1,4 @@
-import { cls, getBoolean } from "../../utils";
+import { cls, getBoolean, getBooleanAsString } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -6,49 +6,30 @@ import { h, } from "@stencil/core";
  */
 export class DBTabItem {
     constructor() {
+        this._selected = false;
+        this._name = undefined;
         this.initialized = false;
-        this.internalActive = false;
-        this.internalTabIndex = -1;
-        this.isTruncated = false;
-        this.tooltipText = "";
-        this._resizeObserver = null;
-        this._ariaSelectedListener = null;
+        this._listenerAdded = false;
+        this.boundSetSelectedOnChange = undefined;
     }
-    getCurrentTabIndex() {
-        return this.tabIndex !== undefined
-            ? Number(this.tabIndex)
-            : this.internalTabIndex;
+    setSelectedOnChange(event) {
+        event.stopPropagation();
+        this._selected = getBooleanAsString(event.target === this._ref);
     }
-    handleClick(event) {
-        if (event && event.preventDefault) {
-            event.preventDefault();
-        }
-        if (!getBoolean(this.disabled) && this.click) {
-            this.click.emit(event);
+    handleNameAttribute() {
+        if (this._ref) {
+            const setAttribute = this._ref.setAttribute;
+            this._ref.setAttribute = (attribute, value) => {
+                setAttribute.call(this._ref, attribute, value);
+                if (attribute === "name") {
+                    this._name = value;
+                }
+            };
         }
     }
-    checkTruncation() {
-        if (this._labelRef) {
-            const scrollWidth = Math.ceil(this._labelRef.scrollWidth);
-            const clientWidth = Math.ceil(this._labelRef.clientWidth);
-            const truncated = scrollWidth > clientWidth + 1;
-            if (this.isTruncated !== truncated) {
-                this.isTruncated = truncated;
-                if (!truncated && this._ref) {
-                    if (this._ref.hasAttribute("data-has-tooltip")) {
-                        this._ref.removeAttribute("data-has-tooltip");
-                    }
-                    if (this._ref.hasAttribute("aria-describedby")) {
-                        this._ref.removeAttribute("aria-describedby");
-                    }
-                }
-            }
-            this.tooltipText = truncated
-                ? this.label ||
-                    this._labelRef.innerText ||
-                    this._labelRef.textContent ||
-                    ""
-                : "";
+    handleChange(event) {
+        if (this.change) {
+            this.change.emit(event);
         }
     }
     /**
@@ -88,108 +69,53 @@ export class DBTabItem {
         }
     }
     watch0Fn() {
-        if (this.active !== undefined) {
-            this.internalActive = getBoolean(this.active) || false;
+        var _a;
+        if (this._ref && this.initialized && this.boundSetSelectedOnChange) {
+            this.initialized = false;
+            // deselect this tab when another tab in tablist is selected
+            if (!this._listenerAdded) {
+                (_a = this._ref
+                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.addEventListener("change", this.boundSetSelectedOnChange);
+                this._listenerAdded = true;
+            }
+            // Initialize selected state from either active prop (set by parent) or checked attribute
+            if (this.active || this._ref.checked) {
+                this._selected = getBooleanAsString(true);
+                this._ref.click();
+            }
         }
     }
     watch0() {
         this.watch0Fn();
     }
+    watch1Fn() {
+        if (this.name) {
+            this._name = this.name;
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-tab-item");
-        this.internalActive = getBoolean(this.active) || false;
-        this.internalTabIndex = getBoolean(this.active) ? 0 : -1;
-        if (typeof window !== "undefined") {
-            const setupObserverAndCheck = () => {
-                requestAnimationFrame(() => {
-                    this.checkTruncation();
-                    const labelEl = this._labelRef;
-                    if (labelEl && !labelEl.dataset.label) {
-                        labelEl.dataset.label =
-                            this.label || labelEl.innerText || labelEl.textContent || "";
-                    }
-                    if (this._labelRef) {
-                        const resizeObserver = new ResizeObserver(() => {
-                            requestAnimationFrame(() => {
-                                this.checkTruncation();
-                            });
-                        });
-                        resizeObserver.observe(this._labelRef);
-                        this._resizeObserver = resizeObserver;
-                    }
-                });
-            };
-            const hasIcon = this.showIcon && this.icon;
-            if (hasIcon && ((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready)) {
-                document.fonts.ready.then(setupObserverAndCheck);
-            }
-            else {
-                setupObserverAndCheck();
-            }
-        }
-        if (this._ref) {
-            const listener = (event) => {
-                this.internalActive = event.detail.selected;
-                if (this.tabIndex === undefined) {
-                    if (event.detail.tabIndex !== undefined) {
-                        this.internalTabIndex = event.detail.tabIndex;
-                    }
-                    else {
-                        this.internalTabIndex = event.detail.selected ? 0 : -1;
-                    }
-                }
-            };
-            this._ariaSelectedListener = {
-                fn: listener,
-            };
-            this._ref.addEventListener("aria-selected-changed", listener);
-        }
+        this.boundSetSelectedOnChange = this.setSelectedOnChange.bind(this);
+        this.initialized = true;
         this.watch0Fn();
+        this.watch1Fn();
     }
     disconnectedCallback() {
         var _a;
-        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        const _listener = this._ariaSelectedListener;
-        if (this._ref && _listener) {
-            this._ref.removeEventListener("aria-selected-changed", _listener.fn);
-        }
-    }
-    componentDidUpdate() {
-        var _a, _b;
-        if (this._ref) {
-            const isDisabled = getBoolean(this.disabled);
-            const disabledStr = isDisabled ? "true" : "false";
-            if (((_a = this._ref) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-disabled")) !== disabledStr) {
-                (_b = this._ref) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-disabled", disabledStr);
-            }
-            if (!this.isTruncated) {
-                if (this._ref.hasAttribute("data-has-tooltip")) {
-                    this._ref.removeAttribute("data-has-tooltip");
-                }
-                if (this._ref.hasAttribute("aria-describedby")) {
-                    this._ref.removeAttribute("aria-describedby");
-                }
-            }
+        if (this._listenerAdded && this._ref && this.boundSetSelectedOnChange) {
+            (_a = this._ref
+                .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.boundSetSelectedOnChange);
+            this._listenerAdded = false;
         }
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("button", { key: '87666630bffa6918a10d8b2f3539263d4dbcbc32', class: cls("db-tab-item", this.className), type: "button", role: "tab", title: "", ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("li", { key: '0b8687c942d18b49bdf25249be3f0ae1ca727256', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'b9eaa4d53de58d78d7f968d18b021c9cfe013502', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '81cf38a1a39e88fc85282e8b82d43768ce6f70a4', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, "aria-label": getBoolean(this.noText) ? this.label : undefined, "aria-selected": (this.active !== undefined
-                ? getBoolean(this.active)
-                : this.internalActive)
-                ? "true"
-                : "false", "aria-controls": this.ariaControls, disabled: getBoolean(this.disabled) ? true : undefined, tabIndex: this.getCurrentTabIndex(), id: this.id, "data-active": this.active !== undefined
-                ? getBoolean(this.active)
-                : this.internalActive, "data-no-text": getBoolean(this.noText) ? "true" : undefined, "data-value": this.value, onClick: (event) => this.handleClick(event) }, !this.noText ? (h("span", { class: "db-tab-label", title: "", ref: (el) => {
-                this._labelRef = el;
-            }, "data-icon": getBoolean((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon)
-                ? (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon
-                : undefined, "data-icon-trailing": getBoolean(this.showIconTrailing) ? this.iconTrailing : undefined }, this.label ? this.label : null, !this.label ? h("slot", null) : null)) : null, getBoolean(this.noText) ? (h("span", { class: "db-tab-label", "aria-hidden": "true", "data-icon": getBoolean((_c = this.showIconLeading) !== null && _c !== void 0 ? _c : this.showIcon)
-                ? (_d = this.iconLeading) !== null && _d !== void 0 ? _d : this.icon
-                : undefined })) : null, this.isTruncated && this.tooltipText ? (h("db-tooltip", { placement: "right" }, this.tooltipText)) : null));
+            }, name: this._name, id: (_e = this.id) !== null && _e !== void 0 ? _e : (_f = this.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '89a4ba46af36e8dcc3bc53f87d17977c5827cd12' }))));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {
@@ -220,11 +146,11 @@ export class DBTabItem {
                 "reflect": false,
                 "attribute": "active"
             },
-            "label": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"label\"]",
+                    "original": "DBTabItemProps[\"name\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
@@ -244,14 +170,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "name"
             },
-            "showIcon": {
-                "type": "any",
+            "className": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"showIcon\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBTabItemProps[\"className\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -270,14 +196,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon"
+                "attribute": "classname"
             },
-            "icon": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"icon\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "original": "DBTabItemProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -296,14 +222,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "id"
             },
-            "tabIndex": {
-                "type": "any",
+            "propOverrides": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"tabIndex\"]",
-                    "resolved": "number | string",
+                    "original": "DBTabItemProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -320,16 +246,14 @@ export class DBTabItem {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tab-index"
+                "setter": false
             },
-            "disabled": {
-                "type": "any",
+            "iconLeading": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"disabled\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBTabItemProps[\"iconLeading\"]",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -348,14 +272,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "icon-leading"
             },
-            "className": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"className\"]",
-                    "resolved": "string",
+                    "original": "DBTabItemProps[\"icon\"]",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -374,14 +298,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "icon"
             },
-            "noText": {
-                "type": "any",
+            "iconTrailing": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"noText\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBTabItemProps[\"iconTrailing\"]",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -400,14 +324,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "no-text"
+                "attribute": "icon-trailing"
             },
-            "ariaControls": {
-                "type": "string",
+            "showIconLeading": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"ariaControls\"]",
-                    "resolved": "string",
+                    "original": "DBTabItemProps[\"showIconLeading\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -426,14 +350,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-controls"
+                "attribute": "show-icon-leading"
             },
-            "id": {
-                "type": "string",
+            "showIcon": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"id\"]",
-                    "resolved": "string",
+                    "original": "DBTabItemProps[\"showIcon\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -452,14 +376,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "show-icon"
             },
-            "value": {
-                "type": "string",
+            "showIconTrailing": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"value\"]",
-                    "resolved": "string",
+                    "original": "DBTabItemProps[\"showIconTrailing\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -478,13 +402,13 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "show-icon-trailing"
             },
-            "showIconLeading": {
+            "noText": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"showIconLeading\"]",
+                    "original": "DBTabItemProps[\"noText\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
@@ -504,14 +428,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon-leading"
+                "attribute": "no-text"
             },
-            "iconLeading": {
-                "type": "string",
+            "disabled": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"iconLeading\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "original": "DBTabItemProps[\"disabled\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -530,13 +454,13 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-leading"
+                "attribute": "disabled"
             },
-            "showIconTrailing": {
+            "checked": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"showIconTrailing\"]",
+                    "original": "DBTabItemProps[\"checked\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
@@ -556,14 +480,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon-trailing"
+                "attribute": "checked"
             },
-            "iconTrailing": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"iconTrailing\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "original": "DBTabItemProps[\"label\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -582,25 +506,23 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-trailing"
+                "attribute": "label"
             }
         };
     }
     static get states() {
         return {
+            "_selected": {},
+            "_name": {},
             "initialized": {},
-            "internalActive": {},
-            "internalTabIndex": {},
-            "isTruncated": {},
-            "tooltipText": {},
-            "_resizeObserver": {},
-            "_ariaSelectedListener": {}
+            "_listenerAdded": {},
+            "boundSetSelectedOnChange": {}
         };
     }
     static get events() {
         return [{
-                "method": "click",
-                "name": "click",
+                "method": "change",
+                "name": "change",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -617,8 +539,17 @@ export class DBTabItem {
     }
     static get watchers() {
         return [{
-                "propName": "active",
+                "propName": "_ref",
+                "methodName": "watch0"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch0"
+            }, {
+                "propName": "boundSetSelectedOnChange",
                 "methodName": "watch0"
+            }, {
+                "propName": "name",
+                "methodName": "watch1"
             }];
     }
 }