@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js

@@ -1,32 +1,59 @@
 import { Host, h, } from "@stencil/core";
 import { getSlot, getSlotContent, isSlotUsed } from "../../utils/helpers";
+const NAV_GROUP_TAG = "IC-NAVIGATION-GROUP";
+const NAV_ITEM_TAG = "IC-NAVIGATION-ITEM";
 /**
  * @slot navigation - Content will be rendered at top of panel.
  * @slot buttons - Content will be rendered above version info and below navigation.
  */
 export class NavigationMenu {
     constructor() {
-        this.closeButton = null;
         this.hasButtons = false;
         this.hasNavigation = false;
         this.lastTabStop = null;
         this.navGroupFirst = false;
         this.navItemAboveButtons = false;
+        /**
+         * The status info to display.
+         */
+        this.status = "";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The version info to display.
+         */
+        this.version = "";
+        this.setLastTabStop = (lastNavGroupExpanded) => {
+            let lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {
+                const childNavItems = lastEl.children;
+                lastEl = childNavItems[childNavItems.length - 1];
+            }
+            if (lastEl.tagName === NAV_ITEM_TAG) {
+                //check for slotted content i.e. react router link
+                const slotContent = getSlot(lastEl, "navigation-item");
+                if (slotContent !== null) {
+                    lastEl = slotContent;
+                }
+            }
+            this.lastTabStop = lastEl;
+        };
         this.closeMenu = () => {
             this.icNavigationMenuClose.emit();
         };
         this.focusCloseButton = () => {
-            if (this.closeButton.focus) {
-                this.closeButton.focus();
-            }
+            var _a;
+            (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
         };
         this.focusLastTabStop = () => {
             let focusEl;
             if (this.lastTabStop !== null) {
                 switch (this.lastTabStop.tagName) {
                     case "IC-NAVIGATION-BUTTON":
-                    case "IC-NAVIGATION-ITEM":
-                    case "IC-NAVIGATION-GROUP":
+                    case NAV_ITEM_TAG:
+                    case NAV_GROUP_TAG:
                         focusEl = this.lastTabStop;
                         focusEl.focus();
                         break;
@@ -36,21 +63,23 @@ export class NavigationMenu {
                 }
             }
         };
-        this.status = "";
-        this.theme = "inherit";
-        this.version = "";
     }
     componentWillLoad() {
         this.navBarEl = document.querySelector("ic-top-navigation");
-        const navigationEls = getSlotContent(this.el, "navigation");
-        if (navigationEls) {
+        this.navigationEls = getSlotContent(this.el, "navigation");
+        if (this.navigationEls) {
             this.hasNavigation = true;
-            const lastEl = navigationEls[navigationEls.length - 1];
-            if (lastEl.tagName === "IC-NAVIGATION-ITEM") {
+            const lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_ITEM_TAG) {
                 this.navItemAboveButtons = true;
             }
-            const firstEl = navigationEls[0];
-            if (firstEl.tagName === "IC-NAVIGATION-GROUP") {
+            else if (lastEl.tagName === NAV_GROUP_TAG) {
+                lastEl.addEventListener("navigationGroupExpanded", ((event) => {
+                    this.setLastTabStop(event.detail.expanded);
+                }));
+            }
+            const firstEl = this.navigationEls[0];
+            if (firstEl.tagName === NAV_GROUP_TAG) {
                 this.navGroupFirst = true;
             }
         }
@@ -60,16 +89,8 @@ export class NavigationMenu {
             this.lastTabStop = buttonContent[buttonContent.length - 1];
         }
         else {
-            if (this.hasNavigation) {
-                const lastEl = navigationEls[navigationEls.length - 1];
-                //check for slotted content i.e. react router link
-                const slotContent = getSlot(lastEl, "navigation-item");
-                if (slotContent !== null) {
-                    this.lastTabStop = slotContent;
-                }
-                else {
-                    this.lastTabStop = lastEl;
-                }
+            if (this.hasNavigation && this.navigationEls) {
+                this.setLastTabStop(false);
             }
         }
     }
@@ -102,16 +123,16 @@ export class NavigationMenu {
         }
     }
     render() {
-        return (h(Host, { class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { class: "popout-modal", onClick: this.closeMenu }), h("div", { class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { class: {
+        return (h(Host, { key: 'd8a429fb76fa3a1ef80580957fd6481e240f5317', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: '7bf2fffdc59f70baa6674deae32a1bc4b94ad1c7', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '5f040801d741e34fa84396292a7ff2e6c371c004', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: 'e1b5a6eb1689c24845f8dde72d4b4439333889a2', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: 'cfe33959155fc33481c1d71b43e740c97d59447f', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: 'd6bcbb09f3477305ec0dacd2274d7be1b92818c4', class: {
                 ["menu-close-button-container"]: true,
                 ["nav-group-first"]: this.navGroupFirst,
-            } }, h("ic-button", { ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { name: "navigation" })), this.hasButtons && (h("div", { class: {
+            } }, h("ic-button", { key: '29c00c1baf94e77fc12c4f5808b7f959261b9307', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: '8117252bd49a7fb0a884730ed79d059955cd973e', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f7b68f7e0b0860dc30f3477ef49f3b9da41e2625', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: '42a9be2b531c8aeffd12ecbe1b8b089121416def', name: "navigation" })), this.hasButtons && (h("div", { key: '53bd2be53748f6ce6aff7d835e2fa05ae4a4302f', class: {
                 ["menu-buttons-container"]: true,
                 ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-            } }, h("slot", { name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { class: {
+            } }, h("slot", { key: 'fc5df99477f01b812d5ff4fdcadf8766a613734d', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '74d83ccdcd72f225733da95a63313d1ac1fc9cbd', class: {
                 ["menu-status-version-container"]: true,
                 ["status-version-no-buttons"]: !this.hasButtons,
-            } }, this.status !== "" && (h("div", { class: "menu-status" }, h("ic-typography", { variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { class: "menu-version" }, h("ic-typography", { variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
+            } }, this.status !== "" && (h("div", { key: '5b41cca5949cb96006b7660334561c378e039fd9', class: "menu-status" }, h("ic-typography", { key: 'c068f6a9e6f4f3dcb4386185e5b34547c93dcbc2', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: 'bcd01f93742c4a3b1106437da91ec7e6541e5e13', class: "menu-version" }, h("ic-typography", { key: 'aa25f91209bd326e9b2f4f34869885e9e78d263c', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
     }
     static get is() { return "ic-navigation-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -132,15 +153,17 @@ export class NavigationMenu {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The status info to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -150,7 +173,7 @@ export class NavigationMenu {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -165,6 +188,8 @@ export class NavigationMenu {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -174,15 +199,17 @@ export class NavigationMenu {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The version info to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "version",
                 "reflect": false,
                 "defaultValue": "\"\""

package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  private closeButton: HTMLIcButtonElement = null;\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private lastTabStop: HTMLElement = null;\n  private navBarEl: HTMLIcTopNavigationElement;\n  private navGroupFirst: boolean = false;\n  private navItemAboveButtons: boolean = false;\n\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The version info to display.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    const navigationEls = getSlotContent(this.el, \"navigation\");\n    if (navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n      if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n        this.navItemAboveButtons = true;\n      }\n      const firstEl = navigationEls[0] as HTMLElement;\n      if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation) {\n        const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n        //check for slotted content i.e. react router link\n        const slotContent = getSlot(lastEl, \"navigation-item\");\n        if (slotContent !== null) {\n          this.lastTabStop = slotContent as HTMLElement;\n        } else {\n          this.lastTabStop = lastEl;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    if (this.closeButton.focus) {\n      this.closeButton.focus();\n    }\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n        case \"IC-NAVIGATION-ITEM\":\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div\n              class={{\n                [\"menu-status-version-container\"]: true,\n                [\"status-version-no-buttons\"]: !this.hasButtons,\n              }}\n            >\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\nconst NAV_GROUP_TAG = \"IC-NAVIGATION-GROUP\";\nconst NAV_ITEM_TAG = \"IC-NAVIGATION-ITEM\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  private closeButton?: HTMLIcButtonElement;\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private lastTabStop: HTMLElement | null = null;\n  private navBarEl: HTMLIcTopNavigationElement | null;\n  private navGroupFirst: boolean = false;\n  private navigationEls: HTMLElement[];\n  private navItemAboveButtons: boolean = false;\n\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status?: string = \"\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The version info to display.\n   */\n  @Prop() version?: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    this.navigationEls = getSlotContent(this.el, \"navigation\") as HTMLElement[];\n\n    if (this.navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = this.navigationEls[this.navigationEls.length - 1];\n      if (lastEl.tagName === NAV_ITEM_TAG) {\n        this.navItemAboveButtons = true;\n      } else if (lastEl.tagName === NAV_GROUP_TAG) {\n        lastEl.addEventListener(\"navigationGroupExpanded\", ((\n          event: CustomEvent\n        ) => {\n          this.setLastTabStop(event.detail.expanded);\n        }) as EventListener);\n      }\n      const firstEl = this.navigationEls[0];\n      if (firstEl.tagName === NAV_GROUP_TAG) {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation && this.navigationEls) {\n        this.setLastTabStop(false);\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private setLastTabStop = (lastNavGroupExpanded: boolean) => {\n    let lastEl = this.navigationEls[\n      this.navigationEls.length - 1\n    ] as HTMLElement;\n\n    if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {\n      const childNavItems = lastEl.children;\n      lastEl = childNavItems[childNavItems.length - 1] as HTMLElement;\n    }\n\n    if (lastEl.tagName === NAV_ITEM_TAG) {\n      //check for slotted content i.e. react router link\n      const slotContent = getSlot(lastEl, \"navigation-item\");\n      if (slotContent !== null) {\n        lastEl = slotContent as HTMLElement;\n      }\n    }\n\n    this.lastTabStop = lastEl;\n  };\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    this.closeButton?.focus();\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n        case NAV_ITEM_TAG:\n        case NAV_GROUP_TAG:\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div\n              class={{\n                [\"menu-status-version-container\"]: true,\n                [\"status-version-no-buttons\"]: !this.hasButtons,\n              }}\n            >\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-page-header/ic-page-header.js

@@ -13,6 +13,36 @@ import { isSlotUsed, DEVICE_SIZES, getCurrentDeviceSize, checkResizeObserver, }
 export class PageHeader {
     constructor() {
         this.resizeObserver = null;
+        this.areButtonsReversed = false;
+        this.deviceSize = DEVICE_SIZES.XL;
+        /**
+         * The alignment of the page header.
+         */
+        this.aligned = "left";
+        /**
+         * If `true`, a border will be displayed along the bottom of the page header.
+         */
+        this.border = true;
+        /**
+         * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.
+         */
+        this.reverseOrder = false;
+        /**
+         * The size of the page header component.
+         */
+        this.size = "medium";
+        /**
+         * If `true`, the page header will be sticky at all breakpoints.
+         */
+        this.sticky = false;
+        /**
+         *  If `true`, the page header will only be sticky for viewport widths of 992px and above.
+         */
+        this.stickyDesktopOnly = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         this.resizeObserverCallback = () => {
             if (this.reverseOrder && isSlotUsed(this.el, "actions")) {
                 this.applyReverseOrder();
@@ -25,11 +55,12 @@ export class PageHeader {
             this.resizeObserver.observe(this.el);
         };
         this.applyReverseOrder = () => {
+            var _a;
             const currSize = getCurrentDeviceSize();
             if (currSize !== this.deviceSize) {
                 this.deviceSize = currSize;
             }
-            const actionArea = this.el.shadowRoot.querySelector("div.action-area");
+            const actionArea = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("div.action-area");
             const actionHeights = [];
             /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */
             for (let i = 0; i < this.actionContent.length; i++) {
@@ -62,18 +93,6 @@ export class PageHeader {
                 appendActionContent();
             }
         };
-        this.actionContent = undefined;
-        this.areButtonsReversed = false;
-        this.deviceSize = DEVICE_SIZES.XL;
-        this.aligned = "left";
-        this.border = true;
-        this.heading = undefined;
-        this.reverseOrder = false;
-        this.size = "medium";
-        this.sticky = false;
-        this.stickyDesktopOnly = false;
-        this.subheading = undefined;
-        this.theme = "inherit";
     }
     disconnectedCallback() {
         if (this.resizeObserver !== null) {
@@ -87,23 +106,24 @@ export class PageHeader {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
+        var _a, _b;
         const { size, border, heading, subheading, aligned, sticky, stickyDesktopOnly, theme, } = this;
-        const navAriaLabel = heading
-            ? `${heading} page sections`
-            : "navigation-landmark-page-header";
-        return (h(Host, { class: {
-                ["ic-page-header-sticky"]: sticky,
-                ["ic-page-header-sticky-desktop"]: !sticky && stickyDesktopOnly,
+        const navAriaLabel = `${isSlotUsed(this.el, "heading")
+            ? (_b = (_a = this.el.querySelector('[slot="heading"]')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : ""
+            : heading !== null && heading !== void 0 ? heading : ""} page sections`;
+        return (h(Host, { key: 'cf0a316e1397ddc7fb6d3c31dc9a311583e16a91', class: {
+                ["ic-page-header-sticky"]: !!sticky,
+                ["ic-page-header-sticky-desktop"]: !sticky && !!stickyDesktopOnly,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { class: {
-                ["border-bottom"]: border,
+            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { key: 'a4f043e2af90f690fba09b93a4013d1389515e0a', class: {
+                ["border-bottom"]: !!border,
                 ["tabs"]: isSlotUsed(this.el, "tabs"),
-            }, role: "presentation" }, h("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { class: "breadcrumb-area" }, h("slot", { name: "breadcrumbs" }))), h("div", { class: "main-content" }, h("div", { class: "title-area" }, h("div", { class: "header-content" }, h("slot", { name: "heading" }, h("ic-typography", { variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", null, heading))), h("slot", { name: "heading-adornment" })), h("div", { class: {
+            }, role: "presentation" }, h("ic-section-container", { key: '2face790c85ada31be50963b94cb4a238f35472c', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: '54976512713ea354459fc3531070db32feb92e71', class: "breadcrumb-area" }, h("slot", { key: '1ae4415737707e7d83ae0d8d20def16162584d31', name: "breadcrumbs" }))), h("div", { key: '1bb89b5a996f3f1dafcfdefd901e04e7b4e43143', class: "main-content" }, h("div", { key: '0e9da2b22ef20eba75b79727ec52f6451c165547', class: "title-area" }, h("div", { key: '80977a001794dbfbfb8388936b5c08486ab2a55a', class: "header-content" }, h("slot", { key: '011e08fffff718640e5d1fd85deab17aa13f52ec', name: "heading" }, h("ic-typography", { key: '41c906715db6466ca30c3e1826feb8e385a6ed15', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: '17036720f03d87e51c5c35c9c36a4d3ffc44445a' }, heading))), h("slot", { key: '3002be9cc0995887ccc71379062a73380afc289d', name: "heading-adornment" })), h("div", { key: 'e8f563e8010b6167533fbc89dbb7f8c9c760d420', class: {
                 ["subheading-content"]: !!subheading || isSlotUsed(this.el, "subheading"),
                 ["small"]: size === "small",
-            } }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { class: "input-area" }, h("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
-            isSlotUsed(this.el, "tabs")) && (h("div", { class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
-            !isSlotUsed(this.el, "tabs") && h("slot", { name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { "aria-label": navAriaLabel }, h("ic-horizontal-scroll", null, h("ul", { class: "tabs-slot" }, h("slot", { name: "tabs" })))))))))));
+            } }, h("slot", { key: '5ade2c01dfbdb1c808486b126e081c1877a513ff', name: "subheading" }, h("ic-typography", { key: 'fb6900da321f46663774ceab59982e56741f877d', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: 'f4f481e78ace183a6da6533b5fc9cbe5086b5c0b', class: "action-area" }, h("slot", { key: '7d7afb45226d1bcde3e3e4416f2bdf4c08ef2983', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: '2d9c41769a6b4719e81923e43c58fcafc939e139', class: "input-area" }, h("slot", { key: 'b873a5210cbf2bc353a249bcac581d5132f3f36f', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+            isSlotUsed(this.el, "tabs")) && (h("div", { key: 'a9d7f5aa5982d2a0add73f08eae35346009c7509', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
+            !isSlotUsed(this.el, "tabs") && h("slot", { key: '73959a3937f2a1b29dcabf1c6f005f4f51038cbc', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: 'b50e37d8d8463483735ef40ba438cc2ede29c0bd', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: '4d52cf2984deed193908dbbd23e8a14fe8ac0724' }, h("ul", { key: '8cfa92fd9424ea59182b4a20ab2d968351129589', class: "tabs-slot" }, h("slot", { key: 'd59fc58ca6aaa2f266ab64a26071047c89bec440', name: "tabs" })))))))))));
     }
     static get is() { return "ic-page-header"; }
     static get encapsulation() { return "shadow"; }
@@ -124,7 +144,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAlignment",
-                    "resolved": "\"center\" | \"full-width\" | \"left\"",
+                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
                     "references": {
                         "IcAlignment": {
                             "location": "import",
@@ -139,6 +159,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "The alignment of the page header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aligned",
                 "reflect": false,
                 "defaultValue": "\"left\""
@@ -148,7 +170,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -157,6 +179,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "If `true`, a border will be displayed along the bottom of the page header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "border",
                 "reflect": false,
                 "defaultValue": "true"
@@ -166,7 +190,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -175,6 +199,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "The title to render on the page header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false
             },
@@ -183,7 +209,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -192,6 +218,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "reverse-order",
                 "reflect": false,
                 "defaultValue": "false"
@@ -201,7 +229,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -216,6 +244,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "The size of the page header component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -225,7 +255,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -234,6 +264,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "If `true`, the page header will be sticky at all breakpoints."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
@@ -243,7 +275,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -252,6 +284,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "If `true`, the page header will only be sticky for viewport widths of 992px and above."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "sticky-desktop-only",
                 "reflect": false,
                 "defaultValue": "false"
@@ -261,7 +295,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -270,6 +304,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "The subtitle to render on the page header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subheading",
                 "reflect": false
             },
@@ -278,7 +314,7 @@ export class PageHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -293,6 +329,8 @@ export class PageHeader {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""

package/dist/collection/components/ic-page-header/ic-page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcPageHeaderElement;\n\n  @State() actionContent: Node[];\n  @State() areButtonsReversed: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  /**\n   * The size of the page header component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    const appendActionContent = () => {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    };\n\n    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\n    }\n  };\n\n  render() {\n    const {\n      size,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n      theme,\n    } = this;\n\n    const navAriaLabel = heading\n      ? `${heading} page sections`\n      : \"navigation-landmark-page-header\";\n\n    return (\n      <Host\n        class={{\n          [\"ic-page-header-sticky\"]: sticky,\n          [\"ic-page-header-sticky-desktop\"]: !sticky && stickyDesktopOnly,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-label={this.el.ariaLabel || \"page header\"}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n          role=\"presentation\"\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={size === \"small\" ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div\n                  class={{\n                    [\"subheading-content\"]:\n                      !!subheading || isSlotUsed(this.el, \"subheading\"),\n                    [\"small\"]: size === \"small\",\n                  }}\n                >\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"body\">{subheading}</ic-typography>\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav aria-label={navAriaLabel}>\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  private resizeObserver: ResizeObserver | null = null;\n\n  @Element() el: HTMLIcPageHeaderElement;\n\n  @State() actionContent: Node[];\n  @State() areButtonsReversed: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  /**\n   * The size of the page header component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot?.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    const appendActionContent = () => {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    };\n\n    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\n    }\n  };\n\n  render() {\n    const {\n      size,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n      theme,\n    } = this;\n\n    const navAriaLabel = `${\n      isSlotUsed(this.el, \"heading\")\n        ? this.el.querySelector('[slot=\"heading\"]')?.textContent ?? \"\"\n        : heading ?? \"\"\n    } page sections`;\n\n    return (\n      <Host\n        class={{\n          [\"ic-page-header-sticky\"]: !!sticky,\n          [\"ic-page-header-sticky-desktop\"]: !sticky && !!stickyDesktopOnly,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-label={this.el.ariaLabel || \"page header\"}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: !!border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n          role=\"presentation\"\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={size === \"small\" ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div\n                  class={{\n                    [\"subheading-content\"]:\n                      !!subheading || isSlotUsed(this.el, \"subheading\"),\n                    [\"small\"]: size === \"small\",\n                  }}\n                >\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"body\">{subheading}</ic-typography>\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav aria-label={navAriaLabel}>\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}