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

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

@@ -1,4 +1,4 @@
-import { cls, delay, getBooleanAsString, getHideProp, uuid } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
 import { isEventTargetNavigationItem, NavigationItemSafeTriangle, } from "../../utils/navigation";
 import { DEFAULT_BACK } from "../../shared/constants";
 import { h, Fragment, } from "@stencil/core";
@@ -25,8 +25,8 @@ export class DBNavigationItem {
         }
     }
     handleClick(event) {
-        if (this.onClick) {
-            this.onClick.emit(event);
+        if (this.click) {
+            this.click.emit(event);
         }
         if (this.hasAreaPopup) {
             this.isSubNavigationExpanded = true;
@@ -36,23 +36,6 @@ export class DBNavigationItem {
         event.stopPropagation();
         this.isSubNavigationExpanded = false;
     }
-    updateSubNavigationState() {
-        var _a;
-        if (this.initialized && document && this.subNavigationId) {
-            const subNavigationSlot = document === null || document === void 0 ? void 0 : document.getElementById(this.subNavigationId);
-            if (subNavigationSlot) {
-                if (((_a = subNavigationSlot.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    this.hasAreaPopup = true;
-                    if (!this.navigationItemSafeTriangle) {
-                        this.navigationItemSafeTriangle = new NavigationItemSafeTriangle(this._ref, subNavigationSlot);
-                    }
-                }
-                else {
-                    this.hasSubNavigation = false;
-                }
-            }
-        }
-    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -87,14 +70,28 @@ export class DBNavigationItem {
     }
     watch0Fn() {
         if (this.subNavigationExpanded !== undefined) {
-            this.isSubNavigationExpanded = !!this.subNavigationExpanded;
+            this.isSubNavigationExpanded = !!getBoolean(this.subNavigationExpanded, "subNavigationExpanded");
         }
     }
     watch0() {
         this.watch0Fn();
     }
     watch1Fn() {
-        this.updateSubNavigationState();
+        var _a;
+        if (this.initialized && this._ref) {
+            const subNavigationSlot = this._ref.querySelector("menu");
+            if (subNavigationSlot) {
+                if (((_a = subNavigationSlot.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    this.hasAreaPopup = true;
+                    if (!this.navigationItemSafeTriangle) {
+                        this.navigationItemSafeTriangle = new NavigationItemSafeTriangle(this._ref, subNavigationSlot);
+                    }
+                }
+                else {
+                    this.hasSubNavigation = false;
+                }
+            }
+        }
     }
     watch1() {
         this.watch1Fn();
@@ -107,19 +104,20 @@ export class DBNavigationItem {
     }
     render() {
         var _a;
-        return (h("li", { key: 'd62510082a330cd2bb32308e2996aa51549a549d', class: cls("db-navigation-item", this.className), ref: (el) => {
+        return (h("li", { key: '68adb01c52c89cbcbbc9246fdbf4ae95590b9e7a', class: cls("db-navigation-item", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-active": this.active, "aria-disabled": getBooleanAsString(this.disabled) }, !this.hasSubNavigation ? this.text ? this.text : h("slot", null) : null, this.hasSubNavigation ? (h(Fragment, null, h("button", { class: "db-navigation-item-expand-button", "aria-haspopup": this.hasAreaPopup, "aria-expanded": this.isSubNavigationExpanded, disabled: this.disabled, onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)), h("menu", { class: "db-sub-navigation", "data-auto-close": this.autoClose, id: this.subNavigationId, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (h("div", { class: "db-mobile-navigation-back" }, h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null, h("slot", { name: "subNavigation" })))) : null));
+            }, id: this.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-active": this.active, "aria-disabled": getBooleanAsString(this.disabled) }, !this.hasSubNavigation ? this.text ? this.text : h("slot", null) : null, this.hasSubNavigation ? (h(Fragment, null, h("button", { class: "db-navigation-item-expand-button", "aria-haspopup": this.hasAreaPopup, "aria-expanded": this.isSubNavigationExpanded, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)), h("menu", { class: "db-sub-navigation", "data-auto-close": this.autoClose, id: this.subNavigationId, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (h("div", { class: "db-mobile-navigation-back" }, h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null, h("slot", { name: "subNavigation" })))) : null));
     }
     static get is() { return "db-navigation-item"; }
     static get properties() {
         return {
             "subNavigationExpanded": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "sub-navigation-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"subNavigationExpanded\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNavigationItemProps": {
                             "location": "import",
@@ -136,11 +134,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sub-navigation-expanded",
                 "reflect": false
             },
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"id\"]",
@@ -161,11 +159,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"className\"]",
@@ -186,11 +184,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "width": {
                 "type": "string",
+                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"width\"]",
@@ -211,11 +209,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"icon\"]",
@@ -236,15 +234,15 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNavigationItemProps": {
                             "location": "import",
@@ -261,11 +259,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"active\"]",
@@ -286,15 +284,15 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNavigationItemProps": {
                             "location": "import",
@@ -311,11 +309,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"text\"]",
@@ -336,11 +334,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
             "backButtonId": {
                 "type": "string",
+                "attribute": "back-button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"backButtonId\"]",
@@ -361,11 +359,11 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "back-button-id",
                 "reflect": false
             },
             "backButtonText": {
                 "type": "string",
+                "attribute": "back-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNavigationItemProps[\"backButtonText\"]",
@@ -386,7 +384,6 @@ export class DBNavigationItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "back-button-text",
                 "reflect": false
             }
         };
@@ -404,8 +401,8 @@ export class DBNavigationItem {
     }
     static get events() {
         return [{
-                "method": "onClick",
-                "name": "onClick",
+                "method": "click",
+                "name": "click",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -427,6 +424,9 @@ export class DBNavigationItem {
             }, {
                 "propName": "initialized",
                 "methodName": "watch1"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch1"
             }];
     }
 }

package/dist/collection/components/navigation-item/navigation-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.js","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBNavigationItemProps, DBNavigationItemState } from \"./model\";\nimport { DBButton } from \"../button/button\";\nimport { cls, delay, getBooleanAsString, getHideProp, uuid } from \"../../utils\";\nimport {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle,\n} from \"../../utils/navigation\";\nimport { DEFAULT_BACK } from \"../../shared/constants\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot subNavigation - TODO: Add description for slotSubNavigation\n */\n @Component({\n  tag: \"db-navigation-item\",\n})\nexport class DBNavigationItem {\n  private _ref!: HTMLLIElement | null;\n  @Prop() subNavigationExpanded: DBNavigationItemProps[\"subNavigationExpanded\"];\n  @Event() onClick: any;\n  @Prop() id: DBNavigationItemProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNavigationItemProps[\"className\"];\n  @Prop() width: DBNavigationItemProps[\"width\"];\n  @Prop() icon: DBNavigationItemProps[\"icon\"];\n  @Prop() showIcon: DBNavigationItemProps[\"showIcon\"];\n  @Prop() active: DBNavigationItemProps[\"active\"];\n  @Prop() disabled: DBNavigationItemProps[\"disabled\"];\n  @Prop() text: DBNavigationItemProps[\"text\"];\n\n  @Prop() backButtonId: DBNavigationItemProps[\"backButtonId\"];\n  @Prop() backButtonText: DBNavigationItemProps[\"backButtonText\"];\n  @State() initialized = false;\n  @State() hasAreaPopup = false;\n  @State() hasSubNavigation = true;\n  @State() isSubNavigationExpanded = false;\n  @State() autoClose = false;\n  @State() subNavigationId = \"sub-navigation-\" + uuid();\n  @State() navigationItemSafeTriangle = undefined;\n\n  handleNavigationItemClick(event: unknown) {\n    if (isEventTargetNavigationItem(event)) {\n      this.autoClose = true;\n      delay(() => {\n        this.autoClose = false;\n      }, 300);\n    }\n  }\n  handleClick(event: ClickEvent<HTMLButtonElement>) {\n    if (this.onClick) {\n      this.onClick.emit(event);\n    }\n    if (this.hasAreaPopup) {\n      this.isSubNavigationExpanded = true;\n    }\n  }\n  handleBackClick(event: ClickEvent<HTMLButtonElement>) {\n    event.stopPropagation();\n    this.isSubNavigationExpanded = false;\n  }\n  updateSubNavigationState() {\n    if (this.initialized && document && this.subNavigationId) {\n      const subNavigationSlot = document?.getElementById(\n        this.subNavigationId\n      ) as HTMLMenuElement;\n      if (subNavigationSlot) {\n        if (subNavigationSlot.children?.length > 0) {\n          this.hasAreaPopup = true;\n          if (!this.navigationItemSafeTriangle) {\n            this.navigationItemSafeTriangle = new NavigationItemSafeTriangle(\n              this._ref,\n              subNavigationSlot\n            );\n          }\n        } else {\n          this.hasSubNavigation = false;\n        }\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    if (this.subNavigationExpanded !== undefined) {\n      this.isSubNavigationExpanded = !!this.subNavigationExpanded;\n    }\n  }\n\n  @Watch(\"subNavigationExpanded\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    this.updateSubNavigationState();\n  }\n\n  @Watch(\"initialized\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-navigation-item\");\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <li\n        class={cls(\"db-navigation-item\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        onMouseOver={() => this.navigationItemSafeTriangle?.enableFollow()}\n        onMouseLeave={() => this.navigationItemSafeTriangle?.disableFollow()}\n        onMouseMove={(event) =>\n          this.navigationItemSafeTriangle?.followByMouseEvent(event)\n        }\n        data-width={this.width}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-active={this.active}\n        aria-disabled={getBooleanAsString(this.disabled)}\n      >\n        {!this.hasSubNavigation ? this.text ? this.text : <slot></slot> : null}\n        {this.hasSubNavigation ? (\n          <Fragment>\n            <button\n              class=\"db-navigation-item-expand-button\"\n              aria-haspopup={this.hasAreaPopup}\n              aria-expanded={this.isSubNavigationExpanded}\n              disabled={this.disabled}\n              onClick={(event) => this.handleClick(event)}\n            >\n              {this.text ? this.text : <slot></slot>}\n            </button>\n            <menu\n              class=\"db-sub-navigation\"\n              data-auto-close={this.autoClose}\n              id={this.subNavigationId}\n              onClick={(event) => this.handleNavigationItemClick(event)}\n            >\n              {this.hasAreaPopup ? (\n                <div class=\"db-mobile-navigation-back\">\n                  <db-button\n                    icon=\"arrow_left\"\n                    variant=\"ghost\"\n                    id={this.backButtonId}\n                    onClick={(event) => this.handleBackClick(event)}\n                  >\n                    {this.backButtonText ?? DEFAULT_BACK}\n                  </db-button>\n                </div>\n              ) : null}\n              <slot name=\"subNavigation\"></slot>\n            </menu>\n          </Fragment>\n        ) : null}\n      </li>\n    );\n  }\n}\n"]}
+{"version":3,"file":"navigation-item.js","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBNavigationItemProps, DBNavigationItemState } from \"./model\";\nimport { DBButton } from \"../button/button\";\nimport {\n  cls,\n  delay,\n  getBoolean,\n  getBooleanAsString,\n  getHideProp,\n  uuid,\n} from \"../../utils\";\nimport {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle,\n} from \"../../utils/navigation\";\nimport { DEFAULT_BACK } from \"../../shared/constants\";\nimport { ClickEvent } from \"../../shared/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 subNavigation - TODO: Add description for slotSubNavigation\n */\n @Component({\n  tag: \"db-navigation-item\",\n})\nexport class DBNavigationItem {\n  private _ref!: HTMLLIElement | any;\n  @Prop() subNavigationExpanded: DBNavigationItemProps[\"subNavigationExpanded\"];\n  @Event() click: EventEmitter<\n    Parameters<Required<DBNavigationItemProps>[\"onClick\"]>[number]\n  > | void;\n  @Prop() id: DBNavigationItemProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNavigationItemProps[\"className\"];\n  @Prop() width: DBNavigationItemProps[\"width\"];\n  @Prop() icon: DBNavigationItemProps[\"icon\"];\n  @Prop() showIcon: DBNavigationItemProps[\"showIcon\"];\n  @Prop() active: DBNavigationItemProps[\"active\"];\n  @Prop() disabled: DBNavigationItemProps[\"disabled\"];\n  @Prop() text: DBNavigationItemProps[\"text\"];\n  @Prop() backButtonId: DBNavigationItemProps[\"backButtonId\"];\n  @Prop() backButtonText: DBNavigationItemProps[\"backButtonText\"];\n  @State() initialized = false;\n  @State() hasAreaPopup = false;\n  @State() hasSubNavigation = true;\n  @State() isSubNavigationExpanded = false;\n  @State() autoClose = false;\n  @State() subNavigationId = \"sub-navigation-\" + uuid();\n  @State() navigationItemSafeTriangle = undefined;\n\n  handleNavigationItemClick(event: unknown) {\n    if (isEventTargetNavigationItem(event)) {\n      this.autoClose = true;\n      delay(() => {\n        this.autoClose = false;\n      }, 300);\n    }\n  }\n  handleClick(event: ClickEvent<HTMLButtonElement> | any) {\n    if (this.click) {\n      this.click.emit(event);\n    }\n    if (this.hasAreaPopup) {\n      this.isSubNavigationExpanded = true;\n    }\n  }\n  handleBackClick(event: ClickEvent<HTMLButtonElement> | any) {\n    event.stopPropagation();\n    this.isSubNavigationExpanded = false;\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.subNavigationExpanded !== undefined) {\n      this.isSubNavigationExpanded = !!getBoolean(\n        this.subNavigationExpanded,\n        \"subNavigationExpanded\"\n      );\n    }\n  }\n\n  @Watch(\"subNavigationExpanded\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this.initialized && this._ref) {\n      const subNavigationSlot = this._ref.querySelector(\"menu\");\n      if (subNavigationSlot) {\n        if (subNavigationSlot.children?.length > 0) {\n          this.hasAreaPopup = true;\n          if (!this.navigationItemSafeTriangle) {\n            this.navigationItemSafeTriangle = new NavigationItemSafeTriangle(\n              this._ref,\n              subNavigationSlot\n            );\n          }\n        } else {\n          this.hasSubNavigation = false;\n        }\n      }\n    }\n  }\n\n  @Watch(\"initialized\")\n  @Watch(\"_ref\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-navigation-item\");\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <li\n        class={cls(\"db-navigation-item\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        onMouseOver={() => this.navigationItemSafeTriangle?.enableFollow()}\n        onMouseLeave={() => this.navigationItemSafeTriangle?.disableFollow()}\n        onMouseMove={(event) =>\n          this.navigationItemSafeTriangle?.followByMouseEvent(event)\n        }\n        data-width={this.width}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-active={this.active}\n        aria-disabled={getBooleanAsString(this.disabled)}\n      >\n        {!this.hasSubNavigation ? this.text ? this.text : <slot></slot> : null}\n        {this.hasSubNavigation ? (\n          <Fragment>\n            <button\n              class=\"db-navigation-item-expand-button\"\n              aria-haspopup={this.hasAreaPopup}\n              aria-expanded={this.isSubNavigationExpanded}\n              disabled={getBoolean(this.disabled, \"disabled\")}\n              onClick={(event) => this.handleClick(event)}\n            >\n              {this.text ? this.text : <slot></slot>}\n            </button>\n            <menu\n              class=\"db-sub-navigation\"\n              data-auto-close={this.autoClose}\n              id={this.subNavigationId}\n              onClick={(event) => this.handleNavigationItemClick(event)}\n            >\n              {this.hasAreaPopup ? (\n                <div class=\"db-mobile-navigation-back\">\n                  <db-button\n                    icon=\"arrow_left\"\n                    variant=\"ghost\"\n                    id={this.backButtonId}\n                    onClick={(event) => this.handleBackClick(event)}\n                  >\n                    {this.backButtonText ?? DEFAULT_BACK}\n                  </db-button>\n                </div>\n              ) : null}\n              <slot name=\"subNavigation\"></slot>\n            </menu>\n          </Fragment>\n        ) : null}\n      </li>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/notification/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,QAAQ,EAAE,YAAY,EAAE,SAAS,CAAU,CAAC;AAEpF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAExE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC","sourcesContent":["import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';\nexport const NotificationVariantList = ['docked', 'standalone', 'overlay'] as const;\nexport type NotificationVariantType = (typeof NotificationVariantList)[number];\nexport const NotificationLinkVariantList = ['block', 'inline'] as const;\nexport type NotificationLinkVariantType = (typeof NotificationLinkVariantList)[number];\nexport const NotificationAriaLiveList = ['assertive', 'polite', 'off'] as const;\nexport type NotificationAriaLiveType = (typeof NotificationAriaLiveList)[number];\nexport type DBNotificationDefaultProps = {\n  /**\n   * The arialive attribute will lead to that the screenreader interrupts immediately\n   * and reads out the notification if set to \"assertive\", while it will wait for the\n   * user's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)\n   */\n  ariaLive?: NotificationAriaLiveType;\n\n  /**\n   * The closeable attribute shows/hides the close button on the top right.\n   */\n  closeable?: boolean;\n\n  /**\n   * The headline attribute changes the text of the bold headline.\n   */\n  headline?: string | any;\n\n  /**\n   * The slotImage can be set instead of an icon.\n   */\n  image?: any;\n\n  /**\n   * The slotLink can be set for non overlay-notifications\n   */\n  link?: any;\n\n  /**\n   * The linkVariant will be used if slotLink is set.\n   */\n  linkVariant?: NotificationLinkVariantType;\n\n  /**\n   * Enables or disables the visibility of the headline.\n   */\n  showHeadline?: boolean;\n\n  /**\n   * The timestamp attribute can be set for overlay notifications\n   */\n  timestamp?: string;\n\n  /**\n   * Enables or disables the visibility of the timestamp.\n   */\n  showTimestamp?: boolean;\n\n  /**\n   * The variant attribute changes the styling of the notification.\n   * The docked notifications are used e.g. between header and main content to show a global alert.\n   * The standalone notifications are used  e.g. inside a form to show an alert for a specific field.\n   * The overlay notifications are used for absolute and floating notifications like snackbars etc.\n   */\n  variant?: NotificationVariantType;\n};\nexport type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;\nexport type DBNotificationDefaultState = {};\nexport type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/notification/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,QAAQ,EAAE,YAAY,EAAE,SAAS,CAAU,CAAC;AAEpF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAExE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC","sourcesContent":["import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';\nexport const NotificationVariantList = ['docked', 'standalone', 'overlay'] as const;\nexport type NotificationVariantType = (typeof NotificationVariantList)[number];\nexport const NotificationLinkVariantList = ['block', 'inline'] as const;\nexport type NotificationLinkVariantType = (typeof NotificationLinkVariantList)[number];\nexport const NotificationAriaLiveList = ['assertive', 'polite', 'off'] as const;\nexport type NotificationAriaLiveType = (typeof NotificationAriaLiveList)[number];\nexport type DBNotificationDefaultProps = {\n  /**\n   * The arialive attribute will lead to that the screenreader interrupts immediately\n   * and reads out the notification if set to \"assertive\", while it will wait for the\n   * user's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)\n   */\n  ariaLive?: NotificationAriaLiveType;\n\n  /**\n   * The closeable attribute shows/hides the close button on the top right.\n   */\n  closeable?: boolean | string;\n\n  /**\n   * The headline attribute changes the text of the bold headline.\n   */\n  headline?: string | any;\n\n  /**\n   * The slotImage can be set instead of an icon.\n   */\n  image?: any;\n\n  /**\n   * The slotLink can be set for non overlay-notifications\n   */\n  link?: any;\n\n  /**\n   * The linkVariant will be used if slotLink is set.\n   */\n  linkVariant?: NotificationLinkVariantType;\n\n  /**\n   * Enables or disables the visibility of the headline.\n   */\n  showHeadline?: boolean | string;\n\n  /**\n   * The timestamp attribute can be set for overlay notifications\n   */\n  timestamp?: string;\n\n  /**\n   * Enables or disables the visibility of the timestamp.\n   */\n  showTimestamp?: boolean | string;\n\n  /**\n   * The variant attribute changes the styling of the notification.\n   * The docked notifications are used e.g. between header and main content to show a global alert.\n   * The standalone notifications are used  e.g. inside a form to show an alert for a specific field.\n   * The overlay notifications are used for absolute and floating notifications like snackbars etc.\n   */\n  variant?: NotificationVariantType;\n};\nexport type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;\nexport type DBNotificationDefaultState = {};\nexport type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState"]}

package/dist/collection/components/notification/notification.js

@@ -1,6 +1,6 @@
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, getHideProp, stringPropVisible } from "../../utils";
-import { h } from "@stencil/core";
+import { cls, getBoolean, getHideProp, stringPropVisible } from "../../utils";
+import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot image - TODO: Add description for slotImage
@@ -8,8 +8,8 @@ import { h } from "@stencil/core";
  */
 export class DBNotification {
     handleClose(event) {
-        if (this.onClose) {
-            this.onClose.emit();
+        if (this.close) {
+            this.close.emit(event);
         }
     }
     /**
@@ -49,15 +49,16 @@ export class DBNotification {
     }
     render() {
         var _a;
-        return (h("article", { key: '687caef11f1936276ea751c770a202132d7ff823', class: cls("db-notification", this.className), ref: (el) => {
+        return (h("article", { key: '8414ca3cc8174665ead2bbb3909ab284e2ed10a7', class: cls("db-notification", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '8b8fe272272196ebf585a0b3166c27fdf8a81c0a', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: '57f127bde56e0ea9ecebf371f2119c4b5b6c0e50' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: 'ab7ddf6617b5df95984d2d7dc21ef6dd517981fc', name: "link" }), this.closeable ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
+            }, id: this.id, "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '3dd88ff01aeb1df74303758c5b640d29e48fe1a2', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: 'b511ed5d3edf911738e64ee1f5fa0191d6417c9d' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: '9387333f08d42da3bfddf96c6ccab00f314631de', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
     }
     static get is() { return "db-notification"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"id\"]",
@@ -78,11 +79,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"className\"]",
@@ -103,11 +104,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "ariaLive": {
                 "type": "string",
+                "attribute": "aria-live",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"ariaLive\"]",
@@ -128,11 +129,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-live",
                 "reflect": false
             },
             "semantic": {
                 "type": "string",
+                "attribute": "semantic",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"semantic\"]",
@@ -153,11 +154,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "semantic",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"variant\"]",
@@ -178,11 +179,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"icon\"]",
@@ -203,15 +204,15 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNotificationProps": {
                             "location": "import",
@@ -228,11 +229,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "linkVariant": {
                 "type": "string",
+                "attribute": "link-variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"linkVariant\"]",
@@ -253,11 +254,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "link-variant",
                 "reflect": false
             },
             "headline": {
                 "type": "any",
+                "attribute": "headline",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"headline\"]",
@@ -278,15 +279,15 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "headline",
                 "reflect": false
             },
             "showHeadline": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-headline",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"showHeadline\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNotificationProps": {
                             "location": "import",
@@ -303,11 +304,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-headline",
                 "reflect": false
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"text\"]",
@@ -328,11 +329,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
             "timestamp": {
                 "type": "string",
+                "attribute": "timestamp",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"timestamp\"]",
@@ -353,15 +354,15 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "timestamp",
                 "reflect": false
             },
             "showTimestamp": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-timestamp",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"showTimestamp\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNotificationProps": {
                             "location": "import",
@@ -378,15 +379,15 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-timestamp",
                 "reflect": false
             },
             "closeable": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "closeable",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"closeable\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBNotificationProps": {
                             "location": "import",
@@ -403,11 +404,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "closeable",
                 "reflect": false
             },
             "closeButtonId": {
                 "type": "string",
+                "attribute": "close-button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"closeButtonId\"]",
@@ -428,11 +429,11 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button-id",
                 "reflect": false
             },
             "closeButtonText": {
                 "type": "string",
+                "attribute": "close-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBNotificationProps[\"closeButtonText\"]",
@@ -453,15 +454,14 @@ export class DBNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button-text",
                 "reflect": false
             }
         };
     }
     static get events() {
         return [{
-                "method": "onClose",
-                "name": "onClose",
+                "method": "close",
+                "name": "close",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,