npm - @ukic/web-components - Versions diffs - 2.1.0-beta.2 → 2.1.0-beta.4 - Mend

@ukic/web-components 2.1.0-beta.2 → 2.1.0-beta.4

Files changed (496) hide show

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

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

package/dist/esm/ic-theme.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-1500de1f.js';
-import { B as getThemeColorBrightness, C as BLACK_MIN_COLOR_BRIGHTNESS, W as WHITE_MAX_COLOR_BRIGHTNESS, E as hexToRgba, F as rgbaStrToObj, k as getThemeForegroundColor } from './helpers-3d41833c.js';
+import { A as getThemeColorBrightness, B as BLACK_MIN_COLOR_BRIGHTNESS, W as WHITE_MAX_COLOR_BRIGHTNESS, C as hexToRgba, E as rgbaStrToObj, k as getThemeForegroundColor } from './helpers-46e5291b.js';
 import './types-dd515332.js';
 const Theme = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.icThemeChange = createEvent(this, "icThemeChange", 7);
+    this.themeChange = createEvent(this, "themeChange", 7);
     this.checkThemeColorContrast = () => {
       if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
         getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
@@ -34,7 +34,7 @@ const Theme = class {
         root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
         this.checkThemeColorContrast();
         const foregroundColor = getThemeForegroundColor();
-        this.icThemeChange.emit({ mode: foregroundColor, color: colorRGBA });
+        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
       }
     };
     this.color = null;

package/dist/esm/ic-theme.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-theme.entry.js","mappings":";;;;MA0Ba,KAAK;;;;IAgBR,4BAAuB,GAAG;MAChC,IACE,uBAAuB,EAAE,GAAG,0BAA0B;QACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB;MAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,~~aAAa~~,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;~~OACtE~~;KACF,CAAC;iBAjDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EA8CD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;","names":[],"sources":["./src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n Component,\n Host,\n Event,\n EventEmitter,\n h,\n Watch,\n Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n getThemeForegroundColor,\n hexToRgba,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n BLACK_MIN_COLOR_BRIGHTNESS,\n WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n tag: \"ic-theme\",\n shadow: true,\n})\nexport class Theme {\n /*\n The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() color?: string = null;\n\n @Watch(\"color\")\n watchColorPropHandler(): void {\n this.setThemeColor();\n }\n\n /\n Emitted when the theme is changed.\n */\n @Event() ~~icThemeChange~~: EventEmitter<IcTheme>;\n\n private checkThemeColorContrast = (): void => {\n if (\n getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n ) {\n console.warn(\n `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n );\n }\n };\n\n private setThemeColor = () => {\n if (this.color !== null) {\n let colorRGBA = null;\n const firstChar = this.color.slice(0, 1);\n if (firstChar === \"#\") {\n colorRGBA = hexToRgba(this.color);\n } else if (firstChar.toLowerCase() === \"r\") {\n colorRGBA = rgbaStrToObj(this.color);\n }\n this.setThemeRGBA(colorRGBA);\n }\n };\n\n private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n if (colorRGBA !== null) {\n const root = document.documentElement;\n root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n this.checkThemeColorContrast();\n\n const foregroundColor = getThemeForegroundColor();\n this.~~icThemeChange~~.emit({ mode: foregroundColor, color: colorRGBA });\n }\n };\n\n componentWillLoad(): void {\n this.setThemeColor();\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}
1	+ {"file":"ic-theme.entry.js","mappings":";;;;MA0Ba,KAAK;;;;IAgBR,4BAAuB,GAAG;MAChC,IACE,uBAAuB,EAAE,GAAG,0BAA0B;QACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB;MAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACpE;KACF,CAAC;iBAjDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EA8CD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;","names":[],"sources":["./src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n Component,\n Host,\n Event,\n EventEmitter,\n h,\n Watch,\n Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n getThemeForegroundColor,\n hexToRgba,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n BLACK_MIN_COLOR_BRIGHTNESS,\n WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n tag: \"ic-theme\",\n shadow: true,\n})\nexport class Theme {\n /*\n The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() color?: string = null;\n\n @Watch(\"color\")\n watchColorPropHandler(): void {\n this.setThemeColor();\n }\n\n /\n @internal Emitted when the theme is changed.\n */\n @Event() themeChange: EventEmitter<IcTheme>;\n\n private checkThemeColorContrast = (): void => {\n if (\n getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n ) {\n console.warn(\n `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n );\n }\n };\n\n private setThemeColor = () => {\n if (this.color !== null) {\n let colorRGBA = null;\n const firstChar = this.color.slice(0, 1);\n if (firstChar === \"#\") {\n colorRGBA = hexToRgba(this.color);\n } else if (firstChar.toLowerCase() === \"r\") {\n colorRGBA = rgbaStrToObj(this.color);\n }\n this.setThemeRGBA(colorRGBA);\n }\n };\n\n private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n if (colorRGBA !== null) {\n const root = document.documentElement;\n root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n this.checkThemeColorContrast();\n\n const foregroundColor = getThemeForegroundColor();\n this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n }\n };\n\n componentWillLoad(): void {\n this.setThemeColor();\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}

package/dist/esm/ic-top-navigation.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1500de1f.js';
 import { I as IcThemeForegroundEnum } from './types-dd515332.js';
-import { G as getSlot, D as DEVICE_SIZES, g as getCurrentDeviceSize, k as getThemeForegroundColor, o as onComponentPropUndefinedChange, i as isSlotUsed, c as checkResizeObserver, a as onComponentRequiredPropUndefined } from './helpers-3d41833c.js';
+import { F as getSlot, D as DEVICE_SIZES, g as getCurrentDeviceSize, k as getThemeForegroundColor, o as onComponentPropUndefinedChange, i as isSlotUsed, c as checkResizeObserver, a as onComponentRequiredPropUndefined } from './helpers-46e5291b.js';
-const icTopNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);margin-left:calc(-1 * var(--ic-space-xxs));transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding-left:var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:8px;padding-bottom:8px}.navigation-tabs{margin-top:-1px}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.app-title{padding-right:var(--ic-space-lg)}:host .app-status{border-radius:80px;background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md)}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:16px;background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs)}.app-status-text,.app-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}slot[name=\"app-icon\"]::slotted(svg){fill:var(--ic-theme-text);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center;flex:1 auto}.menu-button-container{margin-left:var(--ic-space-md)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:44px}:host([content-aligned=\"left\"]) .app-details-container{flex-basis:1}:host([content-aligned=\"left\"]) .app-details-container,:host([content-aligned=\"left\"]) .nav-panel-container,:host([content-aligned=\"center\"]) .nav-panel-container,:host([content-aligned=\"left\"]) .search-menu-container,:host([content-aligned=\"center\"]) .search-menu-container{justify-content:flex-start}:host([content-aligned=\"center\"]) .app-details-container{justify-content:flex-end}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}:host([content-aligned=\"center\"]) .top-navigation{display:flex;justify-content:center}:host([content-aligned=\"left\"]) .top-navigation{display:flex}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding-left:var(--ic-space-md)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:160px}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:64px;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}:host([content-aligned=\"left\"]) .app-details-container,:host([content-aligned=\"left\"]) .search-menu-container,:host([content-aligned=\"center\"]) .search-menu-container,:host([content-aligned=\"center\"]) .app-details-container{justify-content:flex-start}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:40px}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:56px;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(svg){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(svg){fill:currentcolor}}";
+const icTopNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);margin-left:calc(-1 * var(--ic-space-xxs));transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding-left:var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:8px;padding-bottom:8px}.navigation-tabs{margin-top:-1px}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:80px;background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md)}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:16px;background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs)}.app-status-text,.app-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}slot[name=\"app-icon\"]::slotted(svg){fill:var(--ic-theme-text);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center;flex:1 auto}.menu-button-container{margin-left:var(--ic-space-md)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:44px}:host([content-aligned=\"left\"]) .app-details-container{flex-basis:1}:host([content-aligned=\"left\"]) .app-details-container,:host([content-aligned=\"left\"]) .nav-panel-container,:host([content-aligned=\"center\"]) .nav-panel-container,:host([content-aligned=\"left\"]) .search-menu-container,:host([content-aligned=\"center\"]) .search-menu-container{justify-content:flex-start}:host([content-aligned=\"center\"]) .app-details-container{justify-content:flex-end}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}:host([content-aligned=\"center\"]) .top-navigation{display:flex;justify-content:center}:host([content-aligned=\"left\"]) .top-navigation{display:flex}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding-left:var(--ic-space-md)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:160px}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:64px;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}:host([content-aligned=\"left\"]) .app-details-container,:host([content-aligned=\"left\"]) .search-menu-container,:host([content-aligned=\"center\"]) .search-menu-container,:host([content-aligned=\"center\"]) .app-details-container{justify-content:flex-start}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:40px}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:56px;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(svg){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(svg){fill:currentcolor}}";
 const TopNavigation = class {
   constructor(hostRef) {
@@ -185,7 +185,7 @@ const TopNavigation = class {
     return (h(Host, { class: {
         ["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
         [IcThemeForegroundEnum.Dark]: this.foregroundColor === IcThemeForegroundEnum.Dark,
-      } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: "full-width", "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, hasTitle && (h("a", { class: "title-link", href: this.href }, this.hasAppIcon && (h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" }))), h("ic-typography", { variant: appTitleVariant }, h("h1", null, this.appTitle)))), this.status !== "" && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (h("slot", { name: "search" })), this.hasSearchSlotContent &&
+      } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: "full-width", "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, hasTitle && (h("a", { class: "title-link", href: this.href }, this.hasAppIcon && (h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" }))), h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, this.appTitle)))), this.status !== "" && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (h("slot", { name: "search" })), this.hasSearchSlotContent &&
       this.deviceSize <= DEVICE_SIZES.L && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, h("slot", { name: "toggle-icon", slot: "icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", 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" }))))), this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (h("div", { class: "menu-button-container" }, h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": !this.hasNavigation || this.navMenuVisible
         ? "true"
         : "false" }, h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), this.mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ul", { class: "navigation-item-list" }, h("slot", { name: "navigation" })))))))), this.navMenuVisible && (h("ic-navigation-menu", { version: this.version, status: this.status, class: {

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

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

package/dist/esm/ic-typography.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-typography.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+kJAA+kJ;;MCS1lJ,UAAU;;;mBAMoB,MAAM;gCAKN,KAAK;;EAE9C,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;IAE/C,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,OAAO,EAAE,GAAG,IAAI;QAClC,CAAC,kCAAkC,OAAO,EAAE,GAAG,oBAAoB;OACpE,IAED,eAAQ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","./src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/~~normalise~~.css\";\n\n:host {\n display: block;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n @Element() el: HTMLIcTypographyElement;\n\n /*\n The ICDS typography style to use.\n /\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /\n If `true`, appropriate top and bottom margins will be applied to the typography.\n */\n @Prop() applyVerticalMargins?: boolean = false;\n\n render() {\n const { variant, applyVerticalMargins } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-typography.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+kJAA+kJ;;MCS1lJ,UAAU;;;mBAMoB,MAAM;gCAKN,KAAK;;EAE9C,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;IAE/C,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,OAAO,EAAE,GAAG,IAAI;QAClC,CAAC,kCAAkC,OAAO,EAAE,GAAG,oBAAoB;OACpE,IAED,eAAQ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","./src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n @Element() el: HTMLIcTypographyElement;\n\n /*\n The ICDS typography style to use.\n /\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /\n If `true`, appropriate top and bottom margins will be applied to the typography.\n */\n @Prop() applyVerticalMargins?: boolean = false;\n\n render() {\n const { variant, applyVerticalMargins } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-1500de1f.js CHANGED Viewed

@@ -2198,6 +2198,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ic-checkbox-group.entry.js').then(processMod, consoleError);
+        case 'ic-chip':
+          return import(
+            /* webpackMode: "lazy" */
+            './ic-chip.entry.js').then(processMod, consoleError);
         case 'ic-classification-banner':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/loader.js CHANGED Viewed

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy(JSON.parse("[[\"ic-typography\",[[1,\"ic-typography\",{\"variant\":[1],\"applyVerticalMargins\":[4,\"apply-vertical-margins\"]}]]],[\"ic-search-bar\",[[1,\"ic-search-bar\",{\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"disableFilter\":[4,\"disable-filter\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"value\":[1537],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[1026],\"name\":[1],\"spellcheck\":[4],\"options\":[16],\"focusOnLoad\":[4,\"focus-on-load\"],\"hintText\":[1,\"hint-text\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"charactersUntilSuggestion\":[2,\"characters-until-suggestion\"],\"open\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"showClearButton\":[32],\"clearButtonFocused\":[32],\"searchSubmitFocused\":[32],\"prevNoOption\":[32],\"highlightedValue\":[32],\"setFocus\":[64]},[[0,\"icKeydown\",\"handleKeyDown\"],[0,\"keyup\",\"handleKeyUp\"],[0,\"menuChange\",\"onMenuClose\"],[0,\"menuOptionId\",\"onMenuOptionHighlighted\"]]]]],[\"ic-select\",[[1,\"ic-select\",{\"label\":[1],\"options\":[16],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[516],\"readonly\":[4],\"placeholder\":[1],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"fullWidth\":[4,\"full-width\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"value\":[1025],\"name\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"searchable\":[4],\"includeDescriptionsInSearch\":[4,\"include-descriptions-in-search\"],\"includeGroupTitlesInSearch\":[4,\"include-group-titles-in-search\"],\"searchMatchPosition\":[1,\"search-match-position\"],\"charactersUntilSuggestions\":[2,\"characters-until-suggestions\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"open\":[32],\"clearButtonFocused\":[32],\"searchableSelectInputValue\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"noOptions\":[32],\"initialValue\":[32],\"setFocus\":[64]}]]],[\"ic-top-navigation\",[[1,\"ic-top-navigation\",{\"appTitle\":[1,\"app-title\"],\"href\":[1],\"version\":[1],\"status\":[1],\"contentAligned\":[1,\"content-aligned\"],\"inline\":[4],\"menuOpen\":[32],\"deviceSize\":[32],\"mobileSearchBarVisible\":[32],\"navMenuVisible\":[32],\"searchValue\":[32],\"mobileSearchHiddenOnBlur\":[32],\"searchButtonClick\":[32],\"foregroundColor\":[32],\"hasFullWidthSearchBar\":[32]},[[0,\"icNavigationMenuClose\",\"navBarMenuCloseHandler\"],[0,\"icSearchBarBlur\",\"searchInputBlurHandler\"],[0,\"icChange\",\"searchValueChangeHandler\"],[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-side-navigation\",[[1,\"ic-side-navigation\",{\"appTitle\":[1,\"app-title\"],\"status\":[1],\"version\":[1],\"expanded\":[4],\"href\":[1],\"static\":[4],\"collapsedIconLabels\":[4,\"collapsed-icon-labels\"],\"inline\":[4],\"disableAutoParentStyling\":[4,\"disable-auto-parent-styling\"],\"foregroundColor\":[32],\"menuOpen\":[32],\"menuExpanded\":[32],\"deviceSize\":[32],\"deviceSizeAppTitle\":[32],\"hasSecondaryNavigation\":[32]},[[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-alert\",[[1,\"ic-alert\",{\"variant\":[1],\"heading\":[1],\"message\":[1],\"titleAbove\":[4,\"title-above\"],\"dismissible\":[4],\"announced\":[4],\"visible\":[32],\"alertTitleWrap\":[32]},[[2,\"dismiss\",\"handleClick\"]]]]],[\"ic-navigation-button\",[[1,\"ic-navigation-button\",{\"label\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"mode\":[32],\"initialAppearance\":[32],\"setFocus\":[64]},[[4,\"icNavigationMenuOpened\",\"navBarMenuOpenHandler\"],[4,\"icNavigationMenuClosed\",\"navBarMenuCloseHandler\"],[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-checkbox-group\",[[1,\"ic-checkbox-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedOptions\":[32]},[[0,\"checkboxChecked\",\"selectHandler\"]]]]],[\"ic-radio-group\",[[1,\"ic-radio-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedValue\":[32],\"selectedChild\":[32]},[[0,\"radioOptionSelect\",\"selectHandler\"]]]]],[\"ic-breadcrumb-group\",[[1,\"ic-breadcrumb-group\",{\"backBreadcrumbOnly\":[4,\"back-breadcrumb-only\"],\"collapsed\":[4],\"deviceSize\":[32],\"expandedBreadcrumbs\":[32]}]]],[\"ic-footer\",[[1,\"ic-footer\",{\"description\":[1],\"aligned\":[1],\"breakpoint\":[1],\"groupLinks\":[4,\"group-links\"],\"caption\":[1],\"copyright\":[4],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-footer-link-group\",[[1,\"ic-footer-link-group\",{\"groupTitle\":[1,\"group-title\"],\"small\":[32],\"expanded\":[32],\"dropdownIconStyle\":[32],\"deviceSize\":[32]},[[4,\"icFooterResized\",\"footerResizeHandler\"],[4,\"icThemeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-hero\",[[1,\"ic-hero\",{\"heading\":[1],\"subheading\":[1],\"secondaryHeading\":[1,\"secondary-heading\"],\"secondarySubheading\":[1,\"secondary-subheading\"],\"backgroundImage\":[1,\"background-image\"],\"disableBackgroundParallax\":[4,\"disable-background-parallax\"],\"aligned\":[1],\"contentAligned\":[1,\"content-aligned\"],\"small\":[4],\"rightContent\":[32],\"scrollFactor\":[32],\"leftContentFullWidth\":[32],\"foregroundColor\":[32]},[[4,\"icThemeChange\",\"themeChangeHandler\"],[5,\"scroll\",\"doScroll\"]]]]],[\"ic-navigation-item\",[[1,\"ic-navigation-item\",{\"label\":[1],\"href\":[1],\"selected\":[4],\"expandable\":[4],\"displayNavigationTooltip\":[4,\"display-navigation-tooltip\"],\"collapsedIconLabel\":[4,\"collapsed-icon-label\"],\"isTopNavChild\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"sideNavExpanded\":[32],\"isSideNavMobile\":[32],\"setFocus\":[64]},[[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-page-header\",[[1,\"ic-page-header\",{\"heading\":[1],\"subheading\":[1],\"aligned\":[1],\"small\":[4],\"border\":[4],\"sticky\":[4],\"stickyDesktopOnly\":[4,\"sticky-desktop-only\"],\"reverseOrder\":[4,\"reverse-order\"],\"deviceSize\":[32],\"areButtonsReversed\":[32],\"actionContent\":[32]}]]],[\"ic-switch\",[[1,\"ic-switch\",{\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"checked\":[4],\"small\":[4],\"disabled\":[4],\"name\":[1],\"showState\":[4,\"show-state\"],\"value\":[1],\"checkedState\":[32],\"initiallyChecked\":[32]}]]],[\"ic-tab-group\",[[1,\"ic-tab-group\",{\"contextId\":[513,\"context-id\"],\"inline\":[516],\"label\":[1],\"appearance\":[1],\"firstTabVisible\":[32],\"lastTabVisible\":[32],\"tabOverflow\":[32],\"scrollTabIntoView\":[64]},[[0,\"tabFocus\",\"tabFocusHandler\"]]]]],[\"ic-back-to-top\",[[1,\"ic-back-to-top\",{\"target\":[1],\"bannerOffset\":[32],\"targetElVisible\":[32],\"footerVisible\":[32]}]]],[\"ic-card\",[[1,\"ic-card\",{\"clickable\":[1028],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"heading\":[1],\"message\":[1],\"disabled\":[4],\"fullWidth\":[4,\"full-width\"],\"parentIsAnchorTag\":[32],\"isFocussed\":[32],\"parentEl\":[32],\"appearance\":[32]},[[2,\"click\",\"handleHostClick\"],[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-checkbox\",[[1,\"ic-checkbox\",{\"checked\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"indeterminate\":[4],\"initiallyChecked\":[32]}]]],[\"ic-classification-banner\",[[1,\"ic-classification-banner\",{\"additionalSelectors\":[1,\"additional-selectors\"],\"classification\":[1],\"country\":[1],\"inline\":[4],\"upTo\":[4,\"up-to\"]}]]],[\"ic-data-entity\",[[1,\"ic-data-entity\",{\"heading\":[1],\"small\":[4]}]]],[\"ic-data-row\",[[1,\"ic-data-row\",{\"label\":[1],\"value\":[1],\"small\":[4],\"deviceSize\":[32],\"entitySize\":[32]}]]],[\"ic-navigation-group\",[[1,\"ic-navigation-group\",{\"label\":[1],\"expandable\":[4],\"dropdownOpen\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"expanded\":[32],\"setFocus\":[64]},[[0,\"childBlur\",\"childBlurHandler\"],[0,\"icNavItemClicked\",\"navItemClickHandler\"],[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-radio-option\",[[1,\"ic-radio-option\",{\"selected\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1025],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"initiallySelected\":[32]},[[0,\"icChange\",\"textfieldValueHandler\"]]]]],[\"ic-status-tag\",[[1,\"ic-status-tag\",{\"label\":[1],\"status\":[1],\"appearance\":[1],\"small\":[4]}]]],[\"ic-step\",[[1,\"ic-step\",{\"stepType\":[1,\"step-type\"],\"stepTitle\":[1,\"step-title\"],\"stepSubtitle\":[1,\"step-subtitle\"],\"stepNum\":[2,\"step-num\"],\"lastStep\":[4,\"last-step\"]}]]],[\"ic-tab\",[[1,\"ic-tab\",{\"contextId\":[513,\"context-id\"],\"disabled\":[4],\"selected\":[516],\"tabId\":[513,\"tab-id\"],\"tabPosition\":[2,\"tab-position\"],\"appearance\":[1]}]]],[\"ic-footer-link\",[[1,\"ic-footer-link\",{\"href\":[1],\"footerConfig\":[32],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"icFooterResized\",\"footerResizeHandler\"],[4,\"icThemeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-skeleton\",[[1,\"ic-skeleton\",{\"variant\":[1],\"light\":[4],\"hasChild\":[32],\"default\":[32],\"heightOnly\":[32],\"widthOnly\":[32]}]]],[\"ic-stepper\",[[1,\"ic-stepper\",{\"aligned\":[1],\"connectorWidth\":[2,\"connector-width\"],\"stepperWidth\":[32],\"lastStepWidth\":[32]}]]],[\"ic-tab-context\",[[4,\"ic-tab-context\",{\"contextId\":[513,\"context-id\"],\"activationType\":[1,\"activation-type\"],\"selectedTabIndex\":[2,\"selected-tab-index\"],\"appearance\":[1],\"selectedTab\":[32]},[[0,\"tabClick\",\"tabClickHandler\"]]]]],[\"ic-tab-panel\",[[1,\"ic-tab-panel\",{\"contextId\":[513,\"context-id\"],\"tabPosition\":[514,\"tab-position\"],\"panelId\":[513,\"panel-id\"],\"selectedTab\":[1,\"selected-tab\"],\"appearance\":[1]}]]],[\"ic-theme\",[[1,\"ic-theme\",{\"color\":[1]}]]],[\"ic-text-field\",[[1,\"ic-text-field\",{\"inputId\":[1,\"input-id\"],\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"rows\":[2],\"resize\":[4],\"small\":[4],\"value\":[1537],\"maxLength\":[2,\"max-length\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"validationInline\":[4,\"validation-inline\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autoFocus\":[4,\"auto-focus\"],\"debounce\":[2],\"type\":[1],\"inputmode\":[1],\"name\":[1],\"spellcheck\":[4],\"ariaActiveDescendant\":[1,\"aria-active-descendant\"],\"truncateValue\":[4,\"truncate-value\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaAutocomplete\":[1,\"aria-autocomplete\"],\"role\":[1],\"hiddenInput\":[4,\"hidden-input\"],\"numChars\":[32],\"maxLengthExceeded\":[32],\"initialValue\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-navigation-menu\",[[1,\"ic-navigation-menu\",{\"version\":[1],\"status\":[1]},[[0,\"icNavItemClicked\",\"navItemClickHandler\"],[4,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-link\",[[1,\"ic-link\",{\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"showIcon\":[4,\"show-icon\"],\"appearance\":[1025]},[[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-breadcrumb\",[[1,\"ic-breadcrumb\",{\"pageTitle\":[1,\"page-title\"],\"href\":[1],\"current\":[4],\"showBackIcon\":[516,\"show-back-icon\"]}]]],[\"ic-divider\",[[2,\"ic-divider\",{\"foregroundColor\":[32]},[[4,\"icThemeChange\",\"themeChangeHandler\"]]]]],[\"ic-section-container\",[[1,\"ic-section-container\",{\"aligned\":[1],\"fullHeight\":[4,\"full-height\"]}]]],[\"ic-input-component-container_3\",[[1,\"ic-menu\",{\"open\":[516],\"options\":[16],\"small\":[516],\"menuId\":[1,\"menu-id\"],\"value\":[1],\"activationType\":[1,\"activation-type\"],\"inputEl\":[16],\"parentEl\":[16],\"inputLabel\":[1,\"input-label\"],\"anchorEl\":[16],\"fullWidth\":[4,\"full-width\"],\"autoFocusOnSelected\":[4,\"auto-focus-on-selected\"],\"keyboardNav\":[32],\"optionHighlighted\":[32],\"focusFromSearchKeypress\":[32],\"initialOptionsListRender\":[32],\"preventIncorrectTabOrder\":[32],\"handleClickOpen\":[64],\"handleKeyboardOpen\":[64],\"handleSetFirstOption\":[64]},[[4,\"icClear\",\"handleClearListener\"],[4,\"icSubmitSearch\",\"handleSubmitSearch\"]]],[4,\"ic-input-component-container\",{\"disabled\":[4],\"readonly\":[4],\"validationStatus\":[1,\"validation-status\"],\"small\":[4],\"multiLine\":[4,\"multi-line\"],\"validationInline\":[4,\"validation-inline\"],\"dark\":[4],\"fullWidth\":[4,\"full-width\"]}],[4,\"ic-input-container\",{\"disabled\":[4],\"readonly\":[4]}]]],[\"ic-input-label_2\",[[4,\"ic-input-validation\",{\"message\":[1],\"for\":[1],\"status\":[1],\"fullWidth\":[4,\"full-width\"],\"ariaLiveMode\":[1,\"aria-live-mode\"]}],[0,\"ic-input-label\",{\"for\":[1],\"required\":[4],\"helperText\":[1,\"helper-text\"],\"label\":[1],\"disabled\":[4],\"readonly\":[4],\"error\":[4],\"dark\":[4]}]]],[\"ic-button_3\",[[1,\"ic-button\",{\"disabled\":[4],\"loading\":[4],\"type\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"variant\":[1],\"size\":[1],\"fullWidth\":[4,\"full-width\"],\"disableTooltip\":[4,\"disable-tooltip\"],\"tooltipPlacement\":[1,\"tooltip-placement\"],\"appearance\":[1025],\"setFocus\":[64],\"updateAriaLabel\":[64]},[[2,\"click\",\"handleHostClick\"],[4,\"icThemeChange\",\"themeChangeHandler\"]]],[1,\"ic-loading-indicator\",{\"progress\":[2],\"min\":[2],\"max\":[2],\"label\":[1],\"description\":[1],\"labelDuration\":[2,\"label-duration\"],\"size\":[513],\"type\":[513],\"fullWidth\":[516,\"full-width\"],\"appearance\":[1],\"indicatorLabel\":[32],\"indeterminate\":[32],\"showSecond\":[32],\"circularLineWidth\":[32],\"circularDiameter\":[32]}],[1,\"ic-tooltip\",{\"target\":[513],\"placement\":[1],\"label\":[1]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"ic-typography\",[[1,\"ic-typography\",{\"variant\":[1],\"applyVerticalMargins\":[4,\"apply-vertical-margins\"]}]]],[\"ic-search-bar\",[[1,\"ic-search-bar\",{\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"disableFilter\":[4,\"disable-filter\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"value\":[1537],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"name\":[1],\"spellcheck\":[4],\"options\":[16],\"focusOnLoad\":[4,\"focus-on-load\"],\"hintText\":[1,\"hint-text\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"charactersUntilSuggestion\":[2,\"characters-until-suggestion\"],\"open\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"showClearButton\":[32],\"clearButtonFocused\":[32],\"searchSubmitFocused\":[32],\"prevNoOption\":[32],\"highlightedValue\":[32],\"setFocus\":[64]},[[0,\"icKeydown\",\"handleKeyDown\"],[0,\"keyup\",\"handleKeyUp\"],[0,\"icMenuStateChange\",\"onMenuClose\"],[0,\"menuOptionId\",\"onMenuOptionHighlighted\"]]]]],[\"ic-select\",[[1,\"ic-select\",{\"label\":[1],\"options\":[16],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[516],\"readonly\":[4],\"placeholder\":[1],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"fullWidth\":[4,\"full-width\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"value\":[1025],\"name\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"searchable\":[4],\"includeDescriptionsInSearch\":[4,\"include-descriptions-in-search\"],\"includeGroupTitlesInSearch\":[4,\"include-group-titles-in-search\"],\"searchMatchPosition\":[1,\"search-match-position\"],\"charactersUntilSuggestions\":[2,\"characters-until-suggestions\"],\"emptyOptionListText\":[1,\"empty-option-list-text\"],\"open\":[32],\"clearButtonFocused\":[32],\"searchableSelectInputValue\":[32],\"filteredOptions\":[32],\"ariaActiveDescendant\":[32],\"noOptions\":[32],\"initialValue\":[32],\"setFocus\":[64]}]]],[\"ic-top-navigation\",[[1,\"ic-top-navigation\",{\"appTitle\":[1,\"app-title\"],\"href\":[1],\"version\":[1],\"status\":[1],\"contentAligned\":[1,\"content-aligned\"],\"inline\":[4],\"menuOpen\":[32],\"deviceSize\":[32],\"mobileSearchBarVisible\":[32],\"navMenuVisible\":[32],\"searchValue\":[32],\"mobileSearchHiddenOnBlur\":[32],\"searchButtonClick\":[32],\"foregroundColor\":[32],\"hasFullWidthSearchBar\":[32]},[[0,\"icNavigationMenuClose\",\"navBarMenuCloseHandler\"],[0,\"icSearchBarBlur\",\"searchInputBlurHandler\"],[0,\"icChange\",\"searchValueChangeHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-side-navigation\",[[1,\"ic-side-navigation\",{\"appTitle\":[1,\"app-title\"],\"status\":[1],\"version\":[1],\"expanded\":[4],\"href\":[1],\"static\":[4],\"collapsedIconLabels\":[4,\"collapsed-icon-labels\"],\"inline\":[4],\"disableAutoParentStyling\":[4,\"disable-auto-parent-styling\"],\"foregroundColor\":[32],\"menuOpen\":[32],\"menuExpanded\":[32],\"deviceSize\":[32],\"deviceSizeAppTitle\":[32],\"hasSecondaryNavigation\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-alert\",[[1,\"ic-alert\",{\"variant\":[1],\"heading\":[1],\"message\":[1],\"titleAbove\":[4,\"title-above\"],\"dismissible\":[4],\"announced\":[4],\"visible\":[32],\"alertTitleWrap\":[32]},[[2,\"icDismiss\",\"handleClick\"]]]]],[\"ic-card\",[[1,\"ic-card\",{\"clickable\":[1028],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"heading\":[1],\"subheading\":[1],\"message\":[1],\"disabled\":[4],\"fullWidth\":[4,\"full-width\"],\"expandable\":[4],\"parentIsAnchorTag\":[32],\"isFocussed\":[32],\"parentEl\":[32],\"appearance\":[32],\"areaExpanded\":[32]},[[2,\"click\",\"handleHostClick\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-navigation-button\",[[1,\"ic-navigation-button\",{\"label\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"mode\":[32],\"initialAppearance\":[32],\"setFocus\":[64]},[[4,\"icNavigationMenuOpened\",\"navBarMenuOpenHandler\"],[4,\"icNavigationMenuClosed\",\"navBarMenuCloseHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-checkbox-group\",[[1,\"ic-checkbox-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedOptions\":[32]},[[0,\"icCheck\",\"selectHandler\"]]]]],[\"ic-radio-group\",[[1,\"ic-radio-group\",{\"label\":[1],\"name\":[1],\"required\":[4],\"hideLabel\":[4,\"hide-label\"],\"disabled\":[4],\"helperText\":[1,\"helper-text\"],\"small\":[4],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"checkedValue\":[32],\"selectedChild\":[32]},[[0,\"icCheck\",\"selectHandler\"]]]]],[\"ic-breadcrumb-group\",[[1,\"ic-breadcrumb-group\",{\"backBreadcrumbOnly\":[4,\"back-breadcrumb-only\"],\"collapsed\":[4],\"deviceSize\":[32],\"expandedBreadcrumbs\":[32]}]]],[\"ic-chip\",[[1,\"ic-chip\",{\"label\":[1],\"appearance\":[1],\"size\":[1],\"dismissible\":[4],\"disabled\":[4],\"visible\":[32],\"isHovered\":[32]},[[2,\"dismiss\",\"handleClick\"]]]]],[\"ic-footer\",[[1,\"ic-footer\",{\"description\":[1],\"aligned\":[1],\"breakpoint\":[1],\"groupLinks\":[4,\"group-links\"],\"caption\":[1],\"copyright\":[4],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-footer-link-group\",[[1,\"ic-footer-link-group\",{\"groupTitle\":[1,\"group-title\"],\"small\":[32],\"expanded\":[32],\"dropdownIconStyle\":[32],\"deviceSize\":[32]},[[4,\"footerResized\",\"footerResizeHandler\"],[4,\"themeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-hero\",[[1,\"ic-hero\",{\"heading\":[1],\"subheading\":[1],\"secondaryHeading\":[1,\"secondary-heading\"],\"secondarySubheading\":[1,\"secondary-subheading\"],\"backgroundImage\":[1,\"background-image\"],\"disableBackgroundParallax\":[4,\"disable-background-parallax\"],\"aligned\":[1],\"contentAligned\":[1,\"content-aligned\"],\"small\":[4],\"rightContent\":[32],\"scrollFactor\":[32],\"leftContentFullWidth\":[32],\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"],[5,\"scroll\",\"doScroll\"]]]]],[\"ic-navigation-item\",[[1,\"ic-navigation-item\",{\"label\":[1],\"href\":[1],\"selected\":[4],\"expandable\":[4],\"displayNavigationTooltip\":[4,\"display-navigation-tooltip\"],\"collapsedIconLabel\":[4,\"collapsed-icon-label\"],\"isTopNavChild\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"sideNavExpanded\":[32],\"isSideNavMobile\":[32],\"setFocus\":[64]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-page-header\",[[1,\"ic-page-header\",{\"heading\":[1],\"subheading\":[1],\"aligned\":[1],\"small\":[4],\"border\":[4],\"sticky\":[4],\"stickyDesktopOnly\":[4,\"sticky-desktop-only\"],\"reverseOrder\":[4,\"reverse-order\"],\"deviceSize\":[32],\"areButtonsReversed\":[32],\"actionContent\":[32]}]]],[\"ic-step\",[[1,\"ic-step\",{\"variant\":[1],\"stepTitle\":[1,\"step-title\"],\"stepSubtitle\":[1,\"step-subtitle\"],\"stepStatus\":[1,\"step-status\"],\"stepType\":[1,\"step-type\"],\"current\":[1028],\"compactStepStyling\":[1,\"compact-step-styling\"],\"stepNum\":[2,\"step-num\"],\"lastStep\":[4,\"last-step\"],\"lastStepNum\":[2,\"last-step-num\"],\"nextStepTitle\":[1,\"next-step-title\"],\"progress\":[2]}]]],[\"ic-switch\",[[1,\"ic-switch\",{\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"checked\":[4],\"small\":[4],\"disabled\":[4],\"name\":[1],\"showState\":[4,\"show-state\"],\"value\":[1],\"checkedState\":[32],\"initiallyChecked\":[32]}]]],[\"ic-tab-group\",[[1,\"ic-tab-group\",{\"contextId\":[513,\"context-id\"],\"inline\":[516],\"label\":[1],\"appearance\":[1],\"firstTabVisible\":[32],\"lastTabVisible\":[32],\"tabOverflow\":[32],\"scrollTabIntoView\":[64]},[[0,\"tabFocus\",\"tabFocusHandler\"]]]]],[\"ic-back-to-top\",[[1,\"ic-back-to-top\",{\"target\":[1],\"bannerOffset\":[32],\"targetElVisible\":[32],\"footerVisible\":[32]}]]],[\"ic-checkbox\",[[1,\"ic-checkbox\",{\"checked\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"indeterminate\":[4],\"initiallyChecked\":[32]}]]],[\"ic-classification-banner\",[[1,\"ic-classification-banner\",{\"additionalSelectors\":[1,\"additional-selectors\"],\"classification\":[1],\"country\":[1],\"inline\":[4],\"upTo\":[4,\"up-to\"]}]]],[\"ic-data-entity\",[[1,\"ic-data-entity\",{\"heading\":[1],\"small\":[4]}]]],[\"ic-data-row\",[[1,\"ic-data-row\",{\"label\":[1],\"value\":[1],\"small\":[4],\"deviceSize\":[32],\"entitySize\":[32]}]]],[\"ic-navigation-group\",[[1,\"ic-navigation-group\",{\"label\":[1],\"expandable\":[4],\"dropdownOpen\":[32],\"inTopNavSideMenu\":[32],\"deviceSize\":[32],\"focusStyle\":[32],\"navigationType\":[32],\"parentEl\":[32],\"expanded\":[32],\"setFocus\":[64]},[[0,\"childBlur\",\"childBlurHandler\"],[0,\"navItemClicked\",\"navItemClickHandler\"],[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-radio-option\",[[1,\"ic-radio-option\",{\"selected\":[1540],\"disabled\":[4],\"label\":[1],\"value\":[1025],\"name\":[1],\"groupLabel\":[1,\"group-label\"],\"dynamicText\":[1,\"dynamic-text\"],\"additionalFieldDisplay\":[513,\"additional-field-display\"],\"initiallySelected\":[32]},[[0,\"icChange\",\"textfieldValueHandler\"]]]]],[\"ic-status-tag\",[[1,\"ic-status-tag\",{\"label\":[1],\"status\":[1],\"appearance\":[1],\"small\":[4],\"announced\":[4]}]]],[\"ic-tab\",[[1,\"ic-tab\",{\"contextId\":[513,\"context-id\"],\"disabled\":[4],\"selected\":[516],\"tabId\":[513,\"tab-id\"],\"tabPosition\":[2,\"tab-position\"],\"appearance\":[1]}]]],[\"ic-footer-link\",[[1,\"ic-footer-link\",{\"href\":[1],\"footerConfig\":[32],\"deviceSize\":[32],\"foregroundColor\":[32]},[[4,\"footerResized\",\"footerResizeHandler\"],[4,\"themeChange\",\"footerThemeChangeHandler\"]]]]],[\"ic-skeleton\",[[1,\"ic-skeleton\",{\"variant\":[1],\"light\":[4],\"hasChild\":[32],\"default\":[32],\"heightOnly\":[32],\"widthOnly\":[32]}]]],[\"ic-stepper\",[[1,\"ic-stepper\",{\"aligned\":[1],\"variant\":[1025],\"connectorWidth\":[2,\"connector-width\"],\"hideStepInfo\":[4,\"hide-step-info\"],\"stepperWidth\":[32],\"lastStepWidth\":[32],\"stepTypes\":[32],\"alignedFullWidth\":[32],\"autoSetStepTitles\":[32],\"variantOverride\":[32],\"noOfResizes\":[32]}]]],[\"ic-tab-context\",[[4,\"ic-tab-context\",{\"contextId\":[513,\"context-id\"],\"activationType\":[1,\"activation-type\"],\"selectedTabIndex\":[2,\"selected-tab-index\"],\"appearance\":[1],\"selectedTab\":[32]},[[0,\"tabClick\",\"tabClickHandler\"]]]]],[\"ic-tab-panel\",[[1,\"ic-tab-panel\",{\"contextId\":[513,\"context-id\"],\"tabPosition\":[514,\"tab-position\"],\"panelId\":[513,\"panel-id\"],\"selectedTab\":[1,\"selected-tab\"],\"appearance\":[1]}]]],[\"ic-theme\",[[1,\"ic-theme\",{\"color\":[1]}]]],[\"ic-input-component-container_3\",[[1,\"ic-menu\",{\"open\":[516],\"options\":[16],\"small\":[516],\"menuId\":[1,\"menu-id\"],\"value\":[1],\"activationType\":[1,\"activation-type\"],\"inputEl\":[16],\"parentEl\":[16],\"inputLabel\":[1,\"input-label\"],\"anchorEl\":[16],\"fullWidth\":[4,\"full-width\"],\"autoFocusOnSelected\":[4,\"auto-focus-on-selected\"],\"keyboardNav\":[32],\"optionHighlighted\":[32],\"focusFromSearchKeypress\":[32],\"initialOptionsListRender\":[32],\"preventIncorrectTabOrder\":[32],\"handleClickOpen\":[64],\"handleKeyboardOpen\":[64],\"handleSetFirstOption\":[64]},[[4,\"icClear\",\"handleClearListener\"],[4,\"icSubmitSearch\",\"handleSubmitSearch\"]]],[4,\"ic-input-component-container\",{\"disabled\":[4],\"readonly\":[4],\"validationStatus\":[1,\"validation-status\"],\"small\":[4],\"multiLine\":[4,\"multi-line\"],\"validationInline\":[4,\"validation-inline\"],\"dark\":[4],\"fullWidth\":[4,\"full-width\"]}],[4,\"ic-input-container\",{\"disabled\":[4],\"readonly\":[4]}]]],[\"ic-input-label_2\",[[4,\"ic-input-validation\",{\"message\":[1],\"for\":[1],\"status\":[1],\"fullWidth\":[4,\"full-width\"],\"ariaLiveMode\":[1,\"aria-live-mode\"]}],[0,\"ic-input-label\",{\"for\":[1],\"required\":[4],\"helperText\":[1,\"helper-text\"],\"label\":[1],\"disabled\":[4],\"readonly\":[4],\"error\":[4],\"dark\":[4]}]]],[\"ic-text-field\",[[1,\"ic-text-field\",{\"inputId\":[1,\"input-id\"],\"label\":[1],\"required\":[4],\"disabled\":[4],\"readonly\":[516],\"placeholder\":[1],\"fullWidth\":[4,\"full-width\"],\"hideLabel\":[4,\"hide-label\"],\"helperText\":[1,\"helper-text\"],\"rows\":[2],\"resize\":[4],\"small\":[516],\"value\":[1537],\"maxLength\":[2,\"max-length\"],\"validationStatus\":[1,\"validation-status\"],\"validationText\":[1,\"validation-text\"],\"validationInline\":[4,\"validation-inline\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autoFocus\":[4,\"auto-focus\"],\"debounce\":[2],\"type\":[1],\"inputmode\":[1],\"name\":[1],\"spellcheck\":[4],\"ariaActiveDescendant\":[1,\"aria-active-descendant\"],\"truncateValue\":[4,\"truncate-value\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaAutocomplete\":[1,\"aria-autocomplete\"],\"role\":[1],\"hiddenInput\":[4,\"hidden-input\"],\"numChars\":[32],\"maxLengthExceeded\":[32],\"initialValue\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-button_3\",[[1,\"ic-button\",{\"disabled\":[4],\"loading\":[4],\"type\":[1],\"href\":[1],\"target\":[1],\"rel\":[1],\"download\":[8],\"hreflang\":[1],\"referrerpolicy\":[1],\"variant\":[1],\"size\":[1],\"fullWidth\":[4,\"full-width\"],\"disableTooltip\":[4,\"disable-tooltip\"],\"tooltipPlacement\":[1,\"tooltip-placement\"],\"appearance\":[1025],\"setFocus\":[64],\"updateAriaLabel\":[64]},[[2,\"click\",\"handleHostClick\"],[4,\"themeChange\",\"themeChangeHandler\"]]],[1,\"ic-loading-indicator\",{\"progress\":[2],\"min\":[2],\"max\":[2],\"label\":[1],\"description\":[1],\"innerLabel\":[2,\"inner-label\"],\"labelDuration\":[2,\"label-duration\"],\"size\":[513],\"type\":[513],\"fullWidth\":[516,\"full-width\"],\"appearance\":[1],\"indicatorLabel\":[32],\"indeterminate\":[32],\"showSecond\":[32],\"circularLineWidth\":[32],\"compactStepCircularLineWidth\":[32],\"circularDiameter\":[32]}],[1,\"ic-tooltip\",{\"target\":[513],\"placement\":[1],\"label\":[1],\"disableHover\":[4,\"disable-hover\"]}]]],[\"ic-navigation-menu\",[[1,\"ic-navigation-menu\",{\"version\":[1],\"status\":[1]},[[0,\"navItemClicked\",\"navItemClickHandler\"],[4,\"keydown\",\"handleKeyDown\"]]]]],[\"ic-link\",[[1,\"ic-link\",{\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerpolicy\":[1],\"rel\":[1],\"target\":[1],\"showIcon\":[4,\"show-icon\"],\"appearance\":[1025]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-breadcrumb\",[[1,\"ic-breadcrumb\",{\"pageTitle\":[1,\"page-title\"],\"href\":[1],\"current\":[4],\"showBackIcon\":[516,\"show-back-icon\"]}]]],[\"ic-divider\",[[2,\"ic-divider\",{\"foregroundColor\":[32]},[[4,\"themeChange\",\"themeChangeHandler\"]]]]],[\"ic-section-container\",[[1,\"ic-section-container\",{\"aligned\":[1],\"fullHeight\":[4,\"full-height\"]}]]]]"), options);
   });
 };

package/dist/types/components/ic-alert/ic-alert.d.ts CHANGED Viewed

@@ -34,9 +34,13 @@ export declare class Alert {
   alertTitleWrap: boolean;
   handleClick(): void;
   /**
-   * Is emitted when the user dismisses the alert.
+   * @deprecated This event should not be used anymore. Use icDismiss instead.
    */
   dismiss: EventEmitter<void>;
+  /**
+   * Is emitted when the user dismisses the alert.
+   */
+  icDismiss: EventEmitter<void>;
   private dismissAction;
   private alertTitleShouldWrap;
   componentDidLoad(): void;