@ukic/web-components 3.5.0 → 3.7.0

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

@@ -1 +1 @@
-{"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-hover\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-pressed\n  );\n}\n\n:host(:not(.expand-toggle-group-child)) {\n  display: inline-block;\n  border-radius: var(--ic-border-radius);\n  border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-full-width:not(.expand-toggle-group-child)) {\n  width: 100%;\n}\n\n:host(.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n  --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n}\n\n:host(.expand-toggle-group-child:not(.ic-toggle-button-loading))\n  ::part(button) {\n  min-height: inherit;\n  height: auto;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: none;\n  color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n  color: var(--toggle-button-text-colour-hover);\n  background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n  color: var(--toggle-button-text-colour-active);\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host ::part(button):focus {\n  border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host ::part(button):hover:focus {\n  border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host ::part(button):active:focus {\n  border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n  color: var(--toggle-button-text-colour);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:hover) {\n  border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:active) {\n  border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(:not(.expand-toggle-group-child).ic-toggle-button-disabled) {\n  border: var(--ic-border-width) dashed var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-border-focus),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button) {\n  background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n  ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed\n  );\n\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed\n  );\n\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n  ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n  ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n@media (forced-colors: active) {\n  :host(.ic-toggle-button-checked) ::part(button),\n  :host(.ic-toggle-button-checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n    background-color: GrayText;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n    ::part(button):hover {\n    --loading-button-background: Highlight;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n  IcSizes,\n  IcThemeMode,\n  IcIconPlacementOptions,\n  IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\nconst TRACKED_ATTRIBUTES = [\n  \"loading\",\n  \"disabled\",\n  \"full-width\",\n  \"icon-placement\",\n  \"variant\",\n  \"size\",\n  \"theme\",\n  \"monochrome\",\n];\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop({ mutable: true }) disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop({ mutable: true }) fullWidth = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement: IcIconPlacementOptions = \"left\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop({ mutable: true }) loading = false;\n\n  /**\n   * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n   */\n  @Prop({ mutable: true }) monochrome = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop({ mutable: true }) size: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n  /**\n   * The position of the tooltip in relation to the toggle button.\n   */\n  @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true, mutable: true }) variant: \"default\" | \"icon\" =\n    \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    if (!isSlottedInGroup(this.el)) return;\n\n    const parentAttributes = this.el.parentElement?.attributes;\n    if (!parentAttributes) return;\n\n    for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {\n      const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);\n      if (!attribute) continue;\n\n      switch (attribute.name) {\n        case TRACKED_ATTRIBUTES[0]:\n          this.loading = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[1]:\n          this.disabled = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[2]:\n          this.fullWidth = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[3]:\n          this.iconPlacement = attribute.value as IcIconPlacementOptions;\n          break;\n        case TRACKED_ATTRIBUTES[4]:\n          this.variant = attribute.value as \"default\" | \"icon\";\n          break;\n        case TRACKED_ATTRIBUTES[5]:\n          this.size = attribute.value as IcSizes;\n          break;\n        case TRACKED_ATTRIBUTES[6]:\n          this.theme = attribute.value as IcThemeMode;\n          break;\n        case TRACKED_ATTRIBUTES[7]:\n          this.monochrome = attribute.value !== \"false\";\n          break;\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = () => {\n    if (!this.loading && !this.disabled) {\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n    }\n  };\n\n  render() {\n    const {\n      accessibleLabel,\n      checked,\n      disabled,\n      fullWidth,\n      iconPlacement,\n      monochrome,\n      label,\n      loading,\n      size,\n      theme,\n      tooltipPlacement,\n      variant,\n    } = this;\n\n    const iconVariant = variant === \"icon\";\n\n    return (\n      <Host\n        class={{\n          \"ic-toggle-button-checked\": checked,\n          \"ic-toggle-button-disabled\": disabled,\n          \"ic-toggle-button-icon\": iconVariant,\n          \"ic-toggle-button-loading\": loading,\n          \"ic-toggle-button-monochrome\": monochrome,\n          \"ic-toggle-button-full-width\": fullWidth,\n          [`ic-toggle-button-${size}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={`${checked}`}\n          variant={iconVariant ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={accessibleLabel}\n          aria-label={`${accessibleLabel ? accessibleLabel : label}, ${\n            checked ? \"ticked\" : \"unticked\"\n          }`}\n          disabled={disabled}\n          size={size}\n          fullWidth={fullWidth}\n          loading={loading}\n          tooltipPlacement={tooltipPlacement}\n        >\n          {!iconVariant && label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${iconPlacement}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-hover\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-pressed\n  );\n}\n\n:host(:not(.expand-toggle-group-child)) {\n  display: inline-block;\n  border-radius: var(--ic-border-radius);\n  border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-full-width:not(.expand-toggle-group-child)) {\n  width: 100%;\n}\n\n:host(.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n  --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n}\n\n:host(.expand-toggle-group-child:not(.ic-toggle-button-loading))\n  ::part(button) {\n  min-height: inherit;\n  height: auto;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-monochrome-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: none;\n  color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n  color: var(--toggle-button-text-colour-hover);\n  background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n  color: var(--toggle-button-text-colour-active);\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host ::part(button):focus {\n  border: var(--ic-border-width) solid var(--toggle-button-border);\n}\n\n:host ::part(button):hover:focus {\n  border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host ::part(button):active:focus {\n  border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n  color: var(--toggle-button-text-colour);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:hover) {\n  border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n}\n\n:host(:not(.expand-toggle-group-child)):has(ic-button:active) {\n  border: var(--ic-border-width) solid var(--toggle-button-border-active);\n}\n\n:host(:not(.expand-toggle-group-child).ic-toggle-button-disabled) {\n  border: var(--ic-border-width) dashed var(--toggle-button-border);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-border-focus),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button) {\n  background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n  ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome)\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed\n  );\n\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed\n  );\n\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n  ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome)\n  ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-hide-outline) {\n  --toggle-button-border: transparent !important;\n  --toggle-button-border-hover: transparent !important;\n  --toggle-button-border-active: transparent !important;\n}\n\n:host(.ic-toggle-button-hide-outline) ::part(button):focus {\n  border: none;\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-hide-outline)\n  ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-hide-outline.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n  :host(.ic-toggle-button-checked) ::part(button),\n  :host(.ic-toggle-button-checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n    background-color: GrayText;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-loading)\n    ::part(button):hover {\n    --loading-button-background: Highlight;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isSlottedInGroup,\n} from \"../../utils/helpers\";\nimport {\n  IcSizes,\n  IcThemeMode,\n  IcIconPlacementOptions,\n  IcButtonTooltipPlacement,\n} from \"../../utils/types\";\n\nconst TRACKED_ATTRIBUTES = [\n  \"loading\",\n  \"disabled\",\n  \"full-width\",\n  \"icon-placement\",\n  \"variant\",\n  \"size\",\n  \"theme\",\n  \"monochrome\",\n  \"outline\",\n];\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop({ mutable: true }) disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop({ mutable: true }) fullWidth = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement: IcIconPlacementOptions = \"left\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop({ mutable: true }) loading = false;\n\n  /**\n   * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n   */\n  @Prop({ mutable: true }) monochrome = false;\n\n  /**\n   * If `true`, the toggle button will display with an outline.\n   */\n  @Prop({ mutable: true }) outline = true;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop({ mutable: true }) size: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n  /**\n   * The position of the tooltip in relation to the toggle button.\n   */\n  @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true, mutable: true }) variant: \"default\" | \"icon\" =\n    \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    if (!isSlottedInGroup(this.el)) return;\n\n    const parentAttributes = this.el.parentElement?.attributes;\n    if (!parentAttributes) return;\n\n    for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {\n      const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);\n      if (!attribute) continue;\n\n      switch (attribute.name) {\n        case TRACKED_ATTRIBUTES[0]:\n          this.loading = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[1]:\n          this.disabled = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[2]:\n          this.fullWidth = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[3]:\n          this.iconPlacement = attribute.value as IcIconPlacementOptions;\n          break;\n        case TRACKED_ATTRIBUTES[4]:\n          this.variant = attribute.value as \"default\" | \"icon\";\n          break;\n        case TRACKED_ATTRIBUTES[5]:\n          this.size = attribute.value as IcSizes;\n          break;\n        case TRACKED_ATTRIBUTES[6]:\n          this.theme = attribute.value as IcThemeMode;\n          break;\n        case TRACKED_ATTRIBUTES[7]:\n          this.monochrome = attribute.value !== \"false\";\n          break;\n        case TRACKED_ATTRIBUTES[8]:\n          this.outline = attribute.value !== \"false\";\n          break;\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = () => {\n    if (!this.loading && !this.disabled) {\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n    }\n  };\n\n  render() {\n    const {\n      accessibleLabel,\n      checked,\n      disabled,\n      fullWidth,\n      iconPlacement,\n      monochrome,\n      label,\n      loading,\n      outline,\n      size,\n      theme,\n      tooltipPlacement,\n      variant,\n    } = this;\n\n    const iconVariant = variant === \"icon\";\n\n    return (\n      <Host\n        class={{\n          \"ic-toggle-button-checked\": checked,\n          \"ic-toggle-button-disabled\": disabled,\n          \"ic-toggle-button-icon\": iconVariant,\n          \"ic-toggle-button-loading\": loading,\n          \"ic-toggle-button-monochrome\": monochrome,\n          \"ic-toggle-button-full-width\": fullWidth,\n          \"ic-toggle-button-hide-outline\": !outline,\n          [`ic-toggle-button-${size}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={`${checked}`}\n          variant={iconVariant ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={accessibleLabel}\n          aria-label={`${accessibleLabel ? accessibleLabel : label}, ${\n            checked ? \"ticked\" : \"unticked\"\n          }`}\n          disabled={disabled}\n          size={size}\n          fullWidth={fullWidth}\n          loading={loading}\n          tooltipPlacement={tooltipPlacement}\n        >\n          {!iconVariant && label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${iconPlacement}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-tooltip2.js

@@ -1998,6 +1998,12 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         }
         this.updateTooltipEvents();
     }
+    watchLabelHandler() {
+        var _a;
+        if (((_a = this.toolTip) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-show")) && this.popperInstance) {
+            this.popperInstance.update();
+        }
+    }
     /**
      * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip
      * @param props object - createPopper props set externally
@@ -2044,15 +2050,16 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     }
     render() {
         const { label, maxLines, silent, theme } = this;
-        return (h(Host, { key: '696bf93eebae2c0b15e7762e3393f4c34f3cc4d1', class: {
+        return (h(Host, { key: 'b74dcdc9aef3ccb3442da3e59dbc4eedd67b7c34', class: {
                 "ic-tooltip": true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '8c5d0e10b0b315464654cac448968ceb38828402', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '1aa6160a3f9210484fdc525d94cc89830dfe9495', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'ff3d41306c750c1eefac6697886710eba0b1e1ff', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '0f57e33dc10713e5549184d5fd22f2965528a827' })));
+            } }, h("div", { key: '125643a0b41e40399b337e82b3745d59a630c723', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '5db777ac8f6a7c414c0f46004827ff54efd5c011', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'd1d160835da2227e0b15fca3ae66ccdaf77b60fb', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '5726e244c1e16e66e36dfd7e4fcc73c12d742b02' })));
     }
     get el() { return this; }
     static get watchers() { return {
         "disableClick": ["watchDisableClickHandler"],
-        "disableHover": ["watchDisableHoverHandler"]
+        "disableHover": ["watchDisableHoverHandler"],
+        "label": ["watchLabelHandler"]
     }; }
     static get style() { return IcTooltipStyle0; }
 }, [1, "ic-tooltip", {
@@ -2070,7 +2077,8 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         "isTooltipVisible": [64]
     }, undefined, {
         "disableClick": ["watchDisableClickHandler"],
-        "disableHover": ["watchDisableHoverHandler"]
+        "disableHover": ["watchDisableHoverHandler"],
+        "label": ["watchLabelHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {