@ukic/canary-web-components 2.0.0-canary.0

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -0,0 +1,166 @@
+ic-input-component-container {
+  /**
+   * @prop --border-color: Border colour of the input component container
+   */
+
+  display: flex;
+  border: var(--ic-space-1px) solid
+    var(--border-color, var(--ic-architectural-400));
+  border-radius: var(--ic-border-radius);
+  transition: var(--ic-easing-transition-slow);
+  height: 2.5rem;
+  width: var(--input-width, 20rem);
+  padding: var(--ic-space-1px);
+  background-color: var(--ic-architectural-white);
+  box-sizing: border-box;
+  fill: var(--ic-architectural-400);
+  outline: none;
+}
+
+ic-input-component-container.fullwidth {
+  width: 100%;
+}
+
+ic-input-component-container.disabled,
+ic-input-component-container.disabled:hover {
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
+}
+
+ic-input-component-container.readonly,
+ic-input-component-container.readonly:hover {
+  border: none;
+  padding: 0;
+}
+
+ic-input-component-container.error {
+  border: var(--ic-error-border-default);
+  padding: 0;
+}
+
+ic-input-component-container.error:hover {
+  border: var(--ic-error-border-hover);
+}
+
+ic-input-component-container.error:focus-within {
+  border: var(--ic-error-border-pressed);
+}
+
+ic-input-component-container.warning {
+  border: var(--ic-warning-border-default);
+  padding: 0;
+}
+
+ic-input-component-container.warning:hover {
+  border: var(--ic-warning-border-hover);
+}
+
+ic-input-component-container.warning:focus-within {
+  border: var(--ic-warning-border-pressed);
+}
+
+ic-input-component-container.success {
+  border: var(--ic-success-border-default);
+  padding: 0;
+}
+
+ic-input-component-container.success:hover {
+  border: var(--ic-success-border-hover);
+}
+
+ic-input-component-container.success:focus-within {
+  border: var(--ic-success-border-pressed);
+}
+
+ic-input-component-container.small {
+  height: var(--ic-space-xl);
+}
+
+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.multiline .icon-container,
+ic-input-component-container.multiline.small .icon-container {
+  margin-top: 0.375rem;
+  display: block;
+}
+
+ic-input-component-container.readonly .icon-container {
+  margin-left: -0.313rem;
+}
+
+ic-input-component-container.disabled ::-moz-placeholder {
+  display: none;
+}
+
+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.dark:hover {
+  --border-color: var(--ic-architectural-400);
+}
+
+ic-input-component-container .inline-success > svg {
+  fill: var(--ic-status-success);
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+ic-input-component-container:hover {
+  border: var(--ic-border-hover);
+  color: var(--ic-action-dark-hover);
+}
+
+ic-input-component-container:focus {
+  border: var(--ic-border-pressed);
+}
+
+.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.dark:focus-within {
+  box-shadow: var(--ic-border-focus);
+}
+
+@media (forced-colors: active) {
+  /* Styles here only apply to Forced Colors Mode */
+  ic-input-component-container,
+  .focus-indicator {
+    transition: none;
+  }
+
+  ic-input-component-container:focus-within {
+    border: var(--ic-space-1px) solid Highlight;
+    outline: 0.125rem solid Highlight;
+  }
+
+  ic-input-component-container.disabled,
+  ic-input-component-container.disabled:hover {
+    border: var(--ic-space-1px) dashed GrayText;
+  }
+}

package/dist/collection/components/ic-input-component-container/ic-input-component-container.js

@@ -0,0 +1,208 @@
+import { Host, h } from "@stencil/core";
+import { IcInformationStatus, } from "../../utils/types";
+import successIcon from "../../assets/success-icon.svg";
+import { isSlotUsed } from "../../utils/helpers";
+/**
+ * @slot left-icon - Content will be placed to the left of the input.
+ */
+export class InputComponentContainer {
+  constructor() {
+    this.dark = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.multiLine = false;
+    this.readonly = false;
+    this.small = false;
+    this.validationInline = false;
+    this.validationStatus = "";
+  }
+  render() {
+    const { small, validationStatus, disabled, readonly, multiLine, fullWidth, dark, validationInline, } = this;
+    const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
+      ? true
+      : false;
+    return (h(Host, { class: {
+        ["small"]: small,
+        [validationStatus]: hasValidationStatus,
+        ["disabled"]: disabled,
+        ["readonly"]: readonly,
+        ["multiline"]: multiLine,
+        ["fullwidth"]: fullWidth,
+        ["dark"]: dark,
+      } }, h("div", { class: {
+        "focus-indicator": true,
+        dark: dark,
+      } }, isSlotUsed(this.host, "left-icon") && (h("div", { class: {
+        ["icon-container"]: true,
+      } }, h("slot", { name: "left-icon" }))), h("slot", null), validationInline &&
+      validationStatus === IcInformationStatus.Success && (h("span", { class: {
+        ["inline-success"]: true,
+      }, innerHTML: successIcon })))));
+  }
+  static get is() { return "ic-input-component-container"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-input-component-container.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-input-component-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dark": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the dark variant of the input component container will be displayed."
+        },
+        "attribute": "dark",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the disabled state will be set."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the input component container will fill the width of the container it is in."
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "multiLine": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the input component container will allow for multiple lines."
+        },
+        "attribute": "multi-line",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the readonly state will be set."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the small styling will be applied to the input component container."
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "validationInline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the validation will display inline."
+        },
+        "attribute": "validation-inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "validationStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "references": {
+            "IcInformationStatusOrEmpty": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The validation status of the input component container - e.g. 'error' | 'warning' | 'success'."
+        },
+        "attribute": "validation-status",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=ic-input-component-container.js.map

package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-component-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;gBAMT,KAAK;oBAKF,KAAK;qBAKJ,KAAK;qBAKL,KAAK;oBAKN,KAAK;iBAKR,KAAK;4BAKM,KAAK;4BAKc,EAAE;;EAEzD,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,gBAAgB,GACjB,GAAG,IAAI,CAAC;IACT,MAAM,mBAAmB,GACvB,IAAI,CAAC,gBAAgB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;MAC9D,CAAC,CAAC,IAAI;MACN,CAAC,CAAC,KAAK,CAAC;IACZ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,KAAK;QAChB,CAAC,gBAAgB,CAAC,EAAE,mBAAmB;QACvC,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,MAAM,CAAC,EAAE,IAAI;OACf;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,IAAI,EAAE,IAAI;SACX;QAEA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CACrC,WACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB;UAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP;QACD,eAAa;QAEZ,gBAAgB;UACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,IAAI,CAClD,YACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n  tag: \"ic-input-component-container\",\n  styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n  @Element() host: HTMLIcInputComponentContainerElement;\n\n  /**\n   *  If `true`, the dark variant of the input component container will be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   *  If `true`, the input component container will fill the width of the container it is in.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   *  If `true`, the small styling will be applied to the input component container.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  render() {\n    const {\n      small,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [validationStatus]: hasValidationStatus,\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark,\n        }}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark,\n          }}\n        >\n          {isSlotUsed(this.host, \"left-icon\") && (\n            <div\n              class={{\n                [\"icon-container\"]: true,\n              }}\n            >\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span\n                class={{\n                  [\"inline-success\"]: true,\n                }}\n                innerHTML={successIcon}\n              />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js

@@ -0,0 +1,117 @@
+import { InputComponentContainer } from "../../ic-input-component-container";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-component-container", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container>
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders with validation status", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success">content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container validation-status="success" class="success">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container> 
+    `);
+  });
+  it("renders with validation inline", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" validation-inline=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="success" validation-inline="true" validation-status="success">
+      <div class="focus-indicator">
+        content
+        <span class="inline-success">
+          svg
+        </span>
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("ignores validation inline if not success", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="error" validation-inline=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="error" validation-inline="true" validation-status="error">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders with small, multiline & fullwidth props set", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container small=true multi-line=true full-width=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="small fullwidth multiline" small="true" full-width="true" multi-line="true">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders disabled", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" disabled=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container validation-status="success" class="disabled" disabled="true">
+      <div class="focus-indicator">
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+  it("renders readonly", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" readonly=true>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-input-component-container class="readonly" readonly="true" validation-status="success">
+        <div class="focus-indicator">
+          content
+        </div>
+      </ic-input-component-container>
+    `);
+  });
+  it("renders with slotted content", async () => {
+    const page = await newSpecPage({
+      components: [InputComponentContainer],
+      html: `<ic-input-component-container validation-status="success" disabled=true><span slot="left-icon">slotted content</span>content</ic-input-component-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-component-container class="disabled" disabled="true" validation-status="success">
+      <div class="focus-indicator">
+        <div class="icon-container">
+          <span slot="left-icon">
+            slotted content
+          </span>
+        </div>
+        content
+      </div>
+    </ic-input-component-container>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-component-container.spec.js.map

package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-component-container.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-component-container/test/basic/ic-input-component-container.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { InputComponentContainer } from \"../../ic-input-component-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-component-container\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container>\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\">content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container validation-status=\"success\" class=\"success\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container> \n    `);\n  });\n\n  it(\"renders with validation inline\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"success\" validation-inline=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        content\n        <span class=\"inline-success\">\n          svg\n        </span>\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"ignores validation inline if not success\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"error\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"error\" validation-inline=\"true\" validation-status=\"error\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders with small, multiline & fullwidth props set\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container small=true multi-line=true full-width=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"small fullwidth multiline\" small=\"true\" full-width=\"true\" multi-line=\"true\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders disabled\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container validation-status=\"success\" class=\"disabled\" disabled=\"true\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders readonly\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" readonly=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-component-container class=\"readonly\" readonly=\"true\" validation-status=\"success\">\n        <div class=\"focus-indicator\">\n          content\n        </div>\n      </ic-input-component-container>\n    `);\n  });\n\n  it(\"renders with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true><span slot=\"left-icon\">slotted content</span>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"disabled\" disabled=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        <div class=\"icon-container\">\n          <span slot=\"left-icon\">\n            slotted content\n          </span>\n        </div>\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-input-container/ic-input-container.css

@@ -0,0 +1,4 @@
+ic-input-container .component-container {
+  display: flex;
+  flex-direction: column;
+}

package/dist/collection/components/ic-input-container/ic-input-container.js

@@ -0,0 +1,66 @@
+import { Host, h } from "@stencil/core";
+export class InputContainer {
+  constructor() {
+    this.disabled = false;
+    this.readonly = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        ["component-container"]: true,
+        ["disabled"]: this.disabled,
+        ["readonly"]: this.readonly,
+      } }, h("slot", null))));
+  }
+  static get is() { return "ic-input-container"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-input-container.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-input-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the disabled state will be set."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the readonly state will be set."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=ic-input-container.js.map

package/dist/collection/components/ic-input-container/ic-input-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-container/ic-input-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,cAAc;;oBAII,KAAK;oBAKL,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,CAAC,qBAAqB,CAAC,EAAE,IAAI;UAC7B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;UAC3B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;SAC5B;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-input-container\",\n  styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            [\"component-container\"]: true,\n            [\"disabled\"]: this.disabled,\n            [\"readonly\"]: this.readonly,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-container/test/basic/ic-input-container.spec.js

@@ -0,0 +1,38 @@
+import { InputContainer } from "../../ic-input-container";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-container", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputContainer],
+      html: `<ic-input-container></ic-input-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-container>
+      <div class="component-container"></div>
+    </ic-input-container>
+    `);
+  });
+  it("renders disabled", async () => {
+    const page = await newSpecPage({
+      components: [InputContainer],
+      html: `<ic-input-container disabled=true></ic-input-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-input-container disabled="true">
+        <div class="component-container disabled"></div>
+      </ic-input-container>
+    `);
+  });
+  it("renders readonly", async () => {
+    const page = await newSpecPage({
+      components: [InputContainer],
+      html: `<ic-input-container readonly=true></ic-input-container>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-input-container readonly="true">
+        <div class="component-container readonly"></div>
+      </ic-input-container>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-container.spec.js.map

package/dist/collection/components/ic-input-container/test/basic/ic-input-container.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-container.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-container/test/basic/ic-input-container.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,2CAA2C;KAClD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputContainer } from \"../../ic-input-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-container\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputContainer],\n      html: `<ic-input-container></ic-input-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-container>\n      <div class=\"component-container\"></div>\n    </ic-input-container>\n    `);\n  });\n\n  it(\"renders disabled\", async () => {\n    const page = await newSpecPage({\n      components: [InputContainer],\n      html: `<ic-input-container disabled=true></ic-input-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-container disabled=\"true\">\n        <div class=\"component-container disabled\"></div>\n      </ic-input-container>\n    `);\n  });\n\n  it(\"renders readonly\", async () => {\n    const page = await newSpecPage({\n      components: [InputContainer],\n      html: `<ic-input-container readonly=true></ic-input-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-container readonly=\"true\">\n        <div class=\"component-container readonly\"></div>\n      </ic-input-container>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-input-label/ic-input-label.css

@@ -0,0 +1,35 @@
+ic-input-label {
+  margin-bottom: var(--ic-space-xs);
+}
+
+ic-input-label.with-helper {
+  margin-bottom: var(--ic-space-xxxs);
+}
+
+ic-input-label.readonly {
+  color: var(--ic-color-tertiary-text);
+}
+
+ic-input-label .helpertext {
+  margin-top: var(--ic-space-xxxs);
+}
+
+ic-input-label .helpertext-normal {
+  color: var(--ic-color-secondary-text);
+}
+
+ic-input-label .helpertext-readonly {
+  color: var(--ic-color-tertiary-text);
+}
+
+ic-input-label .readonly-label {
+  color: var(--ic-color-secondary-text);
+}
+
+ic-input-label .error-label {
+  color: var(--ic-status-error);
+}
+
+ic-input-label .dark {
+  color: var(--ic-architectural-white);
+}