@db-ux/wc-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell-ed0ed7c

package/dist/esm/db-navigation-item-group.entry.js

@@ -0,0 +1,157 @@
+import { r as registerInstance, c as createEvent, h } from './index-uOzX56mL.js';
+import { n as DEFAULT_BACK } from './constants-Dst8dqRS.js';
+import { u as uuid, d as delay, b as getBoolean, g as getBooleanAsString, j as getHideProp, c as cls } from './index-YECpAE3G.js';
+import { h as handleSubNavigationPosition, N as NavigationItemSafeTriangle } from './navigation-CJ-OxodG.js';
+import './floating-components-D3kmGlOI.js';
+
+const DBNavigationItemGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "click");
+        this.hasSubNavigation = true;
+        this.isSubNavigationExpanded = false;
+        this.autoClose = false;
+        this.hasPopup = false;
+        this.initialized = false;
+        this.subNavigationId = "db-navigation-item-group-menu-" + uuid();
+        this.navigationItemSafeTriangle = undefined;
+    }
+    onScroll() {
+        if (this.hasPopup) {
+            handleSubNavigationPosition(this._ref);
+        }
+    }
+    handleNavigationItemClick(event) {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
+            this.forceClose();
+        }
+    }
+    forceClose() {
+        this.autoClose = true;
+        void delay(() => {
+            this.autoClose = false;
+        }, 300);
+    }
+    handleClick(event) {
+        if (this.click) {
+            event.stopPropagation();
+            this.click.emit(event);
+        }
+        this.isSubNavigationExpanded = !this.isSubNavigationExpanded;
+    }
+    handleBackClick(event) {
+        event.stopPropagation();
+        this.isSubNavigationExpanded = false;
+    }
+    handleEscape(event) {
+        if (!event || event.key === "Escape") {
+            this.forceClose();
+            this._buttonRef.blur();
+        }
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        if (this.expanded !== undefined) {
+            this.isSubNavigationExpanded = !!getBoolean(this.expanded, "subNavigationExpanded");
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this._ref && this.initialized) {
+            this.initialized = false;
+            // We delay this because the navigation variant check is delayed as well
+            void delay(() => {
+                const element = this._ref;
+                const nav = element.closest(".db-navigation");
+                this.hasPopup =
+                    !nav ||
+                        !nav.dataset["variant"] ||
+                        nav.dataset["variant"] === "popover";
+            }, 200);
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this._ref &&
+            this._buttonRef &&
+            this._menuRef &&
+            this.hasPopup &&
+            !this.navigationItemSafeTriangle) {
+            void delay(() => {
+                this.navigationItemSafeTriangle = new NavigationItemSafeTriangle(this._ref, this._menuRef);
+            }, 1);
+            ["mouseenter", "focusin"].forEach((event) => {
+                this._ref.addEventListener(event, () => handleSubNavigationPosition(this._menuRef));
+            });
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-navigation-item-group");
+        this.initialized = true;
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
+    render() {
+        var _a;
+        return (h("li", { key: '0feb40fc1eb885450f2f61aab591b3d05aa2eb0d', class: cls("db-navigation-item-group", 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); }, onKeyDown: (event) => this.handleEscape(event), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon), "data-active": this.active, "aria-disabled": getBooleanAsString(this.disabled) }, h("button", { key: '5bd2b1dcfb1a30e4ffce5ec597a8caef7c7b2a1f', class: "db-navigation-item-group-expand-button", type: "button", ref: (el) => {
+                this._buttonRef = el;
+            }, "aria-haspopup": getBooleanAsString(this.hasPopup ? true : undefined), "aria-owns": this.hasPopup ? undefined : this.subNavigationId, "aria-expanded": getBooleanAsString(this.isSubNavigationExpanded), disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text, h("slot", { key: '0af1cd7b5f6734de52b5abcf7af50f3052e1b242', name: "additionalInformation" })), h("menu", { key: '54c731d61026b1d0897e46da7e9820e971720a4f', class: "db-navigation-item-group-menu", role: "group", ref: (el) => {
+                this._menuRef = el;
+            }, "data-force-close": getBooleanAsString(this.autoClose), id: this.subNavigationId, onScroll: () => this.onScroll(), onClick: (event) => this.handleNavigationItemClick(event) }, h("div", { key: 'c20e8df3f651f7aeaeb2f61a2e1feba3f511dbcc', class: "db-navigation-item-group-back-button" }, h("db-button", { key: 'fe353a18a5f38c52e1d03d5ed5f3b239dabd25ad', icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK)), h("slot", { key: 'd06eb8d06cf68f06dbad2443c664b6ddfb5e533b' }))));
+    }
+    static get watchers() { return {
+        "expanded": ["watch0"],
+        "_ref": ["watch1", "watch2"],
+        "initialized": ["watch1"],
+        "_menuRef": ["watch2"],
+        "_buttonRef": ["watch2"],
+        "hasPopup": ["watch2"]
+    }; }
+};
+
+export { DBNavigationItemGroup as db_navigation_item_group };
+//# sourceMappingURL=db-navigation-item-group.entry.js.map
+
+//# sourceMappingURL=db-navigation-item-group.entry.js.map

package/dist/esm/db-navigation-item-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"db-navigation-item-group.entry.js","sources":["src/components/navigation-item-group/navigation-item-group.tsx"],"sourcesContent":["import { DEFAULT_BACK } from \"../../shared/constants\";\nimport { ClickEvent } from \"../../shared/model\";\nimport {\n  cls,\n  delay,\n  getBoolean,\n  getBooleanAsString,\n  getHideProp,\n  uuid,\n} from \"../../utils\";\nimport {\n  handleSubNavigationPosition,\n  NavigationItemSafeTriangle,\n} from \"../../utils/navigation\";\nimport { DBButton } from \"../button/button\";\nimport {\n  DBNavigationItemGroupProps,\n  DBNavigationItemGroupState,\n} 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 additionalInformation - TODO: Add description for slotAdditionalInformation\n */\n @Component({\n  tag: \"db-navigation-item-group\",\n})\nexport class DBNavigationItemGroup {\n  private _ref!: HTMLLIElement | any;\n  private _menuRef!: HTMLElement | any;\n  private _buttonRef!: HTMLButtonElement | any;\n  @Prop() expanded: DBNavigationItemGroupProps[\"expanded\"];\n  @Event() click: EventEmitter<\n    Parameters<Required<DBNavigationItemGroupProps>[\"onClick\"]>[number]\n  > | void;\n  @Prop() id: DBNavigationItemGroupProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNavigationItemGroupProps[\"className\"];\n  @Prop() icon: DBNavigationItemGroupProps[\"icon\"];\n  @Prop() showIcon: DBNavigationItemGroupProps[\"showIcon\"];\n  @Prop() active: DBNavigationItemGroupProps[\"active\"];\n  @Prop() disabled: DBNavigationItemGroupProps[\"disabled\"];\n  @Prop() text: DBNavigationItemGroupProps[\"text\"];\n  @Prop() backButtonId: DBNavigationItemGroupProps[\"backButtonId\"];\n  @Prop() backButtonText: DBNavigationItemGroupProps[\"backButtonText\"];\n  @State() hasSubNavigation = true;\n  @State() isSubNavigationExpanded = false;\n  @State() autoClose = false;\n  @State() hasPopup = false;\n  @State() initialized = false;\n  @State() subNavigationId = \"db-navigation-item-group-menu-\" + uuid();\n  @State() navigationItemSafeTriangle = undefined;\n\n  onScroll() {\n    if (this.hasPopup) {\n      handleSubNavigationPosition(this._ref);\n    }\n  }\n  handleNavigationItemClick(event: any) {\n    if (event?.target?.nodeName === \"A\") {\n      this.forceClose();\n    }\n  }\n  forceClose() {\n    this.autoClose = true;\n    void delay(() => {\n      this.autoClose = false;\n    }, 300);\n  }\n  handleClick(event: ClickEvent<HTMLButtonElement> | any) {\n    if (this.click) {\n      event.stopPropagation();\n      this.click.emit(event);\n    }\n    this.isSubNavigationExpanded = !this.isSubNavigationExpanded;\n  }\n  handleBackClick(event: ClickEvent<HTMLButtonElement> | any) {\n    event.stopPropagation();\n    this.isSubNavigationExpanded = false;\n  }\n  handleEscape(event: any) {\n    if (!event || event.key === \"Escape\") {\n      this.forceClose();\n      this._buttonRef.blur();\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.expanded !== undefined) {\n      this.isSubNavigationExpanded = !!getBoolean(\n        this.expanded,\n        \"subNavigationExpanded\"\n      );\n    }\n  }\n\n  @Watch(\"expanded\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._ref && this.initialized) {\n      this.initialized = false;\n      // We delay this because the navigation variant check is delayed as well\n      void delay(() => {\n        const element = this._ref as HTMLLIElement;\n        const nav = element.closest<HTMLElement>(\".db-navigation\");\n        this.hasPopup =\n          !nav ||\n          !nav.dataset[\"variant\"] ||\n          nav.dataset[\"variant\"] === \"popover\";\n      }, 200);\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  watch2Fn() {\n    if (\n      this._ref &&\n      this._buttonRef &&\n      this._menuRef &&\n      this.hasPopup &&\n      !this.navigationItemSafeTriangle\n    ) {\n      void delay(() => {\n        this.navigationItemSafeTriangle = new NavigationItemSafeTriangle(\n          this._ref,\n          this._menuRef\n        );\n      }, 1);\n      [\"mouseenter\", \"focusin\"].forEach((event) => {\n        this._ref.addEventListener(event, () =>\n          handleSubNavigationPosition(this._menuRef)\n        );\n      });\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"_menuRef\")\n  @Watch(\"_buttonRef\")\n  @Watch(\"hasPopup\")\n  watch2() {\n    this.watch2Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-navigation-item-group\");\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n    this.watch2Fn();\n  }\n\n  render() {\n    return (\n      <li\n        class={cls(\"db-navigation-item-group\", 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        onKeyDown={(event) => this.handleEscape(event)}\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        <button\n          class=\"db-navigation-item-group-expand-button\"\n          type=\"button\"\n          ref={(el: any) => {\n            this._buttonRef = el;\n          }}\n          aria-haspopup={getBooleanAsString(this.hasPopup ? true : undefined)}\n          aria-owns={this.hasPopup ? undefined : this.subNavigationId}\n          aria-expanded={getBooleanAsString(this.isSubNavigationExpanded)}\n          disabled={getBoolean(this.disabled, \"disabled\")}\n          onClick={(event) => this.handleClick(event)}\n        >\n          {this.text}\n          <slot name=\"additionalInformation\"></slot>\n        </button>\n        <menu\n          class=\"db-navigation-item-group-menu\"\n          role=\"group\"\n          ref={(el: any) => {\n            this._menuRef = el;\n          }}\n          data-force-close={getBooleanAsString(this.autoClose)}\n          id={this.subNavigationId}\n          onScroll={() => this.onScroll()}\n          onClick={(event) => this.handleNavigationItemClick(event)}\n        >\n          <div class=\"db-navigation-item-group-back-button\">\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          <slot></slot>\n        </menu>\n      </li>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/db-navigation-item.entry.js

@@ -1,42 +1,10 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-CNzNv7KB.js';
-import { n as DEFAULT_BACK } from './constants-DC9V_oNU.js';
-import { u as uuid, d as delay, b as getBoolean, g as getBooleanAsString, c as cls } from './index-YECpAE3G.js';
-import { N as NavigationItemSafeTriangle } from './navigation--UdC9CzO.js';
-import './floating-components-G-TursYV.js';
+import { r as registerInstance, h } from './index-uOzX56mL.js';
+import { a as DEFAULT_LABEL } from './constants-Dst8dqRS.js';
+import { g as getBooleanAsString, c as cls } from './index-YECpAE3G.js';
 
 const DBNavigationItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "click");
-        this.initialized = false;
-        this.hasAreaPopup = false;
-        this.hasSubNavigation = true;
-        this.isSubNavigationExpanded = false;
-        this.autoClose = false;
-        this.subNavigationId = "sub-navigation-" + uuid();
-        this.navigationItemSafeTriangle = undefined;
-    }
-    handleNavigationItemClick(event) {
-        var _a;
-        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
-            this.autoClose = true;
-            void delay(() => {
-                this.autoClose = false;
-            }, 1000);
-        }
-    }
-    handleClick(event) {
-        if (this.click) {
-            event.stopPropagation();
-            this.click.emit(event);
-        }
-        if (this.hasAreaPopup) {
-            this.isSubNavigationExpanded = true;
-        }
-    }
-    handleBackClick(event) {
-        event.stopPropagation();
-        this.isSubNavigationExpanded = false;
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -70,51 +38,15 @@ const DBNavigationItem = class {
             }
         }
     }
-    watch0Fn() {
-        if (this.subNavigationExpanded !== undefined) {
-            this.isSubNavigationExpanded = !!getBoolean(this.subNavigationExpanded, "subNavigationExpanded");
-        }
-    }
-    watch0() {
-        this.watch0Fn();
-    }
-    watch1Fn() {
-        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();
-    }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-navigation-item");
-        this.initialized = true;
-        this.watch0Fn();
-        this.watch1Fn();
     }
     render() {
         var _a;
-        return (h("li", { key: 'd00b7b4852a729301d545abaf1a65cd3e0cdcee7', class: cls("db-navigation-item", this.className), ref: (el) => {
+        return (h("li", { key: 'ddd7b3cf6316c49bb356d25d7315fe5ed3998df5', 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-show-icon": getBooleanAsString(this.showIcon), "data-active": this.active, "data-wrap": getBooleanAsString(this.wrap), "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-force-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, "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon), "data-active": getBooleanAsString(this.active), "aria-disabled": getBooleanAsString(this.disabled) }, h("slot", { key: 'baf789cb7779341537252a5d62270a313ae9f359' }), h("slot", { key: 'b725066ff8f5364ef240cd88a129c4689bbe832d', name: "additionalInformation" }), h("db-tooltip", { key: 'f651a7c03ce89a69de73a26deea5780fd0d7a6b1', placement: "right", delay: "slow" }, (_a = this.tooltip) !== null && _a !== void 0 ? _a : DEFAULT_LABEL)));
     }
-    static get watchers() { return {
-        "subNavigationExpanded": ["watch0"],
-        "initialized": ["watch1"],
-        "_ref": ["watch1"]
-    }; }
 };
 
 export { DBNavigationItem as db_navigation_item };

package/dist/esm/db-navigation-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"db-navigation-item.entry.js","sources":["src/components/navigation-item/navigation-item.tsx"],"sourcesContent":["import { DEFAULT_BACK } from \"../../shared/constants\";\nimport { ClickEvent } from \"../../shared/model\";\nimport { cls, delay, getBoolean, getBooleanAsString, uuid } from \"../../utils\";\nimport { NavigationItemSafeTriangle } from \"../../utils/navigation\";\nimport { DBButton } from \"../button/button\";\nimport { DBNavigationItemProps, DBNavigationItemState } 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 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() wrap: DBNavigationItemProps[\"wrap\"];\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: any) {\n    if (event?.target?.nodeName === \"A\") {\n      this.autoClose = true;\n      void delay(() => {\n        this.autoClose = false;\n      }, 1000);\n    }\n  }\n  handleClick(event: ClickEvent<HTMLButtonElement> | any) {\n    if (this.click) {\n      event.stopPropagation();\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-show-icon={getBooleanAsString(this.showIcon)}\n        data-active={this.active}\n        data-wrap={getBooleanAsString(this.wrap)}\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-force-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"],"names":[],"mappings":";;;;;;MA0Ba,gBAAgB,GAAA,MAAA;AAH5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAoBU,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AACnB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AACpB,QAAA,IAAgB,CAAA,gBAAA,GAAG,IAAI;AACvB,QAAA,IAAuB,CAAA,uBAAA,GAAG,KAAK;AAC/B,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAA,CAAA,eAAe,GAAG,iBAAiB,GAAG,IAAI,EAAE;AAC5C,QAAA,IAA0B,CAAA,0BAAA,GAAG,SAAS;AAuKhD;AArKC,IAAA,yBAAyB,CAAC,KAAU,EAAA;;QAClC,IAAI,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,MAAK,GAAG,EAAE;AACnC,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,KAAK,KAAK,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;aACvB,EAAE,IAAI,CAAC;;;AAGZ,IAAA,WAAW,CAAC,KAA0C,EAAA;AACpD,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAExB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;;;AAGvC,IAAA,eAAe,CAAC,KAA0C,EAAA;QACxD,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,uBAAuB,GAAG,KAAK;;AAGtC;;;;AAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B,EAAA;QAE7B,MAAM,MAAM,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC;AACtD,QAAA,IAAI,OAAO,IAAI,MAAM,EAAE;AACrB,YAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU;AACpC,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/B,gBAAA,IACE,IAAI;AACJ,qBAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE;oBACA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;AAC3C,oBAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;gBAEnC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;oBACjC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;AACtD,oBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;oBACvD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;oBAClD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,CAAG,EAAA,YAAY,GAAG,CAAG,EAAA,YAAY,CAAG,CAAA,CAAA,GAAG,EAAE,CAAG,EAAA,KAAK,CAAE,CAAA,CACpD;oBACD,IAAI,cAAc,EAAE;;AAElB,wBAAA,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC;;yBACnC;AACL,wBAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;IAO3C,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,SAAS,EAAE;AAC5C,YAAA,IAAI,CAAC,uBAAuB,GAAG,CAAC,CAAC,UAAU,CACzC,IAAI,CAAC,qBAAqB,EAC1B,uBAAuB,CACxB;;;IAKL,MAAM,GAAA;QACJ,IAAI,CAAC,QAAQ,EAAE;;IAGjB,QAAQ,GAAA;;QACN,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;YACzD,IAAI,iBAAiB,EAAE;AACrB,gBAAA,IAAI,CAAA,CAAA,EAAA,GAAA,iBAAiB,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,EAAE;AAC1C,oBAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,oBAAA,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE;AACpC,wBAAA,IAAI,CAAC,0BAA0B,GAAG,IAAI,0BAA0B,CAC9D,IAAI,CAAC,IAAI,EACT,iBAAiB,CAClB;;;qBAEE;AACL,oBAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;;;;;IAQrC,MAAM,GAAA;QACJ,IAAI,CAAC,QAAQ,EAAE;;IAGjB,gBAAgB,GAAA;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,oBAAoB,CAAC;AAC5D,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QACvB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,QAAQ,EAAE;;IAGjB,MAAM,GAAA;;QACJ,QACE,CACE,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,SAAS,CAAC,EAChD,GAAG,EAAE,CAAC,EAAO,KAAI;AACf,gBAAA,IAAI,CAAC,IAAI,GAAG,EAAE;aACf,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,WAAW,EAAE,QAAK,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,EAAE,CAAA,EAAA,EAClE,YAAY,EAAE,gBAAM,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,0CAAE,aAAa,EAAE,CAAA,EAAA,EACpE,WAAW,EAAE,CAAC,KAAK,KACjB,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,IAAI,CAAC,0BAA0B,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,kBAAkB,CAAC,KAAK,CAAC,CAAA,EAAA,EAAA,YAAA,EAEhD,IAAI,CAAC,KAAK,eACX,IAAI,CAAC,IAAI,EACJ,gBAAA,EAAA,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,aAAA,EACpC,IAAI,CAAC,MAAM,eACb,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzB,eAAA,EAAA,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EAE/C,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,GAAG,IAAI,EACrE,IAAI,CAAC,gBAAgB,IACpB,EAAC,QAAQ,EAAA,IAAA,EACP,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,eAAA,EACzB,IAAI,CAAC,YAAY,EACjB,eAAA,EAAA,IAAI,CAAC,uBAAuB,EAC3C,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAC/C,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAE1C,EAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CAC/B,EACT,CACE,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EACP,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAA,EAExD,IAAI,CAAC,YAAY,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,WAAA,EAAA,EACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,IAAI,CAAC,YAAY,EACrB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAA,EAE9C,MAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY,CAC1B,CACR,IACJ,IAAI,EACR,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,eAAe,EAAA,CAAQ,CAC7B,CACE,IACT,IAAI,CACL;;;;;;;;;;;"}
+{"version":3,"file":"db-navigation-item.entry.js","sources":["src/components/navigation-item/navigation-item.tsx"],"sourcesContent":["import { DEFAULT_LABEL } from \"../../shared/constants\";\nimport { cls, getBooleanAsString } from \"../../utils\";\nimport { DBTooltip } from \"../tooltip/tooltip\";\nimport { DBNavigationItemProps } from \"./model\";\n\nimport { Component, h, Fragment, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot additionalInformation - TODO: Add description for slotAdditionalInformation\n */\n @Component({\n  tag: \"db-navigation-item\",\n})\nexport class DBNavigationItem {\n  private _ref!: HTMLLIElement | any;\n  @Prop() id: DBNavigationItemProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNavigationItemProps[\"className\"];\n  @Prop() icon: DBNavigationItemProps[\"icon\"];\n  @Prop() showIcon: DBNavigationItemProps[\"showIcon\"];\n  @Prop() active: DBNavigationItemProps[\"active\"];\n  @Prop() disabled: DBNavigationItemProps[\"disabled\"];\n  @Prop() tooltip: DBNavigationItemProps[\"tooltip\"];\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-navigation-item\");\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        data-icon={this.icon}\n        data-show-icon={getBooleanAsString(this.showIcon)}\n        data-active={getBooleanAsString(this.active)}\n        aria-disabled={getBooleanAsString(this.disabled)}\n      >\n        <slot></slot>\n        <slot name=\"additionalInformation\"></slot>\n        <db-tooltip placement=\"right\" delay=\"slow\">\n          {this.tooltip ?? DEFAULT_LABEL}\n        </db-tooltip>\n      </li>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;MAea,gBAAgB,GAAA,MAAA;;;;AAU3B;;;;AAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B,EAAA;QAE7B,MAAM,MAAM,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC;AACtD,QAAA,IAAI,OAAO,IAAI,MAAM,EAAE;AACrB,YAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU;AACpC,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/B,gBAAA,IACE,IAAI;AACJ,qBAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE;oBACA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;AAC3C,oBAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;gBAEnC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;oBACjC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;AACtD,oBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;oBACvD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;oBAClD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,CAAG,EAAA,YAAY,GAAG,CAAG,EAAA,YAAY,CAAG,CAAA,CAAA,GAAG,EAAE,CAAG,EAAA,KAAK,CAAE,CAAA,CACpD;oBACD,IAAI,cAAc,EAAE;;AAElB,wBAAA,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC;;yBACnC;AACL,wBAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;IAO3C,gBAAgB,GAAA;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,oBAAoB,CAAC;;IAG9D,MAAM,GAAA;;QACJ,QACE,CACE,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,SAAS,CAAC,EAChD,GAAG,EAAE,CAAC,EAAO,KAAI;AACf,gBAAA,IAAI,CAAC,IAAI,GAAG,EAAE;aACf,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,EACA,WAAA,EAAA,IAAI,CAAC,IAAI,EACJ,gBAAA,EAAA,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,aAAA,EAAA,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAA,eAAA,EAC7B,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EAEhD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,uBAAuB,EAAQ,CAAA,EAC1C,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,SAAS,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAA,EACvC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,aAAa,CACnB,CACV;;;;;;"}

package/dist/esm/db-navigation.entry.js

@@ -1,11 +1,49 @@
-import { r as registerInstance, h } from './index-CNzNv7KB.js';
-import { D as DEFAULT_ID } from './constants-DC9V_oNU.js';
-import { u as uuid, c as cls } from './index-YECpAE3G.js';
+import { r as registerInstance, h } from './index-uOzX56mL.js';
+import { d as delay, g as getBooleanAsString, c as cls } from './index-YECpAE3G.js';
+import { h as handleSubNavigationPosition } from './navigation-CJ-OxodG.js';
+import './floating-components-D3kmGlOI.js';
 
 const DBNavigation = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        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.
@@ -39,15 +77,83 @@ const DBNavigation = class {
             }
         }
     }
+    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 watchers() { return {
+        "_ref": ["watch0"],
+        "variant": ["watch0"],
+        "initialized": ["watch0"],
+        "menuRef": ["watch1"],
+        "_variant": ["watch1"],
+        "_shellDesktopPosition": ["watch1"]
+    }; }
 };
 
 export { DBNavigation as db_navigation };

package/dist/esm/db-navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"db-navigation.entry.js","sources":["src/components/navigation/navigation.tsx"],"sourcesContent":["import { DEFAULT_ID } from \"../../shared/constants\";\nimport { cls, uuid } from \"../../utils\";\nimport { DBNavigationProps, DBNavigationState } from \"./model\";\n\nimport { Component, h, Fragment, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-navigation\",\n})\nexport class DBNavigation {\n  private _ref!: HTMLDivElement | any;\n  @Prop() id: DBNavigationProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBNavigationProps[\"className\"];\n  @State() _id = DEFAULT_ID;\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-navigation\");\n    this._id = this.id || \"navigation-\" + uuid();\n  }\n\n  render() {\n    return (\n      <nav\n        class={cls(\"db-navigation\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n      >\n        <menu>\n          <slot></slot>\n        </menu>\n      </nav>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;MAca,YAAY,GAAA,MAAA;AAHxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAG,CAAA,GAAA,GAAG,UAAU;AA8D1B;AA5DC;;;;AAIG;IACK,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B,EAAA;QAE7B,MAAM,MAAM,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC;AACtD,QAAA,IAAI,OAAO,IAAI,MAAM,EAAE;AACrB,YAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU;AACpC,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/B,gBAAA,IACE,IAAI;AACJ,qBAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE;oBACA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;AAC3C,oBAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;gBAEnC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;oBACjC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;AACtD,oBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;oBACvD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;oBAClD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,CAAG,EAAA,YAAY,GAAG,CAAG,EAAA,YAAY,CAAG,CAAA,CAAA,GAAG,EAAE,CAAG,EAAA,KAAK,CAAE,CAAA,CACpD;oBACD,IAAI,cAAc,EAAE;;AAElB,wBAAA,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC;;yBACnC;AACL,wBAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;IAO3C,gBAAgB,GAAA;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC;QACvD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,aAAa,GAAG,IAAI,EAAE;;IAG9C,MAAM,GAAA;QACJ,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,EAC3C,GAAG,EAAE,CAAC,EAAO,KAAI;AACf,gBAAA,IAAI,CAAC,IAAI,GAAG,EAAE;AAChB,aAAC,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH;;;;;;"}
+{"version":3,"file":"db-navigation.entry.js","sources":["src/components/navigation/navigation.tsx"],"sourcesContent":["import { cls, delay, getBooleanAsString } from \"../../utils\";\nimport { handleSubNavigationPosition } from \"../../utils/navigation\";\nimport { DBButton } from \"../button/button\";\nimport { DBNavigationProps, DBNavigationState } from \"./model\";\n\nimport { Component, h, Fragment, Watch, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-navigation\",\n})\nexport class DBNavigation {\n  private _ref!: HTMLDivElement | any;\n  private menuRef!: HTMLMenuElement | any;\n  @Prop() variant: DBNavigationProps[\"variant\"];\n  @Prop() arrowScrollDistance: DBNavigationProps[\"arrowScrollDistance\"];\n  @Prop() id: DBNavigationProps[\"id\"];\n  @Prop() showTreeLine: DBNavigationProps[\"showTreeLine\"];\n  @Prop({attribute: \"classname\"}) className: DBNavigationProps[\"className\"];\n  @State() showScrollLeft = false;\n  @State() showScrollRight = false;\n  @State() _shellDesktopPosition = undefined;\n  @State() _subNavigationDesktopPosition = undefined;\n  @State() _variant = undefined;\n  @State() initialized = false;\n  @State() _isSubNavigation = false;\n\n  evaluateScrollButtons(tList: Element) {\n    const needsScroll = tList.scrollWidth > tList.clientWidth;\n    const scrollLeft = Math.ceil(tList.scrollLeft);\n    this.showScrollLeft = needsScroll && scrollLeft > 1;\n    this.showScrollRight =\n      needsScroll && scrollLeft < tList.scrollWidth - tList.clientWidth;\n  }\n  scroll(left?: boolean) {\n    let step = Number(this.arrowScrollDistance) || 100;\n    if (left) {\n      step *= -1;\n    }\n    this.menuRef?.scrollBy({\n      top: 0,\n      left: step,\n      behavior: \"smooth\",\n    });\n  }\n  onScroll() {\n    this.evaluateScrollButtons(this.menuRef);\n    this._handleSubNavigation();\n  }\n  _handleSubNavigation() {\n    handleSubNavigationPosition(\n      this.menuRef,\n      this._shellDesktopPosition === \"left\" ||\n        (this._shellDesktopPosition === \"top\" &&\n          this._subNavigationDesktopPosition === \"left\" &&\n          this._isSubNavigation)\n        ? 1\n        : 0\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._ref && this.initialized) {\n      void delay(() => {\n        const element = this._ref as HTMLElement;\n        if (!element) return;\n        let endVariant = this.variant ?? \"popover\";\n        const parentClassList = element.parentElement?.nodeName.startsWith(\"DB\")\n          ? element.parentElement?.parentElement?.classList\n          : element.parentElement?.classList;\n        const shell = element.closest(\".db-shell\");\n        const shellDesktopPosition = shell?.getAttribute(\n          \"data-control-panel-desktop-position\"\n        );\n        const shellSubNaviDesktopPosition = shell?.getAttribute(\n          \"data-sub-navigation-desktop-position\"\n        );\n        this._shellDesktopPosition = shellDesktopPosition;\n        this._subNavigationDesktopPosition = shellSubNaviDesktopPosition;\n        const isSubNavigation = parentClassList?.contains(\n          \"db-shell-sub-navigation\"\n        );\n        this._isSubNavigation = isSubNavigation;\n        const requiresPopover =\n          (shellDesktopPosition === \"top\" &&\n            parentClassList?.contains(\n              \"db-control-panel-desktop-scroll-container\"\n            )) ||\n          ((shellSubNaviDesktopPosition === \"top\" ||\n            shellDesktopPosition === \"left\") &&\n            isSubNavigation);\n        if (requiresPopover) {\n          endVariant = \"popover\";\n        }\n        this._variant = endVariant;\n      }, 1);\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"variant\")\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this.menuRef && this._variant) {\n      if (!this._variant || this._variant === \"popover\") {\n        this._handleSubNavigation();\n      } else if (this._variant === \"tree\") {\n        for (const menu of Array.from(\n          (this.menuRef as HTMLElement).querySelectorAll(\n            \".db-navigation-item-group-menu\"\n          )\n        )) {\n          (menu as HTMLElement).style.position = \"\";\n        }\n        for (const navItem of Array.from(\n          (this.menuRef as HTMLElement).querySelectorAll(\n            \".db-navigation-item, .db-navigation-item-group\"\n          )\n        )) {\n          // TODO: Add keyboard navigation support\n          navItem.setAttribute(\"role\", \"none\");\n          navItem.querySelector(\"a, button\")?.setAttribute(\"role\", \"treeitem\");\n        }\n      }\n      this.evaluateScrollButtons(this.menuRef);\n    }\n  }\n\n  @Watch(\"menuRef\")\n  @Watch(\"_variant\")\n  @Watch(\"_shellDesktopPosition\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-navigation\");\n    this.initialized = true;\n    this.watch0Fn();\n    this.watch1Fn();\n  }\n\n  render() {\n    return (\n      <nav\n        class={cls(\"db-navigation\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-variant={this._variant}\n        data-show-tree-line={getBooleanAsString(this.showTreeLine ?? \"true\")}\n        onScroll={() => this.onScroll()}\n      >\n        {this.showScrollLeft ? (\n          <db-button\n            class=\"overflow-scroll-left-button\"\n            variant=\"filled\"\n            icon=\"chevron_left\"\n            type=\"button\"\n            noText={true}\n            onClick={() => this.scroll(true)}\n          >\n            Scroll left\n          </db-button>\n        ) : null}\n        <menu\n          role={this._variant === \"tree\" ? \"tree\" : undefined}\n          ref={(el: any) => {\n            this.menuRef = el;\n          }}\n          onScroll={() => this.onScroll()}\n        >\n          <slot></slot>\n        </menu>\n        {this.showScrollRight ? (\n          <db-button\n            class=\"overflow-scroll-right-button\"\n            variant=\"filled\"\n            icon=\"chevron_right\"\n            type=\"button\"\n            noText={true}\n            onClick={() => this.scroll()}\n          >\n            Scroll right\n          </db-button>\n        ) : null}\n      </nav>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/db-notification.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-CNzNv7KB.js';
-import { s as DEFAULT_CLOSE_BUTTON } from './constants-DC9V_oNU.js';
+import { r as registerInstance, c as createEvent, h } from './index-uOzX56mL.js';
+import { u as DEFAULT_CLOSE_BUTTON } from './constants-Dst8dqRS.js';
 import { b as getBoolean, s as stringPropVisible, g as getBooleanAsString, c as cls } from './index-YECpAE3G.js';
 
 const DBNotification = class {
@@ -52,9 +52,9 @@ const DBNotification = class {
     }
     render() {
         var _a;
-        return (h("article", { key: '5c2aed4066efbc207ade969f84c5cea58350a49a', class: cls("db-notification", this.className), ref: (el) => {
+        return (h("article", { key: '4ba30272915f370c403f76af94167074676884c9', 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-show-icon": getBooleanAsString(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '5b4a5fbc5dad5b04b3f2a0d269cf2ca48f79df7e', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: 'a72611c45ee17745a354e243fdb5cc3e22abf5be' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: '7679c3681608babce822cd7d4251e0bfc2ce08d4', 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));
+            }, id: this.id, "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '15d84713938eeaac63dc188c687f040f4c4d8be7', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: '3001384c9467b01c42a1a3c0f41cbc90bb3f042e' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: 'd4ba480a50b685bb6041928ab6be28ae7dbd2f91', 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));
     }
 };
 

package/dist/esm/db-popover.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-CNzNv7KB.js';
+import { r as registerInstance, h } from './index-uOzX56mL.js';
 import { d as delay, g as getBooleanAsString, c as cls } from './index-YECpAE3G.js';
 import { D as DocumentScrollListener } from './document-scroll-listener-DC7DAxof.js';
-import { b as handleFixedPopover } from './floating-components-G-TursYV.js';
+import { b as handleFixedPopover } from './floating-components-D3kmGlOI.js';
 
 const DBPopover = class {
     constructor(hostRef) {
@@ -26,8 +26,7 @@ const DBPopover = class {
         if (article) {
             // This is a workaround for angular
             delay(() => {
-                var _a;
-                handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
+                handleFixedPopover(article, this._ref);
             }, 1);
         }
     }
@@ -164,9 +163,9 @@ const DBPopover = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '4d902919abc8bf5b55a617a31424f35582e029c1', class: cls("db-popover", this.className), ref: (el) => {
+        return (h("div", { key: 'd257fcc711d6b7e42f388a1e83e79e0f2b5ca907', class: cls("db-popover", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '166a0b766f6f0c003e6d7a250fd466267117f59a', name: "trigger" }), h("article", { key: '4fa535dc081c76eb21671e0abfb7d090b38e6e5c', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: 'ef47687b496cfe4d6cce11ef5d282a2ec3a88004' }))));
+            }, id: this.id }, h("slot", { key: '3703b88b293e6f6e8b59fd64c21a67cae94e799d', name: "trigger" }), h("article", { key: '2337d6715bf1d96ea1f268a993f54bdcd9f8ff11', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: '6752ce6d69fbe88182e7927ba66ae45bf6ec6ba5' }))));
     }
     static get watchers() { return {
         "_ref": ["watch0", "watch1"],