npm - @ukic/web-components - Versions diffs - 3.11.0 → 3.12.0 - Mend

@ukic/web-components 3.11.0 → 3.12.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 (357) hide show

package/dist/components/ic-input-validation2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-input-validation2.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG~~,+4BAA+4B~~,CAAC;~~AAC76B~~,gCAAe,oBAAoB;;ACenC,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,GAAG,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;CAC3C,CAAC;AACF,MAAM,cAAc,GAAG,QAAQ,CAAC;MASnB,eAAe;IAJ5B;;;;;;QAYU,iBAAY,~~GAA4B~~,QAAQ,CAAC;;;;~~QAUjD~~,cAAS,GAAa,KAAK,CAAC;;;;QAmB5B,WAAM,GAAgC,EAAE,CAAC;~~KA4ClD~~;~~IAxDC~~,mBAAmB,CAAC,QAAgB;;;QAGlC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;QAC5C,UAAU,CAAC;YACT,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;SACvC,EAAE,GAAG,CAAC,CAAC;KACT;IAOD,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;KAC7C;IAED,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,GAAG,IAAI,CAAC,MAAO,CAAC,GAAG,EAAE,CAAC;QACvD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,CAAC,CAAC,SAAS;~~aAC9C~~,IAEA,WAAW,KAAK,EAAE,KACjB,6DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,EACD,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IACjD,6DAAM,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,IACrD,OAAO,CACH,EAEP,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAqB,CAAC,EACrD,KAAK,EAAC,SAAS,eACJ,YAAY,GACjB,CACM,EAChB,6DAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n width: var(--input-width, 20rem);\n margin-top: var(--ic-space-xs);\n ~~display: flex;\n~~}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n}\n\nic-input-validation .sr-only {\n position: absolute;\n left: -9999px;\n}\n","import { Element, Component, Host, Prop, h, Watch } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\~~nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\~~n\nconst ICON = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\nconst INVISIBLE_CHAR = \"\\u200B\";\n\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n private messageEl!: HTMLSpanElement;\n\n @Element() el: HTMLIcInputValidationElement;\n\n /\n The ARIA live mode to apply to the message.\n /\n @Prop() ariaLiveMode?: ~~IcAriaLiveModeVariants~~ = \"polite\";\n\n /\n The ID of the form element the validation is bound to.\n /\n @Prop() for?: string;\n\n /\n If `true`, the input validation will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The validation message to display.\n /\n @Prop() message!: string;\n @Watch(\"message\")\n watchMessageHandler(newValue: string) {\n // Force detectable DOM changes\n // Invisible character used as screen readers can ignore whitespace changes e.g. \"\" and \" \"\n this.messageEl.textContent = INVISIBLE_CHAR;\n setTimeout(() => {\n this.messageEl.textContent = newValue;\n }, ~~100~~); // Delay to help ensure screen readers detect change\n }\n\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n this.messageEl.textContent = INVISIBLE_CHAR;\n }\n\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? ICON[status!] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": !!fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span id={this.for && getInputValidationTextID(this.for)}>\n {message}\n </span>\n {/ Separate aria-live region to avoid flashing due to textContent delay */}\n <span\n ref={(el) => (this.messageEl = el as HTMLSpanElement)}\n class=\"sr-only\"\n aria-live={ariaLiveMode}\n ></span>\n </ic-typography>\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-input-validation2.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,m8BAAm8B,CAAC;AACj+B,gCAAe,oBAAoB;;ACenC,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,GAAG,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;CAC3C,CAAC;AACF,MAAM,cAAc,GAAG,QAAQ,CAAC;MASnB,eAAe;IAJ5B;;;;;;QAYU,iBAAY,GAAgB,QAAQ,CAAC;;;;QAUrC,cAAS,GAAa,KAAK,CAAC;;;;QAmB5B,WAAM,GAAgC,EAAE,CAAC;KA6ClD;IAzDC,mBAAmB,CAAC,QAAgB;;;QAGlC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;QAC5C,UAAU,CAAC;YACT,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;SACvC,EAAE,GAAG,CAAC,CAAC;KACT;IAOD,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;KAC7C;IAED,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,GAAG,IAAI,CAAC,MAAO,CAAC,GAAG,EAAE,CAAC;QACvD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,CAAC,CAAC,SAAS;gBAC7C,iCAAiC,EAAE,MAAM,KAAK,EAAE;aACjD,IAEA,WAAW,KAAK,EAAE,KACjB,6DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,EACD,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IACjD,6DAAM,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,IACrD,OAAO,CACH,EAEP,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAqB,CAAC,EACrD,KAAK,EAAC,SAAS,eACJ,YAAY,GACjB,CACM,EAChB,6DAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n width: var(--input-width, 20rem);\n display: flex;\n}\n\nic-input-validation.ic-input-validation-with-status {\n margin-top: var(--ic-space-xs);\n}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n}\n\nic-input-validation .sr-only {\n position: absolute;\n left: -9999px;\n}\n","import { Element, Component, Host, Prop, h, Watch } from \"@stencil/core\";\n\nimport {\n IcAriaLive,\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst ICON = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\nconst INVISIBLE_CHAR = \"\\u200B\";\n\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n private messageEl!: HTMLSpanElement;\n\n @Element() el: HTMLIcInputValidationElement;\n\n /\n The ARIA live mode to apply to the message.\n /\n @Prop() ariaLiveMode?: IcAriaLive = \"polite\";\n\n /\n The ID of the form element the validation is bound to.\n /\n @Prop() for?: string;\n\n /\n If `true`, the input validation will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The validation message to display.\n /\n @Prop() message!: string;\n @Watch(\"message\")\n watchMessageHandler(newValue: string) {\n // Force detectable DOM changes\n // Invisible character used as screen readers can ignore whitespace changes e.g. \"\" and \" \"\n this.messageEl.textContent = INVISIBLE_CHAR;\n setTimeout(() => {\n this.messageEl.textContent = newValue;\n }, 200); // Delay to help ensure screen readers detect change\n }\n\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n this.messageEl.textContent = INVISIBLE_CHAR;\n }\n\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? ICON[status!] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": !!fullWidth,\n \"ic-input-validation-with-status\": status !== \"\",\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span id={this.for && getInputValidationTextID(this.for)}>\n {message}\n </span>\n {/ Separate aria-live region to avoid flashing due to textContent delay */}\n <span\n ref={(el) => (this.messageEl = el as HTMLSpanElement)}\n class=\"sr-only\"\n aria-live={ariaLiveMode}\n ></span>\n </ic-typography>\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}