npm - @ukic/web-components - Versions diffs - 2.5.0 → 2.7.0 - Mend

@ukic/web-components 2.5.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (715) hide show

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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,6DAA6D;KACpE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,gFAAgF;KACvF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,sHAAsH;KAC7H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,sJAAsJ;KAC7J,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,gGAAgG;KACvG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE;;;;;;;;;;;;;;uBAcW;KAClB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,8FAA8F;KACrG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,8FAA8F;KACrG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,mHAAmH;KAC1H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,kHAAkH;KACzH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,yIAAyI;KAChJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,yIAAyI;KAChJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,qIAAqI;KAC5I,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,0FAA0F;KACjG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { TextField } from \"../../ic-text-field\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-text-field\", () => {\n it(\"renders a textarea\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-0\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-0\" inputmode=\"text\" name=\"ic-text-field-input-0\" placeholder=\"\" rows=\"6\" value=\"\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-0\" type=\"hidden\" value=\"\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with placeholder\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" placeholder=\"placeholder\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" placeholder=\"placeholder\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-1\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-1\" inputmode=\"text\" name=\"ic-text-field-input-1\" placeholder=\"placeholder\" rows=\"6\" value=\"\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-1\" type=\"hidden\" value=\"\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with value\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-2\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-2\" inputmode=\"text\" name=\"ic-text-field-input-2\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-2\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with helperText, required and small\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" helper-text=\"helper text value\" required=true small=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field small=\"\" helper-text=\"helper text value\" label=\"Test label\" required=\"true\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-3\" helpertext=\"helper text value\" label=\"Test label\" required=\"\"></ic-input-label>\n <ic-input-component-container small=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"ic-text-field-input-3-helper-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-3\" inputmode=\"text\" name=\"ic-text-field-input-3\" placeholder=\"\" required=\"\" rows=\"6\" value=\"\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-3\" type=\"hidden\" value=\"\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with autoprops\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" autofocus=true autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\" autofocus=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-4\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"on\" class=\"no-resize\" id=\"ic-text-field-input-4\" inputmode=\"text\" name=\"ic-text-field-input-4\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-4\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with hidden label\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" hide-label=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field hide-label=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-5\" inputmode=\"text\" name=\"ic-text-field-input-5\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-5\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with icon\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"\n />\n </svg>\n </ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-6\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"\">\n <span slot=\"left-icon\">\n <slot name=\"icon\"></slot>\n </span><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-6\" inputmode=\"text\" name=\"ic-text-field-input-6\" placeholder=\"\" rows=\"6\" value=\"\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"></path>\n </svg>\n <input class=\"ic-input\" name=\"ic-text-field-input-6\" type=\"hidden\" value=\"\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea disabled\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" disabled=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field disabled=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container disabled=\"\">\n <ic-input-label disabled=\"\" for=\"ic-text-field-input-7\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container disabled=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" disabled=\"\" id=\"ic-text-field-input-7\" inputmode=\"text\" name=\"ic-text-field-input-7\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" disabled=\"\" name=\"ic-text-field-input-7\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea readonly\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" readonly=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" readonly=\"\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container disabled=\"\" readonly=\"\">\n <ic-input-label for=\"ic-text-field-input-8\" helpertext=\"\" label=\"Test label\" readonly=\"\"></ic-input-label>\n <ic-input-component-container disabled=\"\" multiline=\"\" readonly=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-left-pad no-resize readonly\" disabled=\"\" id=\"ic-text-field-input-8\" inputmode=\"text\" name=\"ic-text-field-input-8\" placeholder=\"\" readonly=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" disabled=\"\" name=\"ic-text-field-input-8\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with max length\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" value=\"a long test value to exceed limit\" max-length=25></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" max-length=\"25\" rows=\"6\" value=\"a long test value to exceed limit\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-9\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-9-charcount-desc ic-text-field-input-9-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-9\" inputmode=\"text\" name=\"ic-text-field-input-9\" placeholder=\"\" rows=\"6\" value=\"a long test value to exceed limit\"></textarea>\n </ic-input-component-container>\n <ic-input-validation arialivemode=\"assertive\" for=\"ic-text-field-input-9\" message=\"Maximum length exceeded\" status=\"error\">\n <div slot=\"validation-message-adornment\">\n <ic-typography class=\"error maxlengthtext\" variant=\"caption\">\n <span aria-live=\"polite\" id=\"ic-text-field-input-9-charcount\" class=\"charcount\">\n 33/25\n </span>\n <span hidden=\"\" id=\"ic-text-field-input-9-charcount-desc\">\n Field can contain a maximum of 25 characters.\n </span>\n </ic-typography>\n </div>\n </ic-input-validation>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-9\" type=\"hidden\" value=\"a long test value to exceed limit\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with name & full width\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=2 label=\"Test label\" value=\"test value\" name=\"mycontolname\" full-width=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field class=\"fullwidth\" full-width=\"true\" label=\"Test label\" name=\"mycontolname\" rows=\"2\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-10\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container fullwidth=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-10\" inputmode=\"text\" name=\"mycontolname\" placeholder=\"\" rows=\"2\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"mycontolname\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with success validation\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-11\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"success\"><textarea aria-describedby=\"ic-text-field-input-11-validation-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-11\" inputmode=\"text\" name=\"ic-text-field-input-11\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n <ic-input-validation arialivemode=\"polite\" for=\"ic-text-field-input-11\" message=\"Good choice!\" status=\"success\"></ic-input-validation>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-11\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with warning validation\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-12\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"warning\"><textarea aria-describedby=\"ic-text-field-input-12-validation-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-12\" inputmode=\"text\" name=\"ic-text-field-input-12\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n <ic-input-validation arialivemode=\"polite\" for=\"ic-text-field-input-12\" message=\"warning text\" status=\"warning\"></ic-input-validation>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-12\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with error validation\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-13\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-13-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-13\" inputmode=\"text\" name=\"ic-text-field-input-13\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n <ic-input-validation arialivemode=\"assertive\" for=\"ic-text-field-input-13\" message=\"error text\" status=\"error\"></ic-input-validation>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-13\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with resize\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" resize=true value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" resize=\"true\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-14\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" id=\"ic-text-field-input-14\" inputmode=\"text\" name=\"ic-text-field-input-14\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"ic-text-field-input-14\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n});\n"]}
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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,6DAA6D;KACpE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,gFAAgF;KACvF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,wHAAwH;KAC/H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,sJAAsJ;KAC7J,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,gGAAgG;KACvG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE;;;;;;;;;;;;;;uBAcW;KAClB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,8FAA8F;KACrG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,8FAA8F;KACrG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,mHAAmH;KAC1H,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,kHAAkH;KACzH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,yIAAyI;KAChJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,yIAAyI;KAChJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,qIAAqI;KAC5I,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,0FAA0F;KACjG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { TextField } from \"../../ic-text-field\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-text-field\", () => {\n it(\"renders a textarea\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-0\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with placeholder\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" placeholder=\"placeholder\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" placeholder=\"placeholder\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-1\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with value\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-2\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with helperText, required and small\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" 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(\"renders textarea with autoprops\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" autofocus=true autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\" autofocus=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-4\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with hidden label\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" hide-label=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field hide-label=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with icon\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"\n />\n </svg>\n </ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-6\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea disabled\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" disabled=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field disabled=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container disabled=\"\">\n <ic-input-label disabled=\"\" for=\"ic-text-field-input-7\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container disabled=\"\" 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(\"renders textarea readonly\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" readonly=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" readonly=\"\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container disabled=\"\" readonly=\"\">\n <ic-input-label for=\"ic-text-field-input-8\" helpertext=\"\" label=\"Test label\" readonly=\"\"></ic-input-label>\n <ic-input-component-container disabled=\"\" 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(\"renders textarea with max length\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" value=\"a long test value to exceed limit\" max-length=25></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" max-length=\"25\" rows=\"6\" value=\"a long test value to exceed limit\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-9\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with name & full width\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=2 label=\"Test label\" value=\"test value\" name=\"mycontolname\" full-width=true></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field class=\"fullwidth\" full-width=\"true\" label=\"Test label\" name=\"mycontolname\" rows=\"2\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-10\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container fullwidth=\"\" 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=\"mycontolname\" placeholder=\"\" rows=\"2\" value=\"test value\"></textarea>\n </ic-input-component-container>\n </ic-input-container>\n </mock:shadow-root>\n <input class=\"ic-input\" name=\"mycontolname\" type=\"hidden\" value=\"test value\">\n </ic-text-field>\n `);\n });\n\n it(\"renders textarea with success validation\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-11\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with warning validation\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-12\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with error validation\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-13\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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(\"renders textarea with resize\", async () => {\n const page = await newSpecPage({\n components: [TextField],\n html: `<ic-text-field rows=6 label=\"Test label\" resize=true value=\"test value\"></ic-text-field>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-text-field label=\"Test label\" resize=\"true\" rows=\"6\" value=\"test value\">\n <mock:shadow-root>\n <ic-input-container>\n <ic-input-label for=\"ic-text-field-input-14\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n <ic-input-component-container multiline=\"\" 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"]}

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

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
 import { VARIANT_ICONS } from "../../utils/constants";
-import { getSlot, isSlotUsed, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { getSlot, isPropDefined, isSlotUsed, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 const AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;
 const TOAST_HEADING_CHAR_LIMIT = 70;
@@ -49,13 +49,14 @@ export class Toast {
         (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : VARIANT_ICONS[this.variant].ariaLabel;
     }
     if (this.isManual) {
+      const toastMessage = isPropDefined(this.message)
+        ? `. ${this.message}`
+        : "";
       this.el.setAttribute("aria-label", this.variant
         ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel
         : this.heading);
       (this.variant || this.message) &&
-        this.el.setAttribute("aria-description", this.variant
-          ? `${this.heading}${this.message !== undefined ? `. ${this.message}` : ""}`
-          : this.message);
+        this.el.setAttribute("aria-description", this.variant ? `${this.heading}${toastMessage}` : this.message);
     }
   }
   componentDidLoad() {
@@ -102,7 +103,7 @@ export class Toast {
     }
   }
   /**
-   * Used to display the individual toast
+   * @internal Used to display the individual toast.
    * @returns The element that previously had focus before the toast appeared
    */
   async setVisible() {
@@ -349,8 +350,11 @@ export class Toast {
           "return": "Promise<HTMLElement>"
         },
         "docs": {
-          "text": "Used to display the individual toast",
+          "text": "",
           "tags": [{
+              "name": "internal",
+              "text": "Used to display the individual toast."
+            }, {
               "name": "returns",
               "text": "The element that previously had focus before the toast appeared"
             }]

package/dist/collection/components/ic-toast/ic-toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-toast.js","sourceRoot":"","sources":["../../../src/components/ic-toast/ic-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcActivationTypes,\n IcStatusVariants,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/*\n @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n /\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private isManual: boolean;\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n\n @Element() el: HTMLIcToastElement;\n\n @State() timerProgress = 100;\n @State() visible = false;\n\n /\n If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n /\n @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n /\n If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n /\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n /\n How the toast will be dismissed. If manual will display a dismiss button.\n /\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n\n /\n The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n /\n @Prop() heading!: string;\n\n /\n The main body message of the toast. (NOTE: Should be no more than `140` characters)\n /\n @Prop() message?: string;\n\n /\n Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n /\n @Prop() neutralIconAriaLabel?: string;\n\n /\n The variant of the toast being rendered\n /\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /\n Is emitted when the user dismisses the toast\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel \|\| VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant \|\| this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant\n ? `${this.heading}${\n this.message !== undefined ? `. ${this.message}` : \"\"\n }`\n : this.message\n );\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.isManual && this.visible) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n if (!this.isManual) {\n switch (ev.type) {\n case \"mouseenter\":\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n break;\n case \"mouseleave\":\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n break;\n }\n }\n }\n\n /\n Used to display the individual toast\n * @returns The element that previously had focus before the toast appeared\n /\n @Method()\n async setVisible(): Promise<HTMLElement> {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong \|\| headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const first = this.interactiveElements[0];\n const last = this.interactiveElements[this.interactiveElements.length - 1];\n\n const source = isBackwards ? first : last;\n const target = isBackwards ? last : first;\n if (this.isActive(source)) return target;\n\n let currentIndex: number;\n const found = this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n });\n\n if (!found) return first;\n return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n if (targetEl === this.el) return !!this.el.shadowRoot.activeElement;\n return document.activeElement === targetEl;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"hidden\"]: !visible }}\n role={isManual ? \"dialog\" : \"status\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-message\">\n <ic-typography variant=\"subtitle-large\">\n {visible && <h5>{heading}</h5>}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n appearance=\"light\"\n size=\"icon\"\n progress={this.timerProgress}\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Light}\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-toast.js","sourceRoot":"","sources":["../../../src/components/ic-toast/ic-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isPropDefined,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcActivationTypes,\n IcStatusVariants,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/*\n @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n /\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private isManual: boolean;\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n\n @Element() el: HTMLIcToastElement;\n\n @State() timerProgress = 100;\n @State() visible = false;\n\n /\n If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n /\n @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n /\n If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n /\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n /\n How the toast will be dismissed. If manual will display a dismiss button.\n /\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n\n /\n The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n /\n @Prop() heading!: string;\n\n /\n The main body message of the toast. (NOTE: Should be no more than `140` characters)\n /\n @Prop() message?: string;\n\n /\n Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n /\n @Prop() neutralIconAriaLabel?: string;\n\n /\n The variant of the toast being rendered\n /\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /\n Is emitted when the user dismisses the toast\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n const toastMessage: string = isPropDefined(this.message)\n ? `. ${this.message}`\n : \"\";\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel \|\| VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant \|\| this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant ? `${this.heading}${toastMessage}` : this.message\n );\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.isManual && this.visible) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n if (!this.isManual) {\n switch (ev.type) {\n case \"mouseenter\":\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n break;\n case \"mouseleave\":\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n break;\n }\n }\n }\n\n /\n @internal Used to display the individual toast.\n * @returns The element that previously had focus before the toast appeared\n /\n @Method()\n async setVisible(): Promise<HTMLElement> {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong \|\| headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const first = this.interactiveElements[0];\n const last = this.interactiveElements[this.interactiveElements.length - 1];\n\n const source = isBackwards ? first : last;\n const target = isBackwards ? last : first;\n if (this.isActive(source)) return target;\n\n let currentIndex: number;\n const found = this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n });\n\n if (!found) return first;\n return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n if (targetEl === this.el) return !!this.el.shadowRoot.activeElement;\n return document.activeElement === targetEl;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"hidden\"]: !visible }}\n role={isManual ? \"dialog\" : \"status\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-message\">\n <ic-typography variant=\"subtitle-large\">\n {visible && <h5>{heading}</h5>}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n appearance=\"light\"\n size=\"icon\"\n progress={this.timerProgress}\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Light}\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-toast-region/ic-toast-region.js CHANGED Viewed

@@ -1,7 +1,22 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 export class ToastRegion {
   constructor() {
     this.pendingVisibility = [];
+    this.showToast = (toast) => {
+      const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
+      if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
+        toast.setVisible().then((res) => (this.previouslyFocused = res));
+      }
+      if (visibleToasts.length > 0)
+        this.pendingVisibility.push(toast);
+    };
+    this.openToast = undefined;
+  }
+  watchOpenToastHandler(newValue) {
+    if (this.openToast !== undefined) {
+      this.showToast(newValue);
+      this.openToast = undefined;
+    }
   }
   handleDismissedToast() {
     var _a;
@@ -20,32 +35,47 @@ export class ToastRegion {
     }
   }
   /**
-   * Handles setting the visibility of various toasts based on what is already visible
-   * @param toast The toast element being requested to display
+   * @deprecated Use openToast prop to display toast instead.
    */
   async setVisible(toast) {
-    const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
-    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
-      toast.setVisible().then((res) => (this.previouslyFocused = res));
-    }
-    if (visibleToasts.length > 0)
-      this.pendingVisibility.push(toast);
+    this.showToast(toast);
   }
   render() {
     return h("slot", null);
   }
   static get is() { return "ic-toast-region"; }
+  static get properties() {
+    return {
+      "openToast": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLIcToastElement",
+          "resolved": "HTMLIcToastElement",
+          "references": {
+            "HTMLIcToastElement": {
+              "location": "global",
+              "id": "global::HTMLIcToastElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The toast element to be displayed."
+        }
+      }
+    };
+  }
   static get methods() {
     return {
       "setVisible": {
         "complexType": {
           "signature": "(toast: HTMLIcToastElement) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "toast The toast element being requested to display"
-                }],
-              "text": "The toast element being requested to display"
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -60,16 +90,22 @@ export class ToastRegion {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Handles setting the visibility of various toasts based on what is already visible",
+          "text": "",
           "tags": [{
-              "name": "param",
-              "text": "toast The toast element being requested to display"
+              "name": "deprecated",
+              "text": "Use openToast prop to display toast instead."
             }]
         }
       }
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "openToast",
+        "methodName": "watchOpenToastHandler"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "icDismiss",

package/dist/collection/components/ic-toast-region/ic-toast-region.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-toast-region.js","sourceRoot":"","sources":["../../../src/components/ic-toast-region/ic-toast-region.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,OAAO,~~EAAE~~,CAAC,~~EAAE~~,MAAM,~~EAAE~~,MAAM,~~EAAE~~,MAAM,eAAe,CAAC;~~AAItE~~,MAAM,OAAO,WAAW~~;EADxB;IAEU~~,sBAAiB,GAAyB,EAAE,CAAC;~~GAqCtD~~;~~EA/BC~~,~~oBAAoB;;IAClB~~,~~IAAI~~,IAAI,CAAC,~~iBAAiB~~,CAAC,MAAM,~~GAAG~~,CAAC,EAAE;~~MACrC~~,IAAI,CAAC,~~iBAAiB~~,CAAC,CAAC,CAAC;~~SACtB~~,UAAU,EAAE~~;SACZ~~,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;~~MACjD~~,IAAI,CAAC,iBAAiB,CAAC,KAAK,~~EAAE~~,CAAC;~~KAChC;SAAM;MACL~~,~~IAAI~~,~~IAAI,~~CAAC,~~iBAAiB~~,~~IAAI~~,~~UAAU~~,IAAI,IAAI,CAAC,~~iBAAiB~~,EAAE;~~QACjE~~,IAAI,CAAC,~~iBAA2C~~,CAAC,QAAQ,~~EAAE~~,CAAC;~~OAC9D;;QAAM~~,~~MAAA,~~IAAI,CAAC,~~iBAAiB~~,~~0CAAE~~,~~KAAK~~,~~EAAE,~~CAAC;~~KACxC~~;EACH,CAAC;~~EAED;;;KAGG;EAEH~~,~~KAAK~~,CAAC,~~UAAU~~,CAAC,~~KAAyB;IACxC,~~MAAM,~~aAAa,~~GAAG,~~KAAK,~~CAAC,IAAI,~~CAC9B~~,~~QAAQ~~,CAAC,~~gBAAgB~~,CAAC,UAAU,~~CAAC~~,~~CACtC~~,CAAC,~~MAAM,~~CAAC,~~CAAC~~,EAAE,EAAE,~~EAAE~~,CAAC,~~MAAM~~,CAAC,~~gBAAgB~~,~~CAAC~~,~~EAAE~~,CAAC,CAAC,~~OAAO,KAAK,MAAM,~~CAAC~~,CAAC~~;~~IACjE~~,IAAI,~~aAAa,~~CAAC,~~OAAO~~,CAAC,KAAK,~~CAAC~~,~~KAAK,~~CAAC,~~CAAC~~,IAAI,~~aAAa,~~CAAC,~~MAAM~~,IAAI,~~CAAC~~,~~EAAE;MACpE~~,~~KAAK~~,CAAC,~~UAAU~~,EAAE,~~CAAC,~~IAAI,CAAC,CAAC,~~GAAG~~,EAAE,~~EAAE,~~CAAC,~~CAAC~~,IAAI,CAAC,iBAAiB,~~GAAG~~,~~GAAG~~,~~CAAC~~,CAAC,CAAC;~~KAClE~~;~~IACD~~,~~IAAI~~,~~aAAa,~~CAAC,~~MAAM~~,~~GAAG~~,~~CAAC~~;~~MAAE~~,IAAI,CAAC,~~iBAAiB~~,CAAC,~~IAAI,CAAC,~~KAAK,CAAC,CAAC;~~EACnE~~,CAAC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Listen, Method } from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n private pendingVisibility: HTMLIcToastElement[] = [];\n private previouslyFocused: HTMLElement;\n\n @Element() el: HTMLIcToastRegionElement;\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismissedToast(): void {\n if (this.pendingVisibility.length > 0) {\n this.pendingVisibility[0]\n .setVisible()\n .then((res) => (this.previouslyFocused = res));\n this.pendingVisibility.shift();\n } else {\n if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n (this.previouslyFocused as IcFocusableComponents).setFocus();\n } else this.previouslyFocused?.focus();\n }\n }\n\n /*\n ~~Handles~~ ~~setting~~ ~~the visibility of various toasts based on what is already visible\n * @param toast The toast element being requested to display\n */\n @Method~~(~~)\n async setVisible(~~toast: HTMLIcToastElement): ~~Promise<void>~~ {\n const visibleToasts = Array.from(\n document.querySelectorAll(\"ic-toast\")\n ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n toast.setVisible().then((res) => (this.previouslyFocused = res));\n }\n if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}
1	+ {"version":3,"file":"ic-toast-region.js","sourceRoot":"","sources":["../../../src/components/ic-toast-region/ic-toast-region.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,CAAC,EACD,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAIvB,MAAM,OAAO,WAAW;;IACd,sBAAiB,GAAyB,EAAE,CAAC;IA+B7C,cAAS,GAAG,CAAC,KAAyB,EAAE,EAAE;MAChD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;MACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;QACpE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;OAClE;MACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;QAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnE,CAAC,CAAC;;;EA7BF,qBAAqB,CAAC,QAA4B;IAChD,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;MACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5B;EACH,CAAC;EAGD,oBAAoB;;IAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;MACrC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;SACtB,UAAU,EAAE;SACZ,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;MACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;KAChC;SAAM;MACL,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;QACjE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;OAC9D;;QAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACxC;EACH,CAAC;EAYD;;KAEG;EAEH,KAAK,CAAC,UAAU,CAAC,KAAyB;IACxC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;EACxB,CAAC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n h,\n Listen,\n Method,\n Prop,\n Watch,\n} from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n private pendingVisibility: HTMLIcToastElement[] = [];\n private previouslyFocused: HTMLElement;\n\n @Element() el: HTMLIcToastRegionElement;\n\n /*\n The toast element to be displayed.\n /\n @Prop({ mutable: true }) openToast: HTMLIcToastElement;\n @Watch(\"openToast\")\n watchOpenToastHandler(newValue: HTMLIcToastElement): void {\n if (this.openToast !== undefined) {\n this.showToast(newValue);\n this.openToast = undefined;\n }\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismissedToast(): void {\n if (this.pendingVisibility.length > 0) {\n this.pendingVisibility[0]\n .setVisible()\n .then((res) => (this.previouslyFocused = res));\n this.pendingVisibility.shift();\n } else {\n if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n (this.previouslyFocused as IcFocusableComponents).setFocus();\n } else this.previouslyFocused?.focus();\n }\n }\n\n private showToast = (toast: HTMLIcToastElement) => {\n const visibleToasts = Array.from(\n document.querySelectorAll(\"ic-toast\")\n ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n toast.setVisible().then((res) => (this.previouslyFocused = res));\n }\n if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n };\n\n /\n @deprecated Use openToast prop to display toast instead.\n */\n @Method()\n async setVisible(toast: HTMLIcToastElement): Promise<void> {\n this.showToast(toast);\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}

package/dist/collection/components/ic-toast-region/test/basic/ic-toast-region.spec.js CHANGED Viewed

@@ -12,7 +12,7 @@ describe("ic-toast-region component", () => {
     });
     expect(page.root).toMatchSnapshot();
   });
-  it("should test showing and hiding toasts", async () => {
+  it("should test showing and hiding toasts with deprecated showVisible method", async () => {
     const page = await newSpecPage({
       components: [ToastRegion, Toast],
       html: `<ic-toast-region>
@@ -32,6 +32,28 @@ describe("ic-toast-region component", () => {
     await page.rootInstance.handleDismissedToast();
     expect(page.rootInstance.pendingVisibility.length).toBe(0);
   });
+  it("should test showing and hiding toasts with openToast prop", async () => {
+    const page = await newSpecPage({
+      components: [ToastRegion, Toast],
+      html: `<ic-toast-region>
+      <ic-toast heading="Heading"></ic-toast>
+      <ic-toast heading="Heading"></ic-toast>
+      </ic-toast-region>`,
+    });
+    const toasts = page.root.querySelectorAll("ic-toast");
+    page.root.openToast = toasts[0];
+    await page.waitForChanges();
+    expect(page.rootInstance.pendingVisibility.length).toBe(1);
+    page.root.openToast = toasts[1];
+    await page.waitForChanges();
+    expect(page.rootInstance.pendingVisibility.length).toBe(2);
+    await page.rootInstance.handleDismissedToast();
+    expect(page.rootInstance.pendingVisibility.length).toBe(1);
+    await page.rootInstance.handleDismissedToast();
+    expect(page.rootInstance.pendingVisibility.length).toBe(0);
+    await page.rootInstance.handleDismissedToast();
+    expect(page.rootInstance.pendingVisibility.length).toBe(0);
+  });
   it("should test previouslyFocused", async () => {
     const page = await newSpecPage({
       components: [ToastRegion, Toast, Button],

package/dist/collection/components/ic-toast-region/test/basic/ic-toast-region.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-toast-region.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast-region/test/basic/ic-toast-region.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;EACzC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;yBAEa;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,~~uCAAuC~~,EAAE,KAAK,IAAI,EAAE;~~IACrD~~,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAEtD,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC;MACxC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,YAAY,CAAC,iBAAiB,GAAG,MAAM,CAAC;IAE7C,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY,CAAC,iBAAiB,GAAG,MAAM,CAAC;IAE7C,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Toast } from \"../../../ic-toast/ic-toast\";\nimport { ToastRegion } from \"../../ic-toast-region\";\n\ndescribe(\"ic-toast-region component\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should test showing and hiding toasts\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <ic-toast heading=\"Heading\"></ic-toast>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n await page.root.setVisible(toasts[0]);\n\n expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n await page.root.setVisible(toasts[1]);\n\n expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n\n it(\"should test previouslyFocused\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast, Button],\n html: `<ic-toast-region>\n <ic-button>Click Me</ic-button>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const button = page.root.querySelector(\"ic-button\");\n page.rootInstance.previouslyFocused = button;\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n\n it(\"should test previously focused - standard element\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <button>Click Me</button>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const button = page.root.querySelector(\"button\");\n page.rootInstance.previouslyFocused = button;\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-toast-region.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast-region/test/basic/ic-toast-region.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;EACzC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;yBAEa;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0EAA0E,EAAE,KAAK,IAAI,EAAE;IACxF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAEtD,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAEtD,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC;MACxC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,YAAY,CAAC,iBAAiB,GAAG,MAAM,CAAC;IAE7C,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;MAChC,IAAI,EAAE;;;yBAGa;KACpB,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY,CAAC,iBAAiB,GAAG,MAAM,CAAC;IAE7C,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Toast } from \"../../../ic-toast/ic-toast\";\nimport { ToastRegion } from \"../../ic-toast-region\";\n\ndescribe(\"ic-toast-region component\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n expect(page.root).toMatchSnapshot();\n });\n\n it(\"should test showing and hiding toasts with deprecated showVisible method\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <ic-toast heading=\"Heading\"></ic-toast>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n await page.root.setVisible(toasts[0]);\n\n expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n await page.root.setVisible(toasts[1]);\n\n expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n\n it(\"should test showing and hiding toasts with openToast prop\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <ic-toast heading=\"Heading\"></ic-toast>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n page.root.openToast = toasts[0];\n\n await page.waitForChanges();\n\n expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n page.root.openToast = toasts[1];\n\n await page.waitForChanges();\n\n expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n\n it(\"should test previouslyFocused\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast, Button],\n html: `<ic-toast-region>\n <ic-button>Click Me</ic-button>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const button = page.root.querySelector(\"ic-button\");\n page.rootInstance.previouslyFocused = button;\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n\n it(\"should test previously focused - standard element\", async () => {\n const page = await newSpecPage({\n components: [ToastRegion, Toast],\n html: `<ic-toast-region>\n <button>Click Me</button>\n <ic-toast heading=\"Heading\"></ic-toast>\n </ic-toast-region>`,\n });\n\n const button = page.root.querySelector(\"button\");\n page.rootInstance.previouslyFocused = button;\n\n await page.rootInstance.handleDismissedToast();\n expect(page.rootInstance.pendingVisibility.length).toBe(0);\n });\n});\n"]}

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

@@ -449,7 +449,7 @@ video {
   background-color: var(--ic-architectural-800);
   color: #ffff;
   text-align: center;
-  padding: var(--ic-space-xxxs) 0.625rem;
+  padding: var(--ic-space-xxxs) var(--ic-space-xs);
   border-radius: var(--ic-border-radius);
   border: var(--ic-space-1px) solid var(--ic-architectural-40);
   position: absolute;
@@ -564,6 +564,12 @@ video {
   ) !important;
 }
+@media screen and (max-width: 576px) {
+  :host(.ic-tooltip) .ic-tooltip-container {
+    max-width: 18.875rem;
+  }
+}
 @media (forced-colors: active) {
   :host(.ic-tooltip) .ic-tooltip-container,
   :host(.ic-tooltip) .ic-tooltip-arrow::before {

package/dist/collection/components/ic-tooltip/ic-tooltip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { createPopper } from "@popperjs/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class Tooltip {
@@ -9,14 +9,6 @@ export class Tooltip {
     this.mouseOverTool = false;
     this.persistTooltip = false;
     this.onDialog = false;
-    this.screenReaderOnlyStyles = {
-      position: "absolute",
-      left: "-10000px",
-      top: "auto",
-      width: "1px",
-      height: "1px",
-      overflow: "hidden",
-    };
     this.showEvents = this.disableHover
       ? ["click"]
       : ["mouseenter", "focusin"];
@@ -157,15 +149,11 @@ export class Tooltip {
       document[method]("keydown", this.handleKeyDown);
     };
     this.disableHover = false;
+    this.maxLines = undefined;
     this.placement = "bottom";
     this.target = undefined;
     this.label = undefined;
   }
-  updateLabel(newValue) {
-    if (this.ariaDescribedBy !== null) {
-      this.ariaDescribedBy.innerText = newValue;
-    }
-  }
   disconnectedCallback() {
     this.manageEventListeners("remove");
     if (this.popperInstance !== undefined) {
@@ -180,14 +168,11 @@ export class Tooltip {
       ((_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.getAttribute("data-overflow")) === "true";
     this.onDialog = this.icDialogEl !== null;
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tooltip");
-    if (this.target !== undefined) {
-      this.ariaDescribedBy = document.createElement("span");
-      this.ariaDescribedBy.id = `ic-tooltip-${this.target}`;
-      this.ariaDescribedBy.innerText = this.label;
-      this.ariaDescribedBy.classList.add("ic-tooltip-label");
-      Object.assign(this.ariaDescribedBy.style, this.screenReaderOnlyStyles);
-      this.el.insertAdjacentElement("beforebegin", this.ariaDescribedBy);
-    }
+  }
+  componentDidRender() {
+    const typographyEl = this.el.shadowRoot.querySelector(".ic-tooltip-container > ic-typography");
+    this.maxLines > 0 &&
+      typographyEl.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
   }
   /**
    * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
@@ -200,7 +185,7 @@ export class Tooltip {
   }
   render() {
     const { label } = this;
-    return (h(Host, { class: { "ic-tooltip": true } }, h("div", { ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container" }, h("ic-typography", { variant: "caption" }, label), h("div", { ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow", "data-popper-arrow": true })), h("slot", null)));
+    return (h(Host, { class: { "ic-tooltip": true } }, h("div", { ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container" }, h("ic-typography", { maxLines: this.maxLines, variant: "caption" }, label), h("div", { ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", null)));
   }
   static get is() { return "ic-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -234,6 +219,23 @@ export class Tooltip {
         "reflect": false,
         "defaultValue": "false"
       },
+      "maxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The number of lines to display before truncating the text."
+        },
+        "attribute": "max-lines",
+        "reflect": false
+      },
       "placement": {
         "type": "string",
         "mutable": true,
@@ -334,11 +336,5 @@ export class Tooltip {
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "label",
-        "methodName": "updateLabel"
-      }];
-  }
 }
 //# sourceMappingURL=ic-tooltip.js.map