@ukic/canary-web-components 3.0.0-canary.22 → 3.0.0-canary.24

package/dist/esm/ic-input-component-container_4.entry.js

@@ -0,0 +1,217 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
+import { r as removeDisabledFalse, a as renderDynamicChildSlots, s as slotHasContent, S as IcInformationStatus, Y as successIcon, o as onComponentRequiredPropUndefined, Z as getInputHelperTextID, _ as getInputValidationTextID, $ as warningIcon, a0 as errorIcon } from './helpers-f3928d01.js';
+
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;min-height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-color-background-primary));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%}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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         *  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() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "left-icon", this));
+        this.hostMutationObserver.observe(this.el, { childList: true });
+    }
+    render() {
+        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
+        return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {
+                [`ic-input-component-container-${size}`]: true,
+                [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
+                "ic-input-component-container-disabled": !!disabled,
+                "ic-input-component-container-readonly": !!readonly,
+                "ic-input-component-container-multiline": !!multiLine,
+                "ic-input-component-container-full-width": !!fullWidth,
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: "icon-container" }, h("slot", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: "left-icon" }))), h("slot", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: "inline-success", innerHTML: successIcon })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
+};
+InputComponentContainer.style = IcInputComponentContainerStyle0;
+
+const icInputContainerCss = "ic-input-container .component-container{display:flex;flex-direction:column}";
+const IcInputContainerStyle0 = icInputContainerCss;
+
+const InputContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * 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, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
+                ["component-container"]: true,
+                ["disabled"]: !!this.disabled,
+                ["readonly"]: !!this.readonly,
+            } }, h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
+    }
+};
+InputContainer.style = IcInputContainerStyle0;
+
+const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:0}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext,ic-input-label .helpertext ::slotted(*){margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
+const IcInputLabelStyle0 = icInputLabelCss;
+
+const InputLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * The helper text that will be displayed.
+         */
+        this.helperText = "";
+        /**
+         * The label will be visually hidden.
+         */
+        this.hideLabel = false;
+        /**
+         * 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;
+        this.isHelperTextSlotUsed = (slot) => {
+            const assignedEls = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
+            if (assignedEls && assignedEls.length) {
+                for (const el of assignedEls) {
+                    if (el.tagName === "SLOT") {
+                        // Recursion needed for when slot is forwarded multiple times - through child components
+                        // (e.g. in date picker)
+                        if (this.isHelperTextSlotUsed(el)) {
+                            return true;
+                        }
+                    }
+                    else {
+                        // Found an assigned element which is not a nested <slot>
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
+    }
+    render() {
+        const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;
+        const labelText = required ? label + " *" : label;
+        const helperTextId = this.for && getInputHelperTextID(this.for);
+        const helperTextClass = {
+            helpertext: true,
+            "helpertext-normal": !disabled && !readonly,
+            "helpertext-readonly": readonly,
+        };
+        const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
+        return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {
+                "ic-input-label-disabled": !!disabled,
+                "ic-input-label-readonly": readonly,
+                "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
+            } }, !hideLabel && (h("ic-typography", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: "label", class: {
+                "readonly-label": readonly,
+                "error-label": status === "error" && !(readonly || disabled),
+            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));
+    }
+    get el() { return getElement(this); }
+};
+InputLabel.style = IcInputLabelStyle0;
+
+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,
+    [IcInformationStatus.Error]: errorIcon,
+    [IcInformationStatus.Success]: successIcon,
+};
+const InputValidation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         *  The ARIA live mode to apply to the message.
+         */
+        this.ariaLiveMode = "polite";
+        /**
+         *  If `true`, the input validation will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * The status of the validation - e.g. 'error' | 'warning' | 'success'.
+         */
+        this.status = "";
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
+    }
+    render() {
+        const { ariaLiveMode, fullWidth, status, message } = this;
+        const displayIcon = status !== "" ? icon[status] : "";
+        return (h(Host, { key: '149fe6ed6f86bb49ff8179e617542c048da4b80f', class: {
+                [`ic-input-validation-${status}`]: status !== "",
+                "ic-input-validation-full-width": !!fullWidth,
+            } }, displayIcon !== "" && (h("span", { key: 'e9e0ad999d435642e02a9f9c4abb95840fe13b3f', class: {
+                "status-icon": true,
+                [`icon-${status}`]: true,
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '7494901b17b7bb3c91167e95190c415fd06f03c9', variant: "caption", class: "statustext" }, h("span", { key: '5e7d2d4cdcef0d32d5338f25365bc9831203a9c9', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '445c0fe4b8effa3b9d98a9b240921e613ef43e24', name: "validation-message-adornment" })));
+    }
+    get el() { return getElement(this); }
+};
+InputValidation.style = IcInputValidationStyle0;
+
+export { InputComponentContainer as ic_input_component_container, InputContainer as ic_input_container, InputLabel as ic_input_label, InputValidation as ic_input_validation };
+
+//# sourceMappingURL=ic-input-component-container_4.entry.js.map

package/dist/esm/ic-input-component-container_4.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-input-component-container.ic-input-container.ic-input-label.ic-input-validation.entry.js","mappings":"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","names":[],"sources":["../web-components/dist/collection/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","../web-components/dist/collection/components/ic-input-component-container/ic-input-component-container.js","../web-components/dist/collection/components/ic-input-container/ic-input-container.css?tag=ic-input-container","../web-components/dist/collection/components/ic-input-container/ic-input-container.js","../web-components/dist/collection/components/ic-input-label/ic-input-label.css?tag=ic-input-label","../web-components/dist/collection/components/ic-input-label/ic-input-label.js","../web-components/dist/collection/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","../web-components/dist/collection/components/ic-input-validation/ic-input-validation.js"],"sourcesContent":["ic-input-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  ::-moz-placeholder {\n  display: none;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n  ::placeholder {\n  display: none;\n}\n\nic-input-component-container .inline-success {\n  margin: var(--ic-space-xs) 0.375rem;\n  display: flex;\n  align-items: center;\n}\n\nic-input-component-container .inline-success > svg {\n  fill: var(--ic-input-component-container-success-icon-inline-color);\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-component-container:hover {\n  border: var(--ic-input-component-container-hover-border);\n  border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));\n  color: var(--ic-action-monochrome-hover-dark);\n}\n\nic-input-component-container:focus {\n  border: var(--ic-border-pressed);\n  border-color: var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  );\n}\n\n.focus-indicator {\n  display: flex;\n  width: 100%;\n  margin: -0.125rem;\n  padding: 0.125rem;\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n  box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.ic-input-component-container-dark:focus-within {\n  box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  ic-input-component-container,\n  .focus-indicator {\n    transition: none;\n  }\n\n  ic-input-component-container:focus-within {\n    border: var(--ic-border-width) solid Highlight;\n    outline: 0.125rem solid Highlight;\n  }\n\n  ic-input-component-container.ic-input-component-container-disabled,\n  ic-input-component-container.ic-input-component-container-disabled:hover {\n    border: var(--ic-border-width) dashed GrayText;\n  }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { IcInformationStatus, } from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { removeDisabledFalse, renderDynamicChildSlots, slotHasContent, } from \"../../utils/helpers\";\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\nexport class InputComponentContainer {\n    constructor() {\n        /**\n         *  If `true`, the disabled state will be set.\n         */\n        this.disabled = false;\n        /**\n         *  If `true`, the input component container will fill the width of the container it is in.\n         */\n        this.fullWidth = false;\n        /**\n         *  If `true`, the input component container will allow for multiple lines.\n         */\n        this.multiLine = false;\n        /**\n         *  If `true`, the readonly state will be set.\n         */\n        this.readonly = false;\n        /**\n         * The size of the input component container component.\n         */\n        this.size = \"medium\";\n        /**\n         *  If `true`, the validation will display inline.\n         */\n        this.validationInline = false;\n        /**\n         * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n         */\n        this.validationStatus = \"\";\n    }\n    watchDisabledHandler() {\n        removeDisabledFalse(this.disabled, this.el);\n    }\n    componentWillLoad() {\n        removeDisabledFalse(this.disabled, this.el);\n    }\n    componentDidLoad() {\n        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, \"left-icon\", this));\n        this.hostMutationObserver.observe(this.el, { childList: true });\n    }\n    render() {\n        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;\n        return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {\n                [`ic-input-component-container-${size}`]: true,\n                [`ic-input-component-container-${validationStatus}`]: validationStatus !== \"\" && !disabled && !readonly,\n                \"ic-input-component-container-disabled\": !!disabled,\n                \"ic-input-component-container-readonly\": !!readonly,\n                \"ic-input-component-container-multiline\": !!multiLine,\n                \"ic-input-component-container-full-width\": !!fullWidth,\n            }, \"aria-disabled\": disabled ? \"true\" : null }, h(\"div\", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: \"focus-indicator\" }, slotHasContent(this.el, \"left-icon\") && (h(\"div\", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: \"icon-container\" }, h(\"slot\", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: \"left-icon\" }))), h(\"slot\", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&\n            validationStatus === IcInformationStatus.Success && (h(\"span\", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: \"inline-success\", innerHTML: successIcon })))));\n    }\n    static get is() { return \"ic-input-component-container\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-input-component-container.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-input-component-container.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the disabled state will be set.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"fullWidth\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the input component container will fill the width of the container it is in.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"full-width\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"multiLine\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the input component container will allow for multiple lines.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"multi-line\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"readonly\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the readonly state will be set.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"readonly\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcSizes\",\n                    \"resolved\": \"\\\"large\\\" | \\\"medium\\\" | \\\"small\\\" | undefined\",\n                    \"references\": {\n                        \"IcSizes\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcSizes\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The size of the input component container component.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"size\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"medium\\\"\"\n            },\n            \"validationInline\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the validation will display inline.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"validation-inline\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcInformationStatusOrEmpty\",\n                    \"resolved\": \"\\\"\\\" | \\\"error\\\" | \\\"success\\\" | \\\"warning\\\" | undefined\",\n                    \"references\": {\n                        \"IcInformationStatusOrEmpty\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcInformationStatusOrEmpty\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"disabled\",\n                \"methodName\": \"watchDisabledHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-input-component-container.js.map\n","ic-input-container .component-container {\n  display: flex;\n  flex-direction: column;\n}\n","import { Host, h } from \"@stencil/core\";\nexport class InputContainer {\n    constructor() {\n        /**\n         * If `true`, the disabled state will be set.\n         */\n        this.disabled = false;\n        /**\n         * If `true`, the readonly state will be set.\n         */\n        this.readonly = false;\n    }\n    render() {\n        return (h(Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h(\"div\", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {\n                [\"component-container\"]: true,\n                [\"disabled\"]: !!this.disabled,\n                [\"readonly\"]: !!this.readonly,\n            } }, h(\"slot\", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));\n    }\n    static get is() { return \"ic-input-container\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-input-container.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-input-container.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the disabled state will be set.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"readonly\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the readonly state will be set.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"readonly\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n}\n//# sourceMappingURL=ic-input-container.js.map\n","ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n\n  --ic-typography-color: var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-label.with-helper {\n  margin-bottom: 0;\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted(*) {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { getInputHelperTextID, onComponentRequiredPropUndefined, } from \"../../utils/helpers\";\nexport class InputLabel {\n    constructor() {\n        /**\n         * If `true`, the disabled state will be set.\n         */\n        this.disabled = false;\n        /**\n         * The helper text that will be displayed.\n         */\n        this.helperText = \"\";\n        /**\n         * The label will be visually hidden.\n         */\n        this.hideLabel = false;\n        /**\n         * If `true`, the readonly state will be set.\n         */\n        this.readonly = false;\n        /**\n         * If `true`, the input label will require a value.\n         */\n        this.required = false;\n        /**\n         * The status of the label - e.g. 'error'.\n         */\n        this.status = \"\";\n        /**\n         * @internal If `true`, wraps label text in label tag\n         */\n        this.useLabelTag = true;\n        this.isHelperTextSlotUsed = (slot) => {\n            const assignedEls = slot === null || slot === void 0 ? void 0 : slot.assignedElements();\n            if (assignedEls && assignedEls.length) {\n                for (const el of assignedEls) {\n                    if (el.tagName === \"SLOT\") {\n                        // Recursion needed for when slot is forwarded multiple times - through child components\n                        // (e.g. in date picker)\n                        if (this.isHelperTextSlotUsed(el)) {\n                            return true;\n                        }\n                    }\n                    else {\n                        // Found an assigned element which is not a nested <slot>\n                        return true;\n                    }\n                }\n            }\n            return false;\n        };\n    }\n    componentDidLoad() {\n        onComponentRequiredPropUndefined([{ prop: this.label, propName: \"label\" }], \"Input Label\");\n    }\n    render() {\n        const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;\n        const labelText = required ? label + \" *\" : label;\n        const helperTextId = this.for && getInputHelperTextID(this.for);\n        const helperTextClass = {\n            helpertext: true,\n            \"helpertext-normal\": !disabled && !readonly,\n            \"helpertext-readonly\": readonly,\n        };\n        const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n        return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {\n                \"ic-input-label-disabled\": !!disabled,\n                \"ic-input-label-readonly\": readonly,\n                \"with-helper\": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== \"\",\n            } }, !hideLabel && (h(\"ic-typography\", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: \"label\", class: {\n                \"readonly-label\": readonly,\n                \"error-label\": status === \"error\" && !(readonly || disabled),\n            } }, readonly || !useLabelTag ? (`${labelText}`) : (h(\"label\", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h(\"span\", { id: helperTextId, class: helperTextClass }, h(\"slot\", { name: \"helper-text\" }))) : (helperText !== \"\" && (h(\"ic-typography\", { variant: \"caption\", class: helperTextClass }, h(\"span\", { id: helperTextId }, helperText))))));\n    }\n    static get is() { return \"ic-input-label\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"./ic-input-label.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-input-label.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the disabled state will be set.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"for\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The ID of the form element the label is bound to.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"for\",\n                \"reflect\": false\n            },\n            \"helperText\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The helper text that will be displayed.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"helper-text\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"hideLabel\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The label will be visually hidden.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"hide-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"label\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": true,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The text content of the label.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"label\",\n                \"reflect\": false\n            },\n            \"readonly\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the readonly state will be set.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"readonly\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"required\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the input label will require a value.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"required\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"status\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"\\\"error\\\" | \\\"\\\"\",\n                    \"resolved\": \"\\\"\\\" | \\\"error\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The status of the label - e.g. 'error'.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"useLabelTag\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"If `true`, wraps label text in label tag\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"use-label-tag\",\n                \"reflect\": false,\n                \"defaultValue\": \"true\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-input-label.js.map\n","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 { Host, h } from \"@stencil/core\";\nimport { IcInformationStatus, } from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\nimport { getInputValidationTextID, onComponentRequiredPropUndefined, } from \"../../utils/helpers\";\nconst icon = {\n    [IcInformationStatus.Warning]: warningIcon,\n    [IcInformationStatus.Error]: errorIcon,\n    [IcInformationStatus.Success]: successIcon,\n};\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\nexport class InputValidation {\n    constructor() {\n        /**\n         *  The ARIA live mode to apply to the message.\n         */\n        this.ariaLiveMode = \"polite\";\n        /**\n         *  If `true`, the input validation will fill the width of the container.\n         */\n        this.fullWidth = false;\n        /**\n         * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n         */\n        this.status = \"\";\n    }\n    componentDidLoad() {\n        onComponentRequiredPropUndefined([{ prop: this.message, propName: \"message\" }], \"Input Validation\");\n    }\n    render() {\n        const { ariaLiveMode, fullWidth, status, message } = this;\n        const displayIcon = status !== \"\" ? icon[status] : \"\";\n        return (h(Host, { key: '149fe6ed6f86bb49ff8179e617542c048da4b80f', class: {\n                [`ic-input-validation-${status}`]: status !== \"\",\n                \"ic-input-validation-full-width\": !!fullWidth,\n            } }, displayIcon !== \"\" && (h(\"span\", { key: 'e9e0ad999d435642e02a9f9c4abb95840fe13b3f', class: {\n                \"status-icon\": true,\n                [`icon-${status}`]: true,\n            }, innerHTML: displayIcon })), h(\"ic-typography\", { key: '7494901b17b7bb3c91167e95190c415fd06f03c9', variant: \"caption\", class: \"statustext\" }, h(\"span\", { key: '5e7d2d4cdcef0d32d5338f25365bc9831203a9c9', \"aria-live\": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h(\"slot\", { key: '445c0fe4b8effa3b9d98a9b240921e613ef43e24', name: \"validation-message-adornment\" })));\n    }\n    static get is() { return \"ic-input-validation\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-input-validation.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-input-validation.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"ariaLiveMode\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcAriaLiveModeVariants\",\n                    \"resolved\": \"\\\"assertive\\\" | \\\"polite\\\" | undefined\",\n                    \"references\": {\n                        \"IcAriaLiveModeVariants\": {\n                            \"location\": \"import\",\n                            \"path\": \"./ic-input-validation.types\",\n                            \"id\": \"src/components/ic-input-validation/ic-input-validation.types.tsx::IcAriaLiveModeVariants\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The ARIA live mode to apply to the message.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"aria-live-mode\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"polite\\\"\"\n            },\n            \"for\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The ID of the form element the validation is bound to.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"for\",\n                \"reflect\": false\n            },\n            \"fullWidth\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the input validation will fill the width of the container.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"full-width\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"message\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": true,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation message to display.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"message\",\n                \"reflect\": false\n            },\n            \"status\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcInformationStatusOrEmpty\",\n                    \"resolved\": \"\\\"\\\" | \\\"error\\\" | \\\"success\\\" | \\\"warning\\\" | undefined\",\n                    \"references\": {\n                        \"IcInformationStatusOrEmpty\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcInformationStatusOrEmpty\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The status of the validation - e.g. 'error' | 'warning' | 'success'.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-input-validation.js.map\n"],"version":3}

package/dist/esm/ic-layout-grid-item.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
+
+const icLayoutGridItemCss = ":host{grid-column:var(--ic-grid-item-col-start, 1) / span\n    var(--ic-grid-item-col-span, var(--ic-layout-grid-col-span, 1)) !important;grid-row:var(--ic-grid-item-row-start, 1) / span\n    var(--ic-grid-item-row-span, var(--ic-layout-grid-row-span, 1)) !important}@media only screen and (max-width: 576px){:host(.ic-layout-grid-hide-in-mobile){display:none}}";
+const IcLayoutGridItemStyle0 = icLayoutGridItemCss;
+
+const LayoutGridItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The number of columns the grid item should span.
+         */
+        this.colSpan = 1;
+        /**
+         * The column the grid item should start at.
+         */
+        this.colStart = 1;
+        /**
+         * If `true`, the grid item will be hidden on smaller screens.
+         */
+        this.hideInMobileMode = false;
+        /**
+         * The number of rows the grid item should span.
+         */
+        this.rowSpan = 1;
+        /**
+         * The row the grid item should start at.
+         */
+        this.rowStart = 1;
+    }
+    watchColSpan(newValue) {
+        this.el.style.setProperty("--ic-grid-item-col-span", `${newValue}`);
+    }
+    watchColStart(newValue) {
+        this.el.style.setProperty("--ic-grid-item-col-start", `${newValue}`);
+    }
+    watchRowSpan(newValue) {
+        this.el.style.setProperty("--ic-grid-item-row-span", `${newValue}`);
+    }
+    watchRowStart(newValue) {
+        this.el.style.setProperty("--ic-grid-item-row-start", `${newValue}`);
+    }
+    componentWillLoad() {
+        this.el.style.setProperty("--ic-grid-item-col-start", `${this.colStart}`);
+        this.el.style.setProperty("--ic-grid-item-col-span", `${this.colSpan}`);
+        this.el.style.setProperty("--ic-grid-item-row-start", `${this.rowStart}`);
+        this.el.style.setProperty("--ic-grid-item-row-span", `${this.rowSpan}`);
+    }
+    render() {
+        const { hideInMobileMode } = this;
+        return (h(Host, { key: '07cb3d39a4c3440a06df2f6c56ecdf3017e48f59', class: {
+                "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
+            } }, h("slot", { key: '53c7d5616494ad9fc7468d023b9a9ec520938916' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "colSpan": ["watchColSpan"],
+        "colStart": ["watchColStart"],
+        "rowSpan": ["watchRowSpan"],
+        "rowStart": ["watchRowStart"]
+    }; }
+};
+LayoutGridItem.style = IcLayoutGridItemStyle0;
+
+export { LayoutGridItem as ic_layout_grid_item };
+
+//# sourceMappingURL=ic-layout-grid-item.entry.js.map

package/dist/esm/ic-layout-grid-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-layout-grid-item.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2WAA2W,CAAC;AACxY,+BAAe,mBAAmB;;MCArB,cAAc;IACvB;;;;;QAII,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;;;;QAIjB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;;;;QAIlB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;;;;QAI9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;;;;QAIjB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;KACrB;IACD,YAAY,CAAC,QAAQ;QACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACvE;IACD,aAAa,CAAC,QAAQ;QAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACxE;IACD,YAAY,CAAC,QAAQ;QACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACvE;IACD,aAAa,CAAC,QAAQ;QAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACxE;IACD,iBAAiB;QACb,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAC3E;IACD,MAAM;QACF,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAClC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,+BAA+B,EAAE,CAAC,CAAC,gBAAgB;aACtD,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,EAAE;KAC7E;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.css?tag=ic-layout-grid-item&encapsulation=shadow","../web-components/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js"],"sourcesContent":[":host {\n  grid-column: var(--ic-grid-item-col-start, 1) / span\n    var(--ic-grid-item-col-span, var(--ic-layout-grid-col-span, 1)) !important;\n  grid-row: var(--ic-grid-item-row-start, 1) / span\n    var(--ic-grid-item-row-span, var(--ic-layout-grid-row-span, 1)) !important;\n}\n\n@media only screen and (max-width: 576px) {\n  :host(.ic-layout-grid-hide-in-mobile) {\n    display: none;\n  }\n}\n","import { Host, h } from \"@stencil/core\";\nexport class LayoutGridItem {\n    constructor() {\n        /**\n         * The number of columns the grid item should span.\n         */\n        this.colSpan = 1;\n        /**\n         * The column the grid item should start at.\n         */\n        this.colStart = 1;\n        /**\n         * If `true`, the grid item will be hidden on smaller screens.\n         */\n        this.hideInMobileMode = false;\n        /**\n         * The number of rows the grid item should span.\n         */\n        this.rowSpan = 1;\n        /**\n         * The row the grid item should start at.\n         */\n        this.rowStart = 1;\n    }\n    watchColSpan(newValue) {\n        this.el.style.setProperty(\"--ic-grid-item-col-span\", `${newValue}`);\n    }\n    watchColStart(newValue) {\n        this.el.style.setProperty(\"--ic-grid-item-col-start\", `${newValue}`);\n    }\n    watchRowSpan(newValue) {\n        this.el.style.setProperty(\"--ic-grid-item-row-span\", `${newValue}`);\n    }\n    watchRowStart(newValue) {\n        this.el.style.setProperty(\"--ic-grid-item-row-start\", `${newValue}`);\n    }\n    componentWillLoad() {\n        this.el.style.setProperty(\"--ic-grid-item-col-start\", `${this.colStart}`);\n        this.el.style.setProperty(\"--ic-grid-item-col-span\", `${this.colSpan}`);\n        this.el.style.setProperty(\"--ic-grid-item-row-start\", `${this.rowStart}`);\n        this.el.style.setProperty(\"--ic-grid-item-row-span\", `${this.rowSpan}`);\n    }\n    render() {\n        const { hideInMobileMode } = this;\n        return (h(Host, { key: '07cb3d39a4c3440a06df2f6c56ecdf3017e48f59', class: {\n                \"ic-layout-grid-hide-in-mobile\": !!hideInMobileMode,\n            } }, h(\"slot\", { key: '53c7d5616494ad9fc7468d023b9a9ec520938916' })));\n    }\n    static get is() { return \"ic-layout-grid-item\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-layout-grid-item.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-layout-grid-item.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"colSpan\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The number of columns the grid item should span.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"col-span\",\n                \"reflect\": false,\n                \"defaultValue\": \"1\"\n            },\n            \"colStart\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The column the grid item should start at.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"col-start\",\n                \"reflect\": false,\n                \"defaultValue\": \"1\"\n            },\n            \"hideInMobileMode\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the grid item will be hidden on smaller screens.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"hide-in-mobile-mode\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"rowSpan\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The number of rows the grid item should span.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"row-span\",\n                \"reflect\": false,\n                \"defaultValue\": \"1\"\n            },\n            \"rowStart\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The row the grid item should start at.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"row-start\",\n                \"reflect\": false,\n                \"defaultValue\": \"1\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"colSpan\",\n                \"methodName\": \"watchColSpan\"\n            }, {\n                \"propName\": \"colStart\",\n                \"methodName\": \"watchColStart\"\n            }, {\n                \"propName\": \"rowSpan\",\n                \"methodName\": \"watchRowSpan\"\n            }, {\n                \"propName\": \"rowStart\",\n                \"methodName\": \"watchRowStart\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-layout-grid-item.js.map\n"],"version":3}

package/dist/esm/ic-layout-grid.entry.js

@@ -0,0 +1,152 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
+
+const icLayoutGridCss = "/*! 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{display:grid;width:-moz-fit-content;width:fit-content;grid-template-columns:repeat(\n    var(--ic-layout-grid-columns),\n    var(--ic-layout-grid-col-width, 1fr)\n  );grid-template-rows:repeat(var(--ic-layout-grid-rows), 1fr);gap:var(--ic-layout-grid-spacing);padding-top:var(--ic-layout-grid-margin);padding-bottom:var(--ic-layout-grid-margin)}:host ::slotted(*){grid-column:span var(--ic-layout-grid-col-span, 1);grid-row:span var(--ic-layout-grid-row-span, 1)}:host(.ic-layout-grid-aligned-center){margin-left:auto;margin-right:auto;padding-left:var(--ic-layout-grid-margin);padding-right:var(--ic-layout-grid-margin)}:host(.ic-layout-grid-aligned-left){margin-left:var(--ic-layout-grid-margin);margin-right:auto;padding-right:var(--ic-layout-grid-margin)}:host(.ic-layout-grid-aligned-full-width){margin-left:var(--ic-layout-grid-margin);margin-right:var(--ic-layout-grid-margin);width:calc(100% - (var(--ic-layout-grid-margin) * 2))}:host(.ic-layout-grid-no-vertical-padding){padding-top:0;padding-bottom:0}@media only screen and (max-width: 576px){:host{--ic-layout-grid-margin:var(--ic-space-xs);--ic-layout-grid-columns:var(--ic-layout-grid-columns-xs)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-xs)}}@media only screen and (min-width: 577px){:host{--ic-layout-grid-margin:var(--ic-space-md);--ic-layout-grid-columns:var(--ic-layout-grid-columns-sm)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-sm)}}@media only screen and (min-width: 769px){:host{--ic-layout-grid-margin:var(--ic-space-md);--ic-layout-grid-columns:var(--ic-layout-grid-columns-md)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-md)}}@media only screen and (min-width: 993px){:host{--ic-layout-grid-margin:var(--ic-space-md);--ic-layout-grid-columns:var(--ic-layout-grid-columns-lg)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-lg)}}@media only screen and (min-width: 1201px){:host{--ic-layout-grid-margin:var(--ic-space-lg);--ic-layout-grid-columns:var(--ic-layout-grid-columns-xl)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-xl)}}";
+const IcLayoutGridStyle0 = icLayoutGridCss;
+
+const LayoutGrid = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.COL_WIDTH_CSS_PROP = "--ic-layout-grid-col-width";
+        /**
+         * The alignment of the grid.
+         */
+        this.aligned = "left";
+        /**
+         * The default column span for grid items.
+         */
+        this.defaultColSpan = 1;
+        /**
+         * The default column width for grid items.
+         * This is used when the grid type is set to "fixed".
+         */
+        this.defaultColWidth = "64px";
+        /**
+         * The default row span for grid items.
+         */
+        this.defaultRowSpan = 1;
+        /**
+         * If `true`, the standard vertical padding from the grid will be removed.
+         */
+        this.fullHeight = false;
+        /**
+         * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).
+         */
+        this.gridSpacing = 2;
+        /**
+         * The number of rows in the grid.
+         */
+        this.rows = 1;
+        /**
+         * The layout type of the grid.
+         */
+        this.type = "fixed";
+        this.getColumns = () => {
+            if (typeof this.columns === "number") {
+                this.el.style.setProperty("--ic-layout-grid-columns", this.columns.toString());
+            }
+            else if (typeof this.columns === "object") {
+                Object.entries(this.columns).forEach(([breakpoint, value]) => {
+                    if (value !== undefined) {
+                        this.el.style.setProperty(`--ic-layout-grid-columns-${breakpoint}`, value.toString());
+                    }
+                });
+            }
+        };
+        this.getColSpan = () => {
+            if (this.defaultColSpan !== undefined) {
+                if (typeof this.defaultColSpan === "number") {
+                    Array.from(this.el.children).forEach((child) => {
+                        child.style.setProperty("--ic-layout-grid-col-span", `${this.defaultColSpan}`);
+                    });
+                }
+                else if (typeof this.defaultColSpan === "object") {
+                    Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {
+                        if (value !== undefined) {
+                            this.el.style.setProperty(`--ic-layout-grid-col-span-${breakpoint}`, value.toString());
+                        }
+                    });
+                }
+            }
+        };
+        this.getGridSpacing = () => {
+            this.el.style.setProperty("--ic-layout-grid-spacing", `calc(var(--ic-space-xs) * ${this.gridSpacing})`);
+        };
+    }
+    watchColumns() {
+        this.getColumns();
+    }
+    watchDefaultColSpan() {
+        this.getColSpan();
+    }
+    watchDefaultColWidth(newValue) {
+        if (this.type === "fixed") {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);
+        }
+    }
+    watchDefaultRowSpan(newValue) {
+        this.el.style.setProperty("--ic-layout-grid-row-span", `${newValue}`);
+    }
+    watchGridSpacing() {
+        this.getGridSpacing();
+    }
+    watchRows(newValue) {
+        this.el.style.setProperty("--ic-layout-grid-rows", `${newValue}`);
+    }
+    watchType(newValue) {
+        this.getColumns();
+        if (newValue === "fixed" && this.defaultColWidth) {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
+        }
+        else {
+            this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);
+        }
+    }
+    componentWillLoad() {
+        if (this.columns === undefined) {
+            if (this.type === "fixed") {
+                this.columns = 12;
+            }
+            else if (this.type === "fluid") {
+                this.columns = {
+                    xs: 2,
+                    sm: 4,
+                    md: 8,
+                    lg: 12,
+                    xl: 12,
+                };
+            }
+        }
+        this.getColumns();
+        this.getColSpan();
+        this.getGridSpacing();
+        if (this.type === "fixed" && this.defaultColWidth) {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
+        }
+        if (this.rows) {
+            this.el.style.setProperty("--ic-layout-grid-rows", `${this.rows}`);
+            this.el.style.setProperty("--ic-layout-grid-row-span", `${this.defaultRowSpan}`);
+        }
+    }
+    render() {
+        const { aligned, fullHeight } = this;
+        return (h(Host, { key: '95699906353df84f439ec7c7ed628f4ba9c80b4e', class: {
+                [`ic-layout-grid-aligned-${aligned}`]: true,
+                ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
+            } }, h("slot", { key: '5642340495e02e53b2e7248e0f254b32b95b3b3f' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "columns": ["watchColumns"],
+        "defaultColSpan": ["watchDefaultColSpan"],
+        "defaultColWidth": ["watchDefaultColWidth"],
+        "defaultRowSpan": ["watchDefaultRowSpan"],
+        "gridSpacing": ["watchGridSpacing"],
+        "rows": ["watchRows"],
+        "type": ["watchType"]
+    }; }
+};
+LayoutGrid.style = IcLayoutGridStyle0;
+
+export { LayoutGrid as ic_layout_grid };
+
+//# sourceMappingURL=ic-layout-grid.entry.js.map