@ukic/web-components 3.25.0 → 3.26.0

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

@@ -37,7 +37,7 @@ export class TopNavigation {
          */
         this.customMobileBreakpoint = DEVICE_SIZES.L;
         /**
-         *  The URL to navigate to when the app title is clicked.
+         *  The URL to navigate to when the app title or app icon is clicked.
          */
         this.href = "/";
         /**
@@ -60,6 +60,9 @@ export class TopNavigation {
          * The version info to be displayed.
          */
         this.version = "";
+        /** If `true`, the app title will be hidden, but still accessible to screen readers.
+         */
+        this.hideAppTitle = false;
         this.checkSlots = () => {
             this.hasAppIcon = isSlotUsed(this.el, "app-icon");
             this.hasAppTitleSlot = isSlotUsed(this.el, "app-title");
@@ -191,7 +194,7 @@ export class TopNavigation {
         this.foregroundColor = detail.mode;
     }
     render() {
-        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasAppTitleSlot, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
+        const { appTitle, hideAppTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasAppTitleSlot, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
         const hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
@@ -211,19 +214,20 @@ export class TopNavigation {
         const attrs = Component == "a" && {
             href: href,
         };
-        return (h(Host, { key: 'c0c457a694891bb06ad49c6601fb57d83e6ac6c6', class: {
+        return (h(Host, { key: 'dbb0dd3377419a8b10ada09db89524fadafc2af8', class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
                 [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'fd5f04cfce660e81024b45ebee521d73d42a448d', class: "top-navigation" }, h("ic-section-container", { key: '028947110e4a66cccc58659ca164b2938cd7e533', aligned: contentAligned, "full-height": true }, h("header", { key: 'f528842ca7c9fe6a127e53cf7ea0c5af9aeebe79', role: "banner" }, h("div", { key: 'e23371a5539f686060f624053e8b04a2cef1f860', class: "top-panel-container" }, h("div", { key: '25ede4b34cb30ba1d25d3fb06a3f44e48ad4a4c9', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '666eddef4b8be110a1796083432cd754cda18152', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: 'cb7c5cdf6ccc28c5dc5d7699e0332770aa5246f9', class: "app-icon-container" }, h("slot", { key: 'cd21e969e6fd23594aeb2b31468e81d1d68de7f7', name: "app-icon" }))), isSmallDeviceSize &&
-            (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '938a6e6d13bfd92a87baf43934342fb426802d65', class: "app-status" }, h("ic-typography", { key: 'e3e8e83984ead5be2e4869e67640762af42f5f32', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '1129e504a1db3af56d2c931e08bd15f992b5721f', class: "app-version" }, h("ic-typography", { key: 'c6f56458fc5f565055fdb0bde408e6078216d51b', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '4523603a02eeb22eca466afc1d2cfa44755b8f17', class: "search-menu-container" }, h("div", { key: '77ff191542abaa41c8610418d54922e91268d364', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: 'e18aab12917ebdfead1c16c9d508c7feaf7797cb', class: "search-bar-container" }, h("slot", { key: '4bf9ae342c58629ea76dc7de395128afd695dc8b', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '30401c56949e21a33b18166da0ba2b07ad91c3f0', class: "navigation-tabs" }, h("span", { key: '72561ee2554f09e0ff33b29fb257e7dde0a99a0f', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '411b215af2ef320d415af6e189a60dce1b730cdf', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'fac1019061aeaea2ea8197cc0100a23f0cd1a69d',
+            } }, h("div", { key: '2c1e4277d92bd9954765b50b3f78669aa1af8390', class: "top-navigation" }, h("ic-section-container", { key: 'f667d16e1693cd8bf3c45cbddee6777a3f50e21f', aligned: contentAligned, "full-height": true }, h("header", { key: '0b4e0c2a117f54395045cd8b36b1be11da00c1c5', role: "banner" }, h("div", { key: '09614426ebe2917000f92339784df56a9470d3d8', class: "top-panel-container" }, h("div", { key: 'bff8f5c059015150a6aed52717ddc454fb050ccb', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: 'fcd00d5a3dec584f9eb5e3fc89eb66fb1405f1f5', class: "title-link" }, attrs, { "aria-label": hideAppTitle ? `${appTitle}` : undefined }), hasAppIcon && (h("div", { key: '68385821513eca595805f502519f8c11185f1be0', class: "app-icon-container", "aria-hidden": "true" }, h("slot", { key: '9e69b0b4d827ca7b85c39f9a4697a463a51ea6d0', name: "app-icon" }))), !hideAppTitle &&
+            (isSmallDeviceSize &&
+                (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
+                    `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle))))))), hasStatus && (h("div", { key: 'c1f5c9745ff525f8fe55b339592cffed6c94fe59', class: "app-status" }, h("ic-typography", { key: '3eb8bb15698aaca7e4653674238f1f8481f56cd6', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: 'd87b68713d46e53679c98c9dffc31ba4c669472c', class: "app-version" }, h("ic-typography", { key: 'e04e0521c929bb988c227d6c81569e09c47fae45', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '3a276b4d6bf6a27d420febf654f48fd5a54365b7', class: "search-menu-container" }, h("div", { key: '34415f5be77023b8e4cfcb54bc04db4aefe62f9a', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: '8df188fb2b2c5f9ad4b83f775ac003c42c586c28', class: "search-bar-container" }, h("slot", { key: '87c51c5a988a1666fabf77c0c322e24c38da06f7', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '5e9a297d0d55c7668caef0381acea624c1730766', class: "navigation-tabs" }, h("span", { key: '2711b4990964661e5aaf13217dfb4b59837ec56a', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: 'f14341830688b0ec95b81f5c0a031d586b6737ea', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: '1a018cab4bae42d13f8fe0e31ec1c94295e2e5bd',
             // eslint-disable-next-line
             // @ts-ignore
-            monochrome: true, appearance: foregroundColor }, h("ul", { key: 'b85234906c34f1fa03b56903656d6f18eb20829d', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: 'd8ef04882230955d8faba63b13edffeeb969e6e6', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '46b00abe99e079c940d24d4e9693c5445ebcbafa', version: version, status: status, class: {
+            monochrome: true, appearance: foregroundColor }, h("ul", { key: 'c1afc90848573f75bb7091bfdaed21dd463b1964', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '7aae45b91ff85d637a13eacd96c4881a8f7d0366', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '4281b4e7974114e4d9c99c977bcce5721426e915', version: version, status: status, class: {
                 inline,
-            } }, hasIconButtons && (h("div", { key: '29a9b4e6ba1733b2e96ad9b886bb879ade662d41', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '748b40fd29aedee029a4fa27e999cf9844483613', name: "buttons" }))), h("ul", { key: '20b81216ba0c01470673678a14d873fe8cbcaaae', slot: "navigation" }, h("slot", { key: 'fb9e239a48344888b970e865e103b1ee2f9156ed', name: "navigation" }))))));
+            } }, hasIconButtons && (h("div", { key: '2895ff0177e5d71c36e1f2370667f8f97ab2a39b', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '4ed99d20ae4afabc99c550d806932c5d6ea6411d', name: "buttons" }))), h("ul", { key: '4446ad338421b13df915faee66bf960e325da631', slot: "navigation" }, h("slot", { key: 'f67ac2fb347130bf0752ab27cd46ffcc14ef78fb', name: "navigation" }))))));
     }
     static get is() { return "ic-top-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -303,7 +307,7 @@ export class TopNavigation {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL to navigate to when the app title is clicked."
+                    "text": "The URL to navigate to when the app title or app icon is clicked."
                 },
                 "getter": false,
                 "setter": false,
@@ -417,6 +421,26 @@ export class TopNavigation {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "hideAppTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the app title will be hidden, but still accessible to screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-app-title",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "appTitle": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Fragment,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcBrand,\n  IcDeviceSizes,\n  IcValueEventDetail,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon = false;\n  private hasAppTitleSlot = false;\n  private hasIconButtons = false;\n  private hasNavigation = false;\n  private hasSearchSlotContent = false;\n  private mobileSearchButtonEl?: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private searchBar: HTMLIcSearchBarElement | null = null;\n  private menuButtonEl?: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n  @State() hasFullWidthSearchBar = false;\n  @State() mobileSearchBarVisible = false;\n  @State() mobileSearchHiddenOnBlur = false;\n  @State() navMenuVisible = false;\n  @State() searchButtonClick = false;\n  @State() searchValue = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status = \"\";\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 be displayed.\n   */\n  @Prop() version = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle?: string;\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (!this.hasAppTitleSlot) {\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.menuButtonEl?.setFocus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value as string;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasAppTitleSlot = isSlotUsed(this.el, \"app-title\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n\n    if (this.hasAppIcon) {\n      const slottedAppIcon =\n        this.el.querySelector<HTMLElement>('[slot=\"app-icon\"]');\n      if (slottedAppIcon && slottedAppIcon.tagName === \"A\")\n        slottedAppIcon.tabIndex = -1;\n    }\n  };\n\n  private initialiseSearchBar = () => {\n    if (!this.hasSearchSlotContent) return;\n\n    const slot = getSlot(this.el, \"search\");\n    if (slot?.tagName === \"IC-SEARCH-BAR\") {\n      this.searchBar = slot as HTMLIcSearchBarElement;\n    } else if (slot?.tagName === \"FORM\") {\n      this.searchBar = slot.querySelector(\"ic-search-bar\");\n    }\n\n    if (this.searchBar !== null) {\n      this.searchBar.hideLabel = true;\n    }\n  };\n\n  private toggleSearchBar = () => {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (!this.searchBar) return;\n\n    this.mobileSearchButtonEl?.setAttribute(\n      \"aria-label\",\n      `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n    );\n    this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n    this.searchBar.fullWidth = this.mobileSearchBarVisible;\n    if (this.mobileSearchBarVisible) {\n      setTimeout(() => {\n        this.searchBar?.focus();\n      }, 100);\n    }\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu = (show: boolean) => {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  };\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize === this.deviceSize) return;\n\n    this.deviceSize = currSize;\n    if (currSize > this.customMobileBreakpoint) {\n      this.showNavMenu(false);\n      if (this.mobileSearchBarVisible) {\n        this.toggleSearchBar();\n      }\n    }\n    this.icTopNavResized.emit({\n      size: currSize,\n    });\n    if (this.searchBar && document.activeElement === this.searchBar) {\n      this.searchBar.setAttribute(\"hidden\", \"true\");\n      //remove attribute again as this trigger a redraw & applies css\n      this.searchBar.removeAttribute(\"hidden\");\n      setTimeout(() => {\n        this.searchBar?.focus();\n      }, 100);\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasAppTitleSlot,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n      theme,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const isSmallDeviceSize = deviceSize <= DEVICE_SIZES.S;\n\n    const searchButtonSize = isSmallDeviceSize ? \"medium\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? isSmallDeviceSize\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = isSmallDeviceSize ? \"small\" : \"medium\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcBrandForegroundEnum.Dark]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {isSmallDeviceSize &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint ? (\n                        <Fragment>\n                          <slot name=\"search\"></slot>\n                          {hasIconButtons && (\n                            <div class=\"icon-buttons-container\">\n                              <slot name=\"buttons\"></slot>\n                            </div>\n                          )}\n                        </Fragment>\n                      ) : (\n                        <Fragment>\n                          {hasSearchSlotContent && (\n                            <ic-button\n                              id=\"search-toggle-button\"\n                              ref={(el) => (this.mobileSearchButtonEl = el)}\n                              onMouseDown={searchButtonMouseDownHandler}\n                              variant=\"icon-tertiary\"\n                              monochrome\n                              size={searchButtonSize}\n                              aria-label={mobileSearchButtonTitle}\n                              theme={foregroundColor as IcThemeMode}\n                              onClick={searchButtonClickHandler}\n                            >\n                              <slot name=\"toggle-icon\">\n                                <svg\n                                  xmlns=\"http://www.w3.org/2000/svg\"\n                                  viewBox=\"0 0 24 24\"\n                                  fill=\"#ffffff\"\n                                >\n                                  <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                  <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                                </svg>\n                              </slot>\n                            </ic-button>\n                          )}\n                          {hasMenuContent && (\n                            <div class=\"menu-button-container\">\n                              <span\n                                id=\"navigation-landmark-button-text\"\n                                class=\"navigation-landmark-button-text\"\n                                aria-hidden=\"true\"\n                              >\n                                Main navigation button\n                              </span>\n                              <nav\n                                aria-labelledby=\"navigation-landmark-button-text\"\n                                aria-hidden={`${navMenuVisible}`}\n                              >\n                                <ic-button\n                                  id=\"menu-button\"\n                                  ref={(el) => (this.menuButtonEl = el)}\n                                  theme={foregroundColor as IcThemeMode}\n                                  variant=\"secondary\"\n                                  monochrome\n                                  aria-expanded=\"false\"\n                                  aria-haspopup=\"true\"\n                                  aria-label={`Open ${\n                                    hasNavigation ? \"navigation\" : \"app\"\n                                  } menu`}\n                                  size={menuSize}\n                                  onClick={menuButtonClick}\n                                >\n                                  Menu\n                                  <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    height=\"24px\"\n                                    viewBox=\"0 0 24 24\"\n                                    width=\"24px\"\n                                    fill=\"#ffffff\"\n                                    slot=\"left-icon\"\n                                  >\n                                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                    <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                                  </svg>\n                                </ic-button>\n                              </nav>\n                            </div>\n                          )}\n                        </Fragment>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll\n                      // eslint-disable-next-line\n                      // @ts-ignore\n                      monochrome\n                      appearance={foregroundColor}\n                    >\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Fragment,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcBrand,\n  IcDeviceSizes,\n  IcValueEventDetail,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon = false;\n  private hasAppTitleSlot = false;\n  private hasIconButtons = false;\n  private hasNavigation = false;\n  private hasSearchSlotContent = false;\n  private mobileSearchButtonEl?: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private searchBar: HTMLIcSearchBarElement | null = null;\n  private menuButtonEl?: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n  @State() hasFullWidthSearchBar = false;\n  @State() mobileSearchBarVisible = false;\n  @State() mobileSearchHiddenOnBlur = false;\n  @State() navMenuVisible = false;\n  @State() searchButtonClick = false;\n  @State() searchValue = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title or app icon is clicked.\n   */\n  @Prop() href = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status = \"\";\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 be displayed.\n   */\n  @Prop() version = \"\";\n\n  /** If `true`, the app title will be hidden, but still accessible to screen readers.\n   */\n  @Prop() hideAppTitle: boolean = false;\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle?: string;\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (!this.hasAppTitleSlot) {\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.menuButtonEl?.setFocus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value as string;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasAppTitleSlot = isSlotUsed(this.el, \"app-title\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n\n    if (this.hasAppIcon) {\n      const slottedAppIcon =\n        this.el.querySelector<HTMLElement>('[slot=\"app-icon\"]');\n      if (slottedAppIcon && slottedAppIcon.tagName === \"A\")\n        slottedAppIcon.tabIndex = -1;\n    }\n  };\n\n  private initialiseSearchBar = () => {\n    if (!this.hasSearchSlotContent) return;\n\n    const slot = getSlot(this.el, \"search\");\n    if (slot?.tagName === \"IC-SEARCH-BAR\") {\n      this.searchBar = slot as HTMLIcSearchBarElement;\n    } else if (slot?.tagName === \"FORM\") {\n      this.searchBar = slot.querySelector(\"ic-search-bar\");\n    }\n\n    if (this.searchBar !== null) {\n      this.searchBar.hideLabel = true;\n    }\n  };\n\n  private toggleSearchBar = () => {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (!this.searchBar) return;\n\n    this.mobileSearchButtonEl?.setAttribute(\n      \"aria-label\",\n      `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n    );\n    this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n    this.searchBar.fullWidth = this.mobileSearchBarVisible;\n    if (this.mobileSearchBarVisible) {\n      setTimeout(() => {\n        this.searchBar?.focus();\n      }, 100);\n    }\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu = (show: boolean) => {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  };\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize === this.deviceSize) return;\n\n    this.deviceSize = currSize;\n    if (currSize > this.customMobileBreakpoint) {\n      this.showNavMenu(false);\n      if (this.mobileSearchBarVisible) {\n        this.toggleSearchBar();\n      }\n    }\n    this.icTopNavResized.emit({\n      size: currSize,\n    });\n    if (this.searchBar && document.activeElement === this.searchBar) {\n      this.searchBar.setAttribute(\"hidden\", \"true\");\n      //remove attribute again as this trigger a redraw & applies css\n      this.searchBar.removeAttribute(\"hidden\");\n      setTimeout(() => {\n        this.searchBar?.focus();\n      }, 100);\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      hideAppTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasAppTitleSlot,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n      theme,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const isSmallDeviceSize = deviceSize <= DEVICE_SIZES.S;\n\n    const searchButtonSize = isSmallDeviceSize ? \"medium\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? isSmallDeviceSize\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = isSmallDeviceSize ? \"small\" : \"medium\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcBrandForegroundEnum.Dark]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component\n                      class=\"title-link\"\n                      {...attrs}\n                      aria-label={hideAppTitle ? `${appTitle}` : undefined}\n                    >\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {!hideAppTitle &&\n                        (isSmallDeviceSize &&\n                        (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                          <ic-typography\n                            variant=\"subtitle-small\"\n                            aria-label={\n                              (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                              `${appTitle} (${shortAppTitle})`\n                            }\n                          >\n                            <h1>\n                              {shortAppTitleSlot ? (\n                                <slot name=\"short-app-title\"></slot>\n                              ) : (\n                                shortAppTitle\n                              )}\n                            </h1>\n                          </ic-typography>\n                        ) : (\n                          <ic-typography variant={appTitleVariant}>\n                            <h1 class=\"title-wrap\">\n                              {hasAppTitleSlot ? (\n                                <slot name=\"app-title\"></slot>\n                              ) : (\n                                appTitle\n                              )}\n                            </h1>\n                          </ic-typography>\n                        ))}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint ? (\n                        <Fragment>\n                          <slot name=\"search\"></slot>\n                          {hasIconButtons && (\n                            <div class=\"icon-buttons-container\">\n                              <slot name=\"buttons\"></slot>\n                            </div>\n                          )}\n                        </Fragment>\n                      ) : (\n                        <Fragment>\n                          {hasSearchSlotContent && (\n                            <ic-button\n                              id=\"search-toggle-button\"\n                              ref={(el) => (this.mobileSearchButtonEl = el)}\n                              onMouseDown={searchButtonMouseDownHandler}\n                              variant=\"icon-tertiary\"\n                              monochrome\n                              size={searchButtonSize}\n                              aria-label={mobileSearchButtonTitle}\n                              theme={foregroundColor as IcThemeMode}\n                              onClick={searchButtonClickHandler}\n                            >\n                              <slot name=\"toggle-icon\">\n                                <svg\n                                  xmlns=\"http://www.w3.org/2000/svg\"\n                                  viewBox=\"0 0 24 24\"\n                                  fill=\"#ffffff\"\n                                >\n                                  <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                  <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                                </svg>\n                              </slot>\n                            </ic-button>\n                          )}\n                          {hasMenuContent && (\n                            <div class=\"menu-button-container\">\n                              <span\n                                id=\"navigation-landmark-button-text\"\n                                class=\"navigation-landmark-button-text\"\n                                aria-hidden=\"true\"\n                              >\n                                Main navigation button\n                              </span>\n                              <nav\n                                aria-labelledby=\"navigation-landmark-button-text\"\n                                aria-hidden={`${navMenuVisible}`}\n                              >\n                                <ic-button\n                                  id=\"menu-button\"\n                                  ref={(el) => (this.menuButtonEl = el)}\n                                  theme={foregroundColor as IcThemeMode}\n                                  variant=\"secondary\"\n                                  monochrome\n                                  aria-expanded=\"false\"\n                                  aria-haspopup=\"true\"\n                                  aria-label={`Open ${\n                                    hasNavigation ? \"navigation\" : \"app\"\n                                  } menu`}\n                                  size={menuSize}\n                                  onClick={menuButtonClick}\n                                >\n                                  Menu\n                                  <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    height=\"24px\"\n                                    viewBox=\"0 0 24 24\"\n                                    width=\"24px\"\n                                    fill=\"#ffffff\"\n                                    slot=\"left-icon\"\n                                  >\n                                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                    <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                                  </svg>\n                                </ic-button>\n                              </nav>\n                            </div>\n                          )}\n                        </Fragment>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll\n                      // eslint-disable-next-line\n                      // @ts-ignore\n                      monochrome\n                      appearance={foregroundColor}\n                    >\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js

@@ -13,6 +13,7 @@ const defaultArgs = {
   searchSlot: "search",
   buttonsSlot: "buttons",
   theme: "inherit",
+  hideAppTitle: false,
 };
 
 export default {
@@ -45,6 +46,31 @@ export const AppIconAndTitle = {
   },
 };
 
+export const AppIconOnly = {
+  render: () =>
+    html`<ic-top-navigation hide-app-title app-title="Application Name">
+      <svg
+        slot="app-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+        />
+      </svg>
+    </ic-top-navigation>`,
+
+  name: "App icon only",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
 export const SlottedTitleLink = {
   render: () =>
     html`<ic-top-navigation>

package/dist/components/ic-pagination-bar.js.map

@@ -1 +1 @@
-{"file":"ic-pagination-bar.js","mappings":"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","names":[],"sources":["src/components/ic-pagination-bar/ic-pagination-bar.css?tag=ic-pagination-bar&encapsulation=shadow","src/components/ic-pagination-bar/ic-pagination-bar.tsx"],"sourcesContent":[":host() {\n  display: block;\n}\n\n.pagination-bar {\n  height: 3.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--ic-space-xl);\n  padding: var(--ic-space-xs) var(--ic-space-md);\n  box-sizing: border-box;\n\n  --ic-typography-color: var(--ic-pagination-text);\n}\n\n.pagination-bar-left {\n  justify-content: flex-start;\n}\n\n.item-controls {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xl);\n}\n\n.pagination-bar-space-between .item-controls {\n  margin-right: auto;\n}\n\n.items-per-page-holder {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n.items-per-page-input {\n  --input-width: 5rem;\n  --ic-typography-color: var(--ic-pagination-select-content);\n}\n\n.pagination-controls {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xl);\n}\n\n.pagination-controls-wrap {\n  flex-direction: column;\n  align-items: flex-end;\n  gap: var(--ic-space-xs);\n}\n\n.pagination-bar-space-between .pagination-controls {\n  margin-left: auto;\n}\n\n.go-to-page-holder {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n.go-to-page-input {\n  --input-width: var(--ic-space-xl);\n}\n\n.go-to-page-button {\n  --min-width: var(--ic-space-xl);\n}\n\n.items-per-page-control-label {\n  white-space: nowrap;\n}\n\n@media screen and (max-width: 768px) {\n  .pagination-bar {\n    flex-direction: column;\n    align-items: flex-end;\n    height: -moz-fit-content;\n    height: fit-content;\n    gap: var(--ic-space-xs);\n  }\n\n  .pagination-bar-left {\n    align-items: flex-start;\n  }\n}\n\n@media screen and (max-width: 320px) {\n  .item-controls,\n  .pagination-controls {\n    flex-direction: column;\n    align-items: flex-end;\n    gap: var(--ic-space-xs);\n  }\n\n  .pagination-bar-left .item-controls,\n  .pagination-bar-left .pagination-controls,\n  .pagination-bar-space-between .item-controls,\n  .pagination-bar-space-between .pagination-controls {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Listen,\n  h,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { capitalize, checkResizeObserver } from \"../../utils/helpers\";\nimport {\n  IcItemsPerPageChangeEventDetail,\n  IcPageChangeEventDetail,\n} from \"./ic-pagination-bar.types\";\nimport {\n  IcPaginationAlignmentOptions,\n  IcPaginationLabelTypes,\n  IcPaginationTypes,\n} from \"../ic-pagination/ic-pagination.types\";\n\n@Component({\n  tag: \"ic-pagination-bar\",\n  styleUrl: \"ic-pagination-bar.css\",\n  shadow: true,\n})\nexport class PaginationBar {\n  private PAGE_INPUT_FIELD_ID = \"go-to-page-input\";\n\n  private INVALID_PAGE_ERROR = \"Please enter a valid page\";\n\n  private resizeObserver: ResizeObserver | null = null;\n  private pageDropdownEl: HTMLIcSelectElement;\n  private pageInputEl: HTMLIcTextFieldElement;\n  private pageInputTooltipEl: HTMLIcTooltipElement;\n  private paginationBarEl?: HTMLElement;\n  private paginationEl: HTMLIcPaginationElement;\n  private userSetItemsPerPage: number;\n\n  @Element() el: HTMLIcPaginationBarElement;\n\n  @State() capitalizedItemLabel: string;\n\n  @State() capitalizedPageLabel: string;\n\n  @State() activePage: number = 1;\n\n  @State() displayedItemsPerPageOptions?: {\n    label: string;\n    value: string;\n  }[];\n\n  @State() inputError: string = \"Please enter a valid page\";\n\n  @State() itemsPerPage: number = 10;\n\n  @State() itemsPerPageString: string = \"10\";\n\n  @State() lowerBound: number = 1;\n\n  @State() lowerCaseItemLabel: string;\n\n  @State() lowerCasePageLabel: string;\n\n  @State() paginationWidth: number;\n\n  @State() paginationWrapped: boolean = false;\n\n  @State() totalPages: number;\n\n  @State() upperBound: number;\n\n  /**\n   * The accessible label passed down to the pagination component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Pagination Navigation\";\n\n  /**\n   * Sets the alignment of the items in the pagination bar.\n   */\n  @Prop() alignment?: IcPaginationAlignmentOptions = \"right\";\n\n  /**\n   * The current page number to be displayed on the pagination bar.\n   */\n  @Prop() currentPage?: number = 1;\n\n  @Watch(\"currentPage\")\n  watchPageNumberHandler(): void {\n    this.setPaginationBarContent();\n\n    if (typeof this.currentPage === \"number\" && this.currentPage) {\n      if (\n        this.currentPage < 1 ||\n        (this.totalPages && this.currentPage > this.totalPages)\n      ) {\n        console.warn(\n          `The current page (${this.currentPage}) must be a number greater than zero but less than or equal to the total number of pages (${this.totalPages})`\n        );\n      } else {\n        this.activePage = this.currentPage;\n      }\n    }\n  }\n\n  /**\n   * The items per page option to be selected.\n   */\n  @Prop() selectedItemsPerPage?: number;\n\n  @Watch(\"selectedItemsPerPage\")\n  watchSelectedItemsPerPageHandler(): void {\n    if (\n      this.selectedItemsPerPage !== null &&\n      this.selectedItemsPerPage !== undefined\n    ) {\n      this.setSelectedItemsPerPage(\n        this.selectedItemsPerPage,\n        this.displayedItemsPerPageOptions\n      );\n    }\n  }\n\n  /**\n   * If `true`, the 'All' option will be hidden from the 'items per page' select input.\n   */\n  @Prop() hideAllFromItemsPerPage?: boolean = false;\n\n  /**\n   * If `true`, the current page of the simple pagination will not be displayed.\n   */\n  @Prop() hideCurrentPage?: boolean = false;\n\n  /**\n   * If `true`, the first and last page buttons will not be displayed.\n   */\n  @Prop() hideFirstAndLastPageButton?: boolean = false;\n\n  /**\n   * The text which will be used in place of 'Item' on the pagination bar.\n   */\n  @Prop() itemLabel?: string = \"Item\";\n\n  @Watch(\"itemLabel\")\n  watchItemLabelHandler(): void {\n    this.capitalizedItemLabel = capitalize(this.itemLabel!);\n    this.lowerCaseItemLabel = this.itemLabel!.toLowerCase();\n  }\n\n  /**\n   * The options which will be displayed for 'items per page' select input.\n   */\n  @Prop() itemsPerPageOptions?: {\n    label: string;\n    value: string;\n  }[];\n\n  @Watch(\"itemsPerPageOptions\")\n  watchItemsPerPageOptionsHandler(\n    newVal: {\n      label: string;\n      value: string;\n    }[],\n    oldVal: {\n      label: string;\n      value: string;\n    }[]\n  ): void {\n    if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return;\n    this.setPaginationBarContent();\n  }\n\n  /**\n   * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\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   * Whether the displayed pagination is simple or complex.\n   */\n  @Prop() type?: IcPaginationTypes = \"simple\";\n\n  /**\n   * Whether total number of items and current item range or total number of pages and current page is displayed.\n   */\n  @Prop() rangeLabelType?: IcPaginationLabelTypes = \"page\";\n\n  /**\n   * The text which will be used in place of 'Page' on the pagination bar.\n   */\n  @Prop() pageLabel?: string = \"Page\";\n\n  @Watch(\"pageLabel\")\n  watchPageLabelHandler(): void {\n    this.capitalizedPageLabel = capitalize(this.pageLabel!);\n    this.lowerCasePageLabel = this.pageLabel!.toLowerCase();\n  }\n\n  /**\n   * If `true`, the 'go to page' control should be displayed.\n   */\n  @Prop() showGoToPageControl?: boolean = false;\n\n  /**\n   * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.\n   */\n  @Prop() hideRangeLabel?: boolean = false;\n\n  /**\n   * If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed.\n   */\n  @Prop() selectItemsPerPageOnEnter: boolean = true;\n\n  /**\n   * If `true`, the select input to control 'items per page' should be displayed.\n   */\n  @Prop() showItemsPerPageControl?: boolean = false;\n\n  /**\n   * Total number of items to be displayed across all pages.\n   */\n  @Prop() totalItems!: number;\n\n  @Watch(\"totalItems\")\n  watchTotalItemsHandler(): void {\n    this.setPaginationBarContent();\n  }\n\n  /**\n   If `true`, the pagination bar is set to the first page when the 'items per page' changes\n   */\n  @Prop() setToFirstPageOnPaginationChange?: boolean = false;\n\n  @Watch(\"setToFirstPageOnPaginationChange\")\n  watchSetToFirstPageOnPaginationChange(): void {\n    this.setPaginationBarContent();\n  }\n\n  /**\n   * Emitted when a page is navigated to via the 'go to' input.\n   * The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.\n   */\n  @Event() icPageChange: EventEmitter<IcPageChangeEventDetail>;\n\n  /**\n   * Emitted when the items per page option is changed.\n   */\n  @Event() icItemsPerPageChange: EventEmitter<IcItemsPerPageChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.watchPageNumberHandler();\n    this.watchPageLabelHandler();\n    this.watchItemLabelHandler();\n    this.setPaginationBarContent();\n  }\n\n  componentDidLoad(): void {\n    this.paginationWidth = this.paginationBarEl?.clientWidth || 0;\n    checkResizeObserver(this.runResizeObserver);\n    const textField = this.el.shadowRoot?.querySelector(\n      `.${this.PAGE_INPUT_FIELD_ID}`\n    );\n    if (textField) {\n      const input = textField?.shadowRoot?.querySelector(\"input\");\n      if (input) {\n        input.style.textAlign = \"center\";\n        input.style.padding = \"0\";\n      }\n    }\n    this.paginationShouldWrap();\n  }\n\n  @Listen(\"icPageChange\")\n  pageChangeHandler(ev: CustomEvent): void {\n    const page = ev.detail.value;\n    this.changePage(page);\n  }\n\n  private setSelectedItemsPerPage = (\n    selectedItemsPerPage: number,\n    displayedItemsPerPageOptions: { label: string; value: string }[] = []\n  ) => {\n    const isSelectedItemsPerPagePresent = displayedItemsPerPageOptions?.some(\n      ({ value }) => value === this.selectedItemsPerPage?.toString()\n    );\n    if (isSelectedItemsPerPagePresent) {\n      this.setItemsPerPage(selectedItemsPerPage, false);\n    } else {\n      console.error(\n        `The selected items per page option \"${this.selectedItemsPerPage}\" does not exist`\n      );\n      this.setItemsPerPage(+this.totalItems, false);\n    }\n  };\n\n  private changeItemsPerPage = () => {\n    this.setItemsPerPage(Number(this.pageDropdownEl.value));\n\n    this.userSetItemsPerPage = Number(this.pageDropdownEl.value);\n  };\n\n  private changePage = (page: number) => {\n    this.activePage = page;\n    this.lowerBound = page !== 1 ? (page - 1) * this.itemsPerPage + 1 : page;\n    this.setUpperBound();\n  };\n\n  private focusElFromLabel = (el: \"ic-select\" | \"ic-text-field\") => {\n    this.paginationBarEl?.querySelector(el)?.setFocus();\n  };\n\n  private goToPage = () => {\n    const input = this.pageInputEl;\n    const page = Number(input.value);\n    if (page <= this.totalPages && page > 0) {\n      this.changePage(page);\n      this.paginationEl?.setCurrentPage(page);\n      this.activePage = page;\n      input.value = \"\";\n      this.icPageChange.emit({ value: page });\n      this.pageInputTooltipEl.displayTooltip(false, false);\n      input.validationStatus = \"\";\n    } else {\n      this.setInputError(input, this.INVALID_PAGE_ERROR);\n    }\n  };\n\n  private goToPageLabelClickHandler = () => {\n    this.focusElFromLabel(\"ic-text-field\");\n  };\n\n  private handleBlur = () => {\n    const textField = this.pageInputEl;\n    if (\n      (Number(textField.value) <= this.totalPages &&\n        Number(textField.value) > 0) ||\n      textField.value === \"\"\n    ) {\n      textField.validationStatus = \"\";\n    }\n    this.pageInputTooltipEl.displayTooltip(false, false);\n  };\n\n  private handleFocus = () => {\n    if (this.pageInputEl.validationStatus === \"error\") {\n      this.pageInputTooltipEl.displayTooltip(true, true);\n    }\n  };\n\n  private handleInputChange = () => {\n    const inputValue = parseInt(this.pageInputEl.value);\n\n    if (inputValue > this.totalPages || inputValue <= 0) {\n      this.setInputError(this.pageInputEl, this.INVALID_PAGE_ERROR);\n      this.pageInputTooltipEl.displayTooltip(true, true);\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\") {\n      if (this.pageInputEl.validationStatus === \"error\") {\n        this.pageInputTooltipEl.displayTooltip(true, true);\n      } else {\n        this.goToPage();\n      }\n    } else {\n      this.pageInputTooltipEl.displayTooltip(false, false);\n      this.pageInputEl.validationStatus = \"\";\n    }\n  };\n\n  private handleKeyUp = (ev: KeyboardEvent) => {\n    if (\n      Number.isNaN(parseInt(this.pageInputEl.value)) &&\n      ev.key !== \"Backspace\" &&\n      ev.key !== \"Enter\" &&\n      ev.key !== \"Tab\" &&\n      ev.key !== \"Shift\"\n    ) {\n      this.setInputError(this.pageInputEl, \"Please enter a number\", false);\n      this.pageInputTooltipEl.displayTooltip(true, false);\n    }\n  };\n\n  private itemsPerPageLabelClickHandler = () => {\n    this.focusElFromLabel(\"ic-select\");\n  };\n\n  private paginationShouldWrap = () => {\n    if (this.type === \"simple\") {\n      this.paginationWrapped = this.paginationEl.clientHeight > 63;\n    }\n  };\n\n  private runResizeObserver = () => {\n    if (this.paginationBarEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        const { clientWidth } = this.paginationBarEl!;\n        if (\n          clientWidth - this.paginationWidth > 50 ||\n          clientWidth - this.paginationWidth < -50\n        ) {\n          this.paginationWidth = clientWidth;\n          this.paginationShouldWrap();\n        }\n      });\n\n      this.resizeObserver.observe(this.paginationBarEl);\n    }\n  };\n\n  private setInputError = (\n    el: HTMLIcTextFieldElement,\n    error: string,\n    focus = true\n  ) => {\n    this.inputError = error;\n    el.validationStatus = \"error\";\n    if (focus) el.setFocus();\n  };\n\n  private setToFirstPage = () => {\n    const firstPage = 1;\n    this.changePage(firstPage);\n    this.paginationEl?.setCurrentPage(firstPage);\n    this.activePage = firstPage;\n    this.icPageChange.emit({ value: firstPage });\n  };\n\n  private setItemsPerPage = (newValue: number, isUserAction = true) => {\n    if (this.itemsPerPage !== newValue) {\n      this.itemsPerPage = newValue;\n      this.itemsPerPageString = newValue.toString();\n      this.icItemsPerPageChange.emit({\n        value: this.itemsPerPage,\n        isUserAction,\n      });\n\n      if (this.setToFirstPageOnPaginationChange) {\n        this.setToFirstPage();\n      }\n    }\n\n    this.totalPages =\n      this.totalItems > this.itemsPerPage\n        ? Math.ceil(this.totalItems / this.itemsPerPage)\n        : 1;\n\n    this.setUpperBound();\n    if (this.activePage > this.totalPages) {\n      this.paginationEl?.setCurrentPage(this.totalPages);\n      this.activePage = this.totalPages;\n    }\n    this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });\n  };\n\n  private setPaginationBarContent = (): void => {\n    const clonedItemsPerPageOptions: {\n      label: string;\n      value: string;\n    }[] = this.itemsPerPageOptions\n      ? JSON.parse(JSON.stringify(this.itemsPerPageOptions))\n      : null;\n\n    const displayedItemsPerPageOptions =\n      clonedItemsPerPageOptions ||\n      (this.totalItems <= 100\n        ? [\n            { label: \"10\", value: \"10\" },\n            { label: \"25\", value: \"25\" },\n            { label: \"50\", value: \"50\" },\n          ]\n        : [\n            { label: \"25\", value: \"25\" },\n            { label: \"100\", value: \"100\" },\n            { label: \"1000\", value: \"1000\" },\n          ]);\n\n    !this.hideAllFromItemsPerPage &&\n      displayedItemsPerPageOptions.push({\n        label: \"All\",\n        value: String(this.totalItems),\n      });\n\n    this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(\n      ({ value }) => this.totalItems >= Number(value)\n    );\n\n    let lastOptionValue = 0;\n\n    if (this.userSetItemsPerPage) {\n      this.displayedItemsPerPageOptions.some(({ value }) => {\n        lastOptionValue = Number(value);\n        return this.userSetItemsPerPage <= lastOptionValue;\n      });\n      this.setItemsPerPage(lastOptionValue);\n    } else {\n      if (\n        this.selectedItemsPerPage !== null &&\n        this.selectedItemsPerPage !== undefined\n      ) {\n        this.setSelectedItemsPerPage(\n          this.selectedItemsPerPage,\n          this.displayedItemsPerPageOptions\n        );\n      } else {\n        const updated = this.displayedItemsPerPageOptions.some(({ value }) => {\n          lastOptionValue = Number(value);\n          return this.itemsPerPage <= lastOptionValue;\n        });\n        this.setItemsPerPage(\n          updated || (!updated && this.itemsPerPage > lastOptionValue)\n            ? lastOptionValue\n            : this.itemsPerPage,\n          false\n        );\n      }\n    }\n  };\n\n  private setUpperBound = () => {\n    this.upperBound = Math.min(\n      this.lowerBound + this.itemsPerPage - 1,\n      this.totalItems\n    );\n  };\n\n  render() {\n    const {\n      accessibleLabel,\n      alignment,\n      displayedItemsPerPageOptions,\n      PAGE_INPUT_FIELD_ID,\n      type,\n      rangeLabelType,\n      hideRangeLabel,\n      showItemsPerPageControl,\n      showGoToPageControl,\n      pageLabel,\n      capitalizedPageLabel,\n      lowerCasePageLabel,\n      capitalizedItemLabel,\n      lowerCaseItemLabel,\n      totalPages,\n      activePage,\n      itemsPerPageString,\n      theme,\n      monochrome,\n      selectItemsPerPageOnEnter,\n      hideCurrentPage,\n      hideFirstAndLastPageButton,\n    } = this;\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <div\n          class={{\n            [\"pagination-bar\"]: true,\n            [`pagination-bar-${alignment}`]: true,\n          }}\n          ref={(el) => (this.paginationBarEl = el)}\n        >\n          {(!hideRangeLabel || showItemsPerPageControl) && (\n            <div class=\"item-controls\">\n              {showItemsPerPageControl && (\n                <div class=\"items-per-page-holder\">\n                  <ic-typography\n                    class={{\n                      [\"items-per-page-control-label\"]: true,\n                    }}\n                    variant=\"label\"\n                    onClick={this.itemsPerPageLabelClickHandler}\n                  >\n                    {capitalizedItemLabel}s per {lowerCasePageLabel}\n                  </ic-typography>\n                  <ic-select\n                    theme={theme}\n                    size=\"small\"\n                    label=\"items-per-page-input\"\n                    class=\"items-per-page-input\"\n                    hideLabel\n                    options={displayedItemsPerPageOptions}\n                    selectOnEnter={selectItemsPerPageOnEnter}\n                    value={itemsPerPageString}\n                    onIcChange={this.changeItemsPerPage}\n                    ref={(el: HTMLIcSelectElement | undefined) =>\n                      (this.pageDropdownEl = el!)\n                    }\n                  ></ic-select>\n                </div>\n              )}\n              {!hideRangeLabel &&\n                (rangeLabelType === \"data\" ? (\n                  <ic-typography\n                    class={{\n                      [\"item-pagination-label\"]: true,\n                    }}\n                    variant=\"label\"\n                    aria-live=\"polite\"\n                  >\n                    {this.upperBound === 0 && `0 ${lowerCaseItemLabel}s`}\n                    {this.upperBound > 0 &&\n                      `${this.lowerBound} - ${this.upperBound} of ${\n                        this.totalItems\n                      } ${lowerCaseItemLabel}${this.totalItems > 1 ? \"s\" : \"\"}`}\n                  </ic-typography>\n                ) : (\n                  <ic-typography\n                    class={{\n                      [\"page-pagination-label\"]: true,\n                    }}\n                    variant=\"label\"\n                    aria-live=\"polite\"\n                  >\n                    {capitalizedPageLabel} {activePage} of {totalPages}\n                  </ic-typography>\n                ))}\n            </div>\n          )}\n          <div\n            class={{\n              [\"pagination-controls\"]: true,\n              [\"pagination-controls-wrap\"]: this.paginationWrapped,\n            }}\n          >\n            <div class=\"pagination-holder\">\n              <ic-pagination\n                accessibleLabel={accessibleLabel}\n                type={type}\n                pages={totalPages}\n                label={pageLabel}\n                ref={(el: HTMLIcPaginationElement | undefined) =>\n                  (this.paginationEl = el!)\n                }\n                currentPage={activePage}\n                theme={theme}\n                monochrome={monochrome}\n                hideCurrentPage={hideCurrentPage}\n                hideFirstAndLastPageButton={hideFirstAndLastPageButton}\n              ></ic-pagination>\n            </div>\n            {showGoToPageControl && (\n              <div class=\"go-to-page-holder\">\n                <ic-typography\n                  variant=\"label\"\n                  onClick={this.goToPageLabelClickHandler}\n                >\n                  Go to {lowerCasePageLabel}\n                </ic-typography>\n                <ic-tooltip\n                  label={this.inputError}\n                  target={`#${PAGE_INPUT_FIELD_ID}`}\n                  disableHover\n                  disableClick\n                  ref={(el: HTMLIcTooltipElement | undefined) =>\n                    (this.pageInputTooltipEl = el!)\n                  }\n                >\n                  <ic-text-field\n                    theme={theme}\n                    type=\"number\"\n                    size=\"small\"\n                    label={PAGE_INPUT_FIELD_ID}\n                    class={PAGE_INPUT_FIELD_ID}\n                    id={PAGE_INPUT_FIELD_ID}\n                    hideLabel\n                    onKeyDown={this.handleKeydown}\n                    onKeyUp={this.handleKeyUp}\n                    onInput={this.handleInputChange}\n                    max={totalPages}\n                    min=\"1\"\n                    validationInlineInternal\n                    onBlur={this.handleBlur}\n                    onFocus={this.handleFocus}\n                    ref={(el: HTMLIcTextFieldElement | undefined) =>\n                      (this.pageInputEl = el!)\n                    }\n                  ></ic-text-field>\n                </ic-tooltip>\n                <ic-button\n                  variant=\"secondary\"\n                  onClick={this.goToPage}\n                  size=\"small\"\n                  class=\"go-to-page-button\"\n                >\n                  Go\n                </ic-button>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-pagination-bar.js","mappings":"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","names":[],"sources":["src/components/ic-pagination-bar/ic-pagination-bar.css?tag=ic-pagination-bar&encapsulation=shadow","src/components/ic-pagination-bar/ic-pagination-bar.tsx"],"sourcesContent":[":host() {\n  display: block;\n}\n\n.pagination-bar {\n  height: 3.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--ic-space-xl);\n  padding: var(--ic-space-xs) var(--ic-space-md);\n  box-sizing: border-box;\n\n  --ic-typography-color: var(--ic-pagination-text);\n}\n\n.pagination-bar-left {\n  justify-content: flex-start;\n}\n\n.item-controls {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xl);\n}\n\n.pagination-bar-space-between .item-controls {\n  margin-right: auto;\n}\n\n.items-per-page-holder {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n.items-per-page-input {\n  --input-width: 5rem;\n  --ic-typography-color: var(--ic-pagination-select-content);\n}\n\n.pagination-controls {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xl);\n}\n\n.pagination-controls-wrap {\n  flex-direction: column;\n  align-items: flex-end;\n  gap: var(--ic-space-xs);\n}\n\n.pagination-bar-space-between .pagination-controls {\n  margin-left: auto;\n}\n\n.go-to-page-holder {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n.go-to-page-input {\n  --input-width: var(--ic-space-xl);\n}\n\n.go-to-page-button {\n  --min-width: var(--ic-space-xl);\n}\n\n.items-per-page-control-label {\n  white-space: nowrap;\n}\n\n@media screen and (max-width: 768px) {\n  .pagination-bar {\n    flex-direction: column;\n    align-items: flex-end;\n    height: fit-content;\n    gap: var(--ic-space-xs);\n  }\n\n  .pagination-bar-left {\n    align-items: flex-start;\n  }\n}\n\n@media screen and (max-width: 320px) {\n  .item-controls,\n  .pagination-controls {\n    flex-direction: column;\n    align-items: flex-end;\n    gap: var(--ic-space-xs);\n  }\n\n  .pagination-bar-left .item-controls,\n  .pagination-bar-left .pagination-controls,\n  .pagination-bar-space-between .item-controls,\n  .pagination-bar-space-between .pagination-controls {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Listen,\n  h,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { capitalize, checkResizeObserver } from \"../../utils/helpers\";\nimport {\n  IcItemsPerPageChangeEventDetail,\n  IcPageChangeEventDetail,\n} from \"./ic-pagination-bar.types\";\nimport {\n  IcPaginationAlignmentOptions,\n  IcPaginationLabelTypes,\n  IcPaginationTypes,\n} from \"../ic-pagination/ic-pagination.types\";\n\n@Component({\n  tag: \"ic-pagination-bar\",\n  styleUrl: \"ic-pagination-bar.css\",\n  shadow: true,\n})\nexport class PaginationBar {\n  private PAGE_INPUT_FIELD_ID = \"go-to-page-input\";\n\n  private INVALID_PAGE_ERROR = \"Please enter a valid page\";\n\n  private resizeObserver: ResizeObserver | null = null;\n  private pageDropdownEl: HTMLIcSelectElement;\n  private pageInputEl: HTMLIcTextFieldElement;\n  private pageInputTooltipEl: HTMLIcTooltipElement;\n  private paginationBarEl?: HTMLElement;\n  private paginationEl: HTMLIcPaginationElement;\n  private userSetItemsPerPage: number;\n\n  @Element() el: HTMLIcPaginationBarElement;\n\n  @State() capitalizedItemLabel: string;\n\n  @State() capitalizedPageLabel: string;\n\n  @State() activePage: number = 1;\n\n  @State() displayedItemsPerPageOptions?: {\n    label: string;\n    value: string;\n  }[];\n\n  @State() inputError: string = \"Please enter a valid page\";\n\n  @State() itemsPerPage: number = 10;\n\n  @State() itemsPerPageString: string = \"10\";\n\n  @State() lowerBound: number = 1;\n\n  @State() lowerCaseItemLabel: string;\n\n  @State() lowerCasePageLabel: string;\n\n  @State() paginationWidth: number;\n\n  @State() paginationWrapped: boolean = false;\n\n  @State() totalPages: number;\n\n  @State() upperBound: number;\n\n  /**\n   * The accessible label passed down to the pagination component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Pagination Navigation\";\n\n  /**\n   * Sets the alignment of the items in the pagination bar.\n   */\n  @Prop() alignment?: IcPaginationAlignmentOptions = \"right\";\n\n  /**\n   * The current page number to be displayed on the pagination bar.\n   */\n  @Prop() currentPage?: number = 1;\n\n  @Watch(\"currentPage\")\n  watchPageNumberHandler(): void {\n    this.setPaginationBarContent();\n\n    if (typeof this.currentPage === \"number\" && this.currentPage) {\n      if (\n        this.currentPage < 1 ||\n        (this.totalPages && this.currentPage > this.totalPages)\n      ) {\n        console.warn(\n          `The current page (${this.currentPage}) must be a number greater than zero but less than or equal to the total number of pages (${this.totalPages})`\n        );\n      } else {\n        this.activePage = this.currentPage;\n      }\n    }\n  }\n\n  /**\n   * The items per page option to be selected.\n   */\n  @Prop() selectedItemsPerPage?: number;\n\n  @Watch(\"selectedItemsPerPage\")\n  watchSelectedItemsPerPageHandler(): void {\n    if (\n      this.selectedItemsPerPage !== null &&\n      this.selectedItemsPerPage !== undefined\n    ) {\n      this.setSelectedItemsPerPage(\n        this.selectedItemsPerPage,\n        this.displayedItemsPerPageOptions\n      );\n    }\n  }\n\n  /**\n   * If `true`, the 'All' option will be hidden from the 'items per page' select input.\n   */\n  @Prop() hideAllFromItemsPerPage?: boolean = false;\n\n  /**\n   * If `true`, the current page of the simple pagination will not be displayed.\n   */\n  @Prop() hideCurrentPage?: boolean = false;\n\n  /**\n   * If `true`, the first and last page buttons will not be displayed.\n   */\n  @Prop() hideFirstAndLastPageButton?: boolean = false;\n\n  /**\n   * The text which will be used in place of 'Item' on the pagination bar.\n   */\n  @Prop() itemLabel?: string = \"Item\";\n\n  @Watch(\"itemLabel\")\n  watchItemLabelHandler(): void {\n    this.capitalizedItemLabel = capitalize(this.itemLabel!);\n    this.lowerCaseItemLabel = this.itemLabel!.toLowerCase();\n  }\n\n  /**\n   * The options which will be displayed for 'items per page' select input.\n   */\n  @Prop() itemsPerPageOptions?: {\n    label: string;\n    value: string;\n  }[];\n\n  @Watch(\"itemsPerPageOptions\")\n  watchItemsPerPageOptionsHandler(\n    newVal: {\n      label: string;\n      value: string;\n    }[],\n    oldVal: {\n      label: string;\n      value: string;\n    }[]\n  ): void {\n    if (JSON.stringify(newVal) === JSON.stringify(oldVal)) return;\n    this.setPaginationBarContent();\n  }\n\n  /**\n   * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\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   * Whether the displayed pagination is simple or complex.\n   */\n  @Prop() type?: IcPaginationTypes = \"simple\";\n\n  /**\n   * Whether total number of items and current item range or total number of pages and current page is displayed.\n   */\n  @Prop() rangeLabelType?: IcPaginationLabelTypes = \"page\";\n\n  /**\n   * The text which will be used in place of 'Page' on the pagination bar.\n   */\n  @Prop() pageLabel?: string = \"Page\";\n\n  @Watch(\"pageLabel\")\n  watchPageLabelHandler(): void {\n    this.capitalizedPageLabel = capitalize(this.pageLabel!);\n    this.lowerCasePageLabel = this.pageLabel!.toLowerCase();\n  }\n\n  /**\n   * If `true`, the 'go to page' control should be displayed.\n   */\n  @Prop() showGoToPageControl?: boolean = false;\n\n  /**\n   * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.\n   */\n  @Prop() hideRangeLabel?: boolean = false;\n\n  /**\n   * If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed.\n   */\n  @Prop() selectItemsPerPageOnEnter: boolean = true;\n\n  /**\n   * If `true`, the select input to control 'items per page' should be displayed.\n   */\n  @Prop() showItemsPerPageControl?: boolean = false;\n\n  /**\n   * Total number of items to be displayed across all pages.\n   */\n  @Prop() totalItems!: number;\n\n  @Watch(\"totalItems\")\n  watchTotalItemsHandler(): void {\n    this.setPaginationBarContent();\n  }\n\n  /**\n   If `true`, the pagination bar is set to the first page when the 'items per page' changes\n   */\n  @Prop() setToFirstPageOnPaginationChange?: boolean = false;\n\n  @Watch(\"setToFirstPageOnPaginationChange\")\n  watchSetToFirstPageOnPaginationChange(): void {\n    this.setPaginationBarContent();\n  }\n\n  /**\n   * Emitted when a page is navigated to via the 'go to' input.\n   * The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.\n   */\n  @Event() icPageChange: EventEmitter<IcPageChangeEventDetail>;\n\n  /**\n   * Emitted when the items per page option is changed.\n   */\n  @Event() icItemsPerPageChange: EventEmitter<IcItemsPerPageChangeEventDetail>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.watchPageNumberHandler();\n    this.watchPageLabelHandler();\n    this.watchItemLabelHandler();\n    this.setPaginationBarContent();\n  }\n\n  componentDidLoad(): void {\n    this.paginationWidth = this.paginationBarEl?.clientWidth || 0;\n    checkResizeObserver(this.runResizeObserver);\n    const textField = this.el.shadowRoot?.querySelector(\n      `.${this.PAGE_INPUT_FIELD_ID}`\n    );\n    if (textField) {\n      const input = textField?.shadowRoot?.querySelector(\"input\");\n      if (input) {\n        input.style.textAlign = \"center\";\n        input.style.padding = \"0\";\n      }\n    }\n    this.paginationShouldWrap();\n  }\n\n  @Listen(\"icPageChange\")\n  pageChangeHandler(ev: CustomEvent): void {\n    const page = ev.detail.value;\n    this.changePage(page);\n  }\n\n  private setSelectedItemsPerPage = (\n    selectedItemsPerPage: number,\n    displayedItemsPerPageOptions: { label: string; value: string }[] = []\n  ) => {\n    const isSelectedItemsPerPagePresent = displayedItemsPerPageOptions?.some(\n      ({ value }) => value === this.selectedItemsPerPage?.toString()\n    );\n    if (isSelectedItemsPerPagePresent) {\n      this.setItemsPerPage(selectedItemsPerPage, false);\n    } else {\n      console.error(\n        `The selected items per page option \"${this.selectedItemsPerPage}\" does not exist`\n      );\n      this.setItemsPerPage(+this.totalItems, false);\n    }\n  };\n\n  private changeItemsPerPage = () => {\n    this.setItemsPerPage(Number(this.pageDropdownEl.value));\n\n    this.userSetItemsPerPage = Number(this.pageDropdownEl.value);\n  };\n\n  private changePage = (page: number) => {\n    this.activePage = page;\n    this.lowerBound = page !== 1 ? (page - 1) * this.itemsPerPage + 1 : page;\n    this.setUpperBound();\n  };\n\n  private focusElFromLabel = (el: \"ic-select\" | \"ic-text-field\") => {\n    this.paginationBarEl?.querySelector(el)?.setFocus();\n  };\n\n  private goToPage = () => {\n    const input = this.pageInputEl;\n    const page = Number(input.value);\n    if (page <= this.totalPages && page > 0) {\n      this.changePage(page);\n      this.paginationEl?.setCurrentPage(page);\n      this.activePage = page;\n      input.value = \"\";\n      this.icPageChange.emit({ value: page });\n      this.pageInputTooltipEl.displayTooltip(false, false);\n      input.validationStatus = \"\";\n    } else {\n      this.setInputError(input, this.INVALID_PAGE_ERROR);\n    }\n  };\n\n  private goToPageLabelClickHandler = () => {\n    this.focusElFromLabel(\"ic-text-field\");\n  };\n\n  private handleBlur = () => {\n    const textField = this.pageInputEl;\n    if (\n      (Number(textField.value) <= this.totalPages &&\n        Number(textField.value) > 0) ||\n      textField.value === \"\"\n    ) {\n      textField.validationStatus = \"\";\n    }\n    this.pageInputTooltipEl.displayTooltip(false, false);\n  };\n\n  private handleFocus = () => {\n    if (this.pageInputEl.validationStatus === \"error\") {\n      this.pageInputTooltipEl.displayTooltip(true, true);\n    }\n  };\n\n  private handleInputChange = () => {\n    const inputValue = parseInt(this.pageInputEl.value);\n\n    if (inputValue > this.totalPages || inputValue <= 0) {\n      this.setInputError(this.pageInputEl, this.INVALID_PAGE_ERROR);\n      this.pageInputTooltipEl.displayTooltip(true, true);\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\") {\n      if (this.pageInputEl.validationStatus === \"error\") {\n        this.pageInputTooltipEl.displayTooltip(true, true);\n      } else {\n        this.goToPage();\n      }\n    } else {\n      this.pageInputTooltipEl.displayTooltip(false, false);\n      this.pageInputEl.validationStatus = \"\";\n    }\n  };\n\n  private handleKeyUp = (ev: KeyboardEvent) => {\n    if (\n      Number.isNaN(parseInt(this.pageInputEl.value)) &&\n      ev.key !== \"Backspace\" &&\n      ev.key !== \"Enter\" &&\n      ev.key !== \"Tab\" &&\n      ev.key !== \"Shift\"\n    ) {\n      this.setInputError(this.pageInputEl, \"Please enter a number\", false);\n      this.pageInputTooltipEl.displayTooltip(true, false);\n    }\n  };\n\n  private itemsPerPageLabelClickHandler = () => {\n    this.focusElFromLabel(\"ic-select\");\n  };\n\n  private paginationShouldWrap = () => {\n    if (this.type === \"simple\") {\n      this.paginationWrapped = this.paginationEl.clientHeight > 63;\n    }\n  };\n\n  private runResizeObserver = () => {\n    if (this.paginationBarEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        const { clientWidth } = this.paginationBarEl!;\n        if (\n          clientWidth - this.paginationWidth > 50 ||\n          clientWidth - this.paginationWidth < -50\n        ) {\n          this.paginationWidth = clientWidth;\n          this.paginationShouldWrap();\n        }\n      });\n\n      this.resizeObserver.observe(this.paginationBarEl);\n    }\n  };\n\n  private setInputError = (\n    el: HTMLIcTextFieldElement,\n    error: string,\n    focus = true\n  ) => {\n    this.inputError = error;\n    el.validationStatus = \"error\";\n    if (focus) el.setFocus();\n  };\n\n  private setToFirstPage = () => {\n    const firstPage = 1;\n    this.changePage(firstPage);\n    this.paginationEl?.setCurrentPage(firstPage);\n    this.activePage = firstPage;\n    this.icPageChange.emit({ value: firstPage });\n  };\n\n  private setItemsPerPage = (newValue: number, isUserAction = true) => {\n    if (this.itemsPerPage !== newValue) {\n      this.itemsPerPage = newValue;\n      this.itemsPerPageString = newValue.toString();\n      this.icItemsPerPageChange.emit({\n        value: this.itemsPerPage,\n        isUserAction,\n      });\n\n      if (this.setToFirstPageOnPaginationChange) {\n        this.setToFirstPage();\n      }\n    }\n\n    this.totalPages =\n      this.totalItems > this.itemsPerPage\n        ? Math.ceil(this.totalItems / this.itemsPerPage)\n        : 1;\n\n    this.setUpperBound();\n    if (this.activePage > this.totalPages) {\n      this.paginationEl?.setCurrentPage(this.totalPages);\n      this.activePage = this.totalPages;\n    }\n    this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });\n  };\n\n  private setPaginationBarContent = (): void => {\n    const clonedItemsPerPageOptions: {\n      label: string;\n      value: string;\n    }[] = this.itemsPerPageOptions\n      ? JSON.parse(JSON.stringify(this.itemsPerPageOptions))\n      : null;\n\n    const displayedItemsPerPageOptions =\n      clonedItemsPerPageOptions ||\n      (this.totalItems <= 100\n        ? [\n            { label: \"10\", value: \"10\" },\n            { label: \"25\", value: \"25\" },\n            { label: \"50\", value: \"50\" },\n          ]\n        : [\n            { label: \"25\", value: \"25\" },\n            { label: \"100\", value: \"100\" },\n            { label: \"1000\", value: \"1000\" },\n          ]);\n\n    !this.hideAllFromItemsPerPage &&\n      displayedItemsPerPageOptions.push({\n        label: \"All\",\n        value: String(this.totalItems),\n      });\n\n    this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(\n      ({ value }) => this.totalItems >= Number(value)\n    );\n\n    let lastOptionValue = 0;\n\n    if (this.userSetItemsPerPage) {\n      this.displayedItemsPerPageOptions.some(({ value }) => {\n        lastOptionValue = Number(value);\n        return this.userSetItemsPerPage <= lastOptionValue;\n      });\n      this.setItemsPerPage(lastOptionValue);\n    } else {\n      if (\n        this.selectedItemsPerPage !== null &&\n        this.selectedItemsPerPage !== undefined\n      ) {\n        this.setSelectedItemsPerPage(\n          this.selectedItemsPerPage,\n          this.displayedItemsPerPageOptions\n        );\n      } else {\n        const updated = this.displayedItemsPerPageOptions.some(({ value }) => {\n          lastOptionValue = Number(value);\n          return this.itemsPerPage <= lastOptionValue;\n        });\n        this.setItemsPerPage(\n          updated || (!updated && this.itemsPerPage > lastOptionValue)\n            ? lastOptionValue\n            : this.itemsPerPage,\n          false\n        );\n      }\n    }\n  };\n\n  private setUpperBound = () => {\n    this.upperBound = Math.min(\n      this.lowerBound + this.itemsPerPage - 1,\n      this.totalItems\n    );\n  };\n\n  render() {\n    const {\n      accessibleLabel,\n      alignment,\n      displayedItemsPerPageOptions,\n      PAGE_INPUT_FIELD_ID,\n      type,\n      rangeLabelType,\n      hideRangeLabel,\n      showItemsPerPageControl,\n      showGoToPageControl,\n      pageLabel,\n      capitalizedPageLabel,\n      lowerCasePageLabel,\n      capitalizedItemLabel,\n      lowerCaseItemLabel,\n      totalPages,\n      activePage,\n      itemsPerPageString,\n      theme,\n      monochrome,\n      selectItemsPerPageOnEnter,\n      hideCurrentPage,\n      hideFirstAndLastPageButton,\n    } = this;\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <div\n          class={{\n            [\"pagination-bar\"]: true,\n            [`pagination-bar-${alignment}`]: true,\n          }}\n          ref={(el) => (this.paginationBarEl = el)}\n        >\n          {(!hideRangeLabel || showItemsPerPageControl) && (\n            <div class=\"item-controls\">\n              {showItemsPerPageControl && (\n                <div class=\"items-per-page-holder\">\n                  <ic-typography\n                    class={{\n                      [\"items-per-page-control-label\"]: true,\n                    }}\n                    variant=\"label\"\n                    onClick={this.itemsPerPageLabelClickHandler}\n                  >\n                    {capitalizedItemLabel}s per {lowerCasePageLabel}\n                  </ic-typography>\n                  <ic-select\n                    theme={theme}\n                    size=\"small\"\n                    label=\"items-per-page-input\"\n                    class=\"items-per-page-input\"\n                    hideLabel\n                    options={displayedItemsPerPageOptions}\n                    selectOnEnter={selectItemsPerPageOnEnter}\n                    value={itemsPerPageString}\n                    onIcChange={this.changeItemsPerPage}\n                    ref={(el: HTMLIcSelectElement | undefined) =>\n                      (this.pageDropdownEl = el!)\n                    }\n                  ></ic-select>\n                </div>\n              )}\n              {!hideRangeLabel &&\n                (rangeLabelType === \"data\" ? (\n                  <ic-typography\n                    class={{\n                      [\"item-pagination-label\"]: true,\n                    }}\n                    variant=\"label\"\n                    aria-live=\"polite\"\n                  >\n                    {this.upperBound === 0 && `0 ${lowerCaseItemLabel}s`}\n                    {this.upperBound > 0 &&\n                      `${this.lowerBound} - ${this.upperBound} of ${\n                        this.totalItems\n                      } ${lowerCaseItemLabel}${this.totalItems > 1 ? \"s\" : \"\"}`}\n                  </ic-typography>\n                ) : (\n                  <ic-typography\n                    class={{\n                      [\"page-pagination-label\"]: true,\n                    }}\n                    variant=\"label\"\n                    aria-live=\"polite\"\n                  >\n                    {capitalizedPageLabel} {activePage} of {totalPages}\n                  </ic-typography>\n                ))}\n            </div>\n          )}\n          <div\n            class={{\n              [\"pagination-controls\"]: true,\n              [\"pagination-controls-wrap\"]: this.paginationWrapped,\n            }}\n          >\n            <div class=\"pagination-holder\">\n              <ic-pagination\n                accessibleLabel={accessibleLabel}\n                type={type}\n                pages={totalPages}\n                label={pageLabel}\n                ref={(el: HTMLIcPaginationElement | undefined) =>\n                  (this.paginationEl = el!)\n                }\n                currentPage={activePage}\n                theme={theme}\n                monochrome={monochrome}\n                hideCurrentPage={hideCurrentPage}\n                hideFirstAndLastPageButton={hideFirstAndLastPageButton}\n              ></ic-pagination>\n            </div>\n            {showGoToPageControl && (\n              <div class=\"go-to-page-holder\">\n                <ic-typography\n                  variant=\"label\"\n                  onClick={this.goToPageLabelClickHandler}\n                >\n                  Go to {lowerCasePageLabel}\n                </ic-typography>\n                <ic-tooltip\n                  label={this.inputError}\n                  target={`#${PAGE_INPUT_FIELD_ID}`}\n                  disableHover\n                  disableClick\n                  ref={(el: HTMLIcTooltipElement | undefined) =>\n                    (this.pageInputTooltipEl = el!)\n                  }\n                >\n                  <ic-text-field\n                    theme={theme}\n                    type=\"number\"\n                    size=\"small\"\n                    label={PAGE_INPUT_FIELD_ID}\n                    class={PAGE_INPUT_FIELD_ID}\n                    id={PAGE_INPUT_FIELD_ID}\n                    hideLabel\n                    onKeyDown={this.handleKeydown}\n                    onKeyUp={this.handleKeyUp}\n                    onInput={this.handleInputChange}\n                    max={totalPages}\n                    min=\"1\"\n                    validationInlineInternal\n                    onBlur={this.handleBlur}\n                    onFocus={this.handleFocus}\n                    ref={(el: HTMLIcTextFieldElement | undefined) =>\n                      (this.pageInputEl = el!)\n                    }\n                  ></ic-text-field>\n                </ic-tooltip>\n                <ic-button\n                  variant=\"secondary\"\n                  onClick={this.goToPage}\n                  size=\"small\"\n                  class=\"go-to-page-button\"\n                >\n                  Go\n                </ic-button>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}