npm - @ukic/web-components - Versions diffs - 2.1.0-beta.0 → 2.1.0-beta.1 - Mend

@ukic/web-components 2.1.0-beta.0 → 2.1.0-beta.1

Files changed (401) hide show

package/dist/core/{p-c96adfd7.entry.js.map → p-33a45ace.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
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","onMenuChange","onOptionSelect","parentEl","ariaLiveMode","status","message"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n/*\n @prop --input-width: Width of the input field\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(--expand-icon-hover, var(--ic-architectural-400));\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 Provide a label for the input.\n /\n @Prop() label!: string;\n\n /\n Provide the possible selection options.\n /\n @Prop() options?: IcMenuOption[] = [];\n\n /\n Specify if the input requires a value.\n /\n @Prop() required?: boolean = false;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n Specify whether the input is disabled.\n /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /\n Specify whether the input is read only.\n /\n @Prop() readonly?: boolean = false;\n\n /\n Provide a placeholder value to display.\n /\n @Prop() placeholder?: string = \"Select an option\";\n\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n\n /\n Specify whether small styling is to be applied to the element.\n /\n @Prop() small?: boolean = false;\n\n /\n If true, then fill width of container.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Provide a validation status.\n /\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /\n Provide 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 Display a button which clears the input when clicked. The button will always appear on the searchable select.\n /\n @Prop() showClearButton?: boolean = false;\n\n /\n If true, the select can be typed in to filter options.\n /\n @Prop() searchable?: boolean = false;\n\n /\n If true, descriptions of options are included when filtering options in a searchable select.\n /\n @Prop() includeDescriptionsInSearch?: boolean = false;\n\n /\n If true, group titles of grouped options are 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 Number of characters until suggestions appear for a searchable select.\n /\n @Prop() charactersUntilSuggestions?: number = 0;\n\n /\n Provide text for empty results 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 onMenuChange={this.handleMenuChange}\n onOptionSelect={this.handleCustomSelectChange}\n parentEl={this.host}\n ></ic-menu>\n )}\n <ic-input-validation\n class={{ \"menu-open\": this.open }}\n ariaLiveMode=\"polite\"\n status={\n hasValidationStatus(this.validationStatus, this.disabled) ===\n false\n ? \"\"\n : validationStatus\n }\n message={\n hasValidationStatus(this.validationStatus, this.disabled)\n ? validationText\n : \"\"\n }\n for={this.inputId}\n ></ic-input-validation>\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}
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","onMenuChange","onOptionSelect","parentEl","ariaLiveMode","status","message"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n/*\n @prop --input-width: Width of the input field\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(--expand-icon-hover, var(--ic-architectural-400));\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 Provide a label for the input.\n /\n @Prop() label!: string;\n\n /\n Provide the possible selection options.\n /\n @Prop() options?: IcMenuOption[] = [];\n\n /\n Specify if the input requires a value.\n /\n @Prop() required?: boolean = false;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n Specify whether the input is disabled.\n /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /\n Specify whether the input is read only.\n /\n @Prop() readonly?: boolean = false;\n\n /\n Provide a placeholder value to display.\n /\n @Prop() placeholder?: string = \"Select an option\";\n\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n\n /\n Specify whether small styling is to be applied to the element.\n /\n @Prop() small?: boolean = false;\n\n /\n If true, then fill width of container.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Provide a validation status.\n /\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /\n Provide 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 Display a button which clears the input when clicked. The button will always appear on the searchable select.\n /\n @Prop() showClearButton?: boolean = false;\n\n /\n If true, the select can be typed in to filter options.\n /\n @Prop() searchable?: boolean = false;\n\n /\n If true, descriptions of options are included when filtering options in a searchable select.\n /\n @Prop() includeDescriptionsInSearch?: boolean = false;\n\n /\n If true, group titles of grouped options are 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 Number of characters until suggestions appear for a searchable select.\n /\n @Prop() charactersUntilSuggestions?: number = 0;\n\n /\n Provide text for empty results 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 onMenuChange={this.handleMenuChange}\n onOptionSelect={this.handleCustomSelectChange}\n parentEl={this.host}\n ></ic-menu>\n )}\n <ic-input-validation\n class={{ \"menu-open\": this.open }}\n ariaLiveMode=\"polite\"\n status={\n hasValidationStatus(this.validationStatus, this.disabled) ===\n false\n ? \"\"\n : validationStatus\n }\n message={\n hasValidationStatus(this.validationStatus, this.disabled)\n ? validationText\n : \"\"\n }\n for={this.inputId}\n ></ic-input-validation>\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}

package/dist/core/{p-a9237c61.entry.js → p-347ec49e.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,H as a,g as o}from"./p-f9370be6.js";import{D as n,j as s,p as r,g as d,n as c}from"./p-f228c232.js";import{c as l}from"./p-e28af65b.js";import"./p-6f57b13c.js";const v='/*! 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}:host(:focus-within){z-index:1}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}ic-typography{flex:1}:host([expandable].navigation-item) .link,:host([expandable].navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}:host(.navigation-item) ::slotted(a){font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:4px;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){height:40px;width:100%;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;transition:var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;padding-right:var(--ic-space-lg);width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:40px;width:-moz-fit-content;width:fit-content;min-width:145px;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:40px;margin-right:5px;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height);width:var(--navigation-item-width);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:10px;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 5px 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;top:0;right:0;left:5px;border-radius:11px !important;bottom:0;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 5px 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:44px !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link,:host(.navigation-item-page-header) ::slotted(a.active){box-shadow:inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default)}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus,:host(.navigation-item-page-header) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus),\n    inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}';const h=class{constructor(a){t(this,a);this.childBlur=i(this,"childBlur",7);this.icNavItemClicked=i(this,"icNavItemClicked",7);this.topNavResizedHandler=t=>{const i=t.detail.size;if(i!==this.deviceSize){this.deviceSize=i;this.inTopNavSideMenu=i<=n.L}};this.sideNavExpandHandler=t=>{const{sideNavExpanded:i,sideNavMobile:e}=t.detail;this.sideNavExpanded=i;this.isSideNavMobile=e};this.handleBlur=t=>{if(t.relatedTarget!==null){const i=t.relatedTarget;if(i.tagName==="IC-NAVIGATION-ITEM"){return}}this.childBlur.emit()};this.handleClick=()=>{this.icNavItemClicked.emit()};this.isInitialRender=true;this.displayDefaultNavigationItem=(t,i)=>{const a=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const o="ic-tooltip-navigation-item";const n=this.expandable&&e("div",{class:{svg:true},innerHTML:l});const s=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"}," ",e("slot",{name:"icon"})," ");if(t!==""){return e("a",{href:t,class:"link",ref:t=>this.itemEl=t,part:"link","aria-labelledby":o},s,e("ic-typography",{variant:a},i),n)}return e("div",{tabindex:"0",class:"link",ref:t=>this.itemEl=t,"aria-labelledby":o},s,e("ic-typography",{variant:a},i),n)};this.label=undefined;this.href="";this.selected=false;this.expandable=false;this.displayNavigationTooltip=false;this.collapsedIconLabel=false;this.isTopNavChild=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.isSideNavMobile=false}themeChangeHandler(t){const i=t.detail;this.focusStyle=i.mode}async setFocus(){if(this.itemEl){this.itemEl.focus()}}componentWillLoad(){const t=c(this.el);this.navigationType=t.navType;this.parentEl=t.parent;if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}if(r(this.el)==="IC-NAVIGATION-GROUP"&&this.navigationType==="top"){this.isTopNavChild=true}this.deviceSize=d();if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}}componentDidUpdate(){this.isInitialRender=false}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{href:t,label:i,inTopNavSideMenu:o,isTopNavChild:n,selected:s,navigationSlot:r}=this;return e(a,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!o&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:n&&!o&&s,[this.focusStyle]:!o&&!n||this.navigationType==="side"&&n,["navigation-item-selected"]:!n&&s,["navigation-item-side-menu"]:o,["navigation-item-side-menu-selected"]:o&&s,["navigation-item-top-nav-child"]:n&&!o,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile},onBlur:n&&!o?this.handleBlur:null,onClick:this.handleClick,"aria-current":s?"page":null,role:"listitem"},e("ic-tooltip",{label:i||r.textContent,target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},r?e("slot",{name:"navigation-item"}):this.displayDefaultNavigationItem(t,i)))}get el(){return o(this)}};h.style=v;export{h as ic_navigation_item};
-//# sourceMappingURL=p-a9237c61.entry.js.map
+import{r as t,c as i,h as e,H as a,g as o}from"./p-f9370be6.js";import{D as n,k as s,q as r,g as d,p as c}from"./p-23831891.js";import{c as l}from"./p-e28af65b.js";import"./p-6f57b13c.js";const v='/*! 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}:host(:focus-within){z-index:1}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}ic-typography{flex:1}:host([expandable].navigation-item) .link,:host([expandable].navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}:host(.navigation-item) ::slotted(a){font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:4px;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){height:40px;width:100%;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;transition:var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;padding-right:var(--ic-space-lg);width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:40px;width:-moz-fit-content;width:fit-content;min-width:145px;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:40px;margin-right:5px;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height);width:var(--navigation-item-width);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:10px;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 5px 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;top:0;right:0;left:5px;border-radius:11px !important;bottom:0;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 5px 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:44px !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link,:host(.navigation-item-page-header) ::slotted(a.active){box-shadow:inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default)}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus,:host(.navigation-item-page-header) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus),\n    inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}';const h=class{constructor(a){t(this,a);this.childBlur=i(this,"childBlur",7);this.icNavItemClicked=i(this,"icNavItemClicked",7);this.topNavResizedHandler=t=>{const i=t.detail.size;if(i!==this.deviceSize){this.deviceSize=i;this.inTopNavSideMenu=i<=n.L}};this.sideNavExpandHandler=t=>{const{sideNavExpanded:i,sideNavMobile:e}=t.detail;this.sideNavExpanded=i;this.isSideNavMobile=e};this.handleBlur=t=>{if(t.relatedTarget!==null){const i=t.relatedTarget;if(i.tagName==="IC-NAVIGATION-ITEM"){return}}this.childBlur.emit()};this.handleClick=()=>{this.icNavItemClicked.emit()};this.isInitialRender=true;this.displayDefaultNavigationItem=(t,i)=>{const a=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const o="ic-tooltip-navigation-item";const n=this.expandable&&e("div",{class:{svg:true},innerHTML:l});const s=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"}," ",e("slot",{name:"icon"})," ");if(t!==""){return e("a",{href:t,class:"link",ref:t=>this.itemEl=t,part:"link","aria-labelledby":o},s,e("ic-typography",{variant:a},i),n)}return e("div",{tabindex:"0",class:"link",ref:t=>this.itemEl=t,"aria-labelledby":o},s,e("ic-typography",{variant:a},i),n)};this.label=undefined;this.href="";this.selected=false;this.expandable=false;this.displayNavigationTooltip=false;this.collapsedIconLabel=false;this.isTopNavChild=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.isSideNavMobile=false}themeChangeHandler(t){const i=t.detail;this.focusStyle=i.mode}async setFocus(){if(this.itemEl){this.itemEl.focus()}}componentWillLoad(){const t=c(this.el);this.navigationType=t.navType;this.parentEl=t.parent;if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}if(r(this.el)==="IC-NAVIGATION-GROUP"&&this.navigationType==="top"){this.isTopNavChild=true}this.deviceSize=d();if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}}componentDidUpdate(){this.isInitialRender=false}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{href:t,label:i,inTopNavSideMenu:o,isTopNavChild:n,selected:s,navigationSlot:r}=this;return e(a,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!o&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:n&&!o&&s,[this.focusStyle]:!o&&!n||this.navigationType==="side"&&n,["navigation-item-selected"]:!n&&s,["navigation-item-side-menu"]:o,["navigation-item-side-menu-selected"]:o&&s,["navigation-item-top-nav-child"]:n&&!o,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile},onBlur:n&&!o?this.handleBlur:null,onClick:this.handleClick,"aria-current":s?"page":null,role:"listitem"},e("ic-tooltip",{label:i||r.textContent,target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},r?e("slot",{name:"navigation-item"}):this.displayDefaultNavigationItem(t,i)))}get el(){return o(this)}};h.style=v;export{h as ic_navigation_item};
+//# sourceMappingURL=p-347ec49e.entry.js.map

package/dist/core/{p-a9237c61.entry.js.map → p-347ec49e.entry.js.map} RENAMED Viewed

File without changes

package/dist/core/p-39ae284e.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as i,g as s}from"./p-f9370be6.js";import{C as c}from"./p-1e7b4310.js";const r=":host{display:flex;flex:auto}:host(.last-step){flex-grow:initial}.step{display:flex;flex-direction:column;flex:1 1 0}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}.step-icon{display:flex;justify-content:center;align-items:center;border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}.current{color:var(--ic-theme-primary)}.step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs)}.step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}.completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}.current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.check-icon{padding-top:var(--ic-space-xxs)}.check-icon svg{width:16px;height:16px}.check-icon>svg>path{fill:white}@media (forced-colors: active){.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 2px;background-color:transparent;color:canvastext}.current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:Graytext}.step-connect-inner,.completed .step-connect{background-color:canvastext}.check-icon>svg>path{fill:canvastext}}";const a=class{constructor(t){e(this,t);this.stepType="active";this.stepTitle=undefined;this.stepSubtitle=undefined;this.stepNum=undefined;this.lastStep=undefined}render(){let e;if(this.stepType!=="completed"){e=t("ic-typography",{variant:"subtitle-small"},t("span",{class:"step-icon-inner","aria-hidden":"true"},this.stepNum))}else{e=t("div",{class:"step-icon-inner","aria-hidden":"true"},t("span",{class:"check-icon",innerHTML:c}))}let s="";if(this.stepType==="completed"){s=". Completed step"}else if(this.stepType==="disabled"){s=". Disabled step"}const r=this.stepType==="current"&&t("div",{class:"step-connect-inner"});const a=!this.lastStep&&t("div",{class:{["step-connect"]:true,["aligned-full-width"]:this.el.parentElement.classList.contains("aligned-full-width")}},r);return t(i,{role:"listitem","aria-label":`Step ${this.stepNum}${s}`,"aria-current":this.stepType=="current"?"step":null,class:{["aligned-full-width"]:this.el.parentElement.classList.contains("aligned-full-width")}},t("div",{class:{["step"]:true,[`${this.stepType}`]:true}},t("div",{class:"step-top"},t("div",{class:"step-icon"},e),a),(this.stepTitle\|\|this.stepSubtitle)&&t("div",{class:"step-title-area"},this.stepTitle&&t("ic-typography",{variant:"subtitle-large",class:"step-title"},this.stepTitle),this.stepSubtitle&&t("ic-typography",{variant:"caption",class:"step-subtitle"},this.stepSubtitle))))}get el(){return s(this)}};a.style=r;export{a as ic_step};
2	+ //# sourceMappingURL=p-39ae284e.entry.js.map

package/dist/core/p-39ae284e.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"names":["icStepCss","Step","[object Object]","icon","this","stepType","h","variant","class","aria-hidden","stepNum","innerHTML","checkIcon","ariaLabel","partialBar","finalStep","lastStep","el","parentElement","classList","contains","Host","role","aria-label","aria-current","stepTitle","stepSubtitle"],"mappings":"6FAAA,MAAMA,EAAY,8oFCSLC,EAAI,6CAKkB,6GAsBjCC,SACE,IAAIC,EACJ,GAAIC,KAAKC,WAAa,YAAa,CACjCF,EACEG,EAAA,gBAAA,CAAeC,QAAQ,kBACrBD,EAAA,OAAA,CAAME,MAAM,kBAAiBC,cAAa,QACvCL,KAAKM,cAIP,CACLP,EACEG,EAAA,MAAA,CAAKE,MAAM,kBAAiBC,cAAa,QACvCH,EAAA,OAAA,CAAME,MAAM,aAAaG,UAAWC,KAK1C,IAAIC,EAAY,GAEhB,GAAIT,KAAKC,WAAa,YAAa,CACjCQ,EAAY,wBACP,GAAIT,KAAKC,WAAa,WAAY,CACvCQ,EAAY,kBAGd,MAAMC,EAAaV,KAAKC,WAAa,WACnCC,EAAA,MAAA,CAAKE,MAAM,uBAEb,MAAMO,GAAaX,KAAKY,UACtBV,EAAA,MAAA,CACEE,MAAO,CACLN,CAAC,gBAAiB,KAClBA,CAAC,sBACCE,KAAKa,GAAGC,cAAcC,UAAUC,SAAS,wBAG5CN,GAIL,OACER,EAACe,EAAI,CACHC,KAAK,WAAUC,aACH,QAAQnB,KAAKM,UAAUG,IAAWW,eAChCpB,KAAKC,UAAY,UAAY,OAAS,KACpDG,MAAO,CACLN,CAAC,sBACCE,KAAKa,GAAGC,cAAcC,UAAUC,SAAS,wBAG7Cd,EAAA,MAAA,CACEE,MAAO,CACLN,CAAC,QAAS,KACVA,CAAC,GAAGE,KAAKC,YAAa,OAGxBC,EAAA,MAAA,CAAKE,MAAM,YACTF,EAAA,MAAA,CAAKE,MAAM,aAAaL,GACvBY,IAEDX,KAAKqB,WAAarB,KAAKsB,eACvBpB,EAAA,MAAA,CAAKE,MAAM,mBACRJ,KAAKqB,WACJnB,EAAA,gBAAA,CAAeC,QAAQ,iBAAiBC,MAAM,cAC3CJ,KAAKqB,WAGTrB,KAAKsB,cACJpB,EAAA,gBAAA,CAAeC,QAAQ,UAAUC,MAAM,iBACpCJ,KAAKsB","sourcesContent":[":host {\n display: flex;\n flex: auto;\n}\n\n:host(.last-step) {\n flex-grow: initial;\n}\n\n.step {\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 40px;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.current {\n color: var(--ic-theme-primary);\n}\n\n.step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n}\n\n.step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n.completed {\n color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-theme-primary);\n color: white;\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon {\n border: 1px dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n.current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs)); /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 100px;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 2px dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-theme-primary);\n}\n\n.check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.check-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.check-icon > svg > path {\n fill: white;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-hc-border);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 2px;\n background-color: transparent;\n color: canvastext;\n }\n\n .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .step-title-area {\n color: Graytext;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n /**\n * State of step\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n /**\n * Name of step\n */\n @Prop() stepTitle?: string;\n\n /**\n * Additional information about step\n */\n @Prop() stepSubtitle?: string;\n\n /**\n * @internal The step number, managed by ic-stepper\n */\n @Prop() stepNum?: number;\n\n /**\n * @internal Final step in series flag, managed by ic-stepper\n */\n @Prop() lastStep?: boolean;\n\n render() {\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Disabled step\";\n }\n\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={this.stepType == \"current\" ? \"step\" : null}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle || this.stepSubtitle) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepSubtitle && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/core/{p-bf4ddf33.entry.js → p-558552f8.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,H as a,g as n}from"./p-f9370be6.js";import{w as r,e as s}from"./p-bf5717ca.js";import{s as o}from"./p-ae6aa67f.js";import{c}from"./p-44512ebe.js";import{i as l}from"./p-f228c232.js";import{I as d}from"./p-6f57b13c.js";const p=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>\n    <title>neutral icon</title>\n</svg>`;const u=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n    <title>info icon</title>\n</svg>`;const m='/*! 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}.container{min-height:56px;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-architectural-40)}.container-info{background-color:var(--ic-status-info-background)}.container-warning{background-color:var(--ic-status-warning-background)}.container-error{background-color:var(--ic-status-error-background)}.container-success{background-color:var(--ic-status-success-background)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-architectural-500)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning-mid)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:22px;margin-left:18px}.icon-neutral>svg{fill:var(--ic-architectural-500)}.icon-info>svg{fill:var(--ic-status-info)}.icon-warning>svg{fill:var(--ic-status-warning-mid)}.icon-error>svg{fill:var(--ic-status-error)}.icon-success>svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:10px;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline;font-size:0}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-6px;padding:6px;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon svg{width:18px;height:18px}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start;font-size:1px}.alert-title{white-space:normal}.alert-action-container{margin-bottom:14px}}';const g={neutral:p,info:u,warning:r,error:s,success:o};const b=class{constructor(i){e(this,i);this.dismiss=t(this,"dismiss",7);this.dismissAction=()=>{this.dismiss.emit()};this.variant="neutral";this.heading="";this.message=undefined;this.titleAbove=false;this.dismissible=false;this.announced=true;this.visible=true;this.alertTitleWrap=false}handleClick(){this.visible=!this.visible}alertTitleShouldWrap(){var e;const t=(e=this.el.shadowRoot.querySelector(".alert-title"))===null||e===void 0?void 0:e.clientHeight;if(t>24)this.alertTitleWrap=true}componentDidLoad(){this.alertTitleShouldWrap()}render(){const{variant:e,heading:t,message:n,titleAbove:r,dismissible:s,announced:o,visible:p}=this;return p&&i(a,{role:o&&"alert",class:{[d.Dark]:true}},i("div",{class:{["container"]:true,[`container-${e}`]:true}},i("div",{class:"alert-icon-container"},i("div",{class:{["divider"]:true,[`divider-${e}`]:true}}),i("span",{class:{["alert-icon"]:true,["svg-container"]:true,[`icon-${e}`]:true},innerHTML:g[e]})),i("div",{class:"alert-content"},i("div",{class:{["alert-message"]:true,["alert-message-title-above"]:r||this.alertTitleWrap}},t&&i("ic-typography",{class:{["alert-title"]:true,["alert-title-above"]:r||this.alertTitleWrap},variant:"subtitle-large"},i("p",null,t)),i("slot",{name:"message"},i("ic-typography",{variant:"body"},n))),l(this.el,"action")&&i("div",{class:"alert-action-container"},i("slot",{name:"action"}))),i("div",{class:"dismiss-icon-container"},s&&i("ic-button",{class:{["svg-container"]:true,["dismiss-icon"]:true},innerHTML:c,onClick:this.dismissAction,variant:"icon",appearance:d.Dark,title:"dismiss"}))))}get el(){return n(this)}};b.style=m;export{b as ic_alert};
-//# sourceMappingURL=p-bf4ddf33.entry.js.map
+import{r as e,c as t,h as i,H as a,g as r}from"./p-f9370be6.js";import{w as n,e as s}from"./p-bf5717ca.js";import{s as o}from"./p-ae6aa67f.js";import{c}from"./p-44512ebe.js";import{i as l}from"./p-23831891.js";import{I as d}from"./p-6f57b13c.js";const p=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>\n    <title>neutral icon</title>\n</svg>`;const u=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n    <title>info icon</title>\n</svg>`;const m='/*! 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}.container{min-height:56px;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-architectural-40)}.container-info{background-color:var(--ic-status-info-background)}.container-warning{background-color:var(--ic-status-warning-background)}.container-error{background-color:var(--ic-status-error-background)}.container-success{background-color:var(--ic-status-success-background)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-architectural-500)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning-mid)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:22px;margin-left:18px}.icon-neutral>svg{fill:var(--ic-architectural-500)}:host([variant="info"]) .alert-icon svg{fill:var(--ic-status-info)}:host([variant="warning"]) .alert-icon svg{fill:var(--ic-status-warning-mid)}:host([variant="error"]) .alert-icon svg{fill:var(--ic-status-error)}:host([variant="success"]) .alert-icon svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:10px;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline;font-size:0}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-6px;padding:6px;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon svg{width:18px;height:18px}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start;font-size:1px}.alert-title{white-space:normal}.alert-action-container{margin-bottom:14px}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}';const g={neutral:p,info:u,warning:n,error:s,success:o};const h=class{constructor(i){e(this,i);this.dismiss=t(this,"dismiss",7);this.dismissAction=()=>{this.dismiss.emit()};this.variant="neutral";this.heading="";this.message=undefined;this.titleAbove=false;this.dismissible=false;this.announced=true;this.visible=true;this.alertTitleWrap=false}handleClick(){this.visible=!this.visible}alertTitleShouldWrap(){var e;const t=(e=this.el.shadowRoot.querySelector(".alert-title"))===null||e===void 0?void 0:e.clientHeight;if(t>24)this.alertTitleWrap=true}componentDidLoad(){this.alertTitleShouldWrap()}render(){const{variant:e,heading:t,message:r,titleAbove:n,dismissible:s,announced:o,visible:p}=this;return p&&i(a,{role:o&&"alert",class:{[d.Dark]:true}},i("div",{class:{["container"]:true,[`container-${e}`]:true}},i("div",{class:"alert-icon-container"},i("div",{class:{["divider"]:true,[`divider-${e}`]:true}}),i("span",{class:{["alert-icon"]:true,["svg-container"]:true,[`icon-${e}`]:true},innerHTML:g[e]})),i("div",{class:"alert-content"},i("div",{class:{["alert-message"]:true,["alert-message-title-above"]:n||this.alertTitleWrap}},t&&i("ic-typography",{class:{["alert-title"]:true,["alert-title-above"]:n||this.alertTitleWrap},variant:"subtitle-large"},i("p",null,t)),i("slot",{name:"message"},i("ic-typography",{variant:"body"},r))),l(this.el,"action")&&i("div",{class:"alert-action-container"},i("slot",{name:"action"}))),i("div",{class:"dismiss-icon-container"},s&&i("ic-button",{class:{["svg-container"]:true,["dismiss-icon"]:true},innerHTML:c,onClick:this.dismissAction,variant:"icon",appearance:d.Dark,title:"dismiss"}))))}get el(){return r(this)}};h.style=m;export{h as ic_alert};
+//# sourceMappingURL=p-558552f8.entry.js.map

package/dist/core/p-558552f8.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"names":["icAlertCss","icon","neutral","neutralIcon","info","infoIcon","warning","warningIcon","error","errorIcon","success","successIcon","Alert","this","dismissAction","dismiss","emit","[object Object]","visible","titleHeight","_a","el","shadowRoot","querySelector","clientHeight","alertTitleWrap","alertTitleShouldWrap","variant","heading","message","titleAbove","dismissible","announced","h","Host","role","class","IcThemeForegroundEnum","Dark","innerHTML","name","isSlotUsed","closeIcon","onClick","appearance","title"],"mappings":"6gCAAA,MAAMA,EAAa,6qJCqBnB,MAAMC,EAAO,CACXC,QAASC,EACTC,KAAMC,EACNC,QAASC,EACTC,MAAOC,EACPC,QAASC,SAYEC,EAAK,gEAyCRC,KAAAC,cAAgB,KACtBD,KAAKE,QAAQC,qBApCqB,uBAIT,0CAQI,uBAIC,qBAIF,kBAEF,yBAEO,MAGnCC,cACEJ,KAAKK,SAAWL,KAAKK,QAWfD,6BACN,MAAME,GACJC,EAAAP,KAAKQ,GAAGC,WAAWC,cAAc,mBAAe,MAAAH,SAAA,OAAA,EAAAA,EAAEI,aACpD,GAAIL,EAAc,GAAIN,KAAKY,eAAiB,KAG9CR,mBACEJ,KAAKa,uBAGPT,SACE,MAAMU,QACJA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,WACPA,EAAUC,YACVA,EAAWC,UACXA,EAASd,QACTA,GACEL,KAEJ,OACEK,GACEe,EAACC,EAAI,CACHC,KAAMH,GAAa,QACnBI,MAAO,CACLnB,CAACoB,EAAsBC,MAAO,OAGhCL,EAAA,MAAA,CACEG,MAAO,CACLnB,CAAC,aAAc,KACfA,CAAC,aAAaU,KAAY,OAG5BM,EAAA,MAAA,CAAKG,MAAM,wBACTH,EAAA,MAAA,CACEG,MAAO,CACLnB,CAAC,WAAY,KACbA,CAAC,WAAWU,KAAY,QAG5BM,EAAA,OAAA,CACEG,MAAO,CACLnB,CAAC,cAAe,KAChBA,CAAC,iBAAkB,KACnBA,CAAC,QAAQU,KAAY,MAEvBY,UAAWtC,EAAK0B,MAGpBM,EAAA,MAAA,CAAKG,MAAM,iBACTH,EAAA,MAAA,CACEG,MAAO,CACLnB,CAAC,iBAAkB,KACnBA,CAAC,6BACCa,GAAcjB,KAAKY,iBAGtBG,GACCK,EAAA,gBAAA,CACEG,MAAO,CACLnB,CAAC,eAAgB,KACjBA,CAAC,qBAAsBa,GAAcjB,KAAKY,gBAE5CE,QAAQ,kBAERM,EAAA,IAAA,KAAIL,IAGRK,EAAA,OAAA,CAAMO,KAAK,WACTP,EAAA,gBAAA,CAAeN,QAAQ,QAAQE,KAGlCY,EAAW5B,KAAKQ,GAAI,WACnBY,EAAA,MAAA,CAAKG,MAAM,0BACTH,EAAA,OAAA,CAAMO,KAAK,aAIjBP,EAAA,MAAA,CAAKG,MAAM,0BACRL,GACCE,EAAA,YAAA,CACEG,MAAO,CACLnB,CAAC,iBAAkB,KACnBA,CAAC,gBAAiB,MAEpBsB,UAAWG,EACXC,QAAS9B,KAAKC,cACda,QAAQ,OACRiB,WAAYP,EAAsBC,KAClCO,MAAM","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 56px;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-architectural-40);\n}\n\n.container-info {\n background-color: var(--ic-status-info-background);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-background);\n}\n\n.container-error {\n background-color: var(--ic-status-error-background);\n}\n\n.container-success {\n background-color: var(--ic-status-success-background);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-architectural-500);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning-mid);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 22px;\n margin-left: 18px;\n}\n\n.icon-neutral > svg {\n fill: var(--ic-architectural-500);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning-mid);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 10px;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n font-size: 0;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -6px;\n padding: 6px;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n font-size: 1px;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: 14px;\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n} from \"@stencil/core\";\nimport neutralIcon from \"../../assets/neutral-icon.svg\";\nimport infoIcon from \"../../assets/info-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { IcAlertVariants } from \"./ic-alert.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst icon = {\n neutral: neutralIcon,\n info: infoIcon,\n warning: warningIcon,\n error: errorIcon,\n success: successIcon,\n};\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the left of the message.\n */\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n @Element() el: HTMLIcAlertElement;\n\n /**\n * Set which variant of the alert will be rendered\n */\n @Prop() variant?: IcAlertVariants = \"neutral\";\n /**\n * Optional title to display at the start of the alert\n */\n @Prop() heading?: string = \"\";\n /**\n * Main body message of the alert\n */\n @Prop() message?: string;\n /**\n * Set whether the title and message appear inline or above and below\n */\n @Prop() titleAbove?: boolean = false;\n /**\n * Set whether the alert has a close icon at the end to dismiss it\n */\n @Prop() dismissible?: boolean = false;\n /**\n * Set whether the alert has the 'alert' aria role and will be announced to screen readers\n */\n @Prop() announced?: boolean = true;\n\n @State() visible: boolean = true;\n\n @State() alertTitleWrap: boolean = false;\n\n @Listen(\"dismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n /**\n * Is emitted when the user dismisses the alert.\n */\n @Event() dismiss: EventEmitter<void>;\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced && \"alert\"}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={icon[variant]}\n ></span>\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove || this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"]}

package/dist/core/{p-af6a41bd.entry.js → p-5e261268.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as s,g as r}from"./p-f9370be6.js";import{z as l,c as a,a as o}from"./p-f228c232.js";import{I as e}from"./p-6f57b13c.js";const c=`<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.0876 1.175L5.9126 0L0.912598 5L5.9126 10L7.0876 8.825L3.27093 5L7.0876 1.175Z"/>\n</svg>`;const n=`<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">\n<path d="M2.0876 0L0.912598 1.175L4.72926 5L0.912598 8.825L2.0876 10L7.0876 5L2.0876 0Z"/>\n</svg>\n`;const h=":host{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);--tab-scroll-focus:var(--ic-border-focus);--tab-scroll-fill:var(--ic-action-default);--tab-scroll-disabled-fill:var(--ic-architectural-300);--tab-scroll-hover:var(--ic-action-default-bg-hover);--tab-scroll-active:var(--ic-action-default-bg-active);display:block;margin-bottom:var(--ic-space-md);margin-left:calc(-1 * var(--ic-space-xs))}:host(.light){--splitter-color:var(--ic-architectural-white);--tab-scroll-focus:var(--ic-border-focus-dark);--tab-scroll-fill:var(--ic-action-light);--tab-scroll-disabled-fill:var(--ic-architectural-500);--tab-scroll-hover:var(--ic-action-dark-bg-hover);--tab-scroll-active:var(--ic-action-dark-bg-active)}:host([inline]){margin-bottom:0}.tabs-container{display:flex;flex-direction:row;overflow-y:hidden;overflow-x:scroll;height:100%;align-items:center;padding:var(--ic-space-xs);scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;margin:calc(-1 * var(--ic-space-xs)) 0}.tabs-container::-webkit-scrollbar{display:none}.ic-tab-group-container{display:flex;align-items:center}:host(.light.ic-tab-group-not-inline){--border-bottom-color:var(--ic-architectural-white)}.scroll-container{display:flex}.scroll-container.hidden{display:none}.scroll-container:first-child{margin-left:var(--ic-space-xs)}.scroll-arrow{display:flex;width:36px;height:36px;margin:var(--ic-space-xxs) var(--ic-space-xxxs);align-items:center;justify-content:center;fill:var(--tab-scroll-fill);cursor:pointer}.scroll-arrow:focus{outline:var(--ic-hc-focus-outline)}.scroll-arrow:hover{background-color:var(--tab-scroll-hover)}.scroll-arrow:active{background-color:var(--tab-scroll-active)}.scroll-container.disabled .scroll-arrow{fill:var(--tab-scroll-disabled-fill);cursor:default}.scroll-container.disabled .scroll-arrow:hover,.scroll-container.disabled .scroll-arrow:active,.scroll-container.disabled .scroll-arrow:focus{background-color:unset;box-shadow:none}.scroll-container.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:1px;margin-top:10px;background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:var(--ic-space-xxxs)}.scroll-splitter-right{margin-right:var(--ic-space-xxxs)}.scroll-container.disabled .scroll-splitter-left,.scroll-container.disabled .scroll-splitter-right{display:none}.ic-tab-splitter{display:block;background-color:var(--border-bottom-color);height:1px;right:0;left:0;margin-left:var(--ic-space-xs)}.ic-tab-splitter.hidden{height:0}";const d=200;const b=class{constructor(i){t(this,i);this.buttonStateSet=false;this.resizeObserverCallback=()=>{if(this.tabGroupEl===null||this.tabGroupEl===undefined){this.tabGroupEl=this.host.shadowRoot.querySelector(".tabs-container")}this.tabOverflow=l(this.tabGroupEl);if(this.tabOverflow){this.lastTabVisible=this.tabGroupEl.offsetWidth+this.tabGroupEl.scrollLeft>=this.tabGroupEl.scrollWidth}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.splitterEl)};this.scrollLeft=()=>{this.scrollTabIntoView(this.getCurrentLeftTab()-1)};this.scrollRight=()=>{this.scrollTabIntoView(this.getCurrentLeftTab()+1)};this.longScrollRight=()=>{this.scrollRight();this.scrollDelay=window.setTimeout(this.longScrollRight,d)};this.longScrollLeft=()=>{this.scrollLeft();this.scrollDelay=window.setTimeout(this.longScrollLeft,d)};this.leftArrowMouseDownHandler=()=>{this.scrollDelay=window.setTimeout(this.longScrollLeft,d)};this.rightArrowMouseDownHandler=()=>{this.scrollDelay=window.setTimeout(this.longScrollRight,d)};this.arrowMouseUpHandler=()=>{window.clearTimeout(this.scrollDelay)};this.getCurrentLeftTab=()=>{const t=this.tabOffsets.findIndex((t=>t>this.tabGroupEl.scrollLeft));return t<0?0:t};this.scrollHandler=()=>{window.clearTimeout(this.isScrolling);this.isScrolling=window.setTimeout(this.scrollStopped,50)};this.scrollStopped=()=>{if(this.buttonStateSet===false){this.firstTabVisible=this.tabGroupEl.scrollLeft===0;this.lastTabVisible=this.tabGroupEl.offsetWidth+this.tabGroupEl.scrollLeft>=this.tabGroupEl.scrollWidth}this.buttonStateSet=false};this.contextId="default";this.inline=false;this.label=undefined;this.appearance="dark";this.firstTabVisible=true;this.lastTabVisible=false;this.tabOverflow=false}async scrollTabIntoView(t){this.firstTabVisible=t<=0;const i=t<=0?0:this.tabOffsets[t-1];this.lastTabVisible=this.tabGroupEl.offsetWidth+i>=this.tabGroupEl.scrollWidth;this.buttonStateSet=true;this.tabGroupEl.scrollLeft=i}tabFocusHandler(t){if(this.tabOverflow){this.scrollTabIntoView(t.detail.position)}}componentDidLoad(){this.tabs=Array.from(this.host.querySelectorAll("ic-tab"));let t=0;this.tabOffsets=this.tabs.map((i=>{t+=i.offsetWidth;return t}));a(this.runResizeObserver);o([{prop:this.label,propName:"label"}],"Tab List")}disconnectedCallback(){this.resizeObserver.disconnect()}render(){const{inline:t,appearance:r,label:l,firstTabVisible:a,lastTabVisible:o,tabOverflow:h}=this;return i(s,{role:"tablist","aria-label":l,class:{["light"]:r===e.Light,["ic-tab-group-not-inline"]:!t}},i("div",{class:"ic-tab-group-container"},this.tabOverflow&&i("div",{"aria-hidden":"true",id:"scroll-container-left",class:{["scroll-container"]:true,["hidden"]:!h,["disabled"]:a}},i("ic-tooltip",{placement:"bottom-start",label:"Scroll left",target:"left-arrow"},i("span",{id:"left-arrow",class:"scroll-arrow",innerHTML:c,onClick:this.scrollLeft,onMouseDown:this.leftArrowMouseDownHandler,onMouseUp:this.arrowMouseUpHandler})),i("span",{class:"scroll-splitter-left"})),i("div",{class:"tabs-container",ref:t=>this.tabGroupEl=t,onScroll:this.scrollHandler},i("slot",null)),this.tabOverflow&&i("div",{"aria-hidden":"true",id:"scroll-container-right",class:{["scroll-container"]:true,["hidden"]:!h,["disabled"]:o}},i("span",{class:"scroll-splitter-right"}),i("ic-tooltip",{placement:"bottom-start",label:"Scroll right",target:"right-arrow"},i("span",{id:"right-arrow",class:"scroll-arrow",innerHTML:n,onClick:this.scrollRight,onMouseDown:this.rightArrowMouseDownHandler,onMouseUp:this.arrowMouseUpHandler})))),i("div",{"aria-hidden":"true",class:{["ic-tab-splitter"]:true,["hidden"]:t},ref:t=>this.splitterEl=t}))}get host(){return r(this)}};b.style=h;export{b as ic_tab_group};
-//# sourceMappingURL=p-af6a41bd.entry.js.map
+import{r as t,h as i,H as s,g as r}from"./p-f9370be6.js";import{A as l,c as a,a as o}from"./p-23831891.js";import{I as e}from"./p-6f57b13c.js";const c=`<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.0876 1.175L5.9126 0L0.912598 5L5.9126 10L7.0876 8.825L3.27093 5L7.0876 1.175Z"/>\n</svg>`;const n=`<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">\n<path d="M2.0876 0L0.912598 1.175L4.72926 5L0.912598 8.825L2.0876 10L7.0876 5L2.0876 0Z"/>\n</svg>\n`;const h=":host{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);--tab-scroll-focus:var(--ic-border-focus);--tab-scroll-fill:var(--ic-action-default);--tab-scroll-disabled-fill:var(--ic-architectural-300);--tab-scroll-hover:var(--ic-action-default-bg-hover);--tab-scroll-active:var(--ic-action-default-bg-active);display:block;margin-bottom:var(--ic-space-md);margin-left:calc(-1 * var(--ic-space-xs))}:host(.light){--splitter-color:var(--ic-architectural-white);--tab-scroll-focus:var(--ic-border-focus-dark);--tab-scroll-fill:var(--ic-action-light);--tab-scroll-disabled-fill:var(--ic-architectural-500);--tab-scroll-hover:var(--ic-action-dark-bg-hover);--tab-scroll-active:var(--ic-action-dark-bg-active)}:host([inline]){margin-bottom:0}.tabs-container{display:flex;flex-direction:row;overflow-y:hidden;overflow-x:scroll;height:100%;align-items:center;padding:var(--ic-space-xs);scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;margin:calc(-1 * var(--ic-space-xs)) 0}.tabs-container::-webkit-scrollbar{display:none}.ic-tab-group-container{display:flex;align-items:center}:host(.light.ic-tab-group-not-inline){--border-bottom-color:var(--ic-architectural-white)}.scroll-container{display:flex}.scroll-container.hidden{display:none}.scroll-container:first-child{margin-left:var(--ic-space-xs)}.scroll-arrow{display:flex;width:36px;height:36px;margin:var(--ic-space-xxs) var(--ic-space-xxxs);align-items:center;justify-content:center;fill:var(--tab-scroll-fill);cursor:pointer}.scroll-arrow:focus{outline:var(--ic-hc-focus-outline)}.scroll-arrow:hover{background-color:var(--tab-scroll-hover)}.scroll-arrow:active{background-color:var(--tab-scroll-active)}.scroll-container.disabled .scroll-arrow{fill:var(--tab-scroll-disabled-fill);cursor:default}.scroll-container.disabled .scroll-arrow:hover,.scroll-container.disabled .scroll-arrow:active,.scroll-container.disabled .scroll-arrow:focus{background-color:unset;box-shadow:none}.scroll-container.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:1px;margin-top:10px;background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:var(--ic-space-xxxs)}.scroll-splitter-right{margin-right:var(--ic-space-xxxs)}.scroll-container.disabled .scroll-splitter-left,.scroll-container.disabled .scroll-splitter-right{display:none}.ic-tab-splitter{display:block;background-color:var(--border-bottom-color);height:1px;right:0;left:0;margin-left:var(--ic-space-xs)}.ic-tab-splitter.hidden{height:0}";const d=200;const b=class{constructor(i){t(this,i);this.buttonStateSet=false;this.resizeObserverCallback=()=>{if(this.tabGroupEl===null||this.tabGroupEl===undefined){this.tabGroupEl=this.host.shadowRoot.querySelector(".tabs-container")}this.tabOverflow=l(this.tabGroupEl);if(this.tabOverflow){this.lastTabVisible=this.tabGroupEl.offsetWidth+this.tabGroupEl.scrollLeft>=this.tabGroupEl.scrollWidth}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.splitterEl)};this.scrollLeft=()=>{this.scrollTabIntoView(this.getCurrentLeftTab()-1)};this.scrollRight=()=>{this.scrollTabIntoView(this.getCurrentLeftTab()+1)};this.longScrollRight=()=>{this.scrollRight();this.scrollDelay=window.setTimeout(this.longScrollRight,d)};this.longScrollLeft=()=>{this.scrollLeft();this.scrollDelay=window.setTimeout(this.longScrollLeft,d)};this.leftArrowMouseDownHandler=()=>{this.scrollDelay=window.setTimeout(this.longScrollLeft,d)};this.rightArrowMouseDownHandler=()=>{this.scrollDelay=window.setTimeout(this.longScrollRight,d)};this.arrowMouseUpHandler=()=>{window.clearTimeout(this.scrollDelay)};this.getCurrentLeftTab=()=>{const t=this.tabOffsets.findIndex((t=>t>this.tabGroupEl.scrollLeft));return t<0?0:t};this.scrollHandler=()=>{window.clearTimeout(this.isScrolling);this.isScrolling=window.setTimeout(this.scrollStopped,50)};this.scrollStopped=()=>{if(this.buttonStateSet===false){this.firstTabVisible=this.tabGroupEl.scrollLeft===0;this.lastTabVisible=this.tabGroupEl.offsetWidth+this.tabGroupEl.scrollLeft>=this.tabGroupEl.scrollWidth}this.buttonStateSet=false};this.contextId="default";this.inline=false;this.label=undefined;this.appearance="dark";this.firstTabVisible=true;this.lastTabVisible=false;this.tabOverflow=false}async scrollTabIntoView(t){this.firstTabVisible=t<=0;const i=t<=0?0:this.tabOffsets[t-1];this.lastTabVisible=this.tabGroupEl.offsetWidth+i>=this.tabGroupEl.scrollWidth;this.buttonStateSet=true;this.tabGroupEl.scrollLeft=i}tabFocusHandler(t){if(this.tabOverflow){this.scrollTabIntoView(t.detail.position)}}componentDidLoad(){this.tabs=Array.from(this.host.querySelectorAll("ic-tab"));let t=0;this.tabOffsets=this.tabs.map((i=>{t+=i.offsetWidth;return t}));a(this.runResizeObserver);o([{prop:this.label,propName:"label"}],"Tab List")}disconnectedCallback(){this.resizeObserver.disconnect()}render(){const{inline:t,appearance:r,label:l,firstTabVisible:a,lastTabVisible:o,tabOverflow:h}=this;return i(s,{role:"tablist","aria-label":l,class:{["light"]:r===e.Light,["ic-tab-group-not-inline"]:!t}},i("div",{class:"ic-tab-group-container"},this.tabOverflow&&i("div",{"aria-hidden":"true",id:"scroll-container-left",class:{["scroll-container"]:true,["hidden"]:!h,["disabled"]:a}},i("ic-tooltip",{placement:"bottom-start",label:"Scroll left",target:"left-arrow"},i("span",{id:"left-arrow",class:"scroll-arrow",innerHTML:c,onClick:this.scrollLeft,onMouseDown:this.leftArrowMouseDownHandler,onMouseUp:this.arrowMouseUpHandler})),i("span",{class:"scroll-splitter-left"})),i("div",{class:"tabs-container",ref:t=>this.tabGroupEl=t,onScroll:this.scrollHandler},i("slot",null)),this.tabOverflow&&i("div",{"aria-hidden":"true",id:"scroll-container-right",class:{["scroll-container"]:true,["hidden"]:!h,["disabled"]:o}},i("span",{class:"scroll-splitter-right"}),i("ic-tooltip",{placement:"bottom-start",label:"Scroll right",target:"right-arrow"},i("span",{id:"right-arrow",class:"scroll-arrow",innerHTML:n,onClick:this.scrollRight,onMouseDown:this.rightArrowMouseDownHandler,onMouseUp:this.arrowMouseUpHandler})))),i("div",{"aria-hidden":"true",class:{["ic-tab-splitter"]:true,["hidden"]:t},ref:t=>this.splitterEl=t}))}get host(){return r(this)}};b.style=h;export{b as ic_tab_group};
+//# sourceMappingURL=p-5e261268.entry.js.map

package/dist/core/{p-af6a41bd.entry.js.map → p-5e261268.entry.js.map} RENAMED Viewed

File without changes

package/dist/core/p-60ffb73e.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as i,H as a,g as s}from"./p-f9370be6.js";import{a as o}from"./p-6f57b13c.js";import{w as n,m as r,d as l,a as c,r as h,h as d,e as u,H as p,n as b}from"./p-23831891.js";const f='/! 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}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:6px}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}.fullwidth{position:relative;width:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text)}.exceeded{color:var(--ic-status-error)}.disabled{color:var(--ic-architectural-200)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot="icon"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let m=0;const y=class{constructor(i){t(this,i);this.icKeydown=e(this,"icKeydown",7);this.icInput=e(this,"icInput",7);this.icBlur=e(this,"icBlur",7);this.icFocus=e(this,"icFocus",7);this.icChange=e(this,"icChange",7);this.inheritedAttributes={};this.showLeftIcon=this.hasLeftIconSlot();this.onInput=t=>{this.value=t.target.value;this.icInput.emit({value:this.value})};this.onBlur=t=>{const e=t.target.value;this.icBlur.emit({value:e})};this.onFocus=t=>{const e=t.target.value;this.icFocus.emit({value:e})};this.isTextArea=()=>this.rows>1;this.hasStatus=t=>t!==""&&!this.disabled;this.showStatusText=t=>{if(this.hasStatus(t)&&!(t==o.Success&&this.validationInline)){return true}return false};this.handleFormReset=()=>{this.value=this.initialValue};this.inputId=`ic-text-field-input-${m++}`;this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.placeholder="";this.fullWidth=false;this.hideLabel=false;this.helperText="";this.rows=1;this.resize=false;this.small=false;this.value="";this.maxLength=0;this.validationStatus="";this.validationText="";this.validationInline=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.debounce=0;this.type="text";this.inputmode="text";this.name=this.inputId;this.spellcheck=false;this.ariaActiveDescendant=undefined;this.truncateValue=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.ariaAutocomplete=undefined;this.role=undefined;this.hiddenInput=true;this.numChars=0;this.maxLengthExceeded=false;this.initialValue=this.value}debounceChanged(){this.icChange=n(this.icChange,this.debounce)}watchValueHandler(t){if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}if(this.maxLength>0){this.numChars=t.length;if(t.length>this.maxLength){this.maxLengthExceeded=true}else{this.maxLengthExceeded=false}}this.icChange.emit({value:t})}async setFocus(){if(this.inputEl){this.inputEl.focus()}}handleKeyDown(t){this.icKeydown.emit({event:t});t.cancelBubble=true}hasLeftIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}connectedCallback(){this.debounceChanged()}componentWillLoad(){this.watchValueHandler(this.value);this.inheritedAttributes=r(this.el,[...b,"title","aria-autocomplete","aria-haspopup"]);if(this.readonly){this.maxLengthExceeded=false}l(this.el,this.handleFormReset)}componentDidLoad(){c([{prop:this.label,propName:"label"}],"Text Field")}disconnectedCallback(){h(this.el,this.handleFormReset)}render(){const{inputId:t,name:e,label:s,required:n,small:r,placeholder:l,helperText:c,rows:h,resize:b,disabled:f,value:m,maxLength:y,numChars:g,readonly:v,maxLengthExceeded:x,validationStatus:w,validationText:k,validationInline:z,spellcheck:I,inputmode:F,fullWidth:L,truncateValue:j,hiddenInput:q}=this;const C=v?true:f;const T=f?"":l;const B=x?o.Error:w;const H=x?"Maximum length exceeded":k;const W=v?0:y;const M=x\|\|y===0&&B===o.Error?"assertive":"polite";const S=this.showStatusText(B);const V=this.isTextArea();const D=y>0?t+"-charcount-desc":"";const K=(D+" "+d(t,c!=="",S)).trim();if(this.showLeftIcon){if(!v&&C){this.showLeftIcon=false}}const O=B===o.Error?"true":"false";const $=C&&!v;if(q){u(true,this.el,e,m,C)}return i(a,{class:{["fullwidth"]:L}},i("ic-input-container",{readonly:v,disabled:C},!this.hideLabel&&i("ic-input-label",{for:t,label:s,helperText:c,required:n,disabled:$,readonly:v}),i("ic-input-component-container",{small:r,validationStatus:B,multiLine:V,disabled:C,readonly:v,validationInline:z,fullWidth:L},this.showLeftIcon&&i("span",{class:{["readonly"]:v,["has-value"]:m.length>0},slot:"left-icon"},i("slot",{name:"icon"})),!V&&i("input",Object.assign({id:t,name:e,ref:t=>this.inputEl=t,type:this.type,value:m,class:{["no-left-pad"]:!this.showLeftIcon&&v,["readonly"]:v,["truncate-value"]:j},placeholder:T,required:n,disabled:C,readonly:v,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":s,"aria-describedby":K,"aria-invalid":O,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:I,inputmode:F,role:this.role},this.inheritedAttributes)),V&&i("textarea",Object.assign({id:t,class:{["no-resize"]:b===false\|\|v,["no-left-pad"]:!this.showLeftIcon&&v,["readonly"]:v},name:e,ref:t=>this.inputEl=t,value:m,rows:h,required:n,disabled:C,placeholder:T,readonly:v,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":s,"aria-describedby":K,"aria-invalid":O,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:I,inputmode:F},this.inheritedAttributes)),i("slot",{name:"clear-button"}),i("slot",{name:"search-submit-button"})),i("slot",{name:"menu"}),(!p(w)\|\|!p(k)\|\|W>0)&&i("ic-input-validation",{status:this.hasStatus(B)===false\|\|B===o.Success&&z?"":B,message:S?H:"",ariaLiveMode:M,for:t,fullWidth:L},!v&&W>0&&i("div",{slot:"validation-message-adornment"},i("ic-typography",{variant:"caption",class:{["maxlengthtext"]:true,["exceeded"]:x,["disabled"]:$}},i("span",{"aria-live":"polite",id:`${t}-charcount`,class:"charcount"},g,"/",W),i("span",{hidden:true,id:D},"Field can contain a maximum of ",W," characters."))))))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};y.style=f;export{y as ic_text_field};
2	+ //# sourceMappingURL=p-60ffb73e.entry.js.map

package/dist/core/p-60ffb73e.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"names":["icTextFieldCss","inputIds","TextField","this","inheritedAttributes","showLeftIcon","hasLeftIconSlot","onInput","ev","value","target","icInput","emit","onBlur","icBlur","onFocus","icFocus","isTextArea","rows","hasStatus","status","disabled","showStatusText","IcInformationStatus","Success","validationInline","handleFormReset","initialValue","inputId","undefined","[object Object]","icChange","debounceEvent","debounce","newValue","inputEl","maxLength","numChars","length","maxLengthExceeded","focus","icKeydown","event","cancelBubble","iconEl","el","querySelector","debounceChanged","watchValueHandler","inheritAttributes","IC_INHERITED_ARIA","readonly","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","removeFormResetListener","name","required","small","placeholder","helperText","resize","validationStatus","validationText","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","placeholderText","currentStatus","Error","currentValidationText","maxNumChars","messageAriaLive","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","invalid","disabledText","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","type","aria-label","aria-describedby","aria-invalid","aria-activedescendant","ariaActiveDescendant","aria-expanded","ariaExpanded","aria-owns","ariaOwns","autocomplete","autocapitalize","autoFocus","role","isEmptyString","message","ariaLiveMode","variant","aria-live","hidden"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n /**\n * @prop --input-width: Width of the input field \n */\n display: block;\n}\n\n::placeholder {\n color: var(--ic-color-tertiary-text);\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 6px;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(--ic-architectural-200);\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-color-primary-text);\n}\n\n.fullwidth {\n position: relative;\n width: 100%;\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n resize: none;\n}\n\n.maxlengthtext {\n color: var(--ic-color-secondary-text);\n}\n\n.exceeded {\n color: var(--ic-status-error);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-primary-text);\n}\n\n.charcount {\n margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n input.readonly,\n textarea.readonly {\n color: canvastext;\n }\n\n .has-value ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n @Element() el: HTMLIcTextFieldElement;\n\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private inheritedAttributes: { [k: string]: unknown } = {};\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input\n * @slot menu - an ic-menu component will appear below the input\n */\n\n /**\n * Provide an id for the input\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * Provide a label for the input.\n */\n @Prop() label!: string;\n\n /**\n * Specify if the input requires a value.\n */\n @Prop() required: boolean = false;\n /**\n * Specify whether the input is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Specify whether the input is read only.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Provide a placeholder value to display.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * Specify whether the component fills the full width of the container.\n * If true, this overrides the --input-width css prop.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * Hides the label and applies the required label value as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * Provide helper text to display additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * Specify the number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * Allow resizing of a multiline text area\n */\n @Prop() resize: boolean = false;\n\n /**\n * Specify whether small styling is to be applied to the element.\n */\n @Prop() small: boolean = false;\n\n /**\n * Value of TextField.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n /**\n * Maximum number of characters that can be entered in the field.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * Provide validation state - 'error' | 'warning' | 'success'\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * Provide validation state - 'error' | 'warning' | 'success'\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Show icon in input control - only applies when validationStatus ='success'\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * Whether auto correction should be enabled when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autoFocus = false;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\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`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * @internal Used to identify the active element when focus is on the ic-menu items\n */\n @Prop() ariaActiveDescendant?: string;\n /**\n * @internal This boolean sets an ellipsis at the end of the value if the value is longer than the container\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * @internal Used to stop rendering of hidden form input for form submission;\n */\n @Prop() hiddenInput: boolean = true;\n\n @State() numChars: number = 0;\n @State() maxLengthExceeded: boolean = false;\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n if (this.maxLength > 0) {\n this.numChars = newValue.length;\n if (newValue.length > this.maxLength) {\n this.maxLengthExceeded = true;\n } else {\n this.maxLengthExceeded = false;\n }\n }\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * Sets focus on the native `input`\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.inputEl) {\n this.inputEl.focus();\n }\n }\n\n //stop keydown event bubbling up to storybook\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n ev.cancelBubble = true;\n }\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icBlur.emit({ value: value });\n };\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n private onFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icFocus.emit({ value: value });\n };\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n private isTextArea = (): boolean => {\n return this.rows > 1;\n };\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n return status !== \"\" && !this.disabled;\n };\n\n private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n if (\n this.hasStatus(status) &&\n !(status == IcInformationStatus.Success && this.validationInline)\n ) {\n return true;\n }\n return false;\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n \"aria-autocomplete\",\n \"aria-haspopup\",\n ]);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n validationStatus,\n validationText,\n validationInline,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const placeholderText = disabled ? \"\" : placeholder;\n\n const currentStatus = maxLengthExceeded\n ? IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? \"Maximum length exceeded\"\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n\n const messageAriaLive =\n maxLengthExceeded ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText = this.showStatusText(currentStatus);\n const multiline = this.isTextArea();\n const hiddenCharCountDescId =\n maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n const describedBy = (\n hiddenCharCountDescId +\n \" \" +\n getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n ).trim();\n\n if (this.showLeftIcon) {\n if (!readonly && disabledMode) {\n this.showLeftIcon = false;\n }\n }\n\n const invalid =\n currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n const disabledText = disabledMode && !readonly;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n small={small}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {this.showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline && (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n value={value}\n class={{\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholderText}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n {...this.inheritedAttributes}\n ></input>\n )}\n {multiline && (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholderText}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n <slot name=\"clear-button\"></slot>\n <slot name=\"search-submit-button\"></slot>\n </ic-input-component-container>\n <slot name=\"menu\"></slot>\n {(!isEmptyString(validationStatus) ||\n !isEmptyString(validationText) ||\n maxNumChars > 0) && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline)\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"exceeded\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}