npm - @ukic/web-components - Versions diffs - 2.26.0 → 2.28.0 - Mend

@ukic/web-components 2.26.0 → 2.28.0

Files changed (113) hide show

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

@@ -213,6 +213,36 @@ describe("ic-text-field", () => {
     </ic-text-field>
     `);
     });
+    it("should render textarea with max length message", 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 max-length-message="You have exceeded the maximum length"></ic-text-field>`,
+        });
+        expect(page.root).toEqualHtml(`
+    <ic-text-field label="Test label" max-length="25" max-length-message="You have exceeded the maximum length" rows="6" value="a long test value to exceed limit">
+      <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 multiline="" size="default" validationstatus="error"><textarea aria-describedby="ic-text-field-input-10-charcount-desc ic-text-field-input-10-validation-text" aria-invalid="true" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-10" inputmode="text" name="ic-text-field-input-10" 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-10" message="You have exceeded the maximum length" status="error">
+            <div slot="validation-message-adornment">
+              <ic-typography class="error maxlengthtext" variant="caption">
+                <span aria-live="polite" id="ic-text-field-input-10-charcount" class="charcount">
+                  33/25
+                </span>
+                <span hidden="" id="ic-text-field-input-10-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-10" type="hidden" value="a long test value to exceed limit">
+    </ic-text-field>
+    `);
+    });
     it("should render textarea with name & full width", async () => {
         const page = await newSpecPage({
             components: [TextField],
@@ -222,8 +252,8 @@ describe("ic-text-field", () => {
       <ic-text-field class="fullwidth" full-width="true" label="Test label" name="mycontrolname" 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="" size="default" 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="mycontrolname" placeholder="" rows="2" value="test value"></textarea>
+            <ic-input-label for="ic-text-field-input-11" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container fullwidth="" size="default" multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-11" inputmode="text" name="mycontrolname" placeholder="" rows="2" value="test value"></textarea>
           </ic-input-component-container>
       </ic-input-container>
         </mock:shadow-root>
@@ -240,13 +270,13 @@ describe("ic-text-field", () => {
       <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="" size="default" 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-label for="ic-text-field-input-12" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" size="default" validationstatus="success"><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-11" message="Good choice!" status="success"></ic-input-validation>
+        <ic-input-validation arialivemode="polite" for="ic-text-field-input-12" 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">
+        <input class="ic-input" name="ic-text-field-input-12" type="hidden" value="test value">
       </ic-text-field>
     `);
     });
@@ -259,13 +289,13 @@ describe("ic-text-field", () => {
       <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="" size="default" 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-label for="ic-text-field-input-13" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" size="default" validationstatus="warning"><textarea aria-describedby="ic-text-field-input-13-validation-text" aria-invalid="false" 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="polite" for="ic-text-field-input-12" message="warning text" status="warning"></ic-input-validation>
+        <ic-input-validation arialivemode="polite" for="ic-text-field-input-13" 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">
+        <input class="ic-input" name="ic-text-field-input-13" type="hidden" value="test value">
       </ic-text-field>
     `);
     });
@@ -278,13 +308,13 @@ describe("ic-text-field", () => {
       <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="" size="default" 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-label for="ic-text-field-input-14" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" size="default" validationstatus="error"><textarea aria-describedby="ic-text-field-input-14-validation-text" aria-invalid="true" aria-label="Test label" autocapitalize="off" class="no-resize" 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-validation arialivemode="assertive" for="ic-text-field-input-13" message="error text" status="error"></ic-input-validation>
+        <ic-input-validation arialivemode="assertive" for="ic-text-field-input-14" 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">
+        <input class="ic-input" name="ic-text-field-input-14" type="hidden" value="test value">
       </ic-text-field>
     `);
     });
@@ -297,12 +327,12 @@ describe("ic-text-field", () => {
       <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="" size="default" 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-label for="ic-text-field-input-15" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" size="default" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" id="ic-text-field-input-15" inputmode="text" name="ic-text-field-input-15" 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">
+        <input class="ic-input" name="ic-text-field-input-15" type="hidden" value="test value">
       </ic-text-field>
     `);
     });

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

	@@ -1 +1 @@
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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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\" size=\"small\" helper-text=\"helper text value\" required=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field helper-text=\"helper text value\" label=\"Test label\" required=\"true\" rows=\"6\" value=\"\" size=\"small\">\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 size=\"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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"mycontrolname\" 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=\"mycontrolname\" 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=\"\" size=\"default\" 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=\"mycontrolname\" 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=\"mycontrolname\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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"]}
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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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\" size=\"small\" helper-text=\"helper text value\" required=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field helper-text=\"helper text value\" label=\"Test label\" required=\"true\" rows=\"6\" value=\"\" size=\"small\">\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 size=\"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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render 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=\"\" size=\"default\" 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(\"should render textarea with max length message\", 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 max-length-message=\"You have exceeded the maximum length\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" max-length=\"25\" max-length-message=\"You have exceeded the maximum length\" 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-10\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" size=\"default\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-10-charcount-desc ic-text-field-input-10-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-10\" inputmode=\"text\" name=\"ic-text-field-input-10\" 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-10\" message=\"You have exceeded the maximum length\" 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-10-charcount\" class=\"charcount\">\n 33/25\n </span>\n <span hidden=\"\" id=\"ic-text-field-input-10-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-10\" type=\"hidden\" value=\"a long test value to exceed limit\">\n </ic-text-field>\n `);\n });\n\n it(\"should render 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=\"mycontrolname\" 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=\"mycontrolname\" rows=\"2\" 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 fullwidth=\"\" size=\"default\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-11\" inputmode=\"text\" name=\"mycontrolname\" 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=\"mycontrolname\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"should render 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-12\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" size=\"default\" validationstatus=\"success\"><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=\"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-12\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"should render 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-13\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" size=\"default\" validationstatus=\"warning\"><textarea aria-describedby=\"ic-text-field-input-13-validation-text\" aria-invalid=\"false\" 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=\"polite\" for=\"ic-text-field-input-13\" 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-13\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"should render 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-14\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" size=\"default\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-14-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" 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-validation arialivemode=\"assertive\" for=\"ic-text-field-input-14\" 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-14\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"should render 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-15\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" size=\"default\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" id=\"ic-text-field-input-15\" inputmode=\"text\" name=\"ic-text-field-input-15\" 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-15\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n});\n"]}

package/dist/collection/components/ic-toast/ic-toast.css CHANGED Viewed

@@ -445,6 +445,16 @@ video {
  * @prop --ic-z-index-toast: z-index of toast
  */
+@media (prefers-reduced-motion: no-preference) {
+  :host {
+    animation: fadein var(--ic-transition-duration-slow) ease-in-out;
+  }
+  :host(.hidden) {
+    animation: fadeout var(--ic-transition-duration-slow) ease-in-out;
+  }
+}
 :host {
   --bottom-position: var(--ic-space-xl);
@@ -452,13 +462,11 @@ video {
   bottom: var(--bottom-position);
   left: 50%;
   transform: translate(-50%);
-  animation: fadein var(--ic-transition-duration-slow) ease-in-out;
   z-index: var(--ic-z-index-toast);
 }
 :host(.hidden) {
   display: none;
-  animation: fadeout var(--ic-transition-duration-slow) ease-in-out;
 }
 .container {

package/dist/components/ic-alert2.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { c as closeIcon } from './close-icon.js';
-import { f as checkSlotInChildMutations, V as VARIANT_ICONS, i as isSlotUsed } from './helpers.js';
+import { f as checkSlotInChildMutations, i as isSlotUsed, V as VARIANT_ICONS } from './helpers.js';
 import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icAlertCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.container{min-height:3.5rem;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-status-unknown-light)}.container-info{background-color:var(--ic-status-info-light)}.container-warning{background-color:var(--ic-status-warning-light)}.container-error{background-color:var(--ic-status-error-light)}.container-success{background-color:var(--ic-status-success-light)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.icon-neutral>svg{fill:var(--ic-status-unknown)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-status-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-status-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-status-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}";
+const icAlertCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.container{min-height:3.5rem;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-status-unknown-light)}.container-info{background-color:var(--ic-status-info-light)}.container-warning{background-color:var(--ic-status-warning-light)}.container-error{background-color:var(--ic-status-error-light)}.container-success{background-color:var(--ic-status-success-light)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-status-unknown)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-status-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-status-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-status-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}";
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     constructor() {
@@ -36,6 +36,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.message = undefined;
         this.titleAbove = false;
         this.variant = "neutral";
+        this.showDefaultIcon = true;
     }
     disconnectedCallback() {
         var _a;
@@ -58,7 +59,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             this.alertTitleWrap = true;
     }
     render() {
-        const { variant, heading, message, titleAbove, dismissible, announced, visible, } = this;
+        const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, } = this;
         return (visible && (h(Host, { role: announced ? "alert" : null, class: {
                 [IcThemeForegroundEnum.Dark]: true,
             } }, h("div", { class: {
@@ -67,11 +68,15 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             } }, h("div", { class: "alert-icon-container" }, h("div", { class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), h("span", { class: {
+            } }), variant === "neutral" ? (isSlotUsed(this.el, "neutral-icon") ? (h("div", { class: "alert-icon svg-container icon-neutral" }, h("slot", { name: "neutral-icon" }))) : showDefaultIcon ? (h("span", { class: {
                 ["alert-icon"]: true,
                 ["svg-container"]: true,
                 [`icon-${variant}`]: true,
-            }, innerHTML: VARIANT_ICONS[variant].icon })), h("div", { class: "alert-content" }, h("div", { class: {
+            }, innerHTML: VARIANT_ICONS[variant].icon })) : (h("div", { class: "icon-placeholder" }))) : (h("span", { class: {
+                ["alert-icon"]: true,
+                ["svg-container"]: true,
+                [`icon-${variant}`]: true,
+            }, innerHTML: VARIANT_ICONS[variant].icon }))), h("div", { class: "alert-content" }, h("div", { class: {
                 ["alert-message"]: true,
                 ["alert-message-title-above"]: titleAbove || this.alertTitleWrap,
             } }, heading && (h("ic-typography", { class: {
@@ -91,6 +96,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         "message": [1],
         "titleAbove": [4, "title-above"],
         "variant": [1],
+        "showDefaultIcon": [4, "show-default-icon"],
         "alertTitleWrap": [32],
         "visible": [32]
     }, [[2, "icDismiss", "handleClick"]]]);

package/dist/components/ic-alert2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-alert2.js","mappings":"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","names":[],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-status-unknown-light);\n}\n\n.container-info {\n background-color: var(--ic-status-info-light);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-light);\n}\n\n.container-error {\n background-color: var(--ic-status-error-light);\n}\n\n.container-success {\n background-color: var(--ic-status-success-light);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n.icon-neutral > svg {\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-alert2.js","mappings":"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","names":[],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-status-unknown-light);\n}\n\n.container-info {\n background-color: var(--ic-status-info-light);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-light);\n}\n\n.container-error {\n background-color: var(--ic-status-error-light);\n}\n\n.container-success {\n background-color: var(--ic-status-success-light);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n If `true`, the default icon for the neutral variant will be appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}

package/dist/components/ic-badge.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { j as convertToRGBA, k as hexToRgba, l as getCssProperty, m as rgbaStrToObj, n as getThemeForegroundColor, e as isPropDefined, o as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
+const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
 const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
     constructor() {
@@ -120,7 +120,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
                 [`${type}`]: true,
                 [`foreground-${foregroundColour}`]: foregroundColour !== null,
                 [`${visible ? "show" : "hide"}`]: true,
-            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && h("slot", { name: "badge-icon" }), type === "text" && textLabel && (h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, getTextLabel()))));
+            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && h("slot", { name: "badge-icon" }), type === "text" && textLabel && (h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, getTextLabel())), type === "dot" && h("span", { class: "sr-only" }, "badge")));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-badge.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted() {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcColorRGBA,\n IcSizes,\n IcThemeForeground,\n IcColor,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getCssProperty,\n getThemeForegroundColor,\n hexToRgba,\n isPropDefined,\n onComponentRequiredPropUndefined,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private customColorRGBA: IcColorRGBA;\n private foregroundColour: IcThemeForeground;\n private parentAriaLabel: string;\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * 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() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and textLabel is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop() position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() textLabel?: string;\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n this.getBadgeForeground();\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop({ mutable: true }) visible: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n this.getBadgeForeground();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.textLabel, propName: \"text-label\" }],\n \"Badge\"\n );\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async showBadge(): Promise<void> {\n this.visible = true;\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async hideBadge(): Promise<void> {\n this.visible = false;\n }\n\n private setBadgeColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n\n if (colorRGBA) {\n this.customColorRGBA = colorRGBA;\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n }\n };\n\n private getBadgeRGB = () => {\n switch (this.variant) {\n case \"custom\":\n return this.customColorRGBA;\n case \"error\":\n case \"success\":\n case \"warning\":\n case \"info\": {\n return rgbaStrToObj(getCssProperty(`--ic-status-${this.variant}`));\n }\n case \"neutral\":\n case \"light\":\n return hexToRgba(\n getCssProperty(\n `--ic-architectural-${this.variant === \"neutral\" ? 500 : 40}`\n )\n );\n }\n };\n\n private getBadgeForeground = () => {\n const { r, g, b } = this.getBadgeRGB();\n this.foregroundColour = getThemeForegroundColor(\n (r 299 + g * 587 + b * 114) / 1000\n );\n };\n\n private getTextLabel = () =>\n this.maxNumber && Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.textLabel \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : undefined;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getTextLabel,\n position,\n size,\n textLabel,\n type,\n variant,\n visible,\n } = this;\n\n return (\n <Host\n class={{\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [`${visible ? \"show\" : \"hide\"}`]: true,\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && textLabel && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getTextLabel()}\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-badge.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted() {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted() {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcColorRGBA,\n IcSizes,\n IcThemeForeground,\n IcColor,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getCssProperty,\n getThemeForegroundColor,\n hexToRgba,\n isPropDefined,\n onComponentRequiredPropUndefined,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private customColorRGBA: IcColorRGBA;\n private foregroundColour: IcThemeForeground;\n private parentAriaLabel: string;\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * 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() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and textLabel is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop() position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() textLabel?: string;\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n this.getBadgeForeground();\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop({ mutable: true }) visible: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n this.getBadgeForeground();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.textLabel, propName: \"text-label\" }],\n \"Badge\"\n );\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async showBadge(): Promise<void> {\n this.visible = true;\n }\n\n /\n @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n /\n @Method()\n async hideBadge(): Promise<void> {\n this.visible = false;\n }\n\n private setBadgeColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n\n if (colorRGBA) {\n this.customColorRGBA = colorRGBA;\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n }\n };\n\n private getBadgeRGB = () => {\n switch (this.variant) {\n case \"custom\":\n return this.customColorRGBA;\n case \"error\":\n case \"success\":\n case \"warning\":\n case \"info\": {\n return rgbaStrToObj(getCssProperty(`--ic-status-${this.variant}`));\n }\n case \"neutral\":\n case \"light\":\n return hexToRgba(\n getCssProperty(\n `--ic-architectural-${this.variant === \"neutral\" ? 500 : 40}`\n )\n );\n }\n };\n\n private getBadgeForeground = () => {\n const { r, g, b } = this.getBadgeRGB();\n this.foregroundColour = getThemeForegroundColor(\n (r 299 + g * 587 + b * 114) / 1000\n );\n };\n\n private getTextLabel = () =>\n this.maxNumber && Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.textLabel \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : undefined;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getTextLabel,\n position,\n size,\n textLabel,\n type,\n variant,\n visible,\n } = this;\n\n return (\n <Host\n class={{\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [`${visible ? \"show\" : \"hide\"}`]: true,\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && textLabel && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getTextLabel()}\n </ic-typography>\n )}\n {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-button2.js CHANGED Viewed

@@ -86,7 +86,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         };
         this.setHasTooltip = () => {
             this.hasTooltip =
-                !this.disableTooltip && (!!this.title || this.variant === "icon");
+                !this.disableTooltip && (!!this.title || this.isIconVariant());
+        };
+        this.isIconVariant = () => {
+            return this.variant.startsWith("icon");
         };
         this.ariaLabel = null;
         this.describedByContent = null;
@@ -305,7 +308,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 ["white-background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.appearance !== "light",
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.isIconVariant() && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
             (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedby, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get delegatesFocus() { return true; }