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

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

@@ -1,10 +1,13 @@
-import { cls } from "../../utils";
+import { cls, uuid } from "../../utils";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
 export class DBTabList {
+    constructor() {
+        this._id = "tab-list-base-id";
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -43,12 +46,12 @@ export class DBTabList {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-tab-list");
+        this._id = this.id || "tab-list-" + uuid();
     }
     render() {
-        var _a, _b;
-        return (h("div", { key: '8f02145864a04b79d94d5d5923b6eff32346a0c3', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: 'd6e9d47968f44e65f2c0f400a4141917e2035727', class: 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 }, h("ul", { key: '759fdba6e69209ca915148c8b190f9311cb6f1ff', role: "tablist" }, h("slot", { key: '96bf4a10d3b422d6eb6be68c46f926b9f55eb0e6' }))));
+            }, id: this._id, "aria-orientation": this.orientation || "horizontal", "aria-label": this.ariaLabelledby ? undefined : this.ariaLabel, "aria-labelledby": this.ariaLabelledby }, h("slot", { key: 'dafa7344fceee4c2cb0fd3d364509c41e4686e6d' })));
     }
     static get is() { return "db-tab-list"; }
     static get properties() {
@@ -79,12 +82,12 @@ export class DBTabList {
                 "reflect": false,
                 "attribute": "id"
             },
-            "propOverrides": {
-                "type": "unknown",
+            "className": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabListProps[\"propOverrides\"]",
-                    "resolved": "{ id?: string; }",
+                    "original": "DBTabListProps[\"className\"]",
+                    "resolved": "string",
                     "references": {
                         "DBTabListProps": {
                             "location": "import",
@@ -101,13 +104,41 @@ export class DBTabList {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
             },
-            "className": {
+            "orientation": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBTabListProps[\"className\"]",
+                    "original": "DBTabListProps[\"orientation\"]",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "DBTabListProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-list/model.ts::DBTabListProps",
+                            "referenceLocation": "DBTabListProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabListProps[\"ariaLabelledby\"]",
                     "resolved": "string",
                     "references": {
                         "DBTabListProps": {
@@ -127,8 +158,39 @@ export class DBTabList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "aria-labelledby"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabListProps[\"ariaLabel\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabListProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-list/model.ts::DBTabListProps",
+                            "referenceLocation": "DBTabListProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
             }
         };
     }
+    static get states() {
+        return {
+            "_id": {}
+        };
+    }
 }

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

@@ -46,9 +46,9 @@ export class DBTabPanel {
     }
     render() {
         var _a, _b;
-        return (h("section", { key: 'c10873d5857be6ea8653189ab735784939c53474', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (h("div", { key: '231689474d2f2b3acfa8e8aed736b3a76559daf9', class: 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, 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, h("slot", { key: 'eb72a30d12dcd1bce44b0a2b61d2c486ec779d16' })));
     }
     static get is() { return "db-tab-panel"; }
     static get properties() {
@@ -129,6 +129,84 @@ export class DBTabPanel {
                 "getter": false,
                 "setter": false
             },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"hidden\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps",
+                            "referenceLocation": "DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"ariaLabel\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps",
+                            "referenceLocation": "DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"ariaLabelledby\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps",
+                            "referenceLocation": "DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
             "content": {
                 "type": "string",
                 "mutable": false,