@db-ux/wc-core-components 4.4.2 → 4.5.0

package/dist/collection/components/card/card.js

@@ -21,12 +21,16 @@ export class DBCard {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -46,9 +50,10 @@ export class DBCard {
         this.enableAttributePassing(this._ref, "db-card");
     }
     render() {
-        return (h("div", { key: '823ca29890a1a4f29f4ff4f7bb1829e77314546b', class: cls("db-card", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: 'fc177f67efe5de971fcc6eeeb069473788988c1a', class: cls("db-card", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '532b03614fa83513efc8f97b6a9a7faceff62039' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: 'cffa2e7b3427e279ef5ae1b3d00ff923e5c819c6' })));
     }
     static get is() { return "db-card"; }
     static get properties() {
@@ -79,6 +84,30 @@ export class DBCard {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCardProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCardProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/card/model.ts::DBCardProps",
+                            "referenceLocation": "DBCardProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/checkbox/checkbox.js

@@ -68,6 +68,14 @@ export class DBCheckbox {
             this.focus.emit(event);
         }
     }
+    resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `checkbox-${uuid()}`;
+        this._id = mId;
+        this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
+        this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -79,12 +87,16 @@ export class DBCheckbox {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -101,16 +113,25 @@ export class DBCheckbox {
         }
     }
     watch0Fn() {
+        var _a, _b;
+        if ((_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            this.resetIds();
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
         var _a;
         this._invalidMessage =
             this.invalidMessage ||
                 ((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
                 DEFAULT_INVALID_MESSAGE;
     }
-    watch0() {
-        this.watch0Fn();
+    watch1() {
+        this.watch1Fn();
     }
-    watch1Fn() {
+    watch2Fn() {
         if (this._id) {
             const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;
             this._messageId = messageId;
@@ -122,10 +143,10 @@ export class DBCheckbox {
             this.handleValidation();
         }
     }
-    watch1() {
-        this.watch1Fn();
+    watch2() {
+        this.watch2Fn();
     }
-    watch2Fn() {
+    watch3Fn() {
         if (this._ref) {
             if (this.indeterminate !== undefined) {
                 // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
@@ -134,10 +155,10 @@ export class DBCheckbox {
             }
         }
     }
-    watch2() {
-        this.watch2Fn();
+    watch3() {
+        this.watch3Fn();
     }
-    watch3Fn() {
+    watch4Fn() {
         if (this.initialized && this._ref) {
             // in angular this must be set via native element
             if (this.checked != undefined) {
@@ -146,10 +167,10 @@ export class DBCheckbox {
             this.initialized = false;
         }
     }
-    watch3() {
-        this.watch3Fn();
+    watch4() {
+        this.watch4Fn();
     }
-    watch4Fn() {
+    watch5Fn() {
         if (this._ref) {
             const defaultChecked = undefined;
             let controller = this.abortController;
@@ -165,24 +186,20 @@ export class DBCheckbox {
             }, controller.signal);
         }
     }
-    watch4() {
-        this.watch4Fn();
+    watch5() {
+        this.watch5Fn();
     }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-checkbox");
         this.initialized = true;
-        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `checkbox-${uuid()}`;
-        this._id = mId;
-        this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
-        this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-        this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+        this.resetIds();
         this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
         this.watch3Fn();
         this.watch4Fn();
+        this.watch5Fn();
     }
     disconnectedCallback() {
         var _a;
@@ -190,18 +207,18 @@ export class DBCheckbox {
     }
     render() {
         var _a;
-        return (h("div", { key: 'a7cda04be04a1c763f8a7aa6918a212ffe8e0003', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'a3195afb100309cb33b8471025b868db5bfdc7c5', htmlFor: this._id }, h("input", { key: '937c3f7cd98f519fd8034c644491f55caafb2411', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '433618f3dbf837b2b8febeb5b3acd77b0cebbc24', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '02b767c372314a2dc32b90fec28a0a2d4caa67c1', htmlFor: this._id }, h("input", { key: '1fc78fbb4079f69ed7bde43097ff3125ec67edf9', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'ae673ae94efc3d0abd19f8f067befebea3b3139b', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'e32b0d1e2647e03068b5ee09f3183b25fc82b7e7', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '1bc15384adefeb0a9749ebe60ee8e130e9258321', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '9daadc858ce041949b5470e6914c2c22f5a2918e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-checkbox"; }
     static get properties() {
         return {
-            "id": {
+            "invalidMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"id\"]",
+                    "original": "DBCheckboxProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBCheckboxProps": {
@@ -221,13 +238,13 @@ export class DBCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "invalid-message"
             },
-            "invalidMessage": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"invalidMessage\"]",
+                    "original": "DBCheckboxProps[\"id\"]",
                     "resolved": "string",
                     "references": {
                         "DBCheckboxProps": {
@@ -247,7 +264,31 @@ export class DBCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid-message"
+                "attribute": "id"
+            },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps",
+                            "referenceLocation": "DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             },
             "message": {
                 "type": "string",
@@ -756,22 +797,19 @@ export class DBCheckbox {
     }
     static get watchers() {
         return [{
-                "propName": "_ref",
+                "propName": "id",
                 "methodName": "watch0"
             }, {
-                "propName": "invalidMessage",
+                "propName": "propOverrides?.id",
                 "methodName": "watch0"
             }, {
-                "propName": "_id",
+                "propName": "_ref",
                 "methodName": "watch1"
             }, {
-                "propName": "initialized",
-                "methodName": "watch2"
-            }, {
-                "propName": "_ref",
-                "methodName": "watch2"
+                "propName": "invalidMessage",
+                "methodName": "watch1"
             }, {
-                "propName": "indeterminate",
+                "propName": "_id",
                 "methodName": "watch2"
             }, {
                 "propName": "initialized",
@@ -780,11 +818,20 @@ export class DBCheckbox {
                 "propName": "_ref",
                 "methodName": "watch3"
             }, {
-                "propName": "checked",
+                "propName": "indeterminate",
                 "methodName": "watch3"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch4"
             }, {
                 "propName": "_ref",
                 "methodName": "watch4"
+            }, {
+                "propName": "checked",
+                "methodName": "watch4"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch5"
             }];
     }
 }