@db-ux/wc-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

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

@@ -57,7 +57,7 @@ export class DBDrawer {
                 if (this.dialogContainerRef) {
                     this.dialogContainerRef.hidden = true;
                 }
-                delay(() => {
+                void delay(() => {
                     var _a;
                     if (this.dialogContainerRef) {
                         this.dialogContainerRef.hidden = false;
@@ -126,11 +126,11 @@ export class DBDrawer {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'bde9fb000bc000b3371ab4e7333ec0b7e802a1d5', class: "db-drawer", id: this.id, ref: (el) => {
+        return (h("dialog", { key: 'd1a6b2f5c2a2baeffa2ad7b1b1b366dc6cc4ac34', class: "db-drawer", id: this.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: '62fb34f827d93c6a52e6dc79fb0970879b07dd72', class: cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: 'ab857ff08589d6e9cb1b7c77c0eaef433b1cb30d', class: cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: '81567140972ebb1f244c46227f688f017b2d74da', class: "db-drawer-header" }, h("div", { key: '14fe9424f88dd71bedc5b670edf7d776639ad65f', class: "db-drawer-header-text" }, h("slot", { key: 'e8f703b2d8c81c9e64996f6c8214ae004484698c', name: "drawerHeader" })), h("db-button", { key: '7f18727c2550a75ed735d11b8983b9b6bca0f1d4', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'e2b7f182c9f321f5477ee4669451e10935cae010', class: "db-drawer-content" }, h("slot", { key: '23bb4b8cf2c617757379637fab20361b6d4943f2' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: 'd0f1ea96c6826dd253c568dbc2f358acefe448ce', class: "db-drawer-header" }, h("div", { key: '78f28c5d595ecd9da5c0fc9b2dc38dcf1f67589c', class: "db-drawer-header-text" }, this.drawerHeaderPlain ? (this.drawerHeaderPlain) : (h("slot", { name: "drawerHeader" }))), h("db-button", { key: 'e79b4e31f09cc0481e06d866722c60f43d858559', class: "button-close-drawer", icon: "cross", variant: "ghost", type: "button", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)), h("div", { key: '44913afbc656fde966b0ba3006f8b30a71254198', class: "db-drawer-content" }, h("slot", { key: '83faa8b719f1fd4b30ca448cf9926ba15b1978fd' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -266,7 +266,7 @@ export class DBDrawer {
                 "mutable": false,
                 "complexType": {
                     "original": "DBDrawerProps[\"direction\"]",
-                    "resolved": "\"down\" | \"left\" | \"right\" | \"up\"",
+                    "resolved": "\"custom\" | \"down\" | \"left\" | \"right\" | \"up\"",
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
@@ -385,6 +385,31 @@ export class DBDrawer {
                 "setter": false,
                 "reflect": false
             },
+            "drawerHeaderPlain": {
+                "type": "string",
+                "attribute": "drawer-header-plain",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBDrawerProps[\"drawerHeaderPlain\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBDrawerProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/drawer/model.ts::DBDrawerProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "closeButtonId": {
                 "type": "string",
                 "attribute": "close-button-id",

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAI9E,OAAO,EACL,SAAS,EACT,CAAC,EAED,KAAK,EACL,KAAK,EAEL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB;;;GAGG;AAIH,MAAM,OAAO,QAAQ;IAHpB;QAqBU,gBAAW,GAAG,KAAK,CAAC;KA2L9B;IAzLC,WAAW,CACT,KAGQ,EACR,UAAoB;;QAEpB,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,eAAe,CAAwC,KAAK,CAAC,EAAE,CAAC;YAClE,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,UAAU,EAAE,CAAC;gBACf,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC;YACD,IACE,CAAA,MAAC,KAAK,CAAC,MAAc,0CAAE,QAAQ,MAAK,QAAQ;gBAC5C,KAAK,CAAC,IAAI,KAAK,OAAO;gBACtB,IAAI,CAAC,QAAQ,KAAK,MAAM,EACxB,CAAC;gBACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IACD,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC5B,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC5B,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,KAAK,CAAC;gBACzC,CAAC;gBACD,IACE,IAAI,CAAC,QAAQ,KAAK,UAAU;oBAC5B,IAAI,CAAC,QAAQ,KAAK,MAAM;oBACxB,IAAI,CAAC,OAAO,KAAK,QAAQ,EACzB,CAAC;oBACD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACnB,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACxB,CAAC;YACH,CAAC;YACD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC5B,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC5B,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,IAAI,CAAC;gBACxC,CAAC;gBACD,KAAK,CAAC,GAAG,EAAE;;oBACT,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;wBAC5B,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,KAAK,CAAC;oBACzC,CAAC;oBACD,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAC;gBACrB,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,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,QAAQ;QACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAGD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;YAClE,MAAM,UAAU,GAAG,IAAI,CAAC,IAAyB,CAAC;YAClD,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,CAAC;YACxC,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACrC,CAAC;QACH,CAAC;IACH,CAAC;IAKD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,+DACE,KAAK,EAAC,WAAW,EACjB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACjB,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,mBAC9B,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,oBACZ,IAAI,CAAC,SAAS,kBAChB,IAAI,CAAC,OAAO;YAE1B,gEACE,KAAK,EAAE,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,SAAS,CAAC,EACjD,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;oBACf,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;gBAC/B,CAAC,kBACa,IAAI,CAAC,OAAO,gBACd,IAAI,CAAC,KAAK,oBACN,IAAI,CAAC,SAAS,kBAChB,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;gBAE9C,+DAAQ,KAAK,EAAC,kBAAkB;oBAC9B,4DAAK,KAAK,EAAC,uBAAuB;wBAChC,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;oBACN,kEACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,IAEhD,MAAA,IAAI,CAAC,eAAe,mCAAI,oBAAoB,CACnC,CACL;gBACT,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,8DAAa,CACT,CACE,CACH,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DEFAULT_CLOSE_BUTTON } from \"../../shared/constants\";\nimport { ClickEvent, GeneralKeyboardEvent } from \"../../shared/model\";\nimport { cls, delay, getBooleanAsString, isKeyboardEvent } from \"../../utils\";\nimport { DBButton } from \"../button/button\";\nimport { DBDrawerProps, DBDrawerState } 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 drawerHeader - TODO: Add description for slotDrawerHeader\n */\n @Component({\n  tag: \"db-drawer\",\n})\nexport class DBDrawer {\n  private _ref!: HTMLDialogElement | any;\n  private dialogContainerRef!: HTMLDivElement | any;\n  @Prop() open: DBDrawerProps[\"open\"];\n  @Prop() position: DBDrawerProps[\"position\"];\n  @Event() close: EventEmitter<\n    Parameters<Required<DBDrawerProps>[\"onClose\"]>[number]\n  > | void;\n  @Prop() backdrop: DBDrawerProps[\"backdrop\"];\n  @Prop() variant: DBDrawerProps[\"variant\"];\n  @Prop() id: DBDrawerProps[\"id\"];\n  @Prop() direction: DBDrawerProps[\"direction\"];\n  @Prop({attribute: \"classname\"}) className: DBDrawerProps[\"className\"];\n  @Prop() spacing: DBDrawerProps[\"spacing\"];\n  @Prop() width: DBDrawerProps[\"width\"];\n  @Prop() rounded: DBDrawerProps[\"rounded\"];\n  @Prop() closeButtonId: DBDrawerProps[\"closeButtonId\"];\n  @Prop() closeButtonText: DBDrawerProps[\"closeButtonText\"];\n  @State() initialized = false;\n\n  handleClose(\n    event?:\n      | ClickEvent<HTMLButtonElement | HTMLDialogElement>\n      | GeneralKeyboardEvent<HTMLDialogElement>\n      | void,\n    forceClose?: boolean\n  ) {\n    if (!event) return;\n    if (isKeyboardEvent<HTMLButtonElement | HTMLDialogElement>(event)) {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        if (this.close) {\n          this.close.emit(event);\n        }\n      }\n    } else {\n      if (forceClose) {\n        event.stopPropagation();\n        if (this.close) {\n          this.close.emit(event);\n        }\n      }\n      if (\n        (event.target as any)?.nodeName === \"DIALOG\" &&\n        event.type === \"click\" &&\n        this.backdrop !== \"none\"\n      ) {\n        if (this.close) {\n          this.close.emit(event);\n        }\n      }\n    }\n  }\n  handleDialogOpen() {\n    if (this._ref) {\n      const open = Boolean(this.open);\n      if (open && !this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = false;\n        }\n        if (\n          this.position === \"absolute\" ||\n          this.backdrop === \"none\" ||\n          this.variant === \"inside\"\n        ) {\n          this._ref.show();\n        } else {\n          this._ref.showModal();\n        }\n      }\n      if (!open && this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = true;\n        }\n        delay(() => {\n          if (this.dialogContainerRef) {\n            this.dialogContainerRef.hidden = false;\n          }\n          this._ref?.close();\n        }, 401);\n      }\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    this.handleDialogOpen();\n  }\n\n  @Watch(\"open\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._ref && this.initialized && this.position === \"absolute\") {\n      const refElement = this._ref as HTMLDialogElement;\n      const parent = refElement.parentElement;\n      if (parent) {\n        parent.style.position = \"relative\";\n      }\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  @Watch(\"position\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-drawer\");\n    this.handleDialogOpen();\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <dialog\n        class=\"db-drawer\"\n        id={this.id}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        onClick={(event) => this.handleClose(event)}\n        onKeyDown={(event) => this.handleClose(event)}\n        data-position={this.position}\n        data-backdrop={this.backdrop}\n        data-direction={this.direction}\n        data-variant={this.variant}\n      >\n        <article\n          class={cls(\"db-drawer-container\", this.className)}\n          ref={(el: any) => {\n            this.dialogContainerRef = el;\n          }}\n          data-spacing={this.spacing}\n          data-width={this.width}\n          data-direction={this.direction}\n          data-rounded={getBooleanAsString(this.rounded)}\n        >\n          <header class=\"db-drawer-header\">\n            <div class=\"db-drawer-header-text\">\n              <slot name=\"drawerHeader\"></slot>\n            </div>\n            <db-button\n              class=\"button-close-drawer\"\n              icon=\"cross\"\n              variant=\"ghost\"\n              id={this.closeButtonId}\n              noText={true}\n              onClick={(event) => this.handleClose(event, true)}\n            >\n              {this.closeButtonText ?? DEFAULT_CLOSE_BUTTON}\n            </db-button>\n          </header>\n          <div class=\"db-drawer-content\">\n            <slot></slot>\n          </div>\n        </article>\n      </dialog>\n    );\n  }\n}\n"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DEFAULT_CLOSE_BUTTON } from \"../../shared/constants\";\nimport { ClickEvent, GeneralKeyboardEvent } from \"../../shared/model\";\nimport { cls, delay, getBooleanAsString, isKeyboardEvent } from \"../../utils\";\nimport { DBButton } from \"../button/button\";\nimport { DBDrawerProps, DBDrawerState } 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 drawerHeader - TODO: Add description for slotDrawerHeader\n */\n @Component({\n  tag: \"db-drawer\",\n})\nexport class DBDrawer {\n  private _ref!: HTMLDialogElement | any;\n  private dialogContainerRef!: HTMLDivElement | any;\n  @Prop() open: DBDrawerProps[\"open\"];\n  @Prop() position: DBDrawerProps[\"position\"];\n  @Event() close: EventEmitter<\n    Parameters<Required<DBDrawerProps>[\"onClose\"]>[number]\n  > | void;\n  @Prop() backdrop: DBDrawerProps[\"backdrop\"];\n  @Prop() variant: DBDrawerProps[\"variant\"];\n  @Prop() id: DBDrawerProps[\"id\"];\n  @Prop() direction: DBDrawerProps[\"direction\"];\n  @Prop({attribute: \"classname\"}) className: DBDrawerProps[\"className\"];\n  @Prop() spacing: DBDrawerProps[\"spacing\"];\n  @Prop() width: DBDrawerProps[\"width\"];\n  @Prop() rounded: DBDrawerProps[\"rounded\"];\n  @Prop() drawerHeaderPlain: DBDrawerProps[\"drawerHeaderPlain\"];\n  @Prop() closeButtonId: DBDrawerProps[\"closeButtonId\"];\n  @Prop() closeButtonText: DBDrawerProps[\"closeButtonText\"];\n  @State() initialized = false;\n\n  handleClose(\n    event?:\n      | ClickEvent<HTMLButtonElement | HTMLDialogElement>\n      | GeneralKeyboardEvent<HTMLDialogElement>\n      | void,\n    forceClose?: boolean\n  ) {\n    if (!event) return;\n    if (isKeyboardEvent<HTMLButtonElement | HTMLDialogElement>(event)) {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        if (this.close) {\n          this.close.emit(event);\n        }\n      }\n    } else {\n      if (forceClose) {\n        event.stopPropagation();\n        if (this.close) {\n          this.close.emit(event);\n        }\n      }\n      if (\n        (event.target as any)?.nodeName === \"DIALOG\" &&\n        event.type === \"click\" &&\n        this.backdrop !== \"none\"\n      ) {\n        if (this.close) {\n          this.close.emit(event);\n        }\n      }\n    }\n  }\n  handleDialogOpen() {\n    if (this._ref) {\n      const open = Boolean(this.open);\n      if (open && !this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = false;\n        }\n        if (\n          this.position === \"absolute\" ||\n          this.backdrop === \"none\" ||\n          this.variant === \"inside\"\n        ) {\n          this._ref.show();\n        } else {\n          this._ref.showModal();\n        }\n      }\n      if (!open && this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = true;\n        }\n        void delay(() => {\n          if (this.dialogContainerRef) {\n            this.dialogContainerRef.hidden = false;\n          }\n          this._ref?.close();\n        }, 401);\n      }\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    this.handleDialogOpen();\n  }\n\n  @Watch(\"open\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._ref && this.initialized && this.position === \"absolute\") {\n      const refElement = this._ref as HTMLDialogElement;\n      const parent = refElement.parentElement;\n      if (parent) {\n        parent.style.position = \"relative\";\n      }\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  @Watch(\"position\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-drawer\");\n    this.handleDialogOpen();\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <dialog\n        class=\"db-drawer\"\n        id={this.id}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        onClick={(event) => this.handleClose(event)}\n        onKeyDown={(event) => this.handleClose(event)}\n        data-position={this.position}\n        data-backdrop={this.backdrop}\n        data-direction={this.direction}\n        data-variant={this.variant}\n      >\n        <article\n          class={cls(\"db-drawer-container\", this.className)}\n          ref={(el: any) => {\n            this.dialogContainerRef = el;\n          }}\n          data-spacing={this.spacing}\n          data-width={this.width}\n          data-direction={this.direction}\n          data-rounded={getBooleanAsString(this.rounded)}\n        >\n          <header class=\"db-drawer-header\">\n            <div class=\"db-drawer-header-text\">\n              {this.drawerHeaderPlain ? (\n                this.drawerHeaderPlain\n              ) : (\n                <slot name=\"drawerHeader\"></slot>\n              )}\n            </div>\n            <db-button\n              class=\"button-close-drawer\"\n              icon=\"cross\"\n              variant=\"ghost\"\n              type=\"button\"\n              id={this.closeButtonId}\n              noText={true}\n              onClick={(event) => this.handleClose(event, true)}\n            >\n              {this.closeButtonText ?? DEFAULT_CLOSE_BUTTON}\n            </db-button>\n          </header>\n          <div class=\"db-drawer-content\">\n            <slot></slot>\n          </div>\n        </article>\n      </dialog>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 export const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
-export const DrawerDirectionList = ['left', 'right', 'up', 'down'];
+export const DrawerDirectionList = ['custom', 'left', 'right', 'up', 'down'];
 export const DrawerVariantList = ['modal', 'inside'];
 export const DrawerPositionList = ['fixed', 'absolute'];
 //# sourceMappingURL=model.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/drawer/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAU,CAAC;AAEnF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAU,CAAC;AAE5E,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAE9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU,CAAC","sourcesContent":["import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';\nexport const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'] as const;\nexport type DrawerBackdropType = (typeof DrawerBackdropList)[number];\nexport const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;\nexport type DrawerDirectionType = (typeof DrawerDirectionList)[number];\nexport const DrawerVariantList = ['modal', 'inside'] as const;\nexport type DrawerVariantType = (typeof DrawerVariantList)[number];\nexport const DrawerPositionList = ['fixed', 'absolute'] as const;\nexport type DrawerPositionType = (typeof DrawerPositionList)[number];\nexport type DBDrawerDefaultProps = {\n  /**\n   * The backdrop attribute changes the opacity of the backdrop.\n   * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`\n   */\n  backdrop?: DrawerBackdropType;\n  /**\n   * The direction attribute changes the position & animation of the drawer.\n   * E.g. \"left\" slides from left screen border to the right.\n   */\n  direction?: DrawerDirectionType;\n\n  /**\n   * Slot for changing the header of the drawer.\n   */\n  drawerHeader?: any;\n\n  /**\n   * The open attribute opens or closes the drawer based on the state.\n   */\n  open?: boolean | string;\n  /**\n   * The rounded attribute changes the border radius of the corners on the \"end\" of the drawer.\n   * The \"end\" depends on which direction you use.\n   */\n  rounded?: boolean | string;\n  /**\n   * Set the variant modal|inside. Defaults to modal.\n   */\n  variant?: DrawerVariantType;\n  /**\n   * The position attribute changes the css-position (fixed or absolute) of the drawer.\n   *\n   * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.\n   * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.\n   */\n  position?: DrawerPositionType;\n};\nexport type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;\nexport type DBDrawerDefaultState = {\n  handleDialogOpen: () => void;\n};\nexport type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/drawer/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAU,CAAC;AAEnF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAU,CAAC;AAEtF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAE9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU,CAAC","sourcesContent":["import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';\nexport const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'] as const;\nexport type DrawerBackdropType = (typeof DrawerBackdropList)[number];\nexport const DrawerDirectionList = ['custom', 'left', 'right', 'up', 'down'] as const;\nexport type DrawerDirectionType = (typeof DrawerDirectionList)[number];\nexport const DrawerVariantList = ['modal', 'inside'] as const;\nexport type DrawerVariantType = (typeof DrawerVariantList)[number];\nexport const DrawerPositionList = ['fixed', 'absolute'] as const;\nexport type DrawerPositionType = (typeof DrawerPositionList)[number];\nexport type DBDrawerDefaultProps = {\n  /**\n   * The backdrop attribute changes the opacity of the backdrop.\n   * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`\n   */\n  backdrop?: DrawerBackdropType;\n  /**\n   * The direction attribute changes the position & animation of the drawer.\n   * E.g. \"left\" slides from left screen border to the right.\n   */\n  direction?: DrawerDirectionType;\n\n  /**\n   * Slot for changing the header of the drawer.\n   */\n  drawerHeader?: any;\n\n  /**\n   * Text for changing the header of the drawer.\n   */\n  drawerHeaderPlain?: string;\n\n  /**\n   * The open attribute opens or closes the drawer based on the state.\n   */\n  open?: boolean | string;\n  /**\n   * The rounded attribute changes the border radius of the corners on the \"end\" of the drawer.\n   * The \"end\" depends on which direction you use.\n   */\n  rounded?: boolean | string;\n  /**\n   * Set the variant modal|inside. Defaults to modal.\n   */\n  variant?: DrawerVariantType;\n  /**\n   * The position attribute changes the css-position (fixed or absolute) of the drawer.\n   *\n   * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.\n   * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.\n   */\n  position?: DrawerPositionType;\n};\nexport type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;\nexport type DBDrawerDefaultState = {\n  handleDialogOpen: () => void;\n};\nexport type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState"]}

package/dist/collection/components/icon/icon.js

@@ -41,7 +41,7 @@ export class DBIcon {
         this.enableAttributePassing(this._ref, "db-icon");
     }
     render() {
-        return (h("span", { key: '3a67532009f85e493784e99774e230f52c588ccc', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (h("span", { key: 'be569cc6aff1ed4683701d1557f4569d0c6d341d', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : h("slot", null)));
     }

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

@@ -42,7 +42,7 @@ export class DBInfotext {
     }
     render() {
         var _a;
-        return (h("span", { key: 'c126d11d979284931006fa76b2a6a49e396f394c', class: cls("db-infotext", this.className), ref: (el) => {
+        return (h("span", { key: '9872eed41f083d37eb80ccad64f6288438466a7e', 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-show-icon-leading": getBooleanAsString((_a = this.showIcon) !== null && _a !== void 0 ? _a : true) }, this.text ? this.text : h("slot", null)));
     }

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

@@ -32,7 +32,7 @@ export class DBInput {
                     DEFAULT_INVALID_MESSAGE;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (this.hasValidState() &&
@@ -41,7 +41,7 @@ export class DBInput {
             this._descByIds = this._validMessageId;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = (_d = this.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (stringPropVisible(this.message, this.showMessage)) {
@@ -164,10 +164,10 @@ export class DBInput {
     }
     render() {
         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) => {
+        return (h("div", { key: '9c6664bf7695f11917a8c767399b29cdc6cf00a4', 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: '564344e11d9681081eca3c4c265f6e700a55e4af', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '8c56e7986857b4ae6412c44949574b4acae8928e', "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", 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)));
+                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: 'a6e42329bdcd1bd34246dcdf1245f47abb9b7621' }), 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: 'a92feb0f228acbfbf3b02c5353c3e29e31df7928', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'c62ed20bb826a7f346de6119a35afbef2f264a80', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-input"; }
     static get properties() {

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  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"]}
+{"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  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        void 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        void 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/link/link.js

@@ -42,7 +42,7 @@ export class DBLink {
     }
     render() {
         var _a;
-        return (h("a", { key: 'c76a9caf23e3efc45794fd4ef5b55ee7d228f500', class: cls("db-link", this.className), ref: (el) => {
+        return (h("a", { key: 'e560890067d6ac7e1aa1dadddc08e421d413cd11', class: cls("db-link", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, href: this.href, target: this.target, rel: this.rel, role: this.role, hrefLang: this.hreflang, "aria-disabled": getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_a = this.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap) }, this.text ? this.text : h("slot", null)));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/navigation/model.ts"],"names":[],"mappings":"","sourcesContent":["import { GlobalProps, GlobalState } from '../../shared/model';\nexport type DBNavigationDefaultProps = {};\nexport type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;\nexport type DBNavigationDefaultState = {};\nexport type DBNavigationState = DBNavigationDefaultState & GlobalState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/navigation/model.ts"],"names":[],"mappings":"","sourcesContent":["import { GlobalProps, GlobalState, InitializedState, NavigationItemGroupVariant, NavigationItemGroupVariantType, OverflowScrollButtonProps, OverflowScrollButtonState } from '../../shared/model';\nexport type DBNavigationDefaultProps = {\n  showTreeLine?: boolean | string;\n};\nexport type DBNavigationProps = DBNavigationDefaultProps & GlobalProps & OverflowScrollButtonProps & NavigationItemGroupVariant;\nexport type DBNavigationDefaultState = {\n  onScroll: () => void;\n  _variant?: NavigationItemGroupVariantType;\n  _shellDesktopPosition?: string | null;\n  _subNavigationDesktopPosition?: string | null;\n  _handleSubNavigation: () => void;\n  _isSubNavigation?: boolean;\n};\nexport type DBNavigationState = DBNavigationDefaultState & GlobalState & OverflowScrollButtonState & InitializedState"]}

package/dist/collection/components/navigation/navigation.js

@@ -1,5 +1,5 @@
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, uuid } from "../../utils";
+import { cls, delay, getBooleanAsString } from "../../utils";
+import { handleSubNavigationPosition } from "../../utils/navigation";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -7,7 +7,44 @@ import { h } from "@stencil/core";
  */
 export class DBNavigation {
     constructor() {
-        this._id = DEFAULT_ID;
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this._shellDesktopPosition = undefined;
+        this._subNavigationDesktopPosition = undefined;
+        this._variant = undefined;
+        this.initialized = false;
+        this._isSubNavigation = false;
+    }
+    evaluateScrollButtons(tList) {
+        const needsScroll = tList.scrollWidth > tList.clientWidth;
+        const scrollLeft = Math.ceil(tList.scrollLeft);
+        this.showScrollLeft = needsScroll && scrollLeft > 1;
+        this.showScrollRight =
+            needsScroll && scrollLeft < tList.scrollWidth - tList.clientWidth;
+    }
+    scroll(left) {
+        var _a;
+        let step = Number(this.arrowScrollDistance) || 100;
+        if (left) {
+            step *= -1;
+        }
+        (_a = this.menuRef) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            top: 0,
+            left: step,
+            behavior: "smooth",
+        });
+    }
+    onScroll() {
+        this.evaluateScrollButtons(this.menuRef);
+        this._handleSubNavigation();
+    }
+    _handleSubNavigation() {
+        handleSubNavigationPosition(this.menuRef, this._shellDesktopPosition === "left" ||
+            (this._shellDesktopPosition === "top" &&
+                this._subNavigationDesktopPosition === "left" &&
+                this._isSubNavigation)
+            ? 1
+            : 0);
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -41,18 +78,128 @@ export class DBNavigation {
             }
         }
     }
+    watch0Fn() {
+        if (this._ref && this.initialized) {
+            void delay(() => {
+                var _a, _b, _c, _d, _e;
+                const element = this._ref;
+                if (!element)
+                    return;
+                let endVariant = (_a = this.variant) !== null && _a !== void 0 ? _a : "popover";
+                const parentClassList = ((_b = element.parentElement) === null || _b === void 0 ? void 0 : _b.nodeName.startsWith("DB"))
+                    ? (_d = (_c = element.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.classList
+                    : (_e = element.parentElement) === null || _e === void 0 ? void 0 : _e.classList;
+                const shell = element.closest(".db-shell");
+                const shellDesktopPosition = shell === null || shell === void 0 ? void 0 : shell.getAttribute("data-control-panel-desktop-position");
+                const shellSubNaviDesktopPosition = shell === null || shell === void 0 ? void 0 : shell.getAttribute("data-sub-navigation-desktop-position");
+                this._shellDesktopPosition = shellDesktopPosition;
+                this._subNavigationDesktopPosition = shellSubNaviDesktopPosition;
+                const isSubNavigation = parentClassList === null || parentClassList === void 0 ? void 0 : parentClassList.contains("db-shell-sub-navigation");
+                this._isSubNavigation = isSubNavigation;
+                const requiresPopover = (shellDesktopPosition === "top" &&
+                    (parentClassList === null || parentClassList === void 0 ? void 0 : parentClassList.contains("db-control-panel-desktop-scroll-container"))) ||
+                    ((shellSubNaviDesktopPosition === "top" ||
+                        shellDesktopPosition === "left") &&
+                        isSubNavigation);
+                if (requiresPopover) {
+                    endVariant = "popover";
+                }
+                this._variant = endVariant;
+            }, 1);
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        var _a;
+        if (this.menuRef && this._variant) {
+            if (!this._variant || this._variant === "popover") {
+                this._handleSubNavigation();
+            }
+            else if (this._variant === "tree") {
+                for (const menu of Array.from(this.menuRef.querySelectorAll(".db-navigation-item-group-menu"))) {
+                    menu.style.position = "";
+                }
+                for (const navItem of Array.from(this.menuRef.querySelectorAll(".db-navigation-item, .db-navigation-item-group"))) {
+                    // TODO: Add keyboard navigation support
+                    navItem.setAttribute("role", "none");
+                    (_a = navItem.querySelector("a, button")) === null || _a === void 0 ? void 0 : _a.setAttribute("role", "treeitem");
+                }
+            }
+            this.evaluateScrollButtons(this.menuRef);
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-navigation");
-        this._id = this.id || "navigation-" + uuid();
+        this.initialized = true;
+        this.watch0Fn();
+        this.watch1Fn();
     }
     render() {
-        return (h("nav", { key: 'ed27159179b89985cbf0711be7dc494ca820cf75', class: cls("db-navigation", this.className), ref: (el) => {
+        var _a;
+        return (h("nav", { key: '3107723e96a604419f96e712778e5924fd3336cf', class: cls("db-navigation", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id }, h("menu", { key: '6aa518535f6c802abec874a174d6e8d028572269' }, h("slot", { key: '2307ee2093cf4bcec3c8f4b8d5e8e88a8d78cf08' }))));
+            }, id: this.id, "data-variant": this._variant, "data-show-tree-line": getBooleanAsString((_a = this.showTreeLine) !== null && _a !== void 0 ? _a : "true"), onScroll: () => this.onScroll() }, this.showScrollLeft ? (h("db-button", { class: "overflow-scroll-left-button", variant: "filled", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, h("menu", { key: 'fe0b919e9981a4fbdb5a5cdc86caf5d6ab754e77', role: this._variant === "tree" ? "tree" : undefined, ref: (el) => {
+                this.menuRef = el;
+            }, onScroll: () => this.onScroll() }, h("slot", { key: '2a4141b4b2d5f7845590fb00fda5f10c80ad1e3e' })), this.showScrollRight ? (h("db-button", { class: "overflow-scroll-right-button", variant: "filled", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null));
     }
     static get is() { return "db-navigation"; }
     static get properties() {
         return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationProps[\"variant\"]",
+                    "resolved": "\"popover\" | \"tree\"",
+                    "references": {
+                        "DBNavigationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation/model.ts::DBNavigationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "arrowScrollDistance": {
+                "type": "any",
+                "attribute": "arrow-scroll-distance",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationProps[\"arrowScrollDistance\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBNavigationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation/model.ts::DBNavigationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "id": {
                 "type": "string",
                 "attribute": "id",
@@ -78,6 +225,31 @@ export class DBNavigation {
                 "setter": false,
                 "reflect": false
             },
+            "showTreeLine": {
+                "type": "any",
+                "attribute": "show-tree-line",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationProps[\"showTreeLine\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBNavigationProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation/model.ts::DBNavigationProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "className": {
                 "type": "string",
                 "attribute": "classname",
@@ -107,8 +279,35 @@ export class DBNavigation {
     }
     static get states() {
         return {
-            "_id": {}
+            "showScrollLeft": {},
+            "showScrollRight": {},
+            "_shellDesktopPosition": {},
+            "_subNavigationDesktopPosition": {},
+            "_variant": {},
+            "initialized": {},
+            "_isSubNavigation": {}
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "_ref",
+                "methodName": "watch0"
+            }, {
+                "propName": "variant",
+                "methodName": "watch0"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch0"
+            }, {
+                "propName": "menuRef",
+                "methodName": "watch1"
+            }, {
+                "propName": "_variant",
+                "methodName": "watch1"
+            }, {
+                "propName": "_shellDesktopPosition",
+                "methodName": "watch1"
+            }];
+    }
 }
 //# sourceMappingURL=navigation.js.map