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

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

@@ -1,4 +1,4 @@
-import { cls, getBoolean, getBooleanAsString } from "../../utils";
+import { cls, getBoolean } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -6,30 +6,49 @@ import { h, } from "@stencil/core";
  */
 export class DBTabItem {
     constructor() {
-        this._selected = false;
-        this._name = undefined;
         this.initialized = false;
-        this._listenerAdded = false;
-        this.boundSetSelectedOnChange = undefined;
+        this.internalActive = false;
+        this.internalTabIndex = -1;
+        this.isTruncated = false;
+        this.tooltipText = "";
+        this._resizeObserver = null;
+        this._ariaSelectedListener = null;
     }
-    setSelectedOnChange(event) {
-        event.stopPropagation();
-        this._selected = getBooleanAsString(event.target === this._ref);
+    getCurrentTabIndex() {
+        return this.tabIndex !== undefined
+            ? Number(this.tabIndex)
+            : this.internalTabIndex;
     }
-    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;
-                }
-            };
+    handleClick(event) {
+        if (event && event.preventDefault) {
+            event.preventDefault();
+        }
+        if (!getBoolean(this.disabled) && this.click) {
+            this.click.emit(event);
         }
     }
-    handleChange(event) {
-        if (this.change) {
-            this.change.emit(event);
+    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 ||
+                    ""
+                : "";
         }
     }
     /**
@@ -69,53 +88,108 @@ export class DBTabItem {
         }
     }
     watch0Fn() {
-        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();
-            }
+        if (this.active !== undefined) {
+            this.internalActive = getBoolean(this.active) || false;
         }
     }
     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.boundSetSelectedOnChange = this.setSelectedOnChange.bind(this);
-        this.initialized = true;
+        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.watch0Fn();
-        this.watch1Fn();
     }
     disconnectedCallback() {
         var _a;
-        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;
+        (_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");
+                }
+            }
         }
     }
     render() {
-        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) => {
+        var _a, _b, _c, _d;
+        return (h("button", { key: '87666630bffa6918a10d8b2f3539263d4dbcbc32', class: cls("db-tab-item", this.className), type: "button", role: "tab", title: "", ref: (el) => {
                 this._ref = el;
-            }, 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' }))));
+            }, "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));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {
@@ -146,11 +220,11 @@ export class DBTabItem {
                 "reflect": false,
                 "attribute": "active"
             },
-            "name": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"name\"]",
+                    "original": "DBTabItemProps[\"label\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
@@ -170,14 +244,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "label"
             },
-            "className": {
-                "type": "string",
+            "showIcon": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"className\"]",
-                    "resolved": "string",
+                    "original": "DBTabItemProps[\"showIcon\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -196,14 +270,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "show-icon"
             },
-            "id": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"id\"]",
-                    "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",
@@ -222,14 +296,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "icon"
             },
-            "propOverrides": {
-                "type": "unknown",
+            "tabIndex": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"propOverrides\"]",
-                    "resolved": "{ id?: string; }",
+                    "original": "DBTabItemProps[\"tabIndex\"]",
+                    "resolved": "number | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -246,14 +320,16 @@ export class DBTabItem {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab-index"
             },
-            "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",
@@ -272,14 +348,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-leading"
+                "attribute": "disabled"
             },
-            "icon": {
+            "className": {
                 "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[\"className\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -298,14 +374,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "classname"
             },
-            "iconTrailing": {
-                "type": "string",
+            "noText": {
+                "type": "any",
                 "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[\"noText\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -324,14 +400,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-trailing"
+                "attribute": "no-text"
             },
-            "showIconLeading": {
-                "type": "any",
+            "ariaControls": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"showIconLeading\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBTabItemProps[\"ariaControls\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -350,14 +426,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon-leading"
+                "attribute": "aria-controls"
             },
-            "showIcon": {
-                "type": "any",
+            "id": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"showIcon\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBTabItemProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -376,14 +452,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon"
+                "attribute": "id"
             },
-            "showIconTrailing": {
-                "type": "any",
+            "value": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"showIconTrailing\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBTabItemProps[\"value\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabItemProps": {
                             "location": "import",
@@ -402,13 +478,13 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon-trailing"
+                "attribute": "value"
             },
-            "noText": {
+            "showIconLeading": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"noText\"]",
+                    "original": "DBTabItemProps[\"showIconLeading\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
@@ -428,14 +504,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "no-text"
+                "attribute": "show-icon-leading"
             },
-            "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",
@@ -454,13 +530,13 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "icon-leading"
             },
-            "checked": {
+            "showIconTrailing": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"checked\"]",
+                    "original": "DBTabItemProps[\"showIconTrailing\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBTabItemProps": {
@@ -480,14 +556,14 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked"
+                "attribute": "show-icon-trailing"
             },
-            "label": {
+            "iconTrailing": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabItemProps[\"label\"]",
-                    "resolved": "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",
@@ -506,23 +582,25 @@ export class DBTabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "icon-trailing"
             }
         };
     }
     static get states() {
         return {
-            "_selected": {},
-            "_name": {},
             "initialized": {},
-            "_listenerAdded": {},
-            "boundSetSelectedOnChange": {}
+            "internalActive": {},
+            "internalTabIndex": {},
+            "isTruncated": {},
+            "tooltipText": {},
+            "_resizeObserver": {},
+            "_ariaSelectedListener": {}
         };
     }
     static get events() {
         return [{
-                "method": "change",
-                "name": "change",
+                "method": "click",
+                "name": "click",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -539,17 +617,8 @@ export class DBTabItem {
     }
     static get watchers() {
         return [{
-                "propName": "_ref",
-                "methodName": "watch0"
-            }, {
-                "propName": "initialized",
-                "methodName": "watch0"
-            }, {
-                "propName": "boundSetSelectedOnChange",
+                "propName": "active",
                 "methodName": "watch0"
-            }, {
-                "propName": "name",
-                "methodName": "watch1"
             }];
     }
 }