npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.9 → 3.1.0 - Mend

@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

Files changed (1061) hide show

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

@@ -1,18 +1,40 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { r as removeDisabledFalse, f as renderDynamicChildSlots, C as slotHasContent, y as IcInformationStatus, B as successIcon } from './helpers.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;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%}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-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)}ic-input-component-container.ic-input-component-container-large{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-dark-hover)}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}}";
+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%}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}}";
+const IcInputComponentContainerStyle0 = icInputComponentContainerCss;
 const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComponentContainer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         *  If `true`, the disabled state will be set.
+         */
         this.disabled = false;
+        /**
+         *  If `true`, the input component container will fill the width of the container it is in.
+         */
         this.fullWidth = false;
+        /**
+         *  If `true`, the input component container will allow for multiple lines.
+         */
         this.multiLine = false;
+        /**
+         *  If `true`, the readonly state will be set.
+         */
         this.readonly = false;
+        /**
+         * The size of the input component container component.
+         */
         this.size = "medium";
+        /**
+         *  If `true`, the validation will display inline.
+         */
         this.validationInline = false;
+        /**
+         * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
+         */
         this.validationStatus = "";
     }
     watchDisabledHandler() {
@@ -27,21 +49,21 @@ const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComp
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { class: {
+        return (h(Host, { key: 'bda1921fbfbb0d1fabf871e360aaabfbc1e6d2c5', 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", { class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), h("slot", null), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { class: "inline-success", innerHTML: successIcon })))));
+                "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: '6a7712e2529a513c00f9da17a55523520231d006', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'aeb5d95413df5982199725cecf2b43db73c92152', class: "icon-container" }, h("slot", { key: '3aab6c1ac278d1c16b60a14a14aa09876d236c4b', name: "left-icon" }))), h("slot", { key: 'f7bf8859b60a36b4a3e5cb6b601ceec41a9915a7' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '96e20884d38b475f5ae810ce3b557cd670e702e4', class: "inline-success", innerHTML: successIcon })))));
     }
     get el() { return this; }
     static get watchers() { return {
         "disabled": ["watchDisabledHandler"]
     }; }
-    static get style() { return icInputComponentContainerCss; }
+    static get style() { return IcInputComponentContainerStyle0; }
 }, [4, "ic-input-component-container", {
         "disabled": [4],
         "fullWidth": [4, "full-width"],

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,yvJAAyvJ;;MCqBjxJ,uBAAuB;;;;wBAON,KAAK;yBASJ,KAAK;yBAKL,KAAK;wBAKN,KAAK;oBAKR,QAAQ;gCAKG,KAAK;gCAKc,EAAE;;IAhCzD,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,IACH,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,QAAQ;gBACjD,uCAAuC,EAAE,QAAQ;gBACjD,wCAAwC,EAAE,SAAS;gBACnD,yCAAyC,EAAE,SAAS;aACrD,mBACc,QAAQ,GAAG,MAAM,GAAG,IAAI,IAEvC,WAAK,KAAK,EAAC,iBAAiB,IACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KACnC,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,eAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,YAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","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 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}\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-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}\n\nic-input-component-container.ic-input-component-container-large {\n 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-dark-hover);\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","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}
1	+ {"file":"ic-input-component-container2.js","mappings":";;;AAAA,MAAM,4BAA4B,GAAG,qoKAAqoK,CAAC;AAC3qK,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":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","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}\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","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-container2.js CHANGED Viewed

@@ -1,22 +1,29 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 const icInputContainerCss = "ic-input-container .component-container{display:flex;flex-direction:column}";
+const IcInputContainerStyle0 = icInputContainerCss;
 const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true`, the disabled state will be set.
+         */
         this.disabled = false;
+        /**
+         * If `true`, the readonly state will be set.
+         */
         this.readonly = false;
     }
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '0bc0baafaedce6b4aa3cdcb02c12a9a2287ed9aa' }, h("div", { key: '16d0909afb78eaf2709d62542af57024e99f162e', class: {
                 ["component-container"]: true,
-                ["disabled"]: this.disabled,
-                ["readonly"]: this.readonly,
-            } }, h("slot", null))));
+                ["disabled"]: !!this.disabled,
+                ["readonly"]: !!this.readonly,
+            } }, h("slot", { key: '8c1e04687c0566467282e7b72a65468419bbfa15' }))));
     }
-    static get style() { return icInputContainerCss; }
+    static get style() { return IcInputContainerStyle0; }
 }, [4, "ic-input-container", {
         "disabled": [4],
         "readonly": [4]

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

	@@ -1 +1 @@
1	- {"file":"ic-input-container2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,6EAA6E;;~~MCM5F~~,cAAc;;;;~~wBAII~~,KAAK;~~wBAKL~~,~~KAAK;;IAElC,~~MAAM;QACJ,QACE,EAAC,IAAI,~~QACH~~,~~WACE~~,KAAK,EAAE;gBACL,CAAC,qBAAqB,GAAG,IAAI;gBAC7B,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;~~gBAC3B~~,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;~~aAC5B~~,IAED,~~eAAa~~,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","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}
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":["src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","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-label2.js CHANGED Viewed

@@ -3,19 +3,39 @@ import { o as onComponentRequiredPropUndefined, w as getInputHelperTextID } from
 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:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext{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)}";
+const IcInputLabelStyle0 = icInputLabelCss;
 const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true`, the disabled state will be set.
+         */
         this.disabled = false;
-        this.for = undefined;
+        /**
+         * The helper text that will be displayed.
+         */
         this.helperText = "";
+        /**
+         * The label will be visually hidden.
+         */
         this.hideLabel = false;
-        this.label = undefined;
+        /**
+         * If `true`, the readonly state will be set.
+         */
         this.readonly = false;
+        /**
+         * If `true`, the input label will require a value.
+         */
         this.required = false;
+        /**
+         * The status of the label - e.g. 'error'.
+         */
         this.status = "";
+        /**
+         * @internal If `true`, wraps label text in label tag
+         */
         this.useLabelTag = true;
     }
     componentDidLoad() {
@@ -24,20 +44,20 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
     render() {
         const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;
         const labelText = required ? label + " *" : label;
-        return (h(Host, { class: {
-                "ic-input-label-disabled": disabled,
+        return (h(Host, { key: '44334c80405dc996ab703a98c81d1dd69732d763', class: {
+                "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
                 "with-helper": helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { variant: "label", class: {
+            } }, !hideLabel && (h("ic-typography", { key: '4f3a573b9bda098059a04403cea034a113ddb69b', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
-            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), helperText !== "" && (h("ic-typography", { variant: "caption", class: {
+            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), helperText !== "" && (h("ic-typography", { key: '28ca66fd307a3fc6da10e8916fae765c3757c039', variant: "caption", class: {
                 helpertext: true,
                 "helpertext-normal": !disabled && !readonly,
                 "helpertext-readonly": readonly,
-            } }, h("span", { id: getInputHelperTextID(this.for) }, helperText)))));
+            } }, h("span", { key: 'b2a6358bbfde4c77dcca1988f33f349e94c6b160', id: this.for && getInputHelperTextID(this.for) }, helperText)))));
     }
-    static get style() { return icInputLabelCss; }
+    static get style() { return IcInputLabelStyle0; }
 }, [0, "ic-input-label", {
         "disabled": [4],
         "for": [1],

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

	@@ -1 +1 @@
1	- {"file":"ic-input-label2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,u9BAAu9B~~;;MCWl+~~B,UAAU~~;;;;wBAIO~~,KAAK~~;;0BAUJ~~,EAAE~~;yBAKF~~,KAAK~~;;wBAUN~~,KAAK~~;wBAKL~~,KAAK~~;sBAKF~~,EAAE~~;2BAKF~~,IAAI~~;;IAEnC~~,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;KACH;IAED,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;QAElD,QACE,EAAC,IAAI,~~IACH~~,KAAK,EAAE;gBACL,yBAAyB,EAAE,QAAQ;~~gBACnC~~,yBAAyB,EAAE,QAAQ;gBACnC,aAAa,EAAE,UAAU,KAAK,EAAE;aACjC,IAEA,CAAC,SAAS,KACT,~~qBACE~~,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,EAEA,UAAU,KAAK,EAAE,KAChB,~~qBACE~~,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBAC3C,qBAAqB,EAAE,QAAQ;aAChC,IAED,~~YAAM~~,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,~~IAAG~~,UAAU,~~CAAQ~~,~~CAC/C~~,CACjB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","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: var(--ic-space-xxxs);\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 {\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, 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 /*\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 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\n return (\n <Host\n class={{\n \"ic-input-label-disabled\": disabled,\n \"ic-input-label-readonly\": readonly,\n \"with-helper\": 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\n {helperText !== \"\" && (\n <ic-typography\n variant=\"caption\"\n class={{\n helpertext: true,\n \"helpertext-normal\": !disabled && !readonly,\n \"helpertext-readonly\": readonly,\n }}\n >\n <span id={getInputHelperTextID(this.for)}>{helperText}</span>\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-input-label2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,u9BAAu9B,CAAC;AACh/B,2BAAe,eAAe;;MCUjB,UAAU;IAJvB;;;;;;QAQU,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;KA+DrC;IA7DC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;KACH;IAED,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;QAElD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,yBAAyB,EAAE,CAAC,CAAC,QAAQ;gBACrC,yBAAyB,EAAE,QAAQ;gBACnC,aAAa,EAAE,UAAU,KAAK,EAAE;aACjC,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,EAEA,UAAU,KAAK,EAAE,KAChB,sEACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBAC3C,qBAAqB,EAAE,QAAQ;aAChC,IAED,6DAAM,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,IACjD,UAAU,CACN,CACO,CACjB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","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: var(--ic-space-xxxs);\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 {\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, 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 /*\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 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\n return (\n <Host\n class={{\n \"ic-input-label-disabled\": !!disabled,\n \"ic-input-label-readonly\": readonly,\n \"with-helper\": 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\n {helperText !== \"\" && (\n <ic-typography\n variant=\"caption\"\n class={{\n helpertext: true,\n \"helpertext-normal\": !disabled && !readonly,\n \"helpertext-readonly\": readonly,\n }}\n >\n <span id={this.for && getInputHelperTextID(this.for)}>\n {helperText}\n </span>\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -3,6 +3,7 @@ import { o as onComponentRequiredPropUndefined, x as getInputValidationTextID, y
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}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  )}";
+const IcInputValidationStyle0 = icInputValidationCss;
 const icon = {
     [IcInformationStatus.Warning]: warningIcon,
@@ -13,10 +14,17 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
     constructor() {
         super();
         this.__registerHost();
+        /**
+         *  The ARIA live mode to apply to the message.
+         */
         this.ariaLiveMode = "polite";
-        this.for = undefined;
+        /**
+         *  If `true`, the input validation will fill the width of the container.
+         */
         this.fullWidth = false;
-        this.message = undefined;
+        /**
+         * The status of the validation - e.g. 'error' | 'warning' | 'success'.
+         */
         this.status = "";
     }
     componentDidLoad() {
@@ -25,16 +33,16 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? icon[status] : "";
-        return (h(Host, { class: {
+        return (h(Host, { key: 'e4cb4eec798ec7cf3ad25a7721b8172085c3985b', class: {
                 [`ic-input-validation-${status}`]: status !== "",
-                "ic-input-validation-full-width": fullWidth,
-            } }, displayIcon !== "" && (h("span", { class: {
+                "ic-input-validation-full-width": !!fullWidth,
+            } }, displayIcon !== "" && (h("span", { key: '0f0e6bc76d9085e965ee611dc6069a5bae3e6bff', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { variant: "caption", class: "statustext" }, h("span", { "aria-live": ariaLiveMode, id: getInputValidationTextID(this.for) }, message)), h("slot", { name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: 'c6527ae677adc0ab056f663e352278f9cc98071b', variant: "caption", class: "statustext" }, h("span", { key: '31cb4694a0359c038d9e396f8d2769c8a92b0047', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '9ae99f5c1a4edb1e2a7acd359e1d8463a6623c9c', name: "validation-message-adornment" })));
     }
     get el() { return this; }
-    static get style() { return icInputValidationCss; }
+    static get style() { return IcInputValidationStyle0; }
 }, [4, "ic-input-validation", {
         "ariaLiveMode": [1, "aria-live-mode"],
         "for": [1],

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

	@@ -1 +1 @@
1	- {"file":"ic-input-validation2.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m1BAAm1B;;~~ACgBh3B~~,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;MASW,eAAe~~;;;;4BAMqB~~,QAAQ~~;;yBAU1B~~,KAAK~~;;sBAUW~~,EAAE~~;;IAE/C~~,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;KACH;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,~~MAAM~~,CAAC,GAAG,EAAE,CAAC;~~QACtD~~,QACE,EAAC,IAAI,~~IACH~~,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,SAAS;~~aAC5C~~,IAEA,WAAW,KAAK,EAAE,KACjB,~~YACE~~,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,EAED,~~qBAAe~~,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IACjD,~~yBACa~~,YAAY,EACvB,EAAE,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,~~IAErC~~,OAAO,CACH,CACO,EAEhB,~~YAAM~~,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n width: var(--input-width, 20rem);\n margin-top: var(--ic-space-xs);\n display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\n\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n @Element() el: HTMLIcInputValidationElement;\n\n /\n The ARIA live mode to apply to the message.\n /\n @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n /\n The ID of the form element the validation is bound to.\n /\n @Prop() for: string;\n\n /\n If `true`, the input validation will fill the width of the container.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n The validation message to display.\n /\n @Prop() message!: string;\n\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n }\n\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? icon[status] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span\n aria-live={ariaLiveMode}\n id={getInputValidationTextID(this.for)}\n >\n {message}\n </span>\n </ic-typography>\n\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-input-validation2.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m1BAAm1B,CAAC;AACj3B,gCAAe,oBAAoB;;ACenC,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,GAAG,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;CAC3C,CAAC;MASW,eAAe;IAJ5B;;;;;;QAUU,iBAAY,GAA4B,QAAQ,CAAC;;;;QAUjD,cAAS,GAAa,KAAK,CAAC;;;;QAU5B,WAAM,GAAgC,EAAE,CAAC;KA0ClD;IAxCC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,GAAG,IAAI,CAAC,MAAO,CAAC,GAAG,EAAE,CAAC;QACvD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,CAAC,CAAC,SAAS;aAC9C,IAEA,WAAW,KAAK,EAAE,KACjB,6DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,EAED,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IACjD,0EACa,YAAY,EACvB,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,IAEjD,OAAO,CACH,CACO,EAEhB,6DAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n width: var(--input-width, 20rem);\n margin-top: var(--ic-space-xs);\n display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\n\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n @Element() el: HTMLIcInputValidationElement;\n\n /\n The ARIA live mode to apply to the message.\n /\n @Prop() ariaLiveMode?: IcAriaLiveModeVariants = \"polite\";\n\n /\n The ID of the form element the validation is bound to.\n /\n @Prop() for?: string;\n\n /\n If `true`, the input validation will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The validation message to display.\n /\n @Prop() message!: string;\n\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n }\n\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? icon[status!] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": !!fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span\n aria-live={ariaLiveMode}\n id={this.for && getInputValidationTextID(this.for)}\n >\n {message}\n </span>\n </ic-typography>\n\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,8 @@ import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/
 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';
-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)}.link>.ic-link-open-in-new-icon{fill:var(--ic-link-icon-launch)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}.link:visited>.ic-link-open-in-new-icon{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{fill:var(--ic-link-icon-launch-monochrome)}:host(.ic-link-monochrome) .link:visited>.ic-link-open-in-new-icon{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)}";
+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}@media (forced-colors: active){.ic-link-open-in-new-icon>svg{fill:currentcolor}}";
+const IcLinkStyle0 = icLinkCss;
 const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     constructor() {
@@ -11,28 +12,34 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         this.__attachShadow();
         this.inheritedAttributes = {};
         this.hostMutationObserver = null;
+        /**
+         * If `true`, the user can save the linked URL instead of navigating to it.
+         */
+        this.download = false;
+        /**
+         * If `true`, the link will display as black in the light theme, and white in the dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
         // triggered when attributes of host element change
         this.hostMutationCallback = (mutationList) => {
             let forceComponentUpdate = false;
             mutationList.forEach(({ attributeName }) => {
-                if (IC_INHERITED_ARIA.includes(attributeName)) {
-                    this.inheritedAttributes[attributeName] =
-                        this.el.getAttribute(attributeName);
-                    forceComponentUpdate = true;
+                if (attributeName) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute && IC_INHERITED_ARIA.includes(attributeName)) {
+                        this.inheritedAttributes[attributeName] = attribute;
+                        forceComponentUpdate = true;
+                    }
                 }
             });
             if (forceComponentUpdate) {
                 forceUpdate(this);
             }
         };
-        this.download = false;
-        this.href = null;
-        this.hreflang = undefined;
-        this.monochrome = false;
-        this.referrerpolicy = undefined;
-        this.rel = undefined;
-        this.target = undefined;
-        this.theme = "inherit";
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);
@@ -56,8 +63,8 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
      * Sets focus on the link.
      */
     async setFocus() {
-        var _a;
-        (_a = this.el.shadowRoot.querySelector("a")) === null || _a === void 0 ? void 0 : _a.focus();
+        var _a, _b;
+        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a")) === null || _b === void 0 ? void 0 : _b.focus();
     }
     updateTheme(mode = null) {
         const theme = getBrandFromContext(this.el, mode);
@@ -78,17 +85,17 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { class: {
+        return (h(Host, { key: '79cea5918b2a89326348007cb6806427862ef13e', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-                ["ic-link-monochrome"]: monochrome,
+                ["ic-link-monochrome"]: !!monochrome,
             } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
-                ["link"]: href !== null,
-            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes, { part: "link" }), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+                ["link"]: !!href,
+            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href ? "0" : "-1" }, this.inheritedAttributes, { part: "link" }), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
-    static get style() { return icLinkCss; }
+    static get style() { return IcLinkStyle0; }
 }, [17, "ic-link", {
         "download": [8],
         "href": [1],

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

	@@ -1 +1 @@
1	- {"file":"ic-link2.js","mappings":"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","names":[],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n color: var(--ic-link-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n :host(.ic-link) .link:hover,\n :host(.ic-link) .link:focus,\n :host(.ic-link) ::slotted(a:hover),\n :host(.ic-link) ::slotted(a:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 10%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n vertical-align: middle;\n margin-left: var(--ic-space-xxs);\n}\n\n.link > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch);\n}\n\n.ic-link-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: currentcolor;\n}\n\n.link:visited > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon {\n fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n display: var(--breadcrumb-link-display);\n align-items: var(--breadcrumb-link-align-items);\n gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n font-weight: normal;\n color: inherit;\n text-decoration: none;\n display: flex;\n align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n outline: var(--ic-hc-focus-outline);\n text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n color: var(--ic-color-text-primary);\n}\n","import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\n/*\n @slot router-item - Handle routing by nesting your routes in this slot.\n /\n\n@Component({\n tag: \"ic-link\",\n styleUrl: \"ic-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Link {\n private inheritedAttributes: { [k: string]: string } = {};\n private routerSlot: HTMLElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcLinkElement;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n The URL that the link points to.\n /\n @Prop() href?: string = null;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the link will display as black in the light theme, and white in the dark theme.\n /\n @Prop({ mutable: true }) monochrome?: boolean = false;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: 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({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n this.updateTheme();\n this.el.setAttribute(\"exportparts\", \"link\");\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector(\"a\")?.focus();\n }\n\n private updateTheme(mode: IcBrandForeground = null): void {\n const theme = getBrandFromContext(this.el, mode);\n\n if (theme !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n theme === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n monochrome,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-link\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-link-monochrome\"]: monochrome,\n }}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"link\"]: href !== null,\n }}\n download={download !== false ? download : null}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href !== null ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n part=\"link\"\n >\n <slot />\n {target === \"_blank\" && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-link2.js","mappings":"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","names":[],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n color: var(--ic-link-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n :host(.ic-link) .link:hover,\n :host(.ic-link) .link:focus,\n :host(.ic-link) ::slotted(a:hover),\n :host(.ic-link) ::slotted(a:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 10%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n vertical-align: middle;\n margin-left: var(--ic-space-xxs);\n}\n\n.ic-link-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: var(--ic-link-icon-launch);\n}\n\n.link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n display: var(--breadcrumb-link-display);\n align-items: var(--breadcrumb-link-align-items);\n gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n font-weight: normal;\n color: inherit;\n text-decoration: none;\n display: flex;\n align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n outline: var(--ic-hc-focus-outline);\n text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n color: var(--ic-color-text-primary);\n}\n\n/* Footer link /\n\n:host(.footer-link) ::slotted(a) {\n color: var(--ic-footer-link) !important;\n}\n\n/* High Contrast /\n@media (forced-colors: active) {\n .ic-link-open-in-new-icon > svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\n/\n * @slot router-item - Handle routing by nesting your routes in this slot.\n /\n\n@Component({\n tag: \"ic-link\",\n styleUrl: \"ic-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Link {\n private inheritedAttributes: { [k: string]: string } = {};\n private routerSlot: HTMLElement \| null;\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcLinkElement;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n The URL that the link points to.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the link will display as black in the light theme, and white in the dark theme.\n /\n @Prop({ mutable: true }) monochrome?: boolean = false;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: 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({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n this.updateTheme();\n this.el.setAttribute(\"exportparts\", \"link\");\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot?.querySelector(\"a\")?.focus();\n }\n\n private updateTheme(mode: IcBrandForeground \| null = null): void {\n const theme = getBrandFromContext(this.el, mode);\n\n if (theme !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n theme === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n monochrome,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-link\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-link-monochrome\"]: !!monochrome,\n }}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"link\"]: !!href,\n }}\n download={download !== false ? download : null}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n part=\"link\"\n >\n <slot />\n {target === \"_blank\" && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}