npm - @ukic/web-components - Versions diffs - 3.17.0 → 3.19.0 - Mend

@ukic/web-components 3.17.0 → 3.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

package/dist/components/ic-text-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-text-field.js","mappings":"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","names":[],"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"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /*\n @prop --input-width: Width of the input field\n /\n display: block;\n\n --ic-input-label-helpertext-padding: var(--ic-space-xs);\n --border-color: var(--ic-text-field-border-neutral);\n --border-color-hover: var(--ic-text-field-border-neutral-hover);\n --border-color-pressed: var(--ic-text-field-border-neutral-pressed);\n --border-color-disabled: var(--ic-text-field-border-disabled);\n --border-color-error: var(--ic-text-field-border-error);\n --border-color-error-hover: var(--ic-text-field-border-error-hover);\n --border-color-error-pressed: var(--ic-text-field-border-error-pressed);\n --border-color-success: var(--ic-text-field-border-success);\n --border-color-success-hover: var(--ic-text-field-border-success-hover);\n --border-color-success-pressed: var(--ic-text-field-border-success-pressed);\n --border-color-warning: var(--ic-text-field-border-warning);\n --border-color-warning-hover: var(--ic-text-field-border-warning-hover);\n --border-color-warning-pressed: var(--ic-text-field-border-warning-pressed);\n --ic-input-label-text-color: var(--ic-text-field-label);\n --ic-input-label-helper-text-color: var(--ic-text-field-subtitle);\n --ic-input-validation-status-text-color: var(--ic-text-field-state-text);\n --ic-input-validation-error: var(--ic-text-field-state-icon-error);\n --ic-input-validation-warning-icon-color: var(\n --ic-text-field-state-icon-warning\n );\n --ic-input-validation-success-icon-color: var(\n --ic-text-field-state-icon-success\n );\n --ic-input-component-container-success-icon-inline-color: var(\n --ic-text-field-state-icon-success\n );\n}\n\n:host(.ic-text-field-disabled) {\n --ic-input-label-text-color: var(--ic-text-field-label-disabled);\n --ic-input-label-helper-text-color: var(--ic-text-field-subtitle-disabled);\n --text-field-placeholder-color: var(\n --ic-text-field-text-area-placeholder-text-disabled\n );\n}\n\n:host(.ic-text-field-full-width) {\n width: 100%;\n}\n\n::placeholder {\n color: var(\n --text-field-placeholder-color,\n var(--ic-text-field-placeholder-text)\n );\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n color: var(--text-field-text-color, var(--ic-text-field-text));\n background-color: var(--input-bg-color, var(--ic-text-field-background));\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 caret-color: var(\n --text-field-typing-cursor,\n var(--ic-text-field-typing-cursor)\n );\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(\n --text-field-disabled-text-color,\n var(--ic-text-field-text-disabled)\n );\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-text-field-read-only-input-text-internal);\n background: transparent;\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.char-count-text {\n --ic-typography-color: var(--ic-text-field-character-limit);\n\n padding-right: var(--ic-space-xxxs);\n}\n\n:host(.ic-text-field-disabled) .char-count-text {\n --ic-typography-color: var(--ic-text-field-character-limit-disabled);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-text-field-text-disabled);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-text-field-input-internal-icon);\n}\n\n.char-count {\n margin-right: calc(-1 var(--ic-space-xxxs));\n}\n\n.remaining-char-count-desc {\n position: absolute;\n left: -9999px;\n}\n\n.show-validation {\n margin-top: var(--ic-space-xs);\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 forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n IcThemeMode,\n IcValidationAriaLive,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n removeHiddenInput,\n} from \"../../utils/helpers\";\nimport {\n IC_INHERITED_ARIA,\n IGNORED_KEYBOARD_CHARACTERS,\n} from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldKeydownEventDetail,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/*\n @slot helper-text - Content is set as the helper text for the text field.\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 private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver \| null = null;\n private interval: ReturnType<typeof setInterval>;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersWarning: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n @State() isFocussed: boolean = false;\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 @internal The active element when focus is on the ic-menu items.\n /\n @Prop() ariaActiveDescendant?: string;\n\n /\n @internal Used to identify whether inputting any text triggers more predictions\n /\n @Prop() ariaAutocomplete?: IcAriaAutocompleteTypes;\n\n /\n @internal Used to identify if the slotted menu is rendered\n /\n @Prop() ariaExpanded: string \| null;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwns?: string;\n\n /\n The automatic capitalisation of the text value 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 The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el as HTMLElement);\n }\n\n /\n Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText = \"\";\n\n /\n If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.\n /\n @Prop() hideCharCount = false;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n @internal If `true`, the hidden form input will stop rendering for form submission.\n /\n @Prop() hiddenInput = true;\n\n /\n The ID for the input.\n /\n @Prop() inputId = `ic-text-field-input-${inputIds++}`;\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 label for the input.\n /\n @Prop() label!: string;\n\n /\n The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n /\n @Prop() max?: string \| number;\n\n /\n The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)\n /\n @Prop() maxCharacters = 0;\n\n /\n The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.\n /\n // prettier-ignore\n @Prop() maxCharactersMessage = `Maximum input is ${this.maxCharacters} characters`;\n\n /\n The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.\n /\n @Prop() maxMessage = `Maximum value of ${this.max} exceeded`;\n\n /\n The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n /\n @Prop() min?: string \| number;\n\n /\n The minimum number of characters that can be entered in the field.\n /\n @Prop() minCharacters = 0;\n\n /\n The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.\n /\n // prettier-ignore\n @Prop() minCharactersMessage = `Minimum input is ${this.minCharacters} characters`;\n\n /\n The text to display as the error message when the minimum value (the `min` prop value) has not been met.\n /\n @Prop() minMessage = `Minimum value of ${this.min} not met`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = this.inputId;\n\n /\n The placeholder value to be displayed.\n /\n @Prop() placeholder = \"\";\n\n /\n If `true`, the read only state will be set.\n /\n @Prop({ reflect: true }) readonly = false;\n\n /\n If `true`, the input will require a value.\n /\n @Prop() required = false;\n\n /\n If `true`, the multiline text area will be resizeable.\n /\n @Prop() resize = false;\n\n /\n @internal Used to set the role if not default textbox;\n /\n @Prop() role: string \| null;\n\n /\n The number of rows to transform the text field into a text area with a specific height.\n /\n @Prop() rows = 1;\n\n /\n The size of the text field component.\n /\n @Prop() size: IcSizesNoLarge = \"medium\";\n\n /\n If `true`, the value of the text field will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n /\n @Prop() truncateValue = false;\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /\n The value of the `aria-live` attribute on the validation message. When set to \"default\", the `aria-live` value will be handled automatically, e.g. \"assertive\" for `validation-status=\"error\"`.\n /\n @Prop() validationAriaLive: IcValidationAriaLive = \"default\";\n\n /\n If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n /\n @Prop() validationInline = false;\n\n /\n @internal If `true`, the validation will display inline.\n /\n @Prop() validationInlineInternal = false;\n\n /\n The validation state - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The text to display as the validation message.\n /\n @Prop() validationText: string = \"\";\n\n /\n The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce = 0;\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value = \"\";\n @State() initialValue = this.value;\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n let value;\n\n if (this.maxCharacters > 0) {\n value = newValue.substring(0, this.maxCharacters);\n if (value.length < newValue.length) {\n this.maxCharactersWarning = true;\n }\n this.value = value;\n } else {\n value = newValue;\n }\n\n if (this.inputEl && this.inputEl.value !== value) {\n this.inputEl.value = value;\n }\n\n this.getMaxValueExceeded(value);\n\n this.getMaxCharactersReached(value);\n\n this.icChange.emit({ value });\n }\n\n /\n @internal Emitted when the validationInlineInternal is `true`\n /\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input loses focus.\n /\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input gains focus.\n /\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keydown event occurred.\n /\n @Event() icKeydown: EventEmitter<IcTextFieldKeydownEventDetail>;\n\n /\n Emitted when the textarea variant is scrolled.\n /\n @Event() icScroll: EventEmitter;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el as HTMLElement, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n } else if (this.maxCharacters > 0) {\n this.value = this.value.substring(0, this.maxCharacters);\n }\n\n this.getMaxValueExceeded(this.value);\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(\n this.el as HTMLElement,\n MUTABLE_ATTRIBUTES\n );\n\n if (this.readonly) {\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el as HTMLElement, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el as HTMLElement);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n\n if (this.autofocus && !this.disabled && !this.readonly) {\n this.interval = setInterval(this.checkChildHydration, 50);\n }\n }\n\n private checkChildHydration = () => {\n if (\n this.hideLabel \|\|\n this.el.shadowRoot\n ?.querySelector(\"ic-typography\")\n ?.classList.contains(\"hydrated\")\n ) {\n this.setFocus();\n clearInterval(this.interval);\n }\n };\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({\n event: ev,\n cursorPosition: this.inputEl.selectionStart ?? 0,\n selectionEnd: this.inputEl.selectionEnd ?? 0,\n });\n\n if (!ev.ctrlKey && !IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {\n this.maxCharactersWarning = this.maxCharactersReached;\n }\n }\n\n /\n Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getNumberOfCharacters = (value: string) =>\n value !== null && value !== undefined ? value.length : 0;\n\n private getMaxValueExceeded = (value: string) => {\n this.numChars = this.getNumberOfCharacters(value);\n\n if (this.type === \"number\") {\n this.minValueUnattained = !!value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = this.getNumberOfCharacters(value);\n\n this.maxCharactersReached =\n this.maxCharacters > 0 && this.numChars >= this.maxCharacters;\n\n if (this.maxCharactersWarning && !this.maxCharactersReached) {\n this.maxCharactersWarning = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const target = ev.target as HTMLInputElement;\n target.removeEventListener(\"wheel\", this.onWheel);\n const { value } = target;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 && this.numChars < this.minCharacters;\n this.icBlur.emit({ value });\n this.isFocussed = false;\n };\n\n private onFocus = (ev: Event) => {\n const target = ev.target as HTMLInputElement;\n target.addEventListener(\"wheel\", this.onWheel);\n this.icFocus.emit({ value: target.value });\n this.isFocussed = true;\n };\n\n private onTextAreaScroll = () => {\n this.icScroll.emit();\n };\n\n private onWheel = (ev: WheelEvent) => {\n const target = ev.target as HTMLInputElement;\n if (target.type === \"number\") {\n target.blur();\n setTimeout(() => {\n target.focus();\n }, 0);\n }\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n private showValidationMargin = (): boolean => {\n const maxNumChars = this.readonly ? 0 : this.maxCharacters;\n const emptyString =\n isEmptyString(this.validationStatus) \|\|\n isEmptyString(this.validationText);\n const valueOutsideRange = this.minValueUnattained \|\| this.maxValueExceeded;\n const charsOutsideRange = maxNumChars > 0 \|\| this.minCharactersUnattained;\n return (\n (!emptyString \|\| valueOutsideRange \|\| charsOutsideRange) &&\n !this.validationInlineInternal\n );\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (attributeName && MUTABLE_ATTRIBUTES.includes(attributeName)) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute) {\n this.inheritedAttributes[attributeName] = attribute;\n }\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n placeholder,\n helperText,\n hideCharCount,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n numChars,\n readonly,\n maxCharacters,\n maxCharactersMessage,\n maxCharactersWarning,\n maxCharactersReached,\n maxMessage,\n minCharacters,\n minCharactersMessage,\n minCharactersUnattained,\n minMessage,\n minValueUnattained,\n maxValueExceeded,\n validationAriaLive,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n theme,\n hideLabel,\n type,\n autocapitalize,\n ariaActiveDescendant,\n inheritedAttributes,\n ariaExpanded,\n ariaOwns,\n autocomplete,\n role,\n isFocussed,\n } = this;\n\n const el = this.el as HTMLElement;\n\n const disabledMode = readonly \|\| disabled;\n\n const currentStatus =\n maxValueExceeded \|\|\n minValueUnattained \|\|\n minCharactersUnattained \|\|\n maxCharactersWarning\n ? maxCharactersWarning\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxCharactersWarning\n ? maxCharactersMessage\n : maxValueExceeded\n ? maxMessage\n : minValueUnattained\n ? minMessage\n : minCharactersUnattained\n ? minCharactersMessage\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxCharacters;\n const messageAriaLive =\n validationAriaLive === \"default\"\n ? maxCharactersWarning \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n currentStatus === IcInformationStatus.Error\n ? \"assertive\"\n : \"polite\"\n : validationAriaLive;\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n\n const hiddenCharCountDescId =\n maxCharacters > 0 ? `${inputId}-char-count-desc` : \"\";\n\n const charsRemaining = maxNumChars - numChars;\n const remainingCharCountDescId =\n maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : \"\";\n const remainingCharCountDesc = `${charsRemaining} character${\n charsRemaining === 1 ? \"\" : \"s\"\n } remaining.`;\n\n const describedBy = `${getInputDescribedByText(\n this.el,\n inputId,\n helperText !== \"\",\n showStatusText\n )} ${hiddenCharCountDescId} ${\n numChars > 0 ? remainingCharCountDescId : \"\"\n }`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n hiddenInput\n ? renderHiddenInput(this.el as HTMLElement, value, name, disabledMode)\n : removeHiddenInput(this.el as HTMLElement);\n\n return (\n <Host\n class={{\n \"ic-text-field-full-width\": fullWidth,\n \"ic-text-field-disabled\": disabledMode,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n )}\n\n <ic-input-component-container\n size={size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n readonly,\n \"has-value\": this.getNumberOfCharacters(value) > 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={type}\n min={min}\n max={max}\n value={value}\n class={{\n \"no-left-pad\": !showLeftIcon && readonly,\n readonly,\n \"truncate-value\": truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\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={ariaActiveDescendant}\n aria-expanded={ariaExpanded}\n aria-owns={ariaOwns}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={role \|\| undefined}\n maxlength={maxCharactersReached ? maxCharacters : undefined}\n minlength={minCharactersUnattained ? minCharacters : undefined}\n {...inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n \"no-resize\": resize === false \|\| !!readonly,\n \"no-left-pad\": !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={placeholder}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onScroll={this.onTextAreaScroll}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n spellcheck={spellcheck}\n inputmode={inputmode}\n maxlength={maxCharactersReached ? maxCharacters : undefined}\n minlength={minCharactersUnattained ? minCharacters : undefined}\n {...inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(el, \"menu\") && <slot name=\"menu\"></slot>}\n <ic-input-validation\n class={{ \"show-validation\": this.showValidationMargin() }}\n status={\n this.hasStatus(currentStatus) === false \|\|\n (currentStatus === IcInformationStatus.Success &&\n validationInline) \|\|\n validationInlineInternal\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 {!hideCharCount && (\n <ic-typography variant=\"caption\" class=\"char-count-text\">\n <span class=\"char-count\">\n {numChars}/{maxNumChars}\n </span>\n </ic-typography>\n )}\n <span\n class=\"remaining-char-count-desc\"\n aria-live=\"polite\"\n hidden={!isFocussed}\n id={remainingCharCountDescId}\n >\n {remainingCharCountDesc}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </div>\n )}\n </ic-input-validation>\n </ic-input-container>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-text-field.js","mappings":"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","names":[],"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"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /*\n @prop --input-width: Width of the input field\n /\n display: block;\n\n --ic-input-label-helpertext-padding: var(--ic-space-xs);\n --border-color: var(--ic-text-field-border-neutral);\n --border-color-hover: var(--ic-text-field-border-neutral-hover);\n --border-color-pressed: var(--ic-text-field-border-neutral-pressed);\n --border-color-disabled: var(--ic-text-field-border-disabled);\n --border-color-error: var(--ic-text-field-border-error);\n --border-color-error-hover: var(--ic-text-field-border-error-hover);\n --border-color-error-pressed: var(--ic-text-field-border-error-pressed);\n --border-color-success: var(--ic-text-field-border-success);\n --border-color-success-hover: var(--ic-text-field-border-success-hover);\n --border-color-success-pressed: var(--ic-text-field-border-success-pressed);\n --border-color-warning: var(--ic-text-field-border-warning);\n --border-color-warning-hover: var(--ic-text-field-border-warning-hover);\n --border-color-warning-pressed: var(--ic-text-field-border-warning-pressed);\n --ic-input-label-text-color: var(--ic-text-field-label);\n --ic-input-label-helper-text-color: var(--ic-text-field-subtitle);\n --ic-input-validation-status-text-color: var(--ic-text-field-state-text);\n --ic-input-validation-error: var(--ic-text-field-state-icon-error);\n --ic-input-validation-warning-icon-color: var(\n --ic-text-field-state-icon-warning\n );\n --ic-input-validation-success-icon-color: var(\n --ic-text-field-state-icon-success\n );\n --ic-input-component-container-success-icon-inline-color: var(\n --ic-text-field-state-icon-success\n );\n}\n\n:host(.ic-text-field-disabled) {\n --ic-input-label-text-color: var(--ic-text-field-label-disabled);\n --ic-input-label-helper-text-color: var(--ic-text-field-subtitle-disabled);\n --text-field-placeholder-color: var(\n --ic-text-field-text-area-placeholder-text-disabled\n );\n}\n\n:host(.ic-text-field-full-width) {\n width: 100%;\n}\n\n::placeholder {\n color: var(\n --text-field-placeholder-color,\n var(--ic-text-field-placeholder-text)\n );\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n color: var(--text-field-text-color, var(--ic-text-field-text));\n background-color: var(--input-bg-color, var(--ic-text-field-background));\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 caret-color: var(\n --text-field-typing-cursor,\n var(--ic-text-field-typing-cursor)\n );\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(\n --text-field-disabled-text-color,\n var(--ic-text-field-text-disabled)\n );\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-text-field-read-only-input-text-internal);\n background: transparent;\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.char-count-text {\n --ic-typography-color: var(--ic-text-field-character-limit);\n\n padding-right: var(--ic-space-xxxs);\n}\n\n:host(.ic-text-field-disabled) .char-count-text {\n --ic-typography-color: var(--ic-text-field-character-limit-disabled);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-text-field-text-disabled);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-text-field-input-internal-icon);\n}\n\n.char-count {\n margin-right: calc(-1 var(--ic-space-xxxs));\n}\n\n.remaining-char-count-desc {\n position: absolute;\n left: -9999px;\n}\n\n.show-validation {\n margin-top: var(--ic-space-xs);\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 forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n IcThemeMode,\n IcValidationAriaLive,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n removeHiddenInput,\n} from \"../../utils/helpers\";\nimport {\n IC_INHERITED_ARIA,\n IGNORED_KEYBOARD_CHARACTERS,\n} from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldKeydownEventDetail,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/*\n @slot helper-text - Content is set as the helper text for the text field.\n * @slot validation-text - Content is set as validation text for the text field.\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 private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver \| null = null;\n private interval: ReturnType<typeof setInterval>;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersWarning: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n @State() isFocussed: boolean = false;\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 @internal The active element when focus is on the ic-menu items.\n /\n @Prop() ariaActiveDescendant?: string;\n\n /\n @internal Used to identify whether inputting any text triggers more predictions\n /\n @Prop() ariaAutocomplete?: IcAriaAutocompleteTypes;\n\n /\n @internal Used to identify if the slotted menu is rendered\n /\n @Prop() ariaExpanded: string \| null;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwns?: string;\n\n /\n The automatic capitalisation of the text value 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 The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el as HTMLElement);\n }\n\n /\n Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText = \"\";\n\n /\n If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.\n /\n @Prop() hideCharCount = false;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n @internal If `true`, the hidden form input will stop rendering for form submission.\n /\n @Prop() hiddenInput = true;\n\n /\n The ID for the input.\n /\n @Prop() inputId = `ic-text-field-input-${inputIds++}`;\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 label for the input.\n /\n @Prop() label!: string;\n\n /\n The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n /\n @Prop() max?: string \| number;\n\n /\n The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)\n /\n @Prop() maxCharacters = 0;\n\n /\n The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.\n /\n // prettier-ignore\n @Prop() maxCharactersMessage = `Maximum input is ${this.maxCharacters} characters`;\n\n /\n The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.\n /\n @Prop() maxMessage = `Maximum value of ${this.max} exceeded`;\n\n /\n The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n /\n @Prop() min?: string \| number;\n\n /\n The minimum number of characters that can be entered in the field.\n /\n @Prop() minCharacters = 0;\n\n /\n The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.\n /\n // prettier-ignore\n @Prop() minCharactersMessage = `Minimum input is ${this.minCharacters} characters`;\n\n /\n The text to display as the error message when the minimum value (the `min` prop value) has not been met.\n /\n @Prop() minMessage = `Minimum value of ${this.min} not met`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = this.inputId;\n\n /\n The placeholder value to be displayed.\n /\n @Prop() placeholder = \"\";\n\n /\n If `true`, the read only state will be set.\n /\n @Prop({ reflect: true }) readonly = false;\n\n /\n If `true`, the input will require a value.\n /\n @Prop() required = false;\n\n /\n If `true`, the multiline text area will be resizeable.\n /\n @Prop() resize = false;\n\n /\n @internal Used to set the role if not default textbox;\n /\n @Prop() role: string \| null;\n\n /\n The number of rows to transform the text field into a text area with a specific height.\n /\n @Prop() rows = 1;\n\n /\n The size of the text field component.\n /\n @Prop() size: IcSizesNoLarge = \"medium\";\n\n /\n If `true`, the value of the text field will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n /\n @Prop() truncateValue = false;\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /\n The value of the `aria-live` attribute on the validation message. When set to \"default\", the `aria-live` value will be handled automatically, e.g. \"assertive\" for `validation-status=\"error\"`.\n /\n @Prop() validationAriaLive: IcValidationAriaLive = \"default\";\n\n /\n If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n /\n @Prop() validationInline = false;\n\n /\n @internal If `true`, the validation will display inline.\n /\n @Prop() validationInlineInternal = false;\n\n /\n The validation state - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The text to display as the validation message.\n /\n @Prop() validationText: string = \"\";\n\n /\n The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce = 0;\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value = \"\";\n @State() initialValue = this.value;\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n let value;\n\n if (this.maxCharacters > 0) {\n value = newValue.substring(0, this.maxCharacters);\n if (value.length < newValue.length) {\n this.maxCharactersWarning = true;\n }\n this.value = value;\n } else {\n value = newValue;\n }\n\n if (this.inputEl && this.inputEl.value !== value) {\n this.inputEl.value = value;\n }\n\n this.getMaxValueExceeded(value);\n\n this.getMaxCharactersReached(value);\n\n this.icChange.emit({ value });\n }\n\n /\n @internal Emitted when the validationInlineInternal is `true`\n /\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input loses focus.\n /\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input gains focus.\n /\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keydown event occurred.\n /\n @Event() icKeydown: EventEmitter<IcTextFieldKeydownEventDetail>;\n\n /\n Emitted when the textarea variant is scrolled.\n /\n @Event() icScroll: EventEmitter;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el as HTMLElement, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n } else if (this.maxCharacters > 0) {\n this.value = this.value.substring(0, this.maxCharacters);\n }\n\n this.getMaxValueExceeded(this.value);\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(\n this.el as HTMLElement,\n MUTABLE_ATTRIBUTES\n );\n\n if (this.readonly) {\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el as HTMLElement, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el as HTMLElement);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n\n if (this.autofocus && !this.disabled && !this.readonly) {\n this.interval = setInterval(this.checkChildHydration, 50);\n }\n }\n\n private checkChildHydration = () => {\n if (\n this.hideLabel \|\|\n this.el.shadowRoot\n ?.querySelector(\"ic-typography\")\n ?.classList.contains(\"hydrated\")\n ) {\n this.setFocus();\n clearInterval(this.interval);\n }\n };\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({\n event: ev,\n cursorPosition: this.inputEl.selectionStart ?? 0,\n selectionEnd: this.inputEl.selectionEnd ?? 0,\n });\n\n if (!ev.ctrlKey && !IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {\n this.maxCharactersWarning = this.maxCharactersReached;\n }\n }\n\n /\n Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getNumberOfCharacters = (value: string) =>\n value !== null && value !== undefined ? value.length : 0;\n\n private getMaxValueExceeded = (value: string) => {\n this.numChars = this.getNumberOfCharacters(value);\n\n if (this.type === \"number\") {\n this.minValueUnattained = !!value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = this.getNumberOfCharacters(value);\n\n this.maxCharactersReached =\n this.maxCharacters > 0 && this.numChars >= this.maxCharacters;\n\n if (this.maxCharactersWarning && !this.maxCharactersReached) {\n this.maxCharactersWarning = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const target = ev.target as HTMLInputElement;\n target.removeEventListener(\"wheel\", this.onWheel);\n const { value } = target;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 && this.numChars < this.minCharacters;\n this.icBlur.emit({ value });\n this.isFocussed = false;\n };\n\n private onFocus = (ev: Event) => {\n const target = ev.target as HTMLInputElement;\n target.addEventListener(\"wheel\", this.onWheel);\n this.icFocus.emit({ value: target.value });\n this.isFocussed = true;\n };\n\n private onTextAreaScroll = () => {\n this.icScroll.emit();\n };\n\n private onWheel = (ev: WheelEvent) => {\n const target = ev.target as HTMLInputElement;\n if (target.type === \"number\") {\n target.blur();\n setTimeout(() => {\n target.focus();\n }, 0);\n }\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n private showValidationMargin = (): boolean => {\n const maxNumChars = this.readonly ? 0 : this.maxCharacters;\n const emptyString =\n isEmptyString(this.validationStatus) \|\|\n isEmptyString(this.validationText);\n const valueOutsideRange = this.minValueUnattained \|\| this.maxValueExceeded;\n const charsOutsideRange = maxNumChars > 0 \|\| this.minCharactersUnattained;\n return (\n (!emptyString \|\| valueOutsideRange \|\| charsOutsideRange) &&\n !this.validationInlineInternal\n );\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (attributeName && MUTABLE_ATTRIBUTES.includes(attributeName)) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute) {\n this.inheritedAttributes[attributeName] = attribute;\n }\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n placeholder,\n helperText,\n hideCharCount,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n numChars,\n readonly,\n maxCharacters,\n maxCharactersMessage,\n maxCharactersWarning,\n maxCharactersReached,\n maxMessage,\n minCharacters,\n minCharactersMessage,\n minCharactersUnattained,\n minMessage,\n minValueUnattained,\n maxValueExceeded,\n validationAriaLive,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n theme,\n hideLabel,\n type,\n autocapitalize,\n ariaActiveDescendant,\n inheritedAttributes,\n ariaExpanded,\n ariaOwns,\n autocomplete,\n role,\n isFocussed,\n } = this;\n\n const el = this.el as HTMLElement;\n\n const disabledMode = readonly \|\| disabled;\n\n const currentStatus =\n maxValueExceeded \|\|\n minValueUnattained \|\|\n minCharactersUnattained \|\|\n maxCharactersWarning\n ? maxCharactersWarning\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxCharactersWarning\n ? maxCharactersMessage\n : maxValueExceeded\n ? maxMessage\n : minValueUnattained\n ? minMessage\n : minCharactersUnattained\n ? minCharactersMessage\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxCharacters;\n const messageAriaLive =\n validationAriaLive === \"default\"\n ? maxCharactersWarning \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n currentStatus === IcInformationStatus.Error\n ? \"assertive\"\n : \"polite\"\n : validationAriaLive;\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n\n const hiddenCharCountDescId =\n maxCharacters > 0 ? `${inputId}-char-count-desc` : \"\";\n\n const charsRemaining = maxNumChars - numChars;\n const remainingCharCountDescId =\n maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : \"\";\n const remainingCharCountDesc = `${charsRemaining} character${\n charsRemaining === 1 ? \"\" : \"s\"\n } remaining.`;\n\n const describedBy = `${getInputDescribedByText(\n this.el,\n inputId,\n helperText !== \"\",\n showStatusText\n )} ${hiddenCharCountDescId} ${\n numChars > 0 ? remainingCharCountDescId : \"\"\n }`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n hiddenInput\n ? renderHiddenInput(this.el as HTMLElement, value, name, disabledMode)\n : removeHiddenInput(this.el as HTMLElement);\n\n return (\n <Host\n class={{\n \"ic-text-field-full-width\": fullWidth,\n \"ic-text-field-disabled\": disabledMode,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n )}\n\n <ic-input-component-container\n size={size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n readonly,\n \"has-value\": this.getNumberOfCharacters(value) > 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={type}\n min={min}\n max={max}\n value={value}\n class={{\n \"no-left-pad\": !showLeftIcon && readonly,\n readonly,\n \"truncate-value\": truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\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={ariaActiveDescendant}\n aria-expanded={ariaExpanded}\n aria-owns={ariaOwns}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={role \|\| undefined}\n maxlength={maxCharactersReached ? maxCharacters : undefined}\n minlength={minCharactersUnattained ? minCharacters : undefined}\n {...inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n \"no-resize\": resize === false \|\| !!readonly,\n \"no-left-pad\": !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={placeholder}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onScroll={this.onTextAreaScroll}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n spellcheck={spellcheck}\n inputmode={inputmode}\n maxlength={maxCharactersReached ? maxCharacters : undefined}\n minlength={minCharactersUnattained ? minCharacters : undefined}\n {...inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(el, \"menu\") && <slot name=\"menu\"></slot>}\n <ic-input-validation\n class={{ \"show-validation\": this.showValidationMargin() }}\n status={\n this.hasStatus(currentStatus) === false \|\|\n (currentStatus === IcInformationStatus.Success &&\n validationInline) \|\|\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {isSlotUsed(el, \"validation-text\") && (\n <slot name=\"validation-text\" slot=\"validation-message\"></slot>\n )}\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n {!hideCharCount && (\n <ic-typography variant=\"caption\" class=\"char-count-text\">\n <span class=\"char-count\">\n {numChars}/{maxNumChars}\n </span>\n </ic-typography>\n )}\n <span\n class=\"remaining-char-count-desc\"\n aria-live=\"polite\"\n hidden={!isFocussed}\n id={remainingCharCountDescId}\n >\n {remainingCharCountDesc}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </div>\n )}\n </ic-input-validation>\n </ic-input-container>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-theme.js CHANGED Viewed

@@ -69,7 +69,7 @@ const Theme = /*@__PURE__*/ proxyCustomElement(class Theme extends HTMLElement {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: '603b695aae6f29ef4f3d89d4e1995221b3324753', class: themeClass }, h("slot", { key: '0b4c3bd3f4b078775ff13677feb3f0fbc080d810' })));
+        return (h(Host, { key: 'ee89cdd36cb4cb7e0589dfea2dd5a60b5de40041', class: themeClass }, h("slot", { key: 'e7803bf5fc0974bfcf9a2a52cb5870254453a1bd' })));
     }
     static get watchers() { return {
         "brandColor": ["watchBrandColorPropHandler"],

package/dist/components/ic-toast-region.js CHANGED Viewed

@@ -43,7 +43,7 @@ const ToastRegion = /*@__PURE__*/ proxyCustomElement(class ToastRegion extends H
         }
     }
     render() {
-        return h("slot", { key: 'fbb8173202304d09e434a726e85fad986cb79a9f' });
+        return h("slot", { key: '5f8c46d718f868942c5b46b431b2cee136e215b4' });
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toast.js CHANGED Viewed

@@ -214,20 +214,20 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, theme, } = this;
-        return (h(Host, { key: '9934a16e3f339bec971138aec7d46092216d5554', class: {
+        return (h(Host, { key: '81a4c0dc1f855356533c93cdbf55445eacf0a91b', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-toast-hidden"]: !visible,
                 [`ic-toast-variant-${variant}`]: variant !== undefined,
-            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '97a03d41017adf58f826e42291906b3225ab091c', class: {
+            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '02f41e1e898f25542ea68b91997bdcb241e901f0', class: {
                 ["container"]: true,
                 [`container-${variant}`]: variant !== undefined,
-            } }, variant && visible && (h("div", { key: '289b4544bee27fd02b20deae22b5bbb822844c9e', class: "toast-icon-container" }, h("div", { key: '03dae21944b95c1d96e2a6b2480b0c20e12ccbd7', class: {
+            } }, variant && visible && (h("div", { key: 'd7ebb7c524c6b81c1360afe78efa0e040459367b', class: "toast-icon-container" }, h("div", { key: '7ce48b10412174ca212ed6454b6f29025b7b042a', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '6191a3f5c39adfa8c5ab4ca5c9e35fd214e00fa2', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '870be416a0620206a69fe4c9c3e461596e30bde0', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: '1e08fbbfa2ba920c1b90f2eaf35aa801830d47b0', class: "toast-text" }, h("ic-typography", { key: 'ebc61cb12c3bdd05511ae567d09f5504ad010c47', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '48ffe5377a09237ac490c8d4a62e962979ce6dc0', variant: "body", class: "toast-message" }, visible && h("p", { key: '7fbffa0f6e6d30389a9d0e5a3b5e1c279911ed9a' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '83ba75d3d7aa54caf13cc7723defee623103dffc', class: "toast-action-container" }, h("slot", { key: '18367dd5f8acdc33129ead64728abc71a82f7e57', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: 'e00a6fbb9eaec0bcae79308771b809726f54aba9', class: "toast-text" }, h("ic-typography", { key: '72e0b0f6c05e32535c37185cdae6d1e7090bd934', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: 'f689173f4c0c50cf48cd29c416c317d572d50a41', variant: "body", class: "toast-message" }, visible && h("p", { key: '761d3060c3b22eade0ed0143f3567185f135f578' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '182b0e6febcaefe93c4e0d0de4862068b46cc402', class: "toast-action-container" }, h("slot", { key: 'e3cc30f20960eaf5d6280149defb41753661f4ff', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toggle-button-group.js CHANGED Viewed

@@ -251,14 +251,14 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
-        return (h(Host, { key: '5ae12c9f09c65a04cbe1f19850998c0d942327c8', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
+        return (h(Host, { key: 'd166c6c17f134bde60a09a1a2bf80cb1681e4c19', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 "ic-toggle-button-group-hide-outline": !outline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: '02c4f4cd7df626d4032246bdbcd7e07d2167ba52' })));
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '1f20b0c477f837e482fc15bf6632e56c82e5c825' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toggle-button.js CHANGED Viewed

@@ -158,7 +158,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
     render() {
         const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
         const iconVariant = variant === "icon";
-        return (h(Host, { key: '74d882ab9a0ea86b7f1b1eaa74a40ee32fd44800', class: {
+        return (h(Host, { key: 'ac4b415968c1efd66e8955a8c8af1aaa7fb674eb', class: {
                 "ic-toggle-button-checked": checked,
                 "ic-toggle-button-disabled": disabled,
                 "ic-toggle-button-icon": iconVariant,
@@ -168,7 +168,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 "ic-toggle-button-hide-outline": !outline,
                 [`ic-toggle-button-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: '067df9f2c2b9a6f6a21d1a70ddac41b7ae1c9f13', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'e6b0d906bda4695ab9e64da852a99da851001974' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '70b5c83cca0a126ab9eafa9d84327c83e6936ce8', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c43ead3695a0f7a019b3eb0aa4b396f85c0e96eb', name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, h("ic-button", { key: 'b7b11f11ca70640ab0845f38a28d82783aa77bad', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'cd66bf39a1ec558c0752f45b80d7121b84d064f2' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '7507e37283041039dab8b3d40045b9ce6fe0a7b4', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '34c6384a8cbc82f26af11b2ba61ab83a8e18ae03', name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-top-navigation.js CHANGED Viewed

@@ -225,9 +225,12 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation exten
                 [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { key: 'c0a641f02b5c568bcf2e75dd743f42bcacfa3df6', class: "top-navigation" }, h("ic-section-container", { key: 'f31505caa30741b6ae5a7091d01735c6b0b2eb07', aligned: contentAligned, "full-height": true }, h("header", { key: '6ab710016c32c632fefc7827114bba07cff300b1', role: "banner" }, h("div", { key: 'a5b18754252754ecf8f577a113a5e7ffe6214efd', class: "top-panel-container" }, h("div", { key: '473ebdef80637e47a30bf1f2570d9698ef819766', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '8082824e0d859123195ed0cc076858e861ed6f83', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '4e6846d703b47491d7867d993fc91c680bb7f965', class: "app-icon-container" }, h("slot", { key: '5755567877527b6c4dea32d246295f13344a1116', name: "app-icon" }))), isSmallDeviceSize &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '0d1119c72ec12921b9d8ac4c753549b5266a0a77', class: "app-status" }, h("ic-typography", { key: '0159177ab7abdf8ffacbc54fe2a00db8b51f4034', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: 'f83651366bf13750e9c637643290d01d9158cbb3', class: "app-version" }, h("ic-typography", { key: '61d5ddb22f858319246f352ea9db8cf2a380dbb7', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '38c8b6032287ae554d95affd0343d8e1a06e9672', class: "search-menu-container" }, h("div", { key: '177f304cb5d52052c1595d90a313187f5faf7fb8', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: '2573f4f3d0c07b9a8189739e71b1280ee10db8b7', class: "search-bar-container" }, h("slot", { key: '4ec2d201033b3f084a372a781d11a9171b7357db', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '2ed8494ed944a24944535339faaf87ff50bc2666', class: "navigation-tabs" }, h("span", { key: '8d4749293defd91560f3ed064a40b37ef7bef3f2', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '2f026275dcebbb493ab8dd2d337dc07e85fddd47', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: '5299073b2ce1df34d3ab70e0ede5eaf4d122e1ae', monochrome: true, appearance: foregroundColor }, h("ul", { key: '1bf9392b6e25f033f9c4d3ba6efb0d15af07db16', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: 'a8ef11edfbf5535d706b5d6f33af40474303f312', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '8e11a83a983df46afb2805b0ed89451ad85ab247', version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '0d1119c72ec12921b9d8ac4c753549b5266a0a77', class: "app-status" }, h("ic-typography", { key: '0159177ab7abdf8ffacbc54fe2a00db8b51f4034', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: 'f83651366bf13750e9c637643290d01d9158cbb3', class: "app-version" }, h("ic-typography", { key: '61d5ddb22f858319246f352ea9db8cf2a380dbb7', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '38c8b6032287ae554d95affd0343d8e1a06e9672', class: "search-menu-container" }, h("div", { key: '177f304cb5d52052c1595d90a313187f5faf7fb8', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: '2573f4f3d0c07b9a8189739e71b1280ee10db8b7', class: "search-bar-container" }, h("slot", { key: '4ec2d201033b3f084a372a781d11a9171b7357db', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '2ed8494ed944a24944535339faaf87ff50bc2666', class: "navigation-tabs" }, h("span", { key: '8d4749293defd91560f3ed064a40b37ef7bef3f2', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '2f026275dcebbb493ab8dd2d337dc07e85fddd47', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'e33cbc8cd546a0fb563b8bdde108da0c2e80ef66',
+            // eslint-disable-next-line
+            // @ts-ignore
+            monochrome: true, appearance: foregroundColor }, h("ul", { key: '7512b3b85f91075faaaeccd96ebac66e068a849e', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: 'e61779a3dbae4589b88209d8a93f30bda5f039b4', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: 'eb34ba01d4c4bb293e158f2fde8d01450fd74458', version: version, status: status, class: {
                 inline,
-            } }, hasIconButtons && (h("div", { key: '80fc236836f94cfb1ff6c7e7063e223a6c0bec43', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '32a3522be214d86952657179b94d88efc7bcccf2', name: "buttons" }))), h("ul", { key: 'e8ba927b4a442016016deec34bd13501fac2e4f1', slot: "navigation" }, h("slot", { key: '8373dc199994f19287897c6a3b3c7309c07a7388', name: "navigation" }))))));
+            } }, hasIconButtons && (h("div", { key: '996eda82c263a6d31a9ce7ec7aa56f529fe2fae9', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: 'ef23428fa633c02499144aff67d86dd5da8288e5', name: "buttons" }))), h("ul", { key: '1e1fc74c7d084bcc7890cd8449f59112b8b013d9', slot: "navigation" }, h("slot", { key: '7cd944be78c406c52085b9cd8d9f515007716103', name: "navigation" }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-top-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-top-navigation.js","mappings":";;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,09QAA09Q,CAAC;AACt/Q,8BAAe,kBAAkB;;MCmDpB,aAAa;IAL1B;;;;;;;QAMU,eAAU,GAAG,KAAK,CAAC;QACnB,oBAAe,GAAG,KAAK,CAAC;QACxB,mBAAc,GAAG,KAAK,CAAC;QACvB,kBAAa,GAAG,KAAK,CAAC;QACtB,yBAAoB,GAAG,KAAK,CAAC;QAE7B,mBAAc,GAA0B,IAAI,CAAC;QAC7C,cAAS,GAAkC,IAAI,CAAC;QAK/C,eAAU,GAAW,YAAY,CAAC,EAAE,CAAC;QACrC,oBAAe,GAAsB,4BAA4B,EAAE,CAAC;QACpE,0BAAqB,GAAG,KAAK,CAAC;QAC9B,2BAAsB,GAAG,KAAK,CAAC;QAC/B,6BAAwB,GAAG,KAAK,CAAC;QACjC,mBAAc,GAAG,KAAK,CAAC;QACvB,sBAAiB,GAAG,KAAK,CAAC;QAC1B,gBAAW,GAAG,EAAE,CAAC;;;;QAKlB,mBAAc,GAAgB,YAAY,CAAC;;;;;QAK3C,2BAAsB,GAAkB,YAAY,CAAC,CAAC,CAAC;;;;QAIvD,SAAI,GAAG,GAAG,CAAC;;;;QAKX,WAAM,GAAG,KAAK,CAAC;;;;QAKf,kBAAa,GAAG,EAAE,CAAC;;;;QAKnB,WAAM,GAAG,EAAE,CAAC;;;;QAKZ,UAAK,GAAgB,SAAS,CAAC;;;;QAK/B,YAAO,GAAG,EAAE,CAAC;QAqFb,eAAU,GAAG;YACnB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAClD,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;YACxD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YACrD,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;YAE1D,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,MAAM,cAAc,GAClB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAc,mBAAmB,CAAC,CAAC;gBAC1D,IAAI,cAAc,IAAI,cAAc,CAAC,OAAO,KAAK,GAAG;oBAClD,cAAc,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aAChC;SACF,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,CAAC,IAAI,CAAC,oBAAoB;gBAAE,OAAO;YAEvC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;YACxC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,eAAe,EAAE;gBACrC,IAAI,CAAC,SAAS,GAAG,IAA8B,CAAC;aACjD;iBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,MAAM,EAAE;gBACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;aACtD;YAED,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;gBAC3B,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;aACjC;SACF,CAAC;QAEM,oBAAe,GAAG;;YACxB,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;YAE3D,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,OAAO;YAE5B,MAAA,IAAI,CAAC,oBAAoB,0CAAE,YAAY,CACrC,YAAY,EACZ,GAAG,IAAI,CAAC,sBAAsB,GAAG,MAAM,GAAG,MAAM,SAAS,CAC1D,CAAC;YACF,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACzD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,UAAU,CAAC;;oBACT,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;iBACzB,EAAE,GAAG,CAAC,CAAC;aACT;SACF,CAAC;QAEM,oBAAe,GAAG;YACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACxB,CAAC;QAEM,gBAAW,GAAG,CAAC,IAAa;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,CAAC,IAAI,GAAG,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAE,CAAC;YAC1E,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;YACpD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;SACzD,CAAC;QAEM,iCAA4B,GAAG;YACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B,CAAC;QAEM,6BAAwB,GAAG;YACjC,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAChC,CAAC;QAEM,2BAAsB,GAAG,CAAC,QAAgB;YAChD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU;gBAAE,OAAO;YAEzC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;YAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,EAAE;gBAC1C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACxB,IAAI,IAAI,CAAC,sBAAsB,EAAE;oBAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;iBACxB;aACF;YACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,IAAI,EAAE,QAAQ;aACf,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,SAAS,EAAE;gBAC/D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;;gBAE9C,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACzC,UAAU,CAAC;;oBACT,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;iBACzB,EAAE,GAAG,CAAC,CAAC;aACT;SACF,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,IAAI,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,CAAC,CAAC;aACrD,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACtC,CAAC;KAmRH;IAlcC,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;;;QAGjD,8BAA8B,CAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,CAAC,mBAAmB,CACzB,CAAC;KACH;IAiBD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACnC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAChD,gBAAgB,CACjB,CAAC;SACH;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAGD,sBAAsB;;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,CAAC;KAC/B;IAGD,sBAAsB,CAAC,EACrB,MAAM,GACkC;QACxC,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;;gBAE1D,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;YACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAe,CAAC;SAC3C;KACF;IAGD,wBAAwB,CAAC,EAAE,MAAM,EAAmC;QAClE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;KACjC;IAGD,kBAAkB,CAAC,EAAE,MAAM,EAAwB;QACjD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;KACpC;IAqGD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,EAAE,EACF,eAAe,EACf,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,IAAI,EACJ,MAAM,EACN,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,wBAAwB,EACxB,4BAA4B,EAC5B,aAAa,EACb,MAAM,EACN,OAAO,EACP,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,OAAO,KAAK,EAAE,CAAC;QAClC,MAAM,cAAc,GAClB,aAAa,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;QAE7D,MAAM,iBAAiB,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC;QAEvD,MAAM,gBAAgB,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,CAAC;QAChE,MAAM,QAAQ,GAAG,QAAQ,KAAK,EAAE,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,UAAU,IAAI,sBAAsB,CAAC;QAElE,MAAM,eAAe,GAAyB,oBAAoB;cAC9D,iBAAiB;kBACf,gBAAgB;kBAChB,IAAI;cACN,IAAI,CAAC;QAET,MAAM,uBAAuB,GAAG,GAC9B,sBAAsB,GAAG,MAAM,GAAG,MACpC,SAAS,CAAC;QACV,MAAM,QAAQ,GAAG,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;QAExD,MAAM,iBAAiB,GAAG,UAAU,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,eAAe,GAAG,KAAK,GAAG,GAAG,CAAC;QAChD,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI;SACX,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,qBAAqB,EAAE,qBAAqB;gBAC5C,aAAa,EAAE,oBAAoB;gBACnC,CAAC,qBAAqB,CAAC,IAAI,GACzB,eAAe,KAAK,qBAAqB,CAAC,IAAI;gBAChD,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAED,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6EAAsB,OAAO,EAAE,cAAc,yBAC3C,+DAAQ,IAAI,EAAC,QAAQ,IACnB,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,uBAAuB,IAC/B,CAAC,QAAQ,IAAI,eAAe,MAC3B,EAAC,SAAS,mEAAC,KAAK,EAAC,YAAY,IAAK,KAAK,GACpC,UAAU,KACT,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP,EACA,iBAAiB;aACjB,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAClD,qBACE,OAAO,EAAC,gBAAgB,gBAEtB,CAAC,CAAC,eAAe,IAAI,CAAC,iBAAiB;gBACvC,GAAG,QAAQ,KAAK,aAAa,GAAG,IAGlC,cACG,iBAAiB,IAChB,YAAM,IAAI,EAAC,iBAAiB,GAAQ,KAEpC,aAAa,CACd,CACE,CACS,KAEhB,qBAAe,OAAO,EAAE,eAAe,IACrC,UAAI,KAAK,EAAC,YAAY,IACnB,eAAe,IACd,YAAM,IAAI,EAAC,WAAW,GAAQ,KAE9B,QAAQ,CACT,CACE,CACS,CACjB,CACS,CACb,EACA,SAAS,KACR,4DAAK,KAAK,EAAC,YAAY,IACrB,oFACa,SAAS,EACpB,OAAO,EAAC,iBAAiB,EACzB,KAAK,EAAC,iBAAiB,IAEtB,MAAM,CACO,CACZ,CACP,EACA,UAAU,KACT,4DAAK,KAAK,EAAC,aAAa,IACtB,sEACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,kBAAkB,gBACb,aAAa,IAEvB,OAAO,CACM,CACZ,CACP,CACG,EAEL,CAAC,oBAAoB,IAAI,cAAc,MACtC,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,0BAA0B,IAClC,CAAC,oBAAoB,IACpB,EAAC,QAAQ,QACP,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,cAAc,KACb,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CACQ,KAEX,EAAC,QAAQ,QACN,oBAAoB,KACnB,iBACE,EAAE,EAAC,sBAAsB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC,EAC7C,WAAW,EAAE,4BAA4B,EACzC,OAAO,EAAC,eAAe,EACvB,UAAU,QACV,IAAI,EAAE,gBAAgB,gBACV,uBAAuB,EACnC,KAAK,EAAE,eAA8B,EACrC,OAAO,EAAE,wBAAwB,IAEjC,YAAM,IAAI,EAAC,aAAa,IACtB,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS,IAEd,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG,EACxC,YAAM,CAAC,EAAC,4OAA4O,GAAG,CACnP,CACD,CACG,CACb,EACA,cAAc,KACb,WAAK,KAAK,EAAC,uBAAuB,IAChC,YACE,EAAE,EAAC,iCAAiC,EACpC,KAAK,EAAC,iCAAiC,iBAC3B,MAAM,6BAGb,EACP,8BACkB,iCAAiC,iBACpC,GAAG,cAAc,EAAE,IAEhC,iBACE,EAAE,EAAC,aAAa,EAChB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,KAAK,EAAE,eAA8B,EACrC,OAAO,EAAC,WAAW,EACnB,UAAU,yBACI,OAAO,mBACP,MAAM,gBACR,QACV,aAAa,GAAG,YAAY,GAAG,KACjC,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe,YAGxB,WACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,WAAW,IAEhB,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG,EACxC,YAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACI,CACR,CACF,CACP,CACQ,CACZ,CACG,CACF,CACP,CACG,EAEL,sBAAsB,KACrB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP,EAEA,aAAa,IAAI,CAAC,oBAAoB,KACrC,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DACE,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,iBACpB,MAAM,iBAGb,EACP,+EACkB,0BAA0B,EAC1C,KAAK,EAAC,qBAAqB,IAE3B,6EACE,UAAU,QACV,UAAU,EAAE,eAAe,IAE3B,2DAAI,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,IAAI,IAC5C,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACgB,CACnB,CACF,CACP,CACM,CACY,CACnB,EACL,cAAc,KACb,2EACE,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;gBACL,MAAM;aACP,IAEA,cAAc,KACb,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,EACD,2DAAI,IAAI,EAAC,YAAY,IACnB,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACc,CACtB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n color: var(--ic-top-navigation-text);\n width: 100%;\n position: relative;\n\n --ic-typography-color: var(--ic-top-navigation-text);\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n --navigation-link-colour: var(--ic-top-navigation-text);\n --ic-top-navigation-status-tag-text: var(--ic-color-text-primary-light);\n --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-lighten-20);\n}\n\n:host(.dark) {\n --ic-top-navigation-status-tag-text: var(--ic-color-text-primary-dark);\n --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);\n --ic-top-navigation-title-hover: var(--ic-action-dark-bg-hover);\n --ic-top-navigation-title-pressed: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.dark) ::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: var(--ic-color-text-primary-light);\n}\n\n::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: white;\n}\n\n:host .top-navigation {\n background-color: var(--ic-top-navigation-background);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n color: var(--ic-top-navigation-icon-and-label);\n text-decoration: none;\n outline: none;\n\n --ic-typography-color: var(--ic-top-navigation-icon-and-label);\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-title-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-top-navigation-title-pressed);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .menu-button-container {\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);\n padding: 0 var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-border-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.title-wrap {\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n}\n\n:host .app-status {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag);\n color: var(--ic-top-navigation-status-tag-text);\n\n --ic-typography-color: var(--ic-top-navigation-status-tag-text);\n\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\n:host .app-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag-secondary);\n color: var(--ic-top-navigation-status-tag);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n flex: 1 1 0;\n max-width: fit-content;\n\n --ic-typography-color: var(--ic-top-navigation-status-tag);\n}\n\nslot[name=\"app-icon\"]::slotted() {\n fill: var(--ic-top-navigation-logo);\n width: 2em;\n height: 2em;\n cursor: pointer;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-top-navigation-icon);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n color: var(--ic-brand-text-color);\n}\n\n.menu-button-container .navigation-landmark-button-text:dir(rtl) {\n right: -9999px;\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-section-container {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n}\n\n/* large /\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding: 0 var(--ic-space-md);\n }\n}\n\n/* Mobile styling */\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n display: none;\n}\n\n:host(.mobile-mode) .title-link {\n margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-border-keyline-darken);\n height: 4rem;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small /\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 2.5rem;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 3.5rem;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-border-hc);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-border-hc);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n fill: currentcolor;\n }\n\n slot[name=\"toggle-icon\"] svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Fragment,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrand,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/\n @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n /\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon = false;\n private hasAppTitleSlot = false;\n private hasIconButtons = false;\n private hasNavigation = false;\n private hasSearchSlotContent = false;\n private mobileSearchButtonEl?: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver \| null = null;\n private searchBar: HTMLIcSearchBarElement \| null = null;\n private menuButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar = false;\n @State() mobileSearchBarVisible = false;\n @State() mobileSearchHiddenOnBlur = false;\n @State() navMenuVisible = false;\n @State() searchButtonClick = false;\n @State() searchValue = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /\n Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n /\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status = \"\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n The version info to be displayed.\n /\n @Prop() version = \"\";\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle?: string;\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is closed.\n /\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (!this.hasAppTitleSlot) {\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.menuButtonEl?.setFocus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasAppTitleSlot = isSlotUsed(this.el, \"app-title\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n\n if (this.hasAppIcon) {\n const slottedAppIcon =\n this.el.querySelector<HTMLElement>('[slot=\"app-icon\"]');\n if (slottedAppIcon && slottedAppIcon.tagName === \"A\")\n slottedAppIcon.tabIndex = -1;\n }\n };\n\n private initialiseSearchBar = () => {\n if (!this.hasSearchSlotContent) return;\n\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n };\n\n private toggleSearchBar = () => {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (!this.searchBar) return;\n\n this.mobileSearchButtonEl?.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu = (show: boolean) => {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n };\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize === this.deviceSize) return;\n\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasAppTitleSlot,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const isSmallDeviceSize = deviceSize <= DEVICE_SIZES.S;\n\n const searchButtonSize = isSmallDeviceSize ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? isSmallDeviceSize\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = isSmallDeviceSize ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcBrandForegroundEnum.Dark]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {isSmallDeviceSize &&\n (!isEmptyString(shortAppTitle) \|\| shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot \|\| !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint ? (\n <Fragment>\n <slot name=\"search\"></slot>\n {hasIconButtons && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n </Fragment>\n ) : (\n <Fragment>\n {hasSearchSlotContent && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={foregroundColor as IcThemeMode}\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n {hasMenuContent && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n ref={(el) => (this.menuButtonEl = el)}\n theme={foregroundColor as IcThemeMode}\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-top-navigation.js","mappings":"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","names":[],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n color: var(--ic-top-navigation-text);\n width: 100%;\n position: relative;\n\n --ic-typography-color: var(--ic-top-navigation-text);\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n --navigation-link-colour: var(--ic-top-navigation-text);\n --ic-top-navigation-status-tag-text: var(--ic-color-text-primary-light);\n --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-lighten-20);\n}\n\n:host(.dark) {\n --ic-top-navigation-status-tag-text: var(--ic-color-text-primary-dark);\n --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);\n --ic-top-navigation-title-hover: var(--ic-action-dark-bg-hover);\n --ic-top-navigation-title-pressed: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.dark) ::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: var(--ic-color-text-primary-light);\n}\n\n::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: white;\n}\n\n:host .top-navigation {\n background-color: var(--ic-top-navigation-background);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n color: var(--ic-top-navigation-icon-and-label);\n text-decoration: none;\n outline: none;\n\n --ic-typography-color: var(--ic-top-navigation-icon-and-label);\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-title-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-top-navigation-title-pressed);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .menu-button-container {\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);\n padding: 0 var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-border-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.title-wrap {\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n}\n\n:host .app-status {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag);\n color: var(--ic-top-navigation-status-tag-text);\n\n --ic-typography-color: var(--ic-top-navigation-status-tag-text);\n\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\n:host .app-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag-secondary);\n color: var(--ic-top-navigation-status-tag);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n flex: 1 1 0;\n max-width: fit-content;\n\n --ic-typography-color: var(--ic-top-navigation-status-tag);\n}\n\nslot[name=\"app-icon\"]::slotted() {\n fill: var(--ic-top-navigation-logo);\n width: 2em;\n height: 2em;\n cursor: pointer;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-top-navigation-icon);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n color: var(--ic-brand-text-color);\n}\n\n.menu-button-container .navigation-landmark-button-text:dir(rtl) {\n right: -9999px;\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-section-container {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n}\n\n/* large /\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding: 0 var(--ic-space-md);\n }\n}\n\n/* Mobile styling */\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n display: none;\n}\n\n:host(.mobile-mode) .title-link {\n margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-border-keyline-darken);\n height: 4rem;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small /\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 2.5rem;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 3.5rem;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-border-hc);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-border-hc);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n fill: currentcolor;\n }\n\n slot[name=\"toggle-icon\"] svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Fragment,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrand,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/\n @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n /\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon = false;\n private hasAppTitleSlot = false;\n private hasIconButtons = false;\n private hasNavigation = false;\n private hasSearchSlotContent = false;\n private mobileSearchButtonEl?: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver \| null = null;\n private searchBar: HTMLIcSearchBarElement \| null = null;\n private menuButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar = false;\n @State() mobileSearchBarVisible = false;\n @State() mobileSearchHiddenOnBlur = false;\n @State() navMenuVisible = false;\n @State() searchButtonClick = false;\n @State() searchValue = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /\n Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n /\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status = \"\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n The version info to be displayed.\n /\n @Prop() version = \"\";\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle?: string;\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is closed.\n /\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (!this.hasAppTitleSlot) {\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.menuButtonEl?.setFocus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasAppTitleSlot = isSlotUsed(this.el, \"app-title\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n\n if (this.hasAppIcon) {\n const slottedAppIcon =\n this.el.querySelector<HTMLElement>('[slot=\"app-icon\"]');\n if (slottedAppIcon && slottedAppIcon.tagName === \"A\")\n slottedAppIcon.tabIndex = -1;\n }\n };\n\n private initialiseSearchBar = () => {\n if (!this.hasSearchSlotContent) return;\n\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n };\n\n private toggleSearchBar = () => {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (!this.searchBar) return;\n\n this.mobileSearchButtonEl?.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu = (show: boolean) => {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n };\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize === this.deviceSize) return;\n\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasAppTitleSlot,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const isSmallDeviceSize = deviceSize <= DEVICE_SIZES.S;\n\n const searchButtonSize = isSmallDeviceSize ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? isSmallDeviceSize\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = isSmallDeviceSize ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcBrandForegroundEnum.Dark]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {isSmallDeviceSize &&\n (!isEmptyString(shortAppTitle) \|\| shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot \|\| !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint ? (\n <Fragment>\n <slot name=\"search\"></slot>\n {hasIconButtons && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n </Fragment>\n ) : (\n <Fragment>\n {hasSearchSlotContent && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={foregroundColor as IcThemeMode}\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n {hasMenuContent && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n ref={(el) => (this.menuButtonEl = el)}\n theme={foregroundColor as IcThemeMode}\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n // eslint-disable-next-line\n // @ts-ignore\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/core/core.css CHANGED Viewed

@@ -2127,7 +2127,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     inset 0 0 0 8px var(--ic-architectural-black);--ic-border-hc:var(--ic-space-1px) solid transparent;--ic-border-keyline-darken:1px solid var(--ic-color-keyline-darken);--ic-border-keyline-lighten:1px solid var(--ic-color-keyline-lighten)}:root{--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
     inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
     cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
-    cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-calendar:calc(var(--ic-z-index-base-value));--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 210);--ic-table-cell-padding:var(--ic-space-xs);--ic-table-cell-padding-dense:var(--ic-space-xxs) var(--ic-space-xs);--ic-table-cell-padding-spacious:0.625rem var(--ic-space-xs);--ic-table-cell-border:var(--ic-space-1px) solid
+    cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.0625rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-calendar:calc(var(--ic-z-index-base-value));--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200);--ic-z-index-skip-link:calc(var(--ic-z-index-base-value) + 210);--ic-table-cell-padding:var(--ic-space-xs);--ic-table-cell-padding-dense:var(--ic-space-xxs) var(--ic-space-xs);--ic-table-cell-padding-spacious:0.625rem var(--ic-space-xs);--ic-table-cell-border:var(--ic-space-1px) solid
     var(--ic-data-table-cell-keyline);--ic-table-embedded-border:var(--ic-space-1px) solid
     var(--ic-data-table-border);--ic-table-font-size-dense:var(--ic-font-size-label);--ic-table-font-size-spacious:1.125rem;--ic-table-heading-border:var(--ic-space-1px) solid
     var(--ic-data-table-header-keyline);--ic-table-text-line-height:1.5rem}