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

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

@@ -0,0 +1,453 @@
+import { DEFAULT_BACK } from "../../shared/constants";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
+import { handleSubNavigationPosition, NavigationItemSafeTriangle, } from "../../utils/navigation";
+import { h, } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot additionalInformation - TODO: Add description for slotAdditionalInformation
+ */
+export class DBNavigationItemGroup {
+    constructor() {
+        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 is() { return "db-navigation-item-group"; }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "any",
+                "attribute": "expanded",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"expanded\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "id": {
+                "type": "string",
+                "attribute": "id",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "attribute": "classname",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"icon\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "showIcon": {
+                "type": "any",
+                "attribute": "show-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"showIcon\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"active\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "any",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"disabled\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "attribute": "text",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "backButtonId": {
+                "type": "string",
+                "attribute": "back-button-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"backButtonId\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "backButtonText": {
+                "type": "string",
+                "attribute": "back-button-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBNavigationItemGroupProps[\"backButtonText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/navigation-item-group/model.ts::DBNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSubNavigation": {},
+            "isSubNavigationExpanded": {},
+            "autoClose": {},
+            "hasPopup": {},
+            "initialized": {},
+            "subNavigationId": {},
+            "navigationItemSafeTriangle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "watch0"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch1"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch1"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch2"
+            }, {
+                "propName": "_menuRef",
+                "methodName": "watch2"
+            }, {
+                "propName": "_buttonRef",
+                "methodName": "watch2"
+            }, {
+                "propName": "hasPopup",
+                "methodName": "watch2"
+            }];
+    }
+}
+//# sourceMappingURL=navigation-item-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-item-group.js","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.tsx"],"names":[],"mappings":"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","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"]}

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

@@ -52,9 +52,9 @@ export class DBNotification {
     }
     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));
     }
     static get is() { return "db-notification"; }
     static get properties() {

package/dist/collection/components/popover/popover.js

@@ -28,8 +28,7 @@ export class DBPopover {
         if (article) {
             // This is a workaround for angular
             utilsDelay(() => {
-                var _a;
-                handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
+                handleFixedPopover(article, this._ref);
             }, 1);
         }
     }
@@ -166,38 +165,13 @@ export class DBPopover {
     }
     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 is() { return "db-popover"; }
     static get properties() {
         return {
-            "placement": {
-                "type": "string",
-                "attribute": "placement",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBPopoverProps[\"placement\"]",
-                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-                    "references": {
-                        "DBPopoverProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/popover/model.ts::DBPopoverProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "id": {
                 "type": "string",
                 "attribute": "id",
@@ -397,6 +371,31 @@ export class DBPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "placement": {
+                "type": "string",
+                "attribute": "placement",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBPopoverProps[\"placement\"]",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "DBPopoverProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/popover/model.ts::DBPopoverProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }