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

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

Files changed (826) hide show

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

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

@@ -1,33 +1,41 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { A as hexToRgb, B as rgbStrToObj, j as getThemeForegroundColor } from './helpers.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.js';
 const Theme = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    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) {
+        console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
+      }
+    };
     this.setThemeColor = () => {
       if (this.color !== null) {
-        let colorRGB = null;
+        let colorRGBA = null;
         const firstChar = this.color.slice(0, 1);
         if (firstChar === "#") {
-          colorRGB = hexToRgb(this.color);
+          colorRGBA = hexToRgba(this.color);
         }
         else if (firstChar.toLowerCase() === "r") {
-          colorRGB = rgbStrToObj(this.color);
+          colorRGBA = rgbaStrToObj(this.color);
         }
-        this.setThemeRGB(colorRGB);
+        this.setThemeRGBA(colorRGBA);
       }
     };
-    this.setThemeRGB = (colorRGB) => {
-      if (colorRGB !== null) {
+    this.setThemeRGBA = (colorRGBA) => {
+      if (colorRGBA !== null) {
         const root = document.documentElement;
-        root.style.setProperty("--ic-theme-primary-r", colorRGB.r.toString());
-        root.style.setProperty("--ic-theme-primary-g", colorRGB.g.toString());
-        root.style.setProperty("--ic-theme-primary-b", colorRGB.b.toString());
+        root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
+        root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
+        root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
+        root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
+        this.checkThemeColorContrast();
         const foregroundColor = getThemeForegroundColor();
-        this.icThemeChange.emit({ mode: foregroundColor, color: colorRGB });
+        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
       }
     };
     this.color = null;

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

	@@ -1 +1 @@
1	- {"file":"ic-theme.js","mappings":";;;~~MAqBa~~,KAAK;;;;;;IAgBR,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,~~QAAQ~~,GAAG,IAAI,CAAC;~~QACpB~~,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,~~QAAQ~~,GAAG,~~QAAQ~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~SACjC~~;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,~~QAAQ~~,GAAG,~~WAAW~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~SACpC~~;QACD,IAAI,CAAC,~~WAAW~~,CAAC,~~QAAQ~~,CAAC,CAAC;~~OAC5B~~;KACF,CAAC;IAEM,~~gBAAW~~,GAAG,CAAC,~~QAAoB~~;~~MACzC~~,IAAI,~~QAAQ~~,KAAK,IAAI,EAAE;~~QACrB~~,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,~~QAAQ~~,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;~~QACtE~~,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,~~QAAQ~~,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;~~QACtE~~,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;~~QACtE~~,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,~~aAAa~~,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,~~QAAQ~~,EAAE,CAAC,CAAC;~~OACrE~~;KACF,CAAC;~~iBAlCuB~~,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;~~EA+BD~~,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 { ~~IcColorRGB~~, IcTheme } from \"../../utils/types\";\nimport {\n getThemeForegroundColor,\n ~~hexToRgb~~,\n ~~rgbStrToObj~~,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-theme\",\n shadow: true,\n})\nexport class Theme {\n /*\n The theme colour. Can be a hex value eg \"#ff0000\" or RGB eg \"rgb(255, 0, 0)\"\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 setThemeColor = () => {\n if (this.color !== null) {\n let ~~colorRGB~~ = null;\n const firstChar = this.color.slice(0, 1);\n if (firstChar === \"#\") {\n ~~colorRGB~~ = ~~hexToRgb~~(this.color);\n } else if (firstChar.toLowerCase() === \"r\") {\n ~~colorRGB~~ = ~~rgbStrToObj~~(this.color);\n }\n this.~~setThemeRGB~~(~~colorRGB~~);\n }\n };\n\n private ~~setThemeRGB~~ = (~~colorRGB~~: ~~IcColorRGB~~) => {\n if (~~colorRGB~~ !== null) {\n const root = document.documentElement;\n root.style.setProperty(\"--ic-theme-primary-r\", ~~colorRGB~~.r.toString());\n root.style.setProperty(\"--ic-theme-primary-g\", ~~colorRGB~~.g.toString());\n root.style.setProperty(\"--ic-theme-primary-b\", ~~colorRGB~~.b.toString());\n const foregroundColor = getThemeForegroundColor();\n this.~~icThemeChange~~.emit({ mode: foregroundColor, color: ~~colorRGB~~ });\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.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/components/ic-toast-region.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface IcToastRegion extends Components.IcToastRegion, HTMLElement {}
+export const IcToastRegion: {
+  prototype: IcToastRegion;
+  new (): IcToastRegion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+const ToastRegion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.pendingVisibility = [];
+  }
+  /**
+   * Handles setting the visibility of various toasts based on what is already visible
+   * @param toast The toast element being requested to display
+   */
+  async setVisible(toast) {
+    const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
+    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
+      toast.setVisible().then((res) => (this.previouslyFocused = res));
+    }
+    if (visibleToasts.length > 0)
+      this.pendingVisibility.push(toast);
+  }
+  handleDismissedToast() {
+    var _a;
+    if (this.pendingVisibility.length > 0) {
+      this.pendingVisibility[0]
+        .setVisible()
+        .then((res) => (this.previouslyFocused = res));
+      this.pendingVisibility.shift();
+    }
+    else {
+      if (this.previouslyFocused && "setFocus" in this.previouslyFocused) {
+        this.previouslyFocused.setFocus();
+      }
+      else
+        (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return this; }
+}, [4, "ic-toast-region", {
+    "setVisible": [64]
+  }, [[2, "icDismiss", "handleDismissedToast"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-toast-region"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-toast-region":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToastRegion);
+      }
+      break;
+  } });
+}
+const IcToastRegion = ToastRegion;
+const defineCustomElement = defineCustomElement$1;
+export { IcToastRegion, defineCustomElement };
+//# sourceMappingURL=ic-toast-region.js.map

package/dist/components/ic-toast-region.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ic-toast-region.js","mappings":";;MAIa,WAAW;EADxB;;;IAKE,sBAAiB,GAAyB,EAAE,CAAC;GAkC9C;;;;;EA3BC,MAAM,UAAU,CAAC,KAAyB;IACxC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;IACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;MACpE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;KAClE;IACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;MAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAClE;EAGD,oBAAoB;;IAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;MACrC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;SACtB,UAAU,EAAE;SACZ,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;MACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;KAChC;SAAM;MACL,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;QACjE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;OAC9D;;QAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACxC;GACF;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-toast-region/ic-toast-region.tsx"],"sourcesContent":["import { Component, Element, h, Listen, Method } from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n @Element() el: HTMLIcToastRegionElement;\n\n previouslyFocused: HTMLElement;\n pendingVisibility: HTMLIcToastElement[] = [];\n\n /**\n * Handles setting the visibility of various toasts based on what is already visible\n * @param toast The toast element being requested to display\n */\n @Method()\n async setVisible(toast: HTMLIcToastElement) {\n const visibleToasts = Array.from(\n document.querySelectorAll(\"ic-toast\")\n ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n toast.setVisible().then((res) => (this.previouslyFocused = res));\n }\n if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismissedToast() {\n if (this.pendingVisibility.length > 0) {\n this.pendingVisibility[0]\n .setVisible()\n .then((res) => (this.previouslyFocused = res));\n this.pendingVisibility.shift();\n } else {\n if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n (this.previouslyFocused as IcFocusableComponents).setFocus();\n } else this.previouslyFocused?.focus();\n }\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}

package/dist/components/ic-toast.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface IcToast extends Components.IcToast, HTMLElement {}
+export const IcToast: {
+  prototype: IcToast;
+  new (): IcToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,214 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as closeIcon } from './close-icon.js';
+import { i as isSlotUsed, V as VARIANT_ICONS, a as onComponentRequiredPropUndefined, F as getSlot } from './helpers.js';
+import { I as IcThemeForegroundEnum } from './types.js';
+import { d as defineCustomElement$5 } from './ic-button2.js';
+import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+const icToastCss = "/*! 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{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);animation:fadein var(--ic-transition-duration-slow) ease-in-out}:host(.hidden){display:none;animation:fadeout var(--ic-transition-duration-slow) ease-in-out}.container{max-width:32.5rem;min-width:18rem;box-shadow:var(--ic-elevation-overlay);min-height:3.5rem;background-color:var(--ic-architectural-800);color:var(--ic-color-white-text);display:flex;align-items:center;position:relative;border-radius:var(--ic-border-radius)}.toast-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);position:absolute;border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs)}.divider-neutral{background-color:var(--ic-architectural-500)}.divider-info{background-color:var(--ic-status-info-contrast)}.divider-warning{background-color:var(--ic-status-warning-contrast)}.divider-error{background-color:var(--ic-status-error-contrast)}.divider-success{background-color:var(--ic-status-success-contrast)}.toast-icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}:host([variant=\"neutral\"]) .toast-icon svg,::slotted(svg){fill:var(--ic-architectural-500)}:host([variant=\"info\"]) .toast-icon svg{fill:var(--ic-status-info-contrast)}:host([variant=\"warning\"]) .toast-icon svg{fill:var(--ic-status-warning-contrast)}:host([variant=\"error\"]) .toast-icon svg{fill:var(--ic-status-error-contrast)}:host([variant=\"success\"]) .toast-icon svg{fill:var(--ic-status-success-contrast)}.toast-content{margin-left:var(--ic-space-xs);width:100%}.no-icon{margin-left:var(--ic-space-md)}.toast-message{padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}.toast-action-container{padding-bottom:var(--ic-space-md)}ic-button,.toast-dismiss-timer{padding:var(--ic-space-xs)}@media (max-width: 576px){:host{--bottom-position:var(--ic-space-lg);width:calc(100% - 2 * var(--ic-space-md))}}@media (min-width: 993px){:host{--bottom-position:calc(var(--ic-space-xl) + var(--ic-space-xs))}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:var(--bottom-position);opacity:1}}@keyframes fadeout{from{bottom:var(--bottom-position);opacity:1}to{bottom:0;opacity:0}}";
+const AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;
+const TOAST_HEADING_CHAR_LIMIT = 70;
+const TOAST_MESSAGE_CHAR_LIMIT = 140;
+const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icDismiss = createEvent(this, "icDismiss", 7);
+    this.interactiveElements = [];
+    this.dismissAction = () => {
+      this.icDismiss.emit();
+    };
+    this.handleProgressChange = () => {
+      this.timerProgress -=
+        (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;
+    };
+    this.heading = undefined;
+    this.variant = undefined;
+    this.message = undefined;
+    this.dismissMode = "manual";
+    this.autoDismissTimeout = 5000;
+    this.neutralIconAriaLabel = undefined;
+    this.dismissButtonAriaLabel = "dismiss";
+    this.visible = false;
+    this.timerProgress = 100;
+  }
+  /**
+   * Used to display the individual toast
+   * @returns The element that previously had focus before the toast appeared
+   */
+  async setVisible() {
+    if (!this.visible)
+      this.visible = true;
+    if (!this.isManual) {
+      this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+      this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+      return null;
+    }
+    else {
+      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
+      return document.activeElement;
+    }
+  }
+  handleDismiss() {
+    this.visible = false;
+    clearInterval(this.timerRefreshInterval);
+    this.timerProgress = 100;
+  }
+  handleKeyboard(ev) {
+    if (this.isManual && this.visible) {
+      switch (ev.key) {
+        case "Tab":
+          ev.preventDefault();
+          this.findNextInteractiveElement(ev.shiftKey).setFocus();
+          break;
+        case "Escape":
+          !ev.repeat && this.dismissAction();
+          ev.stopImmediatePropagation();
+          break;
+      }
+    }
+  }
+  handleTimer(ev) {
+    if (!this.isManual) {
+      switch (ev.type) {
+        case "mouseenter":
+          window.clearTimeout(this.dismissTimeout);
+          window.clearInterval(this.timerRefreshInterval);
+          this.timerProgress = 100;
+          break;
+        case "mouseleave":
+          this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+          this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+          break;
+      }
+    }
+  }
+  handleLongText(headingTooLong, messageTooLong) {
+    if (messageTooLong || headingTooLong) {
+      console.error(`Too many characters in toast ${headingTooLong ? "heading" : ""}${headingTooLong && messageTooLong ? " and " : ""}${messageTooLong ? "message" : ""}. Refer to character limits specified in the prop description`);
+    }
+  }
+  findNextInteractiveElement(isBackwards) {
+    const first = this.interactiveElements[0];
+    const last = this.interactiveElements[this.interactiveElements.length - 1];
+    const source = isBackwards ? first : last;
+    const target = isBackwards ? last : first;
+    if (this.isActive(source))
+      return target;
+    let currentIndex;
+    const found = this.interactiveElements.some((el, index) => {
+      if (!this.isActive(el))
+        return false;
+      currentIndex = index;
+      return true;
+    });
+    if (!found)
+      return first;
+    return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];
+  }
+  isActive(targetEl) {
+    if (targetEl === this.el)
+      return !!this.el.shadowRoot.activeElement;
+    return document.activeElement === targetEl;
+  }
+  componentWillLoad() {
+    var _a, _b;
+    this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
+    if (this.autoDismissTimeout < 5000)
+      this.autoDismissTimeout = 5000;
+    if (isSlotUsed(this.el, "action"))
+      this.dismissMode = "manual";
+    this.isManual = this.dismissMode === "manual";
+    if (isSlotUsed(this.el, "neutral-icon"))
+      this.variant = "neutral";
+    if (this.variant === "neutral") {
+      this.neutralVariantLabel =
+        (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : VARIANT_ICONS[this.variant].ariaLabel;
+    }
+    if (this.isManual) {
+      this.el.setAttribute("aria-label", this.variant
+        ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel
+        : this.heading);
+      (this.variant || this.message) &&
+        this.el.setAttribute("aria-description", this.variant
+          ? `${this.heading}${this.message !== undefined ? `. ${this.message}` : ""}`
+          : this.message);
+    }
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Toast");
+    const actionContent = getSlot(this.el, "action");
+    const dismissButton = this.el.shadowRoot.querySelector("ic-button");
+    if (actionContent)
+      this.interactiveElements.push(actionContent);
+    if (dismissButton)
+      this.interactiveElements.push(dismissButton);
+  }
+  render() {
+    const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
+    return (h(Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, h("div", { class: "container" }, variant && visible && (h("div", { class: "toast-icon-container" }, h("div", { class: {
+        ["divider"]: true,
+        [`divider-${variant}`]: true,
+      } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { class: {
+        ["toast-content"]: true,
+        ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
+      } }, h("div", { class: "toast-message" }, h("ic-typography", { variant: "subtitle-large" }, visible && h("h5", null, heading)), message && (h("ic-typography", { variant: "body" }, visible && h("p", null, message)))), isSlotUsed(this.el, "action") && (h("div", { class: "toast-action-container" }, h("slot", { name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum.Light, "aria-label": dismissButtonAriaLabel })))));
+  }
+  get el() { return this; }
+  static get style() { return icToastCss; }
+}, [1, "ic-toast", {
+    "heading": [1],
+    "variant": [1],
+    "message": [1],
+    "dismissMode": [1, "dismiss-mode"],
+    "autoDismissTimeout": [2, "auto-dismiss-timeout"],
+    "neutralIconAriaLabel": [1, "neutral-icon-aria-label"],
+    "dismissButtonAriaLabel": [1, "dismiss-button-aria-label"],
+    "visible": [32],
+    "timerProgress": [32],
+    "setVisible": [64]
+  }, [[2, "icDismiss", "handleDismiss"], [4, "keydown", "handleKeyboard"], [1, "mouseenter", "handleTimer"], [1, "mouseleave", "handleTimer"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-toast", "ic-button", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+const IcToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+export { IcToast, defineCustomElement };
+//# sourceMappingURL=ic-toast.js.map

package/dist/components/ic-toast.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ic-toast.js","mappings":"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","names":[],"sources":["./src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","./src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n --bottom-position: var(--ic-space-xl);\n\n position: fixed;\n bottom: var(--bottom-position);\n left: 50%;\n transform: translate(-50%);\n animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n}\n\n:host(.hidden) {\n display: none;\n animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n}\n\n.container {\n max-width: 32.5rem;\n min-width: 18rem;\n box-shadow: var(--ic-elevation-overlay);\n min-height: 3.5rem;\n background-color: var(--ic-architectural-800);\n color: var(--ic-color-white-text);\n display: flex;\n align-items: center;\n position: relative;\n border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n position: absolute;\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n background-color: var(--ic-architectural-500);\n}\n\n.divider-info {\n background-color: var(--ic-status-info-contrast);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning-contrast);\n}\n\n.divider-error {\n background-color: var(--ic-status-error-contrast);\n}\n\n.divider-success {\n background-color: var(--ic-status-success-contrast);\n}\n\n.toast-icon,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n fill: var(--ic-architectural-500);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n fill: var(--ic-status-info-contrast);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n fill: var(--ic-status-warning-contrast);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n fill: var(--ic-status-error-contrast);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n fill: var(--ic-status-success-contrast);\n}\n\n.toast-content {\n margin-left: var(--ic-space-xs);\n width: 100%;\n}\n\n.no-icon {\n margin-left: var(--ic-space-md);\n}\n\n.toast-message {\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-action-container {\n padding-bottom: var(--ic-space-md);\n}\n\nic-button,\n.toast-dismiss-timer {\n padding: var(--ic-space-xs);\n}\n\n@media (max-width: 576px) {\n :host {\n --bottom-position: var(--ic-space-lg);\n\n width: calc(100% - 2 * var(--ic-space-md));\n }\n}\n\n@media (min-width: 993px) {\n :host {\n --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n\n@keyframes fadein {\n from {\n bottom: 0;\n opacity: 0;\n }\n\n to {\n bottom: var(--bottom-position);\n opacity: 1;\n }\n}\n\n@keyframes fadeout {\n from {\n bottom: var(--bottom-position);\n opacity: 1;\n }\n\n to {\n bottom: 0;\n opacity: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcActivationTypes,\n IcStatusVariants,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n @Element() el: HTMLIcToastElement;\n /**\n * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n */\n @Prop() heading!: string;\n /**\n * The variant of the toast being rendered\n */\n @Prop() variant?: IcStatusVariants;\n /**\n * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n */\n @Prop() message?: string;\n /**\n * How the toast will be dismissed. If manual will display a dismiss button.\n */\n @Prop() dismissMode?: IcActivationTypes = \"manual\";\n /**\n * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n */\n @Prop() autoDismissTimeout? = 5000;\n /**\n * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n */\n @Prop() neutralIconAriaLabel?: string;\n /**\n * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n */\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n /**\n * Is emitted when the user dismisses the toast\n */\n @Event() icDismiss: EventEmitter<void>;\n\n @State() visible = false;\n @State() timerProgress = 100;\n\n dismissTimeout: number;\n timerRefreshInterval: number;\n isManual: boolean;\n interactiveElements: ActionAreaElementTypes[] = [];\n neutralVariantLabel: string;\n\n /**\n * Used to display the individual toast\n * @returns The element that previously had focus before the toast appeared\n */\n @Method()\n async setVisible() {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.isManual && this.visible) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n if (!this.isManual) {\n switch (ev.type) {\n case \"mouseenter\":\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n break;\n case \"mouseleave\":\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n break;\n }\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong || headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const first = this.interactiveElements[0];\n const last = this.interactiveElements[this.interactiveElements.length - 1];\n\n const source = isBackwards ? first : last;\n const target = isBackwards ? last : first;\n if (this.isActive(source)) return target;\n\n let currentIndex: number;\n const found = this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n });\n\n if (!found) return first;\n return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n if (targetEl === this.el) return !!this.el.shadowRoot.activeElement;\n return document.activeElement === targetEl;\n }\n\n componentWillLoad() {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant || this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant\n ? `${this.heading}${\n this.message !== undefined ? `. ${this.message}` : \"\"\n }`\n : this.message\n );\n }\n }\n\n componentDidLoad() {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"hidden\"]: !visible }}\n role={isManual ? \"dialog\" : \"status\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-message\">\n <ic-typography variant=\"subtitle-large\">\n {visible && <h5>{heading}</h5>}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n appearance=\"light\"\n size=\"icon\"\n progress={this.timerProgress}\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Light}\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}