@ukic/web-components 2.0.0-alpha.121 → 2.0.0-alpha.122

package/dist/core/p-79905074.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"names":["icButtonCss","buttonIds","Button","this","calculatedWidth","inheritedAttributes","hasTooltip","buttonIdNum","handleClick","el","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","[object Object]","iconRightState","iconRight","offsetWidth","offsetLeft","event","disabled","loading","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","buttonEl","focus","newValue","tooltipEl","label","setAttribute","width","toString","iconEl","querySelector","form","hiddenFormButton","document","createElement","style","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","buttonStyle","inheritAttributes","IC_INHERITED_ARIA","id","undefined","variant","withIcTooltip","calculateWidth","setIconRightState","TagType","href","_a","title","aria-label","ariaLabel","restInheritedAttributes","__rest","buttonAttrs","download","rel","target","referrerpolicy","hreflang","newTitle","titleAttr","tooltipText","describedBy","buttonId","ButtonContent","h","Object","assign","class","aria-disabled","ref","aria-describedby","hasIconSlot","name","getLoadingBarWidth","dark","Dark","Light","Host","size","fullWidth","onClick","element-id","placement","IcTooltipPlacement","icLoadingIndicatorCss","LoadingIndicator","getLabel","labelIndex","setLabel","Promise","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","setCircleLineWidth","setProperty","setDeterminateWidth","innerElement","progress","Math","min","max","proportion","showSecond","classList","add","calcOuterClass","cls","indeterminate","updateLabel","split","indicatorLabel","Number","description","role","aria-labelledby","aria-valuenow","aria-valuemin","aria-valuemax","icTooltipCss","Tooltip","mouseOverTool","showEvents","instantHideEvents","delayedHideEvents","show","popper","toolTip","setOptions","options","modifiers","enabled","update","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","popperInstance","manageEventListeners","action","method","forEach","screenReaderOnlyStyles","position","left","top","height","overflow","describedBySpan","previousElementSibling","innerText","createPopper","offset","element","arrow","onComponentRequiredPropUndefined","prop","propName","elementId","ariaDescribedBy","insertAdjacentElement","ic-tooltip","data-popper-arrow"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n\n  --button-default: var(--ic-action-default);\n  --button-default-hover: var(--ic-action-default-hover);\n  --button-default-active: var(--ic-action-default-active);\n  --button-default-background-hover: var(--ic-action-default-bg-hover);\n  --button-default-background-active: var(--ic-action-default-bg-active);\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 14px;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: 100px;\n  display: inline-flex;\n  gap: var(--ic-space-xs);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.button:hover {\n  cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n  outline: none;\n}\n\n:host(.dark) .button {\n  --button-default: var(--ic-action-dark);\n  --button-default-hover: var(--ic-action-dark);\n  --button-default-active: var(--ic-action-dark);\n  --button-default-background-hover: var(--ic-action-dark-bg-hover);\n  --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n  --button-default: var(--ic-action-light);\n  --button-default-hover: var(--ic-action-light);\n  --button-default-active: var(--ic-action-light);\n  --button-default-background-hover: var(--ic-action-light-bg-hover);\n  --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n  color: var(--ic-color-primary-text);\n\n  --button-default-hover: var(--ic-action-light-hover);\n  --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n  --button-default-hover: var(--ic-action-dark-hover);\n  --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n  border: 1px solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  border-color: var(--button-default-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n  color: var(--button-default);\n  min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n  height: 40px;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-dense) .button {\n  height: var(--ic-space-xl);\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-emphasis) .button {\n  height: var(--ic-space-xxl);\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n  padding: 6px;\n}\n\n:host(.button-size-dense.button-variant-icon) .button {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-emphasis.button-variant-icon) .button {\n  height: 40px;\n  width: 40px;\n  padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n  width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n::slotted(svg) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 20px;\n  --icon-width: 20px;\n}\n\n:host(.search-submit-button-dense) ::slotted(svg) {\n  --icon-height: 16px;\n  --icon-width: 16px;\n}\n\n:host(.clear-button) {\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n  box-shadow: none;\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.clear-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 14px;\n  --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n  justify-content: left;\n  border-radius: 0;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: true,\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * Determines whether the button should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Determines whether the button should be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * Determines whether the icon should appear on the right hand side of the button.\n   */\n  @Prop() iconRight?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The button variant to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * Fill the width of the container if true.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.\n   */\n  @Prop() withIcTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() IcTooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * Determines the style of button to be displayed.\n   */\n  @Prop({ mutable: true }) buttonStyle?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  // @State forces re-render of component on change.\n  @State() iconRightState: boolean = false;\n\n  // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n  private calculatedWidth: number = 68;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Watch(\"iconRight\")\n  setIconRightState(): void {\n    this.iconRightState = this.iconRight;\n  }\n\n  @Watch(\"loading\")\n  calculateWidth(): void {\n    // Assume even padding on left and right\n    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the native `button`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private getLoadingBarWidth(): { [key: string]: string } {\n    return { width: `${this.calculatedWidth.toString()}px` };\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.buttonStyle = foregroundColor;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\" || this.withIcTooltip;\n  }\n\n  componentDidLoad(): void {\n    this.calculateWidth();\n    this.setIconRightState();\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.iconRightState && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n              <ic-loading-indicator\n                type=\"linear\"\n                dark={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.buttonStyle === IcThemeForegroundEnum.Dark ||\n                  this.buttonStyle === IcThemeForegroundEnum.Light\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n\n          {this.hasIconSlot() && this.iconRightState && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.buttonStyle === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.buttonStyle === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            element-id={buttonId}\n            placement={this.IcTooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalise.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator\n   */\n\n  display: block;\n\n  --linear-border-radius: 4px;\n  --inner-color: var(--ic-action-default);\n  --outer-color: var(--ic-architectural-100);\n  --label-color: var(--ic-color-primary-text);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([size=\"small\"]) {\n  --circular-diameter: 40px;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n  --circular-diameter: 80px;\n}\n\n:host([size=\"large\"]) {\n  --circular-diameter: 160px;\n}\n\n:host([size=\"icon\"]) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 20px;\n}\n\n:host([label]) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  white-space: nowrap;\n  color: var(--label-color);\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  box-shadow: inset 0 0 0 var(--circular-line-width) var(--outer-color);\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n  border-radius: 50%;\n  position: relative;\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n.ic-loading-circular-inner {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n  border-radius: 50%;\n  position: relative;\n}\n\n.indeterminate > .ic-loading-circular-inner {\n  box-shadow: inset 0 0 0 var(--circular-line-width) var(--inner-color);\n  clip-path: inset(0 50% 50% 0);\n}\n\n.determinate > .ic-loading-circular-inner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n\n.determinate > .ic-loading-circular-inner.clip {\n  clip: rect(\n    0,\n    var(--circular-diameter),\n    var(--circular-diameter),\n    calc(var(--circular-diameter) / 2)\n  );\n}\n\n.ic-loading-circular-inner .left,\n.ic-loading-circular-inner .right {\n  height: 100%;\n  width: 100%;\n  border: var(--circular-line-width) solid var(--inner-color);\n  border-radius: 50%;\n  box-sizing: border-box;\n  clip: rect(\n    0,\n    calc(var(--circular-diameter) / 2),\n    var(--circular-diameter),\n    0\n  );\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.indeterminate > .ic-loading-circular-inner .left,\n.indeterminate > .ic-loading-circular-inner .right {\n  display: none;\n}\n\n.determinate > .ic-loading-circular-inner .left {\n  transform: rotate(var(--circular-rotation));\n}\n\n.determinate > .ic-loading-circular-inner .right {\n  transform: rotate(180deg);\n}\n\n.determinate > .ic-loading-circular-inner.clip .right {\n  display: none;\n}\n\n.ic-loading-circular-outer::before {\n  content: \"\";\n  height: var(--circular-line-width);\n  width: var(--circular-line-width);\n  border-radius: 50%;\n  background-color: var(--inner-color);\n  position: absolute;\n  display: block;\n  top: calc(50% - var(--circular-line-width) / 2);\n}\n\n.ic-loading-circular-outer::after {\n  content: \"\";\n  height: var(--circular-line-width);\n  width: var(--circular-line-width);\n  border-radius: 50%;\n  background-color: var(--inner-color);\n  position: absolute;\n  display: block;\n  top: 0;\n  left: calc(50% - var(--circular-line-width) / 2);\n}\n\n.ic-loading-circular-outer.determinate::before,\n.ic-loading-circular-outer.determinate::after {\n  display: none;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host([variant=\"full-width\"]) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n:host(.dark) {\n  --inner-color: var(--ic-architectural-white);\n  --outer-color: var(--ic-architectural-800);\n  --label-color: var(--ic-architectural-white);\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingSizes,\n  IcLoadingTypes,\n  IcLoadingVariants,\n} from \"./ic-loading-indicator.types\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  @Element() host: HTMLIcLoadingIndicatorElement;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by separating multiple messages with forward slashes.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * The variant of indicator, either default or full-width.\n   */\n  @Prop({ reflect: true }) variant?: IcLoadingVariants = \"default\";\n\n  /**\n   * Determines whether the dark variant of the loading indicator should be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  @State() indicatorLabel: string;\n  @State() indeterminate: boolean;\n  @State() showSecond: boolean = false;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const width = this.outerElement?.offsetWidth;\n    if (width) {\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${width * 0.1}px`\n      );\n    }\n  };\n\n  private setDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.showSecond = proportion > 0.5;\n    if (this.showSecond) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--circular-rotation\",\n      `${proportion * 360}deg`\n    );\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (this.label !== undefined) {\n      this.labelList = this.label.split(\"/\");\n      const labelIndex = 0;\n      this.indicatorLabel = this.labelList[labelIndex];\n      if (this.labelList.length > 1) {\n        this.getLabel(labelIndex, (label) => {\n          this.indicatorLabel = label;\n        });\n      }\n    }\n  };\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    this.setCircleLineWidth();\n    if (Number(this.progress) >= 0) {\n      this.setDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0) {\n      this.setDeterminateWidth();\n    }\n  }\n\n  render() {\n    const { dark, label, description, size } = this;\n    return (\n      <Host class={{ [\"dark\"]: dark }}>\n        <div class=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.indeterminate || <div class=\"left\" />}\n              {this.indeterminate || <div class=\"right\" />}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalise.css\";\n\n:host(.ic-tooltip) .ic-tooltip-container {\n  background-color: var(--ic-architectural-800);\n  color: #ffff;\n  text-align: center;\n  padding: var(--ic-space-xxxs) 10px;\n  border-radius: var(--ic-border-radius);\n  position: absolute;\n  max-width: 320px;\n  display: none;\n  z-index: calc(var(--ic-overlay-z-index) / 2);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n  .ic-tooltip-container {\n  display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n  .ic-tooltip-container[data-show] {\n  display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  position: absolute;\n  background: inherit;\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n  visibility: hidden;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  visibility: visible;\n  content: \"\";\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n  display: block;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow {\n  bottom: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n  left: 0;\n  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow {\n  top: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n  left: 0;\n  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow {\n  right: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow {\n  left: -14px;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n}\n","import { Component, Element, Host, Prop, h, Watch } 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  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * The id of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop() elementId?: string;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    describedBySpan.innerText = newValue;\n  }\n\n  private toolTip: HTMLDivElement;\n  private arrow: HTMLDivElement;\n  private mouseOverTool: boolean = false;\n  private showEvents = [\"mouseenter\", \"focusin\"];\n  private instantHideEvents = [\"focusout\"];\n  private delayedHideEvents = [\"mouseleave\"];\n  private popperInstance: Instance;\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\") {\n      this.hide(this.popperInstance);\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(this.popperInstance));\n      this.toolTip[method](event, () => this.mouseEnterTooltip());\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](event, () => this.hide(this.popperInstance));\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      this.toolTip[method](event, () =>\n        this.mouseLeaveTooltip(this.popperInstance)\n      );\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n\n  componentDidLoad(): void {\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    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.elementId !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.elementId}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n  }\n\n  render() {\n    const { label } = 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        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-fba2f052.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"names":["icHeroCss","Hero","this","rightContent","secondaryHeading","undefined","getThemeForegroundColor","[object Object]","ev","theme","detail","foregroundColor","mode","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","slotHasContent","el","onComponentRequiredPropUndefined","prop","heading","propName","aligned","dense","subheading","secondarySubheading","backgroundImage","style","background-image","background-position","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"mappings":"kHAAA,MAAMA,EAAY,s9LCkCLC,EAAI,iNA+B+B,mBAKf,2BAKmB,kBAKzB,wBAEQ,wBAED,0CAG7BC,KAAKC,cAAgBD,KAAKE,mBAAqBC,+BAEJC,IAG9CC,mBAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,KAI/BL,WACE,GAAIL,KAAKW,0BAA2B,CAClC,OAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BhB,KAAKkB,aAAe,SAAWD,EAAI,KAGrCZ,oBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,iBAG9Cf,mBACEgB,EACE,CAAC,CAAEC,KAAMtB,KAAKuB,QAASC,SAAU,YACjC,QAIJnB,sBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,iBAG9Cf,SACE,MAAMoB,QACJA,EAAOC,MACPA,EAAKH,QACLA,EAAOI,WACPA,EAAUzB,iBACVA,EAAgB0B,oBAChBA,EAAmBnB,gBACnBA,EAAeoB,gBACfA,EAAeX,aACfA,GACElB,KAEJ,IAAI8B,EAAQ,GAEZ,GAAID,IAAoB1B,UAAW,CACjC2B,EAAQ,CACNC,mBAAoB,OAASF,EAAkB,IAC/CG,sBAAuBd,GAI3B,OACEe,EAACC,EAAI,CACHC,MAAO,CACL9B,CAAC+B,EAAsBC,MACrB5B,IAAoB2B,EAAsBC,KAC5ChC,CAAC,wBAAyBwB,IAAoB1B,WAEhD2B,MAAOA,GAEPG,EAAA,uBAAA,CACER,QAASA,EACTa,WAAU,KACVH,MAAM,qBAENF,EAAA,MAAA,CACEE,MAAO,CACL9B,CAAC,kBAAmB,KACpBA,CAAC,6BAA8BL,KAAKuC,uBAGtCN,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,OAAA,CAAMO,KAAK,WACTP,EAAA,gBAAA,CAAeQ,QAASf,EAAQ,KAAO,MACpCH,KAIPU,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,OAAA,CAAMO,KAAK,cACTP,EAAA,gBAAA,CAAeQ,QAAQ,kBACpBd,KAIPM,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,OAAA,CAAMO,KAAK,mBAGbtC,IAAqBC,WAAaH,KAAKC,eACvCgC,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CAAMO,KAAK,iBACRtC,GACC+B,EAAA,MAAA,CAAKE,MAAM,uBACTF,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,gBAAA,CAAeQ,QAAQ,MACpBvC,IAGL+B,EAAA,MAAA,CAAKE,MAAM,wBACTF,EAAA,gBAAA,CAAeQ,QAAQ,kBACpBb","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -100px;\n  background-size: auto calc(100% + 100px);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -100px !important;\n  }\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  flex-basis: 50%;\n  padding: var(--ic-space-xl) 0;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n.left-container-full-width {\n  flex-basis: 100% !important;\n  max-width: 66.6%;\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 173px;\n  }\n\n  .left-container {\n    flex-basis: 66.6%;\n    min-height: 144px;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 50px;\n  }\n\n  .secondary-container {\n    min-height: 144px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 63px;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 94.75px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 34px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 280px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([dense]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 192px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 264px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([dense]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot right-content - Content will be rendered in the right content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Description for the hero\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Optional secondary heading, replaced by slotted right content\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * Optional secondary subheading, replaced by slotted right content\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * Optional background image\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Whether the background image (if set) scrolls using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * Alter styling for use with dense content/pages\n   */\n  @Prop() dense: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"right-content\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"right-content\");\n  }\n\n  render() {\n    const {\n      aligned,\n      dense,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography variant={dense ? \"h2\" : \"h1\"}>\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"subtitle-small\">\n                  {subheading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"right-content\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}