@db-ux/wc-core-components 3.1.20 → 4.0.1

package/dist/collection/components/switch/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/switch/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, SizeProps } from '../../shared/model';\nexport type DBSwitchDefaultProps = {\n  /**\n   * Add additional icons to indicate active/inactive state.\n   */\n  visualAid?: boolean | string;\n};\nexport type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & EmphasisProps & SizeProps & IconProps & IconTrailingProps & IconLeadingProps;\nexport type DBSwitchDefaultState = {};\nexport type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/switch/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';\nexport type DBSwitchDefaultProps = {\n  /**\n   * Add additional icons to indicate active/inactive state.\n   */\n  visualAid?: boolean | string;\n\n  /**\n   * Change the variant of the label to `trailing` or `leading`. Defaults to `trailing`\n   */\n  variant?: LabelVariantHorizontalType;\n};\nexport type DBSwitchProps = GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps & IconProps & IconTrailingProps & IconLeadingProps & DBSwitchDefaultProps;\nexport type DBSwitchDefaultState = {};\nexport type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState"]}

package/dist/collection/components/switch/switch.js

@@ -1,4 +1,5 @@
-import { cls, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
+import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -7,11 +8,55 @@ import { h, } from "@stencil/core";
 export class DBSwitch {
     constructor() {
         this._id = undefined;
+        this._messageId = undefined;
+        this._validMessageId = undefined;
+        this._invalidMessageId = undefined;
+        this._invalidMessage = undefined;
+        this._descByIds = undefined;
+        this._voiceOverFallback = "";
+    }
+    hasValidState() {
+        var _a;
+        return !!((_a = this.validMessage) !== null && _a !== void 0 ? _a : this.validation === "valid");
+    }
+    handleValidation() {
+        var _a, _b, _c, _d, _e, _f;
+        if (!((_b = (_a = this._ref) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valid) || this.validation === "invalid") {
+            this._descByIds = this._invalidMessageId;
+            this._invalidMessage =
+                this.invalidMessage ||
+                    ((_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) ||
+                    DEFAULT_INVALID_MESSAGE;
+            if (hasVoiceOver()) {
+                this._voiceOverFallback =
+                    this._invalidMessage || DEFAULT_INVALID_MESSAGE;
+                delay(() => {
+                    this._voiceOverFallback = "";
+                }, 1000);
+            }
+            return;
+        }
+        if (this.hasValidState() && ((_e = (_d = this._ref) === null || _d === void 0 ? void 0 : _d.validity) === null || _e === void 0 ? void 0 : _e.valid) && this.required) {
+            this._descByIds = this._validMessageId;
+            if (hasVoiceOver()) {
+                this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE;
+                delay(() => {
+                    this._voiceOverFallback = "";
+                }, 1000);
+            }
+            return;
+        }
+        if (stringPropVisible(this.message, this.showMessage)) {
+            this._descByIds = this._messageId;
+            return;
+        }
+        this._descByIds = undefined;
     }
     handleChange(event) {
         if (this.change) {
             this.change.emit(event);
         }
+        this.handleValidation();
     }
     handleBlur(event) {
         if (this.blur) {
@@ -55,16 +100,27 @@ export class DBSwitch {
             }
         }
     }
+    watch0Fn() {
+        this.handleValidation();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
     componentDidLoad() {
         var _a;
         this.enableAttributePassing(this._ref, "db-switch");
         this._id = (_a = this.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`;
+        this._messageId = `${this._id}${DEFAULT_MESSAGE_ID_SUFFIX}`;
+        this._validMessageId = `${this._id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
+        this._invalidMessageId = `${this._id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
+        this.handleValidation();
+        this.watch0Fn();
     }
     render() {
-        var _a;
-        return (h("label", { key: '770e7b3683b28143c1803c008fc36e3e1875e506', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-emphasis": this.emphasis, htmlFor: this._id, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk) }, h("input", { key: '331cadeda5edf53bd3040f6532c31ebef6fd2017', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        var _a, _b, _c, _d;
+        return (h("div", { key: 'eaca89f608b76584b1fa9671103faf6b4dcd3c92', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: '0a9aba40a632407f91c9b41e281a9f19c20f0473', htmlFor: this._id }, h("input", { key: '6b9351bea73008d4bd176371e356be5fe69f16f1', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, name: this.name, required: 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) }), this.label ? this.label : h("slot", null)));
+            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: 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) }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'ab8814fd7d0dad8e03dea66eecfe9da4a245985f', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE), h("span", { key: 'cb5cec6bdca51ce0eab42558871d5bfd7c717a0a', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-switch"; }
     static get properties() {
@@ -94,12 +150,12 @@ export class DBSwitch {
                 "reflect": false,
                 "attribute": "id"
             },
-            "visualAid": {
-                "type": "any",
+            "validation": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"visualAid\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBSwitchProps[\"validation\"]",
+                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -117,14 +173,14 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "visual-aid"
+                "attribute": "validation"
             },
-            "size": {
-                "type": "string",
+            "required": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"size\"]",
-                    "resolved": "\"medium\" | \"small\"",
+                    "original": "DBSwitchProps[\"required\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -142,14 +198,14 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size"
+                "attribute": "required"
             },
-            "showLabel": {
-                "type": "any",
+            "message": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"showLabel\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBSwitchProps[\"message\"]",
+                    "resolved": "string",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -167,14 +223,14 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-label"
+                "attribute": "message"
             },
-            "emphasis": {
-                "type": "string",
+            "showMessage": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"emphasis\"]",
-                    "resolved": "\"strong\" | \"weak\"",
+                    "original": "DBSwitchProps[\"showMessage\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -192,14 +248,14 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "emphasis"
+                "attribute": "show-message"
             },
-            "showRequiredAsterisk": {
-                "type": "any",
+            "validMessage": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"showRequiredAsterisk\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBSwitchProps[\"validMessage\"]",
+                    "resolved": "string",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -217,13 +273,13 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-required-asterisk"
+                "attribute": "valid-message"
             },
-            "className": {
+            "invalidMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"className\"]",
+                    "original": "DBSwitchProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBSwitchProps": {
@@ -242,7 +298,7 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "invalid-message"
             },
             "checked": {
                 "type": "any",
@@ -269,12 +325,12 @@ export class DBSwitch {
                 "reflect": false,
                 "attribute": "checked"
             },
-            "value": {
+            "visualAid": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"value\"]",
-                    "resolved": "any",
+                    "original": "DBSwitchProps[\"visualAid\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -292,13 +348,38 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "visual-aid"
             },
-            "disabled": {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"size\"]",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "showLabel": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"disabled\"]",
+                    "original": "DBSwitchProps[\"showLabel\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBSwitchProps": {
@@ -317,14 +398,37 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "show-label"
             },
-            "validation": {
-                "type": "string",
+            "variant": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"validation\"]",
-                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
+                    "original": "DBSwitchProps[\"variant\"]",
+                    "resolved": "never",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showRequiredAsterisk": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"showRequiredAsterisk\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -342,13 +446,13 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "validation"
+                "attribute": "show-required-asterisk"
             },
-            "name": {
+            "className": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"name\"]",
+                    "original": "DBSwitchProps[\"className\"]",
                     "resolved": "string",
                     "references": {
                         "DBSwitchProps": {
@@ -367,13 +471,38 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "classname"
             },
-            "required": {
+            "value": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"required\"]",
+                    "original": "DBSwitchProps[\"value\"]",
+                    "resolved": "any",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"disabled\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBSwitchProps": {
@@ -392,7 +521,32 @@ export class DBSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required"
+                "attribute": "disabled"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"name\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "iconLeading": {
                 "type": "string",
@@ -493,12 +647,43 @@ export class DBSwitch {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "messageIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"messageIcon\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message-icon"
             }
         };
     }
     static get states() {
         return {
-            "_id": {}
+            "_id": {},
+            "_messageId": {},
+            "_validMessageId": {},
+            "_invalidMessageId": {},
+            "_invalidMessage": {},
+            "_descByIds": {},
+            "_voiceOverFallback": {}
         };
     }
     static get events() {
@@ -549,5 +734,29 @@ export class DBSwitch {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "validation",
+                "methodName": "watch0"
+            }, {
+                "propName": "required",
+                "methodName": "watch0"
+            }, {
+                "propName": "message",
+                "methodName": "watch0"
+            }, {
+                "propName": "showMessage",
+                "methodName": "watch0"
+            }, {
+                "propName": "validMessage",
+                "methodName": "watch0"
+            }, {
+                "propName": "invalidMessage",
+                "methodName": "watch0"
+            }, {
+                "propName": "checked",
+                "methodName": "watch0"
+            }];
+    }
 }
 //# sourceMappingURL=switch.js.map

package/dist/collection/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n  cls,\n  getBoolean,\n  getBooleanAsString,\n  getHideProp,\n  uuid,\n} from \"../../utils\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBSwitchProps, DBSwitchState } from \"./model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-switch\",\n})\nexport class DBSwitch {\n  private _ref!: HTMLInputElement | any;\n  @Prop() id: DBSwitchProps[\"id\"];\n  @Event() change: EventEmitter<\n    Parameters<Required<DBSwitchProps>[\"onChange\"]>[number]\n  > | void;\n  @Event() blur: EventEmitter<\n    Parameters<Required<DBSwitchProps>[\"onBlur\"]>[number]\n  > | void;\n  @Event() focus: EventEmitter<\n    Parameters<Required<DBSwitchProps>[\"onFocus\"]>[number]\n  > | void;\n  @Prop() visualAid: DBSwitchProps[\"visualAid\"];\n  @Prop() size: DBSwitchProps[\"size\"];\n  @Prop() showLabel: DBSwitchProps[\"showLabel\"];\n  @Prop() emphasis: DBSwitchProps[\"emphasis\"];\n  @Prop() showRequiredAsterisk: DBSwitchProps[\"showRequiredAsterisk\"];\n  @Prop({attribute: \"classname\"}) className: DBSwitchProps[\"className\"];\n  @Prop() checked: DBSwitchProps[\"checked\"];\n  @Prop() value: DBSwitchProps[\"value\"];\n  @Prop() disabled: DBSwitchProps[\"disabled\"];\n  @Prop() validation: DBSwitchProps[\"validation\"];\n  @Prop() name: DBSwitchProps[\"name\"];\n  @Prop() required: DBSwitchProps[\"required\"];\n  @Prop() iconLeading: DBSwitchProps[\"iconLeading\"];\n  @Prop() icon: DBSwitchProps[\"icon\"];\n  @Prop() iconTrailing: DBSwitchProps[\"iconTrailing\"];\n  @Prop() label: DBSwitchProps[\"label\"];\n  @State() _id = undefined;\n\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (this.change) {\n      this.change.emit(event);\n    }\n  }\n  handleBlur(event: InteractionEvent<HTMLInputElement>) {\n    if (this.blur) {\n      this.blur.emit(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement>) {\n    if (this.focus) {\n      this.focus.emit(event);\n    }\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLInputElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-switch\");\n    this._id = this.id ?? `switch-${uuid()}`;\n  }\n\n  render() {\n    return (\n      <label\n        class={cls(\"db-switch\", this.className)}\n        data-visual-aid={getBooleanAsString(this.visualAid)}\n        data-size={this.size}\n        data-hide-label={getHideProp(this.showLabel)}\n        data-emphasis={this.emphasis}\n        htmlFor={this._id}\n        data-hide-asterisk={getHideProp(this.showRequiredAsterisk)}\n      >\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          id={this._id}\n          ref={(el: any) => {\n            this._ref = el;\n          }}\n          checked={getBoolean(this.checked, \"checked\")}\n          value={this.value}\n          disabled={getBoolean(this.disabled, \"disabled\")}\n          aria-invalid={this.validation === \"invalid\"}\n          data-custom-validity={this.validation}\n          name={this.name}\n          required={getBoolean(this.required, \"required\")}\n          data-aid-icon={this.iconLeading ?? this.icon}\n          data-aid-icon-trailing={this.iconTrailing}\n          onChange={(event) => this.handleChange(event)}\n          onBlur={(event) => this.handleBlur(event)}\n          onFocus={(event) => this.handleFocus(event)}\n        />\n        {this.label ? this.label : <slot></slot>}\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  DEFAULT_INVALID_MESSAGE,\n  DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n  DEFAULT_MESSAGE_ID_SUFFIX,\n  DEFAULT_VALID_MESSAGE,\n  DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n  cls,\n  delay,\n  getBoolean,\n  getBooleanAsString,\n  getHideProp,\n  hasVoiceOver,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport { DBSwitchProps, DBSwitchState } from \"./model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-switch\",\n})\nexport class DBSwitch {\n  private _ref!: HTMLInputElement | any;\n  @Prop() id: DBSwitchProps[\"id\"];\n  @Prop() validation: DBSwitchProps[\"validation\"];\n  @Prop() required: DBSwitchProps[\"required\"];\n  @Prop() message: DBSwitchProps[\"message\"];\n  @Prop() showMessage: DBSwitchProps[\"showMessage\"];\n  @Prop() validMessage: DBSwitchProps[\"validMessage\"];\n  @Prop() invalidMessage: DBSwitchProps[\"invalidMessage\"];\n  @Prop() checked: DBSwitchProps[\"checked\"];\n  @Event() change: EventEmitter<\n    Parameters<Required<DBSwitchProps>[\"onChange\"]>[number]\n  > | void;\n  @Event() blur: EventEmitter<\n    Parameters<Required<DBSwitchProps>[\"onBlur\"]>[number]\n  > | void;\n  @Event() focus: EventEmitter<\n    Parameters<Required<DBSwitchProps>[\"onFocus\"]>[number]\n  > | void;\n  @Prop() visualAid: DBSwitchProps[\"visualAid\"];\n  @Prop() size: DBSwitchProps[\"size\"];\n  @Prop() showLabel: DBSwitchProps[\"showLabel\"];\n  @Prop() variant: DBSwitchProps[\"variant\"];\n  @Prop() showRequiredAsterisk: DBSwitchProps[\"showRequiredAsterisk\"];\n  @Prop({attribute: \"classname\"}) className: DBSwitchProps[\"className\"];\n  @Prop() value: DBSwitchProps[\"value\"];\n  @Prop() disabled: DBSwitchProps[\"disabled\"];\n  @Prop() name: DBSwitchProps[\"name\"];\n  @Prop() iconLeading: DBSwitchProps[\"iconLeading\"];\n  @Prop() icon: DBSwitchProps[\"icon\"];\n  @Prop() iconTrailing: DBSwitchProps[\"iconTrailing\"];\n  @Prop() label: DBSwitchProps[\"label\"];\n  @Prop() messageIcon: DBSwitchProps[\"messageIcon\"];\n  @State() _id = undefined;\n  @State() _messageId = undefined;\n  @State() _validMessageId = undefined;\n  @State() _invalidMessageId = undefined;\n  @State() _invalidMessage = undefined;\n  @State() _descByIds = undefined;\n  @State() _voiceOverFallback = \"\";\n\n  hasValidState() {\n    return !!(this.validMessage ?? this.validation === \"valid\");\n  }\n  handleValidation() {\n    if (!this._ref?.validity?.valid || this.validation === \"invalid\") {\n      this._descByIds = this._invalidMessageId!;\n      this._invalidMessage =\n        this.invalidMessage ||\n        this._ref?.validationMessage ||\n        DEFAULT_INVALID_MESSAGE;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback =\n          this._invalidMessage || DEFAULT_INVALID_MESSAGE;\n        delay(() => {\n          this._voiceOverFallback = \"\";\n        }, 1000);\n      }\n      return;\n    }\n    if (this.hasValidState() && this._ref?.validity?.valid && this.required) {\n      this._descByIds = this._validMessageId!;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n        delay(() => {\n          this._voiceOverFallback = \"\";\n        }, 1000);\n      }\n      return;\n    }\n    if (stringPropVisible(this.message, this.showMessage)) {\n      this._descByIds = this._messageId!;\n      return;\n    }\n    this._descByIds = undefined;\n  }\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (this.change) {\n      this.change.emit(event);\n    }\n    this.handleValidation();\n  }\n  handleBlur(event: InteractionEvent<HTMLInputElement>) {\n    if (this.blur) {\n      this.blur.emit(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement>) {\n    if (this.focus) {\n      this.focus.emit(event);\n    }\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLInputElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  watch0Fn() {\n    this.handleValidation();\n  }\n\n  @Watch(\"validation\")\n  @Watch(\"required\")\n  @Watch(\"message\")\n  @Watch(\"showMessage\")\n  @Watch(\"validMessage\")\n  @Watch(\"invalidMessage\")\n  @Watch(\"checked\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-switch\");\n    this._id = this.id ?? `switch-${uuid()}`;\n    this._messageId = `${this._id}${DEFAULT_MESSAGE_ID_SUFFIX}`;\n    this._validMessageId = `${this._id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;\n    this._invalidMessageId = `${this._id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;\n    this.handleValidation();\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-switch\", this.className)}\n        data-visual-aid={getBooleanAsString(this.visualAid)}\n        data-size={this.size}\n        data-hide-label={getHideProp(this.showLabel)}\n        data-variant={this.variant}\n        data-hide-asterisk={getHideProp(this.showRequiredAsterisk)}\n        data-custom-validity={this.validation}\n      >\n        <label htmlFor={this._id}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            id={this._id}\n            ref={(el: any) => {\n              this._ref = el;\n            }}\n            checked={getBoolean(this.checked, \"checked\")}\n            value={this.value}\n            disabled={getBoolean(this.disabled, \"disabled\")}\n            aria-invalid={this.validation === \"invalid\" ? \"true\" : undefined}\n            aria-describedby={this._descByIds}\n            name={this.name}\n            required={getBoolean(this.required, \"required\")}\n            data-aid-icon={this.iconLeading ?? this.icon}\n            data-aid-icon-trailing={this.iconTrailing}\n            onChange={(event) => this.handleChange(event)}\n            onBlur={(event) => this.handleBlur(event)}\n            onFocus={(event) => this.handleFocus(event)}\n          />\n          {this.label ? this.label : <slot></slot>}\n        </label>\n        {stringPropVisible(this.message, this.showMessage) ? (\n          <db-infotext\n            size=\"small\"\n            semantic=\"adaptive\"\n            id={this._messageId}\n            icon={this.messageIcon}\n          >\n            {this.message}\n          </db-infotext>\n        ) : null}\n        {this.hasValidState() ? (\n          <db-infotext\n            size=\"small\"\n            semantic=\"successful\"\n            id={this._validMessageId}\n          >\n            {this.validMessage ?? DEFAULT_VALID_MESSAGE}\n          </db-infotext>\n        ) : null}\n        <db-infotext\n          size=\"small\"\n          semantic=\"critical\"\n          id={this._invalidMessageId}\n        >\n          {this._invalidMessage ??\n            this.invalidMessage ??\n            DEFAULT_INVALID_MESSAGE}\n        </db-infotext>\n        <span data-visually-hidden=\"true\" role=\"status\">\n          {this._voiceOverFallback}\n        </span>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -90,9 +90,9 @@ export class DBTabItem {
     }
     render() {
         var _a, _b;
-        return (h("li", { key: '783a7b85f5d5c48bc86890a70e0f7ba497c78357', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '1691dfe198cbbfc943ee15e8a98a5bfa8d2c38c9', htmlFor: this.id, "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: 'c84dbf7eecd6fca414d44f99789f31e7343be32a', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
+        return (h("li", { key: '6c20231d7dd76e231ec39495bc66b18c642cf673', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'e8262a16f9ff8babec59f85f4ce9f8a19dece89d', htmlFor: this.id, "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '67bdd4a5c520eb8a0325e67c680237968af13aa5', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: this.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: 'c18d88865dc6cb537ce846d7eb290cfc6408be88' }))));
+            }, name: this._name, id: this.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '5579426f7548f32cd9f8fc27c9a18d311f5ab4fe' }))));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {

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

@@ -46,9 +46,9 @@ export class DBTabList {
         this._id = this.id || "tab-list-" + uuid();
     }
     render() {
-        return (h("div", { key: 'd65855c3e219394e145bb6472be44efd8ad2f5c6', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: '4ef0a69cacaafb2205ebfea7826c3c1f64a84411', class: cls("db-tab-list", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id }, h("ul", { key: 'df0a48deba8650387cf824fd339094ab5a8afd32', role: "tablist" }, h("slot", { key: '56597cc2c3b344fdf4c9be7784a6b57b6f3b1f7e' }))));
+            }, id: this._id }, h("ul", { key: 'cfdccc43bd366eb9c71137918a8ca92fd6a81b69', role: "tablist" }, h("slot", { key: 'c09711c4b398a3d6b26d62c87aaf0f050af32bdb' }))));
     }
     static get is() { return "db-tab-list"; }
     static get properties() {

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

@@ -41,9 +41,9 @@ export class DBTabPanel {
         this.enableAttributePassing(this._ref, "db-tab-panel");
     }
     render() {
-        return (h("section", { key: 'e2118080ba0bc2b7cecd50029131ca3faeb77a36', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (h("section", { key: '312ef04379d3b4a094999f02ac919e3b0ac31877', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.content ? this.content : null, h("slot", { key: '2b4cb8605b0dcd313f5dfb2aeac063074b0249ae' })));
+            }, id: this.id }, this.content ? this.content : null, h("slot", { key: '7848155bb7734db6835c0fe7fcf85eb37635110d' })));
     }
     static get is() { return "db-tab-panel"; }
     static get properties() {

package/dist/collection/components/tabs/tabs.js

@@ -204,10 +204,10 @@ export class DBTabs {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '3cba7c0fba47a0cd323e5c772fc010c552a92740', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: 'a53c2737f8238bbe266baa7d6e3f90649c52512a', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_c = this.convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_d = this.convertTabs()) === null || _d === void 0 ? void 0 :
-            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '34e23ae2f8dd9a30065895f99929a95c41ace4f8' })));
+            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: 'e8cf7f0c576b73cdd459ab4cf1f07f14c5ed1657' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {

package/dist/collection/components/textarea/textarea.js

@@ -150,10 +150,10 @@ export class DBTextarea {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '987c1133ee1ad412b77c27c5fc77735548bb4470', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'e487aa66097f32caaf8cb5dd4c63ca1a9d67f37d', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '69434958df4127fe56b66df8bf57ee8b2d3e78ce', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: 'a649040d1fa37d907b3608a2c37beb7cbc740d4b', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '784fdef1d47e8193c8b89a94047d1aaa581027ad', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: 'a4f4eb71a5871c5a72b250c779b2c7c4988c51a3', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-resize": this.resize, "data-hide-resizer": getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), readOnly: getBoolean(this.readOnly, "readOnly") ||
-                getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds, placeholder: (_e = this.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), 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: 'e1ae4a692e1e3a115354185b0b712bfcb5c2238e', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '1190dd7dbb597fb65cd0d83cc4770c5d5f11af27', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds, placeholder: (_e = this.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), 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: '1c499fb00436791637cd7efaf908cf5cef66c19c', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '6c4b23b49afa46786f3f3b088c1a8939e0a455db', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-textarea"; }
     static get properties() {