npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.33 → 3.0.0-canary.35 - Mend

@ukic/canary-web-components 3.0.0-canary.33 → 3.0.0-canary.35

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 (946) hide show

package/dist/components/ic-empty-state2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-empty-state2.js","mappings":"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","names":[],"sources":["../web-components/dist/collection/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","../web-components/dist/collection/components/ic-empty-state/ic-empty-state.js"],"sourcesContent":[":host {\n gap: var(--ic-space-xs);\n padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n display: flex;\n flex-direction: column;\n}\n\n.action-area {\n gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n align-items: flex-end;\n text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n align-items: center;\n text-align: center;\n}\n\n:host(.image-medium) ::slotted(svg),\n:host(.image-medium) ::slotted(img) {\n height: calc(3 * var(--ic-space-lg)) !important;\n width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n height: var(--ic-space-xxl) !important;\n width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n height: calc(4 * var(--ic-space-xl)) !important;\n width: calc(4 * var(--ic-space-xl)) !important;\n}\n\n::slotted([slot=\"heading\"]),\n.empty-state-heading {\n --ic-typography-color: var(--ic-empty-state-title);\n}\n\n::slotted([slot=\"subheading\"]),\n.empty-state-subheading {\n --ic-typography-color: var(--ic-empty-state-subtitle);\n}\n\n::slotted([slot=\"body\"]),\n.empty-state-body {\n --ic-typography-color: var(--ic-empty-state-body);\n}\n","import { h, Host } from \"@stencil/core\";\nimport { isSlotUsed, onComponentRequiredPropUndefined, renderDynamicChildSlots, } from \"../../utils/helpers\";\n/*\n @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n /\nexport class EmptyState {\n constructor() {\n this.hostMutationObserver = null;\n /\n The alignment of the empty state container.\n /\n this.aligned = \"left\";\n /\n The size of the image or icon used in the image slot.\n /\n this.imageSize = \"medium\";\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n this.theme = \"inherit\";\n }\n disconnectedCallback() {\n var _a;\n (_a = this.hostMutationObserver) === null \|\| _a === void 0 ? void 0 : _a.disconnect();\n }\n componentDidLoad() {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined([{ prop: this.heading, propName: \"heading\" }], \"Empty State\");\n this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this));\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n render() {\n const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;\n return (h(Host, { key: '4bb35d1c3476b88cc58e952b1b8785e4425d5339', class: {\n [`ic-empty-state-${aligned}`]: true,\n [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n } }, isSlotUsed(this.el, \"image\") && h(\"slot\", { key: '9e87ed9f746d37f57505a75c62b10279b31ef54e', name: \"image\" }), h(\"div\", { key: '4f94dc11d843660d3fecd976fa71f9c57644c89b' }, h(\"slot\", { key: 'be23c55a8dc832904fbae342890d2a3d2d74ae85', name: \"heading\" }, h(\"ic-typography\", { key: '52bf3dca695fecff3e5d650bd81db23d09665258', variant: \"h4\", class: \"empty-state-heading\" }, heading)), h(\"slot\", { key: '7ed10d78475ac8b9c3f5a084a1294ad1be180f15', name: \"subheading\" }, h(\"ic-typography\", { key: '5772d056578a64a951178c3c3026b36d4b316496', variant: \"subtitle-small\", class: \"empty-state-subheading\" }, subheading)), h(\"slot\", { key: '14a8815b51a06521642921f09fa8346483522e84', name: \"body\" }, h(\"ic-typography\", { key: 'bca780cc2275e81d4e25bae45f5065f6fab3bcd5', maxLines: maxLines, class: \"empty-state-body\" }, body))), isSlotUsed(this.el, \"actions\") && (h(\"div\", { key: 'd6c0f61a358c1d0c86c4da922ed0504ffdc8228f', class: \"action-area\" }, h(\"slot\", { key: 'ac150a34e883376bfee43a6edbeb8992c3bc3f96', name: \"actions\" })))));\n }\n static get is() { return \"ic-empty-state\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-empty-state.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-empty-state.css\"]\n };\n }\n static get properties() {\n return {\n \"aligned\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcEmptyStateAlignment\",\n \"resolved\": \"\\\"center\\\" \| \\\"left\\\" \| \\\"right\\\" \| undefined\",\n \"references\": {\n \"IcEmptyStateAlignment\": {\n \"location\": \"import\",\n \"path\": \"./ic-empty-state.types\",\n \"id\": \"src/components/ic-empty-state/ic-empty-state.types.ts::IcEmptyStateAlignment\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The alignment of the empty state container.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"aligned\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"left\\\"\"\n },\n \"body\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The body text rendered in the empty state container.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"body\",\n \"reflect\": false\n },\n \"maxLines\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The number of lines of body text to display before truncating.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"max-lines\",\n \"reflect\": false\n },\n \"heading\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The title rendered in the empty state container.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"heading\",\n \"reflect\": false\n },\n \"imageSize\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcSizes\",\n \"resolved\": \"\\\"large\\\" \| \\\"medium\\\" \| \\\"small\\\" \| undefined\",\n \"references\": {\n \"IcSizes\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcSizes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the image or icon used in the image slot.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"image-size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"medium\\\"\"\n },\n \"subheading\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The subtitle rendered in the empty state container.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"subheading\",\n \"reflect\": false\n },\n \"theme\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcThemeMode\",\n \"resolved\": \"\\\"dark\\\" \| \\\"inherit\\\" \| \\\"light\\\" \| undefined\",\n \"references\": {\n \"IcThemeMode\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcThemeMode\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Sets the theme color to the dark or light theme color. \\\"inherit\\\" will set the color based on the system settings or ic-theme component.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"theme\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"inherit\\\"\"\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-empty-state.js.map\n"],"version":3}
1	+ {"file":"ic-empty-state2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qsCAAqsC,CAAC;AAC9tC,2BAAe,eAAe;;MCqBjB,UAAU;IALvB;;;;QAMU,yBAAoB,GAA4B,IAAI,CAAC;;;;QAOrD,YAAO,GAA2B,MAAM,CAAC;;;;QAoBzC,cAAS,GAAa,QAAQ,CAAC;;;;QAU/B,UAAK,GAAiB,SAAS,CAAC;KA6DzC;IA3DC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;KACzC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAC5D,uBAAuB,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,CAClE,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GACtE,IAAI,CAAC;QACP,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,GAAG,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;gBACpD,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC3D,8DACE,6DAAM,IAAI,EAAC,SAAS,IAClB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,IACpD,OAAO,CACM,CACX,EACP,6DAAM,IAAI,EAAC,YAAY,IACrB,sEACE,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAC,wBAAwB,IAE7B,UAAU,CACG,CACX,EACP,6DAAM,IAAI,EAAC,MAAM,IACf,sEAAe,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACxD,IAAI,CACS,CACX,CACH,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,KAC7B,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/src/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","../web-components/src/components/ic-empty-state/ic-empty-state.tsx"],"sourcesContent":[":host {\n gap: var(--ic-space-xs);\n padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n display: flex;\n flex-direction: column;\n}\n\n.action-area {\n gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n align-items: flex-end;\n text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n align-items: center;\n text-align: center;\n}\n\n:host(.image-medium) ::slotted(svg),\n:host(.image-medium) ::slotted(img) {\n height: calc(3 * var(--ic-space-lg)) !important;\n width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n height: var(--ic-space-xxl) !important;\n width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n height: calc(4 * var(--ic-space-xl)) !important;\n width: calc(4 * var(--ic-space-xl)) !important;\n}\n\n::slotted([slot=\"heading\"]),\n.empty-state-heading {\n --ic-typography-color: var(--ic-empty-state-title);\n}\n\n::slotted([slot=\"subheading\"]),\n.empty-state-subheading {\n --ic-typography-color: var(--ic-empty-state-subtitle);\n}\n\n::slotted([slot=\"body\"]),\n.empty-state-body {\n --ic-typography-color: var(--ic-empty-state-body);\n}\n","import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n /\n@Component({\n tag: \"ic-empty-state\",\n styleUrl: \"ic-empty-state.css\",\n shadow: true,\n})\nexport class EmptyState {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcEmptyStateElement;\n\n /\n The alignment of the empty state container.\n /\n @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n /\n The body text rendered in the empty state container.\n /\n @Prop() body?: string;\n\n /\n The number of lines of body text to display before truncating.\n /\n @Prop() maxLines?: number;\n\n /\n The title rendered in the empty state container.\n /\n @Prop() heading?: string;\n\n /\n The size of the image or icon used in the image slot.\n /\n @Prop() imageSize?: IcSizes = \"medium\";\n\n /\n The subtitle rendered in the empty state container.\n /\n @Prop() subheading?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Empty State\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n render() {\n const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n this;\n return (\n <Host\n class={{\n [`ic-empty-state-${aligned}`]: true,\n [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n <div>\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n {heading}\n </ic-typography>\n </slot>\n <slot name=\"subheading\">\n <ic-typography\n variant=\"subtitle-small\"\n class=\"empty-state-subheading\"\n >\n {subheading}\n </ic-typography>\n </slot>\n <slot name=\"body\">\n <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n {body}\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-input-component-container.d.ts ADDED Viewed

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

package/dist/components/ic-input-component-container2.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, j as renderDynamicChildSlots, G as slotHasContent, B as IcInformationStatus, F as successIcon } from './helpers.js';
+import { r as removeDisabledFalse, s as renderDynamicChildSlots, u as slotHasContent, v as IcInformationStatus } from './helpers.js';
+import { s as successIcon } from './success-icon.js';
 const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;min-height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-color-background-primary));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%;max-width:none}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed\n    var(--border-color-disabled, var(--ic-color-border-neutral-disabled))}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly{height:auto;background:transparent}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-readonly:hover{border:none;padding:0}ic-input-component-container.ic-input-component-container-error{border:var(--ic-space-xxxs) solid\n    var(--border-color-error, var(--ic-color-border-error));padding:0}ic-input-component-container.ic-input-component-container-error:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-hover, var(--ic-color-border-error-hover))}ic-input-component-container.ic-input-component-container-error:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-pressed, var(--ic-color-border-error-pressed))}ic-input-component-container.ic-input-component-container-warning{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning, var(--ic-color-border-warning));padding:0}ic-input-component-container.ic-input-component-container-warning:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-hover, var(--ic-color-border-warning-hover))}ic-input-component-container.ic-input-component-container-warning:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed))}ic-input-component-container.ic-input-component-container-success{border:var(--ic-space-xxxs) solid\n    var(--border-color-success, var(--ic-color-border-success));padding:0}ic-input-component-container.ic-input-component-container-success:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-hover, var(--ic-color-border-success-hover))}ic-input-component-container.ic-input-component-container-success:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-pressed, var(--ic-color-border-success-pressed))}ic-input-component-container.ic-input-component-container-small{height:var(--ic-space-xl);min-height:var(--ic-space-xl)}ic-input-component-container.ic-input-component-container-large{height:var(--ic-space-xxl);min-height:var(--ic-space-xxl)}ic-input-component-container.ic-input-component-container-multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-multiline .icon-container,ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.ic-input-component-container-readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.ic-input-component-container-disabled ::-moz-placeholder{display:none}ic-input-component-container.ic-input-component-container-disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container .inline-success>svg{fill:var(--ic-input-component-container-success-icon-inline-color);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-input-component-container-hover-border);border-color:var(--border-color-hover, var(--ic-color-border-neutral-hover));color:var(--ic-action-monochrome-hover-dark)}ic-input-component-container:focus{border:var(--ic-border-pressed);border-color:var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  )}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.ic-input-component-container-dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed GrayText}}@media screen AND (max-width: 22rem){ic-input-component-container{max-width:var(--input-width, 20rem);width:100%}}";
 const IcInputComponentContainerStyle0 = icInputComponentContainerCss;
@@ -49,15 +50,15 @@ const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComp
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {
+        return (h(Host, { key: '4ce0c194959b44cdd842d34b5b759f0b23f5c271', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: "icon-container" }, h("slot", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: "left-icon" }))), h("slot", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'a4a1d531a7b5c15bd6210b60138f0929f668ec71', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '2171f48bc9d96bed43da15fd1c8458a16f22a110', class: "icon-container" }, h("slot", { key: '228037f7e82c8bf250e35ce945a0e31b2f3872aa', name: "left-icon" }))), h("slot", { key: '6e6816037636f4686784765446fd406decac84a6' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '5d0c4fbfc8ae8950a5543df471ab6e5ec1f38b08', class: "inline-success", innerHTML: successIcon })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ic-input-component-container2.js","mappings":";;;AAAA,MAAM,4BAA4B,GAAG,swKAAswK,CAAC;AAC5yK,wCAAe,4BAA4B;;MCM9B,uBAAuB;IAChC;;;;;;QAII,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;;;;QAItB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;;;QAIvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;;;QAIvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;;;;QAItB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;;;;QAIrB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;;;;QAI9B,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;KAC9B;IACD,oBAAoB;QAChB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IACD,iBAAiB;QACb,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/C;IACD,gBAAgB;QACZ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAAK,uBAAuB,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;QAC7H,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACnE;IACD,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,GAAG,GAAG,IAAI,CAAC;QACrG,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,CAAC,gCAAgC,IAAI,EAAE,GAAG,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,GAAG,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACvG,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,wCAAwC,EAAE,CAAC,CAAC,SAAS;gBACrD,yCAAyC,EAAE,CAAC,CAAC,SAAS;aACzD,EAAE,eAAe,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,EAAE,gBAAgB;YAC7a,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;KAChL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","../web-components/dist/collection/components/ic-input-component-container/ic-input-component-container.js"],"sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n * @prop --border-color-hover: Border colour of the input component container on hover\n * @prop --border-color-pressed: Border colour of the input component container when pressed\n * @prop --border-color-disabled: Border colour of the input component container when disabled\n * @prop --border-color-error: Border colour of the error variant for input component container\n * @prop --border-color-error-hover: Border colour of the error hover variant for input component container\n * @prop --border-color-error-pressed: Border colour of the error pressed variant for input component container\n * @prop --border-color-warning: Border colour of the warning variant for input component container\n * @prop --border-color-warning-hover: Border colour of the warning hover variant for input component container\n * @prop --border-color-warning-pressed: Border colour of the warning pressed variant for input component container\n * @prop --border-color-success: Border colour of the success variant for input component container\n * @prop --border-color-success-hover: Border colour of the success hover variant for input component container\n * @prop --border-color-success-pressed: Border colour of the success pressed variant for input component container\n /\n\n display: flex;\n border: var(--ic-border-width) solid\n var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 2.5rem;\n min-height: 2.5rem;\n width: var(--input-width, 20rem);\n padding: var(--ic-space-1px);\n background-color: var(--input-bg-color, var(--ic-color-background-primary));\n box-sizing: border-box;\n fill: var(--ic-architectural-400);\n outline: none;\n}\n\nic-input-component-container.ic-input-component-container-full-width {\n width: 100%;\n max-width: none;\n}\n\nic-input-component-container.ic-input-component-container-disabled,\nic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed\n var(--border-color-disabled, var(--ic-color-border-neutral-disabled));\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly {\n height: auto;\n background: transparent;\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error, var(--ic-color-border-error));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-hover, var(--ic-color-border-error-hover));\n}\n\nic-input-component-container.ic-input-component-container-error:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-pressed, var(--ic-color-border-error-pressed));\n}\n\nic-input-component-container.ic-input-component-container-warning {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning, var(--ic-color-border-warning));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-warning:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-hover, var(--ic-color-border-warning-hover));\n}\n\nic-input-component-container.ic-input-component-container-warning:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed));\n}\n\nic-input-component-container.ic-input-component-container-success {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success, var(--ic-color-border-success));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-success:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-hover, var(--ic-color-border-success-hover));\n}\n\nic-input-component-container.ic-input-component-container-success:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-pressed, var(--ic-color-border-success-pressed));\n}\n\nic-input-component-container.ic-input-component-container-small {\n height: var(--ic-space-xl);\n min-height: var(--ic-space-xl);\n}\n\nic-input-component-container.ic-input-component-container-large {\n height: var(--ic-space-xxl);\n min-height: var(--ic-space-xxl);\n}\n\nic-input-component-container.ic-input-component-container-multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 0.438rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.ic-input-component-container-multiline\n .icon-container,\nic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small\n .icon-container {\n margin-top: 0.375rem;\n display: block;\n}\n\nic-input-component-container.ic-input-component-container-readonly\n .icon-container {\n margin-left: -0.313rem;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n ::-moz-placeholder {\n display: none;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 0.375rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-input-component-container-success-icon-inline-color);\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-component-container:hover {\n border: var(--ic-input-component-container-hover-border);\n border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));\n color: var(--ic-action-monochrome-hover-dark);\n}\n\nic-input-component-container:focus {\n border: var(--ic-border-pressed);\n border-color: var(\n --border-color-pressed,\n var(--ic-color-border-neutral-pressed)\n );\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -0.125rem;\n padding: 0.125rem;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.ic-input-component-container-dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n ic-input-component-container,\n .focus-indicator {\n transition: none;\n }\n\n ic-input-component-container:focus-within {\n border: var(--ic-border-width) solid Highlight;\n outline: 0.125rem solid Highlight;\n }\n\n ic-input-component-container.ic-input-component-container-disabled,\n ic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed GrayText;\n }\n}\n\n/ Breakpoint value chosen as it's a small amount bigger than the input's default width /\n@media screen AND (max-width: 22rem) {\n ic-input-component-container {\n max-width: var(--input-width, 20rem);\n width: 100%;\n }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { IcInformationStatus, } from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { removeDisabledFalse, renderDynamicChildSlots, slotHasContent, } from \"../../utils/helpers\";\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\nexport class InputComponentContainer {\n constructor() {\n /\n If `true`, the disabled state will be set.\n /\n this.disabled = false;\n /\n If `true`, the input component container will fill the width of the container it is in.\n /\n this.fullWidth = false;\n /\n If `true`, the input component container will allow for multiple lines.\n /\n this.multiLine = false;\n /\n If `true`, the readonly state will be set.\n /\n this.readonly = false;\n /\n The size of the input component container component.\n /\n this.size = \"medium\";\n /\n If `true`, the validation will display inline.\n /\n this.validationInline = false;\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n this.validationStatus = \"\";\n }\n watchDisabledHandler() {\n removeDisabledFalse(this.disabled, this.el);\n }\n componentWillLoad() {\n removeDisabledFalse(this.disabled, this.el);\n }\n componentDidLoad() {\n this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, \"left-icon\", this));\n this.hostMutationObserver.observe(this.el, { childList: true });\n }\n render() {\n const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;\n return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {\n [`ic-input-component-container-${size}`]: true,\n [`ic-input-component-container-${validationStatus}`]: validationStatus !== \"\" && !disabled && !readonly,\n \"ic-input-component-container-disabled\": !!disabled,\n \"ic-input-component-container-readonly\": !!readonly,\n \"ic-input-component-container-multiline\": !!multiLine,\n \"ic-input-component-container-full-width\": !!fullWidth,\n }, \"aria-disabled\": disabled ? \"true\" : null }, h(\"div\", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: \"focus-indicator\" }, slotHasContent(this.el, \"left-icon\") && (h(\"div\", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: \"icon-container\" }, h(\"slot\", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: \"left-icon\" }))), h(\"slot\", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&\n validationStatus === IcInformationStatus.Success && (h(\"span\", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: \"inline-success\", innerHTML: successIcon })))));\n }\n static get is() { return \"ic-input-component-container\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-input-component-container.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-input-component-container.css\"]\n };\n }\n static get properties() {\n return {\n \"disabled\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the disabled state will be set.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"disabled\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"fullWidth\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the input component container will fill the width of the container it is in.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"full-width\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"multiLine\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the input component container will allow for multiple lines.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"multi-line\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"readonly\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the readonly state will be set.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"readonly\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcSizes\",\n \"resolved\": \"\\\"large\\\" \| \\\"medium\\\" \| \\\"small\\\" \| undefined\",\n \"references\": {\n \"IcSizes\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcSizes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the input component container component.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"medium\\\"\"\n },\n \"validationInline\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the validation will display inline.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"validation-inline\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"validationStatus\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcInformationStatusOrEmpty\",\n \"resolved\": \"\\\"\\\" \| \\\"error\\\" \| \\\"success\\\" \| \\\"warning\\\" \| undefined\",\n \"references\": {\n \"IcInformationStatusOrEmpty\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcInformationStatusOrEmpty\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"validation-status\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"\\\"\"\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"disabled\",\n \"methodName\": \"watchDisabledHandler\"\n }];\n }\n}\n//# sourceMappingURL=ic-input-component-container.js.map\n"],"version":3}
1	+ {"file":"ic-input-component-container2.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,swKAAswK,CAAC;AAC5yK,wCAAe,4BAA4B;;MCoB9B,uBAAuB;IAJpC;;;;;;QAWU,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,aAAQ,GAAa,KAAK,CAAC;;;;QAK3B,SAAI,GAAa,QAAQ,CAAC;;;;QAK1B,qBAAgB,GAAa,KAAK,CAAC;;;;QAKnC,qBAAgB,GAAgC,EAAE,CAAC;KAqD5D;IArFC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAgCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAC5D,uBAAuB,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,CACzD,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,EAAE,GAAG,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,GACjD,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,wCAAwC,EAAE,CAAC,CAAC,SAAS;gBACrD,yCAAyC,EAAE,CAAC,CAAC,SAAS;aACvD,mBACc,QAAQ,GAAG,MAAM,GAAG,IAAI,IAEvC,4DAAK,KAAK,EAAC,iBAAiB,IACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KACnC,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,8DAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,6DAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","../web-components/src/components/ic-input-component-container/ic-input-component-container.tsx"],"sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n * @prop --border-color-hover: Border colour of the input component container on hover\n * @prop --border-color-pressed: Border colour of the input component container when pressed\n * @prop --border-color-disabled: Border colour of the input component container when disabled\n * @prop --border-color-error: Border colour of the error variant for input component container\n * @prop --border-color-error-hover: Border colour of the error hover variant for input component container\n * @prop --border-color-error-pressed: Border colour of the error pressed variant for input component container\n * @prop --border-color-warning: Border colour of the warning variant for input component container\n * @prop --border-color-warning-hover: Border colour of the warning hover variant for input component container\n * @prop --border-color-warning-pressed: Border colour of the warning pressed variant for input component container\n * @prop --border-color-success: Border colour of the success variant for input component container\n * @prop --border-color-success-hover: Border colour of the success hover variant for input component container\n * @prop --border-color-success-pressed: Border colour of the success pressed variant for input component container\n /\n\n display: flex;\n border: var(--ic-border-width) solid\n var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 2.5rem;\n min-height: 2.5rem;\n width: var(--input-width, 20rem);\n padding: var(--ic-space-1px);\n background-color: var(--input-bg-color, var(--ic-color-background-primary));\n box-sizing: border-box;\n fill: var(--ic-architectural-400);\n outline: none;\n}\n\nic-input-component-container.ic-input-component-container-full-width {\n width: 100%;\n max-width: none;\n}\n\nic-input-component-container.ic-input-component-container-disabled,\nic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed\n var(--border-color-disabled, var(--ic-color-border-neutral-disabled));\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly {\n height: auto;\n background: transparent;\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error, var(--ic-color-border-error));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-hover, var(--ic-color-border-error-hover));\n}\n\nic-input-component-container.ic-input-component-container-error:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-pressed, var(--ic-color-border-error-pressed));\n}\n\nic-input-component-container.ic-input-component-container-warning {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning, var(--ic-color-border-warning));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-warning:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-hover, var(--ic-color-border-warning-hover));\n}\n\nic-input-component-container.ic-input-component-container-warning:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed));\n}\n\nic-input-component-container.ic-input-component-container-success {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success, var(--ic-color-border-success));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-success:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-hover, var(--ic-color-border-success-hover));\n}\n\nic-input-component-container.ic-input-component-container-success:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-pressed, var(--ic-color-border-success-pressed));\n}\n\nic-input-component-container.ic-input-component-container-small {\n height: var(--ic-space-xl);\n min-height: var(--ic-space-xl);\n}\n\nic-input-component-container.ic-input-component-container-large {\n height: var(--ic-space-xxl);\n min-height: var(--ic-space-xxl);\n}\n\nic-input-component-container.ic-input-component-container-multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 0.438rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.ic-input-component-container-multiline\n .icon-container,\nic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small\n .icon-container {\n margin-top: 0.375rem;\n display: block;\n}\n\nic-input-component-container.ic-input-component-container-readonly\n .icon-container {\n margin-left: -0.313rem;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 0.375rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-input-component-container-success-icon-inline-color);\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-component-container:hover {\n border: var(--ic-input-component-container-hover-border);\n border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));\n color: var(--ic-action-monochrome-hover-dark);\n}\n\nic-input-component-container:focus {\n border: var(--ic-border-pressed);\n border-color: var(\n --border-color-pressed,\n var(--ic-color-border-neutral-pressed)\n );\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -0.125rem;\n padding: 0.125rem;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.ic-input-component-container-dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n ic-input-component-container,\n .focus-indicator {\n transition: none;\n }\n\n ic-input-component-container:focus-within {\n border: var(--ic-border-width) solid Highlight;\n outline: 0.125rem solid Highlight;\n }\n\n ic-input-component-container.ic-input-component-container-disabled,\n ic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed GrayText;\n }\n}\n\n/ Breakpoint value chosen as it's a small amount bigger than the input's default width /\n@media screen AND (max-width: 22rem) {\n ic-input-component-container {\n max-width: var(--input-width, 20rem);\n width: 100%;\n }\n}\n","import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport {\n removeDisabledFalse,\n renderDynamicChildSlots,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n private hostMutationObserver: MutationObserver;\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the input component container will fill the width of the container it is in.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine?: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly?: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline?: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"left-icon\", this)\n );\n this.hostMutationObserver.observe(this.el, { childList: true });\n }\n\n render() {\n const {\n size,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n validationInline,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-input-component-container-${size}`]: true,\n [`ic-input-component-container-${validationStatus}`]:\n validationStatus !== \"\" && !disabled && !readonly,\n \"ic-input-component-container-disabled\": !!disabled,\n \"ic-input-component-container-readonly\": !!readonly,\n \"ic-input-component-container-multiline\": !!multiLine,\n \"ic-input-component-container-full-width\": !!fullWidth,\n }}\n aria-disabled={disabled ? \"true\" : null}\n >\n <div class=\"focus-indicator\">\n {slotHasContent(this.el, \"left-icon\") && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span class=\"inline-success\" innerHTML={successIcon} />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-input-container.d.ts ADDED Viewed

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

package/dist/components/ic-input-container2.js CHANGED Viewed

@@ -17,11 +17,11 @@ const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer ext
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
+        return (h(Host, { key: '4972bfd415ef2a642e95cd811ff7e31898e43cd0' }, h("div", { key: 'effb404bd0ba47ab01378c8490f49ea94d11c811', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
+            } }, h("slot", { key: 'bc30d37419c23f4615394b6b9152a190444a939b' }))));
     }
     static get style() { return IcInputContainerStyle0; }
 }, [4, "ic-input-container", {

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

	@@ -1 +1 @@
1	- {"file":"ic-input-container2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,6EAA6E,CAAC;AAC1G,+BAAe,mBAAmB;;~~MCArB~~,cAAc;~~IACvB~~;;;;;;~~QAII~~,~~IAAI~~,~~CAAC~~,~~QAAQ,GAAG,~~KAAK,CAAC;;;;~~QAItB~~,~~IAAI~~,~~CAAC~~,~~QAAQ,GAAG,~~KAAK,CAAC;~~KACzB~~;~~IACD~~,MAAM;~~QACF~~,~~QAAQ~~,~~CAAC~~,~~CAAC,~~IAAI,~~EAAE~~,~~EAAE~~,~~GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,~~KAAK,EAAE~~,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE~~;~~gBAChI~~,CAAC,qBAAqB,GAAG,IAAI;gBAC7B,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAC7B,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;~~aAChC~~,~~EAAE~~,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,EAAE~~;~~KAC9E~~;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/~~dist~~/~~collection/~~components/ic-input-container/ic-input-container.css?tag=ic-input-container","../web-components/~~dist~~/~~collection/~~components/ic-input-container/ic-input-container.js"],"sourcesContent":["ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n}\n","import { Host, h } from \"@stencil/core\";\nexport class InputContainer {\n ~~constructor() {\n~~ /*\n If `true`, the disabled state will be set.\n /\n ~~this.~~disabled = false;\n /\n If `true`, the readonly state will be set.\n */\n ~~this.~~readonly = false;\n }\n render() {\n return (h(Host~~, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h(\"~~div\~~", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba',~~ class: {\n [\"component-container\"]: true,\n [\"disabled\"]: !!this.disabled,\n [\"readonly\"]: !!this.readonly,\n } }~~, h(~~\~~"slot\", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));\~~n ~~}\n static get is() { return \"ic-input-container\"; }\n static get originalStyleUrls() {\n~~ ~~return {\~~n ~~\"$\": [\"ic-input-container.css\"]\~~n ~~};\~~n }\n ~~static get styleUrls(~~) ~~{\n return {\n \"$\": [\"ic-input-container.css\"]\n }~~;\n }\n static get properties() {\n return {\n \"disabled\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n ~~},\n \~~"~~required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [~~],\n \"text\": \"If `true`, the disabled state will be set.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"disabled\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"readonly\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the readonly state will be set.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"readonly\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n }\n };\n }\n}\n//# sourceMappingURL=ic-input-container.js.map\n"],"version":3}
1	+ {"file":"ic-input-container2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,6EAA6E,CAAC;AAC1G,+BAAe,mBAAmB;;MCKrB,cAAc;IAJ3B;;;;;;QAQU,aAAQ,GAAa,KAAK,CAAC;;;;QAK3B,aAAQ,GAAa,KAAK,CAAC;KAiBpC;IAfC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,CAAC,qBAAqB,GAAG,IAAI;gBAC7B,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAC7B,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;aAC9B,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","../web-components/src/components/ic-input-container/ic-input-container.tsx"],"sourcesContent":["ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-input-container\",\n styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n /*\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n [\"component-container\"]: true,\n [\"disabled\"]: !!this.disabled,\n [\"readonly\"]: !!this.readonly,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-input-label.d.ts ADDED Viewed

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

package/dist/components/ic-input-label2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, z as getInputHelperTextID } from './helpers.js';
+import { o as onComponentRequiredPropUndefined, w as getInputHelperTextID } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:0}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext,ic-input-label .helpertext ::slotted(*){margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
@@ -70,11 +70,11 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
             "helpertext-readonly": readonly,
         };
         const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
-        return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {
+        return (h(Host, { key: 'bd158d690c92d9d1cc4dabc99bd2e7f48880f1e0', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
                 "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: "label", class: {
+            } }, !hideLabel && (h("ic-typography", { key: '688f0a6332e7e9343fdacb0acacdb68a17f6958c', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
             } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));

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

	@@ -1 +1 @@
1	- {"file":"ic-input-label2.js","mappings":"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","names":[],"sources":["../web-components/dist/collection/components/ic-input-label/ic-input-label.css?tag=ic-input-label","../web-components/dist/collection/components/ic-input-label/ic-input-label.js"],"sourcesContent":["ic-input-label {\n margin-bottom: var(--ic-space-xs);\n\n --ic-typography-color: var(\n --ic-input-label-text-color,\n var(--ic-color-text-primary)\n );\n}\n\nic-input-label.with-helper {\n margin-bottom: 0;\n}\n\nic-input-label.ic-input-label-readonly {\n --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted() {\n margin-top: var(--ic-space-xxxs);\n padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n --ic-typography-color: var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n );\n}\n\nic-input-label .helpertext-normal {\n --ic-typography-color: var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n );\n}\n\nic-input-label .helpertext-readonly {\n --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { getInputHelperTextID, onComponentRequiredPropUndefined, } from \"../../utils/helpers\";\nexport class InputLabel {\n constructor() {\n /\n If `true`, the disabled state will be set.\n /\n this.disabled = false;\n /\n The helper text that will be displayed.\n /\n this.helperText = \"\";\n /\n The label will be visually hidden.\n /\n this.hideLabel = false;\n /\n If `true`, the readonly state will be set.\n /\n this.readonly = false;\n /\n If `true`, the input label will require a value.\n /\n this.required = false;\n /\n The status of the label - e.g. 'error'.\n /\n this.status = \"\";\n /\n @internal If `true`, wraps label text in label tag\n /\n this.useLabelTag = true;\n this.isHelperTextSlotUsed = (slot) => {\n const assignedEls = slot === null \|\| slot === void 0 ? void 0 : slot.assignedElements();\n if (assignedEls && assignedEls.length) {\n for (const el of assignedEls) {\n if (el.tagName === \"SLOT\") {\n // Recursion needed for when slot is forwarded multiple times - through child components\n // (e.g. in date picker)\n if (this.isHelperTextSlotUsed(el)) {\n return true;\n }\n }\n else {\n // Found an assigned element which is not a nested <slot>\n return true;\n }\n }\n }\n return false;\n };\n }\n componentDidLoad() {\n onComponentRequiredPropUndefined([{ prop: this.label, propName: \"label\" }], \"Input Label\");\n }\n render() {\n const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;\n const labelText = required ? label + \" \" : label;\n const helperTextId = this.for && getInputHelperTextID(this.for);\n const helperTextClass = {\n helpertext: true,\n \"helpertext-normal\": !disabled && !readonly,\n \"helpertext-readonly\": readonly,\n };\n const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {\n \"ic-input-label-disabled\": !!disabled,\n \"ic-input-label-readonly\": readonly,\n \"with-helper\": this.isHelperTextSlotUsed(helperTextSlot) \|\| helperText !== \"\",\n } }, !hideLabel && (h(\"ic-typography\", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: \"label\", class: {\n \"readonly-label\": readonly,\n \"error-label\": status === \"error\" && !(readonly \|\| disabled),\n } }, readonly \|\| !useLabelTag ? (`${labelText}`) : (h(\"label\", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h(\"span\", { id: helperTextId, class: helperTextClass }, h(\"slot\", { name: \"helper-text\" }))) : (helperText !== \"\" && (h(\"ic-typography\", { variant: \"caption\", class: helperTextClass }, h(\"span\", { id: helperTextId }, helperText))))));\n }\n static get is() { return \"ic-input-label\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"./ic-input-label.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-input-label.css\"]\n };\n }\n static get properties() {\n return {\n \"disabled\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the disabled state will be set.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"disabled\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"for\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The ID of the form element the label is bound to.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"for\",\n \"reflect\": false\n },\n \"helperText\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The helper text that will be displayed.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"helper-text\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"\\\"\"\n },\n \"hideLabel\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The label will be visually hidden.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"hide-label\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"label\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": true,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The text content of the label.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"label\",\n \"reflect\": false\n },\n \"readonly\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the readonly state will be set.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"readonly\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"required\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the input label will require a value.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"required\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"status\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"\\\"error\\\" \| \\\"\\\"\",\n \"resolved\": \"\\\"\\\" \| \\\"error\\\"\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The status of the label - e.g. 'error'.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"status\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"\\\"\"\n },\n \"useLabelTag\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [{\n \"name\": \"internal\",\n \"text\": \"If `true`, wraps label text in label tag\"\n }],\n \"text\": \"\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"use-label-tag\",\n \"reflect\": false,\n \"defaultValue\": \"true\"\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-input-label.js.map\n"],"version":3}
1	+ {"file":"ic-input-label2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,4+BAA4+B,CAAC;AACrgC,2BAAe,eAAe;;MCUjB,UAAU;IAJvB;;;;;;QAUU,aAAQ,GAAa,KAAK,CAAC;;;;QAU3B,eAAU,GAAW,EAAE,CAAC;;;;QAKxB,cAAS,GAAY,KAAK,CAAC;;;;QAU3B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,WAAM,GAAiB,EAAE,CAAC;;;;QAK1B,gBAAW,GAAY,IAAI,CAAC;QAS5B,yBAAoB,GAAG,CAAC,IAAoB;YAClD,MAAM,WAAW,GAAI,IAAwB,aAAxB,IAAI,uBAAJ,IAAI,CAAsB,gBAAgB,EAAE,CAAC;YAClE,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;gBACrC,KAAK,MAAM,EAAE,IAAI,WAAW,EAAE;oBAC5B,IAAI,EAAE,CAAC,OAAO,KAAK,MAAM,EAAE;;;wBAGzB,IAAI,IAAI,CAAC,oBAAoB,CAAC,EAAqB,CAAC,EAAE;4BACpD,OAAO,IAAI,CAAC;yBACb;qBACF;yBAAM;;wBAEL,OAAO,IAAI,CAAC;qBACb;iBACF;aACF;YACD,OAAO,KAAK,CAAC;SACd,CAAC;KA6DH;IArFC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;KACH;IAqBD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,GACZ,GAAG,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;QAClD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAChE,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,IAAI;YAChB,mBAAmB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;YAC3C,qBAAqB,EAAE,QAAQ;SAChC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAEzE,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,yBAAyB,EAAE,CAAC,CAAC,QAAQ;gBACrC,yBAAyB,EAAE,QAAQ;gBACnC,aAAa,EACX,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,IAAI,UAAU,KAAK,EAAE;aACjE,IAEA,CAAC,SAAS,KACT,sEACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;gBACL,gBAAgB,EAAE,QAAQ;gBAC1B,aAAa,EAAE,MAAM,KAAK,OAAO,IAAI,EAAE,QAAQ,IAAI,QAAQ,CAAC;aAC7D,IAEA,QAAQ,IAAI,CAAC,WAAW,IACvB,GAAG,SAAS,EAAE,KAEd,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CACa,CACjB,EACA,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,IACxC,YAAM,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,IAC5C,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B,KAEP,UAAU,KAAK,EAAE,KACf,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,eAAe,IACrD,YAAM,EAAE,EAAE,YAAY,IAAG,UAAU,CAAQ,CAC7B,CACjB,CACF,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","../web-components/src/components/ic-input-label/ic-input-label.tsx"],"sourcesContent":["ic-input-label {\n margin-bottom: var(--ic-space-xs);\n\n --ic-typography-color: var(\n --ic-input-label-text-color,\n var(--ic-color-text-primary)\n );\n}\n\nic-input-label.with-helper {\n margin-bottom: 0;\n}\n\nic-input-label.ic-input-label-readonly {\n --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted() {\n margin-top: var(--ic-space-xxxs);\n padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n --ic-typography-color: var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n );\n}\n\nic-input-label .helpertext-normal {\n --ic-typography-color: var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n );\n}\n\nic-input-label .helpertext-readonly {\n --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n getInputHelperTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-input-label\",\n styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n @Element() el: HTMLIcInputLabelElement;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The ID of the form element the label is bound to.\n /\n @Prop() for?: string;\n\n /\n The helper text that will be displayed.\n /\n @Prop() helperText: string = \"\";\n\n /\n The label will be visually hidden.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n The text content of the label.\n /\n @Prop() label!: string;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly: boolean = false;\n\n /\n If `true`, the input label will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The status of the label - e.g. 'error'.\n /\n @Prop() status: \"error\" \| \"\" = \"\";\n\n /\n @internal If `true`, wraps label text in label tag\n /\n @Prop() useLabelTag: boolean = true;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Input Label\"\n );\n }\n\n private isHelperTextSlotUsed = (slot: Element \| null): boolean => {\n const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n if (assignedEls && assignedEls.length) {\n for (const el of assignedEls) {\n if (el.tagName === \"SLOT\") {\n // Recursion needed for when slot is forwarded multiple times - through child components\n // (e.g. in date picker)\n if (this.isHelperTextSlotUsed(el as HTMLSlotElement)) {\n return true;\n }\n } else {\n // Found an assigned element which is not a nested <slot>\n return true;\n }\n }\n }\n return false;\n };\n\n render() {\n const {\n disabled,\n readonly,\n label,\n required,\n helperText,\n status,\n hideLabel,\n useLabelTag,\n } = this;\n const labelText = required ? label + \" \" : label;\n const helperTextId = this.for && getInputHelperTextID(this.for);\n const helperTextClass = {\n helpertext: true,\n \"helpertext-normal\": !disabled && !readonly,\n \"helpertext-readonly\": readonly,\n };\n\n const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n\n return (\n <Host\n class={{\n \"ic-input-label-disabled\": !!disabled,\n \"ic-input-label-readonly\": readonly,\n \"with-helper\":\n this.isHelperTextSlotUsed(helperTextSlot) \|\| helperText !== \"\",\n }}\n >\n {!hideLabel && (\n <ic-typography\n variant=\"label\"\n class={{\n \"readonly-label\": readonly,\n \"error-label\": status === \"error\" && !(readonly \|\| disabled),\n }}\n >\n {readonly \|\| !useLabelTag ? (\n `${labelText}`\n ) : (\n <label htmlFor={this.for}>{labelText}</label>\n )}\n </ic-typography>\n )}\n {this.isHelperTextSlotUsed(helperTextSlot) ? (\n <span id={helperTextId} class={helperTextClass}>\n <slot name=\"helper-text\"></slot>\n </span>\n ) : (\n helperText !== \"\" && (\n <ic-typography variant=\"caption\" class={helperTextClass}>\n <span id={helperTextId}>{helperText}</span>\n </ic-typography>\n )\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-input-validation.d.ts ADDED Viewed

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

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

@@ -1,7 +1,24 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, A as getInputValidationTextID, B as IcInformationStatus, C as warningIcon, E as errorIcon, F as successIcon } from './helpers.js';
+import { x as getInputValidationTextID, k as isSlotUsed, v as IcInformationStatus } from './helpers.js';
+import { s as successIcon } from './success-icon.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
+const errorIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+    <title>Error</title>
+    <g>
+        <path d="M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" />
+    </g>
+</svg>
+`;
+const warningIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+    <title>Warning</title>
+    <g>
+        <path d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" />
+    </g>
+</svg>
+`;
 const icInputValidationCss = "ic-input-validation{max-width:var(--input-width, 20rem);display:flex}ic-input-validation.ic-input-validation-with-status{margin-top:var(--ic-space-xs)}ic-input-validation.ic-input-validation-full-width{width:100%;max-width:none}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-validation .sr-only{position:absolute;left:-9999px}";
 const IcInputValidationStyle0 = icInputValidationCss;
@@ -37,20 +54,19 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
         }, 200); // Delay to help ensure screen readers detect change
     }
     componentDidLoad() {
-        onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
         this.messageEl.textContent = INVISIBLE_CHAR;
     }
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? ICON[status] : "";
-        return (h(Host, { key: '0513b4d21426f48a3751fbb4f16786d8cdde6f30', class: {
+        return (h(Host, { key: 'b4180dff212dcb2c9be198c40f389b2e5310d61d', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
                 "ic-input-validation-with-status": status !== "",
-            } }, displayIcon !== "" && (h("span", { key: '3e6de247d788f9836f338e109d7be5914fa2f320', class: {
+            } }, displayIcon !== "" && (h("span", { key: '0c9fc3a71ec6e2db71ff5ea0839e80e1d59d11ea', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: '5ee4e673c1f2934d74eafbc08241cdfae1aa5f9f', variant: "caption", class: "statustext" }, h("span", { key: '850149ffb8c4cdab21ab0c05a8787747e399ca41', id: this.for && getInputValidationTextID(this.for) }, message), h("span", { key: 'a26f5aa58e81cf3e9d982d86b75b3ab7e14897ad', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: '4dba13235c6ec27d634b0dd38523963798676b36', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '2b9897912e3f5ab4f4c070025f59fc3f5eb67383', variant: "caption", class: "statustext" }, h("span", { key: '1bc79cd3e51e34e74fa4fb6f4d262c962f1433c7', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: '497e54b59f15dfa87b550569c77d23eaf6591ffa', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: '8be2476064245131befd1d83618072292e8f7049', name: "validation-message-adornment" })));
     }
     get el() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ic-input-validation2.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,s9BAAs9B,CAAC;AACp/B,gCAAe,oBAAoB;;ACKnC,MAAM,IAAI,GAAG;IACT,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,GAAG,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;CAC7C,CAAC;AACF,MAAM,cAAc,GAAG,QAAQ,CAAC;MAInB,eAAe;IACxB;;;;;;QAII,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;;;;QAI7B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;;;QAIvB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KACpB;IACD,mBAAmB,CAAC,QAAQ;;;QAGxB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;QAC5C,UAAU,CAAC;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;SACzC,EAAE,GAAG,CAAC,CAAC;KACX;IACD,gBAAgB;QACZ,gCAAgC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,kBAAkB,CAAC,CAAC;QACpG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;KAC/C;IACD,MAAM;QACF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;QACtD,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,CAAC,CAAC,SAAS;gBAC7C,iCAAiC,EAAE,MAAM,KAAK,EAAE;aACnD,EAAE,EAAE,WAAW,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAC5F,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aAC3B,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,8BAA8B,EAAE,CAAC,CAAC,EAAE;KAC7gB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","../web-components/dist/collection/components/ic-input-validation/ic-input-validation.js"],"sourcesContent":["ic-input-validation {\n max-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 max-width: none;\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 { Host, h } from \"@stencil/core\";\nimport { IcInformationStatus, } from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\nimport { getInputValidationTextID, onComponentRequiredPropUndefined, } from \"../../utils/helpers\";\nconst ICON = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\nconst INVISIBLE_CHAR = \"\\u200B\";\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\nexport class InputValidation {\n constructor() {\n /\n The ARIA live mode to apply to the message.\n /\n this.ariaLiveMode = \"polite\";\n /\n If `true`, the input validation will fill the width of the container.\n /\n this.fullWidth = false;\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n */\n this.status = \"\";\n }\n watchMessageHandler(newValue) {\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 componentDidLoad() {\n onComponentRequiredPropUndefined([{ prop: this.message, propName: \"message\" }], \"Input Validation\");\n this.messageEl.textContent = INVISIBLE_CHAR;\n }\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? ICON[status] : \"\";\n return (h(Host, { key: '0513b4d21426f48a3751fbb4f16786d8cdde6f30', class: {\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": !!fullWidth,\n \"ic-input-validation-with-status\": status !== \"\",\n } }, displayIcon !== \"\" && (h(\"span\", { key: '3e6de247d788f9836f338e109d7be5914fa2f320', class: {\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }, innerHTML: displayIcon })), h(\"ic-typography\", { key: '5ee4e673c1f2934d74eafbc08241cdfae1aa5f9f', variant: \"caption\", class: \"statustext\" }, h(\"span\", { key: '850149ffb8c4cdab21ab0c05a8787747e399ca41', id: this.for && getInputValidationTextID(this.for) }, message), h(\"span\", { key: 'a26f5aa58e81cf3e9d982d86b75b3ab7e14897ad', ref: (el) => (this.messageEl = el), class: \"sr-only\", \"aria-live\": ariaLiveMode })), h(\"slot\", { key: '4dba13235c6ec27d634b0dd38523963798676b36', name: \"validation-message-adornment\" })));\n }\n static get is() { return \"ic-input-validation\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-input-validation.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-input-validation.css\"]\n };\n }\n static get properties() {\n return {\n \"ariaLiveMode\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcAriaLive\",\n \"resolved\": \"\\\"assertive\\\" \| \\\"off\\\" \| \\\"polite\\\" \| undefined\",\n \"references\": {\n \"IcAriaLive\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcAriaLive\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The ARIA live mode to apply to the message.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"aria-live-mode\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"polite\\\"\"\n },\n \"for\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The ID of the form element the validation is bound to.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"for\",\n \"reflect\": false\n },\n \"fullWidth\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the input validation will fill the width of the container.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"full-width\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"message\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": true,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The validation message to display.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"message\",\n \"reflect\": false\n },\n \"status\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcInformationStatusOrEmpty\",\n \"resolved\": \"\\\"\\\" \| \\\"error\\\" \| \\\"success\\\" \| \\\"warning\\\" \| undefined\",\n \"references\": {\n \"IcInformationStatusOrEmpty\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcInformationStatusOrEmpty\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"status\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"\\\"\"\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"message\",\n \"methodName\": \"watchMessageHandler\"\n }];\n }\n}\n//# sourceMappingURL=ic-input-validation.js.map\n"],"version":3}
1	+ {"file":"ic-input-validation2.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,s9BAAs9B,CAAC;AACp/B,gCAAe,oBAAoB;;ACYnC,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;MAUnB,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,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,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,oBAAoB,CAAC,IACxC,YAAM,IAAI,EAAC,oBAAoB,GAAG,KAElC,OAAO,CACR,CACI,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":["../web-components/src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","../web-components/src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n max-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 max-width: none;\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 { getInputValidationTextID, isSlotUsed } 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 * @slot validation-message - Content will be placed as 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 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 {isSlotUsed(this.el, \"validation-message\") ? (\n <slot name=\"validation-message\" />\n ) : (\n message\n )}\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}

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

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

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { O as OpenInNew } from './OpenInNew.js';
-import { I as IC_INHERITED_ARIA, b as inheritAttributes, g as getBrandFromContext, e as IcBrandForegroundEnum } from './helpers.js';
+import { I as IC_INHERITED_ARIA, d as inheritAttributes, f as getBrandFromContext, j as IcBrandForegroundEnum } from './helpers.js';
 const icLinkCss = "/*! 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(.ic-link) .link,:host(.ic-link) ::slotted(a){color:var(--ic-link-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}:host(.ic-link) .link:visited,:host(.ic-link) ::slotted(a:visited),:host(.ic-link) .link:visited:hover,:host(.ic-link) ::slotted(a:visited:hover),:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:visited:active),:host(.ic-link) .link:visited:focus,:host(.ic-link) ::slotted(a:visited:focus){color:var(--ic-link-text-visited)}:host(.ic-link) .link:hover{color:var(--ic-link-text-hover)}:host(.ic-link) .link:active{color:var(--ic-link-text-pressed)}:host(.ic-link) .link:focus{color:var(--ic-link-text-focused)}:host(.ic-link-monochrome) .link:hover{color:var(--ic-link-text-hover-monochrome)}:host(.ic-link-monochrome) .link:active{color:var(--ic-link-text-pressed-monochrome)}:host(.ic-link-monochrome) .link:focus{color:var(--ic-link-text-focused-monochrome)}:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 10%){:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:10%;border-bottom:0 !important;margin-bottom:0 !important}}:host(.ic-link) .link:active,:host(.ic-link) .link:focus:active,:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:active),:host(.ic-link) ::slotted(a:focus:active),:host(.ic-link) ::slotted(a:visited:active){text-decoration:none}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:var(--ic-link-icon-launch)}.link:visited>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-visited)}:host(.ic-link-monochrome) .link,:host(.ic-link-monochrome) ::slotted(a){color:var(--ic-link-text-monochrome)}:host(.ic-link-monochrome) .link:visited,:host(.ic-link-monochrome) ::slotted(a:visited),:host(.ic-link-monochrome) .link:visited:hover,:host(.ic-link-monochrome) ::slotted(a:visited:hover),:host(.ic-link-monochrome) .link:visited:active,:host(.ic-link-monochrome) ::slotted(a:visited:active),:host(.ic-link-monochrome) .link:visited:focus,:host(.ic-link-monochrome) ::slotted(a:visited:focus){color:var(--ic-link-text-visited-monochrome)}:host(.ic-link-monochrome) .link>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-monochrome)}:host(.ic-link-monochrome) .link:visited>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-visited-monochrome)}:host(.breadcrumb-link) .link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .link:visited{color:var(--ic-color-text-primary)}:host(.footer-link) ::slotted(a){color:var(--ic-footer-link) !important}:host(.footer-link) .ic-link-open-in-new-icon>svg{fill:var(--ic-footer-icon) !important}@media (forced-colors: active){:host(.ic-link) .ic-link-open-in-new-icon>svg{fill:currentcolor !important}}";
 const IcLinkStyle0 = icLinkCss;
@@ -93,7 +93,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '1d3ba1effcfab3255ea567c475e2252bd17de507', class: {
+        return (h(Host, { key: '8128f26ad6c0aaaedc2bfc7ec9a94689b4996e8b', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,