npm - @ukic/web-components - Versions diffs - 2.26.0 → 2.28.0 - Mend

@ukic/web-components 2.26.0 → 2.28.0

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

Files changed (113) hide show

package/dist/components/ic-radio-group.js CHANGED Viewed

@@ -75,6 +75,9 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
                         this.selectedChild = index;
                         this.checkedValue = radioOption.value;
                     }
+                    if (this.disabled) {
+                        radioOption.disabled = true;
+                    }
                 });
                 this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);
                 if (this.initialOrientation === this.RADIO_HORIZONTAL &&
@@ -103,6 +106,9 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisabledHandler(newValue) {
+        this.radioOptions.forEach((radioOption) => (radioOption.disabled = newValue));
+    }
     orientationChangeHandler() {
         this.initialOrientation = this.orientation;
         this.checkOrientation();
@@ -196,6 +202,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
     }
     get el() { return this; }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "orientation": ["orientationChangeHandler"]
     }; }
     static get style() { return icRadioGroupCss; }
@@ -216,6 +223,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         "initialOrientation": [32],
         "selectedChild": [32]
     }, [[0, "icCheck", "selectHandler"], [0, "icSelectedChange", "changeHandler"]], {
+        "disabled": ["watchDisabledHandler"],
         "orientation": ["orientationChangeHandler"]
     }]);
 function defineCustomElement$1() {

package/dist/components/ic-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,sjGAAsjG;;MCiCjkG,UAAU;;;;;;QAGb,mBAAc,GAAmB,IAAI,CAAC;QACtC,qBAAgB,GAAG,kBAAkB,CAAC;QACtC,qBAAgB,GAAkB,YAAY,CAAC;QAC/C,mBAAc,GAAkB,UAAU,CAAC;QAyI3C,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACtC,CAAC;QAkCM,kBAAa,GAAG,CAAC,KAAoB;YAC3C,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACf,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CACnD,CAAC,KAAK,EAAE,CAAC;oBACV,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACR,KAAK,SAAS,CAAC;gBACf,KAAK,WAAW;oBACd,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CACpD,CAAC,KAAK,EAAE,CAAC;oBACV,KAAK,CAAC,cAAc,EAAE,CAAC;aAC1B;SACF,CAAC;QAEM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB;YAEnB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;YAE/C,IAAI,WAAW,GAAG,CAAC,EAAE;gBACnB,WAAW,GAAG,CAAC,CAAC;aACjB;YAED,IAAI,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC;;YAG9D,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,QAAQ,GAAG,SAAS,CAAC;aACtB;iBAAM,IAAI,QAAQ,GAAG,SAAS,EAAE;gBAC/B,QAAQ,GAAG,CAAC,CAAC;aACd;;YAGD,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;gBACxC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;aAC3D;YAED,OAAO,QAAQ,CAAC;SACjB,CAAC;QAEM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAC1E,CAAC;QAEM,gCAA2B,GAAG,CAAC,KAAa;YAClD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACzC,CAAC;QAEM,oBAAe,GAAG;YACxB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC5E,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;gBAChC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK;oBAC3C,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;wBACzB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;qBAChE;oBACD,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBAC7B,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;oBACpC,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;wBAC3B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC;qBACvC;iBACF,CAAC,CAAC;gBACH,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAElE,IACE,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,gBAAgB;oBACjD,IAAI,CAAC,YAAY,KAAK,SAAS;qBAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;yBAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC;6BAC5B,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;gCACtD,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAChE;oBACA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC;iBAC/C;aACF;SACF,CAAC;4BA/P8B,EAAE;;;6BAGD,CAAC,CAAC;wBAKP,KAAK;;yBAUJ,KAAK;;;2BAeG,UAAU;wBAKnB,KAAK;oBAKD,SAAS;qBAKf,KAAK;gCAKwB,EAAE;8BAIxB,EAAE;;IAGnC,wBAAwB;QACtB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC;QAC3C,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAOD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,MAAA,IAAI,CAAC,cAAc,0CAAE,mBAAmB,CACtC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAC;KACH;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;KACnD;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,gCAAgC,CAC9B;YACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;SACtC,EACD,aAAa,CACd,CAAC;KACH;IAGD,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,EAAmC;;QAC/D,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;QACjC,MAAM,cAAc,GAAG,MAAkC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,YAAY;YACxB,cAAc,EAAE;gBACd,KAAK,EAAE,cAAc;gBACrB,cAAc,EAAE,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,aAAa,CAAC,eAAe,CAAC,0CAAE,KAAK;aACtE;SACF,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YACnC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK;gBAC3C,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;gBAC/D,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;iBAC5B;aACF,CAAC,CAAC;YACH,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SACnE;KACF;IAGD,aAAa;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAChD,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,CACtC,CAAC;QACF,IAAI,cAAc,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;SACrC;KACF;IAUO,gBAAgB;;QACtB,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,gBAAgB,EAAE;YACrD,IAAI,UAAU,GAAG,CAAC,CAAC;YACnB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,GAAG;oBAChD,UAAU,IAAI,WAAW,CAAC;oBAC1B,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC;wBAAE,UAAU,IAAI,EAAE,CAAC;iBAC1C,CAAC,CAAC;aACJ;iBAAM;gBACL,UAAU,GAAG,CAAC,CAAC;aAChB;YAED,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACpD,IACE,IAAI,CAAC,YAAY,KAAK,SAAS;qBAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;yBAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC;6BAC5B,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;gCACtD,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAChE;oBACA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC;iBAC/C;qBAAM;oBACL,IAAI,UAAU,KAAI,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAA,EAAE;wBAClD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC;qBAC/C;yBAAM,IAAI,UAAU,IAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAA,EAAE;wBACxD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC;qBACjD;iBACF;aACF;SACF;KACF;IAsFD,MAAM;QACJ,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,QAAQ,CACd,CAAC;QAEF,QACE,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,IAErD,WACE,IAAI,EAAC,YAAY,gBACL,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE,EAAE,IAE9D,CAAC,IAAI,CAAC,SAAS,KACd,sBACE,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,CACnB,EACD,WACE,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI;gBAC/B,UAAU,EAAE,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,gBAAgB;aAC9D,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAEvC,eAAa,CACT,CACF,EACL,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,KACxD,2BACE,YAAY,EAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,OAAO,EAAE,IAAI,CAAC,cAAc,GACP,CACxB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderHiddenInput,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /*\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n If `true`, the 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 label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the radio group component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = detail.value;\n const selectedOption = target as HTMLIcRadioOptionElement;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n class={{ small: this.small \|\| this.size === \"small\" }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-radio-group.js","mappings":"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","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderHiddenInput,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /*\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n }\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n If `true`, the 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 label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the radio group component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = detail.value;\n const selectedOption = target as HTMLIcRadioOptionElement;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n class={{ small: this.small \|\| this.size === \"small\" }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -103,6 +103,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         this.max = undefined;
         this.maxCharacters = 0;
         this.maxLength = 0;
+        this.maxLengthMessage = "Maximum length exceeded";
         this.min = undefined;
         this.minCharacters = 0;
         this.name = this.inputId;
@@ -194,7 +195,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
                 : IcInformationStatus.Error
             : validationStatus;
         const currentValidationText = maxLengthExceeded
-            ? "Maximum length exceeded"
+            ? this.maxLengthMessage
             : maxCharactersError
                 ? `Maximum input is ${maxCharacters} characters`
                 : maxValueExceeded
@@ -279,6 +280,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         "max": [8],
         "maxCharacters": [2, "max-characters"],
         "maxLength": [2, "max-length"],
+        "maxLengthMessage": [1, "max-length-message"],
         "min": [8],
         "minCharacters": [2, "min-characters"],
         "name": [1],

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/normalize.css\";\n\n:host {\n /*\n @prop --input-width: Width of the input field\n /\n display: block;\n}\n\n:host(.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 padding-right: var(--ic-space-xxxs);\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 forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} 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;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\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 private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersError: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxLengthExceeded: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n\n /\n @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n /\n\n /\n @internal The active element when focus is on the ic-menu items.\n /\n @Prop() ariaActiveDescendant?: string;\n\n /\n @internal Used to identify whether inputting any text triggers more predictions\n /\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\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 The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n /\n @Prop() autocapitalize = \"off\";\n\n /\n The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autoFocus = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\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 The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string = \"\";\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 @internal If `true`, the hidden form input will stop rendering for form submission.\n /\n @Prop() hiddenInput: boolean = true;\n\n /\n The ID for the input.\n /\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /\n A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n /\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /\n The label for the input.\n /\n @Prop() label!: string;\n\n /\n The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n /\n @Prop() max: string \| number = undefined;\n\n /\n The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.\n /\n @Prop() maxCharacters: number = 0;\n\n /\n The count of characters in the field. Will display a warning if the bound is reached.\n /\n @Prop() maxLength: number = 0;\n\n /\n The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n /\n @Prop() min: string \| number = undefined;\n\n /\n The minimum number of characters that can be entered in the field.\n /\n @Prop() minCharacters: number = 0;\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 The placeholder value to be displayed.\n /\n @Prop() placeholder: string = \"\";\n\n /\n If `true`, the read only state will be set.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n If `true`, the input will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n If `true`, the multiline text area will be resizeable.\n /\n @Prop() resize: boolean = false;\n\n /\n @internal Used to set the role if not default textbox;\n /\n @Prop() role: 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 The size of the text field component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\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 @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 The type of control to display. The default type is text.\n /\n @Prop() type: IcTextFieldTypes = \"text\";\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 @internal If `true`, the validation will display inline.\n /\n @Prop() validationInlineInternal: boolean = false;\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 The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.getMaxLengthExceeded(newValue);\n\n this.getMaxCharactersReached(newValue);\n\n this.icChange.emit({ value: newValue });\n }\n\n /\n @internal Emitted when the validationInlineInternal is `true`\n /\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input loses focus.\n /\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input gains focus.\n /\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keydown event occurred.\n /\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n }\n\n this.getMaxLengthExceeded(this.value);\n\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersError = this.maxCharactersReached;\n }\n\n /\n Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getMaxLengthExceeded = (value: string) => {\n this.numChars = value.length;\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n\n if (this.maxLength > 0) {\n this.maxLengthExceeded = this.numChars > this.maxLength;\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = value.length;\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersError && !this.maxCharactersReached) {\n this.maxCharactersError = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n maxCharacters,\n maxCharactersError,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const currentStatus =\n maxLengthExceeded \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n minCharactersUnattained \|\|\n maxCharactersError\n ? maxCharactersError\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? \"Maximum length exceeded\"\n : maxCharactersError\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n const messageAriaLive =\n maxLengthExceeded \|\|\n maxCharactersError \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n const hiddenCharCountDescId =\n maxLength > 0 ? `${inputId}-charcount-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\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 size={small ? \"small\" : size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: 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 min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={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 maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false \|\| readonly,\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholder ? placeholder : \"\"}\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 maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\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 maxValueExceeded \|\|\n maxCharactersError \|\|\n minCharactersUnattained \|\|\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false \|\|\n (currentStatus === IcInformationStatus.Success &&\n validationInline) \|\|\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: 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(.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 padding-right: var(--ic-space-xxxs);\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 forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} 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;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\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 private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersError: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxLengthExceeded: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n\n /\n @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n /\n\n /\n @internal The active element when focus is on the ic-menu items.\n /\n @Prop() ariaActiveDescendant?: string;\n\n /\n @internal Used to identify whether inputting any text triggers more predictions\n /\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\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 The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n /\n @Prop() autocapitalize = \"off\";\n\n /\n The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autoFocus = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\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 The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string = \"\";\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 @internal If `true`, the hidden form input will stop rendering for form submission.\n /\n @Prop() hiddenInput: boolean = true;\n\n /\n The ID for the input.\n /\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /\n A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n /\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /\n The label for the input.\n /\n @Prop() label!: string;\n\n /\n The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n /\n @Prop() max: string \| number = undefined;\n\n /\n The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.\n /\n @Prop() maxCharacters: number = 0;\n\n /\n The count of characters in the field. Will display a warning if the bound is reached.\n /\n @Prop() maxLength: number = 0;\n\n /\n The text to display as the validation message when the maximum length is exceeded.\n /\n @Prop() maxLengthMessage: string = \"Maximum length exceeded\";\n\n /\n The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n /\n @Prop() min: string \| number = undefined;\n\n /\n The minimum number of characters that can be entered in the field.\n /\n @Prop() minCharacters: number = 0;\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 The placeholder value to be displayed.\n /\n @Prop() placeholder: string = \"\";\n\n /\n If `true`, the read only state will be set.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n If `true`, the input will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n If `true`, the multiline text area will be resizeable.\n /\n @Prop() resize: boolean = false;\n\n /\n @internal Used to set the role if not default textbox;\n /\n @Prop() role: 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 The size of the text field component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\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 @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 The type of control to display. The default type is text.\n /\n @Prop() type: IcTextFieldTypes = \"text\";\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 @internal If `true`, the validation will display inline.\n /\n @Prop() validationInlineInternal: boolean = false;\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 The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.getMaxLengthExceeded(newValue);\n\n this.getMaxCharactersReached(newValue);\n\n this.icChange.emit({ value: newValue });\n }\n\n /\n @internal Emitted when the validationInlineInternal is `true`\n /\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input loses focus.\n /\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when input gains focus.\n /\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a keydown event occurred.\n /\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n }\n\n this.getMaxLengthExceeded(this.value);\n\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersError = this.maxCharactersReached;\n }\n\n /\n Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus(): Promise<void> {\n this.inputEl?.focus();\n }\n\n private getMaxLengthExceeded = (value: string) => {\n this.numChars = value.length;\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n\n if (this.maxLength > 0) {\n this.maxLengthExceeded = this.numChars > this.maxLength;\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = value.length;\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersError && !this.maxCharactersReached) {\n this.maxCharactersError = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n maxCharacters,\n maxCharactersError,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const currentStatus =\n maxLengthExceeded \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n minCharactersUnattained \|\|\n maxCharactersError\n ? maxCharactersError\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? this.maxLengthMessage\n : maxCharactersError\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n const messageAriaLive =\n maxLengthExceeded \|\|\n maxCharactersError \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n const hiddenCharCountDescId =\n maxLength > 0 ? `${inputId}-charcount-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\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 size={small ? \"small\" : size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: 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 min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={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 maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false \|\| readonly,\n [\"no-left-pad\"]: !showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholder ? placeholder : \"\"}\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 maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\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 maxValueExceeded \|\|\n maxCharactersError \|\|\n minCharactersUnattained \|\|\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false \|\|\n (currentStatus === IcInformationStatus.Success &&\n validationInline) \|\|\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: 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-toast.js CHANGED Viewed

@@ -7,7 +7,7 @@ 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;z-index:var(--ic-z-index-toast)}: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-status-unknown)}.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-status-unknown)}: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 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}@media (prefers-reduced-motion: no-preference){:host{animation:fadein var(--ic-transition-duration-slow) ease-in-out}:host(.hidden){animation:fadeout var(--ic-transition-duration-slow) ease-in-out}}:host{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);z-index:var(--ic-z-index-toast)}:host(.hidden){display:none}.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-status-unknown)}.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-status-unknown)}: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;

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

	@@ -1 +1 @@
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/*\n @prop --ic-z-index-toast: z-index of toast\n /\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 z-index: var(--ic-z-index-toast);\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-status-unknown);\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-status-unknown);\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 Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isPropDefined,\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 private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private isManual: boolean;\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n\n @Element() el: HTMLIcToastElement;\n\n @State() timerProgress = 100;\n @State() visible = false;\n\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({ mutable: true }) autoDismissTimeout? = 5000;\n\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 /\n How the toast will be dismissed. If manual will display a dismiss button.\n /\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n @Watch(\"dismissMode\")\n dismissModeChangeHandler(newValue: IcActivationTypes): void {\n this.isManual = newValue === \"manual\";\n }\n\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 /\n The main body message of the toast. (NOTE: Should be no more than `140` characters)\n /\n @Prop() message?: string;\n\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 /\n The variant of the toast being rendered\n /\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /\n Is emitted when the user dismisses the toast\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\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 const toastMessage: string = isPropDefined(this.message)\n ? `. ${this.message}`\n : \"\";\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 ? `${this.heading}${toastMessage}` : this.message\n );\n }\n }\n\n componentDidLoad(): void {\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 @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 /\n @internal Used to display the individual toast.\n * @returns The element that previously had focus before the toast appeared\n /\n @Method()\n async setVisible(): Promise<HTMLElement> {\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 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 firstEl = this.interactiveElements[0];\n const lastEl =\n this.interactiveElements[this.interactiveElements.length - 1];\n\n if (this.isActive(isBackwards ? firstEl : lastEl))\n return isBackwards ? lastEl : firstEl;\n\n let currentIndex: number;\n\n return this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n })\n ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n : firstEl;\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n return targetEl === this.el\n ? !!this.el.shadowRoot.activeElement\n : document.activeElement === targetEl;\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}
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/*\n @prop --ic-z-index-toast: z-index of toast\n /\n\n@media (prefers-reduced-motion: no-preference) {\n :host {\n animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host(.hidden) {\n animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n }\n}\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 z-index: var(--ic-z-index-toast);\n}\n\n:host(.hidden) {\n display: none;\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-status-unknown);\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-status-unknown);\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 Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isPropDefined,\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 private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private isManual: boolean;\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n\n @Element() el: HTMLIcToastElement;\n\n @State() timerProgress = 100;\n @State() visible = false;\n\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({ mutable: true }) autoDismissTimeout? = 5000;\n\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 /\n How the toast will be dismissed. If manual will display a dismiss button.\n /\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n @Watch(\"dismissMode\")\n dismissModeChangeHandler(newValue: IcActivationTypes): void {\n this.isManual = newValue === \"manual\";\n }\n\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 /\n The main body message of the toast. (NOTE: Should be no more than `140` characters)\n /\n @Prop() message?: string;\n\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 /\n The variant of the toast being rendered\n /\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /\n Is emitted when the user dismisses the toast\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\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 const toastMessage: string = isPropDefined(this.message)\n ? `. ${this.message}`\n : \"\";\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 ? `${this.heading}${toastMessage}` : this.message\n );\n }\n }\n\n componentDidLoad(): void {\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 @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 /\n @internal Used to display the individual toast.\n * @returns The element that previously had focus before the toast appeared\n /\n @Method()\n async setVisible(): Promise<HTMLElement> {\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 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 firstEl = this.interactiveElements[0];\n const lastEl =\n this.interactiveElements[this.interactiveElements.length - 1];\n\n if (this.isActive(isBackwards ? firstEl : lastEl))\n return isBackwards ? lastEl : firstEl;\n\n let currentIndex: number;\n\n return this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n })\n ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n : firstEl;\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n return targetEl === this.el\n ? !!this.el.shadowRoot.activeElement\n : document.activeElement === targetEl;\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}