@ukic/web-components 2.1.0-beta.8 → 2.2.0

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} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\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  @Element() el: HTMLIcTopNavigationElement;\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\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  @State() menuOpen: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchValue: string = \"\";\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n\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 gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  private hasAppIcon: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private searchBar: HTMLIcSearchBarElement = null;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLIcButtonElement;\n    menuBtn.setFocus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.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 = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.setFocus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n    } else {\n      this.icNavigationMenuClosed.emit();\n    }\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 resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\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.setFocus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned=\"full-width\" full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      <ic-typography variant={appTitleVariant}>\n                        <h1 class=\"title-wrap\">\n                          {isSlotUsed(this.el, \"app-title\") ? (\n                            <slot name=\"app-title\"></slot>\n                          ) : (\n                            this.appTitle\n                          )}\n                        </h1>\n                      </ic-typography>\n                    </Component>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            appearance={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"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\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n                        <div class=\"menu-button-container\">\n                          <nav\n                            aria-labelledby=\"navigation-landmark-text\"\n                            aria-hidden={\n                              !this.hasNavigation || this.navMenuVisible\n                                ? \"true\"\n                                : \"false\"\n                            }\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.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=\"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                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ul class=\"navigation-item-list\">\n                      <slot name=\"navigation\"></slot>\n                    </ul>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\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} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\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: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() menuOpen: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = 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: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\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 gatbsy 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  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    menuBtn.focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.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 = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n      document.body.style.height = \"100%\";\n      document.body.style.overflow = \"hidden\";\n    } else {\n      this.icNavigationMenuClosed.emit();\n      document.body.style.height = \"auto\";\n      document.body.style.overflow = \"auto\";\n    }\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) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\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\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={this.contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {this.deviceSize <= DEVICE_SIZES.S &&\n                      !isEmptyString(this.shortAppTitle) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={`${this.appTitle} (${this.shortAppTitle})`}\n                        >\n                          <h1>{this.shortAppTitle}</h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {isSlotUsed(this.el, \"app-title\") ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              this.appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            appearance={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"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\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\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={this.navMenuVisible ? \"true\" : \"false\"}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.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=\"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                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={this.foregroundColor}>\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        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\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.test.a11y.js → test/a11y/ic-top-navigation.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 beforeEach(() => {
   // IntersectionObserver isn't available in test environment
   const mockResizeObserver = jest.fn();
@@ -19,5 +19,12 @@ describe("ic-top-navigation", () => {
     checkShadowElementRendersCorrectly(el);
     expect(await axe(el)).toHaveNoViolations();
   });
+  it("passes accessibility with short title prop set", async () => {
+    const el = await fixture(`
+      <ic-top-navigation app-title="A11y test title" short-app-title="A11y"/>
+    `);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
 });
 //# sourceMappingURL=ic-top-navigation.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/a11y/ic-top-navigation.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;KAExB,CAAC,CAAC;IACH,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;IAC9D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;KAExB,CAAC,CAAC;IACH,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n      <ic-top-navigation app-title=\"A11y test title\"/>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n\n  it(\"passes accessibility with short title prop set\", async () => {\n    const el = await fixture(`\n      <ic-top-navigation app-title=\"A11y test title\" short-app-title=\"A11y\"/>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.e2e.js

@@ -0,0 +1,61 @@
+import { newE2EPage } from "@stencil/core/testing";
+const pageWidth = 1200;
+const pageHeight = 600;
+describe("ic-top-navigation", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7"></ic-top-navigation>`);
+    const element = await page.find("ic-top-navigation");
+    expect(element).toHaveClass("hydrated");
+  });
+  it("should hide dropdown menu when nav item clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+    <ic-navigation-group slot="navigation" label="Navigation group" expandable="true">
+        <ic-navigation-item
+          label="Navigation"
+          slot="navigation"
+        ></ic-navigation-item>
+      </ic-navigation-group>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    await page.waitForChanges();
+    const navGroup = await page.find("ic-top-navigation ic-navigation-group");
+    await navGroup.press("Enter");
+    await page.waitForChanges();
+    let dropDownDiv = await page.find("ic-navigation-group >>> .navigation-group-dropdown");
+    expect(dropDownDiv).not.toBeNull();
+    await page.evaluate(() => {
+      const navItemComp = document.querySelector("ic-navigation-item");
+      navItemComp.click();
+    });
+    await page.waitForChanges();
+    dropDownDiv = await page.find("ic-navigation-group >>> .navigation-group-dropdown");
+    expect(dropDownDiv).toBeNull();
+  });
+  it("should toggle to short title at small screen sizes", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" short-app-title="AppName">
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: 576,
+      height: pageHeight,
+    });
+    await page.waitForChanges();
+    let appTitle = await page.find("ic-top-navigation >>> .title-link ic-typography");
+    expect(appTitle.textContent).toBe("AppName");
+    await page.setViewport({
+      width: 1200,
+      height: pageHeight,
+    });
+    await page.waitForChanges();
+    appTitle = await page.find("ic-top-navigation >>> .title-link ic-typography");
+    expect(appTitle.textContent).toBe("ApplicationName");
+  });
+});
+//# sourceMappingURL=ic-top-navigation.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,SAAS,GAAG,IAAI,CAAC;AACvB,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;0CACgB,CAAC,CAAC;IAExC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAErD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;yBAQD,CAAC,CAAC;IAEvB,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,SAAS;MAChB,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IAE1E,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAC/B,oDAAoD,CACrD,CAAC;IACF,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAEnC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;MACjE,WAAW,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAC3B,oDAAoD,CACrD,CAAC;IACF,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IAClE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;yBACD,CAAC,CAAC;IAEvB,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAC5B,iDAAiD,CAClD,CAAC;IAEF,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAE7C,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CACxB,iDAAiD,CAClD,CAAC;IAEF,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;EACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 1200;\nconst pageHeight = 600;\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    const element = await page.find(\"ic-top-navigation\");\n\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should hide dropdown menu when nav item clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-navigation-group slot=\"navigation\" label=\"Navigation group\" expandable=\"true\">\n        <ic-navigation-item\n          label=\"Navigation\"\n          slot=\"navigation\"\n        ></ic-navigation-item>\n      </ic-navigation-group>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    await page.waitForChanges();\n\n    const navGroup = await page.find(\"ic-top-navigation ic-navigation-group\");\n\n    await navGroup.press(\"Enter\");\n\n    await page.waitForChanges();\n\n    let dropDownDiv = await page.find(\n      \"ic-navigation-group >>> .navigation-group-dropdown\"\n    );\n    expect(dropDownDiv).not.toBeNull();\n\n    await page.evaluate(() => {\n      const navItemComp = document.querySelector(\"ic-navigation-item\");\n      navItemComp.click();\n    });\n\n    await page.waitForChanges();\n\n    dropDownDiv = await page.find(\n      \"ic-navigation-group >>> .navigation-group-dropdown\"\n    );\n    expect(dropDownDiv).toBeNull();\n  });\n\n  it(\"should toggle to short title at small screen sizes\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" short-app-title=\"AppName\">\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: 576,\n      height: pageHeight,\n    });\n\n    await page.waitForChanges();\n\n    let appTitle = await page.find(\n      \"ic-top-navigation >>> .title-link ic-typography\"\n    );\n\n    expect(appTitle.textContent).toBe(\"AppName\");\n\n    await page.setViewport({\n      width: 1200,\n      height: pageHeight,\n    });\n\n    await page.waitForChanges();\n\n    appTitle = await page.find(\n      \"ic-top-navigation >>> .title-link ic-typography\"\n    );\n\n    expect(appTitle.textContent).toBe(\"ApplicationName\");\n  });\n});\n"]}

package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.js

@@ -0,0 +1,242 @@
+import { newE2EPage } from "@stencil/core/testing";
+const pageWidth = 640;
+const pageHeight = 480;
+const searchBarVisibleHeight = 40;
+const searchBarHiddenHeight = 0;
+describe("ic-top-navigation on mobile", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7"></ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+  });
+  it("should open and close menu", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7"></ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    const icNavigationMenuOpened = await page.spyOnEvent("icNavigationMenuOpened");
+    await menuBtn.click();
+    await page.waitForChanges();
+    let menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    expect(icNavigationMenuOpened).toHaveReceivedEvent();
+    const activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    const icNavigationMenuClosed = await page.spyOnEvent("icNavigationMenuClosed");
+    await page.evaluate(() => {
+      const navbar = document.querySelector("ic-top-navigation");
+      const menu = navbar.shadowRoot.querySelector("ic-navigation-menu");
+      const closeBtn = menu.shadowRoot.querySelector("ic-button");
+      closeBtn.click();
+    });
+    await page.waitForChanges();
+    menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).toBeNull();
+    expect(icNavigationMenuClosed).toHaveReceivedEvent();
+  });
+  it("should close menu when nav item clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+      <ic-navigation-item
+        label="Navigation"
+        slot="navigation"
+      ></ic-navigation-item>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    const icNavigationMenuOpened = await page.spyOnEvent("icNavigationMenuOpened");
+    await menuBtn.click();
+    await page.waitForChanges();
+    let menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    expect(icNavigationMenuOpened).toHaveReceivedEvent();
+    const icNavigationMenuClosed = await page.spyOnEvent("icNavigationMenuClosed");
+    const navItem = await page.find("ic-navigation-item");
+    await navItem.click();
+    await page.waitForChanges();
+    menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).toBeNull();
+    expect(icNavigationMenuClosed).toHaveReceivedEvent();
+  });
+  it("should keep tab focus in menu - button as last el", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+      <ic-navigation-button
+        label="button1"
+        slot="buttons"
+        onclick="alert('test')"
+      >
+        <svg
+          slot="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-navigation-button>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    await menuBtn.click();
+    await page.waitForChanges();
+    const menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    let activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-button", (el) => {
+      const button = el.shadowRoot.querySelector("ic-button");
+      return button.shadowRoot.activeElement.getAttribute("aria-label");
+    });
+    expect(activeElId).toBe("button1");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    page.keyboard.down("Shift");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-button", (el) => {
+      const button = el.shadowRoot.querySelector("ic-button");
+      return button.shadowRoot.activeElement.getAttribute("aria-label");
+    });
+    expect(activeElId).toBe("button1");
+  });
+  it("should keep tab focus in menu - nav item as last el", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+    <ic-navigation-item
+      label="Navigation"
+      href="/"
+      slot="navigation"
+    ></ic-navigation-item>  
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    await menuBtn.click();
+    await page.waitForChanges();
+    const menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    let activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-item", (el) => {
+      return el.shadowRoot.activeElement.textContent;
+    });
+    expect(activeElId).toBe("Navigation");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    page.keyboard.down("Shift");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-item", (el) => {
+      return el.shadowRoot.activeElement.textContent;
+    });
+    expect(activeElId).toBe("Navigation");
+  });
+  it("should toggle search bar when clicking on button", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+    <ic-search-bar slot="search" label="Search" placeholder="Search" focusOnLoad="true"></ic-search-bar>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const searchBtn = await page.find("ic-top-navigation >>> .search-actions-container ic-button");
+    expect(searchBtn).not.toBeNull();
+    await searchBtn.click();
+    await page.waitForChanges();
+    let searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarVisibleHeight);
+    await searchBtn.click();
+    await page.waitForChanges();
+    searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarHiddenHeight);
+  });
+  it("should hide search bar when loses focus", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+      version="v0.0.7">
+        <ic-search-bar slot="search" label="Search" placeholder="Search" focusOnLoad="true"></ic-search-bar>
+      </ic-top-navigation>
+      <span id='othercontent'>some other content</span>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const searchBtn = await page.find("ic-top-navigation >>> .search-actions-container ic-button");
+    expect(searchBtn).not.toBeNull();
+    await searchBtn.click();
+    await page.waitForChanges();
+    let searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarVisibleHeight);
+    // Test hides when another page element clicked
+    const spanEl = await page.find("#othercontent");
+    await spanEl.click();
+    await page.waitForChanges();
+    searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarHiddenHeight);
+  });
+});
+//# sourceMappingURL=ic-top-navigation.mobile.e2e.js.map

package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.mobile.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 640;\nconst pageHeight = 480;\nconst searchBarVisibleHeight = 40;\nconst searchBarHiddenHeight = 0;\n\ndescribe(\"ic-top-navigation on mobile\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n  });\n\n  it(\"should open and close menu\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    await page.evaluate(() => {\n      const navbar = document.querySelector(\"ic-top-navigation\");\n      const menu = navbar.shadowRoot.querySelector(\"ic-navigation-menu\");\n      const closeBtn = menu.shadowRoot.querySelector(\"ic-button\");\n      closeBtn.click();\n    });\n\n    await page.waitForChanges();\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should close menu when nav item clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n      <ic-navigation-item\n        label=\"Navigation\"\n        slot=\"navigation\"\n      ></ic-navigation-item>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    const navItem = await page.find(\"ic-navigation-item\");\n\n    await navItem.click();\n    await page.waitForChanges();\n\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should keep tab focus in menu - button as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n      <ic-navigation-button\n        label=\"button1\"\n        slot=\"buttons\"\n        onclick=\"alert('test')\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n      </ic-navigation-button>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n  });\n\n  it(\"should keep tab focus in menu - nav item as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-navigation-item\n      label=\"Navigation\"\n      href=\"/\"\n      slot=\"navigation\"\n    ></ic-navigation-item>  \n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n  });\n\n  it(\"should toggle search bar when clicking on button\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n\n  it(\"should hide search bar when loses focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n      version=\"v0.0.7\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n      </ic-top-navigation>\n      <span id='othercontent'>some other content</span>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    // Test hides when another page element clicked\n    const spanEl = await page.find(\"#othercontent\");\n    await spanEl.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n});\n"]}