@db-ux/wc-core-components 2.0.0-0-custom-select-16b8cce → 2.0.0

package/dist/collection/components/custom-select-list-item/custom-select-list-item.js

@@ -1,4 +1,4 @@
-import { cls, getBooleanAsString, getHideProp, uuid } from "../../utils";
+import { cls, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -10,18 +10,16 @@ export class DBCustomSelectListItem {
         this.hasDivider = false;
     }
     handleChange(event) {
-        if (this.onChange) {
-            this.onChange.emit(event);
-        }
+        event.stopPropagation();
         if (this.change) {
-            this.change(event);
+            this.change.emit(event);
         }
     }
     getIconAfter() {
         if (this.isGroupTitle || this.type === "checkbox") {
             return;
         }
-        return this.checked ? "check" : "x_placeholder";
+        return getBoolean(this.checked, "checked") ? "check" : "x_placeholder";
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -68,18 +66,19 @@ export class DBCustomSelectListItem {
         this.watch0Fn();
     }
     render() {
-        return (h("li", { key: 'c20bf3ffc59b3755eed50837ac35cecf0baf425b', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: 'e3e90fd8d73cedc493624a10270bc7fe5fe880ba', class: cls("db-custom-select-list-item", this.className, {
                 "db-checkbox": this.type === "checkbox" && !this.isGroupTitle,
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-divider": getBooleanAsString(this.hasDivider) }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-hide-icon": getHideProp(this.showIcon), "data-icon-after": this.getIconAfter() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, !this.label ? h("slot", null) : null)) : (h("span", null, this.groupTitle))));
+            }, id: this._id, "data-divider": getBooleanAsString(this.hasDivider) }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-hide-icon": getHideProp(this.showIcon), "data-icon-after": this.getIconAfter() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : h("slot", null))) : (h("span", null, this.groupTitle))));
     }
     static get is() { return "db-custom-select-list-item"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"id\"]",
@@ -100,11 +99,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "isGroupTitle": {
                 "type": "boolean",
+                "attribute": "is-group-title",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"isGroupTitle\"]",
@@ -125,11 +124,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-group-title",
                 "reflect": false
             },
             "showDivider": {
                 "type": "boolean",
+                "attribute": "show-divider",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"showDivider\"]",
@@ -150,34 +149,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-divider",
                 "reflect": false
             },
-            "change": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBCustomSelectListItemProps[\"change\"]",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "DBCustomSelectListItemProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"type\"]",
@@ -198,15 +174,15 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false
             },
             "checked": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"checked\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -223,11 +199,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"className\"]",
@@ -248,11 +224,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "groupTitle": {
                 "type": "string",
+                "attribute": "group-title",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"groupTitle\"]",
@@ -273,11 +249,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-title",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"icon\"]",
@@ -298,15 +274,15 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -323,11 +299,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"name\"]",
@@ -348,15 +324,15 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -373,11 +349,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"value\"]",
@@ -398,11 +374,11 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectListItemProps[\"label\"]",
@@ -423,7 +399,6 @@ export class DBCustomSelectListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             }
         };
@@ -436,8 +411,8 @@ export class DBCustomSelectListItem {
     }
     static get events() {
         return [{
-                "method": "onChange",
-                "name": "onChange",
+                "method": "change",
+                "name": "change",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/custom-select-list-item/custom-select-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-select-list-item.js","sourceRoot":"","sources":["../../../src/components/custom-select-list-item/custom-select-list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  DBCustomSelectListItemProps,\n  DBCustomSelectListItemState,\n} from \"./model\";\nimport { cls, getBooleanAsString, getHideProp, uuid } from \"../../utils\";\nimport { ChangeEvent } from \"../../shared/model\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\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-custom-select-list-item\",\n})\nexport class DBCustomSelectListItem {\n  private _ref!: HTMLLIElement | null;\n  @Prop() id: DBCustomSelectListItemProps[\"id\"];\n  @Prop() isGroupTitle: DBCustomSelectListItemProps[\"isGroupTitle\"];\n  @Prop() showDivider: DBCustomSelectListItemProps[\"showDivider\"];\n  @Event() onChange: any;\n  @Prop() change: DBCustomSelectListItemProps[\"change\"];\n  @Prop() type: DBCustomSelectListItemProps[\"type\"];\n  @Prop() checked: DBCustomSelectListItemProps[\"checked\"];\n  @Prop({attribute: \"classname\"}) className: DBCustomSelectListItemProps[\"className\"];\n  @Prop() groupTitle: DBCustomSelectListItemProps[\"groupTitle\"];\n  @Prop() icon: DBCustomSelectListItemProps[\"icon\"];\n  @Prop() showIcon: DBCustomSelectListItemProps[\"showIcon\"];\n  @Prop() name: DBCustomSelectListItemProps[\"name\"];\n  @Prop() disabled: DBCustomSelectListItemProps[\"disabled\"];\n  @Prop() value: DBCustomSelectListItemProps[\"value\"];\n  @Prop() label: DBCustomSelectListItemProps[\"label\"];\n\n  @State() _id = undefined;\n  @State() hasDivider = false;\n\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (this.onChange) {\n      this.onChange.emit(event);\n    }\n    if (this.change) {\n      this.change(event);\n    }\n  }\n  getIconAfter() {\n    if (this.isGroupTitle || this.type === \"checkbox\") {\n      return;\n    }\n    return this.checked ? \"check\" : \"x_placeholder\";\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: HTMLElement | 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.hasDivider = Boolean(this.isGroupTitle || this.showDivider);\n  }\n\n  @Watch(\"isGroupTitle\")\n  @Watch(\"showDivider\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-custom-select-list-item\");\n    this._id = this.id ?? `custom-select-list-item-${uuid()}`;\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <li\n        class={cls(\"db-custom-select-list-item\", this.className, {\n          \"db-checkbox\": this.type === \"checkbox\" && !this.isGroupTitle,\n          \"db-radio\": this.type !== \"checkbox\" && !this.isGroupTitle,\n        })}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-divider={getBooleanAsString(this.hasDivider)}\n      >\n        {!this.isGroupTitle ? (\n          <label\n            data-icon={\n              this.type !== \"checkbox\" && this.icon ? this.icon : undefined\n            }\n            data-hide-icon={getHideProp(this.showIcon)}\n            data-icon-after={this.getIconAfter()}\n          >\n            <input\n              class=\"db-custom-select-list-item-checkbox\"\n              data-disable-focus=\"true\"\n              type={this.type}\n              name={this.name}\n              checked={this.checked}\n              disabled={this.disabled}\n              value={this.value}\n              onChange={(event) => this.handleChange(event)}\n            />\n            {this.label ? this.label : null}\n            {!this.label ? <slot></slot> : null}\n          </label>\n        ) : (\n          <span>{this.groupTitle}</span>\n        )}\n      </li>\n    );\n  }\n}\n"]}
+{"version":3,"file":"custom-select-list-item.js","sourceRoot":"","sources":["../../../src/components/custom-select-list-item/custom-select-list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  DBCustomSelectListItemProps,\n  DBCustomSelectListItemState,\n} from \"./model\";\nimport {\n  cls,\n  getBoolean,\n  getBooleanAsString,\n  getHideProp,\n  uuid,\n} from \"../../utils\";\nimport { ChangeEvent } from \"../../shared/model\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\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-custom-select-list-item\",\n})\nexport class DBCustomSelectListItem {\n  private _ref!: HTMLLIElement | any;\n  @Prop() id: DBCustomSelectListItemProps[\"id\"];\n  @Prop() isGroupTitle: DBCustomSelectListItemProps[\"isGroupTitle\"];\n  @Prop() showDivider: DBCustomSelectListItemProps[\"showDivider\"];\n  @Event() change: EventEmitter<\n    Parameters<Required<DBCustomSelectListItemProps>[\"onChange\"]>[number]\n  > | void;\n  @Prop() type: DBCustomSelectListItemProps[\"type\"];\n  @Prop() checked: DBCustomSelectListItemProps[\"checked\"];\n  @Prop({attribute: \"classname\"}) className: DBCustomSelectListItemProps[\"className\"];\n  @Prop() groupTitle: DBCustomSelectListItemProps[\"groupTitle\"];\n  @Prop() icon: DBCustomSelectListItemProps[\"icon\"];\n  @Prop() showIcon: DBCustomSelectListItemProps[\"showIcon\"];\n  @Prop() name: DBCustomSelectListItemProps[\"name\"];\n  @Prop() disabled: DBCustomSelectListItemProps[\"disabled\"];\n  @Prop() value: DBCustomSelectListItemProps[\"value\"];\n  @Prop() label: DBCustomSelectListItemProps[\"label\"];\n  @State() _id = undefined;\n  @State() hasDivider = false;\n\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    event.stopPropagation();\n    if (this.change) {\n      this.change.emit(event);\n    }\n  }\n  getIconAfter() {\n    if (this.isGroupTitle || this.type === \"checkbox\") {\n      return;\n    }\n    return getBoolean(this.checked, \"checked\") ? \"check\" : \"x_placeholder\";\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: HTMLElement | 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.hasDivider = Boolean(this.isGroupTitle || this.showDivider);\n  }\n\n  @Watch(\"isGroupTitle\")\n  @Watch(\"showDivider\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-custom-select-list-item\");\n    this._id = this.id ?? `custom-select-list-item-${uuid()}`;\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <li\n        class={cls(\"db-custom-select-list-item\", this.className, {\n          \"db-checkbox\": this.type === \"checkbox\" && !this.isGroupTitle,\n          \"db-radio\": this.type !== \"checkbox\" && !this.isGroupTitle,\n        })}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-divider={getBooleanAsString(this.hasDivider)}\n      >\n        {!this.isGroupTitle ? (\n          <label\n            data-icon={\n              this.type !== \"checkbox\" && this.icon ? this.icon : undefined\n            }\n            data-hide-icon={getHideProp(this.showIcon)}\n            data-icon-after={this.getIconAfter()}\n          >\n            <input\n              class=\"db-custom-select-list-item-checkbox\"\n              data-disable-focus=\"true\"\n              type={this.type}\n              name={this.name}\n              form={this.name}\n              checked={getBoolean(this.checked, \"checked\")}\n              disabled={getBoolean(this.disabled, \"disabled\")}\n              value={this.value}\n              onChange={(event) => this.handleChange(event)}\n            />\n            {this.label ? this.label : <slot></slot>}\n          </label>\n        ) : (\n          <span>{this.groupTitle}</span>\n        )}\n      </li>\n    );\n  }\n}\n"]}

package/dist/collection/components/divider/divider.js

@@ -41,7 +41,7 @@ export class DBDivider {
         this.enableAttributePassing(this._ref, "db-divider");
     }
     render() {
-        return (h("div", { key: '30fd3018e2c2ba0e57728fbcd0bfea70203279ef', class: cls("db-divider", this.className), ref: (el) => {
+        return (h("div", { key: 'e3355b0ae601f71157a429a346fef6df9438231c', class: cls("db-divider", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }
@@ -50,6 +50,7 @@ export class DBDivider {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDividerProps[\"id\"]",
@@ -70,11 +71,11 @@ export class DBDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDividerProps[\"margin\"]",
@@ -95,11 +96,11 @@ export class DBDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDividerProps[\"variant\"]",
@@ -120,11 +121,11 @@ export class DBDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "emphasis": {
                 "type": "string",
+                "attribute": "emphasis",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDividerProps[\"emphasis\"]",
@@ -145,11 +146,11 @@ export class DBDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "emphasis",
                 "reflect": false
             },
             "width": {
                 "type": "string",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDividerProps[\"width\"]",
@@ -170,11 +171,11 @@ export class DBDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDividerProps[\"className\"]",
@@ -195,7 +196,6 @@ export class DBDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,IAAI,EAAE,MAAM,eAAe,CAAC;AAG7D;;;GAGG;AAIH,MAAM,OAAO,SAAS;IASpB;;;;OAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;oBACJ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE,CAAC;oBACD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAClC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE,CAAC;wBACnB,yDAAyD;wBACzD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;oBAC3C,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,EACxC,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,iBACE,IAAI,CAAC,MAAM,kBACV,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,KAAK,GACjB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DBDividerProps, DBDividerState } from \"./model\";\nimport { cls } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-divider\",\n})\nexport class DBDivider {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBDividerProps[\"id\"];\n  @Prop() margin: DBDividerProps[\"margin\"];\n  @Prop() variant: DBDividerProps[\"variant\"];\n  @Prop() emphasis: DBDividerProps[\"emphasis\"];\n  @Prop() width: DBDividerProps[\"width\"];\n  @Prop({attribute: \"classname\"}) className: DBDividerProps[\"className\"];\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: HTMLElement | 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-divider\");\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-divider\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-margin={this.margin}\n        data-variant={this.variant}\n        data-emphasis={this.emphasis}\n        data-width={this.width}\n      ></div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,IAAI,EAAE,MAAM,eAAe,CAAC;AAG7D;;;GAGG;AAIH,MAAM,OAAO,SAAS;IASpB;;;;OAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;oBACJ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE,CAAC;oBACD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAClC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE,CAAC;wBACnB,yDAAyD;wBACzD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;oBAC3C,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,EACxC,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,iBACE,IAAI,CAAC,MAAM,kBACV,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,KAAK,GACjB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DBDividerProps, DBDividerState } from \"./model\";\nimport { cls } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-divider\",\n})\nexport class DBDivider {\n  private _ref!: HTMLDivElement | any;\n  @Prop() id: DBDividerProps[\"id\"];\n  @Prop() margin: DBDividerProps[\"margin\"];\n  @Prop() variant: DBDividerProps[\"variant\"];\n  @Prop() emphasis: DBDividerProps[\"emphasis\"];\n  @Prop() width: DBDividerProps[\"width\"];\n  @Prop({attribute: \"classname\"}) className: DBDividerProps[\"className\"];\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: HTMLElement | 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-divider\");\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-divider\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-margin={this.margin}\n        data-variant={this.variant}\n        data-emphasis={this.emphasis}\n        data-width={this.width}\n      ></div>\n    );\n  }\n}\n"]}

package/dist/collection/components/drawer/drawer.js

@@ -1,6 +1,6 @@
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, delay } from "../../utils";
-import { h } from "@stencil/core";
+import { cls, delay, getBooleanAsString } from "../../utils";
+import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot drawerHeader - TODO: Add description for slotDrawerHeader
@@ -22,7 +22,8 @@ export class DBDrawer {
     }
     handleDialogOpen() {
         if (this._ref) {
-            if (this.open && !this._ref.open) {
+            const open = Boolean(this.open);
+            if (open && !this._ref.open) {
                 if (this.dialogContainerRef) {
                     this.dialogContainerRef.hidden = false;
                 }
@@ -33,7 +34,7 @@ export class DBDrawer {
                     this._ref.showModal();
                 }
             }
-            if (!this.open && this._ref.open) {
+            if (!open && this._ref.open) {
                 if (this.dialogContainerRef) {
                     this.dialogContainerRef.hidden = true;
                 }
@@ -92,23 +93,22 @@ export class DBDrawer {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '45d96b573d5486b5742d011e1e8d5b85f5eecf57', class: "db-drawer", id: this.id, ref: (el) => {
+        return (h("dialog", { key: 'afaf6ffca86755edceb026dd6cc966dd34b57f21', class: "db-drawer", id: this.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => {
-                this.handleClose(event);
-            }, onKeyDown: (event) => this.handleClose(event), "data-backdrop": this.backdrop, "data-variant": this.variant }, h("article", { key: 'f0056239d6b60047b56f2c07afdefe69a40c2fdb', class: cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-backdrop": this.backdrop, "data-variant": this.variant }, h("article", { key: '08b2043dfa9c473b38f91c8eab425d7c977b224d', class: cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": this.rounded }, h("header", { key: '553e02fc81b1204b8fc315036c74825b4f690fc0', class: "db-drawer-header" }, h("div", { key: 'ac8901408434e520de2817da4cfae746f681ce57', class: "db-drawer-header-text" }, h("slot", { key: '64c88d5eea65823c25fc2e9693a4ef4734a06849', name: "drawerHeader" })), h("db-button", { key: '1b02b6c357f563877cbddbc8a246b296577dc0d1', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: () => this.handleClose("close") }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)), h("div", { key: '55f2035f63f90fd62b743af12eaf4a5b680ac03d', class: "db-drawer-content" }, h("slot", { key: 'aaab4804f9079a6fa940080b51d552dfffbf2b34' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: '46bdb0db8692e0eafad2b15ad39f5fe038950511', class: "db-drawer-header" }, h("div", { key: 'b7dd281e5d6920fa8c09276ea2ecf2e66216e7c2', class: "db-drawer-header-text" }, h("slot", { key: 'cf14ee259b4c41f12e0e5e169001c41e90158b1b', name: "drawerHeader" })), h("db-button", { key: '007b22180e6937bce05e96fb36c36d8ca79a942f', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: () => this.handleClose("close") }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)), h("div", { key: '9d02bf24f6175c6ae9dd73307e6600ac77a44138', class: "db-drawer-content" }, h("slot", { key: '730e1622e70648847d8852f69c9f22cb8434048c' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
         return {
             "open": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "open",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"open\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
@@ -125,11 +125,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false
             },
             "backdrop": {
                 "type": "string",
+                "attribute": "backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"backdrop\"]",
@@ -150,11 +150,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "backdrop",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"variant\"]",
@@ -175,11 +175,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"id\"]",
@@ -200,11 +200,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"className\"]",
@@ -225,11 +225,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "spacing": {
                 "type": "string",
+                "attribute": "spacing",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"spacing\"]",
@@ -250,11 +250,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spacing",
                 "reflect": false
             },
             "width": {
                 "type": "string",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"width\"]",
@@ -275,11 +275,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"direction\"]",
@@ -300,15 +300,15 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false
             },
             "rounded": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "rounded",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"rounded\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
@@ -325,11 +325,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded",
                 "reflect": false
             },
             "closeButtonId": {
                 "type": "string",
+                "attribute": "close-button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"closeButtonId\"]",
@@ -350,11 +350,11 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button-id",
                 "reflect": false
             },
             "closeButtonText": {
                 "type": "string",
+                "attribute": "close-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"closeButtonText\"]",
@@ -375,7 +375,6 @@ export class DBDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button-text",
                 "reflect": false
             }
         };