@ukic/web-components 2.31.0 → 2.32.0

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link-group.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  @State() expanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownIconStyle = getThemeForegroundColor();\n  @State() small: boolean = false;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\" role=\"list\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        tabIndex=\"1\"\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-expanded={this.expanded}\n      >\n        <ic-section-container fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\" role=\"list\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer-link-group.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Element,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-footer-link-group\",\n  styleUrl: \"ic-footer-link-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLinkGroup {\n  @Element() el: HTMLIcFooterLinkGroupElement;\n\n  @State() expanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownIconStyle = getThemeForegroundColor();\n  @State() small: boolean = false;\n\n  /**\n   * The title of the link group to be displayed.\n   */\n  @Prop() groupTitle!: string;\n\n  componentWillLoad(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.groupTitle, propName: \"group-title\" }],\n      \"Footer Link Group\"\n    );\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.small = this.isSmall(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.dropdownIconStyle = theme.mode;\n  }\n\n  private isSmall(e: HTMLElement): boolean {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return e.parentElement.classList.contains(\"footer-small\");\n      } else {\n        return this.isSmall(e.parentElement);\n      }\n    } else {\n      return false;\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      this.toggleExpanded();\n    }\n  };\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  render() {\n    const { small, groupTitle } = this;\n\n    return !small ? (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-sparse\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"footer-link-group-title\">\n          <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n        </div>\n        <div class=\"footer-link-group-links\" role=\"list\">\n          <slot />\n        </div>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          [\"footer-link-group footer-link-group-small\"]: true,\n          [`footer-link-group-${this.dropdownIconStyle}`]: true,\n        }}\n        onClick={this.toggleExpanded}\n        onKeydown={this.handleKeydown}\n        aria-expanded={this.expanded}\n        role=\"listitem\"\n      >\n        <ic-section-container tabindex=\"0\" fullHeight={true}>\n          <div class=\"footer-link-group-header\">\n            <div class=\"footer-link-group-title\">\n              <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n            </div>\n            {this.expanded ? (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                />\n              </svg>\n            ) : (\n              <svg\n                class=\"footer-link-group-toggle\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                role=\"img\"\n                width=\"1em\"\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                viewBox=\"0 0 1200 1200\"\n              >\n                <g transform=\"translate(0 1200) scale(1 -1)\">\n                  <path\n                    fill=\"currentColor\"\n                    d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n                  />\n                </g>\n              </svg>\n            )}\n          </div>\n          {this.expanded && (\n            <div class=\"footer-link-group-links\" role=\"list\">\n              <slot />\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,10 +18,7 @@ export class MenuItem {
                     checked: this.toggleChecked,
                 });
             }
-            this.handleMenuItemClick.emit({
-                label: this.label,
-                hasSubMenu: !!this.el.submenuTriggerFor,
-            });
+            this.handleMenuItemClick.emit(this.el);
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;
@@ -364,9 +361,14 @@ export class MenuItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    label: string;\n    hasSubMenu: boolean;\n  }",
-                    "resolved": "{ label: string; hasSubMenu: boolean; }",
-                    "references": {}
+                    "original": "HTMLIcMenuItemElement",
+                    "resolved": "HTMLIcMenuItemElement",
+                    "references": {
+                        "HTMLIcMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIcMenuItemElement"
+                        }
+                    }
                 }
             }, {
                 "method": "icToggleChecked",

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

@@ -1 +1 @@
-{"version":3,"file":"ic-menu-item.js","sourceRoot":"","sources":["../../../src/components/ic-menu-item/ic-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * Emitted when the user clicks a menu item that is set to the toggle variant.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked = !this.toggleChecked;\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\"\n              ? this.toggleChecked\n                ? \"true\"\n                : \"false\"\n              : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-menu-item.js","sourceRoot":"","sources":["../../../src/components/ic-menu-item/ic-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n  /**\n   * Emitted when the user clicks a menu item that is set to the toggle variant.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked = !this.toggleChecked;\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n    }\n    this.handleMenuItemClick.emit(this.el);\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\"\n              ? this.toggleChecked\n                ? \"true\"\n                : \"false\"\n              : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { forceUpdate, h, Host, } from "@stencil/core";
-import { DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getNavItemParentDetails, isSlotUsed, } from "../../utils/helpers";
+import { DEVICE_SIZES, getCssProperty, getCurrentDeviceSize, getThemeForegroundColor, getNavItemParentDetails, isSlotUsed, } from "../../utils/helpers";
 import chevronIcon from "../../assets/chevron-icon.svg";
 import OpenInNew from "../../assets/OpenInNew.svg";
 /**
@@ -11,6 +11,7 @@ export class NavigationItem {
     constructor() {
         this.isInitialRender = true;
         this.hostMutationObserver = null;
+        this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
         this.ARIA_LABEL_STRING = "aria-label";
         this.displayDefaultNavigationItem = (href, hreflang, target, rel, referrerpolicy, download, label) => {
             const variant = this.isTopNavChild || this.inTopNavSideMenu ? "body" : "label";
@@ -35,6 +36,7 @@ export class NavigationItem {
             const { sideNavExpanded, sideNavMobile } = detail;
             this.sideNavExpanded = sideNavExpanded;
             this.isSideNavMobile = sideNavMobile;
+            this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));
         };
         this.handleBlur = ({ relatedTarget }) => {
             if (relatedTarget === null ||
@@ -79,6 +81,24 @@ export class NavigationItem {
             }
             return h("slot", null);
         };
+        // Displays tooltip only once the collapsing animation is finished
+        this.sideNavToggleTooltip = (showTooltip) => {
+            const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+            const collapsedClass = "tooltip-navigation-item-side-nav-collapsed";
+            let timer;
+            if (tooltip) {
+                if (showTooltip) {
+                    tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon
+                    timer = setTimeout(() => {
+                        tooltip.classList.add(collapsedClass);
+                    }, this.ANIMATION_DURATION);
+                }
+                else {
+                    clearTimeout(timer);
+                    tooltip.classList.remove(collapsedClass);
+                }
+            }
+        };
         this.deviceSize = DEVICE_SIZES.XL;
         this.focusStyle = getThemeForegroundColor();
         this.inTopNavSideMenu = false;
@@ -111,10 +131,14 @@ export class NavigationItem {
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         const { navType, parent } = getNavItemParentDetails(this.el);
         this.navigationType = navType;
         this.parentEl = parent;
         this.deviceSize = getCurrentDeviceSize();
+        this.sideNavExpanded =
+            ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.classList.contains("sm-expanded")) ||
+                ((_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.classList.contains("xs-menu-open"));
         if (this.navigationType === "side") {
             this.parentEl.addEventListener("sideNavExpanded", this.sideNavExpandHandler);
         }
@@ -177,8 +201,7 @@ export class NavigationItem {
                 ["expandable"]: this.expandable,
             }, onBlur: isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, h("ic-tooltip", { label: this.generateTooltipLabel(), target: "navigation-item", placement: "right", class: {
                 ["tooltip-navigation-item"]: true,
-                ["tooltip-navigation-item-side-nav-collapsed"]: (!this.sideNavExpanded || this.displayNavigationTooltip) &&
-                    this.navigationType === "side",
+                ["tooltip-navigation-item-side-nav-collapsed"]: this.displayNavigationTooltip && this.navigationType === "side",
                 ["tooltip-long-label-navigation-item-side-nav-expanded"]: this.el.hasAttribute("[display-navigation-tooltip = 'true']"),
             } }, this.renderNavigationItemContent())));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-item.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getNavItemParentDetails,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n  private ARIA_LABEL_STRING = \"aria-label\";\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n  @State() ariaLabel: string = \"\";\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    const { navType, parent } = getNavItemParentDetails(this.el);\n    this.navigationType = navType;\n    this.parentEl = parent;\n    this.deviceSize = getCurrentDeviceSize();\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n      if (this.el.parentElement.tagName === \"IC-NAVIGATION-GROUP\")\n        this.isTopNavChild = true;\n      if (\n        this.deviceSize <=\n        (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n      )\n        this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n\n    if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n      this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.focusStyle = detail.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.itemEl?.focus();\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        <slot name=\"icon\"></slot>\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n          aria-label={this.ariaLabel ? this.ariaLabel : null}\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          <div class=\"chevron-container\">{ChevronIconComponent}</div>\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = ({\n    detail,\n  }: CustomEvent<{ size: number }>): void => {\n    const { size } = detail;\n    if (size !== this.deviceSize) {\n      this.deviceSize = size;\n      this.inTopNavSideMenu =\n        size <=\n        ((this.parentEl as HTMLIcTopNavigationElement)\n          ?.customMobileBreakpoint || DEVICE_SIZES.L);\n    }\n  };\n\n  private sideNavExpandHandler = ({\n    detail,\n  }: CustomEvent<IcExpandedDetail>): void => {\n    const { sideNavExpanded, sideNavMobile } = detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  private handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (\n      relatedTarget === null ||\n      (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n    ) {\n      this.childBlur.emit();\n    }\n  };\n\n  private handleClick = () => {\n    this.navItemClicked.emit();\n  };\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName === this.ARIA_LABEL_STRING) {\n        this.ariaLabel = this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private generateTooltipLabel = () => {\n    if (this.label) {\n      return this.label;\n    }\n\n    if (this.navigationSlot) {\n      return this.navigationSlot.textContent;\n    }\n\n    if (this.el.children[0]) {\n      return this.el.children[0].textContent;\n    }\n\n    return \"\";\n  };\n\n  private renderNavigationItemContent = () => {\n    if (this.label) {\n      return this.displayDefaultNavigationItem(\n        this.href,\n        this.hreflang,\n        this.target,\n        this.rel,\n        this.referrerpolicy,\n        this.download,\n        this.label\n      );\n    }\n\n    if (this.navigationSlot) {\n      return <slot name=\"navigation-item\"></slot>;\n    }\n    return <slot></slot>;\n  };\n\n  render() {\n    const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={this.generateTooltipLabel()}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {this.renderNavigationItemContent()}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-item.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCssProperty,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getNavItemParentDetails,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n  private ARIA_LABEL_STRING = \"aria-label\";\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n  @State() ariaLabel: string = \"\";\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    const { navType, parent } = getNavItemParentDetails(this.el);\n    this.navigationType = navType;\n    this.parentEl = parent;\n    this.deviceSize = getCurrentDeviceSize();\n\n    this.sideNavExpanded =\n      this.parentEl?.classList.contains(\"sm-expanded\") ||\n      this.parentEl?.classList.contains(\"xs-menu-open\");\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n      if (this.el.parentElement.tagName === \"IC-NAVIGATION-GROUP\")\n        this.isTopNavChild = true;\n      if (\n        this.deviceSize <=\n        (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n      )\n        this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n\n    if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n      this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.focusStyle = detail.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.itemEl?.focus();\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        <slot name=\"icon\"></slot>\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n          aria-label={this.ariaLabel ? this.ariaLabel : null}\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          <div class=\"chevron-container\">{ChevronIconComponent}</div>\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = ({\n    detail,\n  }: CustomEvent<{ size: number }>): void => {\n    const { size } = detail;\n    if (size !== this.deviceSize) {\n      this.deviceSize = size;\n      this.inTopNavSideMenu =\n        size <=\n        ((this.parentEl as HTMLIcTopNavigationElement)\n          ?.customMobileBreakpoint || DEVICE_SIZES.L);\n    }\n  };\n\n  private sideNavExpandHandler = ({\n    detail,\n  }: CustomEvent<IcExpandedDetail>): void => {\n    const { sideNavExpanded, sideNavMobile } = detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n    this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));\n  };\n\n  private handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (\n      relatedTarget === null ||\n      (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n    ) {\n      this.childBlur.emit();\n    }\n  };\n\n  private handleClick = () => {\n    this.navItemClicked.emit();\n  };\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName === this.ARIA_LABEL_STRING) {\n        this.ariaLabel = this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private generateTooltipLabel = () => {\n    if (this.label) {\n      return this.label;\n    }\n\n    if (this.navigationSlot) {\n      return this.navigationSlot.textContent;\n    }\n\n    if (this.el.children[0]) {\n      return this.el.children[0].textContent;\n    }\n\n    return \"\";\n  };\n\n  private renderNavigationItemContent = () => {\n    if (this.label) {\n      return this.displayDefaultNavigationItem(\n        this.href,\n        this.hreflang,\n        this.target,\n        this.rel,\n        this.referrerpolicy,\n        this.download,\n        this.label\n      );\n    }\n\n    if (this.navigationSlot) {\n      return <slot name=\"navigation-item\"></slot>;\n    }\n    return <slot></slot>;\n  };\n\n  // Displays tooltip only once the collapsing animation is finished\n  private sideNavToggleTooltip = (showTooltip: boolean) => {\n    const tooltip = this.el.shadowRoot.querySelector(\"ic-tooltip\");\n    const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n    let timer;\n\n    if (tooltip) {\n      if (showTooltip) {\n        tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n        timer = setTimeout(() => {\n          tooltip.classList.add(collapsedClass);\n        }, this.ANIMATION_DURATION);\n      } else {\n        clearTimeout(timer);\n        tooltip.classList.remove(collapsedClass);\n      }\n    }\n  };\n\n  render() {\n    const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={this.generateTooltipLabel()}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              this.displayNavigationTooltip && this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {this.renderNavigationItemContent()}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -142,8 +142,8 @@ export class PopoverMenu {
         }
     }
     handleMenuItemClick(ev) {
-        if (!ev.detail.hasSubMenu && ev.detail.label !== "Back") {
-            this.closeMenu();
+        if (!ev.detail.submenuTriggerFor && ev.detail.label !== "Back") {
+            this.closeMenu(false, ev.detail);
         }
     }
     // This is listening for the event emitted when a menu item is acting as a trigger button
@@ -217,17 +217,17 @@ export class PopoverMenu {
      * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    async closeMenu(setFocusToAnchor = false) {
+    async closeMenu(setFocusToAnchor = false, menuElement) {
         var _a;
         this.open = false;
         if (this.parentPopover) {
-            this.parentPopover.closeMenu(setFocusToAnchor);
+            this.parentPopover.closeMenu(setFocusToAnchor, menuElement);
         }
         else {
             if (setFocusToAnchor) {
                 (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            this.icPopoverClosed.emit();
+            this.icPopoverClosed.emit(menuElement);
         }
     }
     render() {
@@ -391,9 +391,14 @@ export class PopoverMenu {
                     "text": "Emitted when the popover menu is closed."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "HTMLIcMenuItemElement",
+                    "resolved": "HTMLIcMenuItemElement",
+                    "references": {
+                        "HTMLIcMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIcMenuItemElement"
+                        }
+                    }
                 }
             }];
     }
@@ -441,16 +446,24 @@ export class PopoverMenu {
             },
             "closeMenu": {
                 "complexType": {
-                    "signature": "(setFocusToAnchor?: boolean) => Promise<void>",
+                    "signature": "(setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>",
                     "parameters": [{
                             "name": "setFocusToAnchor",
                             "type": "boolean",
                             "docs": "when true return focus to anchor element when menu is closed"
+                        }, {
+                            "name": "menuElement",
+                            "type": "HTMLIcMenuItemElement",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLIcMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIcMenuItemElement"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(\n    ev: CustomEvent<{\n      label: string;\n      hasSubMenu: boolean;\n    }>\n  ): void {\n    if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n      this.closeMenu();\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        ev.preventDefault();\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * @internal Close the menu, emit icPopoverClosed of the root popover\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  @Method()\n  async closeMenu(setFocusToAnchor = false): Promise<void> {\n    this.open = false;\n    if (this.parentPopover) {\n      this.parentPopover.closeMenu(setFocusToAnchor);\n    } else {\n      if (setFocusToAnchor) {\n        this.anchorEl?.focus();\n      }\n      this.icPopoverClosed.emit();\n    }\n  }\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\n          \".menu-items-wrapper\"\n        );\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ open: this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <span\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <span>\n                <span role=\"menu\">\n                  <ic-menu-item\n                    class=\"ic-popover-submenu-back-button\"\n                    ref={(el) => (this.backButton = el)}\n                    label=\"Back\"\n                    onClick={this.handleBackButtonClick}\n                    id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                  >\n                    <svg\n                      slot=\"icon\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"submenu-back-icon\"\n                    >\n                      <path\n                        d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </ic-menu-item>\n                </span>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </span>\n            )}\n            <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n              <slot></slot>\n            </ul>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n    if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n      this.closeMenu(false, ev.detail);\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        ev.preventDefault();\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * @internal Close the menu, emit icPopoverClosed of the root popover\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  @Method()\n  async closeMenu(\n    setFocusToAnchor = false,\n    menuElement?: HTMLIcMenuItemElement\n  ): Promise<void> {\n    this.open = false;\n    if (this.parentPopover) {\n      this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n    } else {\n      if (setFocusToAnchor) {\n        this.anchorEl?.focus();\n      }\n      this.icPopoverClosed.emit(menuElement);\n    }\n  }\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\n          \".menu-items-wrapper\"\n        );\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ open: this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <span\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <span>\n                <span role=\"menu\">\n                  <ic-menu-item\n                    class=\"ic-popover-submenu-back-button\"\n                    ref={(el) => (this.backButton = el)}\n                    label=\"Back\"\n                    onClick={this.handleBackButtonClick}\n                    id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                  >\n                    <svg\n                      slot=\"icon\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"submenu-back-icon\"\n                    >\n                      <path\n                        d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </ic-menu-item>\n                </span>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </span>\n            )}\n            <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n              <slot></slot>\n            </ul>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -64,8 +64,10 @@ export class SideNavigation {
                 appTitle.classList.remove("ic-typography-no-wrap");
             }, this.ANIMATION_DURATION);
         };
-        this.toggleMenuExpanded = () => {
-            this.menuExpanded = !this.menuExpanded;
+        this.toggleMenuExpanded = (expanded) => {
+            if (this.deviceSize > DEVICE_SIZES.S) {
+                this.menuExpanded = expanded;
+            }
             if (this.menuExpanded) {
                 this.setAndRemoveNoWrapAfterMenuExpanded();
                 this.el.shadowRoot
@@ -347,7 +349,7 @@ export class SideNavigation {
         this.version = undefined;
     }
     watchExpandedHandler() {
-        this.setMenuExpanded(this.expanded);
+        this.toggleMenuExpanded(this.expanded);
     }
     componentWillLoad() {
         this.setMenuExpanded(this.expanded);
@@ -406,7 +408,7 @@ export class SideNavigation {
             } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { class: "navigation-list" }, h("slot", { name: "primary-navigation" }))))), h("div", { class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { class: "navigation-list" }, h("slot", { name: "secondary-navigation" })))), h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", null), displayExpandBtn && (h("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { class: "app-status-wrapper" }, status !== "" && (h("div", { class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { class: "navigation-list" }, h("slot", { name: "secondary-navigation" })))), h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", null), displayExpandBtn && (h("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { class: "app-status-wrapper" }, status !== "" && (h("div", { class: {
                 ["app-status"]: true,
             } }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }