@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -7,14 +7,14 @@ import { isSlotUsed } from "../../utils/helpers";
  */
 export class InputComponentContainer {
   constructor() {
+    this.dark = false;
     this.disabled = false;
+    this.fullWidth = false;
+    this.multiLine = false;
     this.readonly = false;
-    this.validationStatus = "";
     this.small = false;
-    this.multiLine = false;
     this.validationInline = false;
-    this.dark = false;
-    this.fullWidth = false;
+    this.validationStatus = "";
   }
   render() {
     const { small, validationStatus, disabled, readonly, multiLine, fullWidth, dark, validationInline, } = this;
@@ -52,7 +52,7 @@ export class InputComponentContainer {
   }
   static get properties() {
     return {
-      "disabled": {
+      "dark": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -61,16 +61,16 @@ export class InputComponentContainer {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "If `true`, the dark variant of the input component container will be displayed."
         },
-        "attribute": "disabled",
+        "attribute": "dark",
         "reflect": false,
         "defaultValue": "false"
       },
-      "readonly": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -82,36 +82,31 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the readonly state will be set."
+          "text": "If `true`, the disabled state will be set."
         },
-        "attribute": "readonly",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
-      "validationStatus": {
-        "type": "string",
+      "fullWidth": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcInformationStatusOrEmpty",
-          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
-          "references": {
-            "IcInformationStatusOrEmpty": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation status of the input component container - e.g. 'error' | 'warning' | 'success'."
+          "text": "If `true`, the input component container will fill the width of the container it is in."
         },
-        "attribute": "validation-status",
+        "attribute": "full-width",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "small": {
+      "multiLine": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -123,13 +118,13 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the input component container."
+          "text": "If `true`, the input component container will allow for multiple lines."
         },
-        "attribute": "small",
+        "attribute": "multi-line",
         "reflect": false,
         "defaultValue": "false"
       },
-      "multiLine": {
+      "readonly": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -141,13 +136,13 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the input component container will allow for multiple lines."
+          "text": "If `true`, the readonly state will be set."
         },
-        "attribute": "multi-line",
+        "attribute": "readonly",
         "reflect": false,
         "defaultValue": "false"
       },
-      "validationInline": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -159,13 +154,13 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the validation will display inline."
+          "text": "If `true`, the small styling will be applied to the input component container."
         },
-        "attribute": "validation-inline",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },
-      "dark": {
+      "validationInline": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -174,32 +169,37 @@ export class InputComponentContainer {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the dark variant of the input component container will be displayed."
+          "text": "If `true`, the validation will display inline."
         },
-        "attribute": "dark",
+        "attribute": "validation-inline",
         "reflect": false,
         "defaultValue": "false"
       },
-      "fullWidth": {
-        "type": "boolean",
+      "validationStatus": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "references": {
+            "IcInformationStatusOrEmpty": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the input component container will fill the width of the container it is in."
+          "text": "The validation status of the input component container - e.g. 'error' | 'warning' | 'success'."
         },
-        "attribute": "full-width",
+        "attribute": "validation-status",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       }
     };
   }

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

@@ -1 +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;;oBAIN,KAAK;oBAIL,KAAK;4BAIsB,EAAE;iBAIhC,KAAK;qBAID,KAAK;4BAIE,KAAK;gBAKhB,KAAK;qBAKD,KAAK;;EAIlC,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  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the small styling will be applied to the input component container.\n   */\n  @Prop() small: boolean = false;\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\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 input component container will fill the width of the container it is in.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @Element() host: HTMLIcInputComponentContainerElement;\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"]}
+{"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/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

@@ -6,10 +6,6 @@ ic-input-label.with-helper {
   margin-bottom: var(--ic-space-xxxs);
 }
 
-ic-input-label.disabled {
-  color: var(--ic-color-tertiary-text);
-}
-
 ic-input-label.readonly {
   color: var(--ic-color-tertiary-text);
 }

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

@@ -2,14 +2,14 @@ import { Host, h } from "@stencil/core";
 import { getInputHelperTextID, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 export class InputLabel {
   constructor() {
+    this.dark = false;
+    this.disabled = false;
+    this.error = false;
     this.for = undefined;
-    this.required = false;
     this.helperText = "";
     this.label = undefined;
-    this.disabled = false;
     this.readonly = false;
-    this.error = false;
-    this.dark = false;
+    this.required = false;
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
@@ -46,24 +46,25 @@ export class InputLabel {
   }
   static get properties() {
     return {
-      "for": {
-        "type": "string",
+      "dark": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The ID of the form element the label is bound to."
+          "text": "If `true`, the dark variant of the input label will be displayed."
         },
-        "attribute": "for",
-        "reflect": false
+        "attribute": "dark",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -75,31 +76,31 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the input label will require a value."
+          "text": "If `true`, the disabled state will be set."
         },
-        "attribute": "required",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
-      "helperText": {
-        "type": "string",
+      "error": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The helper text that will be displayed."
+          "text": "If `true`, the input label will display with error styling."
         },
-        "attribute": "helper-text",
+        "attribute": "error",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "label": {
+      "for": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -107,52 +108,51 @@ export class InputLabel {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The text content of the label."
+          "text": "The ID of the form element the label is bound to."
         },
-        "attribute": "label",
+        "attribute": "for",
         "reflect": false
       },
-      "disabled": {
-        "type": "boolean",
+      "helperText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "The helper text that will be displayed."
         },
-        "attribute": "disabled",
+        "attribute": "helper-text",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       },
-      "readonly": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the readonly state will be set."
+          "text": "The text content of the label."
         },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "label",
+        "reflect": false
       },
-      "error": {
+      "readonly": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -161,16 +161,16 @@ export class InputLabel {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the input label will display with error styling."
+          "text": "If `true`, the readonly state will be set."
         },
-        "attribute": "error",
+        "attribute": "readonly",
         "reflect": false,
         "defaultValue": "false"
       },
-      "dark": {
+      "required": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -179,12 +179,12 @@ export class InputLabel {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the dark variant of the input label will be displayed."
+          "text": "If `true`, the input label will require a value."
         },
-        "attribute": "dark",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       }