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

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

@@ -0,0 +1,194 @@
+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.helperText = "";
+    this.label = undefined;
+    this.readonly = false;
+    this.required = false;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
+  }
+  render() {
+    const { disabled, readonly, label, required, helperText, error, dark } = this;
+    const labelText = required ? label + " *" : label;
+    const labelContent = readonly ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText));
+    const id = getInputHelperTextID(this.for);
+    return (h(Host, { class: {
+        ["disabled"]: disabled,
+        ["readonly"]: readonly,
+        ["with-helper"]: helperText !== "",
+      } }, h("ic-typography", { variant: "label", class: {
+        ["readonly-label"]: readonly,
+        ["error-label"]: error && !(readonly || disabled),
+        ["dark"]: dark,
+      } }, labelContent), helperText !== "" && (h("ic-typography", { variant: "caption", class: {
+        ["helpertext"]: true,
+        ["helpertext-normal"]: !disabled && !readonly,
+        ["helpertext-readonly"]: readonly,
+      } }, h("span", { id: id }, helperText)))));
+  }
+  static get is() { return "ic-input-label"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./ic-input-label.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-input-label.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 label 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"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the input label will display with error styling."
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "for": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the form element the label is bound to."
+        },
+        "attribute": "for",
+        "reflect": false
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The helper text that will be displayed."
+        },
+        "attribute": "helper-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text content of the label."
+        },
+        "attribute": "label",
+        "reflect": 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"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the input label will require a value."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=ic-input-label.js.map

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

@@ -0,0 +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;;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

@@ -0,0 +1,34 @@
+ic-input-validation {
+  width: var(--input-width, 20rem);
+  margin-top: var(--ic-space-xs);
+  display: flex;
+}
+
+ic-input-validation.fullwidth {
+  width: 100%;
+}
+
+ic-input-validation span.status-icon {
+  padding-right: var(--ic-space-xxs);
+}
+
+ic-input-validation span.status-icon > svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+ic-input-validation span.icon-success > svg {
+  fill: var(--ic-status-success);
+}
+
+ic-input-validation span.icon-error > svg {
+  fill: var(--ic-status-error);
+}
+
+ic-input-validation span.icon-warning > svg {
+  fill: var(--ic-status-warning);
+}
+
+ic-input-validation .statustext {
+  flex-grow: 1;
+}

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

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+import { IcInformationStatus, } from "../../utils/types";
+import errorIcon from "../../assets/error-icon.svg";
+import successIcon from "../../assets/success-icon.svg";
+import warningIcon from "../../assets/warning-icon.svg";
+import { getInputValidationTextID, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+const icon = {
+  [IcInformationStatus.Warning]: warningIcon,
+  [IcInformationStatus.Error]: errorIcon,
+  [IcInformationStatus.Success]: successIcon,
+};
+/**
+ * @slot validation-message-adornment - Content will be placed to the right of the validation message.
+ */
+export class InputValidation {
+  constructor() {
+    this.ariaLiveMode = "polite";
+    this.for = undefined;
+    this.fullWidth = false;
+    this.message = undefined;
+    this.status = "";
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
+  }
+  render() {
+    const displayIcon = this.status !== "" ? icon[this.status] : "";
+    const id = getInputValidationTextID(this.for);
+    return (h(Host, { class: {
+        [this.status]: this.status !== "",
+        ["fullwidth"]: this.fullWidth,
+      } }, displayIcon !== "" && (h("span", { class: {
+        ["status-icon"]: true,
+        [`icon-${this.status}`]: true,
+      }, innerHTML: displayIcon })), h("ic-typography", { variant: "caption", class: "statustext" }, h("span", { "aria-live": this.ariaLiveMode, id: id }, this.message)), h("slot", { name: "validation-message-adornment" })));
+  }
+  static get is() { return "ic-input-validation"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-input-validation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-input-validation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "ariaLiveMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcAriaLiveModeVariants",
+          "resolved": "\"assertive\" | \"polite\"",
+          "references": {
+            "IcAriaLiveModeVariants": {
+              "location": "import",
+              "path": "./ic-input-validation.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ARIA live mode to apply to the message."
+        },
+        "attribute": "aria-live-mode",
+        "reflect": false,
+        "defaultValue": "\"polite\""
+      },
+      "for": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the form element the validation is bound to."
+        },
+        "attribute": "for",
+        "reflect": false
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the input validation will fill the width of the container."
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The validation message to display."
+        },
+        "attribute": "message",
+        "reflect": false
+      },
+      "status": {
+        "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 status of the validation - e.g. 'error' | 'warning' | 'success'."
+        },
+        "attribute": "status",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-input-validation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;wBAMqB,QAAQ;;qBAU1B,KAAK;;kBAUW,EAAE;;EAE/C,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-validation/ic-input-validation.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-input-validation.types.js.map

package/dist/collection/components/ic-input-validation/ic-input-validation.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-validation.types.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcAriaLiveModeVariants = \"polite\" | \"assertive\";\n"]}

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

@@ -0,0 +1,89 @@
+import { InputValidation } from "../../ic-input-validation";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-validation", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation for="test-id" message="validation message">
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with success status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" status="success"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation class="success" for="test-id" message="validation message" status="success">
+      <span class="icon-success status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with warning status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" status="warning"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation class="warning" for="test-id" message="validation message" status="warning">
+      <span class="icon-warning status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with error status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" status="error"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation class="error" for="test-id" message="validation message" status="error">
+      <span class="icon-error status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with full width", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message" full-width=true></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation for="test-id" class="fullwidth" full-width="true" message="validation message">
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-validation.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-input-validation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-validation/test/basic/ic-input-validation.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,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,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,uGAAuG;KAC9G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,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,eAAe,CAAC;MAC7B,IAAI,EAAE,wGAAwG;KAC/G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputValidation } from \"../../ic-input-validation\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-validation\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with success status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"success\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"success\" for=\"test-id\" message=\"validation message\" status=\"success\">\n      <span class=\"icon-success status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with warning status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"warning\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"warning\" for=\"test-id\" message=\"validation message\" status=\"warning\">\n      <span class=\"icon-warning status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with error status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"error\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"error\" for=\"test-id\" message=\"validation message\" status=\"error\">\n      <span class=\"icon-error status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"renders with full width\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" full-width=true></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" class=\"fullwidth\" full-width=\"true\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n});\n"]}