@ukic/web-components 3.25.0 → 3.27.0

package/components/ic-input-label2.js

@@ -0,0 +1,121 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { o as onComponentRequiredPropUndefined, y as getInputHelperTextID } from './helpers.js';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
+
+const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:0}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext,ic-input-label .helpertext ::slotted(*){margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
+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;
+        /**
+         * 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.isSlotUsed = (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.isSlotUsed(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']");
+        const labelSlot = this.el.querySelector('[slot="label"]');
+        const LabelContent = () => this.isSlotUsed(labelSlot) ? (h("slot", { name: "label" })) : readonly || !useLabelTag ? (h("ic-typography", { variant: "label", class: {
+                "readonly-label": readonly,
+                "error-label": status === "error" && !(readonly || disabled),
+            } }, labelText)) : (h("ic-typography", { variant: "label", class: {
+                "readonly-label": readonly,
+                "error-label": status === "error" && !(readonly || disabled),
+            } }, h("label", { htmlFor: this.for }, labelText)));
+        return (h(Host, { key: '22df328142cec5a7a86fcf3e62bc40dcbfe56f97', class: {
+                "ic-input-label-disabled": !!disabled,
+                "ic-input-label-readonly": readonly,
+                "with-helper": this.isSlotUsed(helperTextSlot) || helperText !== "",
+            } }, !hideLabel && h(LabelContent, { key: '4eddf506bc0027ff8470aeaa5f16ec124a81cc0f' }), this.isSlotUsed(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 this; }
+    static get style() { return IcInputLabelStyle0; }
+}, [4, "ic-input-label", {
+        "disabled": [4],
+        "for": [1],
+        "helperText": [1, "helper-text"],
+        "hideLabel": [4, "hide-label"],
+        "label": [1],
+        "readonly": [4],
+        "required": [4],
+        "status": [1],
+        "useLabelTag": [4, "use-label-tag"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-input-label", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-input-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputLabel);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { InputLabel as I, defineCustomElement as d };
+
+//# sourceMappingURL=ic-input-label2.js.map

package/components/ic-input-label2.js.map

@@ -0,0 +1 @@
+{"file":"ic-input-label2.js","mappings":"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","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: 0;\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted(*) {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content is placed as the label text.\n */\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n\n    const LabelContent = () =>\n      this.isSlotUsed(labelSlot) ? (\n        <slot name=\"label\"></slot>\n      ) : readonly || !useLabelTag ? (\n        <ic-typography\n          variant=\"label\"\n          class={{\n            \"readonly-label\": readonly,\n            \"error-label\": status === \"error\" && !(readonly || disabled),\n          }}\n        >\n          {labelText}\n        </ic-typography>\n      ) : (\n        <ic-typography\n          variant=\"label\"\n          class={{\n            \"readonly-label\": readonly,\n            \"error-label\": status === \"error\" && !(readonly || disabled),\n          }}\n        >\n          <label htmlFor={this.for}>{labelText}</label>\n        </ic-typography>\n      );\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\": this.isSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && <LabelContent />}\n        {this.isSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-input-validation.d.ts

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

package/components/ic-input-validation.js

@@ -0,0 +1,8 @@
+import { I as InputValidation, d as defineCustomElement$1 } from './ic-input-validation2.js';
+
+const IcInputValidation = InputValidation;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcInputValidation, defineCustomElement };
+
+//# sourceMappingURL=ic-input-validation.js.map

package/components/ic-input-validation.js.map

@@ -0,0 +1 @@
+{"file":"ic-input-validation.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ic-input-validation2.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { z as getInputValidationTextID, i as isSlotUsed, A as IcInformationStatus } from './helpers.js';
+import { w as warningIcon, m as errorIcon, s as successIcon } from './constants.js';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
+
+const icInputValidationCss = "ic-input-validation{max-width:var(--input-width, 20rem);display:flex}ic-input-validation.ic-input-validation-with-status{margin-top:var(--ic-space-xs)}ic-input-validation.ic-input-validation-full-width{width:100%;max-width:none}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-validation .sr-only{position:absolute;left:-9999px}";
+const IcInputValidationStyle0 = icInputValidationCss;
+
+const ICON = {
+    [IcInformationStatus.Warning]: warningIcon,
+    [IcInformationStatus.Error]: errorIcon,
+    [IcInformationStatus.Success]: successIcon,
+};
+const INVISIBLE_CHAR = "\u200B";
+const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         *  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 = "";
+    }
+    watchMessageHandler(newValue) {
+        // Force detectable DOM changes
+        // Invisible character used as screen readers can ignore whitespace changes e.g. "" and " "
+        this.messageEl.textContent = INVISIBLE_CHAR;
+        setTimeout(() => {
+            this.messageEl.textContent = newValue;
+        }, 200); // Delay to help ensure screen readers detect change
+    }
+    componentDidLoad() {
+        this.messageEl.textContent = INVISIBLE_CHAR;
+    }
+    render() {
+        const { ariaLiveMode, fullWidth, status, message } = this;
+        const displayIcon = status !== "" ? ICON[status] : "";
+        return (h(Host, { key: '6d368ba4b4e79886a2efff97ca3d8d446516cc11', class: {
+                [`ic-input-validation-${status}`]: status !== "",
+                "ic-input-validation-full-width": !!fullWidth,
+                "ic-input-validation-with-status": status !== "",
+            } }, displayIcon !== "" && (h("span", { key: 'ce5fbaa3281136744bc5f77c4ea6570205126285', class: {
+                "status-icon": true,
+                [`icon-${status}`]: true,
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '00f35ab82e8fe784ae05fc70d4164c4a804a49e4', variant: "caption", class: "statustext" }, h("span", { key: '1d6d6486d3f885897271a80a3c87077b2bfc39a6', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: 'a37f6a7af4602e08a00b5d980209781c4f4913ac', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: '8b5260888b4fff0031fa8917f84e2cc3b7fa97df', name: "validation-message-adornment" })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "message": ["watchMessageHandler"]
+    }; }
+    static get style() { return IcInputValidationStyle0; }
+}, [4, "ic-input-validation", {
+        "ariaLiveMode": [1, "aria-live-mode"],
+        "for": [1],
+        "fullWidth": [4, "full-width"],
+        "message": [1],
+        "status": [1]
+    }, undefined, {
+        "message": ["watchMessageHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-input-validation", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-input-validation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputValidation);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { InputValidation as I, defineCustomElement as d };
+
+//# sourceMappingURL=ic-input-validation2.js.map

package/components/ic-input-validation2.js.map

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

package/components/ic-layout-grid-item.d.ts

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

package/components/ic-layout-grid-item.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class LayoutGridItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * 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: '903a4aaf039efd3eb3f1748829047f02073f4877', class: {
+                "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
+            } }, h("slot", { key: 'cad27bb4fc8a60f8e579c66776c9277973e14963' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "colSpan": ["watchColSpan"],
+        "colStart": ["watchColStart"],
+        "rowSpan": ["watchRowSpan"],
+        "rowStart": ["watchRowStart"]
+    }; }
+    static get style() { return IcLayoutGridItemStyle0; }
+}, [1, "ic-layout-grid-item", {
+        "colSpan": [2, "col-span"],
+        "colStart": [2, "col-start"],
+        "hideInMobileMode": [4, "hide-in-mobile-mode"],
+        "rowSpan": [2, "row-span"],
+        "rowStart": [2, "row-start"]
+    }, undefined, {
+        "colSpan": ["watchColSpan"],
+        "colStart": ["watchColStart"],
+        "rowSpan": ["watchRowSpan"],
+        "rowStart": ["watchRowStart"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-layout-grid-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-layout-grid-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LayoutGridItem);
+            }
+            break;
+    } });
+}
+
+const IcLayoutGridItem = LayoutGridItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcLayoutGridItem, defineCustomElement };
+
+//# sourceMappingURL=ic-layout-grid-item.js.map

package/components/ic-layout-grid-item.js.map

@@ -0,0 +1 @@
+{"file":"ic-layout-grid-item.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2WAA2W,CAAC;AACxY,+BAAe,mBAAmB;;MCMrB,cAAc;IAL3B;;;;;;;QAWU,YAAO,GAAY,CAAC,CAAC;;;;QASrB,aAAQ,GAAY,CAAC,CAAC;;;;QAStB,qBAAgB,GAAa,KAAK,CAAC;;;;QAKnC,YAAO,GAAY,CAAC,CAAC;;;;QASrB,aAAQ,GAAY,CAAC,CAAC;KAyB/B;IAvDC,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACrE;IAOD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACtE;IAYD,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACrE;IAOD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACtE;IAED,iBAAiB;QACf,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;KACzE;IAED,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAClC,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,+BAA+B,EAAE,CAAC,CAAC,gBAAgB;aACpD,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-layout-grid-item/ic-layout-grid-item.css?tag=ic-layout-grid-item&encapsulation=shadow","src/components/ic-layout-grid-item/ic-layout-grid-item.tsx"],"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 { Component, Prop, Host, h, Element, Watch } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-layout-grid-item\",\n  styleUrl: \"ic-layout-grid-item.css\",\n  shadow: true,\n})\nexport class LayoutGridItem {\n  @Element() el: HTMLIcLayoutGridItemElement;\n\n  /**\n   * The number of columns the grid item should span.\n   */\n  @Prop() colSpan?: number = 1;\n  @Watch(\"colSpan\")\n  watchColSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-col-span\", `${newValue}`);\n  }\n\n  /**\n   * The column the grid item should start at.\n   */\n  @Prop() colStart?: number = 1;\n  @Watch(\"colStart\")\n  watchColStart(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-col-start\", `${newValue}`);\n  }\n\n  /**\n   * If `true`, the grid item will be hidden on smaller screens.\n   */\n  @Prop() hideInMobileMode?: boolean = false;\n\n  /**\n   * The number of rows the grid item should span.\n   */\n  @Prop() rowSpan?: number = 1;\n  @Watch(\"rowSpan\")\n  watchRowSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-row-span\", `${newValue}`);\n  }\n\n  /**\n   * The row the grid item should start at.\n   */\n  @Prop() rowStart?: number = 1;\n  @Watch(\"rowStart\")\n  watchRowStart(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-row-start\", `${newValue}`);\n  }\n\n  componentWillLoad(): void {\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\n  render() {\n    const { hideInMobileMode } = this;\n    return (\n      <Host\n        class={{\n          \"ic-layout-grid-hide-in-mobile\": !!hideInMobileMode,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-layout-grid.d.ts

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

package/components/ic-layout-grid.js

@@ -0,0 +1,188 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class LayoutGrid extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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: '61a7e3f3a8e2156da3cecc47997fc54392d4efc0', class: {
+                [`ic-layout-grid-aligned-${aligned}`]: true,
+                ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
+            } }, h("slot", { key: 'ac804c02e898cd212d5cb48b3b5a7ba18790f186' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "columns": ["watchColumns"],
+        "defaultColSpan": ["watchDefaultColSpan"],
+        "defaultColWidth": ["watchDefaultColWidth"],
+        "defaultRowSpan": ["watchDefaultRowSpan"],
+        "gridSpacing": ["watchGridSpacing"],
+        "rows": ["watchRows"],
+        "type": ["watchType"]
+    }; }
+    static get style() { return IcLayoutGridStyle0; }
+}, [1, "ic-layout-grid", {
+        "aligned": [1],
+        "columns": [2],
+        "defaultColSpan": [2, "default-col-span"],
+        "defaultColWidth": [1, "default-col-width"],
+        "defaultRowSpan": [2, "default-row-span"],
+        "fullHeight": [4, "full-height"],
+        "gridSpacing": [2, "grid-spacing"],
+        "rows": [2],
+        "type": [1]
+    }, undefined, {
+        "columns": ["watchColumns"],
+        "defaultColSpan": ["watchDefaultColSpan"],
+        "defaultColWidth": ["watchDefaultColWidth"],
+        "defaultRowSpan": ["watchDefaultRowSpan"],
+        "gridSpacing": ["watchGridSpacing"],
+        "rows": ["watchRows"],
+        "type": ["watchType"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-layout-grid"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-layout-grid":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LayoutGrid);
+            }
+            break;
+    } });
+}
+
+const IcLayoutGrid = LayoutGrid;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcLayoutGrid, defineCustomElement };
+
+//# sourceMappingURL=ic-layout-grid.js.map

package/components/ic-layout-grid.js.map

@@ -0,0 +1 @@
+{"file":"ic-layout-grid.js","mappings":"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","names":[],"sources":["src/components/ic-layout-grid/ic-layout-grid.css?tag=ic-layout-grid&encapsulation=shadow","src/components/ic-layout-grid/ic-layout-grid.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: grid;\n  width: fit-content;\n  grid-template-columns: repeat(\n    var(--ic-layout-grid-columns),\n    var(--ic-layout-grid-col-width, 1fr)\n  );\n  grid-template-rows: repeat(var(--ic-layout-grid-rows), 1fr);\n  gap: var(--ic-layout-grid-spacing);\n  padding-top: var(--ic-layout-grid-margin);\n  padding-bottom: var(--ic-layout-grid-margin);\n}\n\n:host ::slotted(*) {\n  grid-column: span var(--ic-layout-grid-col-span, 1);\n  grid-row: span var(--ic-layout-grid-row-span, 1);\n}\n\n:host(.ic-layout-grid-aligned-center) {\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--ic-layout-grid-margin);\n  padding-right: var(--ic-layout-grid-margin);\n}\n\n:host(.ic-layout-grid-aligned-left) {\n  margin-left: var(--ic-layout-grid-margin);\n  margin-right: auto;\n  padding-right: var(--ic-layout-grid-margin);\n}\n\n:host(.ic-layout-grid-aligned-full-width) {\n  margin-left: var(--ic-layout-grid-margin);\n  margin-right: var(--ic-layout-grid-margin);\n  width: calc(100% - (var(--ic-layout-grid-margin) * 2));\n}\n\n:host(.ic-layout-grid-no-vertical-padding) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n@media only screen and (max-width: 576px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-xs);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-xs);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-xs);\n  }\n}\n\n@media only screen and (min-width: 577px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-md);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-sm);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-sm);\n  }\n}\n\n@media only screen and (min-width: 769px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-md);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-md);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-md);\n  }\n}\n\n@media only screen and (min-width: 993px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-md);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-lg);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-lg);\n  }\n}\n\n@media only screen and (min-width: 1201px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-lg);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-xl);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-xl);\n  }\n}\n","import { Component, Prop, Host, h, Element, Watch } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\nimport { IcGridBreakpoints, IcGridType } from \"./ic-layout-grid.types\";\n\n@Component({\n  tag: \"ic-layout-grid\",\n  styleUrl: \"ic-layout-grid.css\",\n  shadow: true,\n})\nexport class LayoutGrid {\n  private COL_WIDTH_CSS_PROP = \"--ic-layout-grid-col-width\";\n\n  @Element() el: HTMLIcLayoutGridElement;\n\n  /**\n   * The alignment of the grid.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The number of columns in the grid.\n   * This can be a number or an object specifying different values for each breakpoint.\n   */\n  @Prop() columns?: IcGridBreakpoints;\n  @Watch(\"columns\")\n  watchColumns() {\n    this.getColumns();\n  }\n\n  /**\n   * The default column span for grid items.\n   */\n  @Prop() defaultColSpan?: IcGridBreakpoints = 1;\n  @Watch(\"defaultColSpan\")\n  watchDefaultColSpan() {\n    this.getColSpan();\n  }\n\n  /**\n   * The default column width for grid items.\n   * This is used when the grid type is set to \"fixed\".\n   */\n  @Prop() defaultColWidth?: string = \"64px\";\n  @Watch(\"defaultColWidth\")\n  watchDefaultColWidth(newValue: string) {\n    if (this.type === \"fixed\") {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);\n    }\n  }\n\n  /**\n   * The default row span for grid items.\n   */\n  @Prop() defaultRowSpan?: number = 1;\n  @Watch(\"defaultRowSpan\")\n  watchDefaultRowSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-layout-grid-row-span\", `${newValue}`);\n  }\n\n  /**\n   * If `true`, the standard vertical padding from the grid will be removed.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  /**\n   * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).\n   */\n  @Prop() gridSpacing?: number = 2;\n  @Watch(\"gridSpacing\")\n  watchGridSpacing() {\n    this.getGridSpacing();\n  }\n\n  /**\n   * The number of rows in the grid.\n   */\n  @Prop() rows?: number = 1;\n  @Watch(\"rows\")\n  watchRows(newValue: number) {\n    this.el.style.setProperty(\"--ic-layout-grid-rows\", `${newValue}`);\n  }\n\n  /**\n   * The layout type of the grid.\n   */\n  @Prop() type: IcGridType = \"fixed\";\n  @Watch(\"type\")\n  watchType(newValue: IcGridType) {\n    this.getColumns();\n    if (newValue === \"fixed\" && this.defaultColWidth) {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);\n    } else {\n      this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.columns === undefined) {\n      if (this.type === \"fixed\") {\n        this.columns = 12;\n      } else if (this.type === \"fluid\") {\n        this.columns = {\n          xs: 2,\n          sm: 4,\n          md: 8,\n          lg: 12,\n          xl: 12,\n        };\n      }\n    }\n    this.getColumns();\n    this.getColSpan();\n    this.getGridSpacing();\n    if (this.type === \"fixed\" && this.defaultColWidth) {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);\n    }\n    if (this.rows) {\n      this.el.style.setProperty(\"--ic-layout-grid-rows\", `${this.rows}`);\n      this.el.style.setProperty(\n        \"--ic-layout-grid-row-span\",\n        `${this.defaultRowSpan}`\n      );\n    }\n  }\n\n  private getColumns = () => {\n    if (typeof this.columns === \"number\") {\n      this.el.style.setProperty(\n        \"--ic-layout-grid-columns\",\n        this.columns.toString()\n      );\n    } else if (typeof this.columns === \"object\") {\n      Object.entries(this.columns).forEach(([breakpoint, value]) => {\n        if (value !== undefined) {\n          this.el.style.setProperty(\n            `--ic-layout-grid-columns-${breakpoint}`,\n            value.toString()\n          );\n        }\n      });\n    }\n  };\n\n  private getColSpan = () => {\n    if (this.defaultColSpan !== undefined) {\n      if (typeof this.defaultColSpan === \"number\") {\n        (Array.from(this.el.children) as HTMLElement[]).forEach((child) => {\n          child.style.setProperty(\n            \"--ic-layout-grid-col-span\",\n            `${this.defaultColSpan}`\n          );\n        });\n      } else if (typeof this.defaultColSpan === \"object\") {\n        Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {\n          if (value !== undefined) {\n            this.el.style.setProperty(\n              `--ic-layout-grid-col-span-${breakpoint}`,\n              value.toString()\n            );\n          }\n        });\n      }\n    }\n  };\n\n  private getGridSpacing = () => {\n    this.el.style.setProperty(\n      \"--ic-layout-grid-spacing\",\n      `calc(var(--ic-space-xs) * ${this.gridSpacing})`\n    );\n  };\n\n  render() {\n    const { aligned, fullHeight } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-layout-grid-aligned-${aligned}`]: true,\n          [\"ic-layout-grid-no-vertical-padding\"]: !!fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-link.d.ts

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