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

package/dist/collection/components/ic-text-field/test/basic/ic-text-field.textarea.spec.js

@@ -0,0 +1,310 @@
+import { TextField } from "../../ic-text-field";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-text-field", () => {
+  it("renders a textarea", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-0" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-0" inputmode="text" name="ic-text-field-input-0" placeholder="" rows="6" value=""></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-0" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with placeholder", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" placeholder="placeholder"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" placeholder="placeholder" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-1" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-1" inputmode="text" name="ic-text-field-input-1" placeholder="placeholder" rows="6" value=""></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-1" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with value", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-2" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-2" inputmode="text" name="ic-text-field-input-2" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-2" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with helperText, required and small", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" helper-text="helper text value" required=true small=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field small="" helper-text="helper text value" label="Test label" required="true" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-3" helpertext="helper text value" label="Test label" required=""></ic-input-label>
+            <ic-input-component-container small="" multiline="" validationstatus=""><textarea aria-describedby="ic-text-field-input-3-helper-text" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-3" inputmode="text" name="ic-text-field-input-3" placeholder="" required="" rows="6" value=""></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-3" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with autoprops", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" autofocus=true autocapitalize="on" autocomplete="on" autocorrect="on"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field autocapitalize="on" autocomplete="on" autocorrect="on" autofocus="true" label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-4" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="on" class="no-resize" id="ic-text-field-input-4" inputmode="text" name="ic-text-field-input-4" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-4" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with hidden label", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" hide-label=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field hide-label="true" label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-5" inputmode="text" name="ic-text-field-input-5" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-5" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with icon", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label">
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-6" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="">
+              <span slot="left-icon">
+                <slot name="icon"></slot>
+              </span><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-6" inputmode="text" name="ic-text-field-input-6" placeholder="" rows="6" value=""></textarea>
+            </ic-input-component-container>
+        </ic-input-container>
+        </mock:shadow-root>
+        <svg fill="#000000" height="24px" slot="icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path>
+        </svg>
+        <input class="ic-input" name="ic-text-field-input-6" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea disabled", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" disabled=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field disabled="true" label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container disabled="">
+            <ic-input-label disabled="" for="ic-text-field-input-7" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container disabled="" multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" disabled="" id="ic-text-field-input-7" inputmode="text" name="ic-text-field-input-7" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" disabled="" name="ic-text-field-input-7" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea readonly", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" readonly=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" readonly="" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container disabled="" readonly="">
+            <ic-input-label for="ic-text-field-input-8" helpertext="" label="Test label" readonly=""></ic-input-label>
+            <ic-input-component-container disabled="" multiline="" readonly="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-left-pad no-resize readonly" disabled="" id="ic-text-field-input-8" inputmode="text" name="ic-text-field-input-8" placeholder="" readonly="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" disabled="" name="ic-text-field-input-8" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with max length", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" value="a long test value to exceed limit" max-length=25></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-text-field label="Test label" max-length="25" rows="6" value="a long test value to exceed limit">
+      <mock:shadow-root>
+        <ic-input-container>
+          <ic-input-label for="ic-text-field-input-9" helpertext="" label="Test label"></ic-input-label>
+          <ic-input-component-container multiline="" validationstatus="error"><textarea aria-describedby="ic-text-field-input-9-charcount-desc ic-text-field-input-9-validation-text" aria-invalid="true" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-9" inputmode="text" name="ic-text-field-input-9" placeholder="" rows="6" value="a long test value to exceed limit"></textarea>
+        </ic-input-component-container>
+    <ic-input-validation arialivemode="assertive" for="ic-text-field-input-9" message="Maximum length exceeded" status="error">
+            <div slot="validation-message-adornment">
+              <ic-typography class="error maxlengthtext" variant="caption">
+                <span aria-live="polite" id="ic-text-field-input-9-charcount" class="charcount">
+                  33/25
+                </span>
+                <span hidden="" id="ic-text-field-input-9-charcount-desc">
+                  Field can contain a maximum of 25 characters.
+                </span>
+              </ic-typography>
+            </div>
+          </ic-input-validation>
+        </ic-input-container>
+      </mock:shadow-root>
+      <input class="ic-input" name="ic-text-field-input-9" type="hidden" value="a long test value to exceed limit">
+    </ic-text-field>
+    `);
+  });
+  it("renders textarea with name & full width", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=2 label="Test label" value="test value" name="mycontolname" full-width=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field class="fullwidth" full-width="true" label="Test label" name="mycontolname" rows="2" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-10" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container fullwidth="" multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-10" inputmode="text" name="mycontolname" placeholder="" rows="2" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="mycontolname" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with success validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" validation-status="success" validation-text="Good choice!" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" validation-status="success" validation-text="Good choice!" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-11" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="success"><textarea aria-describedby="ic-text-field-input-11-validation-text" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-11" inputmode="text" name="ic-text-field-input-11" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+        <ic-input-validation arialivemode="polite" for="ic-text-field-input-11" message="Good choice!" status="success"></ic-input-validation>
+          </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-11" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with warning validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" validation-status="warning" validation-text="warning text" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" validation-status="warning" validation-text="warning text" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-12" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="warning"><textarea aria-describedby="ic-text-field-input-12-validation-text" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-12" inputmode="text" name="ic-text-field-input-12" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+        <ic-input-validation arialivemode="polite" for="ic-text-field-input-12" message="warning text" status="warning"></ic-input-validation>
+          </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-12" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with error validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" validation-status="error" validation-text="error text" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" validation-status="error" validation-text="error text" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-13" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="error"><textarea aria-describedby="ic-text-field-input-13-validation-text" aria-invalid="true" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-13" inputmode="text" name="ic-text-field-input-13" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+        <ic-input-validation arialivemode="assertive" for="ic-text-field-input-13" message="error text" status="error"></ic-input-validation>
+          </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-13" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with resize", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" resize=true value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" resize="true" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-14" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" id="ic-text-field-input-14" inputmode="text" name="ic-text-field-input-14" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-14" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+});
+//# sourceMappingURL=ic-text-field.textarea.spec.js.map

package/dist/collection/components/ic-text-field/test/basic/ic-text-field.textarea.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-text-field.textarea.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-text-field/test/basic/ic-text-field.textarea.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextField } from \"../../ic-text-field\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-text-field\", () => {\n  it(\"renders a textarea\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-0\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-0\" inputmode=\"text\" name=\"ic-text-field-input-0\" placeholder=\"\" rows=\"6\" value=\"\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-0\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with placeholder\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" placeholder=\"placeholder\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" placeholder=\"placeholder\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-1\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-1\" inputmode=\"text\" name=\"ic-text-field-input-1\" placeholder=\"placeholder\" rows=\"6\" value=\"\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-1\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with value\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-2\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-2\" inputmode=\"text\" name=\"ic-text-field-input-2\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-2\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with helperText, required and small\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" helper-text=\"helper text value\" required=true small=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field small=\"\" helper-text=\"helper text value\" label=\"Test label\" required=\"true\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-3\" helpertext=\"helper text value\" label=\"Test label\" required=\"\"></ic-input-label>\n            <ic-input-component-container small=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"ic-text-field-input-3-helper-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-3\" inputmode=\"text\" name=\"ic-text-field-input-3\" placeholder=\"\" required=\"\" rows=\"6\" value=\"\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-3\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with autoprops\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" autofocus=true autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\" autofocus=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-4\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"on\" class=\"no-resize\" id=\"ic-text-field-input-4\" inputmode=\"text\" name=\"ic-text-field-input-4\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-4\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with hidden label\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" hide-label=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field hide-label=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-5\" inputmode=\"text\" name=\"ic-text-field-input-5\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-5\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with icon\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"\n          />\n        </svg>\n      </ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-6\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\">\n              <span slot=\"left-icon\">\n                <slot name=\"icon\"></slot>\n              </span><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-6\" inputmode=\"text\" name=\"ic-text-field-input-6\" placeholder=\"\" rows=\"6\" value=\"\"></textarea>\n            </ic-input-component-container>\n        </ic-input-container>\n        </mock:shadow-root>\n        <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n          <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"></path>\n        </svg>\n        <input class=\"ic-input\" name=\"ic-text-field-input-6\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea disabled\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" disabled=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field disabled=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container disabled=\"\">\n            <ic-input-label disabled=\"\" for=\"ic-text-field-input-7\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container disabled=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" disabled=\"\" id=\"ic-text-field-input-7\" inputmode=\"text\" name=\"ic-text-field-input-7\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" disabled=\"\" name=\"ic-text-field-input-7\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea readonly\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" readonly=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" readonly=\"\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container disabled=\"\" readonly=\"\">\n            <ic-input-label for=\"ic-text-field-input-8\" helpertext=\"\" label=\"Test label\" readonly=\"\"></ic-input-label>\n            <ic-input-component-container disabled=\"\" multiline=\"\" readonly=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-left-pad no-resize readonly\" disabled=\"\" id=\"ic-text-field-input-8\" inputmode=\"text\" name=\"ic-text-field-input-8\" placeholder=\"\" readonly=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" disabled=\"\" name=\"ic-text-field-input-8\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with max length\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" value=\"a long test value to exceed limit\" max-length=25></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-text-field label=\"Test label\" max-length=\"25\" rows=\"6\" value=\"a long test value to exceed limit\">\n      <mock:shadow-root>\n        <ic-input-container>\n          <ic-input-label for=\"ic-text-field-input-9\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n          <ic-input-component-container multiline=\"\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-9-charcount-desc ic-text-field-input-9-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-9\" inputmode=\"text\" name=\"ic-text-field-input-9\" placeholder=\"\" rows=\"6\" value=\"a long test value to exceed limit\"></textarea>\n        </ic-input-component-container>\n    <ic-input-validation arialivemode=\"assertive\" for=\"ic-text-field-input-9\" message=\"Maximum length exceeded\" status=\"error\">\n            <div slot=\"validation-message-adornment\">\n              <ic-typography class=\"error maxlengthtext\" variant=\"caption\">\n                <span aria-live=\"polite\" id=\"ic-text-field-input-9-charcount\" class=\"charcount\">\n                  33/25\n                </span>\n                <span hidden=\"\" id=\"ic-text-field-input-9-charcount-desc\">\n                  Field can contain a maximum of 25 characters.\n                </span>\n              </ic-typography>\n            </div>\n          </ic-input-validation>\n        </ic-input-container>\n      </mock:shadow-root>\n      <input class=\"ic-input\" name=\"ic-text-field-input-9\" type=\"hidden\" value=\"a long test value to exceed limit\">\n    </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with name & full width\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=2 label=\"Test label\" value=\"test value\" name=\"mycontolname\" full-width=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field class=\"fullwidth\" full-width=\"true\" label=\"Test label\" name=\"mycontolname\" rows=\"2\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-10\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container fullwidth=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-10\" inputmode=\"text\" name=\"mycontolname\" placeholder=\"\" rows=\"2\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"mycontolname\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with success validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-11\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"success\"><textarea aria-describedby=\"ic-text-field-input-11-validation-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-11\" inputmode=\"text\" name=\"ic-text-field-input-11\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n        <ic-input-validation arialivemode=\"polite\" for=\"ic-text-field-input-11\" message=\"Good choice!\" status=\"success\"></ic-input-validation>\n          </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-11\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with warning validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-12\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"warning\"><textarea aria-describedby=\"ic-text-field-input-12-validation-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-12\" inputmode=\"text\" name=\"ic-text-field-input-12\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n        <ic-input-validation arialivemode=\"polite\" for=\"ic-text-field-input-12\" message=\"warning text\" status=\"warning\"></ic-input-validation>\n          </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-12\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with error validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-13\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-13-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-13\" inputmode=\"text\" name=\"ic-text-field-input-13\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n        <ic-input-validation arialivemode=\"assertive\" for=\"ic-text-field-input-13\" message=\"error text\" status=\"error\"></ic-input-validation>\n          </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-13\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with resize\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" resize=true value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" resize=\"true\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-14\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" id=\"ic-text-field-input-14\" inputmode=\"text\" name=\"ic-text-field-input-14\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-14\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-theme/ic-theme.js

@@ -0,0 +1,106 @@
+import { Host, h, } from "@stencil/core";
+import { getThemeForegroundColor, hexToRgba, rgbaStrToObj, } from "../../utils/helpers";
+import { getThemeColorBrightness } from "../../utils/helpers";
+import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../utils/constants";
+export class Theme {
+  constructor() {
+    this.checkThemeColorContrast = () => {
+      if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
+        getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
+        console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
+      }
+    };
+    this.setThemeColor = () => {
+      if (this.color !== null) {
+        let colorRGBA = null;
+        const firstChar = this.color.slice(0, 1);
+        if (firstChar === "#") {
+          colorRGBA = hexToRgba(this.color);
+        }
+        else if (firstChar.toLowerCase() === "r") {
+          colorRGBA = rgbaStrToObj(this.color);
+        }
+        this.setThemeRGBA(colorRGBA);
+      }
+    };
+    this.setThemeRGBA = (colorRGBA) => {
+      if (colorRGBA !== null) {
+        const root = document.documentElement;
+        root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
+        root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
+        root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
+        root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
+        this.checkThemeColorContrast();
+        const foregroundColor = getThemeForegroundColor();
+        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
+      }
+    };
+    this.color = null;
+  }
+  watchColorPropHandler() {
+    this.setThemeColor();
+  }
+  componentWillLoad() {
+    this.setThemeColor();
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "ic-theme"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "themeChange",
+        "name": "themeChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when the theme is changed."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IcTheme",
+          "resolved": "{ mode: IcThemeForeground; color: IcColorRGB; }",
+          "references": {
+            "IcTheme": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "watchColorPropHandler"
+      }];
+  }
+}
+//# sourceMappingURL=ic-theme.js.map

package/dist/collection/components/ic-theme/ic-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-theme.js","sourceRoot":"","sources":["../../../src/components/ic-theme/ic-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,GACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EACL,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,OAAO,KAAK;;IAoBR,4BAAuB,GAAG,GAAS,EAAE;MAC3C,IACE,uBAAuB,EAAE,GAAG,0BAA0B;QACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;IACH,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;IACH,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB,EAAE,EAAE;MAChD,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACpE;IACH,CAAC,CAAC;iBArDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;EACvB,CAAC;EAOD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;EACvB,CAAC;EAyCD,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js

@@ -0,0 +1,72 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-theme", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-theme></ic-theme>`);
+    const element = await page.find("ic-theme");
+    expect(element).toHaveClass("hydrated");
+  });
+  it("should emit themeChange when setThemeRGB method called", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-theme></ic-theme>`);
+    const spy = await page.spyOnEvent("themeChange");
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(255, 201, 60)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "dark",
+      color: {
+        a: 1,
+        b: 60,
+        g: 201,
+        r: 255,
+      },
+    });
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(35, 81, 142)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "light",
+      color: {
+        a: 1,
+        b: 142,
+        g: 81,
+        r: 35,
+      },
+    });
+  });
+  it("should emit correct textColor when rgb values invalid", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<ic-theme></ic-theme>");
+    const spy = await page.spyOnEvent("themeChange");
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(1000, 1000, 1000)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "dark",
+      color: {
+        a: 1,
+        b: 1000,
+        g: 1000,
+        r: 1000,
+      },
+    });
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(-1, -1, -1)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "light",
+      color: {
+        a: 1,
+        b: -1,
+        g: -1,
+        r: -1,
+      },
+    });
+  });
+});
+//# sourceMappingURL=ic-theme.e2e.js.map

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit themeChange when setThemeRGB method called\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}