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

package/dist/cjs/db-stack.cjs.entry.js

@@ -48,9 +48,9 @@ const DBStack = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: 'e8a95918ab5412c03412b92adb3f2a2d5979d492', class: index$1.cls("db-stack", this.className), ref: (el) => {
+        return (index.h("div", { key: '7b1914f7484d0116dbdcca6c2b8fd62ee5f5361d', class: index$1.cls("db-stack", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap) }, index.h("slot", { key: 'b95b19d6ff1a61f416eadfb14d9e19647e4f6cb4' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap) }, index.h("slot", { key: '8b24b8791579cab2d6e5597f983ee488e860172d' })));
     }
 };
 

package/dist/cjs/db-switch.cjs.entry.js

@@ -188,9 +188,9 @@ const DBSwitch = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '66c2badcfc403e68d44d93cd1a79d087b212bbd6', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: 'c22fc86dd012f6de327f861cca3c1b4ab4f3605d', htmlFor: this._id }, index.h("input", { key: '3d1532eee9a137f2a1db1ba1574856ecc61833d8', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (index.h("div", { key: 'ef12ecb991d547a453f5a35d6a9502e2b811ea2b', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: 'a037c403a8204c7093c5a29517235dbee5684c67', htmlFor: this._id }, index.h("input", { key: '513e08da8efc09d2b8c4b8bc12d6b46019988e63', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'd24f80874212a9a9669d5731d9e5b6f4f3be6001', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'cb3420bd986f1398094fbac151d27a5c2f392d7d', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '88bbba78f87645a478e74ddf003303406e333c8f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'd3564c75c3c4a8aefd24b91665345425af9c9071', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "id": [{

package/dist/cjs/db-tab-item_3.cjs.entry.js

@@ -6,31 +6,50 @@ var index$1 = require('./index-2_9ESkQu.js');
 const DBTabItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "change");
-        this._selected = false;
-        this._name = undefined;
+        this.click = index.createEvent(this, "click");
         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 = index$1.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 (!index$1.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 ||
+                    ""
+                : "";
         }
     }
     /**
@@ -70,66 +89,112 @@ const DBTabItem = class {
         }
     }
     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 = index$1.getBooleanAsString(true);
-                this._ref.click();
-            }
+        if (this.active !== undefined) {
+            this.internalActive = index$1.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 = index$1.getBoolean(this.active) || false;
+        this.internalTabIndex = index$1.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 = index$1.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 (index.h("li", { key: '0b8687c942d18b49bdf25249be3f0ae1ca727256', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.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": index$1.getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-no-text": index$1.getBooleanAsString(this.noText) }, index.h("input", { key: '81cf38a1a39e88fc85282e8b82d43768ce6f70a4', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
+        var _a, _b, _c, _d;
+        return (index.h("button", { key: '87666630bffa6918a10d8b2f3539263d4dbcbc32', class: index$1.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, index.h("slot", { key: '89a4ba46af36e8dcc3bc53f87d17977c5827cd12' }))));
+            }, "aria-label": index$1.getBoolean(this.noText) ? this.label : undefined, "aria-selected": (this.active !== undefined
+                ? index$1.getBoolean(this.active)
+                : this.internalActive)
+                ? "true"
+                : "false", "aria-controls": this.ariaControls, disabled: index$1.getBoolean(this.disabled) ? true : undefined, tabIndex: this.getCurrentTabIndex(), id: this.id, "data-active": this.active !== undefined
+                ? index$1.getBoolean(this.active)
+                : this.internalActive, "data-no-text": index$1.getBoolean(this.noText) ? "true" : undefined, "data-value": this.value, onClick: (event) => this.handleClick(event) }, !this.noText ? (index.h("span", { class: "db-tab-label", title: "", ref: (el) => {
+                this._labelRef = el;
+            }, "data-icon": index$1.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": index$1.getBoolean(this.showIconTrailing) ? this.iconTrailing : undefined }, this.label ? this.label : null, !this.label ? index.h("slot", null) : null)) : null, index$1.getBoolean(this.noText) ? (index.h("span", { class: "db-tab-label", "aria-hidden": "true", "data-icon": index$1.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 ? (index.h("db-tooltip", { placement: "right" }, this.tooltipText)) : null));
     }
     static get watchers() { return {
-        "_ref": [{
-                "watch0": 0
-            }],
-        "initialized": [{
+        "active": [{
                 "watch0": 0
-            }],
-        "boundSetSelectedOnChange": [{
-                "watch0": 0
-            }],
-        "name": [{
-                "watch1": 0
             }]
     }; }
 };
@@ -137,6 +202,7 @@ const DBTabItem = class {
 const DBTabList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this._id = "tab-list-base-id";
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -176,12 +242,12 @@ const DBTabList = class {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-tab-list");
+        this._id = this.id || "tab-list-" + index$1.uuid();
     }
     render() {
-        var _a, _b;
-        return (index.h("div", { key: '8f02145864a04b79d94d5d5923b6eff32346a0c3', class: index$1.cls("db-tab-list", this.className), ref: (el) => {
+        return (index.h("div", { key: 'd6e9d47968f44e65f2c0f400a4141917e2035727', class: index$1.cls("db-tab-list", this.className), role: "tablist", ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: '759fdba6e69209ca915148c8b190f9311cb6f1ff', role: "tablist" }, index.h("slot", { key: '96bf4a10d3b422d6eb6be68c46f926b9f55eb0e6' }))));
+            }, id: this._id, "aria-orientation": this.orientation || "horizontal", "aria-label": this.ariaLabelledby ? undefined : this.ariaLabel, "aria-labelledby": this.ariaLabelledby }, index.h("slot", { key: 'dafa7344fceee4c2cb0fd3d364509c41e4686e6d' })));
     }
 };
 
@@ -230,9 +296,9 @@ const DBTabPanel = class {
     }
     render() {
         var _a, _b;
-        return (index.h("section", { key: 'c10873d5857be6ea8653189ab735784939c53474', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (index.h("div", { key: '231689474d2f2b3acfa8e8aed736b3a76559daf9', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.content ? this.content : null, index.h("slot", { key: '57a98a1b7e26ca61b16397b7615f71d883bfbd28' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, tabIndex: this.hidden ? -1 : 0, hidden: this.hidden, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabel ? undefined : this.ariaLabelledby }, this.content ? this.content : null, index.h("slot", { key: 'eb72a30d12dcd1bce44b0a2b61d2c486ec779d16' })));
     }
 };