@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-pi-menu/stzh-pi-menu.js

@@ -0,0 +1,527 @@
+import { h, Host } from "@stencil/core";
+import { waitForEvent } from "../../utils/event-utils";
+import { animateTo, shimKeyframesAutoValues, stopAnimations } from "../../utils/animation-utils";
+import { addMediaChangeListener, media, removeMediaChangeListener } from "../../utils/media-utils";
+const ANIMATION_SHOW = {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "100%", opacity: "1" },
+  ],
+  options: { duration: 300, easing: "linear" },
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { height: "100%", opacity: "1" },
+    { height: "0", opacity: "0" },
+  ],
+  options: { duration: 300, easing: "linear" },
+};
+let accordionItemCounter = 0;
+export class StzhPiMenu {
+  constructor() {
+    this.toggledByMethod = false;
+    this.focusedByInput = false;
+    this.mediaChangeHandler = () => {
+      this.isSmallOrMedium = !media("small").matches || !media("medium").matches;
+    };
+    this.handleHeaderClick = () => {
+      this.toggle();
+    };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.buttonElement.focus();
+      }
+      this.focusedByInput = false;
+    };
+    this.handleMenuItemClick = (event) => {
+      this.stzhMenuItemClick.emit({
+        component: "stzh-pi-menu",
+        originalEvent: event,
+      });
+    };
+    this.localization = undefined;
+    this.breakout = false;
+    this.menuItems = [];
+    this.open = false;
+    this.heading = "";
+    this.subheading = "";
+    this.headingLevel = "3";
+    this.analyticsId = undefined;
+    this.rootTabindex = 0;
+    this.isSmallOrMedium = undefined;
+  }
+  menuItemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._menuItems = JSON.parse(newValue);
+    }
+    else {
+      this._menuItems = newValue;
+    }
+    this._menuItems = this._menuItems.map((menuItem, index) => (Object.assign({ id: `submenu-${index}` }, menuItem)));
+  }
+  async openWatcher(newValue) {
+    if (!this.bodyElement) {
+      return;
+    }
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animateTo(this.bodyElement, shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {
+        height: this.bodyElement.scrollHeight,
+      }), ANIMATION_SHOW.options);
+      if (this.isSmallOrMedium) {
+        this.bodyElement.style.height = "auto";
+      }
+      else {
+        this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;
+      }
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      await animateTo(this.bodyElement, shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {
+        height: this.bodyElement.scrollHeight,
+      }), ANIMATION_HIDE.options);
+      this.bodyElement.hidden = true;
+      this.bodyElement.style.height = "0px";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-pi-menu",
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  /** Show piMenu item content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  /** Toggle piMenu item content */
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  async componentWillLoad() {
+    this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;
+    this.menuItemsWatcher(this.menuItems);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "pi-pagetitle");
+    }
+  }
+  componentDidLoad() {
+    this.bodyElement.hidden = !this.open;
+    this.mediaChangeHandler();
+    if (this.isSmallOrMedium) {
+      this.bodyElement.style.height = this.open ? "auto" : "0px";
+    }
+    else {
+      this.bodyElement.style.height = this.open ? `calc(100% - ${this.headingElement.clientHeight})px` : "0px";
+    }
+  }
+  async connectedCallback() {
+    addMediaChangeListener(this.mediaChangeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.mediaChangeHandler);
+  }
+  render() {
+    const Heading = `h${this.headingLevel}`;
+    const classes = {
+      "stzh-pi-menu": true,
+      "stzh-pi-menu--is-open": this.open,
+      "stzh-pi-menu--breakout": this.breakout,
+    };
+    return (h(Host, { tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { class: classes }, h(Heading, { class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick, ref: el => (this.headingElement = el) }, h("button", { ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { class: "stzh-pi-menu__button-text" }, h("span", { class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { class: "stzh-pi-menu__content-inner" }, h("nav", { class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map(item => {
+      var _a;
+      return (h("li", { class: "stzh-pi-menu__nav-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e), class: {
+          "stzh-pi-menu__nav-item": true,
+          "is-level-1": true,
+          active: item.active,
+        } }, item.label), ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("ul", { id: item.id, class: "stzh-pi-menu__nav-list is-level-2" }, item.items.map(item => (h("li", { class: "stzh-pi-menu__nav-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e), class: {
+          "stzh-pi-menu__nav-item": true,
+          "is-level-2": true,
+          active: item.active,
+        } }, item.label))))))));
+    })))))), h("button", { class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { class: "stzh-pi-menu__button-text" }, h("span", { class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { name: "angle-down", class: "stzh-pi-menu__button-icon" }))));
+  }
+  static get is() { return "stzh-pi-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pi-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pi-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhPiMenuLocalization",
+          "resolved": "StzhLocaleComponent & { menuLabel: string; }",
+          "references": {
+            "StzhPiMenuLocalization": {
+              "location": "import",
+              "path": "./stzh-pi-menu.localization",
+              "id": "src/components/stzh-pi-menu/stzh-pi-menu.localization.ts::StzhPiMenuLocalization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "breakout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Breakout from layout"
+        },
+        "attribute": "breakout",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "menuItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhPiPagetitleMenuItem[] | string",
+          "resolved": "StzhPiPagetitleMenuItem[] | string",
+          "references": {
+            "StzhPiPagetitleMenuItem": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiPagetitleMenuItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Menu navigation items"
+        },
+        "attribute": "menu-items",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether fold is open"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading title"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading title"
+        },
+        "attribute": "subheading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "headingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level, for accessibility, no visual impact"
+        },
+        "attribute": "heading-level",
+        "reflect": true,
+        "defaultValue": "\"3\""
+      },
+      "analyticsId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute to the button element.\nDefault value will be taken from `heading` prop."
+        },
+        "attribute": "analytics-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "rootTabindex": {},
+      "isSmallOrMedium": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhOpen",
+        "name": "stzhOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Open event"
+        },
+        "complexType": {
+          "original": "StzhPiMenuOpenEvent",
+          "resolved": "{ component: \"stzh-pi-menu\"; }",
+          "references": {
+            "StzhPiMenuOpenEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiMenuOpenEvent"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOpened",
+        "name": "stzhOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Opened event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhPiMenuOpenedEvent",
+          "resolved": "{ component: \"stzh-pi-menu\"; }",
+          "references": {
+            "StzhPiMenuOpenedEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiMenuOpenedEvent"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClose",
+        "name": "stzhClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Close event"
+        },
+        "complexType": {
+          "original": "StzhPiMenuCloseEvent",
+          "resolved": "{ component: \"stzh-pi-menu\"; }",
+          "references": {
+            "StzhPiMenuCloseEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiMenuCloseEvent"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClosed",
+        "name": "stzhClosed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Closed event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhPiMenuClosedEvent",
+          "resolved": "{ component: \"stzh-pi-menu\"; }",
+          "references": {
+            "StzhPiMenuClosedEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiMenuClosedEvent"
+            }
+          }
+        }
+      }, {
+        "method": "stzhMenuItemClick",
+        "name": "stzhMenuItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Metanav item click event"
+        },
+        "complexType": {
+          "original": "StzhPiMenuItemClickEvent",
+          "resolved": "{ component: \"stzh-pi-menu\"; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhPiMenuItemClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiMenuItemClickEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show piMenu item content",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide content",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle piMenu item content",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "menuItems",
+        "methodName": "menuItemsWatcher"
+      }, {
+        "propName": "open",
+        "methodName": "openWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-pi-menu.js.map

package/dist/collection/components/stzh-pi-menu/stzh-pi-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-menu.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-menu/stzh-pi-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPiMenuClosedEvent,\n  StzhPiMenuCloseEvent,\n  StzhPiMenuItemClickEvent,\n  StzhPiMenuOpenedEvent,\n  StzhPiMenuOpenEvent,\n  StzhPiPagetitleMenuItem,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { StzhPiMenuLocalization } from \"./stzh-pi-menu.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"100%\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"100%\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n@Component({\n  tag: \"stzh-pi-menu\",\n  styleUrl: \"stzh-pi-menu.scss\",\n  shadow: true,\n})\nexport class StzhPiMenu {\n  /** Translation strings */\n  @Prop() localization: StzhPiMenuLocalization;\n\n  /** Breakout from layout */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  /** Menu navigation items */\n  @Prop() menuItems: StzhPiPagetitleMenuItem[] | string = [];\n  private _menuItems: StzhPiPagetitleMenuItem[];\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Heading title */\n  @Prop() subheading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhPiMenuElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhPiMenuOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPiMenuOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhPiMenuCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPiMenuClosedEvent>;\n\n  /** Metanav item click event */\n  @Event() stzhMenuItemClick: EventEmitter<StzhPiMenuItemClickEvent>;\n\n  @Watch(\"menuItems\")\n  menuItemsWatcher(newValue: StzhPiPagetitleMenuItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._menuItems = JSON.parse(newValue);\n    } else {\n      this._menuItems = newValue;\n    }\n\n    this._menuItems = this._menuItems.map((menuItem, index) => ({\n      id: `submenu-${index}`,\n      ...menuItem,\n    }));\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      if (this.isSmallOrMedium) {\n        this.bodyElement.style.height = \"auto\";\n      } else {\n        this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;\n      }\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show piMenu item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle piMenu item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private headingElement: HTMLHeadingElement;\n  private piMenuId: string;\n  private focusedByInput: boolean = false;\n  @State() isSmallOrMedium: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmallOrMedium = !media(\"small\").matches || !media(\"medium\").matches;\n  };\n\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private handleMenuItemClick = (event: MouseEvent) => {\n    this.stzhMenuItemClick.emit({\n      component: \"stzh-pi-menu\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;\n    this.menuItemsWatcher(this.menuItems);\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pi-pagetitle\");\n    }\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.mediaChangeHandler();\n    if (this.isSmallOrMedium) {\n      this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    } else {\n      this.bodyElement.style.height = this.open ? `calc(100% - ${this.headingElement.clientHeight})px` : \"0px\";\n    }\n  }\n\n  async connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-menu\": true,\n      \"stzh-pi-menu--is-open\": this.open,\n      \"stzh-pi-menu--breakout\": this.breakout,\n    };\n\n    return (\n      <Host tabindex={this.rootTabindex} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <Heading\n            class=\"stzh-pi-menu__heading\"\n            onClick={this.handleHeaderClick}\n            ref={el => (this.headingElement = el as HTMLHeadingElement)}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-pi-menu__button\"\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-pi-menu__button-text\">\n                <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n              </span>\n              <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n            </button>\n          </Heading>\n          <div\n            id={`${this.piMenuId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-pi-menu__content\"\n            aria-labelledby={`${this.piMenuId}-header`}\n            role=\"region\"\n          >\n            <div class=\"stzh-pi-menu__content-inner\">\n              <nav class=\"stzh-pi-menu__nav\" aria-label={this.localization.menuLabel}>\n                {this.subheading && <p class=\"stzh-pi-menu__subheading\">{this.subheading}</p>}\n                <ul class=\"stzh-pi-menu__nav-list is-level-1\">\n                  {this._menuItems.map(item => (\n                    <li class=\"stzh-pi-menu__nav-list-item\">\n                      <a\n                        href={item.href}\n                        onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n                        class={{\n                          \"stzh-pi-menu__nav-item\": true,\n                          \"is-level-1\": true,\n                          active: item.active,\n                        }}\n                      >\n                        {item.label}\n                      </a>\n                      {item.items?.length > 0 && (\n                        <ul id={item.id} class=\"stzh-pi-menu__nav-list is-level-2\">\n                          {item.items.map(item => (\n                            <li class=\"stzh-pi-menu__nav-list-item\">\n                              <a\n                                href={item.href}\n                                onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n                                class={{\n                                  \"stzh-pi-menu__nav-item\": true,\n                                  \"is-level-2\": true,\n                                  active: item.active,\n                                }}\n                              >\n                                {item.label}\n                              </a>\n                            </li>\n                          ))}\n                        </ul>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </nav>\n            </div>\n          </div>\n        </div>\n        <button class=\"stzh-pi-menu__button stzh-pi-menu__button-space-helper\" aria-hidden=\"true\" type=\"button\">\n          <span class=\"stzh-pi-menu__button-text\">\n            <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n          </span>\n          <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-pi-menu/stzh-pi-menu.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-pi-menu.localization.js.map

package/dist/collection/components/stzh-pi-menu/stzh-pi-menu.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-menu.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-menu/stzh-pi-menu.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhPiMenuLocalization = StzhLocaleComponent & {\n  menuLabel: string;\n};\n"]}