@db-ux/wc-core-components 2.4.4 → 3.0.1

package/dist/collection/components/header/header.js

@@ -1,5 +1,5 @@
-import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
-import { addAttributeToChildren, cls, getBoolean, uuid } from "../../utils";
+import { DEFAULT_BURGER_MENU } from "../../shared/constants";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils";
 import { isEventTargetNavigationItem } from "../../utils/navigation";
 import { h, } from "@stencil/core";
 /**
@@ -11,7 +11,6 @@ import { h, } from "@stencil/core";
  */
 export class DBHeader {
     constructor() {
-        this._id = DEFAULT_ID;
         this.initialized = false;
         this.forcedToMobile = false;
     }
@@ -62,17 +61,13 @@ export class DBHeader {
         }
     }
     watch0Fn() {
-        var _a;
-        if (this.initialized && document && this._id && this.forceMobile) {
-            const headerElement = document.getElementById((_a = this._id) !== null && _a !== void 0 ? _a : "");
-            if (headerElement) {
-                // Adds this attribute to the header to enable all styling which would have
-                // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-                addAttributeToChildren(headerElement, {
-                    key: "data-force-mobile",
-                    value: "true",
-                });
-            }
+        if (this.initialized && this._ref && this.forceMobile) {
+            // Adds this attribute to the header to enable all styling which would have
+            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+            addAttributeToChildren(this._ref, {
+                key: "data-force-mobile",
+                value: "true",
+            });
             this.forcedToMobile = true;
         }
     }
@@ -82,25 +77,24 @@ export class DBHeader {
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-header");
         this.initialized = true;
-        this._id = this.id || "header-" + uuid();
         this.watch0Fn();
     }
     render() {
         var _a;
-        return (h("header", { key: '7164c39337a38f1cf9a43155c35a523ac43d1e7f', class: cls("db-header", this.className), ref: (el) => {
+        return (h("header", { key: 'f4c9884becf742012f64300f7c63fc6d4463fc53', class: cls("db-header", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("db-drawer", { key: 'a0b706e57edd786b456d78fa2cf378f669ed195e', class: "db-header-drawer", spacing: "small", rounded: true, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: '0b0a545577ab9a62e95aeda901d38f8e6342a714', class: "db-header-drawer-navigation" }, h("div", { key: 'c18c6d3e7b63013e88287c7a8db30049ca971803', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '10bab0612c22529ab6552b08188d4eb0e8cc75f5' })), h("div", { key: 'ca88ab6856983363187ad5375c43bd273705e8bd', class: "db-header-meta-navigation" }, h("slot", { key: 'ed541d5d43f4642e756a906529c5acde8b7272ee', name: "metaNavigation" }))), h("div", { key: '54b5f2283e6299e1e170cc748bd73eab19ebc45c', class: "db-header-secondary-action" }, h("slot", { key: '247a1d39b5d68e9fb045a383ebd01eba1c24b900', name: "secondaryAction" }))), h("div", { key: '8fb50d7e5bdda29c7d41e5c6d4519355f77a1b36', class: "db-header-meta-navigation" }, h("slot", { key: '05a2bba7ba0db19d66bf99a7c12c083d6dc8af47', name: "metaNavigation" })), h("div", { key: 'ab478eb72d05b84058541299a7d69533a64b0df7', class: "db-header-navigation-bar" }, h("div", { key: '58523957eac58d8bb9ef772a70a4e725dfc50d65', class: "db-header-brand-container" }, h("slot", { key: 'b5d6aa4897c195fab66fd50dffb10552a7cb328b', name: "brand" })), h("div", { key: '58a4b1ea1b198c287b4ff1c4dede35c8443c9a8e', class: "db-header-navigation-container" }, h("div", { key: 'c7b42aa4179af8b1d8e077a8e936072d5d4310dd', class: "db-header-navigation" }, h("slot", { key: '65de09cfdd312f064a4c48ee2da58c10c8ec808b' })), h("div", { key: '82bf8feb4b3161289380d5d92b9cdb09bfe30f22', class: "db-header-primary-action" }, h("slot", { key: 'a2bcc11216a932a2f5fc197947ac392450c5d0e2', name: "primaryAction" }))), h("div", { key: '6ca64a52596fed7136a59aa321d44adbd924a64d', class: "db-header-action-container" }, h("div", { key: '9ce2d0782e6df4c6cb3726f71684933ed6707673', class: "db-header-burger-menu-container" }, h("db-button", { key: '3a403abdae82f7c62e4349b14c37302984ddcc36', icon: "menu", variant: "ghost", id: this._id + "-burger-menu", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)), h("div", { key: '7e6ead129f18bbbf8e72fc3ff6726b3f3f448af9', class: "db-header-secondary-action" }, h("slot", { key: 'fece8c818e63eff96564d98f38c0bdd76a464c21', name: "secondaryAction" }))))));
+            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("db-drawer", { key: '1e7041fce0b49d91634f9150de2728fb3ea570ae', class: "db-header-drawer", spacing: "small", rounded: true, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: '9cf3ece5244d1210276de64d74916077323a03c1', class: "db-header-drawer-navigation" }, h("div", { key: '4b3aa0923761a654d6095e862b5d1beddae86d80', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: 'a4f4a03a8cb99eb51aa6b865900ce5087099eddf' })), h("div", { key: '3d45857231f8637705c827d7c261cc33ab14f966', class: "db-header-meta-navigation" }, h("slot", { key: '8820a4e7f3e41d92ffabee8787e68cff52ae9ffe', name: "metaNavigation" }))), h("div", { key: 'a2419d7e6cf2ac44e303b3ecbce0e2879064ce92', class: "db-header-secondary-action" }, h("slot", { key: 'be3960fbaf78ae49ba370e78be80069c21272b90', name: "secondaryAction" }))), h("div", { key: '5d34773d05e83f70b8c4b94320ccacfa724c607d', class: "db-header-meta-navigation" }, h("slot", { key: '59173edd33c4cb1198d01ff226a9b00510066a23', name: "metaNavigation" })), h("div", { key: '295063c335c63c27caa205577aa8d1c9fba8f707', class: "db-header-navigation-bar" }, h("div", { key: '89bba742b816ae4de7964a6818552cb539b338fc', class: "db-header-brand-container" }, h("slot", { key: '98f16df9f68541c7fddc25fd823d6a6c2c038186', name: "brand" })), h("div", { key: '7e6279f4528c98b3e33fe9e948f24e098806aba1', class: "db-header-navigation-container" }, h("div", { key: '9194a52e1270ae50b648498587262354e2cbb074', class: "db-header-navigation" }, h("slot", { key: '5c5b769528a870c273f6b278f2426818b87fca34' })), h("div", { key: 'fdd0b74ffd36b12cca136b66ffb851332384e7f5', class: "db-header-primary-action" }, h("slot", { key: '9785dea0204a3029a31962e661861c26ca9ba490', name: "primaryAction" }))), h("div", { key: '3da686773c71442497aed65236b22ce19d42cf5a', class: "db-header-action-container" }, h("div", { key: '08d4fcda3c5e3d757fa090fc7a4170884f653340', class: "db-header-burger-menu-container" }, h("db-button", { key: '066d1359f239663f6c92d9206ec6112ab93a7326', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)), h("div", { key: '43ed5e88925dd99ff83241a626e3a4204101304f', class: "db-header-secondary-action" }, h("slot", { key: 'c74a72a5babc2ab9c667d2a898955be5ce919a9b', name: "secondaryAction" }))))));
     }
     static get is() { return "db-header"; }
     static get properties() {
         return {
-            "id": {
-                "type": "string",
-                "attribute": "id",
+            "forceMobile": {
+                "type": "any",
+                "attribute": "force-mobile",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"id\"]",
-                    "resolved": "string",
+                    "original": "DBHeaderProps[\"forceMobile\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
@@ -119,12 +113,12 @@ export class DBHeader {
                 "setter": false,
                 "reflect": false
             },
-            "forceMobile": {
+            "drawerOpen": {
                 "type": "any",
-                "attribute": "force-mobile",
+                "attribute": "drawer-open",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"forceMobile\"]",
+                    "original": "DBHeaderProps[\"drawerOpen\"]",
                     "resolved": "boolean | string",
                     "references": {
                         "DBHeaderProps": {
@@ -144,13 +138,13 @@ export class DBHeader {
                 "setter": false,
                 "reflect": false
             },
-            "drawerOpen": {
-                "type": "any",
-                "attribute": "drawer-open",
+            "className": {
+                "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"drawerOpen\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBHeaderProps[\"className\"]",
+                    "resolved": "string",
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
@@ -169,12 +163,12 @@ export class DBHeader {
                 "setter": false,
                 "reflect": false
             },
-            "className": {
+            "id": {
                 "type": "string",
-                "attribute": "classname",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBHeaderProps[\"className\"]",
+                    "original": "DBHeaderProps[\"id\"]",
                     "resolved": "string",
                     "references": {
                         "DBHeaderProps": {
@@ -248,7 +242,6 @@ export class DBHeader {
     }
     static get states() {
         return {
-            "_id": {},
             "initialized": {},
             "forcedToMobile": {}
         };
@@ -275,6 +268,9 @@ export class DBHeader {
         return [{
                 "propName": "initialized",
                 "methodName": "watch0"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch0"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DEFAULT_BURGER_MENU, DEFAULT_ID } from \"../../shared/constants\";\nimport { addAttributeToChildren, cls, getBoolean, uuid } from \"../../utils\";\nimport { isEventTargetNavigationItem } from \"../../utils/navigation\";\nimport { DBButton } from \"../button/button\";\nimport { DBDrawer } from \"../drawer/drawer\";\nimport { DBHeaderProps, DBHeaderState } 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 * @slot metaNavigation - TODO: Add description for slotMetaNavigation\n * @slot secondaryAction - TODO: Add description for slotSecondaryAction\n * @slot brand - TODO: Add description for slotBrand\n * @slot primaryAction - TODO: Add description for slotPrimaryAction\n */\n @Component({\n  tag: \"db-header\",\n})\nexport class DBHeader {\n  private _ref!: HTMLDivElement | any;\n  @Prop() id: DBHeaderProps[\"id\"];\n  @Prop() forceMobile: DBHeaderProps[\"forceMobile\"];\n  @Prop() drawerOpen: DBHeaderProps[\"drawerOpen\"];\n  @Event() toggle: EventEmitter<\n    Parameters<Required<DBHeaderProps>[\"onToggle\"]>[number]\n  > | void;\n  @Prop({attribute: \"classname\"}) className: DBHeaderProps[\"className\"];\n  @Prop() width: DBHeaderProps[\"width\"];\n  @Prop() burgerMenuLabel: DBHeaderProps[\"burgerMenuLabel\"];\n  @State() _id = DEFAULT_ID;\n  @State() initialized = false;\n  @State() forcedToMobile = false;\n\n  handleToggle(event?: any) {\n    if (event && event.stopPropagation) {\n      event.stopPropagation();\n    }\n    const open = !getBoolean(this.drawerOpen, \"drawerOpen\");\n    if (this.toggle) {\n      this.toggle.emit(open);\n    }\n  }\n  handleNavigationItemClick(event: unknown) {\n    if (isEventTargetNavigationItem(event)) {\n      this.handleToggle();\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  watch0Fn() {\n    if (this.initialized && document && this._id && this.forceMobile) {\n      const headerElement = document.getElementById(\n        this._id ?? \"\"\n      ) as HTMLElement;\n      if (headerElement) {\n        // Adds this attribute to the header to enable all styling which would have\n        // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device\n        addAttributeToChildren(headerElement, {\n          key: \"data-force-mobile\",\n          value: \"true\",\n        });\n      }\n      this.forcedToMobile = true;\n    }\n  }\n\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-header\");\n    this.initialized = true;\n    this._id = this.id || \"header-\" + uuid();\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <header\n        class={cls(\"db-header\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-width={this.width}\n        data-on-forcing-mobile={this.forceMobile && !this.forcedToMobile}\n      >\n        <db-drawer\n          class=\"db-header-drawer\"\n          spacing=\"small\"\n          rounded={true}\n          open={getBoolean(this.drawerOpen)}\n          onClose={() => this.handleToggle()}\n        >\n          <div class=\"db-header-drawer-navigation\">\n            <div\n              class=\"db-header-navigation\"\n              onClick={(event) => this.handleNavigationItemClick(event)}\n            >\n              <slot></slot>\n            </div>\n            <div class=\"db-header-meta-navigation\">\n              <slot name=\"metaNavigation\"></slot>\n            </div>\n          </div>\n          <div class=\"db-header-secondary-action\">\n            <slot name=\"secondaryAction\"></slot>\n          </div>\n        </db-drawer>\n        <div class=\"db-header-meta-navigation\">\n          <slot name=\"metaNavigation\"></slot>\n        </div>\n        <div class=\"db-header-navigation-bar\">\n          <div class=\"db-header-brand-container\">\n            <slot name=\"brand\"></slot>\n          </div>\n          <div class=\"db-header-navigation-container\">\n            <div class=\"db-header-navigation\">\n              <slot></slot>\n            </div>\n            <div class=\"db-header-primary-action\">\n              <slot name=\"primaryAction\"></slot>\n            </div>\n          </div>\n          <div class=\"db-header-action-container\">\n            <div class=\"db-header-burger-menu-container\">\n              <db-button\n                icon=\"menu\"\n                variant=\"ghost\"\n                id={this._id + \"-burger-menu\"}\n                noText={true}\n                onClick={() => this.handleToggle()}\n              >\n                {this.burgerMenuLabel ?? DEFAULT_BURGER_MENU}\n              </db-button>\n            </div>\n            <div class=\"db-header-secondary-action\">\n              <slot name=\"secondaryAction\"></slot>\n            </div>\n          </div>\n        </div>\n      </header>\n    );\n  }\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DEFAULT_BURGER_MENU } from \"../../shared/constants\";\nimport { addAttributeToChildren, cls, getBoolean } from \"../../utils\";\nimport { isEventTargetNavigationItem } from \"../../utils/navigation\";\nimport { DBButton } from \"../button/button\";\nimport { DBDrawer } from \"../drawer/drawer\";\nimport { DBHeaderProps, DBHeaderState } 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 * @slot metaNavigation - TODO: Add description for slotMetaNavigation\n * @slot secondaryAction - TODO: Add description for slotSecondaryAction\n * @slot brand - TODO: Add description for slotBrand\n * @slot primaryAction - TODO: Add description for slotPrimaryAction\n */\n @Component({\n  tag: \"db-header\",\n})\nexport class DBHeader {\n  private _ref!: HTMLDivElement | any;\n  @Prop() forceMobile: DBHeaderProps[\"forceMobile\"];\n  @Prop() drawerOpen: DBHeaderProps[\"drawerOpen\"];\n  @Event() toggle: EventEmitter<\n    Parameters<Required<DBHeaderProps>[\"onToggle\"]>[number]\n  > | void;\n  @Prop({attribute: \"classname\"}) className: DBHeaderProps[\"className\"];\n  @Prop() id: DBHeaderProps[\"id\"];\n  @Prop() width: DBHeaderProps[\"width\"];\n  @Prop() burgerMenuLabel: DBHeaderProps[\"burgerMenuLabel\"];\n  @State() initialized = false;\n  @State() forcedToMobile = false;\n\n  handleToggle(event?: any) {\n    if (event && event.stopPropagation) {\n      event.stopPropagation();\n    }\n    const open = !getBoolean(this.drawerOpen, \"drawerOpen\");\n    if (this.toggle) {\n      this.toggle.emit(open);\n    }\n  }\n  handleNavigationItemClick(event: unknown) {\n    if (isEventTargetNavigationItem(event)) {\n      this.handleToggle();\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  watch0Fn() {\n    if (this.initialized && this._ref && this.forceMobile) {\n      // Adds this attribute to the header to enable all styling which would have\n      // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device\n      addAttributeToChildren(this._ref, {\n        key: \"data-force-mobile\",\n        value: \"true\",\n      });\n      this.forcedToMobile = true;\n    }\n  }\n\n  @Watch(\"initialized\")\n  @Watch(\"_ref\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-header\");\n    this.initialized = true;\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <header\n        class={cls(\"db-header\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-width={this.width}\n        data-on-forcing-mobile={this.forceMobile && !this.forcedToMobile}\n      >\n        <db-drawer\n          class=\"db-header-drawer\"\n          spacing=\"small\"\n          rounded={true}\n          open={getBoolean(this.drawerOpen)}\n          onClose={() => this.handleToggle()}\n        >\n          <div class=\"db-header-drawer-navigation\">\n            <div\n              class=\"db-header-navigation\"\n              onClick={(event) => this.handleNavigationItemClick(event)}\n            >\n              <slot></slot>\n            </div>\n            <div class=\"db-header-meta-navigation\">\n              <slot name=\"metaNavigation\"></slot>\n            </div>\n          </div>\n          <div class=\"db-header-secondary-action\">\n            <slot name=\"secondaryAction\"></slot>\n          </div>\n        </db-drawer>\n        <div class=\"db-header-meta-navigation\">\n          <slot name=\"metaNavigation\"></slot>\n        </div>\n        <div class=\"db-header-navigation-bar\">\n          <div class=\"db-header-brand-container\">\n            <slot name=\"brand\"></slot>\n          </div>\n          <div class=\"db-header-navigation-container\">\n            <div class=\"db-header-navigation\">\n              <slot></slot>\n            </div>\n            <div class=\"db-header-primary-action\">\n              <slot name=\"primaryAction\"></slot>\n            </div>\n          </div>\n          <div class=\"db-header-action-container\">\n            <div class=\"db-header-burger-menu-container\">\n              <db-button\n                icon=\"menu\"\n                variant=\"ghost\"\n                noText={true}\n                onClick={() => this.handleToggle()}\n              >\n                {this.burgerMenuLabel ?? DEFAULT_BURGER_MENU}\n              </db-button>\n            </div>\n            <div class=\"db-header-secondary-action\">\n              <slot name=\"secondaryAction\"></slot>\n            </div>\n          </div>\n        </div>\n      </header>\n    );\n  }\n}\n"]}

package/dist/collection/components/infotext/infotext.js

@@ -1,4 +1,4 @@
-import { cls, getHideProp } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -42,9 +42,9 @@ export class DBInfotext {
     }
     render() {
         var _a;
-        return (h("span", { key: 'd44fec79300a02e6602347c8f099519774a53178', class: cls("db-infotext", this.className), ref: (el) => {
+        return (h("span", { key: 'c126d11d979284931006fa76b2a6a49e396f394c', class: cls("db-infotext", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-hide-icon-before": getHideProp((_a = this.showIcon) !== null && _a !== void 0 ? _a : true) }, this.text ? this.text : h("slot", null)));
+            }, id: this.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-show-icon-leading": getBooleanAsString((_a = this.showIcon) !== null && _a !== void 0 ? _a : true) }, this.text ? this.text : h("slot", null)));
     }
     static get is() { return "db-infotext"; }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"infotext.js","sourceRoot":"","sources":["../../../src/components/infotext/infotext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,IAAI,EAAE,MAAM,eAAe,CAAC;AAG7D;;;GAGG;AAIH,MAAM,OAAO,UAAU;IAUrB;;;;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,aAAa,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,6DACE,KAAK,EAAE,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,EACzC,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,eACA,IAAI,CAAC,IAAI,mBACL,IAAI,CAAC,QAAQ,eACjB,IAAI,CAAC,IAAI,2BACG,WAAW,CAAC,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI,CAAC,IAExD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAa,CACjC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { cls, getHideProp } from \"../../utils\";\nimport { DBInfotextProps, DBInfotextState } from \"./model\";\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-infotext\",\n})\nexport class DBInfotext {\n  private _ref!: HTMLSpanElement | any;\n  @Prop() id: DBInfotextProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBInfotextProps[\"className\"];\n  @Prop() icon: DBInfotextProps[\"icon\"];\n  @Prop() semantic: DBInfotextProps[\"semantic\"];\n  @Prop() size: DBInfotextProps[\"size\"];\n  @Prop() showIcon: DBInfotextProps[\"showIcon\"];\n  @Prop() text: DBInfotextProps[\"text\"];\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-infotext\");\n  }\n\n  render() {\n    return (\n      <span\n        class={cls(\"db-infotext\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-icon={this.icon}\n        data-semantic={this.semantic}\n        data-size={this.size}\n        data-hide-icon-before={getHideProp(this.showIcon ?? true)}\n      >\n        {this.text ? this.text : <slot></slot>}\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"infotext.js","sourceRoot":"","sources":["../../../src/components/infotext/infotext.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cls, getBooleanAsString } from \"../../utils\";\nimport { DBInfotextProps, DBInfotextState } from \"./model\";\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-infotext\",\n})\nexport class DBInfotext {\n  private _ref!: HTMLSpanElement | any;\n  @Prop() id: DBInfotextProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBInfotextProps[\"className\"];\n  @Prop() icon: DBInfotextProps[\"icon\"];\n  @Prop() semantic: DBInfotextProps[\"semantic\"];\n  @Prop() size: DBInfotextProps[\"size\"];\n  @Prop() showIcon: DBInfotextProps[\"showIcon\"];\n  @Prop() text: DBInfotextProps[\"text\"];\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-infotext\");\n  }\n\n  render() {\n    return (\n      <span\n        class={cls(\"db-infotext\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-icon={this.icon}\n        data-semantic={this.semantic}\n        data-size={this.size}\n        data-show-icon-leading={getBooleanAsString(this.showIcon ?? true)}\n      >\n        {this.text ? this.text : <slot></slot>}\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/input/input.js

@@ -1,5 +1,5 @@
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -13,8 +13,8 @@ export class DBInput {
         this._invalidMessageId = undefined;
         this._invalidMessage = undefined;
         this._dataListId = undefined;
-        this._descByIds = "";
-        this._value = "";
+        this._descByIds = undefined;
+        this._value = undefined;
         this._voiceOverFallback = "";
     }
     hasValidState() {
@@ -48,7 +48,7 @@ export class DBInput {
             this._descByIds = this._messageId;
         }
         else {
-            this._descByIds = "";
+            this._descByIds = undefined;
         }
     }
     handleInput(event) {
@@ -136,6 +136,7 @@ export class DBInput {
             if (stringPropVisible(this.message, this.showMessage)) {
                 this._descByIds = messageId;
             }
+            this.handleValidation();
         }
     }
     watch1() {
@@ -162,11 +163,11 @@ export class DBInput {
         this.watch2Fn();
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h("div", { key: '20c18ce12b82061daf79ada26e0a9bc252218a90', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-icon": getHideProp(this.showIcon), "data-icon": this.icon, "data-icon-after": this.iconAfter, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-icon-after": getHideProp(this.showIcon) }, h("label", { key: 'be50712327367735f35c05e7b93459e802d7a40d', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("input", { key: '37848303343d32e71320d7ed809e8c24a2d12c80', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (h("div", { key: '14f5ef53f59b28fc9ec86af2c8b73163ee0711eb', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: '742b1fff77d5984d9aaf7f9f7a8d3bec38cd0d7f', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '6bf7b4ef207482801e3664c1234d7033caf24b3f', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, type: this.type || "text", placeholder: (_b = this.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getNumber(this.step), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
-                getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: getBoolean(this.autofocus, "autofocus"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }), this.dataList ? (h("datalist", { id: this._dataListId }, (_e = this.getDataList()) === null || _e === void 0 ? void 0 : _e.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '2e17ee79e5a56c1710122aa2851a3a9be28d55fe' }), 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: '36e5ad27fff2ef5407576c157add876d195d76b7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '2ad6e4670612fe0bb82b895c5f89131df50e3cac', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, type: this.type || "text", multiple: getBoolean(this.multiple, "multiple"), placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getNumber(this.step), value: (_e = this.value) !== null && _e !== void 0 ? _e : this._value, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
+                getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: getBoolean(this.autofocus, "autofocus"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_f = this.ariaDescribedBy) !== null && _f !== void 0 ? _f : this._descByIds }), this.dataList ? (h("datalist", { id: this._dataListId }, (_g = this.getDataList()) === null || _g === void 0 ? void 0 : _g.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '7148441abf8ae48961d6c33e9d3e1aafd80b712e' }), 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: '0138db84ad8a008ede50e58d69e72384e84b590b', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '8386b22d98880d515d0b310895c21f388ef172b1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-input"; }
     static get properties() {
@@ -570,6 +571,31 @@ export class DBInput {
                 "setter": false,
                 "reflect": false
             },
+            "showIconLeading": {
+                "type": "any",
+                "attribute": "show-icon-leading",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInputProps[\"showIconLeading\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBInputProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/input/model.ts::DBInputProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "showIcon": {
                 "type": "any",
                 "attribute": "show-icon",
@@ -595,6 +621,31 @@ export class DBInput {
                 "setter": false,
                 "reflect": false
             },
+            "iconLeading": {
+                "type": "string",
+                "attribute": "icon-leading",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInputProps[\"iconLeading\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBInputProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/input/model.ts::DBInputProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "icon": {
                 "type": "string",
                 "attribute": "icon",
@@ -620,12 +671,12 @@ export class DBInput {
                 "setter": false,
                 "reflect": false
             },
-            "iconAfter": {
+            "iconTrailing": {
                 "type": "string",
-                "attribute": "icon-after",
+                "attribute": "icon-trailing",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"iconAfter\"]",
+                    "original": "DBInputProps[\"iconTrailing\"]",
                     "resolved": "BaseIconTypes | LooseAutocomplete",
                     "references": {
                         "DBInputProps": {
@@ -670,6 +721,31 @@ export class DBInput {
                 "setter": false,
                 "reflect": false
             },
+            "showIconTrailing": {
+                "type": "any",
+                "attribute": "show-icon-trailing",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInputProps[\"showIconTrailing\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBInputProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/input/model.ts::DBInputProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "label": {
                 "type": "string",
                 "attribute": "label",
@@ -770,6 +846,31 @@ export class DBInput {
                 "setter": false,
                 "reflect": false
             },
+            "multiple": {
+                "type": "any",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInputProps[\"multiple\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBInputProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/input/model.ts::DBInputProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "placeholder": {
                 "type": "string",
                 "attribute": "placeholder",

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  DEFAULT_DATALIST_ID_SUFFIX,\n  DEFAULT_INVALID_MESSAGE,\n  DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n  DEFAULT_LABEL,\n  DEFAULT_MESSAGE_ID_SUFFIX,\n  DEFAULT_PLACEHOLDER,\n  DEFAULT_VALID_MESSAGE,\n  DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport {\n  ChangeEvent,\n  InputEvent,\n  InteractionEvent,\n  ValueLabelType,\n} from \"../../shared/model\";\nimport {\n  cls,\n  delay,\n  getBoolean,\n  getHideProp,\n  getInputValue,\n  getNumber,\n  hasVoiceOver,\n  isArrayOfStrings,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport { DBInputProps, DBInputState } 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-input\",\n})\nexport class DBInput {\n  private _ref!: HTMLInputElement | any;\n  @Prop() id: DBInputProps[\"id\"];\n  @Prop() invalidMessage: DBInputProps[\"invalidMessage\"];\n  @Prop() dataListId: DBInputProps[\"dataListId\"];\n  @Prop() message: DBInputProps[\"message\"];\n  @Prop() showMessage: DBInputProps[\"showMessage\"];\n  @Prop() value: DBInputProps[\"value\"];\n  @Prop() validMessage: DBInputProps[\"validMessage\"];\n  @Prop() validation: DBInputProps[\"validation\"];\n  @Prop() required: DBInputProps[\"required\"];\n  @Prop() minLength: DBInputProps[\"minLength\"];\n  @Prop() maxLength: DBInputProps[\"maxLength\"];\n  @Prop() pattern: DBInputProps[\"pattern\"];\n  @Event() input: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onInput\"]>[number]\n  > | void;\n  @Event() change: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onChange\"]>[number]\n  > | void;\n  @Event() blur: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onBlur\"]>[number]\n  > | void;\n  @Event() focus: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onFocus\"]>[number]\n  > | void;\n  @Prop() dataList: DBInputProps[\"dataList\"];\n  @Prop({attribute: \"classname\"}) className: DBInputProps[\"className\"];\n  @Prop() variant: DBInputProps[\"variant\"];\n  @Prop() showLabel: DBInputProps[\"showLabel\"];\n  @Prop() showIcon: DBInputProps[\"showIcon\"];\n  @Prop() icon: DBInputProps[\"icon\"];\n  @Prop() iconAfter: DBInputProps[\"iconAfter\"];\n  @Prop() showRequiredAsterisk: DBInputProps[\"showRequiredAsterisk\"];\n  @Prop() label: DBInputProps[\"label\"];\n  @Prop() fieldSizing: DBInputProps[\"fieldSizing\"];\n  @Prop() name: DBInputProps[\"name\"];\n  @Prop() type: DBInputProps[\"type\"];\n  @Prop() placeholder: DBInputProps[\"placeholder\"];\n  @Prop() disabled: DBInputProps[\"disabled\"];\n  @Prop() step: DBInputProps[\"step\"];\n  @Prop() maxlength: DBInputProps[\"maxlength\"];\n  @Prop() minlength: DBInputProps[\"minlength\"];\n  @Prop() max: DBInputProps[\"max\"];\n  @Prop() min: DBInputProps[\"min\"];\n  @Prop() readOnly: DBInputProps[\"readOnly\"];\n  @Prop() readonly: DBInputProps[\"readonly\"];\n  @Prop() form: DBInputProps[\"form\"];\n  @Prop() size: DBInputProps[\"size\"];\n  @Prop() autocomplete: DBInputProps[\"autocomplete\"];\n  @Prop() autofocus: DBInputProps[\"autofocus\"];\n  @Prop() ariaDescribedBy: DBInputProps[\"ariaDescribedBy\"];\n  @Prop() messageIcon: DBInputProps[\"messageIcon\"];\n  @State() _id = undefined;\n  @State() _messageId = undefined;\n  @State() _validMessageId = undefined;\n  @State() _invalidMessageId = undefined;\n  @State() _invalidMessage = undefined;\n  @State() _dataListId = undefined;\n  @State() _descByIds = \"\";\n  @State() _value = \"\";\n  @State() _voiceOverFallback = \"\";\n\n  hasValidState() {\n    return !!(this.validMessage ?? this.validation === \"valid\");\n  }\n  handleValidation() {\n    /* For a11y reasons we need to map the correct message with the input */\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 = this._invalidMessage;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (\n      this.hasValidState() &&\n      this._ref?.validity.valid &&\n      (this.required || this.minLength || this.maxLength || this.pattern)\n    ) {\n      this._descByIds = this._validMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (stringPropVisible(this.message, this.showMessage)) {\n      this._descByIds = this._messageId;\n    } else {\n      this._descByIds = \"\";\n    }\n  }\n  handleInput(event: InputEvent<HTMLInputElement>) {\n    if (this.input) {\n      this.input.emit(event);\n    }\n    this.handleValidation();\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> | any) {\n    if (this.blur) {\n      this.blur.emit(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement> | any) {\n    if (this.focus) {\n      this.focus.emit(event);\n    }\n  }\n  getDataList() {\n    const _list = this.dataList;\n    return Array.from(\n      (isArrayOfStrings(_list)\n        ? _list?.map((val: string) => ({\n            value: val,\n            label: undefined,\n          }))\n        : _list) || []\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._invalidMessage =\n      this.invalidMessage ||\n      this._ref?.validationMessage ||\n      DEFAULT_INVALID_MESSAGE;\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"invalidMessage\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._id) {\n      const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n      this._messageId = messageId;\n      this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n      this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n      this._dataListId =\n        this.dataListId ?? this._id + DEFAULT_DATALIST_ID_SUFFIX;\n      if (stringPropVisible(this.message, this.showMessage)) {\n        this._descByIds = messageId;\n      }\n    }\n  }\n\n  @Watch(\"_id\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  watch2Fn() {\n    this._value = this.value;\n  }\n\n  @Watch(\"value\")\n  watch2() {\n    this.watch2Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-input\");\n    const mId = this.id ?? `input-${uuid()}`;\n    this._id = mId;\n    this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n    this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n    this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n    this._dataListId = mId + DEFAULT_DATALIST_ID_SUFFIX;\n    this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;\n    this.watch0Fn();\n    this.watch1Fn();\n    this.watch2Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-input\", this.className)}\n        data-variant={this.variant}\n        data-hide-label={getHideProp(this.showLabel)}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-icon={this.icon}\n        data-icon-after={this.iconAfter}\n        data-hide-asterisk={getHideProp(this.showRequiredAsterisk)}\n        data-hide-icon-after={getHideProp(this.showIcon)}\n      >\n        <label htmlFor={this._id}>{this.label ?? DEFAULT_LABEL}</label>\n        <input\n          aria-invalid={this.validation === \"invalid\"}\n          data-custom-validity={this.validation}\n          data-field-sizing={this.fieldSizing}\n          ref={(el: any) => {\n            this._ref = el;\n          }}\n          id={this._id}\n          name={this.name}\n          type={this.type || \"text\"}\n          placeholder={this.placeholder ?? DEFAULT_PLACEHOLDER}\n          disabled={getBoolean(this.disabled, \"disabled\")}\n          required={getBoolean(this.required, \"required\")}\n          step={getNumber(this.step)}\n          value={this.value ?? this._value}\n          maxLength={getNumber(this.maxLength, this.maxlength)}\n          minLength={getNumber(this.minLength, this.minlength)}\n          max={getInputValue(this.max, this.type)}\n          min={getInputValue(this.min, this.type)}\n          readOnly={\n            getBoolean(this.readOnly, \"readOnly\") ||\n            getBoolean(this.readonly, \"readonly\")\n          }\n          form={this.form}\n          pattern={this.pattern}\n          size={this.size}\n          autoComplete={this.autocomplete}\n          autoFocus={getBoolean(this.autofocus, \"autofocus\")}\n          onInput={(event) => this.handleInput(event)}\n          onChange={(event) => this.handleChange(event)}\n          onBlur={(event) => this.handleBlur(event)}\n          onFocus={(event) => this.handleFocus(event)}\n          list={this.dataList && this._dataListId}\n          aria-describedby={this.ariaDescribedBy ?? this._descByIds}\n        />\n        {this.dataList ? (\n          <datalist id={this._dataListId}>\n            {this.getDataList()?.map((option) => (\n              <option\n                key={this._dataListId + \"-option-\" + option.value}\n                value={option.value}\n              >\n                {option.label}\n              </option>\n            ))}\n          </datalist>\n        ) : null}\n        <slot></slot>\n        {stringPropVisible(this.message, this.showMessage) ? (\n          <db-infotext\n            size=\"small\"\n            icon={this.messageIcon}\n            id={this._messageId}\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        </db-infotext>\n        <span data-visually-hidden=\"true\" role=\"status\">\n          {this._voiceOverFallback}\n        </span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,uBAAuB,EACvB,iCAAiC,EACjC,aAAa,EACb,yBAAyB,EACzB,mBAAmB,EACnB,qBAAqB,EACrB,+BAA+B,GAChC,MAAM,wBAAwB,CAAC;AAOhC,OAAO,EACL,GAAG,EACH,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,IAAI,GACL,MAAM,aAAa,CAAC;AAQrB,OAAO,EACL,SAAS,EACT,CAAC,EAED,KAAK,EACL,KAAK,EAEL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB;;;GAGG;AAIH,MAAM,OAAO,OAAO;IAHnB;QA4DU,QAAG,GAAG,SAAS,CAAC;QAChB,eAAU,GAAG,SAAS,CAAC;QACvB,oBAAe,GAAG,SAAS,CAAC;QAC5B,sBAAiB,GAAG,SAAS,CAAC;QAC9B,oBAAe,GAAG,SAAS,CAAC;QAC5B,gBAAW,GAAG,SAAS,CAAC;QACxB,eAAU,GAAG,SAAS,CAAC;QACvB,WAAM,GAAG,SAAS,CAAC;QACnB,uBAAkB,GAAG,EAAE,CAAC;KAkQlC;IAhQC,aAAa;;QACX,OAAO,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC;IAC9D,CAAC;IACD,gBAAgB;;QACd,wEAAwE;QACxE,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,KAAK,CAAA,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACzC,IAAI,CAAC,eAAe;gBAClB,IAAI,CAAC,cAAc;qBACnB,MAAA,IAAI,CAAC,IAAI,0CAAE,iBAAiB,CAAA;oBAC5B,uBAAuB,CAAC;YAC1B,IAAI,YAAY,EAAE,EAAE,CAAC;gBACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC;gBAC/C,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;aAAM,IACL,IAAI,CAAC,aAAa,EAAE;aACpB,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,KAAK,CAAA;YACzB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,EACnE,CAAC;YACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;YACvC,IAAI,YAAY,EAAE,EAAE,CAAC;gBACnB,IAAI,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,qBAAqB,CAAC;gBACrE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;aAAM,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,WAAW,CAAC,KAAmC;QAC7C,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IACD,YAAY,CAAC,KAAoC;QAC/C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IACD,UAAU,CAAC,KAA+C;QACxD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IACD,WAAW,CAAC,KAA+C;QACzD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IACD,WAAW;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC5B,OAAO,KAAK,CAAC,IAAI,CACf,CAAC,gBAAgB,CAAC,KAAK,CAAC;YACtB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC;gBAC3B,KAAK,EAAE,GAAG;gBACV,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;YACL,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CACjB,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,sBAAsB,CAC5B,OAAgC,EAChC,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,QAAQ;;QACN,IAAI,CAAC,eAAe;YAClB,IAAI,CAAC,cAAc;iBACnB,MAAA,IAAI,CAAC,IAAI,0CAAE,iBAAiB,CAAA;gBAC5B,uBAAuB,CAAC;IAC5B,CAAC;IAID,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,QAAQ;;QACN,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,yBAAyB,CAAC;YACvD,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,GAAG,+BAA+B,CAAC;YAClE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,GAAG,iCAAiC,CAAC;YACtE,IAAI,CAAC,WAAW;gBACd,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,GAAG,GAAG,0BAA0B,CAAC;YAC3D,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBACtD,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC9B,CAAC;YACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;IAC3B,CAAC;IAGD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QACnD,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,EAAE,mCAAI,SAAS,IAAI,EAAE,EAAE,CAAC;QACzC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,UAAU,GAAG,GAAG,GAAG,yBAAyB,CAAC;QAClD,IAAI,CAAC,eAAe,GAAG,GAAG,GAAG,+BAA+B,CAAC;QAC7D,IAAI,CAAC,iBAAiB,GAAG,GAAG,GAAG,iCAAiC,CAAC;QACjE,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,0BAA0B,CAAC;QACpD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,IAAI,uBAAuB,CAAC;QACtE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,kBACxB,IAAI,CAAC,OAAO,qBACT,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,oBAC5B,kBAAkB,CAChC,MAAA,IAAI,CAAC,eAAe,mCAAI,IAAI,CAAC,QAAQ,CACtC,eACU,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,IAAI,wBACpB,IAAI,CAAC,YAAY,wBACjB,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,6BACjC,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,CAAC;YAElE,8DAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,aAAa,CAAS;YAC/D,8EACgB,IAAI,CAAC,UAAU,KAAK,SAAS,0BACrB,IAAI,CAAC,UAAU,uBAClB,IAAI,CAAC,WAAW,EACnC,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;oBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;gBACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,EACzB,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAC/C,WAAW,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,mBAAmB,EACpD,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAC/C,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAC/C,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1B,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,MAAM,EAChC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EACpD,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EACpD,GAAG,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EACvC,GAAG,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EACvC,QAAQ,EACN,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;oBACrC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAEvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,sBACrB,MAAA,IAAI,CAAC,eAAe,mCAAI,IAAI,CAAC,UAAU,GACzD;YACD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,gBAAU,EAAE,EAAE,IAAI,CAAC,WAAW,IAC3B,MAAA,IAAI,CAAC,WAAW,EAAE,0CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACnC,cACE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC,KAAK,EACjD,KAAK,EAAE,MAAM,CAAC,KAAK,IAElB,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACO,CACZ,CAAC,CAAC,CAAC,IAAI;YACR,8DAAa;YACZ,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CACnD,mBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,EAAE,EAAE,IAAI,CAAC,UAAU,IAElB,IAAI,CAAC,OAAO,CACD,CACf,CAAC,CAAC,CAAC,IAAI;YACP,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CACtB,mBACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,YAAY,EACrB,EAAE,EAAE,IAAI,CAAC,eAAe,IAEvB,IAAI,CAAC,YAAY,IAAI,qBAAqB,CAC/B,CACf,CAAC,CAAC,CAAC,IAAI;YACR,oEACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAE,IAAI,CAAC,iBAAiB,IAEzB,IAAI,CAAC,eAAe,CACT;YACd,qFAA2B,MAAM,EAAC,IAAI,EAAC,QAAQ,IAC5C,IAAI,CAAC,kBAAkB,CACnB,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  DEFAULT_DATALIST_ID_SUFFIX,\n  DEFAULT_INVALID_MESSAGE,\n  DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n  DEFAULT_LABEL,\n  DEFAULT_MESSAGE_ID_SUFFIX,\n  DEFAULT_PLACEHOLDER,\n  DEFAULT_VALID_MESSAGE,\n  DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport {\n  ChangeEvent,\n  InputEvent,\n  InteractionEvent,\n  ValueLabelType,\n} from \"../../shared/model\";\nimport {\n  cls,\n  delay,\n  getBoolean,\n  getBooleanAsString,\n  getHideProp,\n  getInputValue,\n  getNumber,\n  hasVoiceOver,\n  isArrayOfStrings,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport { DBInputProps, DBInputState } 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-input\",\n})\nexport class DBInput {\n  private _ref!: HTMLInputElement | any;\n  @Prop() id: DBInputProps[\"id\"];\n  @Prop() invalidMessage: DBInputProps[\"invalidMessage\"];\n  @Prop() dataListId: DBInputProps[\"dataListId\"];\n  @Prop() message: DBInputProps[\"message\"];\n  @Prop() showMessage: DBInputProps[\"showMessage\"];\n  @Prop() value: DBInputProps[\"value\"];\n  @Prop() validMessage: DBInputProps[\"validMessage\"];\n  @Prop() validation: DBInputProps[\"validation\"];\n  @Prop() required: DBInputProps[\"required\"];\n  @Prop() minLength: DBInputProps[\"minLength\"];\n  @Prop() maxLength: DBInputProps[\"maxLength\"];\n  @Prop() pattern: DBInputProps[\"pattern\"];\n  @Event() input: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onInput\"]>[number]\n  > | void;\n  @Event() change: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onChange\"]>[number]\n  > | void;\n  @Event() blur: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onBlur\"]>[number]\n  > | void;\n  @Event() focus: EventEmitter<\n    Parameters<Required<DBInputProps>[\"onFocus\"]>[number]\n  > | void;\n  @Prop() dataList: DBInputProps[\"dataList\"];\n  @Prop({attribute: \"classname\"}) className: DBInputProps[\"className\"];\n  @Prop() variant: DBInputProps[\"variant\"];\n  @Prop() showLabel: DBInputProps[\"showLabel\"];\n  @Prop() showIconLeading: DBInputProps[\"showIconLeading\"];\n  @Prop() showIcon: DBInputProps[\"showIcon\"];\n  @Prop() iconLeading: DBInputProps[\"iconLeading\"];\n  @Prop() icon: DBInputProps[\"icon\"];\n  @Prop() iconTrailing: DBInputProps[\"iconTrailing\"];\n  @Prop() showRequiredAsterisk: DBInputProps[\"showRequiredAsterisk\"];\n  @Prop() showIconTrailing: DBInputProps[\"showIconTrailing\"];\n  @Prop() label: DBInputProps[\"label\"];\n  @Prop() fieldSizing: DBInputProps[\"fieldSizing\"];\n  @Prop() name: DBInputProps[\"name\"];\n  @Prop() type: DBInputProps[\"type\"];\n  @Prop() multiple: DBInputProps[\"multiple\"];\n  @Prop() placeholder: DBInputProps[\"placeholder\"];\n  @Prop() disabled: DBInputProps[\"disabled\"];\n  @Prop() step: DBInputProps[\"step\"];\n  @Prop() maxlength: DBInputProps[\"maxlength\"];\n  @Prop() minlength: DBInputProps[\"minlength\"];\n  @Prop() max: DBInputProps[\"max\"];\n  @Prop() min: DBInputProps[\"min\"];\n  @Prop() readOnly: DBInputProps[\"readOnly\"];\n  @Prop() readonly: DBInputProps[\"readonly\"];\n  @Prop() form: DBInputProps[\"form\"];\n  @Prop() size: DBInputProps[\"size\"];\n  @Prop() autocomplete: DBInputProps[\"autocomplete\"];\n  @Prop() autofocus: DBInputProps[\"autofocus\"];\n  @Prop() ariaDescribedBy: DBInputProps[\"ariaDescribedBy\"];\n  @Prop() messageIcon: DBInputProps[\"messageIcon\"];\n  @State() _id = undefined;\n  @State() _messageId = undefined;\n  @State() _validMessageId = undefined;\n  @State() _invalidMessageId = undefined;\n  @State() _invalidMessage = undefined;\n  @State() _dataListId = undefined;\n  @State() _descByIds = undefined;\n  @State() _value = undefined;\n  @State() _voiceOverFallback = \"\";\n\n  hasValidState() {\n    return !!(this.validMessage ?? this.validation === \"valid\");\n  }\n  handleValidation() {\n    /* For a11y reasons we need to map the correct message with the input */\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 = this._invalidMessage;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (\n      this.hasValidState() &&\n      this._ref?.validity.valid &&\n      (this.required || this.minLength || this.maxLength || this.pattern)\n    ) {\n      this._descByIds = this._validMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (stringPropVisible(this.message, this.showMessage)) {\n      this._descByIds = this._messageId;\n    } else {\n      this._descByIds = undefined;\n    }\n  }\n  handleInput(event: InputEvent<HTMLInputElement>) {\n    if (this.input) {\n      this.input.emit(event);\n    }\n    this.handleValidation();\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> | any) {\n    if (this.blur) {\n      this.blur.emit(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement> | any) {\n    if (this.focus) {\n      this.focus.emit(event);\n    }\n  }\n  getDataList() {\n    const _list = this.dataList;\n    return Array.from(\n      (isArrayOfStrings(_list)\n        ? _list?.map((val: string) => ({\n            value: val,\n            label: undefined,\n          }))\n        : _list) || []\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._invalidMessage =\n      this.invalidMessage ||\n      this._ref?.validationMessage ||\n      DEFAULT_INVALID_MESSAGE;\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"invalidMessage\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._id) {\n      const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n      this._messageId = messageId;\n      this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n      this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n      this._dataListId =\n        this.dataListId ?? this._id + DEFAULT_DATALIST_ID_SUFFIX;\n      if (stringPropVisible(this.message, this.showMessage)) {\n        this._descByIds = messageId;\n      }\n      this.handleValidation();\n    }\n  }\n\n  @Watch(\"_id\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  watch2Fn() {\n    this._value = this.value;\n  }\n\n  @Watch(\"value\")\n  watch2() {\n    this.watch2Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-input\");\n    const mId = this.id ?? `input-${uuid()}`;\n    this._id = mId;\n    this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n    this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n    this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n    this._dataListId = mId + DEFAULT_DATALIST_ID_SUFFIX;\n    this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;\n    this.watch0Fn();\n    this.watch1Fn();\n    this.watch2Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-input\", this.className)}\n        data-variant={this.variant}\n        data-hide-label={getHideProp(this.showLabel)}\n        data-show-icon={getBooleanAsString(\n          this.showIconLeading ?? this.showIcon\n        )}\n        data-icon={this.iconLeading ?? this.icon}\n        data-icon-trailing={this.iconTrailing}\n        data-hide-asterisk={getHideProp(this.showRequiredAsterisk)}\n        data-show-icon-trailing={getBooleanAsString(this.showIconTrailing)}\n      >\n        <label htmlFor={this._id}>{this.label ?? DEFAULT_LABEL}</label>\n        <input\n          aria-invalid={this.validation === \"invalid\"}\n          data-custom-validity={this.validation}\n          data-field-sizing={this.fieldSizing}\n          ref={(el: any) => {\n            this._ref = el;\n          }}\n          id={this._id}\n          name={this.name}\n          type={this.type || \"text\"}\n          multiple={getBoolean(this.multiple, \"multiple\")}\n          placeholder={this.placeholder ?? DEFAULT_PLACEHOLDER}\n          disabled={getBoolean(this.disabled, \"disabled\")}\n          required={getBoolean(this.required, \"required\")}\n          step={getNumber(this.step)}\n          value={this.value ?? this._value}\n          maxLength={getNumber(this.maxLength, this.maxlength)}\n          minLength={getNumber(this.minLength, this.minlength)}\n          max={getInputValue(this.max, this.type)}\n          min={getInputValue(this.min, this.type)}\n          readOnly={\n            getBoolean(this.readOnly, \"readOnly\") ||\n            getBoolean(this.readonly, \"readonly\")\n          }\n          form={this.form}\n          pattern={this.pattern}\n          size={this.size}\n          autoComplete={this.autocomplete}\n          autoFocus={getBoolean(this.autofocus, \"autofocus\")}\n          onInput={(event) => this.handleInput(event)}\n          onChange={(event) => this.handleChange(event)}\n          onBlur={(event) => this.handleBlur(event)}\n          onFocus={(event) => this.handleFocus(event)}\n          list={this.dataList && this._dataListId}\n          aria-describedby={this.ariaDescribedBy ?? this._descByIds}\n        />\n        {this.dataList ? (\n          <datalist id={this._dataListId}>\n            {this.getDataList()?.map((option) => (\n              <option\n                key={this._dataListId + \"-option-\" + option.value}\n                value={option.value}\n              >\n                {option.label}\n              </option>\n            ))}\n          </datalist>\n        ) : null}\n        <slot></slot>\n        {stringPropVisible(this.message, this.showMessage) ? (\n          <db-infotext\n            size=\"small\"\n            icon={this.messageIcon}\n            id={this._messageId}\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        </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/input/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/input/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM;IAChF,mCAAmC;IACnC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IAChD,mCAAmC;IACnC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';\nexport const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',\n// TODO: move this to own component\n'hidden', 'month', 'number', 'password', 'range',\n// TODO: move this to own component\n'search', 'tel', 'text', 'time', 'url', 'week'] as const;\nexport type InputTypeType = (typeof InputTypeList)[number];\nexport type DBInputDefaultProps = {\n  /**\n   * Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.\n   */\n  dataList?: string[] | ValueLabelType[];\n  /**\n   * Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.\n   */\n  dataListId?: string;\n  /**\n   * Maximum value\n   */\n  max?: number | string;\n  /**\n   * Minimum value\n   */\n  min?: number | string;\n\n  /**\n   * Pattern the value must match to be valid\n   */\n  pattern?: string;\n  /**\n   * \tType of form control\n   */\n  type?: InputTypeType | string;\n  /**\n   * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).\n   */\n  step?: number | string;\n};\nexport type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps & FormSizeProps;\nexport type DBInputDefaultState = {\n  _dataListId?: string;\n  getDataList: () => ValueLabelType[];\n};\nexport type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/input/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM;IAChF,mCAAmC;IACnC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IAChD,mCAAmC;IACnC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, ValueLabelType } from '../../shared/model';\nexport const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',\n// TODO: move this to own component\n'hidden', 'month', 'number', 'password', 'range',\n// TODO: move this to own component\n'search', 'tel', 'text', 'time', 'url', 'week'] as const;\nexport type InputTypeType = (typeof InputTypeList)[number];\nexport type DBInputDefaultProps = {\n  /**\n   * Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.\n   */\n  dataList?: string[] | ValueLabelType[];\n  /**\n   * Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.\n   */\n  dataListId?: string;\n  /**\n   * Allow selecting multiple files. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#multiple\n   */\n  multiple?: boolean | string;\n  /**\n   * Maximum value\n   */\n  max?: number | string;\n  /**\n   * Minimum value\n   */\n  min?: number | string;\n\n  /**\n   * Pattern the value must match to be valid\n   */\n  pattern?: string;\n  /**\n   * \tType of form control\n   */\n  type?: InputTypeType | string;\n  /**\n   * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).\n   */\n  step?: number | string;\n};\nexport type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconTrailingProps & FormMessageProps & ShowIconProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & FormSizeProps;\nexport type DBInputDefaultState = {\n  _dataListId?: string;\n  getDataList: () => ValueLabelType[];\n};\nexport type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState"]}