@ukic/web-components 2.1.0-beta.9 → 2.3.0

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"
       }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;;;oBAQO,KAAK;sBAIJ,EAAE;;oBAQH,KAAK;oBAIL,KAAK;iBAIP,KAAK;gBAIN,KAAK;;EAE9B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,GACpE,IAAI,CAAC;IACP,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC9B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CAAC;IAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,aAAa,CAAC,EAAE,UAAU,KAAK,EAAE;OACnC;MAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;UACL,CAAC,gBAAgB,CAAC,EAAE,QAAQ;UAC5B,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;UACjD,CAAC,MAAM,CAAC,EAAE,IAAI;SACf,IAEA,YAAY,CACC;MAEf,UAAU,KAAK,EAAE,IAAI,CACpB,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;UACL,CAAC,YAAY,CAAC,EAAE,IAAI;UACpB,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;UAC7C,CAAC,qBAAqB,CAAC,EAAE,QAAQ;SAClC;QAED,YAAM,EAAE,EAAE,EAAE,IAAG,UAAU,CAAQ,CACnB,CACjB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\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   * If `true`, the input label will display with error styling.\n   */\n  @Prop() error?: boolean = false;\n  /**\n   * If `true`, the dark variant of the input label will be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const { disabled, readonly, label, required, helperText, error, dark } =\n      this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark,\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;;gBAII,KAAK;oBAKF,KAAK;iBAKP,KAAK;;sBAUF,EAAE;;oBAUH,KAAK;oBAKL,KAAK;;EAEjC,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,GACpE,IAAI,CAAC;IACP,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC9B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CAAC;IAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,aAAa,CAAC,EAAE,UAAU,KAAK,EAAE;OACnC;MAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;UACL,CAAC,gBAAgB,CAAC,EAAE,QAAQ;UAC5B,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;UACjD,CAAC,MAAM,CAAC,EAAE,IAAI;SACf,IAEA,YAAY,CACC;MAEf,UAAU,KAAK,EAAE,IAAI,CACpB,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;UACL,CAAC,YAAY,CAAC,EAAE,IAAI;UACpB,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;UAC7C,CAAC,qBAAqB,CAAC,EAAE,QAAQ;SAClC;QAED,YAAM,EAAE,EAAE,EAAE,IAAG,UAAU,CAAQ,CACnB,CACjB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * If `true`, the dark variant of the input label 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 label will display with error styling.\n   */\n  @Prop() error?: 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 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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const { disabled, readonly, label, required, helperText, error, dark } =\n      this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark,\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,98 @@
+import { InputLabel } from "../../ic-input-label";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-label", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label"></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label for="test-input-id" label="Test label">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders required variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label for="test-input-id" label="Test label" required="true">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label *
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders disabled variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true disabled=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label class="disabled" disabled="true" for="test-input-id" label="Test label" required="true">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label *
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders readonly variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true readonly=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label class="readonly" for="test-input-id" label="Test label" readonly="true" required="true">
+      <ic-typography class="readonly-label" variant="label">
+        Test label *
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders error variant", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" error=true></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label error="true" for="test-input-id" label="Test label">
+      <ic-typography class="error-label" variant="label">
+        <label htmlfor="test-input-id">
+          Test label
+        </label>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+  it("renders with helpertext", async () => {
+    const page = await newSpecPage({
+      components: [InputLabel],
+      html: `<ic-input-label for="test-input-id" label="Test label" required=true helper-text="Some helper text"></ic-input-label>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-label class="with-helper" for="test-input-id" helper-text="Some helper text" label="Test label" required="true">
+      <ic-typography variant="label">
+        <label htmlfor="test-input-id">
+          Test label *
+        </label>
+      </ic-typography>
+      <ic-typography class="helpertext helpertext-normal" variant="caption">
+        <span id="test-input-id-helper-text">
+          Some helper text
+        </span>
+      </ic-typography>
+    </ic-input-label>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-label.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-label.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-label/test/basic/ic-input-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,0EAA0E;KACjF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,wFAAwF;KAC/F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,sGAAsG;KAC7G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,sGAAsG;KAC7G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;IACrC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,qFAAqF;KAC5F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,uHAAuH;KAC9H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputLabel } from \"../../ic-input-label\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-label\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders required variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders disabled variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true disabled=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"disabled\" disabled=\"true\" for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders readonly variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true readonly=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"readonly\" for=\"test-input-id\" label=\"Test label\" readonly=\"true\" required=\"true\">\n      <ic-typography class=\"readonly-label\" variant=\"label\">\n        Test label *\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders error variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" error=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label error=\"true\" for=\"test-input-id\" label=\"Test label\">\n      <ic-typography class=\"error-label\" variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"renders with helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"with-helper\" for=\"test-input-id\" helper-text=\"Some helper text\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n      <ic-typography class=\"helpertext helpertext-normal\" variant=\"caption\">\n        <span id=\"test-input-id-helper-text\">\n          Some helper text\n        </span>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n});\n"]}

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

@@ -8,14 +8,6 @@ ic-input-validation.fullwidth {
   width: 100%;
 }
 
-ic-input-validation.error {
-  color: var(--ic-status-error);
-}
-
-ic-input-validation.success {
-  color: var(--ic-status-success);
-}
-
 ic-input-validation span.status-icon {
   padding-right: var(--ic-space-xxs);
 }
@@ -34,7 +26,7 @@ ic-input-validation span.icon-error > svg {
 }
 
 ic-input-validation span.icon-warning > svg {
-  fill: var(--ic-status-warning-mid);
+  fill: var(--ic-status-warning);
 }
 
 ic-input-validation .statustext {