@ukic/web-components 2.25.1 → 3.0.0

package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button-group.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n} from \"@stencil/core\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcSelectTypes,\n  IcSelectMethodTypes,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\n\ninterface lastKey {\n  key: string | null;\n  shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n  tag: \"ic-toggle-button-group\",\n  styleUrl: \"ic-toggle-button-group.css\",\n  shadow: true,\n})\nexport class ToggleButtonGroup {\n  @Element() el: HTMLIcToggleButtonGroupElement;\n\n  @State() lastKeyPressed: lastKey = {\n    key: null,\n    shift: false,\n  };\n\n  /**\n   * The accessible label of the toggle button group component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n  /**\n   * The appearance of the toggle button group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the toggle button group will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icons in relation to the toggle button labels.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * If `true`, the toggle button group will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n   */\n  @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n  /**\n   * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n   */\n  @Prop() selectType?: IcSelectTypes = \"single\";\n\n  /**\n   * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when a toggle button is selected.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icToggleChecked\")\n  selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n    const allToggles = this.getAllToggleButtons();\n    let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n    // tabTarget used in proxySelectHandler\n    tabTarget && tabTarget.focus();\n    if (this.selectType === \"single\") {\n      if (!clickedToggle) {\n        clickedToggle = tabTarget;\n      }\n      allToggles.forEach((el) => {\n        if (el.id !== clickedToggle.id && el.toggleChecked) {\n          el.toggleChecked = false;\n        }\n      });\n\n      this.icChange.emit({\n        toggleChecked: ev.detail.toggleChecked,\n        selectedOption: clickedToggle,\n      });\n    } else {\n      const toggledOptions = this.getAllToggleButtons().filter(\n        (el) => el.toggleChecked && !el.disabled\n      );\n\n      this.icChange.emit({\n        toggleChecked: toggledOptions.map((opt) => opt.toggleChecked),\n        toggledOptions: toggledOptions.map((opt) => ({\n          toggleButton: opt,\n        })),\n        selectedOption: clickedToggle,\n      });\n    }\n  }\n\n  componentWillLoad(): void {\n    this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n    this.selectMethod === \"auto\" && this.selectType === \"single\";\n    document.addEventListener(\"keydown\", this.keyListener);\n  }\n\n  componentDidLoad(): void {\n    this.getAllToggleButtons().forEach((el, i) => {\n      this.setSlottedAria(el);\n      el.size = this.size;\n      el.loading = this.loading;\n      el.iconPlacement = this.iconPlacement;\n      el.disabled ? null : (el.disabled = this.disabled);\n      el.appearance = this.appearance;\n      el.variant = this.variant;\n      el.fullWidth = this.fullWidth;\n      el.id = i.toString();\n      el.tabIndex = -1;\n      el.addEventListener(\"keydown\", (ev) => {\n        this.handleKeyDown(ev);\n      });\n      el.classList.add(\"expand-toggle-group-child\");\n    });\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener(\"keydown\", this.keyListener);\n  }\n\n  private keyListener = (ev: KeyboardEvent) => {\n    this.lastKeyPressed = {\n      key: ev.key,\n      shift: ev.shiftKey,\n    };\n  };\n\n  private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n    const btn = el.shadowRoot\n      .querySelector(\"ic-button\")\n      .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n    let aria = btn.getAttribute(\"aria-label\");\n    aria += \", \";\n    aria += this.accessibleLabel;\n    btn.setAttribute(\"aria-label\", aria);\n  };\n\n  private handleHostFocus = (ev: FocusEvent): void => {\n    if (this.loading || this.disabled) {\n      return null;\n    }\n    const el = ev.target as HTMLIcToggleButtonGroupElement;\n    const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n    const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n    if (\n      ((toggleButtons.every((el) => !el.toggleChecked) ||\n        this.selectType !== \"single\") &&\n        this.lastKeyPressed.shift === false) ||\n      (toggleButtons.every((el) => !el.toggleChecked) &&\n        this.lastKeyPressed.shift === true &&\n        relEl.tagName == TOGGLE_GROUP)\n    ) {\n      toggleButtons[0].focus();\n    } else if (\n      this.lastKeyPressed.shift === false ||\n      (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n    ) {\n      // if toggleChecked is true and selectMethod is \"single\", focus that toggle\n      const toggledButton = toggleButtons.filter((el) => el.toggleChecked);\n      toggledButton[0].focus();\n    }\n  };\n\n  // trigger selectHandler when unable to add 'target'\n  private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n    toggle.toggleChecked = true;\n    const customEv = new CustomEvent(\"icToggleChecked\", {\n      detail: {\n        toggleChecked: toggle.toggleChecked,\n      },\n    });\n    this.selectHandler(customEv, toggle);\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const focussedChild = toggleButtonOptions.indexOf(\n      toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, true)\n            ].focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[\n                this.getNextItemToSelect(focussedChild, false)\n              ]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, false)\n            ].focus();\n        break;\n      case \"Tab\":\n        break;\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const numToggles = toggleButtonOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n    if (nextItem < 0) {\n      nextItem = numToggles;\n    } else if (nextItem > numToggles) {\n      nextItem = 0;\n    }\n\n    if (toggleButtonOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n    return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-label={this.accessibleLabel}\n        aria-disabled={this.disabled ? \"true\" : \"false\"}\n        tabindex={0}\n        class={{\n          [\"full-width\"]: this.fullWidth,\n          [\"loading\"]: this.loading,\n          [\"disabled\"]: this.disabled,\n          [`${this.appearance}`]: true,\n        }}\n        onFocus={this.handleHostFocus}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-toggle-button-group.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AAcvB,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAO9C,MAAM,OAAO,iBAAiB;;QA+HpB,gBAAW,GAAG,CAAC,EAAiB,EAAE,EAAE;YAC1C,IAAI,CAAC,cAAc,GAAG;gBACpB,GAAG,EAAE,EAAE,CAAC,GAAG;gBACX,KAAK,EAAE,EAAE,CAAC,QAAQ;aACnB,CAAC;QACJ,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,EAA6B,EAAE,EAAE;YACzD,MAAM,GAAG,GAAG,EAAE,CAAC,UAAU;iBACtB,aAAa,CAAC,WAAW,CAAC;iBAC1B,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAsB,CAAC;YAC3D,IAAI,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,IAAI,IAAI,CAAC;YACb,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC;YAC7B,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACvC,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,EAAc,EAAQ,EAAE;YACjD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,EAAE,GAAG,EAAE,CAAC,MAAwC,CAAC;YACvD,MAAM,KAAK,GAAG,EAAE,CAAC,aAA0C,CAAC;YAC5D,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC1E,IACE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC;gBACxC,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC;gBAC7B,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC;gBACtC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC;oBACvC,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,IAAI;oBAClC,KAAK,CAAC,OAAO,IAAI,YAAY,CAAC,EAChC,CAAC;gBACD,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;iBAAM,IACL,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,KAAK;gBACnC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,YAAY,CAAC,EACrE,CAAC;gBACD,qEAAqE;gBACrE,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;gBAC/D,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QAaM,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACrD,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACvD,MAAM,aAAa,GAAG,mBAAmB,CAAC,OAAO,CAC/C,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACrE,CAAC;YACF,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACf,IAAI,CAAC,YAAY,KAAK,MAAM;wBAC1B,CAAC,CAAC,IAAI,CAAC,kBAAkB,CACrB,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE;wBACH,CAAC,CAAC,mBAAmB,CACjB,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAC9C,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,KAAK,SAAS,CAAC;gBACf,KAAK,WAAW;oBACd,IAAI,CAAC,YAAY,KAAK,MAAM;wBAC1B,CAAC,CAAC,IAAI,CAAC,kBAAkB,CACrB,mBAAmB,CACjB,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,KAAK,CAAC,CAC/C,CACF;wBACH,CAAC,CAAC,mBAAmB,CACjB,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,KAAK,CAAC,CAC/C,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,KAAK,KAAK;oBACR,MAAM;YACV,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB,EACX,EAAE;YACV,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACvD,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;YAElD,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;gBACpB,WAAW,GAAG,CAAC,CAAC;YAClB,CAAC;YAED,IAAI,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;YAC9D,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACjB,QAAQ,GAAG,UAAU,CAAC;YACxB,CAAC;iBAAM,IAAI,QAAQ,GAAG,UAAU,EAAE,CAAC;gBACjC,QAAQ,GAAG,CAAC,CAAC;YACf,CAAC;YAED,IAAI,mBAAmB,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAC3C,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;YAC5D,CAAC;YAED,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC;8BA1OiC;YACjC,GAAG,EAAE,IAAI;YACT,KAAK,EAAE,KAAK;SACb;+BAKkC,qBAAqB;0BAKhB,SAAS;wBAKrB,KAAK;yBAKH,KAAK;;uBAUP,KAAK;4BAK6B,QAAQ;0BAKjC,QAAQ;oBAKpB,SAAS;uBAKqB,SAAS;;IAQhE,aAAa,CAAC,EAAe,EAAE,SAAqC;QAClE,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC9C,IAAI,aAAa,GAAG,EAAE,CAAC,MAAmC,CAAC;QAC3D,uCAAuC;QACvC,SAAS,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,aAAa,GAAG,SAAS,CAAC;YAC5B,CAAC;YACD,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBACxB,IAAI,EAAE,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;oBAC7C,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO;gBAC1B,cAAc,EAAE,aAAa;aAC9B,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,MAAM,CACtD,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,CACnC,CAAC;YAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC;gBACjD,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;oBAC3C,YAAY,EAAE,GAAG;iBAClB,CAAC,CAAC;gBACH,cAAc,EAAE,aAAa;aAC9B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACzD,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YAC3C,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;YACxB,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACpB,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAC1B,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YACtC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YACnD,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YAChC,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAC1B,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC9B,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;YACrB,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACjB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE;gBACpC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;YACzB,CAAC,CAAC,CAAC;YACH,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC;IA6CD,oDAAoD;IAC5C,kBAAkB,CAAC,MAAiC;QAC1D,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,MAAM,QAAQ,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;YAClD,MAAM,EAAE;gBACN,OAAO,EAAE,MAAM,CAAC,OAAO;aACxB;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACvC,CAAC;IA4DO,mBAAmB;QACzB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,eAAe,mBACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;gBACL,CAAC,mCAAmC,CAAC,EAAE,IAAI,CAAC,SAAS;gBACrD,CAAC,gCAAgC,CAAC,EAAE,IAAI,CAAC,OAAO;gBAChD,CAAC,iCAAiC,CAAC,EAAE,IAAI,CAAC,QAAQ;gBAClD,CAAC,0BAA0B,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;aACpD,EACD,OAAO,EAAE,IAAI,CAAC,eAAe;YAE7B,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n} from \"@stencil/core\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcSelectTypes,\n  IcSelectMethodTypes,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\n\ninterface lastKey {\n  key: string | null;\n  shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n  tag: \"ic-toggle-button-group\",\n  styleUrl: \"ic-toggle-button-group.css\",\n  shadow: true,\n})\nexport class ToggleButtonGroup {\n  @Element() el: HTMLIcToggleButtonGroupElement;\n\n  @State() lastKeyPressed: lastKey = {\n    key: null,\n    shift: false,\n  };\n\n  /**\n   * The accessible label of the toggle button group component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n  /**\n   * The appearance of the toggle button group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the toggle button group will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icons in relation to the toggle button labels.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * If `true`, the toggle button group will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n   */\n  @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n  /**\n   * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n   */\n  @Prop() selectType?: IcSelectTypes = \"single\";\n\n  /**\n   * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when a toggle button is selected.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icToggleChecked\")\n  selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n    const allToggles = this.getAllToggleButtons();\n    let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n    // tabTarget used in proxySelectHandler\n    tabTarget && tabTarget.focus();\n    if (this.selectType === \"single\") {\n      if (!clickedToggle) {\n        clickedToggle = tabTarget;\n      }\n      allToggles.forEach((el) => {\n        if (el.id !== clickedToggle.id && el.checked) {\n          el.checked = false;\n        }\n      });\n\n      this.icChange.emit({\n        checked: ev.detail.checked,\n        selectedOption: clickedToggle,\n      });\n    } else {\n      const toggledOptions = this.getAllToggleButtons().filter(\n        (el) => el.checked && !el.disabled\n      );\n\n      this.icChange.emit({\n        checked: toggledOptions.map((opt) => opt.checked),\n        toggledOptions: toggledOptions.map((opt) => ({\n          toggleButton: opt,\n        })),\n        selectedOption: clickedToggle,\n      });\n    }\n  }\n\n  componentWillLoad(): void {\n    this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n    this.selectMethod === \"auto\" && this.selectType === \"single\";\n    document.addEventListener(\"keydown\", this.keyListener);\n  }\n\n  componentDidLoad(): void {\n    this.getAllToggleButtons().forEach((el, i) => {\n      this.setSlottedAria(el);\n      el.size = this.size;\n      el.loading = this.loading;\n      el.iconPlacement = this.iconPlacement;\n      el.disabled ? null : (el.disabled = this.disabled);\n      el.appearance = this.appearance;\n      el.variant = this.variant;\n      el.fullWidth = this.fullWidth;\n      el.id = i.toString();\n      el.tabIndex = -1;\n      el.addEventListener(\"keydown\", (ev) => {\n        this.handleKeyDown(ev);\n      });\n      el.classList.add(\"expand-toggle-group-child\");\n    });\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener(\"keydown\", this.keyListener);\n  }\n\n  private keyListener = (ev: KeyboardEvent) => {\n    this.lastKeyPressed = {\n      key: ev.key,\n      shift: ev.shiftKey,\n    };\n  };\n\n  private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n    const btn = el.shadowRoot\n      .querySelector(\"ic-button\")\n      .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n    let aria = btn.getAttribute(\"aria-label\");\n    aria += \", \";\n    aria += this.accessibleLabel;\n    btn.setAttribute(\"aria-label\", aria);\n  };\n\n  private handleHostFocus = (ev: FocusEvent): void => {\n    if (this.loading || this.disabled) {\n      return null;\n    }\n    const el = ev.target as HTMLIcToggleButtonGroupElement;\n    const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n    const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n    if (\n      ((toggleButtons.every((el) => !el.checked) ||\n        this.selectType !== \"single\") &&\n        this.lastKeyPressed.shift === false) ||\n      (toggleButtons.every((el) => !el.checked) &&\n        this.lastKeyPressed.shift === true &&\n        relEl.tagName == TOGGLE_GROUP)\n    ) {\n      toggleButtons[0].focus();\n    } else if (\n      this.lastKeyPressed.shift === false ||\n      (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n    ) {\n      // if checked is true and selectMethod is \"single\", focus that toggle\n      const toggledButton = toggleButtons.filter((el) => el.checked);\n      toggledButton[0].focus();\n    }\n  };\n\n  // trigger selectHandler when unable to add 'target'\n  private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n    toggle.checked = true;\n    const customEv = new CustomEvent(\"icToggleChecked\", {\n      detail: {\n        checked: toggle.checked,\n      },\n    });\n    this.selectHandler(customEv, toggle);\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const focussedChild = toggleButtonOptions.indexOf(\n      toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, true)\n            ].focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[\n                this.getNextItemToSelect(focussedChild, false)\n              ]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, false)\n            ].focus();\n        break;\n      case \"Tab\":\n        break;\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const numToggles = toggleButtonOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n    if (nextItem < 0) {\n      nextItem = numToggles;\n    } else if (nextItem > numToggles) {\n      nextItem = 0;\n    }\n\n    if (toggleButtonOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n    return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-label={this.accessibleLabel}\n        aria-disabled={this.disabled ? \"true\" : \"false\"}\n        tabindex={0}\n        class={{\n          [\"ic-toggle-button-group-full-width\"]: this.fullWidth,\n          [\"ic-toggle-button-group-loading\"]: this.loading,\n          [\"ic-toggle-button-group-disabled\"]: this.disabled,\n          [`ic-toggle-button-group-${this.appearance}`]: true,\n        }}\n        onFocus={this.handleHostFocus}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button-group.types.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button-group/ic-toggle-button-group.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IcChangeEventDetail {\n  toggleChecked: boolean[] | boolean;\n  toggledOptions?: {\n    toggleButton: HTMLIcToggleButtonElement;\n  }[];\n  selectedOption: HTMLIcToggleButtonElement;\n}\n"]}
+{"version":3,"file":"ic-toggle-button-group.types.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button-group/ic-toggle-button-group.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IcChangeEventDetail {\n  checked: boolean[] | boolean;\n  toggledOptions?: {\n    toggleButton: HTMLIcToggleButtonElement;\n  }[];\n  selectedOption: HTMLIcToggleButtonElement;\n}\n"]}

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js

@@ -33,7 +33,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         await page.waitForChanges();
         toggleGroup.focus();
         await page.waitForChanges();
-        expect(buttons[0].toggleChecked).toBeFalsy();
+        expect(buttons[0].checked).toBeFalsy();
     });
     it("should test that focusing group when an ic-toggle-button selected should not select first option", async () => {
         const page = await newSpecPage({
@@ -47,11 +47,11 @@ describe("ic-toggle-button-group component unit tests", () => {
         const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
         const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
         await page.waitForChanges();
-        buttons[1].toggleChecked = true;
+        buttons[1].checked = true;
         toggleGroup.focus();
         await page.waitForChanges();
-        expect(buttons[0].toggleChecked).toBeFalsy();
-        expect(buttons[1].toggleChecked).toBeTruthy();
+        expect(buttons[0].checked).toBeFalsy();
+        expect(buttons[1].checked).toBeTruthy();
     });
     it("should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'", async () => {
         const page = await newSpecPage({
@@ -67,7 +67,7 @@ describe("ic-toggle-button-group component unit tests", () => {
         await page.waitForChanges();
         toggleGroup.focus();
         await page.waitForChanges();
-        expect(buttons[0].toggleChecked).toBeFalsy();
+        expect(buttons[0].checked).toBeFalsy();
     });
     it("should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'", async () => {
         const page = await newSpecPage({
@@ -83,8 +83,8 @@ describe("ic-toggle-button-group component unit tests", () => {
         const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
         const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
         await page.waitForChanges();
-        buttons[0].toggleChecked = true;
-        buttons[1].toggleChecked = true;
+        buttons[0].checked = true;
+        buttons[1].checked = true;
         const customEv = new CustomEvent("icToggleChecked", {});
         page.rootInstance.selectHandler(customEv);
         await page.waitForChanges();
@@ -102,34 +102,34 @@ describe("ic-toggle-button-group component unit tests", () => {
         const firstButton = (await document.querySelector("#0"));
         const secondButton = (await document.querySelector("#1"));
         const thirdButton = (await document.querySelector("#2"));
-        expect(firstButton.toggleChecked).toBeFalsy();
+        expect(firstButton.checked).toBeFalsy();
         await firstButton.click();
-        expect(firstButton.toggleChecked).toBeTruthy();
+        expect(firstButton.checked).toBeTruthy();
         await page.waitForChanges();
         page.rootInstance.handleKeyDown(keyboard("ArrowLeft"));
-        expect(thirdButton.toggleChecked).toBeTruthy();
-        expect(firstButton.toggleChecked).toBeFalsy();
+        expect(thirdButton.checked).toBeTruthy();
+        expect(firstButton.checked).toBeFalsy();
         await page.waitForChanges();
         await firstButton.click();
         page.rootInstance.handleKeyDown(keyboard("ArrowUp"));
-        expect(thirdButton.toggleChecked).toBeTruthy();
-        expect(firstButton.toggleChecked).toBeFalsy();
+        expect(thirdButton.checked).toBeTruthy();
+        expect(firstButton.checked).toBeFalsy();
         await page.waitForChanges();
         await firstButton.click();
         page.rootInstance.handleKeyDown(keyboard("ArrowDown"));
-        expect(secondButton.toggleChecked).toBeTruthy();
-        expect(firstButton.toggleChecked).toBeFalsy();
+        expect(secondButton.checked).toBeTruthy();
+        expect(firstButton.checked).toBeFalsy();
         await page.waitForChanges();
         await firstButton.click();
         page.rootInstance.handleKeyDown(keyboard("ArrowLeft"));
-        expect(thirdButton.toggleChecked).toBeTruthy();
-        expect(firstButton.toggleChecked).toBeFalsy();
+        expect(thirdButton.checked).toBeTruthy();
+        expect(firstButton.checked).toBeFalsy();
         secondButton.disabled = true;
         await page.waitForChanges();
         await firstButton.click();
         page.rootInstance.handleKeyDown(keyboard("ArrowRight"));
-        expect(thirdButton.toggleChecked).toBeTruthy();
-        expect(firstButton.toggleChecked).toBeFalsy();
+        expect(thirdButton.checked).toBeTruthy();
+        expect(firstButton.checked).toBeFalsy();
         // for coverage
         page.rootInstance.handleKeyDown(keyboard("Tab"));
         document.dispatchEvent(keyboard("Tab"));

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n  return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n  it(\"should getAllToggleButtons and return an array of slotted ic-toggle-buttons\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n    await page.waitForChanges();\n    expect(toggleButtonArray.length).toBe(3);\n  });\n  it(\"should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n  });\n  it(\"should test that focusing group when an ic-toggle-button selected should not select first option\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    buttons[1].toggleChecked = true;\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n    expect(buttons[1].toggleChecked).toBeTruthy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].toggleChecked).toBeFalsy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icChange\", eventSpy);\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    buttons[0].toggleChecked = true;\n    buttons[1].toggleChecked = true;\n\n    const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n    page.rootInstance.selectHandler(customEv);\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n  it(\"should test handleKeyDown function\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-method=\"auto\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const firstButton = (await document.querySelector(\n      \"#0\"\n    )) as HTMLIcToggleButtonElement;\n    const secondButton = (await document.querySelector(\n      \"#1\"\n    )) as HTMLIcToggleButtonElement;\n    const thirdButton = (await document.querySelector(\n      \"#2\"\n    )) as HTMLIcToggleButtonElement;\n\n    expect(firstButton.toggleChecked).toBeFalsy();\n    await firstButton.click();\n    expect(firstButton.toggleChecked).toBeTruthy();\n\n    await page.waitForChanges();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n    expect(secondButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    secondButton.disabled = true;\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n    expect(thirdButton.toggleChecked).toBeTruthy();\n    expect(firstButton.toggleChecked).toBeFalsy();\n\n    // for coverage\n    page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n    document.dispatchEvent(keyboard(\"Tab\"));\n  });\n  it(\"should test handleKeyDown on disabled toggle-button-group\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group disabled>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const mockEvent = new FocusEvent(\"focus\");\n\n    expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n  });\n});\n"]}
+{"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n  return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n  it(\"should getAllToggleButtons and return an array of slotted ic-toggle-buttons\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n    await page.waitForChanges();\n    expect(toggleButtonArray.length).toBe(3);\n  });\n  it(\"should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].checked).toBeFalsy();\n  });\n  it(\"should test that focusing group when an ic-toggle-button selected should not select first option\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    buttons[1].checked = true;\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].checked).toBeFalsy();\n    expect(buttons[1].checked).toBeTruthy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].checked).toBeFalsy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icChange\", eventSpy);\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    buttons[0].checked = true;\n    buttons[1].checked = true;\n\n    const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n    page.rootInstance.selectHandler(customEv);\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n  it(\"should test handleKeyDown function\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-method=\"auto\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const firstButton = (await document.querySelector(\n      \"#0\"\n    )) as HTMLIcToggleButtonElement;\n    const secondButton = (await document.querySelector(\n      \"#1\"\n    )) as HTMLIcToggleButtonElement;\n    const thirdButton = (await document.querySelector(\n      \"#2\"\n    )) as HTMLIcToggleButtonElement;\n\n    expect(firstButton.checked).toBeFalsy();\n    await firstButton.click();\n    expect(firstButton.checked).toBeTruthy();\n\n    await page.waitForChanges();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n    expect(secondButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    secondButton.disabled = true;\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    // for coverage\n    page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n    document.dispatchEvent(keyboard(\"Tab\"));\n  });\n  it(\"should test handleKeyDown on disabled toggle-button-group\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group disabled>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const mockEvent = new FocusEvent(\"focus\");\n\n    expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { createPopper } from "@popperjs/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class Tooltip {
@@ -85,9 +85,7 @@ export class Tooltip {
                         .getBoundingClientRect();
                     this.getTooltipTranslate(dialogEl);
                 }
-                this.popperInstance = createPopper(this.el, this.toolTip, {
-                    placement: this.placement,
-                    modifiers: [
+                this.popperInstance = createPopper(this.el, this.toolTip, Object.assign({ placement: this.placement, modifiers: [
                         {
                             name: "offset",
                             options: {
@@ -104,8 +102,7 @@ export class Tooltip {
                             name: "eventListeners",
                             options: { scroll: false, resize: false },
                         },
-                    ],
-                });
+                    ] }, this.popperProps));
             }
             else {
                 console.warn(`Tooltip can't display without prop 'label' set`);
@@ -165,6 +162,14 @@ export class Tooltip {
         this.silent = false;
         this.target = undefined;
         this.label = undefined;
+        this.popperProps = {};
+    }
+    /**
+     * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip
+     * @param props object - createPopper props set externally
+     */
+    async setExternalPopperProps(props) {
+        this.popperProps = props;
     }
     disconnectedCallback() {
         this.manageEventListeners("remove");
@@ -356,8 +361,53 @@ export class Tooltip {
             }
         };
     }
+    static get states() {
+        return {
+            "popperProps": {}
+        };
+    }
     static get methods() {
         return {
+            "setExternalPopperProps": {
+                "complexType": {
+                    "signature": "<T extends Partial<Options>>(props: T) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "T",
+                            "docs": "object - createPopper props set externally"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Options": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": ""
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "This method allows props to be added to the PopperJS createPopper instance outside of tooltip"
+                        }, {
+                            "name": "param",
+                            "text": "props object - createPopper props set externally"
+                        }]
+                }
+            },
             "displayTooltip": {
                 "complexType": {
                     "signature": "(show: boolean, persistTooltip?: boolean) => Promise<void>",

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":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Method } from \"@stencil/core\";\nimport { Instance, 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  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      });\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\";\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"]}

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) {
@@ -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,