@ukic/web-components 2.29.1 → 3.0.0-alpha.2

package/dist/collection/components/ic-tooltip/ic-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAOvE,MAAM,OAAO,OAAO;;QAEV,sBAAiB,GAAG,CAAC,YAAY,CAAC,CAAC;QACnC,mBAAc,GAAG,KAAK,CAAC;QAEvB,sBAAiB,GAAG,CAAC,UAAU,CAAC,CAAC;QACjC,kBAAa,GAAY,KAAK,CAAC;QAC/B,mBAAc,GAAG,KAAK,CAAC;QAEvB,aAAQ,GAAY,KAAK,CAAC;QAC1B,eAAU,GAAG;YACnB,CAAC,IAAI,CAAC,YAAY,IAAI,YAAY;YAClC,CAAC,IAAI,CAAC,YAAY,IAAI,SAAS;YAC/B,CAAC,IAAI,CAAC,YAAY,IAAI,OAAO;SAC9B,CAAC;QAsGM,wBAAmB,GAAG,CAAC,QAAiB,EAAE,EAAE;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;YAC1D,IAAI,QAAQ,CAAC;YACb,IAAI,QAAQ,CAAC;YACb,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvB,KAAK,QAAQ;oBACX,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;oBAC1D,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;oBACvC,MAAM;gBACR,KAAK,cAAc;oBACjB,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;oBACtC,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;oBACvC,MAAM;gBACR,KAAK,YAAY;oBACf,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;oBACxC,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;oBACvC,MAAM;gBACR,KAAK,KAAK;oBACR,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;oBAC1D,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACvC,MAAM;gBACR,KAAK,WAAW;oBACd,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;oBACtC,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACvC,MAAM;gBACR,KAAK,SAAS;oBACZ,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;oBACxC,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACvC,MAAM;gBACR,KAAK,MAAM,CAAC;gBACZ,KAAK,YAAY;oBACf,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBACtD,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;gBACR,KAAK,UAAU;oBACb,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBACtD,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb,KAAK,aAAa;oBAChB,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;oBACpD,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;gBACR,KAAK,WAAW;oBACd,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;oBACpD,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;YACV,CAAC;YACD,IAAI,IAAI,CAAC,cAAc,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACxC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACxE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAC5B,2BAA2B,EAC3B,GAAG,QAAQ,IAAI,CAChB,CAAC;oBACF,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;gBACxC,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;oBACpC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;oBACzB,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;gBACtD,CAAC;YACH,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,QAAQ,IAAI,CAAC,CAAC;YACzE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,QAAQ,IAAI,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEM,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;gBAE3C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;oBACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU;yBACxC,aAAa,CAAC,QAAQ,CAAC;yBACvB,qBAAqB,EAAE,CAAC;oBAE3B,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;gBACrC,CAAC;gBAED,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,kBACtD,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE;wBACT;4BACE,IAAI,EAAE,QAAQ;4BACd,OAAO,EAAE;gCACP,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;6BAChB;yBACF;wBACD;4BACE,IAAI,EAAE,OAAO;4BACb,OAAO,EAAE;gCACP,OAAO,EAAE,IAAI,CAAC,KAAK;6BACpB;yBACF;wBACD;4BACE,IAAI,EAAE,gBAAgB;4BACtB,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;yBAC1C;qBACF,IACE,IAAI,CAAC,WAAW,EACnB,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAC;YACjE,CAAC;QACH,CAAC,CAAC;QAEM,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YAC1C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE,CAAC;gBACtC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;oBAChD,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACnD,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,MAAwB,EAAE,EAAE;YAC1D,MAAM,MAAM,GACV,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,qBAAqB,CAAC;YAEhE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAChC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzB,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBACvC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACvC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBAC/C,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAClD,CAAC,CAAC;4BAhQ+B,KAAK;4BAKL,KAAK;;yBAUqB,QAAQ;sBAKxC,KAAK;;;2BAYS,EAAE;;IAE3C;;;OAGG;IAEH,KAAK,CAAC,sBAAsB,CAA6B,KAAQ;QAC/D,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC/C,IAAI,CAAC,cAAc;YACjB,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,YAAY,CAAC,eAAe,CAAC,MAAK,MAAM,CAAC;QAE5D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC;QAEzC,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,SAAS,CACV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACnD,uCAAuC,CACxC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC;YACf,YAAY,CAAC,YAAY,CACvB,OAAO,EACP,2BAA2B,IAAI,CAAC,QAAQ,EAAE,CAC3C,CAAC;IACN,CAAC;IACD;;;;OAIG;IAEH,KAAK,CAAC,cAAc,CAAC,IAAa,EAAE,cAAwB;QAC1D,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,gBAAgB;QACpB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;IACjE,CAAC;IAsKD,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACzC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YACjC,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,EAClD,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,sBAAsB,iBACf,GAAG,MAAM,EAAE;gBAExB,qBAAe,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,SAAS,IACjD,KAAK,CACQ;gBAChB,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAoB,CAAC,EAChD,KAAK,EAAC,kBAAkB,GACnB,CACH;YACN,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl.shadowRoot\n          .querySelector(\"dialog\")\n          .getBoundingClientRect();\n\n        this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * Sets the tooltip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl.shadowRoot\n          .querySelector(\"dialog\")\n          .getBoundingClientRect();\n\n        this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent, theme } = this;\n    return (\n      <Host\n        class={{\n          \"ic-tooltip\": true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js

@@ -13,6 +13,20 @@ describe("ic-tooltip component", () => {
         });
         expect(page.root).toMatchSnapshot(`ic-tooltip-render`);
     });
+    it("should test dark theme", async () => {
+        const page = await newSpecPage({
+            components: [Tooltip],
+            html: `<ic-tooltip theme="dark" label="tooltip"</ic-tooltip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should test light theme", async () => {
+        const page = await newSpecPage({
+            components: [Typography],
+            html: `<ic-tooltip theme="light" label="tooltip"</ic-tooltip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
     it("should appear when triggered", async () => {
         const page = await newSpecPage({
             components: [Tooltip],

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tooltip/test/basic/ic-tooltip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\nimport { Tooltip } from \"../../ic-tooltip\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-tooltip component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip label=\"tooltip\"></ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot(`ic-tooltip-render`);\n  });\n\n  it(\"should appear when triggered\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should appear when triggered by click\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" disable-hover=true><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should disappear when triggered\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.hide(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should disappear on mouseleave\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.mouseLeaveTooltip(page.rootInstance.popperInstance);\n\n    await waitForTimeout(200);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should remain when mouse remains on tooltip\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.mouseEnterTooltip();\n    await page.waitForChanges();\n\n    await page.rootInstance.checkCloseTooltip(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should close the tooltip on Escape keydown\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    const body = window.document.body;\n\n    body.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should log warning to console and not render if label hasn't been set\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\"><button id=\"test-button\"></button></ic-tooltip>`,\n    });\n    jest.spyOn(console, \"warn\").mockImplementation();\n\n    await page.rootInstance.displayTooltip(true, true);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n    expect(console.warn).toBeCalledWith(\n      \"Tooltip can't display without prop 'label' set\"\n    );\n  });\n\n  it(\"should watch for label updates\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.label).toBe(\"tooltip\");\n\n    page.root.label = \"new tooltip\";\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.label).toBe(\"new tooltip\");\n\n    page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should open the tooltip using the displayTooltip method and should persist when persistTooltip is true\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.displayTooltip(true, true);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).not.toBeNull;\n\n    window.document.body.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).not.toBeNull;\n\n    await page.rootInstance.displayTooltip(false, false);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  describe(\"getTooltipTranslate\", () => {\n    it(\"should update for bottom\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for bottom-start\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"bottom-start\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for bottom-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"bottom-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for top\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"top\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for top-start\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"top-start\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for top-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"top-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for left\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"left\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for left-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"left-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for right\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"right\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for right-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"right-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update when tooltip is outside of dialog\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"left\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      page.rootInstance.dialogOverflow = true;\n      await page.waitForChanges();\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.root.placement).toBe(\"right\");\n    });\n  });\n\n  it(\"should truncate text and pass the maxLines value to ic-typography if maxLines prop has been set\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip, Typography],\n      html: `<ic-tooltip target=\"test-button\" label=\"This is a body of text that is truncated to three lines within a tooltip. It has been truncated based on the max-lines property. The number of lines in the text is clamped to the number passed through the max-lines property.\" max-lines=\"2\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const typographyEl = page.root.shadowRoot.querySelector(\n      \"div > ic-typography\"\n    ) as HTMLIcTypographyElement;\n    expect(typographyEl.maxLines).toEqual(2);\n  });\n});\n"]}
+{"version":3,"file":"ic-tooltip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tooltip/test/basic/ic-tooltip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\nimport { Tooltip } from \"../../ic-tooltip\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-tooltip component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip label=\"tooltip\"></ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot(`ic-tooltip-render`);\n  });\n\n  it(\"should test dark theme\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip theme=\"dark\" label=\"tooltip\"</ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test light theme\", async () => {\n    const page = await newSpecPage({\n      components: [Typography],\n      html: `<ic-tooltip theme=\"light\" label=\"tooltip\"</ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should appear when triggered\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should appear when triggered by click\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" disable-hover=true><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should disappear when triggered\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.hide(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should disappear on mouseleave\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.mouseLeaveTooltip(page.rootInstance.popperInstance);\n\n    await waitForTimeout(200);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should remain when mouse remains on tooltip\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.mouseEnterTooltip();\n    await page.waitForChanges();\n\n    await page.rootInstance.checkCloseTooltip(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should close the tooltip on Escape keydown\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    const body = window.document.body;\n\n    body.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should log warning to console and not render if label hasn't been set\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\"><button id=\"test-button\"></button></ic-tooltip>`,\n    });\n    jest.spyOn(console, \"warn\").mockImplementation();\n\n    await page.rootInstance.displayTooltip(true, true);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n    expect(console.warn).toBeCalledWith(\n      \"Tooltip can't display without prop 'label' set\"\n    );\n  });\n\n  it(\"should watch for label updates\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.label).toBe(\"tooltip\");\n\n    page.root.label = \"new tooltip\";\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.label).toBe(\"new tooltip\");\n\n    page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should open the tooltip using the displayTooltip method and should persist when persistTooltip is true\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.displayTooltip(true, true);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).not.toBeNull;\n\n    window.document.body.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).not.toBeNull;\n\n    await page.rootInstance.displayTooltip(false, false);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  describe(\"getTooltipTranslate\", () => {\n    it(\"should update for bottom\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for bottom-start\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"bottom-start\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for bottom-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"bottom-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for top\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"top\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for top-start\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"top-start\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for top-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"top-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for left\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"left\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for left-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"left-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for right\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"right\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update for right-end\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"right-end\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    it(\"should update when tooltip is outside of dialog\", async () => {\n      const page = await newSpecPage({\n        components: [Tooltip],\n        html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" placement=\"left\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n      });\n\n      page.rootInstance.dialogOverflow = true;\n      await page.waitForChanges();\n\n      await page.rootInstance.getTooltipTranslate({\n        left: 0,\n        right: 40,\n        top: 100,\n        bottom: 132,\n      });\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n      expect(page.root.placement).toBe(\"right\");\n    });\n  });\n\n  it(\"should truncate text and pass the maxLines value to ic-typography if maxLines prop has been set\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip, Typography],\n      html: `<ic-tooltip target=\"test-button\" label=\"This is a body of text that is truncated to three lines within a tooltip. It has been truncated based on the max-lines property. The number of lines in the text is clamped to the number passed through the max-lines property.\" max-lines=\"2\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const typographyEl = page.root.shadowRoot.querySelector(\n      \"div > ic-typography\"\n    ) as HTMLIcTypographyElement;\n    expect(typographyEl.maxLines).toEqual(2);\n  });\n});\n"]}

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

@@ -446,6 +446,8 @@ video {
   color: var(--ic-theme-text);
   width: 100%;
   position: relative;
+
+  --ic-typography-color: currentcolor;
 }
 
 :host .top-navigation {
@@ -501,7 +503,7 @@ video {
 }
 
 :host .nav-panel-container {
-  border-top: var(--ic-keyline-lighten);
+  border-top: var(--ic-border-keyline-lighten);
   padding: 0 var(--ic-space-lg);
   margin-left: calc(-1 * var(--section-container-margin));
   margin-right: calc(-1 * var(--section-container-margin));
@@ -509,7 +511,7 @@ video {
 }
 
 :host(.dark) .nav-panel-container {
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
 }
 
 .top-panel-container {
@@ -555,7 +557,7 @@ video {
 :host .app-status {
   border-radius: var(--ic-space-md);
   background-color: var(--ic-architectural-white);
-  color: var(--ic-color-primary-text);
+  color: var(--ic-color-text-primary-light);
   padding: var(--ic-space-xxs) var(--ic-space-lg);
   margin-left: var(--ic-space-md);
   flex: 1 1 0;
@@ -565,7 +567,7 @@ video {
 
 :host(.dark) .app-status {
   background-color: var(--ic-theme-text);
-  color: var(--ic-color-white-text);
+  color: var(--ic-architectural-white);
 }
 
 :host .app-version {
@@ -671,7 +673,7 @@ slot[name="toggle-icon"] svg {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
   height: 4rem;
   padding-left: var(--ic-space-md);
   padding-right: var(--ic-space-md);
@@ -716,12 +718,12 @@ slot[name="toggle-icon"] svg {
 
 @media (forced-colors: active) {
   :host .top-navigation {
-    border-bottom: var(--ic-hc-border);
+    border-bottom: var(--ic-border-hc);
   }
 
   .app-status,
   .app-version {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   slot[name="app-icon"]::slotted(*) {

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

@@ -57,7 +57,7 @@ export class TopNavigation {
                         this.toggleSearchBar();
                     }
                 }
-                this.topNavResized.emit({
+                this.icTopNavResized.emit({
                     size: currSize,
                 });
                 if (this.searchBar && document.activeElement === this.searchBar) {
@@ -158,7 +158,7 @@ export class TopNavigation {
         const hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
-        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "default" : "large";
+        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "medium" : "large";
         const hasTitle = appTitle !== "" && isPropDefined(appTitle);
         const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
         const appTitleVariant = overMobileBreakpoint
@@ -167,7 +167,7 @@ export class TopNavigation {
                 : "h4"
             : "h3";
         const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
-        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "default";
+        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "medium";
         const shortAppTitleSlot = isSlotUsed(el, "short-app-title");
         const hasAppTitleSlot = isSlotUsed(el, "app-title");
         const Component = hasAppTitleSlot ? "div" : "a";
@@ -180,7 +180,7 @@ export class TopNavigation {
                 [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
             } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ class: "title-link" }, attrs), hasAppIcon && (h("div", { class: "app-icon-container" }, h("slot", { name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", appearance: foregroundColor, variant: "secondary", "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", appearance: foregroundColor, variant: "secondary", "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
                 ["inline"]: inline,
             } }, hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
     }
@@ -405,8 +405,8 @@ export class TopNavigation {
                     "references": {}
                 }
             }, {
-                "method": "topNavResized",
-                "name": "topNavResized",
+                "method": "icTopNavResized",
+                "name": "icTopNavResized",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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  IcDeviceSizes,\n  IcValueEventDetail,\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  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: 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() 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   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: 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\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() topNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !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.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\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  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.topNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon\"\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          appearance={foregroundColor}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"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              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={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        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EACL,MAAM,EACN,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,qBAAqB,GAItB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,8BAA8B,EAC9B,gCAAgC,EAChC,UAAU,EACV,aAAa,EACb,aAAa,GACd,MAAM,qBAAqB,CAAC;AAG7B;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;QAChB,eAAU,GAAY,KAAK,CAAC;QAC5B,mBAAc,GAAY,KAAK,CAAC;QAChC,kBAAa,GAAY,KAAK,CAAC;QAC/B,yBAAoB,GAAY,KAAK,CAAC;QAEtC,mBAAc,GAAmB,IAAI,CAAC;QACtC,cAAS,GAA2B,IAAI,CAAC;QAkIzC,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAClD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YACrD,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;gBACxC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,eAAe,EAAE,CAAC;oBACtC,IAAI,CAAC,SAAS,GAAG,IAA8B,CAAC;gBAClD,CAAC;qBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,MAAM,EAAE,CAAC;oBACpC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;gBACvD,CAAC;gBAED,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;oBAC5B,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;gBAClC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAoBM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;QASM,iCAA4B,GAAG,GAAG,EAAE;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE;YACtC,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,QAAgB,EAAE,EAAE;YACpD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBACjC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;oBAC3C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;oBACxB,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;wBAChC,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,CAAC;gBACH,CAAC;gBACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,IAAI,EAAE,QAAQ;iBACf,CAAC,CAAC;gBACH,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBAChE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;oBAC9C,+DAA+D;oBAC/D,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;oBACzC,UAAU,CAAC,GAAG,EAAE;wBACd,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;oBACzB,CAAC,EAAE,GAAG,CAAC,CAAC;gBACV,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;0BAvN4B,YAAY,CAAC,EAAE;+BACC,uBAAuB,EAAE;qCAC7B,KAAK;sCACJ,KAAK;wCACH,KAAK;8BACf,KAAK;iCACF,KAAK;2BACZ,EAAE;8BAKK,YAAY;sCAKF,YAAY,CAAC,CAAC;oBAIvC,GAAG;sBAKA,KAAK;6BAKC,EAAE;sBAKT,EAAE;uBAKD,EAAE;;;IAQ5B,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,uGAAuG;QACvG,mEAAmE;QACnE,8BAA8B,CAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,CAAC,mBAAmB,CACzB,CAAC;IACJ,CAAC;IAiBD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC;YAC/B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAChD,gBAAgB,CACjB,CAAC;IACN,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAc,cAAc,CAAC,CAAC,KAAK,EAAE,CAAC;IACxE,CAAC;IAGD,sBAAsB,CAAC,EACrB,MAAM,GACkC;QACxC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3D,qGAAqG;gBACrG,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,wBAAwB,CAAC,EAAE,MAAM,EAAmC;QAClE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;IAClC,CAAC;IAGD,kBAAkB,CAAC,EAAE,MAAM,EAAwB;QACjD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;IACrC,CAAC;IAwBO,eAAe;QACrB,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;QAE3D,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YAC5B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CACpC,YAAY,EACZ,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,SAAS,CAC1D,CAAC;YACF,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACzD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAChC,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC;IACH,CAAC;IAMO,WAAW,CAAC,IAAa;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1E,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QACpD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1D,CAAC;IA0CD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,EAAE,EACF,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,IAAI,EACJ,MAAM,EACN,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,wBAAwB,EACxB,4BAA4B,EAC5B,aAAa,EACb,MAAM,EACN,OAAO,GACR,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,OAAO,KAAK,EAAE,CAAC;QAClC,MAAM,cAAc,GAClB,aAAa,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;QAE7D,MAAM,gBAAgB,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;QAC3E,MAAM,QAAQ,GAAG,QAAQ,KAAK,EAAE,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,UAAU,IAAI,sBAAsB,CAAC;QAElE,MAAM,eAAe,GAAyB,oBAAoB;YAChE,CAAC,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC;gBAC5B,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,IAAI;YACR,CAAC,CAAC,IAAI,CAAC;QAET,MAAM,uBAAuB,GAAG,GAC9B,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MACpC,SAAS,CAAC;QACV,MAAM,QAAQ,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEnE,MAAM,iBAAiB,GAAG,UAAU,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAC5D,MAAM,eAAe,GAAG,UAAU,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;QACpD,MAAM,SAAS,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;QAChD,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI;SACX,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,qBAAqB,EAAE,qBAAqB;gBAC5C,aAAa,EAAE,oBAAoB;gBACnC,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1B,eAAe,KAAK,qBAAqB,CAAC,IAAI;aACjD;YAED,WAAK,KAAK,EAAC,gBAAgB;gBACzB,4BAAsB,OAAO,EAAE,cAAc;oBAC3C,cAAQ,IAAI,EAAC,QAAQ;wBACnB,WAAK,KAAK,EAAC,qBAAqB;4BAC9B,WAAK,KAAK,EAAC,uBAAuB;gCAC/B,CAAC,QAAQ,IAAI,eAAe,CAAC,IAAI,CAChC,EAAC,SAAS,kBAAC,KAAK,EAAC,YAAY,IAAK,KAAK;oCACpC,UAAU,IAAI,CACb,WAAK,KAAK,EAAC,oBAAoB;wCAC7B,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP;oCACA,UAAU,IAAI,YAAY,CAAC,CAAC;wCAC7B,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACrD,qBACE,OAAO,EAAC,gBAAgB,gBAEtB,CAAC,CAAC,eAAe,IAAI,CAAC,iBAAiB,CAAC;4CACxC,GAAG,QAAQ,KAAK,aAAa,GAAG;wCAGlC,cACG,iBAAiB,CAAC,CAAC,CAAC,CACnB,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CACrC,CAAC,CAAC,CAAC,CACF,aAAa,CACd,CACE,CACS,CACjB,CAAC,CAAC,CAAC,CACF,qBAAe,OAAO,EAAE,eAAe;wCACrC,UAAI,KAAK,EAAC,YAAY,IACnB,eAAe,CAAC,CAAC,CAAC,CACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC/B,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACE,CACS,CACjB,CACS,CACb;gCACA,SAAS,IAAI,CACZ,WAAK,KAAK,EAAC,YAAY;oCACrB,mCACa,SAAS,EACpB,OAAO,EAAC,iBAAiB,EACzB,KAAK,EAAC,iBAAiB,IAEtB,MAAM,CACO,CACZ,CACP;gCACA,UAAU,IAAI,CACb,WAAK,KAAK,EAAC,aAAa;oCACtB,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,kBAAkB,gBACb,aAAa,IAEvB,OAAO,CACM,CACZ,CACP,CACG;4BAEL,CAAC,oBAAoB,IAAI,cAAc,CAAC,IAAI,CAC3C,WAAK,KAAK,EAAC,uBAAuB;gCAChC,WAAK,KAAK,EAAC,0BAA0B;oCAClC,CAAC,oBAAoB,IAAI,YAAM,IAAI,EAAC,QAAQ,GAAQ;oCAEpD,oBAAoB,IAAI,oBAAoB,IAAI,CAC/C,iBACE,EAAE,EAAC,sBAAsB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC,EAC7C,WAAW,EAAE,4BAA4B,EACzC,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,gBAAgB,gBACV,uBAAuB,EACnC,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,wBAAwB;wCAEjC,YAAM,IAAI,EAAC,aAAa;4CACtB,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS;gDAEd,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG;gDACxC,YAAM,CAAC,EAAC,4OAA4O,GAAG,CACnP,CACD,CACG,CACb;oCAEA,cAAc,IAAI,CAAC,oBAAoB,IAAI,CAC1C,WAAK,KAAK,EAAC,wBAAwB;wCACjC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;oCACA,cAAc,IAAI,oBAAoB,IAAI,CACzC,WAAK,KAAK,EAAC,uBAAuB;wCAChC,YACE,EAAE,EAAC,iCAAiC,EACpC,KAAK,EAAC,iCAAiC,iBAC3B,MAAM,6BAGb;wCACP,8BACkB,iCAAiC,iBACpC,GAAG,cAAc,EAAE;4CAEhC,iBACE,EAAE,EAAC,aAAa,EAChB,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAC,WAAW,mBACL,OAAO,mBACP,MAAM,gBACR,QACV,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KACjC,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe;;gDAGxB,WACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,WAAW;oDAEhB,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG;oDACxC,YAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACI,CACR,CACF,CACP,CACG,CACF,CACP,CACG;wBAEL,sBAAsB,IAAI,CACzB,WAAK,KAAK,EAAC,sBAAsB;4BAC/B,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP;wBAEA,aAAa,IAAI,CAAC,oBAAoB,IAAI,CACzC,WAAK,KAAK,EAAC,iBAAiB;4BAC1B,YACE,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,iBACpB,MAAM,iBAGb;4BACP,8BACkB,0BAA0B,EAC1C,KAAK,EAAC,qBAAqB;gCAE3B,4BAAsB,UAAU,EAAE,eAAe;oCAC/C,UAAI,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,IAAI;wCAC5C,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACgB,CACnB,CACF,CACP,CACM,CACY,CACnB;YACL,cAAc,IAAI,CACjB,0BACE,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;oBACL,CAAC,QAAQ,CAAC,EAAE,MAAM;iBACnB;gBAEA,cAAc,IAAI,CACjB,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS;oBAC3C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;gBACD,UAAI,IAAI,EAAC,YAAY;oBACnB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACc,CACtB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  IcDeviceSizes,\n  IcValueEventDetail,\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  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: 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() 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   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: 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\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !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.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\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  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.icTopNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon\"\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          appearance={foregroundColor}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"left-icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={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        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-typography/ic-typography.css

@@ -444,6 +444,7 @@ video {
 :host {
   display: block;
   position: relative;
+  color: var(--ic-typography-color, var(--ic-color-text-primary));
 }
 
 :host(.ic-typography-vertical-margins-h1) {
@@ -591,7 +592,7 @@ video {
   border: none;
   background: none;
   padding: 0;
-  color: var(--ic-color-primary-text);
+  color: var(--ic-color-text-primary);
   text-decoration: underline;
   font-weight: var(--ic-font-weight-bold);
   transition: var(--ic-easing-transition-fast);
@@ -606,26 +607,31 @@ video {
   cursor: pointer;
 }
 
-:host(.strikethrough) {
+:host(.ic-typography-strikethrough) {
   text-decoration: line-through;
 }
 
-:host(.underline) {
+:host(.ic-typography-underline) {
   text-decoration: underline;
 }
 
-:host(.underline.strikethrough) {
+:host(.ic-typography-underline.ic-typography-strikethrough) {
   text-decoration: line-through underline;
 }
 
-:host(.italic) {
+:host(.ic-typography-italic) {
   font-style: italic !important;
 }
 
-:host(.bold) {
+:host(.ic-typography-bold) {
   font-weight: var(--ic-font-weight-bold);
 }
 
+:host(.ic-theme-dark),
+:host(.ic-theme-light) {
+  --ic-typography-color: var(--ic-color-text-primary);
+}
+
 :host(.in-ag-grid),
 :host(.in-ag-grid) ::slotted(*) {
   overflow: hidden;