@ukic/web-components 2.1.0-beta.3 → 2.1.0-beta.5

package/dist/core/p-3efa7f8b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","src/components/ic-select/ic-select.tsx"],"names":["icSelectCss","inputIds","Select","this","inputId","menuId","inheritedAttributes","isMenuEnabled","searchableSelectInputValue","charactersUntilSuggestions","length","setOptionsValuesFromLabels","options","map","option","value","label","setTextColor","nativeSelectElement","selectedIndex","className","setMenuChange","open","getLabelFromValue","getValueFromLabel","_a","find","getFilteredChildMenuOptions","children","getFilteredMenuOptions","includeDescriptionsInSearch","searchMatchPosition","newOption","Object","assign","handleNativeSelectChange","icChange","emit","handleCustomSelectChange","event","searchable","detail","emptyOptionListText","searchableSelectElement","focus","ariaActiveDescendant","optionId","handleMenuChange","handleFocusIndicatorDisplay","focusIndicator","host","shadowRoot","querySelector","classList","add","remove","handleMouseDown","preventDefault","handleClick","noOptions","menu","handleClickOpen","handleExpandIconMouseDown","disabled","handleClear","stopPropagation","customSelectElement","handleKeyDown","cancelBubble","key","handleKeyboardOpen","handleClearButtonFocus","clearButtonFocused","handleClearButtonBlur","handleSearchableSelectInput","target","undefined","isGrouped","newFilteredOptions","menuOptionsFiltered","includeGroupTitlesInSearch","indexOf","push","noChildOptionsWhenFiltered","filteredOptions","debounceAriaLiveUpdate","updateSearchableSelectResultAriaLive","searchableSelectResultsStatusEl","innerText","onFocus","icFocus","onBlur","relatedTarget","clearButton","icBlur","handleFormReset","initialValue","[object Object]","clearTimeout","debounce","window","setTimeout","inheritAttributes","IC_INHERITED_ARIA","addFormResetListener","onComponentRequiredPropUndefined","prop","propName","removeFormResetListener","small","fullWidth","helperText","hideLabel","name","placeholder","readonly","required","showClearButton","validationStatus","validationText","renderHiddenInput","invalid","IcInformationStatus","Error","describedBy","getInputDescribedByText","hasValidationStatus","trim","h","Host","for","ref","el","anchorEl","class","menu-open","isMobileOrTablet","onChange","id","aria-label","aria-describedby","aria-invalid","selected","role","aria-activedescendant","aria-autocomplete","aria-expanded","aria-required","aria-controls","onInput","onClick","onKeyDown","innerHTML","Clear","size","variant","appearance","IcThemeForegroundEnum","Light","Dark","onMouseDown","expand-icon","expand-icon-open","expand-icon-filled","expand-icon-disabled","Expand","aria-hidden","aria-live","aria-haspopup","aria-owns","value-text","no-results","inputEl","inputLabel","onIcMenuStateChange","onIcOptionSelect","parentEl","ariaLiveMode","status","message"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n   * @prop --input-width: Width of the input field\n*/\n\n:host {\n  width: 100%;\n}\n\nic-input-component-container:hover {\n  --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n  --border-color: var(--ic-action-dark-active);\n\n  color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n  --border-color: var(--ic-architectural-400);\n\n  color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n  visibility: visible;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n  visibility: hidden;\n  transition: visibility 0s;\n}\n\nic-input-label {\n  margin-bottom: var(--ic-space-xs) !important;\n}\n\nselect {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  height: 100%;\n  padding-left: 6px;\n  appearance: none;\n  background-repeat: no-repeat;\n  background-position: right 6px center;\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n  color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n  color: var(--ic-architectural-200);\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n  border: 0;\n  outline: 0;\n}\n\nselect:not([disabled]) {\n  cursor: pointer;\n}\n\n.select-container {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.select-input {\n  width: 100%;\n  height: 100%;\n  padding: 0 6px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n}\n\n.select-input:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(:not([disabled])) ic-input-component-container:hover .select-input {\n  background-color: var(--ic-architectural-white);\n}\n\n:host([disabled]) .select-input {\n  pointer-events: none;\n}\n\n:host([searchable]) .select-input {\n  cursor: auto;\n}\n\n.searchable-select-container {\n  align-items: center;\n  display: flex;\n  width: 100%;\n}\n\n.expand-icon {\n  height: var(--ic-space-lg);\n  padding-left: var(--ic-space-xs);\n  color: var(--ic-action-dark);\n}\n\n:host([disabled]) .expand-icon,\n:host([disabled]) .expand-icon > svg > path {\n  color: var(--ic-architectural-200);\n}\n\n:host([searchable]) .expand-icon {\n  padding-left: var(--ic-space-xxs);\n  height: 36px;\n}\n\n:host([searchable]) .expand-icon > svg {\n  height: 36px;\n  padding: 0 6px;\n}\n\n:host([searchable]:not([disabled])) .expand-icon > svg {\n  cursor: pointer;\n}\n\n.expand-icon-open {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-open,\n:host([searchable]) .expand-icon-open {\n  transform: rotateX(180deg);\n}\n\n:host([disabled]) .value-text,\n.placeholder {\n  color: var(--ic-color-tertiary-text);\n}\n\n.select-input-end {\n  display: flex;\n  align-items: center;\n}\n\n.clear-button-container {\n  display: flex;\n  gap: var(--ic-space-xxs);\n  padding-left: 38px;\n}\n\n:host([small]) .clear-button-container {\n  padding-left: 30px;\n}\n\n.divider {\n  width: 1px;\n  background-color: var(--ic-architectural-400);\n  margin: var(--ic-space-xxs) 0;\n  border-radius: 1px;\n  height: var(--ic-space-lg);\n}\n\n:host([small]) .divider {\n  height: var(--ic-space-md);\n}\n\n.clear-button {\n  position: absolute;\n  right: 44px;\n  border-radius: var(--ic-border-radius);\n  transition: box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus {\n  background-color: var(--ic-focus-blue);\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n  border-radius: 4px;\n}\n\n.clear-button:focus * {\n  fill: white;\n}\n\n.searchable-select-results-status {\n  border: 0;\n  clip: rect(0, 0, 0, 0, 0);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  h,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  getInputDescribedByText,\n  getLabelFromValue,\n  hasValidationStatus,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  isMobileOrTablet,\n  getFilteredMenuOptions,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcThemeForegroundEnum,\n  IcMenuOption,\n  IcSearchMatchPositions,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcValueEventDetail } from \"../../interface\";\n\nlet inputIds = 0;\n\n@Component({\n  tag: \"ic-select\",\n  styleUrl: \"ic-select.css\",\n  shadow: true,\n})\nexport class Select {\n  private nativeSelectElement: HTMLSelectElement;\n  private customSelectElement: HTMLButtonElement;\n  private searchableSelectElement: HTMLInputElement;\n  private menu: HTMLIcMenuElement;\n  private anchorEl: HTMLElement;\n  private clearButton: HTMLIcButtonElement;\n\n  private inputId = `ic-select-input-${inputIds++}`;\n  private menuId = `${this.inputId}-menu`;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  private debounce: number;\n\n  /**\n   * The label for the select.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The possible selection options.\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  /**\n   * If `true`, the select will require a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder?: string = \"Select an option\";\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the small styling will be applied to the select.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If `true`, the select element will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The text to display as the validation message.\n   */\n  @Prop() validationText?: string = \"\";\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.\n   */\n  @Prop() showClearButton?: boolean = false;\n\n  /**\n   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.\n   */\n  @Prop() searchable?: boolean = false;\n\n  /**\n   * If `true`, descriptions of options will be included when filtering options in a searchable select.\n   */\n  @Prop() includeDescriptionsInSearch?: boolean = false;\n\n  /**\n   * If `true`, group titles of grouped options will be included when filtering options in a searchable select.\n   */\n  @Prop() includeGroupTitlesInSearch?: boolean = false;\n\n  /**\n   * Whether the search string of the searchable select should match the start of or anywhere in the options.\n   */\n  @Prop() searchMatchPosition?: IcSearchMatchPositions = \"anywhere\";\n\n  /**\n   * The number of characters until suggestions appear for a searchable select.\n   */\n  @Prop() charactersUntilSuggestions?: number = 0;\n\n  /**\n   * The text displayed when there are no options in the option list.\n   */\n  @Prop() emptyOptionListText = \"No results found\";\n\n  @State() open: boolean = false;\n\n  @State() clearButtonFocused: boolean = false;\n\n  @State() searchableSelectInputValue: string = null;\n\n  @State() filteredOptions: IcMenuOption[] = this.options;\n\n  @State() ariaActiveDescendant: string;\n\n  @State() noOptions: IcMenuOption[] = null;\n\n  @State() initialValue = this.value;\n\n  @Watch(\"options\")\n  watchOptionsHandler(): void {\n    this.setOptionsValuesFromLabels();\n    this.filteredOptions = this.options;\n  }\n\n  /**\n   * Emitted when a value is selected.\n   */\n  @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when select has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when select has blur.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @Element() host!: HTMLIcSelectElement;\n\n  /**\n   * Sets focus on the input box.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.nativeSelectElement) {\n      this.nativeSelectElement.focus();\n    } else if (this.customSelectElement) {\n      this.customSelectElement.focus();\n    } else if (this.searchableSelectElement) {\n      this.searchableSelectElement.focus();\n    }\n  }\n\n  private isMenuEnabled = () => {\n    return (\n      ((this.searchableSelectInputValue === null ||\n        this.searchableSelectInputValue === \"\") &&\n        this.charactersUntilSuggestions === 0) ||\n      (this.searchableSelectInputValue &&\n        this.searchableSelectInputValue.length >=\n          this.charactersUntilSuggestions)\n    );\n  };\n\n  private setOptionsValuesFromLabels = (): void => {\n    if (this.options.length > 0) {\n      this.options.map((option) => {\n        if (!option.value) {\n          option.value = option.label;\n        }\n      });\n    }\n  };\n\n  private setTextColor = (): void => {\n    if (this.nativeSelectElement.selectedIndex === 0) {\n      this.nativeSelectElement.className = \"placeholder\";\n    } else {\n      this.nativeSelectElement.className = \"select-option-selected\";\n    }\n  };\n\n  private setMenuChange = (open: boolean) => {\n    if (this.open !== open) {\n      this.open = open;\n    }\n  };\n\n  private getLabelFromValue = (value: string): string | undefined => {\n    return getLabelFromValue(value, this.options);\n  };\n\n  private getValueFromLabel = (label: string): string | undefined => {\n    const value = this.options.find((option) => option.label === label)?.value;\n    return value;\n  };\n\n  private getFilteredChildMenuOptions = (option: IcMenuOption) => {\n    let children = option.children;\n\n    children = getFilteredMenuOptions(\n      option.children,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    const newOption = { ...option };\n    newOption.children = children;\n    return newOption;\n  };\n\n  private handleNativeSelectChange = (): void => {\n    this.icChange.emit({ value: this.nativeSelectElement.value });\n    this.setTextColor();\n  };\n\n  private handleCustomSelectChange = (event: CustomEvent): void => {\n    if (this.searchable && event.detail.label === this.emptyOptionListText) {\n      this.searchableSelectElement.focus();\n      return;\n    }\n\n    if (this.searchable) {\n      this.searchableSelectInputValue = this.getLabelFromValue(\n        event.detail.value\n      );\n    }\n\n    this.ariaActiveDescendant = event.detail.optionId;\n    this.icChange.emit({ value: event.detail.value });\n  };\n\n  private handleMenuChange = (event: CustomEvent): void => {\n    this.open = event.detail.open;\n\n    this.searchable && this.handleFocusIndicatorDisplay();\n  };\n\n  private handleFocusIndicatorDisplay = () => {\n    const focusIndicator =\n      this.host.shadowRoot.querySelector(\".focus-indicator\");\n\n    if (this.open) {\n      focusIndicator.classList.add(\"focus-indicator-enabled\");\n    } else {\n      focusIndicator.classList.remove(\"focus-indicator-enabled\");\n    }\n  };\n\n  private handleMouseDown = (event: Event): void => {\n    if (!this.open) {\n      event.preventDefault();\n    }\n  };\n\n  private handleClick = (event: MouseEvent): void => {\n    this.noOptions = null;\n    this.menu.options = this.options;\n\n    if (event.detail !== 0 && this.isMenuEnabled()) {\n      this.menu.handleClickOpen();\n    }\n  };\n\n  private handleExpandIconMouseDown = (event: MouseEvent) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.searchableSelectElement.focus();\n      this.handleClick(event);\n    }\n  };\n\n  private handleClear = (event: Event): void => {\n    event.stopPropagation();\n    this.noOptions = null;\n    this.icChange.emit({ value: null });\n\n    if (this.searchable) {\n      this.searchableSelectElement.value = null;\n      this.searchableSelectInputValue = null;\n      this.menu.options = this.options;\n      this.searchableSelectElement.focus();\n\n      if (!this.isMenuEnabled()) {\n        this.setMenuChange(false);\n      }\n    } else {\n      this.customSelectElement.focus();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    event.cancelBubble = true;\n\n    if (!this.open) {\n      this.noOptions = null;\n      this.menu.options = this.options;\n    }\n\n    if (this.open && event.key === \"Enter\") {\n      this.setMenuChange(false);\n    } else {\n      if (\n        !(\n          (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") &&\n          this.noOptions !== null\n        ) &&\n        this.isMenuEnabled()\n      ) {\n        this.menu.handleKeyboardOpen(event);\n      }\n    }\n  };\n\n  private handleClearButtonFocus = (): void => {\n    this.clearButtonFocused = true;\n  };\n\n  private handleClearButtonBlur = (): void => {\n    this.clearButtonFocused = false;\n  };\n\n  private handleSearchableSelectInput = (event: Event): void => {\n    this.searchableSelectInputValue = (event.target as HTMLInputElement).value;\n\n    if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {\n      this.icChange.emit({ value: null });\n    }\n\n    if (this.isMenuEnabled()) {\n      this.setMenuChange(true);\n    } else {\n      this.setMenuChange(false);\n    }\n\n    const options = [...this.options];\n\n    let isGrouped = false;\n    let newFilteredOptions: IcMenuOption[] = [];\n\n    options.map((option) => {\n      if (option.children) isGrouped = true;\n    });\n\n    const menuOptionsFiltered = getFilteredMenuOptions(\n      options,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    if (!isGrouped) {\n      newFilteredOptions = menuOptionsFiltered;\n    } else {\n      options.map((option) => {\n        if (this.includeGroupTitlesInSearch) {\n          if (menuOptionsFiltered.indexOf(option) !== -1) {\n            newFilteredOptions.push(option);\n          } else {\n            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n          }\n        } else {\n          newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n        }\n      });\n    }\n\n    let noChildOptionsWhenFiltered = false;\n\n    if (isGrouped) {\n      noChildOptionsWhenFiltered = true;\n      newFilteredOptions.map((option) => {\n        if (option.children.length > 0) {\n          noChildOptionsWhenFiltered = false;\n        }\n      });\n    }\n\n    const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n    if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {\n      this.noOptions = null;\n      this.filteredOptions = newFilteredOptions;\n    } else {\n      this.noOptions = noOptions;\n      this.filteredOptions = this.noOptions;\n    }\n\n    this.debounceAriaLiveUpdate();\n  };\n\n  private updateSearchableSelectResultAriaLive = (): void => {\n    const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(\n      \".searchable-select-results-status\"\n    ) as HTMLDivElement;\n\n    if (this.noOptions !== null) {\n      searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;\n    } else {\n      searchableSelectResultsStatusEl.innerText = \"\";\n    }\n  };\n\n  private debounceAriaLiveUpdate() {\n    clearTimeout(this.debounce);\n\n    window.setTimeout(() => {\n      this.updateSearchableSelectResultAriaLive();\n    }, 800);\n  }\n\n  private onFocus = (): void => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = (event: FocusEvent): void => {\n    if (\n      this.searchable &&\n      event.relatedTarget !== this.menu &&\n      !(this.clearButton && event.relatedTarget === this.clearButton)\n    ) {\n      this.setMenuChange(false);\n      this.handleFocusIndicatorDisplay();\n    }\n\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n    if (this.searchable) {\n      this.searchableSelectInputValue = null;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.host, [\n      ...IC_INHERITED_ARIA,\n      \"tabindex\",\n      \"title\",\n    ]);\n\n    this.setOptionsValuesFromLabels();\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidRender(): void {\n    if (this.nativeSelectElement && !this.disabled) {\n      this.setTextColor();\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Select\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      small,\n      disabled,\n      fullWidth,\n      helperText,\n      hideLabel,\n      label,\n      menuId,\n      name,\n      options,\n      placeholder,\n      readonly,\n      required,\n      searchable,\n      showClearButton,\n      validationStatus,\n      validationText,\n      value,\n    } = this;\n\n    renderHiddenInput(true, this.host, name, value, disabled);\n\n    const invalid =\n      validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n    const describedBy = getInputDescribedByText(\n      this.inputId,\n      helperText !== \"\",\n      hasValidationStatus(this.validationStatus, this.disabled)\n    ).trim();\n\n    return (\n      <Host>\n        <ic-input-container readonly={readonly}>\n          {!hideLabel && (\n            <ic-input-label\n              for={this.inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n          <ic-input-component-container\n            ref={(el) => (this.anchorEl = el)}\n            class={{ \"menu-open\": this.open }}\n            small={small}\n            fullWidth={fullWidth}\n            disabled={disabled}\n            readonly={readonly}\n            validationStatus={validationStatus}\n          >\n            {readonly ? (\n              <ic-typography>\n                <p>{this.getLabelFromValue(value)}</p>\n              </ic-typography>\n            ) : isMobileOrTablet() ? (\n              <select\n                ref={(el) => (this.nativeSelectElement = el)}\n                disabled={disabled}\n                onChange={this.handleNativeSelectChange}\n                required={required}\n                id={this.inputId}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                {...this.inheritedAttributes}\n              >\n                <option value=\"\" selected disabled={!showClearButton}>\n                  {placeholder}\n                </option>\n                {options.map((option) => {\n                  if (option.children) {\n                    return (\n                      <optgroup label={option.label}>\n                        {option.children.map((option) => (\n                          <option\n                            value={option.value}\n                            disabled={option.disabled}\n                            selected={option.value === value}\n                          >\n                            {option.label}\n                          </option>\n                        ))}\n                      </optgroup>\n                    );\n                  } else {\n                    return (\n                      <option\n                        value={option.value}\n                        disabled={option.disabled}\n                        selected={option.value === value}\n                      >\n                        {option.label}\n                      </option>\n                    );\n                  }\n                })}\n              </select>\n            ) : searchable ? (\n              <div class=\"searchable-select-container\">\n                <input\n                  class=\"select-input\"\n                  role=\"combobox\"\n                  aria-label={label}\n                  aria-describedby={describedBy}\n                  aria-activedescendant={this.ariaActiveDescendant}\n                  aria-autocomplete=\"list\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-invalid={invalid}\n                  aria-required={required ? \"true\" : \"false\"}\n                  aria-controls={menuId}\n                  ref={(el) => (this.searchableSelectElement = el)}\n                  id={this.inputId}\n                  value={this.searchableSelectInputValue}\n                  placeholder={placeholder}\n                  disabled={disabled}\n                  onInput={this.handleSearchableSelectInput}\n                  onClick={this.handleClick}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.onFocus}\n                  onBlur={this.onBlur}\n                ></input>\n                {this.searchableSelectInputValue &&\n                  (showClearButton || searchable) && (\n                    <div class=\"clear-button-container\">\n                      <ic-button\n                        id=\"clear-button\"\n                        ref={(el) => (this.clearButton = el)}\n                        aria-label={\n                          this.searchableSelectInputValue && value === null\n                            ? \"Clear input\"\n                            : \"Clear selection\"\n                        }\n                        class=\"clear-button\"\n                        innerHTML={Clear}\n                        onClick={this.handleClear}\n                        onFocus={this.handleClearButtonFocus}\n                        onBlur={this.handleClearButtonBlur}\n                        size={small ? \"small\" : \"default\"}\n                        variant=\"icon\"\n                        appearance={\n                          this.clearButtonFocused\n                            ? IcThemeForegroundEnum.Light\n                            : IcThemeForegroundEnum.Dark\n                        }\n                      ></ic-button>\n                      <div class=\"divider\"></div>\n                    </div>\n                  )}\n                <span\n                  onMouseDown={this.handleExpandIconMouseDown}\n                  class={{\n                    \"expand-icon\": true,\n                    \"expand-icon-open\": this.open,\n                    \"expand-icon-filled\": !(value == null || value === \"\"),\n                    \"expand-icon-disabled\": !this.isMenuEnabled(),\n                  }}\n                  innerHTML={Expand}\n                  aria-hidden=\"true\"\n                />\n                <div\n                  aria-live=\"polite\"\n                  role=\"status\"\n                  class=\"searchable-select-results-status\"\n                ></div>\n              </div>\n            ) : (\n              <div class=\"select-container\">\n                <button\n                  class=\"select-input\"\n                  ref={(el) => (this.customSelectElement = el)}\n                  id={this.inputId}\n                  aria-label={`${label}, ${\n                    this.getLabelFromValue(value) || placeholder\n                  }${required ? \", required\" : \"\"}`}\n                  aria-describedby={describedBy}\n                  aria-invalid={invalid}\n                  aria-haspopup=\"listbox\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-owns={menuId}\n                  aria-controls={menuId}\n                  disabled={disabled}\n                  onBlur={this.onBlur}\n                  onFocus={this.onFocus}\n                  onClick={this.handleClick}\n                  onMouseDown={this.handleMouseDown}\n                  onKeyDown={this.handleKeyDown}\n                >\n                  <ic-typography\n                    variant=\"body\"\n                    class={{\n                      \"value-text\": true,\n                      placeholder: this.getLabelFromValue(value) === undefined,\n                    }}\n                  >\n                    <p>{this.getLabelFromValue(value) || placeholder}</p>\n                  </ic-typography>\n                  <div class=\"select-input-end\">\n                    {value && showClearButton && <div class=\"divider\"></div>}\n                    <span\n                      class={{\n                        \"expand-icon\": true,\n                        \"expand-icon-open\": this.open,\n                        \"expand-icon-filled\": !(value == null || value === \"\"),\n                      }}\n                      innerHTML={Expand}\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                </button>\n                {value && showClearButton && (\n                  <ic-button\n                    id=\"clear-button\"\n                    aria-label=\"Clear selection\"\n                    class=\"clear-button\"\n                    innerHTML={Clear}\n                    onClick={this.handleClear}\n                    onFocus={this.handleClearButtonFocus}\n                    onBlur={this.handleClearButtonBlur}\n                    size={small ? \"small\" : \"default\"}\n                    variant=\"icon\"\n                    appearance={\n                      this.clearButtonFocused\n                        ? IcThemeForegroundEnum.Light\n                        : IcThemeForegroundEnum.Dark\n                    }\n                  ></ic-button>\n                )}\n              </div>\n            )}\n          </ic-input-component-container>\n          {!isMobileOrTablet() && (\n            <ic-menu\n              class={{\n                \"no-results\": this.noOptions !== null,\n              }}\n              ref={(el) => (this.menu = el)}\n              inputEl={\n                searchable\n                  ? this.searchableSelectElement\n                  : this.customSelectElement\n              }\n              inputLabel={label}\n              anchorEl={this.anchorEl}\n              small={small}\n              menuId={menuId}\n              open={this.open}\n              options={searchable ? this.filteredOptions : options}\n              value={value}\n              fullWidth={fullWidth}\n              onIcMenuStateChange={this.handleMenuChange}\n              onIcOptionSelect={this.handleCustomSelectChange}\n              parentEl={this.host}\n            ></ic-menu>\n          )}\n          {hasValidationStatus(this.validationStatus, this.disabled) && (\n            <ic-input-validation\n              class={{ \"menu-open\": this.open }}\n              ariaLiveMode=\"polite\"\n              status={validationStatus}\n              message={validationText}\n              for={this.inputId}\n            ></ic-input-validation>\n          )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/{p-dd3c3e3c.entry.js → p-3f4d632c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as a,H as s,g as e}from"./p-f9370be6.js";import{t as o,G as n,i as r}from"./p-23831891.js";import"./p-6f57b13c.js";const l=":host{display:block}.popout-modal{position:absolute;top:0;right:0;bottom:0;left:0}.popout-menu{position:fixed;top:0;right:0;width:256px;bottom:0;background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden;z-index:calc(var(--ic-z-index-overlay) / 2)}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:190px;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:1px solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:1px solid var(--ic-architectural-200)}.menu-status-version-container{display:inline-flex;margin:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.menu-status{background-color:var(--ic-architectural-500);color:var(--ic-color-white-text);border-radius:80px;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm);margin-right:var(--ic-space-xs)}.menu-version{border-radius:16px;background-color:var(--ic-architectural-100);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}";const c=class{constructor(a){t(this,a);this.icNavigationMenuClose=i(this,"icNavigationMenuClose",7);this.hasButtons=false;this.hasNavigation=false;this.navItemAboveButtons=false;this.navGroupFirst=false;this.lastTabStop=null;this.closeButton=null;this.closeMenu=()=>{this.icNavigationMenuClose.emit()};this.focusCloseButton=()=>{if(this.closeButton.setFocus){this.closeButton.setFocus()}};this.focusLastTabStop=()=>{let t;if(this.lastTabStop!==null){switch(this.lastTabStop.tagName){case"IC-NAVIGATION-BUTTON":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-ITEM":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-GROUP":t=this.lastTabStop;t.setFocus();break;case"A":this.lastTabStop.focus();break}}};this.version="";this.status=""}navItemClickHandler(){this.closeMenu()}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(document.activeElement===this.navBarEl){t.preventDefault();this.focusLastTabStop()}}else if(document.activeElement===this.lastTabStop||this.lastTabStop===null){t.preventDefault();this.focusCloseButton()}}else if(t.key==="Escape"){this.closeMenu()}}componentWillLoad(){this.navBarEl=document.querySelector("ic-top-navigation");const t=o(this.el,"navigation");if(t){this.hasNavigation=true;const i=t[t.length-1];if(i.tagName==="IC-NAVIGATION-ITEM"){this.navItemAboveButtons=true}const a=t[0];if(a.tagName==="IC-NAVIGATION-GROUP"){this.navGroupFirst=true}}const i=o(this.el,"buttons");if(i!==null){this.hasButtons=true;this.lastTabStop=i[i.length-1]}else{if(this.hasNavigation){const i=t[t.length-1];const a=n(i,"navigation-item");if(a!==null){this.lastTabStop=a}else{this.lastTabStop=i}}}}componentDidLoad(){this.focusCloseButton()}componentWillRender(){this.hasNavigation=r(this.el,"navigation");this.hasButtons=r(this.el,"buttons")}render(){return a(s,null,a("div",{class:"popout-modal",onClick:this.closeMenu}),a("div",{class:"popout-menu",role:"dialog","aria-modal":"true","aria-label":`${this.hasNavigation?"Navigation":"App"} menu`},a("span",{"aria-hidden":"true",id:"navigation-landmark-text",class:"navigation-landmark-text"},"Main navigation"),a("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":this.hasNavigation?"false":"true"},a("div",{class:{["menu-close-button-container"]:true,["nav-group-first"]:this.navGroupFirst}},a("ic-button",{ref:t=>this.closeButton=t,id:"menu-close-button",class:"menu-close-button",variant:"icon",size:"large","aria-label":`Close ${this.hasNavigation?"navigation":"app"} menu`,onClick:this.closeMenu},a("svg",{slot:"icon",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#1759BC"})))),this.hasNavigation&&a("slot",{name:"navigation"})),this.hasButtons&&a("div",{class:{["menu-buttons-container"]:true,["menu-buttons-container-nav-item-above"]:this.navItemAboveButtons}},a("slot",{name:"buttons"})),(this.status!==""||this.version!=="")&&a("div",{class:"menu-status-version-container"},this.status!==""&&a("div",{class:"menu-status"},a("ic-typography",{variant:"label-uppercase","aria-label":"app tag",class:"menu-status-text"},this.status)),this.version!==""&&a("div",{class:"menu-version"},a("ic-typography",{variant:"label",class:"menu-version-text","aria-label":"app version"},this.version)))))}get el(){return e(this)}};c.style=l;export{c as ic_navigation_menu};
-//# sourceMappingURL=p-dd3c3e3c.entry.js.map
+import{r as t,c as i,h as a,H as s,g as e}from"./p-f9370be6.js";import{t as o,F as n,i as r}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const l=":host{display:block}.popout-modal{position:absolute;top:0;right:0;bottom:0;left:0}.popout-menu{position:fixed;top:0;right:0;width:256px;bottom:0;background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden;z-index:calc(var(--ic-z-index-overlay) / 2)}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:190px;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:1px solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:1px solid var(--ic-architectural-200)}.menu-status-version-container{display:inline-flex;margin:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.menu-status{background-color:var(--ic-architectural-500);color:var(--ic-color-white-text);border-radius:80px;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm);margin-right:var(--ic-space-xs)}.menu-version{border-radius:16px;background-color:var(--ic-architectural-100);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}";const c=class{constructor(a){t(this,a);this.icNavigationMenuClose=i(this,"icNavigationMenuClose",7);this.hasButtons=false;this.hasNavigation=false;this.navItemAboveButtons=false;this.navGroupFirst=false;this.lastTabStop=null;this.closeButton=null;this.closeMenu=()=>{this.icNavigationMenuClose.emit()};this.focusCloseButton=()=>{if(this.closeButton.setFocus){this.closeButton.setFocus()}};this.focusLastTabStop=()=>{let t;if(this.lastTabStop!==null){switch(this.lastTabStop.tagName){case"IC-NAVIGATION-BUTTON":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-ITEM":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-GROUP":t=this.lastTabStop;t.setFocus();break;case"A":this.lastTabStop.focus();break}}};this.version="";this.status=""}navItemClickHandler(){this.closeMenu()}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(document.activeElement===this.navBarEl){t.preventDefault();this.focusLastTabStop()}}else if(document.activeElement===this.lastTabStop||this.lastTabStop===null){t.preventDefault();this.focusCloseButton()}}else if(t.key==="Escape"){this.closeMenu()}}componentWillLoad(){this.navBarEl=document.querySelector("ic-top-navigation");const t=o(this.el,"navigation");if(t){this.hasNavigation=true;const i=t[t.length-1];if(i.tagName==="IC-NAVIGATION-ITEM"){this.navItemAboveButtons=true}const a=t[0];if(a.tagName==="IC-NAVIGATION-GROUP"){this.navGroupFirst=true}}const i=o(this.el,"buttons");if(i!==null){this.hasButtons=true;this.lastTabStop=i[i.length-1]}else{if(this.hasNavigation){const i=t[t.length-1];const a=n(i,"navigation-item");if(a!==null){this.lastTabStop=a}else{this.lastTabStop=i}}}}componentDidLoad(){this.focusCloseButton()}componentWillRender(){this.hasNavigation=r(this.el,"navigation");this.hasButtons=r(this.el,"buttons")}render(){return a(s,null,a("div",{class:"popout-modal",onClick:this.closeMenu}),a("div",{class:"popout-menu",role:"dialog","aria-modal":"true","aria-label":`${this.hasNavigation?"Navigation":"App"} menu`},a("span",{"aria-hidden":"true",id:"navigation-landmark-text",class:"navigation-landmark-text"},"Main navigation"),a("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":this.hasNavigation?"false":"true"},a("div",{class:{["menu-close-button-container"]:true,["nav-group-first"]:this.navGroupFirst}},a("ic-button",{ref:t=>this.closeButton=t,id:"menu-close-button",class:"menu-close-button",variant:"icon",size:"large","aria-label":`Close ${this.hasNavigation?"navigation":"app"} menu`,onClick:this.closeMenu},a("svg",{slot:"icon",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#1759BC"})))),this.hasNavigation&&a("slot",{name:"navigation"})),this.hasButtons&&a("div",{class:{["menu-buttons-container"]:true,["menu-buttons-container-nav-item-above"]:this.navItemAboveButtons}},a("slot",{name:"buttons"})),(this.status!==""||this.version!=="")&&a("div",{class:"menu-status-version-container"},this.status!==""&&a("div",{class:"menu-status"},a("ic-typography",{variant:"label-uppercase","aria-label":"app tag",class:"menu-status-text"},this.status)),this.version!==""&&a("div",{class:"menu-version"},a("ic-typography",{variant:"label",class:"menu-version-text","aria-label":"app version"},this.version)))))}get el(){return e(this)}};c.style=l;export{c as ic_navigation_menu};
+//# sourceMappingURL=p-3f4d632c.entry.js.map

package/dist/core/p-3f9cdcdd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as i,g as n}from"./p-f9370be6.js";import{k as o,m as a,a as s,n as r}from"./p-a8ac8f72.js";import{I as l}from"./p-6f57b13c.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;margin-right:var(--ic-space-xs);list-style:none}:host(.in-side-menu){margin-right:0}';const p=class{constructor(t){e(this,t);this.inheritedAttributes={};this.label=undefined;this.href=undefined;this.target=undefined;this.rel=undefined;this.download=false;this.hreflang=undefined;this.referrerpolicy=undefined;this.mode="navbar";this.initialAppearance=o()}navBarMenuOpenHandler(){this.mode="menu"}navBarMenuCloseHandler(){this.mode="navbar"}themeChangeHandler(e){const t=e.detail;this.initialAppearance=t.mode}async setFocus(){if(this.buttonEl){this.buttonEl.setFocus()}}componentWillLoad(){this.inheritedAttributes=a(this.el,[...r,"title"])}componentDidLoad(){s([{prop:this.label,propName:"label"}],"Navigation Button")}render(){const{href:e,target:n,rel:o,download:a,referrerpolicy:s}=this;let r="";let d="";let p="icon";let b=this.initialAppearance;let u="large";let m=false;if(this.mode==="menu"){r=this.label;p="tertiary";b=l.Default;u="default";m=true;d="popout-menu-button"}const c={variant:p,appearance:b,size:u,href:e,target:n,rel:o,download:a,referrerpolicy:s,fullWidth:m};return t(i,{class:{["in-side-menu"]:this.mode==="menu"}},t("ic-button",Object.assign({class:d,"aria-label":this.label,ref:e=>this.buttonEl=e},c,this.inheritedAttributes),r,t("slot",{slot:"icon",name:"icon"})))}get el(){return n(this)}};p.style=d;export{p as ic_navigation_button};
+//# sourceMappingURL=p-3f9cdcdd.entry.js.map

package/dist/core/{p-c4d3c18c.entry.js.map → p-3f9cdcdd.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":["icNavigationButtonCss","NavigationButton","this","inheritedAttributes","getThemeForegroundColor","[object Object]","mode","ev","theme","detail","initialAppearance","buttonEl","setFocus","inheritAttributes","el","IC_INHERITED_ARIA","onComponentRequiredPropUndefined","prop","label","propName","href","target","rel","download","referrerpolicy","className","variant","appearance","size","fullWidth","IcThemeForegroundEnum","Default","buttonProps","h","Host","class","Object","assign","aria-label","ref","slot","name"],"mappings":"iJAAA,MAAMA,EAAwB,k9ECiCjBC,EAAgB,+BAwCnBC,KAAAC,oBAAgD,mGAlBlB,sEAaJ,gCAELC,IAM7BC,wBACEH,KAAKI,KAAO,OAIdD,yBACEH,KAAKI,KAAO,SAIdD,mBAAmBE,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BP,KAAKQ,kBAAoBF,EAAMF,KAOjCD,iBACE,GAAIH,KAAKS,SAAU,CACjBT,KAAKS,SAASC,YAIlBP,oBACEH,KAAKC,oBAAsBU,EAAkBX,KAAKY,GAAI,IACjDC,EACH,UAIJV,mBACEW,EACE,CAAC,CAAEC,KAAMf,KAAKgB,MAAOC,SAAU,UAC/B,qBAIJd,SACE,MAAMe,KAAEA,EAAIC,OAAEA,EAAMC,IAAEA,EAAGC,SAAEA,EAAQC,eAAEA,GAAmBtB,KAExD,IAAIgB,EAAQ,GACZ,IAAIO,EAAY,GAChB,IAAIC,EAA+B,OACnC,IAAIC,EACFzB,KAAKQ,kBACP,IAAIkB,EAA4B,QAChC,IAAIC,EAAY,MAEhB,GAAI3B,KAAKI,OAAS,OAAQ,CACxBY,EAAQhB,KAAKgB,MACbQ,EAAU,WACVC,EAAaG,EAAsBC,QACnCH,EAAO,UACPC,EAAY,KACZJ,EAAY,qBAGd,MAAMO,EAAc,CAClBN,QAAAA,EACAC,WAAAA,EACAC,KAAAA,EACAR,KAAAA,EACAC,OAAAA,EACAC,IAAAA,EACAC,SAAAA,EACAC,eAAAA,EACAK,UAAAA,GAGF,OACEI,EAACC,EAAI,CAACC,MAAO,CAAE9B,CAAC,gBAAiBH,KAAKI,OAAS,SAC7C2B,EAAA,YAAAG,OAAAC,OAAA,CACEF,MAAOV,EAASa,aACJpC,KAAKgB,MACjBqB,IAAMzB,GAAQZ,KAAKS,SAAWG,GAC1BkB,EACA9B,KAAKC,qBAERe,EACDe,EAAA,OAAA,CAAMO,KAAK,OAAOC,KAAK","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: true,\n})\nexport class NavigationButton {\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\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   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * 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  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  @State() initialAppearance = getThemeForegroundColor();\n\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = 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.setFocus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n  }\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={this.label}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"icon\" name=\"icon\"></slot>\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":["icNavigationButtonCss","NavigationButton","this","inheritedAttributes","getThemeForegroundColor","[object Object]","mode","ev","theme","detail","initialAppearance","buttonEl","setFocus","inheritAttributes","el","IC_INHERITED_ARIA","onComponentRequiredPropUndefined","prop","label","propName","href","target","rel","download","referrerpolicy","className","variant","appearance","size","fullWidth","IcThemeForegroundEnum","Default","buttonProps","h","Host","class","Object","assign","aria-label","ref","slot","name"],"mappings":"sJAAA,MAAMA,EAAwB,k9ECiCjBC,EAAgB,+BAwCnBC,KAAAC,oBAAgD,mGAlBlB,sEAaJ,gCAELC,IAM7BC,wBACEH,KAAKI,KAAO,OAIdD,yBACEH,KAAKI,KAAO,SAIdD,mBAAmBE,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BP,KAAKQ,kBAAoBF,EAAMF,KAOjCD,iBACE,GAAIH,KAAKS,SAAU,CACjBT,KAAKS,SAASC,YAIlBP,oBACEH,KAAKC,oBAAsBU,EAAkBX,KAAKY,GAAI,IACjDC,EACH,UAIJV,mBACEW,EACE,CAAC,CAAEC,KAAMf,KAAKgB,MAAOC,SAAU,UAC/B,qBAIJd,SACE,MAAMe,KAAEA,EAAIC,OAAEA,EAAMC,IAAEA,EAAGC,SAAEA,EAAQC,eAAEA,GAAmBtB,KAExD,IAAIgB,EAAQ,GACZ,IAAIO,EAAY,GAChB,IAAIC,EAA+B,OACnC,IAAIC,EACFzB,KAAKQ,kBACP,IAAIkB,EAA4B,QAChC,IAAIC,EAAY,MAEhB,GAAI3B,KAAKI,OAAS,OAAQ,CACxBY,EAAQhB,KAAKgB,MACbQ,EAAU,WACVC,EAAaG,EAAsBC,QACnCH,EAAO,UACPC,EAAY,KACZJ,EAAY,qBAGd,MAAMO,EAAc,CAClBN,QAAAA,EACAC,WAAAA,EACAC,KAAAA,EACAR,KAAAA,EACAC,OAAAA,EACAC,IAAAA,EACAC,SAAAA,EACAC,eAAAA,EACAK,UAAAA,GAGF,OACEI,EAACC,EAAI,CAACC,MAAO,CAAE9B,CAAC,gBAAiBH,KAAKI,OAAS,SAC7C2B,EAAA,YAAAG,OAAAC,OAAA,CACEF,MAAOV,EAASa,aACJpC,KAAKgB,MACjBqB,IAAMzB,GAAQZ,KAAKS,SAAWG,GAC1BkB,EACA9B,KAAKC,qBAERe,EACDe,EAAA,OAAA,CAAMO,KAAK,OAAOC,KAAK","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: true,\n})\nexport class NavigationButton {\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\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   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * 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  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  @State() initialAppearance = getThemeForegroundColor();\n\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = 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.setFocus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n  }\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={this.label}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"icon\" name=\"icon\"></slot>\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/{p-c8ce6147.entry.js → p-4f1a7195.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as o,h as r,H as i}from"./p-f9370be6.js";import{B as s,C as e,W as h,E as c,F as a,k as n}from"./p-23831891.js";import"./p-6f57b13c.js";const l=class{constructor(r){t(this,r);this.themeChange=o(this,"themeChange",7);this.checkThemeColorContrast=()=>{if(s()<e&&s()>h){console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`)}};this.setThemeColor=()=>{if(this.color!==null){let t=null;const o=this.color.slice(0,1);if(o==="#"){t=c(this.color)}else if(o.toLowerCase()==="r"){t=a(this.color)}this.setThemeRGBA(t)}};this.setThemeRGBA=t=>{if(t!==null){const o=document.documentElement;o.style.setProperty("--ic-theme-primary-r",t.r.toString());o.style.setProperty("--ic-theme-primary-g",t.g.toString());o.style.setProperty("--ic-theme-primary-b",t.b.toString());o.style.setProperty("--ic-theme-primary-a",t.a.toString());this.checkThemeColorContrast();const r=n();this.themeChange.emit({mode:r,color:t})}};this.color=null}watchColorPropHandler(){this.setThemeColor()}componentWillLoad(){this.setThemeColor()}render(){return r(i,null)}static get watchers(){return{color:["watchColorPropHandler"]}}};export{l as ic_theme};
-//# sourceMappingURL=p-c8ce6147.entry.js.map
+import{r as t,c as o,h as r,H as i}from"./p-f9370be6.js";import{A as s,B as e,W as c,C as h,E as a,k as n}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const l=class{constructor(r){t(this,r);this.themeChange=o(this,"themeChange",7);this.checkThemeColorContrast=()=>{if(s()<e&&s()>c){console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`)}};this.setThemeColor=()=>{if(this.color!==null){let t=null;const o=this.color.slice(0,1);if(o==="#"){t=h(this.color)}else if(o.toLowerCase()==="r"){t=a(this.color)}this.setThemeRGBA(t)}};this.setThemeRGBA=t=>{if(t!==null){const o=document.documentElement;o.style.setProperty("--ic-theme-primary-r",t.r.toString());o.style.setProperty("--ic-theme-primary-g",t.g.toString());o.style.setProperty("--ic-theme-primary-b",t.b.toString());o.style.setProperty("--ic-theme-primary-a",t.a.toString());this.checkThemeColorContrast();const r=n();this.themeChange.emit({mode:r,color:t})}};this.color=null}watchColorPropHandler(){this.setThemeColor()}componentWillLoad(){this.setThemeColor()}render(){return r(i,null)}static get watchers(){return{color:["watchColorPropHandler"]}}};export{l as ic_theme};
+//# sourceMappingURL=p-4f1a7195.entry.js.map

package/dist/core/p-5616cfb8.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as a,g as n}from"./p-f9370be6.js";import{I as s}from"./p-6f57b13c.js";import{F as o,D as r,g as l,k as c,o as h,i as p,c as d,a as m}from"./p-a8ac8f72.js";const u='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name="search"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);margin-left:calc(-1 * var(--ic-space-xxs));transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding-left:var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:8px;padding-bottom:8px}.navigation-tabs{margin-top:-1px}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:80px;background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md)}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:16px;background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs)}.app-status-text,.app-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}slot[name="app-icon"]::slotted(svg){fill:var(--ic-theme-text);width:2em;height:2em}slot[name="toggle-icon"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center;flex:1 auto}.menu-button-container{margin-left:var(--ic-space-md)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:44px}:host([content-aligned="left"]) .app-details-container{flex-basis:1}:host([content-aligned="left"]) .app-details-container,:host([content-aligned="left"]) .nav-panel-container,:host([content-aligned="center"]) .nav-panel-container,:host([content-aligned="left"]) .search-menu-container,:host([content-aligned="center"]) .search-menu-container{justify-content:flex-start}:host([content-aligned="center"]) .app-details-container{justify-content:flex-end}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}:host([content-aligned="center"]) .top-navigation{display:flex;justify-content:center}:host([content-aligned="left"]) .top-navigation{display:flex}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding-left:var(--ic-space-md)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:160px}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:64px;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}:host([content-aligned="left"]) .app-details-container,:host([content-aligned="left"]) .search-menu-container,:host([content-aligned="center"]) .search-menu-container,:host([content-aligned="center"]) .app-details-container{justify-content:flex-start}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:40px}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:56px;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name="app-icon"]::slotted(svg){width:1.5em;height:1.5em}slot[name="toggle-icon"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const g=class{constructor(i){t(this,i);this.icNavigationMenuOpened=e(this,"icNavigationMenuOpened",7);this.icNavigationMenuClosed=e(this,"icNavigationMenuClosed",7);this.hasAppIcon=false;this.hasNavigation=false;this.hasIconButtons=false;this.hasSearchSlotContent=false;this.searchBar=null;this.initialiseSearchBar=()=>{if(this.hasSearchSlotContent){const t=o(this.el,"search");if(t&&t.tagName==="IC-SEARCH-BAR"){this.searchBar=t}else if(t&&t.tagName==="FORM"){this.searchBar=t.querySelector("ic-search-bar")}if(this.searchBar!==null){this.searchBar.hideLabel=true}}};this.emitTopNavResized=t=>{const e=new CustomEvent("topNavResized",{detail:{size:t}});this.el.dispatchEvent(e)};this.menuButtonClick=()=>{this.showNavMenu(true)};this.searchButtonMouseDownHandler=()=>{this.searchButtonClick=true};this.searchButtonClickHandler=()=>{this.toggleSearchBar();this.searchButtonClick=false};this.resizeObserver=null;this.resizeObserverCallback=t=>{if(t!==this.deviceSize){this.deviceSize=t;if(t>r.L){this.showNavMenu(false);if(this.mobileSearchBarVisible){this.toggleSearchBar()}}this.emitTopNavResized(t);if(document.activeElement!==null&&document.activeElement!==undefined&&document.activeElement.tagName==="IC-SEARCH-BAR"){this.searchBar.setAttribute("hidden","true");this.searchBar.removeAttribute("hidden");setTimeout((()=>{this.searchBar.setFocus()}),100)}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const t=l();this.resizeObserverCallback(t)}));this.resizeObserver.observe(this.el)};this.appTitle=undefined;this.href="/";this.version="";this.status="";this.contentAligned="full-width";this.inline=false;this.menuOpen=false;this.deviceSize=r.XL;this.mobileSearchBarVisible=false;this.navMenuVisible=false;this.searchValue="";this.mobileSearchHiddenOnBlur=false;this.searchButtonClick=false;this.foregroundColor=c();this.hasFullWidthSearchBar=false}watchPropHandler(t,e){h(e,t,this.initialiseSearchBar)}navBarMenuCloseHandler(){this.showNavMenu(false);const t=this.el.shadowRoot.querySelector("#menu-button");t.setFocus()}searchInputBlurHandler(t){if(t.detail!==null){if(this.mobileSearchBarVisible&&!this.searchButtonClick){this.toggleSearchBar()}this.searchValue=t.detail.value}}searchValueChangeHandler(t){this.searchValue=t.detail.value}themeChangeHandler(t){const e=t.detail;this.foregroundColor=e.mode}toggleSearchBar(){this.mobileSearchBarVisible=!this.mobileSearchBarVisible;if(this.searchBar!==null){if(this.mobileSearchBarVisible){this.mobileSearchButtonEl.updateAriaLabel("Hide search");this.hasFullWidthSearchBar=true;this.searchBar.fullWidth=true;setTimeout((()=>{this.searchBar.setFocus()}),100)}else{this.mobileSearchButtonEl.updateAriaLabel("Show search");this.hasFullWidthSearchBar=false;this.searchBar.fullWidth=false}}}showNavMenu(t){this.navMenuVisible=t;if(t){this.icNavigationMenuOpened.emit()}else{this.icNavigationMenuClosed.emit()}}componentWillLoad(){this.hasAppIcon=p(this.el,"app-icon");this.hasNavigation=p(this.el,"navigation");this.hasIconButtons=p(this.el,"buttons");this.hasSearchSlotContent=p(this.el,"search");this.deviceSize=l();this.initialiseSearchBar()}componentWillRender(){this.hasNavigation=p(this.el,"navigation");this.hasSearchSlotContent=p(this.el,"search");this.hasIconButtons=p(this.el,"buttons");this.hasAppIcon=p(this.el,"app-icon")}componentDidLoad(){d(this.runResizeObserver);m([{prop:this.appTitle,propName:"app-title"}],"Top Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const t=this.hasNavigation||this.hasIconButtons||this.status!==""||this.version!=="";const e=this.deviceSize<=r.S?"default":"large";let n="h3";const o=this.appTitle!==""&&this.appTitle!==undefined;if(this.deviceSize<=r.L){n="h4";if(this.deviceSize<=r.S){n="subtitle-small"}}const l=this.mobileSearchBarVisible?"Hide search":"Show search";const c=this.deviceSize<=r.S?"small":"default";return i(a,{class:{["fullwidth-searchbar"]:this.hasFullWidthSearchBar,[s.Dark]:this.foregroundColor===s.Dark}},i("div",{class:"top-navigation"},i("ic-section-container",{aligned:"full-width","full-height":true},i("header",{role:"banner"},i("div",{class:"top-panel-container"},i("div",{class:"app-details-container"},o&&i("a",{class:"title-link",href:this.href},this.hasAppIcon&&i("div",{class:"app-icon-container","aria-hidden":"true"},i("slot",{name:"app-icon"})),i("ic-typography",{variant:n},i("h1",{class:"title-wrap"},this.appTitle))),this.status!==""&&i("div",{class:"app-status"},i("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},this.status)),this.version!==""&&i("div",{class:"app-version"},i("ic-typography",{variant:"label",class:"app-version-text","aria-label":"app version"},this.version))),(this.hasSearchSlotContent||t)&&i("div",{class:"search-menu-container"},i("div",{class:"search-actions-container"},this.deviceSize>r.L&&i("slot",{name:"search"}),this.hasSearchSlotContent&&this.deviceSize<=r.L&&i("ic-button",{id:"search-toggle-button",ref:t=>this.mobileSearchButtonEl=t,onMouseDown:this.searchButtonMouseDownHandler,variant:"icon",size:e,"aria-label":l,appearance:this.foregroundColor,onClick:this.searchButtonClickHandler},i("slot",{name:"toggle-icon",slot:"icon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))),this.hasIconButtons&&this.deviceSize>r.L&&i("div",{class:"icon-buttons-container"},i("slot",{name:"buttons"})),t&&this.deviceSize<=r.L&&i("div",{class:"menu-button-container"},i("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":!this.hasNavigation||this.navMenuVisible?"true":"false"},i("ic-button",{id:"menu-button",appearance:this.foregroundColor,variant:"secondary","aria-expanded":this.menuOpen?"true":"false","aria-haspopup":"true","aria-label":`Open ${this.hasNavigation?"navigation":"app"} menu`,size:c,onClick:this.menuButtonClick},"Menu",i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff",slot:"icon"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"})))))))),this.mobileSearchBarVisible&&i("div",{class:"search-bar-container"},i("slot",{name:"search"})),this.hasNavigation&&this.deviceSize>r.L&&i("div",{class:"navigation-tabs"},i("span",{id:"navigation-landmark-text",class:"navigation-landmark-text","aria-hidden":"true"},"Main navigation"),i("nav",{"aria-labelledby":"navigation-landmark-text",class:"nav-panel-container"},i("ul",{class:"navigation-item-list"},i("slot",{name:"navigation"}))))))),this.navMenuVisible&&i("ic-navigation-menu",{version:this.version,status:this.status,class:{["inline"]:this.inline}},i("div",{class:"menu-buttons-slot",slot:"buttons"},i("slot",{name:"buttons"})),i("ul",{slot:"navigation"},i("slot",{name:"navigation"}))))}get el(){return n(this)}static get watchers(){return{appTitle:["watchPropHandler"]}}};g.style=u;export{g as ic_top_navigation};
+//# sourceMappingURL=p-5616cfb8.entry.js.map

package/dist/core/p-5616cfb8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasNavigation","hasIconButtons","hasSearchSlotContent","searchBar","initialiseSearchBar","slot","getSlot","el","tagName","querySelector","hideLabel","emitTopNavResized","size","event","CustomEvent","detail","dispatchEvent","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","L","mobileSearchBarVisible","document","activeElement","undefined","setAttribute","removeAttribute","setTimeout","setFocus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","XL","getThemeForegroundColor","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","menuBtn","shadowRoot","ev","searchValue","value","theme","foregroundColor","mode","mobileSearchButtonEl","updateAriaLabel","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","emit","icNavigationMenuClosed","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","disconnect","hasMenuContent","status","version","searchButtonSize","S","appTitleVariant","hasTitle","mobileSearchButtonTitle","menuSize","h","Host","class","IcThemeForegroundEnum","Dark","aligned","full-height","role","href","aria-hidden","name","variant","aria-label","id","ref","onMouseDown","appearance","onClick","xmlns","height","viewBox","width","fill","d","aria-labelledby","aria-expanded","menuOpen","aria-haspopup","inline"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-theme-text);\n  width: 100%;\n  position: relative;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-theme-primary);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  margin-left: calc(-1 * var(--ic-space-xxs));\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-keyline-lighten);\n  padding-left: var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.navigation-tabs {\n  margin-top: -1px;\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  -ms-hyphens: auto;\n  -moz-hyphens: auto;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: 80px;\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host(.dark) .app-status {\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n  border-radius: 16px;\n  background-color: var(--ic-theme-active);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n}\n\n.app-status-text,\n.app-version-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n  flex: 1 auto;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 44px;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container {\n  flex-basis: 1;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container,\n:host([content-aligned=\"left\"]) .nav-panel-container,\n:host([content-aligned=\"center\"]) .nav-panel-container,\n:host([content-aligned=\"left\"]) .search-menu-container,\n:host([content-aligned=\"center\"]) .search-menu-container {\n  justify-content: flex-start;\n}\n\n:host([content-aligned=\"center\"]) .app-details-container {\n  justify-content: flex-end;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n\n  :host([content-aligned=\"center\"]) .top-navigation {\n    display: flex;\n    justify-content: center;\n  }\n\n  :host([content-aligned=\"left\"]) .top-navigation {\n    display: flex;\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding-left: var(--ic-space-md);\n  }\n}\n\n/* medium */\n@media screen and (max-width: 992px) {\n  :host .nav-panel-container,\n  :host .app-status,\n  :host .app-version {\n    display: none;\n  }\n\n  :host .title-link {\n    margin-right: var(--ic-space-xs);\n  }\n\n  .search-menu-container {\n    max-width: 160px;\n  }\n\n  .search-bar-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-top: var(--ic-keyline-darken);\n    height: 64px;\n    padding-left: var(--ic-space-md);\n    padding-right: var(--ic-space-md);\n    margin-left: calc(-1 * var(--section-container-margin));\n    margin-right: calc(-1 * var(--section-container-margin));\n  }\n\n  :host([content-aligned=\"left\"]) .app-details-container,\n  :host([content-aligned=\"left\"]) .search-menu-container,\n  :host([content-aligned=\"center\"]) .search-menu-container,\n  :host([content-aligned=\"center\"]) .app-details-container {\n    justify-content: flex-start;\n  }\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 40px;\n  }\n\n  .searchbox-inline {\n    display: none;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 56px;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-hc-border);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  @Element() el: HTMLIcTopNavigationElement;\n\n  /**\n   * The app title to be displayed.\n   */\n  @Prop() appTitle!: string;\n\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  @State() menuOpen: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchValue: string = \"\";\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  private hasAppIcon: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private searchBar: HTMLIcSearchBarElement = null;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLIcButtonElement;\n    menuBtn.setFocus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.setFocus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n    } else {\n      this.icNavigationMenuClosed.emit();\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.setFocus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.appTitle, propName: \"app-title\" }],\n      \"Top Navigation\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned=\"full-width\" full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {hasTitle && (\n                    <a class=\"title-link\" href={this.href}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      <ic-typography variant={appTitleVariant}>\n                        <h1 class=\"title-wrap\">{this.appTitle}</h1>\n                      </ic-typography>\n                    </a>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            appearance={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"icon\">\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                              </svg>\n                            </slot>\n                          </ic-button>\n                        )}\n\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n                        <div class=\"menu-button-container\">\n                          <nav\n                            aria-labelledby=\"navigation-landmark-text\"\n                            aria-hidden={\n                              !this.hasNavigation || this.navMenuVisible\n                                ? \"true\"\n                                : \"false\"\n                            }\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ul class=\"navigation-item-list\">\n                      <slot name=\"navigation\"></slot>\n                    </ul>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-66cad84e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as a,g as o}from"./p-f9370be6.js";import{t as n,d as r,a as c,r as s}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column;margin-bottom:var(--ic-space-sm);width:-moz-fit-content;width:fit-content}:host([small]){margin-bottom:10px}:host([additional-field-display="static"]) ::slotted(ic-textfield){margin-top:var(--ic-space-xs);margin-left:var(--ic-space-xl)}:host([disabled]){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:inline-flex;position:relative;cursor:pointer;align-items:center;margin-left:var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:1px solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:2px solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:2px solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:1px dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:2px solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{font-size:16px;font-weight:400;margin-left:var(--ic-space-sm)}.addition-field-wrapper{margin-left:44px}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default);margin-left:-1px}.dynamic-container{display:flex;position:relative;margin-left:var(--ic-space-md);margin-top:6px;gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:5px;margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}';const l=class{constructor(i){e(this,i);this.radioOptionSelect=t(this,"radioOptionSelect",7);this.icCheck=t(this,"icCheck",7);this.defaultRadioValue="";this.skipFocus=false;this.handleClick=()=>{if(!this.disabled){if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){const e=this.host.querySelector("ic-text-field");this.value=e.value!==""?e.value:this.defaultRadioValue}this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}};this.swallowClick=e=>{e.stopPropagation()};this.hasAdditionalField=false;this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.selected=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.initiallySelected=this.selected}selectedChangeHandler(e){if(e){this.handleClick()}}componentWillLoad(){const e=n(this.host,"additional-field");if(e!==null){this.hasAdditionalField=true;const t=e[0];if(t.tagName==="IC-TEXT-FIELD"){const e=t;e.hiddenInput=false}}this.defaultRadioValue=this.value;r(this.host,this.handleFormReset)}textfieldValueHandler(e){const t=e.detail.value;if(this.selected){if(t!==""){this.value=e.detail.value;this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}else{this.value=this.defaultRadioValue;this.icCheck.emit({value:this.defaultRadioValue});this.radioOptionSelect.emit({value:this.defaultRadioValue})}}}componentDidLoad(){c([{prop:this.value,propName:"value"}],"Radio Option")}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.selected){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}}disconnectedCallback(){s(this.host,this.handleFormReset)}render(){const e=`ic-radio-option-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;return i(a,{onClick:this.handleClick},i("div",{class:{["container"]:true,["disabled"]:this.disabled}},i("input",{role:"radio",tabindex:this.selected?"0":"-1",type:"radio",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.selected,ref:e=>this.radioElement=e}),i("span",{class:"checkmark"}),i("ic-typography",{class:"radio-label",variant:"body"},i("label",{htmlFor:e},this.label))),this.hasAdditionalField&&i("div",{onClick:this.swallowClick,class:{"dynamic-container":true,hidden:this.additionalFieldDisplay==="dynamic"&&!this.selected}},this.additionalFieldDisplay==="dynamic"&&i("div",{class:"branch-corner"}),i("div",null,this.additionalFieldDisplay==="dynamic"&&i("ic-typography",{variant:"caption"},i("p",{class:"dynamic-text"},this.dynamicText)),i("div",{class:{"addition-field-wrapper":this.additionalFieldDisplay==="static"}},i("slot",{name:"additional-field"})))))}get host(){return o(this)}static get watchers(){return{selected:["selectedChangeHandler"]}}};l.style=d;export{l as ic_radio_option};
+//# sourceMappingURL=p-66cad84e.entry.js.map

package/dist/core/p-66cad84e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"names":["icRadioOptionCss","RadioOption","this","defaultRadioValue","skipFocus","handleClick","disabled","radioElement","focus","hasAdditionalField","textfield","host","querySelector","value","icCheck","emit","radioOptionSelect","swallowClick","event","stopPropagation","handleFormReset","selected","initiallySelected","[object Object]","additonalFieldContent","getSlotContent","Element","tagName","textField","hiddenInput","addFormResetListener","textFieldValue","detail","onComponentRequiredPropUndefined","prop","propName","additionalFieldDisplay","setAttribute","removeAttribute","removeFormResetListener","id","label","undefined","groupLabel","h","Host","onClick","class","role","tabindex","type","name","checked","ref","el","variant","htmlFor","dynamic-container","hidden","dynamicText","addition-field-wrapper"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([small]) {\n  margin-bottom: 10px;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-textfield) {\n  margin-top: var(--ic-space-xs);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin-left: var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: 1px solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 1px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 2px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 2px solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 2px solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 2px solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: var(--ic-space-sm);\n}\n\n.addition-field-wrapper {\n  margin-left: 44px;\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n  margin-left: -1px;\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: var(--ic-space-md);\n  margin-top: 6px;\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: 5px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n  private skipFocus = false;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.icCheck.emit({\n          value: this.value,\n        });\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.icCheck.emit({\n          value: this.defaultRadioValue,\n        });\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-6be5e06b.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/ic-section-container/ic-section-container.css?tag=ic-section-container&encapsulation=shadow","src/components/ic-section-container/ic-section-container.tsx"],"names":["icSectionContainerCss","SectionContainer","[object Object]","aligned","fullHeight","this","h","Host","class"],"mappings":"kDAAA,MAAMA,EAAwB,kyHCQjBC,EAAgB,4CAIK,uBAKD,MAE/BC,SACE,MAAMC,QAAEA,EAAOC,WAAEA,GAAeC,KAChC,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,gBAAiBC,IAAY,OAC9BD,CAAC,kBAAmBC,IAAY,SAChCD,CAAC,sBAAuBC,IAAY,aACpCD,CAAC,uBAAwBE,IAG3BE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n@media only screen and (max-width: 576px) {\n  :host {\n    --section-container-margin: var(--ic-space-xs);\n    --section-container-max-width: var(--ic-breakpoint-sm);\n  }\n}\n\n@media only screen and (min-width: 577px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-md);\n  }\n}\n\n@media only screen and (min-width: 769px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-lg);\n  }\n}\n\n@media only screen and (min-width: 993px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n@media only screen and (min-width: 1201px) {\n  :host {\n    --section-container-margin: var(--ic-space-lg);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n:host {\n  display: block;\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.aligned-center) {\n  max-width: var(--section-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--section-container-margin);\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-left) {\n  max-width: var(--section-container-max-width);\n  margin-left: var(--section-container-margin);\n  margin-right: auto;\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-full-width) {\n  margin-left: var(--section-container-margin);\n  margin-right: var(--section-container-margin);\n}\n\n:host(.vertical-padding) {\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.no-vertical-padding) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Prop, Host, h } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-section-container\",\n  styleUrl: \"ic-section-container.css\",\n  shadow: true,\n})\nexport class SectionContainer {\n  /**\n   * The alignment of the container.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, the standard vertical padding from the container will be removed.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  render() {\n    const { aligned, fullHeight } = this;\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: aligned === \"left\",\n          [\"aligned-center\"]: aligned === \"center\",\n          [\"aligned-full-width\"]: aligned === \"full-width\",\n          [\"no-vertical-padding\"]: fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/ic-section-container/ic-section-container.css?tag=ic-section-container&encapsulation=shadow","src/components/ic-section-container/ic-section-container.tsx"],"names":["icSectionContainerCss","SectionContainer","[object Object]","aligned","fullHeight","this","h","Host","class"],"mappings":"kDAAA,MAAMA,EAAwB,kyHCQjBC,EAAgB,4CAIK,uBAKD,MAE/BC,SACE,MAAMC,QAAEA,EAAOC,WAAEA,GAAeC,KAChC,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,gBAAiBC,IAAY,OAC9BD,CAAC,kBAAmBC,IAAY,SAChCD,CAAC,sBAAuBC,IAAY,aACpCD,CAAC,uBAAwBE,IAG3BE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalize.css\";\n\n@media only screen and (max-width: 576px) {\n  :host {\n    --section-container-margin: var(--ic-space-xs);\n    --section-container-max-width: var(--ic-breakpoint-sm);\n  }\n}\n\n@media only screen and (min-width: 577px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-md);\n  }\n}\n\n@media only screen and (min-width: 769px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-lg);\n  }\n}\n\n@media only screen and (min-width: 993px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n@media only screen and (min-width: 1201px) {\n  :host {\n    --section-container-margin: var(--ic-space-lg);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n:host {\n  display: block;\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.aligned-center) {\n  max-width: var(--section-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--section-container-margin);\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-left) {\n  max-width: var(--section-container-max-width);\n  margin-left: var(--section-container-margin);\n  margin-right: auto;\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-full-width) {\n  margin-left: var(--section-container-margin);\n  margin-right: var(--section-container-margin);\n}\n\n:host(.vertical-padding) {\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.no-vertical-padding) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Prop, Host, h } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-section-container\",\n  styleUrl: \"ic-section-container.css\",\n  shadow: true,\n})\nexport class SectionContainer {\n  /**\n   * The alignment of the container.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, the standard vertical padding from the container will be removed.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  render() {\n    const { aligned, fullHeight } = this;\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: aligned === \"left\",\n          [\"aligned-center\"]: aligned === \"center\",\n          [\"aligned-full-width\"]: aligned === \"full-width\",\n          [\"no-vertical-padding\"]: fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/p-6d0eaaeb.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"names":["icTypographyCss","Typography","[object Object]","variant","applyVerticalMargins","this","h","Host","class"],"mappings":"yDAAA,MAAMA,EAAkB,wjJCSXC,EAAU,4CAMoB,iCAKA,MAEzCC,SACE,MAAMC,QAAEA,EAAOC,qBAAEA,GAAyBC,KAE1C,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,iBAAiBC,KAAY,KAC9BD,CAAC,kCAAkCC,KAAYC,IAGjDE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n  margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n  margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n  margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n  margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body) {\n  margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n  margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n  margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n  font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n  font: var(--ic-font-h2);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n  font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n  font: var(--ic-font-h4);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n  font: var(--ic-font-subtitle-large);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n  font: var(--ic-font-subtitle-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n  font: var(--ic-font-body);\n  letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n  white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n  font: inherit;\n  letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  @Element() el: HTMLIcTypographyElement;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  render() {\n    const { variant, applyVerticalMargins } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"names":["icTypographyCss","Typography","[object Object]","variant","applyVerticalMargins","this","h","Host","class"],"mappings":"yDAAA,MAAMA,EAAkB,wjJCSXC,EAAU,4CAMoB,iCAKA,MAEzCC,SACE,MAAMC,QAAEA,EAAOC,qBAAEA,GAAyBC,KAE1C,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,iBAAiBC,KAAY,KAC9BD,CAAC,kCAAkCC,KAAYC,IAGjDE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n  margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n  margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n  margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n  margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body) {\n  margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n  margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n  margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n  font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n  font: var(--ic-font-h2);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n  font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n  font: var(--ic-font-h4);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n  font: var(--ic-font-subtitle-large);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n  font: var(--ic-font-subtitle-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n  font: var(--ic-font-body);\n  letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n  white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n  font: inherit;\n  letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  @Element() el: HTMLIcTypographyElement;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  render() {\n    const { variant, applyVerticalMargins } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/{p-5d76bbad.entry.js → p-6f442942.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as s,g as h}from"./p-f9370be6.js";import{c as e}from"./p-23831891.js";import"./p-6f57b13c.js";const l=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.default:not(.aligned-left)) .step-item-list{flex:auto}:host(.compact) ul ::slotted(ic-step){display:none}:host(.compact) ul ::slotted(ic-step.show){display:flex}:host(.compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";const p=class{constructor(i){t(this,i);this.resizeObserver=null;this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"));this.stepsWithStepTitles=Array.from(this.el.querySelectorAll("ic-step[step-title]"))};this.checkStepTitles=()=>{if(this.stepsWithStepTitles.length<this.steps.length&&this.variantOverride&&this.variant==="compact"){this.noOfResizes=this.noOfResizes+1;if(this.noOfResizes===1){console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`)}}};this.setStepTypes=()=>{this.getChildren();this.stepTypes=[];for(let t=0;t<this.steps.length;t++){this.stepTypes.push("active")}};this.setStepperWidth=()=>{this.alignedFullWidth=this.variant==="default"&&this.aligned==="full-width";const t=this.steps[this.steps.length-1];t.style.maxWidth="none";if(this.alignedFullWidth){this.stepperWidth=this.el.offsetWidth;t.style.maxWidth=`${this.stepperWidth/this.steps.length}px`;this.lastStepWidth=t.offsetWidth}};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{t.variant=this.variant;t.stepNum=i+1;t.lastStep=i===this.steps.length-1;t.lastStepNum=this.steps.length;if(t.stepType!=="current"){t.current=false;this.stepTypes[i]=t.stepType}else{t.current=true}const s=t.shadowRoot&&t.shadowRoot.querySelector(".step > .step-title-area");if(this.stepsWithStepTitles.length==0&&this.variantOverride){if(this.variant==="compact"){this.autoSetStepTitles=true;if(this.autoSetStepTitles){t.stepTitle="Step "+t.stepNum;s&&s.querySelector(".step-title").setAttribute("aria-hidden","true")}}if(this.variant==="default"){this.autoSetStepTitles=false;if(!this.autoSetStepTitles){t.stepTitle=undefined;s&&s.querySelector(".step-title").removeAttribute("aria-hidden")}}}if(this.variant==="compact"){if(t.current===true||t.stepType==="current"){t.classList.remove("hide");t.classList.add("show")}else if(t.classList.contains("show")){t.classList.remove("show");t.classList.add("hide")}if(!t.lastStep){t.nextStepTitle=this.steps[i+1].stepTitle;t.progress=t.stepNum/this.steps.length*100}else if(t.lastStep&&this.stepTypes[i]!=="completed"){t.progress=95}else{t.progress=100}if(this.hideStepInfo&&s!==null){s.classList.remove("visually-hidden")}t.compactStepStyling=this.stepTypes[i]}if(this.variant==="default"){if(!t.lastStep){if(this.alignedFullWidth){t.style.width=`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`;t.style.minWidth="148px"}}else if(t.lastStep){t.classList.add("last-step");if(this.alignedFullWidth){t.style.maxWidth=`${this.lastStepWidth}px`}else{t.style.maxWidth=this.connectorWidth>100?`${this.connectorWidth+48}px`:"148px"}}if(this.aligned==="left"){t.style.width=this.connectorWidth>100?`${this.connectorWidth+48}px`:"148px";const i=t.shadowRoot.querySelector(".step > .step-top > .step-connect");if(i){i.style.width=this.connectorWidth>100?`${this.connectorWidth}px`:"100px"}}if(this.hideStepInfo&&s!==null){s.classList.add("visually-hidden")}}}))};this.overrideVariant=()=>{let t=148*this.steps.length;if(this.aligned==="left"&&this.connectorWidth>100){t=(this.connectorWidth+48)*this.steps.length}if(this.variantOverride){if(this.el.clientWidth<t){this.variant="compact";this.getChildren()}else{this.variant="default";this.getChildren()}}};this.resizeObserverCallback=()=>{this.getChildren();this.checkStepTitles();this.overrideVariant();this.setStepperWidth();this.initialiseStepStates()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.aligned="full-width";this.variant="default";this.connectorWidth=100;this.hideStepInfo=false;this.stepperWidth=document.querySelector("ic-stepper").getBoundingClientRect().width;this.lastStepWidth=0;this.stepTypes=[];this.alignedFullWidth=true;this.autoSetStepTitles=true;this.variantOverride=this.variant!=="compact";this.noOfResizes=0}componentWillLoad(){this.setStepTypes();if(this.variant==="compact"){this.variantOverride=false}}componentDidLoad(){e(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){return i(s,{class:{[`${this.variant}`]:true,["aligned-left"]:this.variant==="default"&&this.aligned==="left"}},i("ul",{class:"step-item-list"},i("slot",null)))}get el(){return h(this)}};p.style=l;export{p as ic_stepper};
-//# sourceMappingURL=p-5d76bbad.entry.js.map
+import{r as t,h as i,H as s,g as h}from"./p-f9370be6.js";import{c as e}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const l=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.default:not(.aligned-left)) .step-item-list{flex:auto}:host(.compact) ul ::slotted(ic-step){display:none}:host(.compact) ul ::slotted(ic-step.show){display:flex}:host(.compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";const p=class{constructor(i){t(this,i);this.resizeObserver=null;this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"));this.stepsWithStepTitles=Array.from(this.el.querySelectorAll("ic-step[step-title]"))};this.checkStepTitles=()=>{if(this.stepsWithStepTitles.length<this.steps.length&&this.variantOverride&&this.variant==="compact"){this.noOfResizes=this.noOfResizes+1;if(this.noOfResizes===1){console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`)}}};this.setStepTypes=()=>{this.getChildren();this.stepTypes=[];for(let t=0;t<this.steps.length;t++){this.stepTypes.push("active")}};this.setStepperWidth=()=>{this.alignedFullWidth=this.variant==="default"&&this.aligned==="full-width";const t=this.steps[this.steps.length-1];t.style.maxWidth="none";if(this.alignedFullWidth){this.stepperWidth=this.el.offsetWidth;t.style.maxWidth=`${this.stepperWidth/this.steps.length}px`;this.lastStepWidth=t.offsetWidth}};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{t.variant=this.variant;t.stepNum=i+1;t.lastStep=i===this.steps.length-1;t.lastStepNum=this.steps.length;if(t.stepType!=="current"){t.current=false;this.stepTypes[i]=t.stepType}else{t.current=true}const s=t.shadowRoot&&t.shadowRoot.querySelector(".step > .step-title-area");if(this.stepsWithStepTitles.length==0&&this.variantOverride){if(this.variant==="compact"){this.autoSetStepTitles=true;if(this.autoSetStepTitles){t.stepTitle="Step "+t.stepNum;s&&s.querySelector(".step-title").setAttribute("aria-hidden","true")}}if(this.variant==="default"){this.autoSetStepTitles=false;if(!this.autoSetStepTitles){t.stepTitle=undefined;s&&s.querySelector(".step-title").removeAttribute("aria-hidden")}}}if(this.variant==="compact"){if(t.current===true||t.stepType==="current"){t.classList.remove("hide");t.classList.add("show")}else if(t.classList.contains("show")){t.classList.remove("show");t.classList.add("hide")}if(!t.lastStep){t.nextStepTitle=this.steps[i+1].stepTitle;t.progress=t.stepNum/this.steps.length*100}else if(t.lastStep&&this.stepTypes[i]!=="completed"){t.progress=95}else{t.progress=100}if(this.hideStepInfo&&s!==null){s.classList.remove("visually-hidden")}t.compactStepStyling=this.stepTypes[i]}if(this.variant==="default"){if(!t.lastStep){if(this.alignedFullWidth){t.style.width=`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`;t.style.minWidth="148px"}}else if(t.lastStep){t.classList.add("last-step");if(this.alignedFullWidth){t.style.maxWidth=`${this.lastStepWidth}px`}else{t.style.maxWidth=this.connectorWidth>100?`${this.connectorWidth+48}px`:"148px"}}if(this.aligned==="left"){t.style.width=this.connectorWidth>100?`${this.connectorWidth+48}px`:"148px";const i=t.shadowRoot.querySelector(".step > .step-top > .step-connect");if(i){i.style.width=this.connectorWidth>100?`${this.connectorWidth}px`:"100px"}}if(this.hideStepInfo&&s!==null){s.classList.add("visually-hidden")}}}))};this.overrideVariant=()=>{let t=148*this.steps.length;if(this.aligned==="left"&&this.connectorWidth>100){t=(this.connectorWidth+48)*this.steps.length}if(this.variantOverride){if(this.el.clientWidth<t){this.variant="compact";this.getChildren()}else{this.variant="default";this.getChildren()}}};this.resizeObserverCallback=()=>{this.getChildren();this.checkStepTitles();this.overrideVariant();this.setStepperWidth();this.initialiseStepStates()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.aligned="full-width";this.variant="default";this.connectorWidth=100;this.hideStepInfo=false;this.stepperWidth=document.querySelector("ic-stepper").getBoundingClientRect().width;this.lastStepWidth=0;this.stepTypes=[];this.alignedFullWidth=true;this.autoSetStepTitles=true;this.variantOverride=this.variant!=="compact";this.noOfResizes=0}componentWillLoad(){this.setStepTypes();if(this.variant==="compact"){this.variantOverride=false}}componentDidLoad(){e(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){return i(s,{class:{[`${this.variant}`]:true,["aligned-left"]:this.variant==="default"&&this.aligned==="left"}},i("ul",{class:"step-item-list"},i("slot",null)))}get el(){return h(this)}};p.style=l;export{p as ic_stepper};
+//# sourceMappingURL=p-6f442942.entry.js.map

package/dist/core/{p-4c72f3a9.entry.js → p-7ba184da.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as r,H as i,g as s}from"./p-f9370be6.js";import{c}from"./p-e28af65b.js";import{i as a}from"./p-23831891.js";import"./p-6f57b13c.js";const t=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>\n</svg>\n`;const n=':host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current="page"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}';const o=class{constructor(i){e(this,i);this.renderDefaultBreadcrumb=(e,i,s,c)=>{const n=i!==null&&i!==undefined&&i!=="";if(e&&n){return r("span",{class:{"current-page-container":e}},a(this.el,"icon")&&r("slot",{name:"icon"}),i)}return r("ic-link",{href:c,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&s&&s},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:t}),a(this.el,"icon")&&r("slot",{name:"icon"}),i)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");if(e){e.classList.remove("current-page");if(this.current){const r=e.classList.contains("current-page");if(!r){e.classList.add("breadcrumb-link","current-page")}}}};this.pageTitle=undefined;this.href=undefined;this.current=false;this.showBackIcon=false}componentWillRender(){this.setSlottedCurrentPageClass()}render(){const{current:e,href:s,pageTitle:a}=this;const t=`${a&&a.toLowerCase().replace(" ","-")}-describedby`;const n=a!==null&&a!==undefined&&a!=="";const o=s!==null&&s!==undefined&&s!=="";return r(i,{class:{back:this.showBackIcon},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:c,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&t&&r("span",{id:t,class:"hide"},`Back to ${a}`),n&&o?this.renderDefaultBreadcrumb(e,a,t,s):r("slot",null)))}get el(){return s(this)}};o.style=n;export{o as ic_breadcrumb};
-//# sourceMappingURL=p-4c72f3a9.entry.js.map
+import{r as e,h as r,H as i,g as s}from"./p-f9370be6.js";import{c}from"./p-e28af65b.js";import{i as a}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const t=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>\n</svg>\n`;const n=':host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current="page"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}';const o=class{constructor(i){e(this,i);this.renderDefaultBreadcrumb=(e,i,s,c)=>{const n=i!==null&&i!==undefined&&i!=="";if(e&&n){return r("span",{class:{"current-page-container":e}},a(this.el,"icon")&&r("slot",{name:"icon"}),i)}return r("ic-link",{href:c,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&s&&s},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:t}),a(this.el,"icon")&&r("slot",{name:"icon"}),i)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");if(e){e.classList.remove("current-page");if(this.current){const r=e.classList.contains("current-page");if(!r){e.classList.add("breadcrumb-link","current-page")}}}};this.pageTitle=undefined;this.href=undefined;this.current=false;this.showBackIcon=false}componentWillRender(){this.setSlottedCurrentPageClass()}render(){const{current:e,href:s,pageTitle:a}=this;const t=`${a&&a.toLowerCase().replace(" ","-")}-describedby`;const n=a!==null&&a!==undefined&&a!=="";const o=s!==null&&s!==undefined&&s!=="";return r(i,{class:{back:this.showBackIcon},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:c,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&t&&r("span",{id:t,class:"hide"},`Back to ${a}`),n&&o?this.renderDefaultBreadcrumb(e,a,t,s):r("slot",null)))}get el(){return s(this)}};o.style=n;export{o as ic_breadcrumb};
+//# sourceMappingURL=p-7ba184da.entry.js.map