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

package/dist/collection/components/button/button.js

@@ -1,13 +1,13 @@
-import { cls, getBooleanAsString, getHideProp } from "../../utils";
-import { h } from "@stencil/core";
+import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
+import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
 export class DBButton {
     handleClick(event) {
-        if (this.onClick) {
-            this.onClick.emit(event);
+        if (this.click) {
+            this.click.emit(event);
         }
     }
     /**
@@ -46,15 +46,16 @@ export class DBButton {
         this.enableAttributePassing(this._ref, "db-button");
     }
     render() {
-        return (h("button", { key: 'd469bdf0d339b5ea838a7f1841b1ceb7d604d660', class: cls("db-button", this.className), ref: (el) => {
+        return (h("button", { key: 'f804bbf8840c2d9d16d45a7255e7ec20a6473773', class: cls("db-button", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, type: this.type || "button", disabled: this.disabled, "aria-label": this.label, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-size": this.size, "data-state": this.state, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText), name: this.name, value: this.value, "aria-describedby": this.describedbyid, "aria-expanded": this.ariaexpanded, "aria-pressed": this.ariapressed, onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)));
+            }, id: this.id, type: this.type || "button", disabled: getBoolean(this.disabled, "disabled"), "aria-label": this.label, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-size": this.size, "data-state": this.state, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value, "aria-describedby": this.describedbyid, "aria-expanded": this.ariaexpanded, "aria-pressed": this.ariapressed, onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)));
     }
     static get is() { return "db-button"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"id\"]",
@@ -75,11 +76,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"className\"]",
@@ -100,11 +101,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"type\"]",
@@ -125,15 +126,15 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBButtonProps": {
                             "location": "import",
@@ -150,11 +151,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"label\"]",
@@ -175,11 +176,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"icon\"]",
@@ -200,15 +201,15 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBButtonProps": {
                             "location": "import",
@@ -225,11 +226,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"size\"]",
@@ -250,11 +251,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "state": {
                 "type": "string",
+                "attribute": "state",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"state\"]",
@@ -275,11 +276,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "state",
                 "reflect": false
             },
             "width": {
                 "type": "string",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"width\"]",
@@ -300,11 +301,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"variant\"]",
@@ -325,15 +326,15 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "noText": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "no-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"noText\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBButtonProps": {
                             "location": "import",
@@ -350,11 +351,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-text",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"name\"]",
@@ -375,11 +376,36 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
+                "reflect": false
+            },
+            "form": {
+                "type": "string",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBButtonProps[\"form\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBButtonProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/button/model.ts::DBButtonProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"value\"]",
@@ -400,11 +426,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "describedbyid": {
                 "type": "string",
+                "attribute": "describedbyid",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"describedbyid\"]",
@@ -425,11 +451,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "describedbyid",
                 "reflect": false
             },
             "ariaexpanded": {
                 "type": "boolean",
+                "attribute": "ariaexpanded",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"ariaexpanded\"]",
@@ -450,11 +476,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ariaexpanded",
                 "reflect": false
             },
             "ariapressed": {
                 "type": "boolean",
+                "attribute": "ariapressed",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"ariapressed\"]",
@@ -475,11 +501,11 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ariapressed",
                 "reflect": false
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBButtonProps[\"text\"]",
@@ -500,15 +526,14 @@ export class DBButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             }
         };
     }
     static get events() {
         return [{
-                "method": "onClick",
-                "name": "onClick",
+                "method": "click",
+                "name": "click",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { DBButtonProps, DBButtonState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport { Component, h, Fragment, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-button\",\n})\nexport class DBButton {\n  private _ref!: HTMLButtonElement | null;\n  @Event() onClick: any;\n  @Prop() id: DBButtonProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBButtonProps[\"className\"];\n  @Prop() type: DBButtonProps[\"type\"];\n  @Prop() disabled: DBButtonProps[\"disabled\"];\n  @Prop() label: DBButtonProps[\"label\"];\n  @Prop() icon: DBButtonProps[\"icon\"];\n  @Prop() showIcon: DBButtonProps[\"showIcon\"];\n  @Prop() size: DBButtonProps[\"size\"];\n  @Prop() state: DBButtonProps[\"state\"];\n  @Prop() width: DBButtonProps[\"width\"];\n  @Prop() variant: DBButtonProps[\"variant\"];\n  @Prop() noText: DBButtonProps[\"noText\"];\n  @Prop() name: DBButtonProps[\"name\"];\n  @Prop() value: DBButtonProps[\"value\"];\n  @Prop() describedbyid: DBButtonProps[\"describedbyid\"];\n  @Prop() ariaexpanded: DBButtonProps[\"ariaexpanded\"];\n  @Prop() ariapressed: DBButtonProps[\"ariapressed\"];\n  @Prop() text: DBButtonProps[\"text\"];\n\n\n  handleClick(event: ClickEvent<HTMLButtonElement>) {\n    if (this.onClick) {\n      this.onClick.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: 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-button\");\n  }\n\n  render() {\n    return (\n      <button\n        class={cls(\"db-button\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        type={this.type || \"button\"}\n        disabled={this.disabled}\n        aria-label={this.label}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-size={this.size}\n        data-state={this.state}\n        data-width={this.width}\n        data-variant={this.variant}\n        data-no-text={getBooleanAsString(this.noText)}\n        name={this.name}\n        value={this.value}\n        aria-describedby={this.describedbyid}\n        aria-expanded={this.ariaexpanded}\n        aria-pressed={this.ariapressed}\n        onClick={(event) => this.handleClick(event)}\n      >\n        {this.text ? this.text : <slot></slot>}\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { DBButtonProps, DBButtonState } from \"./model\";\nimport { cls, getBoolean, getBooleanAsString, getHideProp } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Event,\n  EventEmitter,\n  Prop,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-button\",\n})\nexport class DBButton {\n  private _ref!: HTMLButtonElement | any;\n  @Event() click: EventEmitter<\n    Parameters<Required<DBButtonProps>[\"onClick\"]>[number]\n  > | void;\n  @Prop() id: DBButtonProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBButtonProps[\"className\"];\n  @Prop() type: DBButtonProps[\"type\"];\n  @Prop() disabled: DBButtonProps[\"disabled\"];\n  @Prop() label: DBButtonProps[\"label\"];\n  @Prop() icon: DBButtonProps[\"icon\"];\n  @Prop() showIcon: DBButtonProps[\"showIcon\"];\n  @Prop() size: DBButtonProps[\"size\"];\n  @Prop() state: DBButtonProps[\"state\"];\n  @Prop() width: DBButtonProps[\"width\"];\n  @Prop() variant: DBButtonProps[\"variant\"];\n  @Prop() noText: DBButtonProps[\"noText\"];\n  @Prop() name: DBButtonProps[\"name\"];\n  @Prop() form: DBButtonProps[\"form\"];\n  @Prop() value: DBButtonProps[\"value\"];\n  @Prop() describedbyid: DBButtonProps[\"describedbyid\"];\n  @Prop() ariaexpanded: DBButtonProps[\"ariaexpanded\"];\n  @Prop() ariapressed: DBButtonProps[\"ariapressed\"];\n  @Prop() text: DBButtonProps[\"text\"];\n\n  handleClick(event: ClickEvent<HTMLButtonElement>) {\n    if (this.click) {\n      this.click.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: 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-button\");\n  }\n\n  render() {\n    return (\n      <button\n        class={cls(\"db-button\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        type={this.type || \"button\"}\n        disabled={getBoolean(this.disabled, \"disabled\")}\n        aria-label={this.label}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-size={this.size}\n        data-state={this.state}\n        data-width={this.width}\n        data-variant={this.variant}\n        data-no-text={getBooleanAsString(this.noText)}\n        name={this.name}\n        form={this.form}\n        value={this.value}\n        aria-describedby={this.describedbyid}\n        aria-expanded={this.ariaexpanded}\n        aria-pressed={this.ariapressed}\n        onClick={(event) => this.handleClick(event)}\n      >\n        {this.text ? this.text : <slot></slot>}\n      </button>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/button/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AAEnF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC;AAErE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAS,CAAU,CAAC","sourcesContent":["import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, ShowIconProps, SizeProps, TextProps, WidthProps } from '../../shared/model';\nexport const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'] as const;\nexport type ButtonVariantType = (typeof ButtonVariantList)[number];\nexport const ButtonTypeList = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypeType = (typeof ButtonTypeList)[number];\nexport const ButtonStateList = ['loading'] as const;\nexport type ButtonStateType = (typeof ButtonStateList)[number];\nexport type DBButtonDefaultProps = {\n  /**\n   * If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).\n   */\n  ariaexpanded?: boolean;\n\n  /**\n   * Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).\n   */\n  ariapressed?: boolean;\n\n  /**\n   * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).\n   */\n  disabled?: boolean;\n\n  /**\n   * Define the text next to the icon specified via the icon Property to get hidden.\n   */\n  noText?: boolean; // We had to rename this to noText because wc-core-components uses a regex and always finds \"icon\" instead of \"onlyIcon\"\n\n  /**\n   * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button\n   */\n  label?: string;\n\n  /**\n   * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.\n   */\n  name?: string;\n\n  /**\n   * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).\n   */\n  type?: ButtonTypeType;\n\n  /**\n   * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).\n   */\n  value?: string;\n\n  /**\n   * Show loading progress inside button.\n   */\n  state?: ButtonStateType;\n\n  /**\n   * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.\n   */\n  variant?: ButtonVariantType | string;\n};\nexport type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps;\nexport type DBButtonDefaultState = {};\nexport type DBButtonState = DBButtonDefaultState & GlobalState & ClickEventState<HTMLButtonElement>"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/button/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AAEnF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC;AAErE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAS,CAAU,CAAC","sourcesContent":["import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, ShowIconProps, SizeProps, TextProps, WidthProps } from '../../shared/model';\nexport const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'] as const;\nexport type ButtonVariantType = (typeof ButtonVariantList)[number];\nexport const ButtonTypeList = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypeType = (typeof ButtonTypeList)[number];\nexport const ButtonStateList = ['loading'] as const;\nexport type ButtonStateType = (typeof ButtonStateList)[number];\nexport type DBButtonDefaultProps = {\n  /**\n   * If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).\n   */\n  ariaexpanded?: boolean;\n\n  /**\n   * Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).\n   */\n  ariapressed?: boolean;\n\n  /**\n   * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).\n   */\n  disabled?: boolean | string;\n\n  /**\n   * \tAssociates the control with a form element\n   */\n  form?: string;\n\n  /**\n   * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button\n   */\n  label?: string;\n\n  /**\n   * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.\n   */\n  name?: string;\n\n  /**\n   * Define the text next to the icon specified via the icon Property to get hidden.\n   */\n  noText?: boolean | string;\n\n  /**\n   * Show loading progress inside button.\n   */\n  state?: ButtonStateType;\n\n  /**\n   * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).\n   */\n  type?: ButtonTypeType;\n\n  /**\n   * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).\n   */\n  value?: string;\n\n  /**\n   * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.\n   */\n  variant?: ButtonVariantType | string;\n};\nexport type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps;\nexport type DBButtonDefaultState = {};\nexport type DBButtonState = DBButtonDefaultState & GlobalState & ClickEventState<HTMLButtonElement>"]}

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

@@ -1,13 +1,13 @@
 import { cls } from "../../utils";
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
 export class DBCard {
     handleClick(event) {
-        if (this.onClick) {
-            this.onClick.emit(event);
+        if (this.click) {
+            this.click.emit(event);
         }
     }
     /**
@@ -46,15 +46,16 @@ export class DBCard {
         this.enableAttributePassing(this._ref, "db-card");
     }
     render() {
-        return (h("div", { key: 'ccbc53820799b727bdf095528da4bf4c7fdf1129', class: cls("db-card", this.className), ref: (el) => {
+        return (h("div", { key: 'dfc5004a3cc98b94ccd3ff6c930f231ef39c918e', class: cls("db-card", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, role: this.behavior === "interactive" ? "button" : undefined, tabIndex: this.behavior === "interactive" ? 0 : undefined, onClick: (event) => this.handleClick(event) }, h("slot", { key: '8afa05261ef6931eceecfd55694c8dc06d78f7a3' })));
+            }, id: this.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, role: this.behavior === "interactive" ? "button" : undefined, tabIndex: this.behavior === "interactive" ? 0 : undefined, onClick: (event) => this.handleClick(event) }, h("slot", { key: '6c73a087dab46b17c01e48eec340788f3a10bf63' })));
     }
     static get is() { return "db-card"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCardProps[\"id\"]",
@@ -75,11 +76,11 @@ export class DBCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCardProps[\"className\"]",
@@ -100,11 +101,11 @@ export class DBCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "behavior": {
                 "type": "string",
+                "attribute": "behavior",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCardProps[\"behavior\"]",
@@ -125,11 +126,11 @@ export class DBCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "behavior",
                 "reflect": false
             },
             "elevationLevel": {
                 "type": "string",
+                "attribute": "elevation-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCardProps[\"elevationLevel\"]",
@@ -150,11 +151,11 @@ export class DBCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "elevation-level",
                 "reflect": false
             },
             "spacing": {
                 "type": "string",
+                "attribute": "spacing",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCardProps[\"spacing\"]",
@@ -175,15 +176,14 @@ export class DBCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spacing",
                 "reflect": false
             }
         };
     }
     static get events() {
         return [{
-                "method": "onClick",
-                "name": "onClick",
+                "method": "click",
+                "name": "click",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGpE;;;GAGG;AAIH,MAAM,OAAO,MAAM;IAUjB,WAAW,CAAC,KAA8B;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAED;;;;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,SAAS,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EACrC,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,mBACI,IAAI,CAAC,QAAQ,0BACN,IAAI,CAAC,cAAc,kBAC3B,IAAI,CAAC,OAAO,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACzD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;YAE3C,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { DBCardProps, DBCardState } from \"./model\";\nimport { cls } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport { Component, h, Fragment, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-card\",\n})\nexport class DBCard {\n  private _ref!: HTMLDivElement | null;\n  @Event() onClick: any;\n  @Prop() id: DBCardProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBCardProps[\"className\"];\n  @Prop() behavior: DBCardProps[\"behavior\"];\n  @Prop() elevationLevel: DBCardProps[\"elevationLevel\"];\n  @Prop() spacing: DBCardProps[\"spacing\"];\n\n\n  handleClick(event: ClickEvent<HTMLElement>) {\n    if (this.onClick) {\n      this.onClick.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: 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-card\");\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-card\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-behavior={this.behavior}\n        data-elevation-level={this.elevationLevel}\n        data-spacing={this.spacing}\n        role={this.behavior === \"interactive\" ? \"button\" : undefined}\n        tabIndex={this.behavior === \"interactive\" ? 0 : undefined}\n        onClick={(event) => this.handleClick(event)}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { DBCardProps, DBCardState } from \"./model\";\nimport { cls } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Event,\n  EventEmitter,\n  Prop,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-card\",\n})\nexport class DBCard {\n  private _ref!: HTMLDivElement | any;\n  @Event() click: EventEmitter<\n    Parameters<Required<DBCardProps>[\"onClick\"]>[number]\n  > | void;\n  @Prop() id: DBCardProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBCardProps[\"className\"];\n  @Prop() behavior: DBCardProps[\"behavior\"];\n  @Prop() elevationLevel: DBCardProps[\"elevationLevel\"];\n  @Prop() spacing: DBCardProps[\"spacing\"];\n\n  handleClick(event: ClickEvent<HTMLElement>) {\n    if (this.click) {\n      this.click.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: 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-card\");\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-card\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-behavior={this.behavior}\n        data-elevation-level={this.elevationLevel}\n        data-spacing={this.spacing}\n        role={this.behavior === \"interactive\" ? \"button\" : undefined}\n        tabIndex={this.behavior === \"interactive\" ? 0 : undefined}\n        onClick={(event) => this.handleClick(event)}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}