npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.33 → 3.0.0-canary.35 - Mend

@ukic/canary-web-components 3.0.0-canary.33 → 3.0.0-canary.35

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 (946) hide show

package/dist/components/ic-skip-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-skip-link.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,2lBAA2lB,CAAC;AAClnB,yBAAe,aAAa;;MCAf,QAAQ;IACjB;;;;;;;QAII,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;;;QAIvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;;;;QAIpB,IAAI,CAAC,KAAK,GAAG,sBAAsB,CAAC;;;;QAIpC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;;;;QAIxB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;;;;QAIvB,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;KACtC;;;;IAID,MAAM,QAAQ;QACV,IAAI,IAAI,CAAC,MAAM;YACX,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KAC9B;IACD,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,GAAG,GAAG,IAAI,CAAC;QAC7F,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC7C,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBACxE,aAAa,EAAE,CAAC,MAAM;gBACtB,YAAY,EAAE,CAAC,CAAC,SAAS;gBACzB,iBAAiB,EAAE,CAAC,qBAAqB;gBACzC,MAAM,EAAE,CAAC,CAAC,MAAM;aACnB,EAAE,IAAI,EAAE,IAAI,MAAM,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE;KAChH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-skip-link/ic-skip-link.css?tag=ic-skip-link&encapsulation=shadow","../web-components/dist/collection/components/ic-skip-link/ic-skip-link.js"],"sourcesContent":["/*\n @prop --ic-skip-link-position-top: The top position of the skip link when it is not displayed inline and has an absolute position.\n/\n\n:host {\n display: block;\n}\n\nic-link {\n position: absolute;\n left: -9999px;\n}\n\nic-link:focus {\n z-index: var(--ic-z-index-skip-link);\n left: var(--ic-space-sm);\n padding: var(--ic-space-sm);\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.display-top:focus {\n top: var(--ic-skip-link-position-top, var(--ic-space-sm));\n}\n\n.inline:focus {\n position: static;\n display: inline-block;\n margin: var(--ic-space-xs) 0;\n}\n\n.full-width:focus {\n display: flex;\n right: var(--ic-space-sm);\n width: auto;\n}\n\n.inline.full-width:focus {\n justify-content: start;\n}\n\n.show-background {\n background: var(--ic-skip-link-background);\n}\n","import { h, Host } from \"@stencil/core\";\nexport class SkipLink {\n constructor() {\n /\n If `true`, the skip link will fill the width of the page.\n /\n this.fullWidth = false;\n /\n If `true`, the skip link will appear inline with surrounding page content when focused.\n /\n this.inline = false;\n /\n The label displayed when the skip link is focused.\n /\n this.label = \"Skip to main content\";\n /\n If `true`, the skip link will display as black in the light theme, and white in the dark theme.\n /\n this.monochrome = false;\n /\n Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.\n /\n this.theme = \"inherit\";\n /\n If `true`, the background will be hidden.\n /\n this.transparentBackground = false;\n }\n /\n Sets focus on the element.\n */\n async setFocus() {\n if (this.linkEl)\n this.linkEl.setFocus();\n }\n render() {\n const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;\n return (h(Host, { key: '354579354254bfa9b0a1c314dd57226f2e1e4208', class: {\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n } }, h(\"ic-link\", { key: '22276d114cc1d15a68eb675f6680b7388a76974a', class: {\n \"display-top\": !inline,\n \"full-width\": !!fullWidth,\n \"show-background\": !transparentBackground,\n inline: !!inline,\n }, href: `#${target}`, monochrome: monochrome, theme: theme, ref: (el) => (this.linkEl = el) }, label)));\n }\n static get is() { return \"ic-skip-link\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-skip-link.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-skip-link.css\"]\n };\n }\n static get properties() {\n return {\n \"fullWidth\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the skip link will fill the width of the page.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"full-width\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"inline\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the skip link will appear inline with surrounding page content when focused.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"inline\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"label\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The label displayed when the skip link is focused.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"label\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"Skip to main content\\\"\"\n },\n \"monochrome\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the skip link will display as black in the light theme, and white in the dark theme.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"monochrome\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"target\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": true,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The target ID for the element which should receive focus when triggering the skip link.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"target\",\n \"reflect\": false\n },\n \"theme\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcThemeMode\",\n \"resolved\": \"\\\"dark\\\" \| \\\"inherit\\\" \| \\\"light\\\"\",\n \"references\": {\n \"IcThemeMode\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcThemeMode\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"theme\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"inherit\\\"\"\n },\n \"transparentBackground\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, the background will be hidden.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"transparent-background\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get methods() {\n return {\n \"setFocus\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Sets focus on the element.\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-skip-link.js.map\n"],"version":3}
1	+ {"file":"ic-skip-link.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,2lBAA2lB,CAAC;AAClnB,yBAAe,aAAa;;MCOf,QAAQ;IALrB;;;;;;;QAaU,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,WAAM,GAAY,KAAK,CAAC;;;;QAKxB,UAAK,GAAW,sBAAsB,CAAC;;;;QAKvC,eAAU,GAAY,KAAK,CAAC;;;;QAU5B,UAAK,GAAgB,SAAS,CAAC;;;;QAK/B,0BAAqB,GAAY,KAAK,CAAC;KA4ChD;;;;IAtCC,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KACzC;IAED,MAAM;QACJ,MAAM,EACJ,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,EACL,qBAAqB,GACtB,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAED,gEACE,KAAK,EAAE;gBACL,aAAa,EAAE,CAAC,MAAM;gBACtB,YAAY,EAAE,CAAC,CAAC,SAAS;gBACzB,iBAAiB,EAAE,CAAC,qBAAqB;gBACzC,MAAM,EAAE,CAAC,CAAC,MAAM;aACjB,EACD,IAAI,EAAE,IAAI,MAAM,EAAE,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAE9B,KAAK,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/src/components/ic-skip-link/ic-skip-link.css?tag=ic-skip-link&encapsulation=shadow","../web-components/src/components/ic-skip-link/ic-skip-link.tsx"],"sourcesContent":["/*\n @prop --ic-skip-link-position-top: The top position of the skip link when it is not displayed inline and has an absolute position.\n/\n\n:host {\n display: block;\n}\n\nic-link {\n position: absolute;\n left: -9999px;\n}\n\nic-link:focus {\n z-index: var(--ic-z-index-skip-link);\n left: var(--ic-space-sm);\n padding: var(--ic-space-sm);\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n width: fit-content;\n}\n\n.display-top:focus {\n top: var(--ic-skip-link-position-top, var(--ic-space-sm));\n}\n\n.inline:focus {\n position: static;\n display: inline-block;\n margin: var(--ic-space-xs) 0;\n}\n\n.full-width:focus {\n display: flex;\n right: var(--ic-space-sm);\n width: auto;\n}\n\n.inline.full-width:focus {\n justify-content: start;\n}\n\n.show-background {\n background: var(--ic-skip-link-background);\n}\n","import { Component, Element, h, Host, Method, Prop } from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-skip-link\",\n styleUrl: \"ic-skip-link.css\",\n shadow: true,\n})\nexport class SkipLink {\n private linkEl?: HTMLIcLinkElement;\n\n @Element() el: HTMLIcSkipLinkElement;\n\n /\n If `true`, the skip link will fill the width of the page.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the skip link will appear inline with surrounding page content when focused.\n /\n @Prop() inline: boolean = false;\n\n /\n The label displayed when the skip link is focused.\n /\n @Prop() label: string = \"Skip to main content\";\n\n /\n If `true`, the skip link will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome: boolean = false;\n\n /\n The target ID for the element which should receive focus when triggering the skip link.\n /\n @Prop() target!: string;\n\n /\n Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the background will be hidden.\n /\n @Prop() transparentBackground: boolean = false;\n\n /\n Sets focus on the element.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.linkEl) this.linkEl.setFocus();\n }\n\n render() {\n const {\n fullWidth,\n inline,\n label,\n monochrome,\n target,\n theme,\n transparentBackground,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <ic-link\n class={{\n \"display-top\": !inline,\n \"full-width\": !!fullWidth,\n \"show-background\": !transparentBackground,\n inline: !!inline,\n }}\n href={`#${target}`}\n monochrome={monochrome}\n theme={theme}\n ref={(el) => (this.linkEl = el)}\n >\n {label}\n </ic-link>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-status-tag.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface IcStatusTag extends Components.IcStatusTag, HTMLElement {}
+export const IcStatusTag: {
+    prototype: IcStatusTag;
+    new (): IcStatusTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-status-tag.js CHANGED Viewed

@@ -41,12 +41,12 @@ const StatusTag = /*@__PURE__*/ proxyCustomElement(class StatusTag extends HTMLE
     }
     render() {
         const { label, status, variant, size, announced, theme, uppercase } = this;
-        return (h(Host, { key: '2bbbf4341010538d3ce41795e2fdd7db95c6f403', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'd603275aeec1bbe93bf1273b460ee655f45263d0', class: {
+        return (h(Host, { key: 'a81bcd8eb6ba735901552077e7ca9b2fee3c86a2', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '7128d22094fb1fa55aa3cbd52cfdc26d43233c98', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: 'b7e19ed18a1cced7c36e380df711599a17048736', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '5dd5bf12423220d8c453fa32413e5910b578d4c9' }, label)))));
+            } }, h("ic-typography", { key: '88ec07dc8dd226d30b2974f4bcce0a8ad0f984d7', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'cf820e540baa52f777328c16948c8e656083a244' }, label)))));
     }
     static get style() { return IcStatusTagStyle0; }
 }, [1, "ic-status-tag", {

package/dist/components/ic-status-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-status-tag.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,62IAA62I,CAAC;AACr4I,0BAAe,cAAc;;MCChB,SAAS;IAClB;;;;;;;;QAKI,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;;;QAIvB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;;;;QAIrB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;;;;QAIxB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;;;;QAIvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;;;QAItB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;KAC3B;IACD,gBAAgB;QACZ,gCAAgC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;KAC7F;IACD,MAAM;QACF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBACrP,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,GAAG,IAAI;gBAC9B,CAAC,UAAU,GAAG,OAAO,KAAK,UAAU;gBACpC,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;aACpB,EAAE,EAAE,CAAC,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,OAAO,EAAE,SAAS,GAAG,iBAAiB,GAAG,OAAO,EAAE,wBAAwB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;KACjP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","../web-components/dist/collection/components/ic-status-tag/ic-status-tag.js"],"sourcesContent":["/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type=\"search\"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n\n --ic-typography-color: var(--ic-status-tag-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.large {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-status-tag-neutral);\n}\n\n.filled-success {\n background-color: var(--ic-status-tag-success);\n}\n\n.filled-warning {\n background-color: var(--ic-status-tag-warning);\n\n --ic-typography-color: var(--ic-status-tag-filled-warning-text);\n}\n\n.filled-danger {\n background-color: var(--ic-status-tag-error);\n}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-status-tag-outlined-background-neutral);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-success {\n background-color: var(--ic-status-tag-outlined-background-success);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-success);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-tag-outlined-background-warning);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-tag-outlined-background-error);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-error);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n@media (forced-colors: active) {\n :host {\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n }\n}\n","import { Host, h } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nexport class StatusTag {\n constructor() {\n /\n If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n * Screen readers will announce changes to the `label`, but not the initial value.\n /\n this.announced = false;\n /\n The size of the status tag component.\n /\n this.size = \"medium\";\n /\n The colour of the status tag.\n /\n this.status = \"neutral\";\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n this.theme = \"inherit\";\n /\n The letter case of the status tag's label.\n /\n this.uppercase = true;\n /\n The emphasis of the status tag.\n */\n this.variant = \"filled\";\n }\n componentDidLoad() {\n onComponentRequiredPropUndefined([{ prop: this.label, propName: \"label\" }], \"Status Tag\");\n }\n render() {\n const { label, status, variant, size, announced, theme, uppercase } = this;\n return (h(Host, { key: '2bbbf4341010538d3ce41795e2fdd7db95c6f403', class: { [`ic-theme-${theme}`]: theme !== \"inherit\" }, role: announced ? \"status\" : null, \"aria-label\": \"Status\" }, h(\"strong\", { key: 'd603275aeec1bbe93bf1273b460ee655f45263d0', class: {\n [\"tag\"]: true,\n [`${variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [`${size}`]: true,\n } }, h(\"ic-typography\", { key: 'b7e19ed18a1cced7c36e380df711599a17048736', variant: uppercase ? \"label-uppercase\" : \"label\", \"apply-vertical-margins\": false }, h(\"span\", { key: '5dd5bf12423220d8c453fa32413e5910b578d4c9' }, label)))));\n }\n static get is() { return \"ic-status-tag\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"ic-status-tag.css\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"ic-status-tag.css\"]\n };\n }\n static get properties() {\n return {\n \"announced\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\\nScreen readers will announce changes to the `label`, but not the initial value.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"announced\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"label\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": true,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The content rendered within the status tag.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"label\",\n \"reflect\": false\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcSizes\",\n \"resolved\": \"\\\"large\\\" \| \\\"medium\\\" \| \\\"small\\\" \| undefined\",\n \"references\": {\n \"IcSizes\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcSizes\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the status tag component.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"medium\\\"\"\n },\n \"status\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcStatusTagStatuses\",\n \"resolved\": \"\\\"danger\\\" \| \\\"neutral\\\" \| \\\"success\\\" \| \\\"warning\\\" \| undefined\",\n \"references\": {\n \"IcStatusTagStatuses\": {\n \"location\": \"import\",\n \"path\": \"./ic-status-tag.types\",\n \"id\": \"src/components/ic-status-tag/ic-status-tag.types.ts::IcStatusTagStatuses\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The colour of the status tag.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"status\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"neutral\\\"\"\n },\n \"theme\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"\\\"dark\\\" \| \\\"light\\\" \| \\\"inherit\\\"\",\n \"resolved\": \"\\\"dark\\\" \| \\\"inherit\\\" \| \\\"light\\\" \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Sets the theme color to the dark or light theme color. \\\"inherit\\\" will set the color based on the system settings or ic-theme component.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"theme\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"inherit\\\"\"\n },\n \"uppercase\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean \| undefined\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The letter case of the status tag's label.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"uppercase\",\n \"reflect\": false,\n \"defaultValue\": \"true\"\n },\n \"variant\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"IcEmphasisType\",\n \"resolved\": \"\\\"filled\\\" \| \\\"outlined\\\" \| undefined\",\n \"references\": {\n \"IcEmphasisType\": {\n \"location\": \"import\",\n \"path\": \"../../utils/types\",\n \"id\": \"src/utils/types.ts::IcEmphasisType\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The emphasis of the status tag.\"\n },\n \"getter\": false,\n \"setter\": false,\n \"attribute\": \"variant\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"filled\\\"\"\n }\n };\n }\n}\n//# sourceMappingURL=ic-status-tag.js.map\n"],"version":3}
1	+ {"file":"ic-status-tag.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,62IAA62I,CAAC;AACr4I,0BAAe,cAAc;;MCShB,SAAS;IALtB;;;;;;;;QAUU,cAAS,GAAa,KAAK,CAAC;;;;QAU5B,SAAI,GAAa,QAAQ,CAAC;;;;QAK1B,WAAM,GAAyB,SAAS,CAAC;;;;QAKzC,UAAK,GAAkC,SAAS,CAAC;;;;QAKjD,cAAS,GAAa,IAAI,CAAC;;;;QAK3B,YAAO,GAAoB,QAAQ,CAAC;KAmC7C;IAjCC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,gBACtB,QAAQ,IAEnB,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,GAAG,IAAI;gBAC9B,CAAC,UAAU,GAAG,OAAO,KAAK,UAAU;gBACpC,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;aAClB,IAED,sEACE,OAAO,EAAE,SAAS,GAAG,iBAAiB,GAAG,OAAO,4BACxB,KAAK,IAE7B,+DAAO,KAAK,CAAQ,CACN,CACT,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","../web-components/src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n\n --ic-typography-color: var(--ic-status-tag-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.large {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-status-tag-neutral);\n}\n\n.filled-success {\n background-color: var(--ic-status-tag-success);\n}\n\n.filled-warning {\n background-color: var(--ic-status-tag-warning);\n\n --ic-typography-color: var(--ic-status-tag-filled-warning-text);\n}\n\n.filled-danger {\n background-color: var(--ic-status-tag-error);\n}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-status-tag-outlined-background-neutral);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-success {\n background-color: var(--ic-status-tag-outlined-background-success);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-success);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-tag-outlined-background-warning);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-tag-outlined-background-error);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-error);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n@media (forced-colors: active) {\n :host {\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n * Screen readers will announce changes to the `label`, but not the initial value.\n /\n @Prop() announced?: boolean = false;\n\n /\n The content rendered within the status tag.\n /\n @Prop() label!: string;\n\n /\n The size of the status tag component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The colour of the status tag.\n /\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: \"dark\" \| \"light\" \| \"inherit\" = \"inherit\";\n\n /\n The letter case of the status tag's label.\n /\n @Prop() uppercase?: boolean = true;\n\n /\n The emphasis of the status tag.\n */\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, variant, size, announced, theme, uppercase } = this;\n return (\n <Host\n class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n role={announced ? \"status\" : null}\n aria-label=\"Status\"\n >\n <strong\n class={{\n [\"tag\"]: true,\n [`${variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [`${size}`]: true,\n }}\n >\n <ic-typography\n variant={uppercase ? \"label-uppercase\" : \"label\"}\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-table-of-contents.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import './helpers.js';
 import { D as DEVICE_SIZES } from './helpers2.js';
-import { d as defineCustomElement$4 } from './ic-section-container2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$4 } from './ic-section-container2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 const ItemHook = () => {
@@ -347,10 +348,10 @@ const TableOfContents = /*@__PURE__*/ proxyCustomElement(class TableOfContents e
     // Component is a wrapper for page contents, and will build list from heading items
     render() {
         const { heading, monochrome, position, size, theme } = this;
-        return (h(Host, { key: 'b92dba4d29b176dc877963ce0c3113568007847d', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("ic-section-container", { key: '86e9740eecc52ca907e39d7c3daf5ebc506b6c3b', class: TOC_CONTAINER_CLASS, aligned: "full-width" }, h("div", { key: '8a4cceab420909f0030c262839b4f6c2bbedf297', role: "navigation", class: `${TOC_CONTENT_CLASS} ${position === "top" && "table-of-contents-position-top"}
-            ${position === "right" && "table-of-contents-position-side"}` }, h("ic-typography", { key: 'd9dac6d2e62f2aadd177833418e85cb89ab2dade', class: `table-of-contents-heading ${size}`, variant: "subtitle-large" }, heading), h("div", { key: 'c88968311486981bde1093930757ea264d2bd919', class: "table-of-contents-list" }, h("div", { key: '0b8e21d4f1c8b8a4f4f4f91c8c3ae9ba859b9b5b', class: `table-of-contents-sidebar ${monochrome && `table-of-contents-sidebar-monochrome`}
+        return (h(Host, { key: '5d1f4ba671cf901f6e6f72f7df98fefacc7c3db4', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("ic-section-container", { key: '7d3a5007e4d0ba8fc144cc2d9e14ef89f01178be', class: TOC_CONTAINER_CLASS, aligned: "full-width" }, h("div", { key: '69edf4c87059ba61776b685cd2bfd2b9f60f7b84', role: "navigation", class: `${TOC_CONTENT_CLASS} ${position === "top" && "table-of-contents-position-top"}
+            ${position === "right" && "table-of-contents-position-side"}` }, h("ic-typography", { key: '4cb13c2d6ca0001d4797c31e1f71e39da9033ecf', class: `table-of-contents-heading ${size}`, variant: "subtitle-large" }, heading), h("div", { key: '1fcef1b52f25439c8d822cd33a0f5c33796088ee', class: "table-of-contents-list" }, h("div", { key: 'd070ed88664bce7838ef688387805e3433520b96', class: `table-of-contents-sidebar ${monochrome && `table-of-contents-sidebar-monochrome`}
                 ${size}
-                ` }), h("ol", { key: 'dc2216ce8e94c17ab0b2fe0b5644086eb90c4fd0', class: TOC_LIST_ITEMS_CLASS }, this.generateHeadingTree().map((item) => this.renderTocTree(item))))), h("slot", { key: 'e0a992d1de985fbe672aa7a33ed54efb5ec5de43' }))));
+                ` }), h("ol", { key: '6623a7c7088786666e038697bcad5a06e6ec403a', class: TOC_LIST_ITEMS_CLASS }, this.generateHeadingTree().map((item) => this.renderTocTree(item))))), h("slot", { key: 'a34737b2579a7c02507719d3348a2cfa6857ed1c' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-table-of-contents.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-table-of-contents.js","mappings":";;;;;;AA6BA,MAAM,QAAQ,GAAG;;;;IAIf,MAAM,kBAAkB,GAAG,CAAC,OAAe;QACzC,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;KAC5D,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,aAAa,GAAsD,CACvE,SAAS;IAET,MAAM,EACJ,EAAE,EACF,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,kBAAkB,GACnB,GAAG,SAAS,CAAC;IAEd,QACE,SACE,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,MAAM,cAAc,CAAC,QAAQ,CAAC,EACvC,KAAK,EAAE,GAAG,QAAQ,IAAI,yCAAyC;UAE3D,IAAI,KAAK,OAAO;cACZ,sCAAsC;cACtC,wCACN;UACE,SAAS;QACX,EACF,IAAI,EAAE,IAAI,MAAM,EAAE;QAElB,qBACE,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,IAAI,EAAE,QAAQ,KAAK,QAAQ,EAC3B,KAAK,EAAE,GAAG,QAAQ,IAAI,qBAAqB,KACzC,IAAI,IAAI,kCAAkC,IAAI,EAChD;;WAEG,EACH,KAAK,EAAE;gBACL,WAAW,EAAE,kBAAkB,CAAC,OAAO,CAAC;aACzC,IAEA,KAAK,CACQ,CACd,EACJ;AACJ,CAAC,CAAC;AAEK,MAAM,mBAAmB,GAAG,CAAC,KAAmB;IACrD,MAAM,UAAU,GAAG,QAAQ,EAAE,CAAC;IAC9B,OAAO,EAAC,aAAa,oBAAK,KAAK,EAAM,UAAU,EAAI,CAAC;AACtD,CAAC;;AC5FD,MAAM,oBAAoB,GAAG,y5EAAy5E,CAAC;AACv7E,gCAAe,oBAAoB;;ACInC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC;AACtD,MAAM,oBAAoB,GAAG,8BAA8B,CAAC;AAC5D,MAAM,cAAc,GAAG,gCAAgC,CAAC;AACxD,MAAM,mBAAmB,GAAG,qCAAqC,CAAC;MAcrD,eAAe;IAL5B;;;;;;;QAWU,YAAO,GAAW,UAAU,CAAC;;;;QAK7B,wBAAmB,GAAW,CAAC,CAAC;;;;QAKhC,eAAU,GAAa,KAAK,CAAC;;;;QAKZ,aAAQ,GAAyB,OAAO,CAAC;;;;QAK1D,oBAAe,GAAW,EAAE,CAAC;;;;QAK7B,SAAI,GAAY,QAAQ,CAAC;;;;QAKzB,UAAK,GAAiB,SAAS,CAAC;;;;QAKhC,aAAQ,GAAY,IAAI,CAAC;QAExB,mBAAc,GAAW,CAAC,CAAC;;QAG5B,sBAAiB,GAAkB,EAAE,CAAC;;QAGtC,yBAAoB,GAAa,EAAE,CAAC;;QAIpC,iBAAY,GAAW,CAAC,CAAC;;QAEzB,oBAAe,GAAyB,IAAI,CAAC,QAAQ,CAAC;;QAGrD,qBAAgB,GAAY,KAAK,CAAC;;;;;;;;QAcnC,kBAAa,GAAG,CACtB,UAAyB,EACzB,QAAwB;YAExB,MAAM,KAAK,GAAG,OAAO,UAAU,CAAC,EAAE,EAAE,CAAC;YAErC,MAAM,OAAO,IACX,EAAC,mBAAmB,IAClB,EAAE,EAAE,KAAK,EACT,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,EACzC,KAAK,EAAE,UAAU,CAAC,SAAS,EAC3B,MAAM,EAAE,UAAU,CAAC,EAAE,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,cAAc,EAAE,IAAI,CAAC,iBAAiB,EACtC,QAAQ,EAAE,UAAU,CAAC,SAAS,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,CAAC;YAEF,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAC9B,kBAAY,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,SAAS,IACnD,OAAO,CACG,KAEb,OAAO,CACR,CAAC;YACF,QACE,UACE,KAAK,EAAE,2BACL,IAAI,CAAC,UAAU,IAAI,mCACrB,EAAE,IAED,UAAU,EACV,QAAQ,GAAG,cAAK,QAAQ,CAAM,GAAG,IAAI,CACnC,EACL;SACH,CAAC;;;;;;QAOM,kBAAa,GAAG,CAAC,QAAuB;YAC9C,IAAI,OAAO,CAAC;YACZ,IAAI,QAAQ,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpC,MAAM,QAAQ,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBACzE,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;aAClD;iBAAM;gBACL,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;aACxC;YACD,OAAO,OAAO,CAAC;SAChB,CAAC;;QAiGM,sBAAiB,GAAG,CAAC,QAAgB;YAC3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;YAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9C,CAAC;;QA0HM,iBAAY,GAAG;;YACrB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,IAAI,cAAc,EAAE,CAAC,CAAC;YACzE,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CACnD,IAAI,oBAAoB,EAAE,CAC3B,CAAC;YACF,IAAI,WAAW;gBACb,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC,IAAI;oBAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;iBACvC,CAAC,CAAC;SACN,CAAC;KAoEH;IA7WC,uBAAuB;QACrB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;KAC7D;;;;;;IAsEO,mBAAmB;;QACzB,MAAM,WAAW,GAAoB,EAAE,CAAC;QAExC,MAAM,YAAY,GAChB,IAAI,CAAC,mBAAmB,GAAG,CAAC;cACxB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;iBACrB,KAAK,CACJ,CAAC,EACD,CAAC,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAClE;iBACA,IAAI,CAAC,GAAG,CAAC;cACZ,gBAAgB,CAAC;QACvB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAE3D,IAAI,WAAW,EAAE;YACf,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAoB,CAAC;YAChE,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;gBAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAA8B,CAAC,CAAC;gBAC5D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACnD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW;sBAC7B,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;sBAC3C,GAAG,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,CAAC;gBAC5B,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;aACxB,CAAC,CAAC;YAEH,IAAI,WAAW,GAAG,CAAA,MAAA,YAAY,CAAC,CAAC,CAAC,0CAAE,IAAI,KAAI,CAAC,CAAC;YAE7C,YAAY,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;oBACT,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;iBACtE;gBACD,IAAI,CAAC,CAAC,IAAI,GAAG,WAAW,IAAI,CAAC,CAAC,SAAS,GAAG,CAAC,EAAE;oBAC3C,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE;wBACpD,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;qBACzC;yBAAM;wBACL,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;qBACrB;iBACF;qBAAM;oBACL,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC;oBACrB,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;iBACrB;aACF,CAAC,CAAC;SACJ;QACD,OAAO,WAAW,CAAC,OAAO,EAAE,CAAC;KAC9B;;IAGO,iBAAiB;;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CACjD,IAAI,mBAAmB,EAAE,CACO,CAAC;YACnC,QAAQ,IAAI,CAAC,QAAQ;gBACnB,KAAK,OAAO;oBACV,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;oBAC9C,MAAM;gBACR,KAAK,KAAK;oBACR,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;oBACzC,MAAM;aACT;SACF;KACF;;;;;;IAOO,kBAAkB,CAAC,WAAmB;;QAC5C,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC/C,4BAA4B,CACI,CAAC;QAEnC,MAAM,WAAW,GAAa,EAAE,CAAC;QACjC,IAAI,mBAAmB,GAAG,CAAC,CAAC;QAC5B,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CACd,gBAAgB,CAAC,IAAI,cAAc,EAAE,CAAC,0CACtC,OAAO,CAAC,CAAC,IAAS;YAClB,IAAI,IAAI,KAAK,IAAI;gBAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACxD,CAAC,CAAC;QACL,WAAW;aACR,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC;aACrB,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,IAAI,CAAC,CAAC,CAAC,CAAC;QAE9C,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,mBAAmB,KAAK,CAAC;QACjE,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC;KACxD;;IAUO,mBAAmB;QACzB,MAAM,aAAa,GAAa,EAAE,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,OAAO;YACrC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC;SACzD,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,GAAG,aAAa,CAAC;KAC3C;;IAGO,kBAAkB;QACxB,IAAI,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,EAAE,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE;YACzE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;aAAM,IACL,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,EAAE;YACnC,IAAI,CAAC,QAAQ,KAAK,KAAK;YACvB,IAAI,CAAC,eAAe,KAAK,OAAO,EAChC;YACA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;YACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;;IAGO,4BAA4B;QAClC,MAAM,YAAY,GAChB,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC;QACrE,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,EAAE;YACxB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;YACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9C;aAAM,IAAI,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;YACxE,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CACnD,CAAC,EACD,IAAI,CAAC,cAAc,CACpB,CAAC;YACF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK;gBAC7D,IACE,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,CAAC;oBAC7B,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;oBAEhD,OAAO,KAAK,CAAC;gBACf,OAAO,QAAQ,CAAC;aACjB,EAAE,CAAC,CAAC,CAAC;YACN,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;YAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9C;aAAM,IACL,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;YAC7D,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,oBAAoB,CAAC,MAAM,EACxD;YACA,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CACnD,IAAI,CAAC,cAAc,CACpB,CAAC;YAEF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK;gBAC7D,IACE,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,CAAC;oBAC3B,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;oBAClD,IAAI,GAAG,YAAY;oBAEnB,OAAO,KAAK,CAAC;gBACf,OAAO,QAAQ,CAAC;aACjB,EAAE,CAAC,CAAC,CAAC;YACN,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,cAAc,EAAE;gBAC7D,IAAI,CAAC,cAAc,IAAI,WAAW,CAAC;gBACnC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aAC9C;SACF;KACF;;IAGO,iBAAiB;QACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzD,IAAI,OAAO,EAAE;YACX,OAAO,OAAO,CAAC,YAAY,CAAC;SAC7B;QACD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,MAAM,EAAE;YACV,OAAO,MAAM,CAAC,YAAY,CAAC;SAC5B;QACD,OAAO,CAAC,CAAC;KACV;;IAGO,aAAa;;QACnB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC/C,IAAI,iBAAiB,EAAE,CACN,CAAC;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;KAC7D;;IAGO,UAAU,CAAC,IAAS,EAAE,eAAuB;;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;QACtE,IAAI,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,KAAI,YAAY,EAAE;YAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC;YAChC,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,CAAA,EAAE;gBACnD,MAAM,eAAe,GACnB,MAAM,CAAC,UAAU,GAAG,eAAe;sBAC/B,QAAQ;sBACR,IAAI,CAAC,QAAQ,KAAK,OAAO;0BACzB,MAAM;0BACN,OAAO,CAAC;;gBAEd,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC7C,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC7C,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;gBACnD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;aAClD;iBAAM;;gBAEL,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBAC5C,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;aAC7C;SACF;KACF;;IAeD,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC;;IAGD,kBAAkB;QAChB,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,gBAAgB;gBAAE,IAAI,CAAC,4BAA4B,EAAE,CAAC;;gBAC3D,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SACpC,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;;IAGD,MAAM,gBAAgB;QACpB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;;IAGD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC5D,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS,EAAE,IACzD,6EAAsB,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAC,YAAY,IACpE,4DACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,GAAG,iBAAiB,IACzB,QAAQ,KAAK,KAAK,IAAI,gCACxB;cACE,QAAQ,KAAK,OAAO,IAAI,iCAAiC,EAAE,IAE7D,sEACE,KAAK,EAAE,6BAA6B,IAAI,EAAE,EAC1C,OAAO,EAAC,gBAAgB,IAEvB,OAAO,CACM,EAChB,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DACE,KAAK,EAAE,6BACL,UAAU,IAAI,sCAChB;kBACE,IAAI;iBACL,GACD,EACF,2DAAI,KAAK,EAAE,oBAAoB,IAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CACzB,CACE,CACD,CACF,EACN,8DAAa,CACQ,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-table-of-contents/ic-table-of-contents-item.tsx","src/components/ic-table-of-contents/ic-table-of-contents.css?tag=ic-table-of-contents&encapsulation=shadow","src/components/ic-table-of-contents/ic-table-of-contents.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface IcTableOfContentsItemElement {\n id: string;\n className: string;\n label: string;\n target: string;\n variant: string;\n selected: number;\n position: number;\n size?: string;\n truncate?: boolean;\n updateSelected: (position: number) => void;\n setItemLevelOffset: (variant: string) => string;\n}\n\ninterface TOCItemProps {\n id: string;\n className: string;\n variant: string;\n label: string;\n target: string;\n selected: number;\n position: number;\n size?: string;\n truncate?: boolean;\n updateSelected: (position: number) => void;\n}\n\nconst ItemHook = () => {\n // adds offset to the item based on its variant\n // e.g. h2 = 4 + (8(2-2)) = 4px\n // h3 = 4 + (8(3-2)) = 12px\n const setItemLevelOffset = (variant: string): string => {\n return `${4 + 8 * (parseInt(variant.split(\"\")[1]) - 2)}px`;\n };\n\n return { setItemLevelOffset };\n};\n\nconst ItemComponent: FunctionalComponent<IcTableOfContentsItemElement> = (\n itemProps\n) => {\n const {\n id,\n className,\n label,\n target,\n selected,\n truncate,\n variant,\n position,\n size,\n updateSelected,\n setItemLevelOffset,\n } = itemProps;\n\n return (\n <a\n id={id}\n onClick={() => updateSelected(position)}\n class={`${selected && \"table-of-contents-item-content-selected\"}\n ${\n size === \"large\"\n ? `table-of-contents-item-content-large`\n : `table-of-contents-item-content-default`\n }\n ${className}\n `}\n href={`#${target}`}\n >\n <ic-typography\n id={`${id}-label`}\n bold={selected === position}\n class={`${truncate && \"truncated-item-text\"} ${\n size && `table-of-contents-item-content-${size}`\n }\n table-of-contents-item-label\n `}\n style={{\n paddingLeft: setItemLevelOffset(variant),\n }}\n >\n {label}\n </ic-typography>\n </a>\n );\n};\n\nexport const TableOfContentsItem = (props: TOCItemProps) => {\n const innerProps = ItemHook();\n return <ItemComponent {...props} {...innerProps} />;\n};\n",":host {\n display: block;\n border: none;\n max-height: 100vh;\n}\n\n.table-of-contents-section-container {\n display: flex;\n}\n\n.table-of-contents-content {\n top: 0;\n left: 0;\n padding: 0 var(--ic-space-md);\n font: var(--ic-color-text-primary);\n max-height: 100vh;\n z-index: 1;\n}\n\n:host .table-of-contents-position-top {\n min-width: 10rem;\n max-width: 50rem;\n}\n\n:host .table-of-contents-position-side {\n min-width: 8rem;\n max-width: 20rem;\n width: 20rem;\n position: sticky;\n}\n\n.table-of-contents-list {\n display: flex;\n flex-direction: row;\n max-width: inherit;\n}\n\n:host ol {\n list-style: none;\n margin-block-start: 0;\n padding-inline-start: 0;\n}\n\n.table-of-contents-list-items {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.table-of-contents-sidebar {\n background-color: var(--ic-table-of-contents-banner);\n height: 1.75rem;\n min-width: 0.25rem;\n}\n\n.table-of-contents-sidebar-monochrome {\n background-color: var(--ic-table-of-contents-banner-monochrome);\n}\n\n.table-of-contents-item {\n min-height: 1.5rem;\n line-height: 1.5rem;\n}\n\n.table-of-contents-item-content:hover {\n background-color: var(--ic-table-of-contents-hover);\n}\n\n.table-of-contents-item-monochrome-content:hover {\n background-color: var(--ic-table-of-contents-hover-monochrome);\n}\n\n.table-of-contents-item-content {\n border: none;\n max-width: inherit;\n display: flex;\n align-items: center;\n text-decoration: none;\n position: relative;\n color: var(--ic-table-of-contents-text);\n min-height: 1.5rem;\n\n --ic-typography-color: var(--ic-table-of-contents-text);\n}\n\n.table-of-contents-item-content-default {\n padding-top: var(--ic-space-xxxs);\n padding-bottom: var(--ic-space-xxxs);\n}\n\n.table-of-contents-item-content:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n background-color: var(--ic-table-of-contents-hover);\n}\n\n.table-of-contents-item-content:active {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n background-color: var(--ic-table-of-contents-pressed);\n}\n\n.truncated-item-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Large styles /\n\n.table-of-contents-item-content-large {\n padding-top: var(--ic-space-xxs);\n padding-bottom: var(--ic-space-xxs);\n}\n\n.table-of-contents-sidebar.large {\n height: 2.5rem;\n}\n\n.table-of-contents-heading.large {\n padding-bottom: var(--ic-space-xs);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .table-of-contents-sidebar {\n transition: all 0.3s ease;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n / limit sidebar scroll animation /\n .table-of-contents-sidebar {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .table-of-contents-sidebar {\n background-color: Highlight;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { IcPositionTopOrRight, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { TableOfContentsItem } from \"./ic-table-of-contents-item\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\n\nconst TOC_CONTENT_CLASS = \"table-of-contents-content\";\nconst TOC_LIST_ITEMS_CLASS = \"table-of-contents-list-items\";\nconst TOC_ITEM_CLASS = \"table-of-contents-item-content\";\nconst TOC_CONTAINER_CLASS = \"table-of-contents-section-container\";\n\ninterface RankedElement extends Element {\n rank: string;\n textLabel: string;\n treeChildren: RankedElement[];\n trueIndex: number;\n}\n\n@Component({\n tag: \"ic-table-of-contents\",\n styleUrl: \"ic-table-of-contents.css\",\n shadow: true,\n})\nexport class TableOfContents {\n @Element() el: HTMLIcTableOfContentsElement;\n\n /\n Heading text of the table of contents.\n /\n @Prop() heading: string = \"Contents\";\n\n /\n Maximum heading level of child content that will generate an item in the table of contents. E.g. when set to '3', headings of <h4> and <h5> will not appear.\n /\n @Prop() maximumHeadingLevel: number = 3;\n\n /\n If `true`, the table of contents will display as black in the light theme, and white in dark theme.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n Whether the table of contents will appear on the right of or above child content on large viewport widths.\n /\n @Prop({ mutable: true }) position: IcPositionTopOrRight = \"right\";\n\n /\n Vertical offset to page scroll (in percent) when table of contents item is selected, to account for other page components like headers.\n /\n @Prop() setScrollHeight: number = 50;\n\n /\n The size of the table of contents items.\n /\n @Prop() size: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the table of contents item label will be truncated.\n /\n @Prop() truncate: boolean = true;\n\n @State() focusedElement: number = 0;\n\n // heading items\n private referenceElements: HTMLElement[] = [];\n\n // heights of heading items\n private currentTargetHeights: number[] = [];\n\n private resizeObserver: ResizeObserver;\n // header height if present\n private headerHeight: number = 0;\n // holds initial position to allow for responsive changes\n private initialPosition: IcPositionTopOrRight = this.position;\n\n // suppress scroll listener to allow for click selection without scroll listener firing\n @State() suppressListener: boolean = false;\n\n @Watch(\"suppressListener\")\n suppressListenerHandler(): void {\n window.scrollTo(0, window.scrollY - this.headerHeight - 50);\n }\n\n /\n Generate a TOC Item.\n * These items are wrapped in empty tooltips that will be populated by addTooltip()\n * @param tocHeading heading element to refer item information from\n * @param children\n * @returns TocItem ready to be rendered, with nested children if applicable\n /\n private createTocItem = (\n tocHeading: RankedElement,\n children?: HTMLElement[]\n ): HTMLElement => {\n const tocId = `toc_${tocHeading.id}`;\n\n const tocItem = (\n <TableOfContentsItem\n id={tocId}\n className={TOC_ITEM_CLASS}\n variant={tocHeading.tagName.toLowerCase()}\n label={tocHeading.textLabel}\n target={tocHeading.id}\n truncate={this.truncate}\n selected={this.focusedElement}\n updateSelected={this.updateOnSelection}\n position={tocHeading.trueIndex}\n size={this.size}\n />\n );\n\n const wrappedToc = this.truncate ? (\n <ic-tooltip target={tocId} label={tocHeading.innerHTML}>\n {tocItem}\n </ic-tooltip>\n ) : (\n tocItem\n );\n return (\n <li\n class={`table-of-contents-item ${\n this.monochrome && \"table-of-contents-item-monochrome\"\n }`}\n >\n {wrappedToc}\n {children ? <ol>{children}</ol> : null}\n </li>\n );\n };\n\n /\n Render TocItems and recursively render children items if they exist\n * @param listItem\n * @returns HTML Element array to be rendered\n /\n private renderTocTree = (listItem: RankedElement): HTMLElement => {\n let results;\n if (listItem.treeChildren.length > 0) {\n const children = listItem.treeChildren.map((i) => this.renderTocTree(i));\n results = this.createTocItem(listItem, children);\n } else {\n results = this.createTocItem(listItem);\n }\n return results;\n };\n\n /\n Scrape for heading elements on the page content within TOC, down to the maximumHeadingLevel.\n * From this, generate an array of Elements with lower rank headings inserted as treeChildren on top level headings.\n * @returns RankedElement[] array of HTML elements with additional props for rank, trueIndex and treeChildren array\n /\n private generateHeadingTree(): RankedElement[] {\n const resultArray: RankedElement[] = [];\n\n const headingDepth =\n this.maximumHeadingLevel < 5\n ? [\"h2\", \"h3\", \"h4\", \"h5\"]\n .slice(\n 0,\n (this.maximumHeadingLevel < 2 ? 2 : this.maximumHeadingLevel) - 1\n )\n .join(\",\")\n : \"h2, h3, h4, h5\";\n const headingList = this.el.querySelectorAll(headingDepth);\n\n if (headingList) {\n const headingArray = Array.from(headingList) as RankedElement[];\n headingArray.forEach((item, index) => {\n this.referenceElements.push(item as unknown as HTMLElement);\n item.trueIndex = index;\n item.rank = item.tagName.toLowerCase().slice(1, 2);\n item.textLabel = item.textContent\n ? item.textContent.trimStart().split(\"\\n\")[0]\n : `${item.rank}-${index}`;\n item.treeChildren = [];\n });\n\n let currentRank = headingArray[0]?.rank \|\| 2;\n\n headingArray.reverse().forEach((h, i) => {\n if (!h.id) {\n h.setAttribute(\"id\", h.textLabel.replace(/\\s+/g, \"-\").toLowerCase());\n }\n if (h.rank > currentRank && h.trueIndex > 0) {\n if (headingArray[i] && headingArray[i].rank < h.rank) {\n headingArray[i].treeChildren.unshift(h);\n } else {\n resultArray.push(h);\n }\n } else {\n currentRank = h.rank;\n resultArray.push(h);\n }\n });\n }\n return resultArray.reverse();\n }\n\n //container orientation logic\n private containerPosition(): void {\n if (this.position) {\n const container = this.el.shadowRoot?.querySelector(\n `.${TOC_CONTAINER_CLASS}`\n ) as HTMLIcSectionContainerElement;\n switch (this.position) {\n case \"right\":\n container.style.flexDirection = \"row-reverse\";\n break;\n case \"top\":\n container.style.flexDirection = \"column\";\n break;\n }\n }\n }\n\n /\n Move the sidebar to the provided position on the page.\n * Also, resize the sidebar to stretch the height of the selected heading.\n * @param newPosition\n /\n private sidebarTranslation(newPosition: number): void {\n const sidebar = this.el.shadowRoot?.querySelector(\n \".table-of-contents-sidebar\"\n ) as HTMLIcSectionContainerElement;\n\n const itemHeights: number[] = [];\n let previousItemsHeight = 0;\n this.el.shadowRoot\n ?.querySelectorAll(`.${TOC_ITEM_CLASS}`)\n ?.forEach((item: any) => {\n if (item !== null) itemHeights.push(item.offsetHeight);\n });\n itemHeights\n .slice(0, newPosition)\n .forEach((i) => (previousItemsHeight += i));\n\n sidebar.style.transform = `translateY(${previousItemsHeight}px)`;\n sidebar.style.height = `${itemHeights[newPosition]}px`;\n }\n\n // list item clicked logic\n private updateOnSelection = (position: number) => {\n this.suppressListener = true;\n this.focusedElement = position;\n this.sidebarTranslation(this.focusedElement);\n };\n\n // find element heights to be used to determine focused item from scroll position\n private findElementsHeights() {\n const contentBounds: number[] = [];\n this.referenceElements.forEach((element) => {\n contentBounds.push(element.getBoundingClientRect().top);\n });\n this.currentTargetHeights = contentBounds;\n }\n\n //resize window logic\n private handleResizeBounds() {\n if (window.innerWidth < DEVICE_SIZES.XL && this.initialPosition !== \"top\") {\n this.position = \"top\";\n this.containerPosition();\n } else if (\n window.innerWidth > DEVICE_SIZES.XL &&\n this.position === \"top\" &&\n this.initialPosition === \"right\"\n ) {\n this.position = \"right\";\n this.containerPosition();\n }\n this.findElementsHeights();\n this.truncateText();\n }\n\n // scroll logic\n private updateSelectedItemFromScroll() {\n const targetHeight =\n window.scrollY + window.innerHeight (this.setScrollHeight / 100);\n if (window.scrollY === 0) {\n this.focusedElement = 0;\n this.sidebarTranslation(this.focusedElement);\n } else if (targetHeight < this.currentTargetHeights[this.focusedElement]) {\n const previousItems = this.currentTargetHeights.slice(\n 0,\n this.focusedElement\n );\n const closestItem = previousItems.reduce((newValue, curr, index) => {\n if (\n Math.abs(curr - targetHeight) <\n Math.abs(previousItems[newValue] - targetHeight)\n )\n return index;\n return newValue;\n }, 0);\n this.focusedElement = closestItem;\n this.sidebarTranslation(this.focusedElement);\n } else if (\n targetHeight > this.currentTargetHeights[this.focusedElement] &&\n this.focusedElement !== this.currentTargetHeights.length\n ) {\n const relevantItems = this.currentTargetHeights.slice(\n this.focusedElement\n );\n\n const closestItem = relevantItems.reduce((newValue, curr, index) => {\n if (\n Math.abs(curr - targetHeight) <\n Math.abs(relevantItems[newValue] - targetHeight) &&\n curr < targetHeight\n )\n return index;\n return newValue;\n }, 0);\n if (closestItem + this.focusedElement !== this.focusedElement) {\n this.focusedElement += closestItem;\n this.sidebarTranslation(this.focusedElement);\n }\n }\n }\n\n // find header element height\n private findHeaderElement(): number {\n const element = document.querySelector(\"ic-page-header\");\n if (element) {\n return element.clientHeight;\n }\n const header = document.querySelector(\"header\");\n if (header) {\n return header.clientHeight;\n }\n return 0;\n }\n\n // add margin to the list based off the header element height\n private addListMargin(): void {\n const content = this.el.shadowRoot?.querySelector(\n `.${TOC_CONTENT_CLASS}`\n ) as HTMLDivElement;\n content?.style.setProperty(\"top\", `${this.headerHeight}px`);\n }\n\n // add tooltip to the item if it is too wide\n private addTooltip(item: any, widthBreakpoint: number) {\n const itemLabel = item.querySelector(\".table-of-contents-item-label\");\n if (item.parentNode?.tagName == \"IC-TOOLTIP\") {\n const tooltip = item.parentNode;\n if (itemLabel?.offsetWidth < itemLabel?.scrollWidth) {\n const tooltipPosition =\n window.innerWidth < widthBreakpoint\n ? \"bottom\"\n : this.position === \"right\"\n ? \"left\"\n : \"right\";\n //Modify the ic-tooltip wrapped around the list item\n tooltip.setAttribute(\"disable-click\", false);\n tooltip.setAttribute(\"disable-hover\", false);\n tooltip.setAttribute(\"placement\", tooltipPosition);\n tooltip.setAttribute(\"target\", item.id);\n tooltip.setAttribute(\"style\", \"overflow:hidden\");\n } else {\n //disable the tooltip if the item does not need to truncate\n tooltip.setAttribute(\"disable-click\", true);\n tooltip.setAttribute(\"disable-hover\", true);\n }\n }\n }\n\n // truncate text if it goes out of bounds of the container\n private truncateText = () => {\n const links = this.el.shadowRoot?.querySelectorAll(`.${TOC_ITEM_CLASS}`);\n const contentList = this.el.shadowRoot?.querySelector(\n `.${TOC_LIST_ITEMS_CLASS}`\n );\n if (contentList)\n links?.forEach((item) => {\n this.addTooltip(item, DEVICE_SIZES.S);\n });\n };\n\n // initialise resize observer\n componentWillLoad(): void {\n this.resizeObserver = new ResizeObserver(() => this.handleResizeBounds());\n this.resizeObserver.observe(this.el);\n }\n\n // initialise scroll listener\n componentDidRender(): void {\n document.addEventListener(\"scroll\", () => {\n if (!this.suppressListener) this.updateSelectedItemFromScroll();\n else this.suppressListener = false;\n });\n this.containerPosition();\n this.findElementsHeights();\n this.sidebarTranslation(this.focusedElement);\n }\n\n // after component has loaded modify the list based of position, size and surrounding elements\n async componentDidLoad(): Promise<void> {\n this.focusedElement = 0;\n this.headerHeight = this.findHeaderElement();\n this.addListMargin();\n this.truncateText();\n this.findElementsHeights();\n this.sidebarTranslation(this.focusedElement);\n }\n\n // Component is a wrapper for page contents, and will build list from heading items\n render() {\n const { heading, monochrome, position, size, theme } = this;\n return (\n <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n <ic-section-container class={TOC_CONTAINER_CLASS} aligned=\"full-width\">\n <div\n role=\"navigation\"\n class={`${TOC_CONTENT_CLASS} ${\n position === \"top\" && \"table-of-contents-position-top\"\n }\n ${position === \"right\" && \"table-of-contents-position-side\"}`}\n >\n <ic-typography\n class={`table-of-contents-heading ${size}`}\n variant=\"subtitle-large\"\n >\n {heading}\n </ic-typography>\n <div class=\"table-of-contents-list\">\n <div\n class={`table-of-contents-sidebar ${\n monochrome && `table-of-contents-sidebar-monochrome`\n }\n ${size}\n `}\n />\n <ol class={TOC_LIST_ITEMS_CLASS}>\n {this.generateHeadingTree().map((item) =>\n this.renderTocTree(item)\n )}\n </ol>\n </div>\n </div>\n <slot></slot>\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-table-of-contents.js","mappings":"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","names":[],"sources":["src/components/ic-table-of-contents/ic-table-of-contents-item.tsx","src/components/ic-table-of-contents/ic-table-of-contents.css?tag=ic-table-of-contents&encapsulation=shadow","src/components/ic-table-of-contents/ic-table-of-contents.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\nimport \"../../../../web-components/src/components/ic-typography/ic-typography\";\n\ninterface IcTableOfContentsItemElement {\n id: string;\n className: string;\n label: string;\n target: string;\n variant: string;\n selected: number;\n position: number;\n size?: string;\n truncate?: boolean;\n updateSelected: (position: number) => void;\n setItemLevelOffset: (variant: string) => string;\n}\n\ninterface TOCItemProps {\n id: string;\n className: string;\n variant: string;\n label: string;\n target: string;\n selected: number;\n position: number;\n size?: string;\n truncate?: boolean;\n updateSelected: (position: number) => void;\n}\n\nconst ItemHook = () => {\n // adds offset to the item based on its variant\n // e.g. h2 = 4 + (8(2-2)) = 4px\n // h3 = 4 + (8(3-2)) = 12px\n const setItemLevelOffset = (variant: string): string => {\n return `${4 + 8 * (parseInt(variant.split(\"\")[1]) - 2)}px`;\n };\n\n return { setItemLevelOffset };\n};\n\nconst ItemComponent: FunctionalComponent<IcTableOfContentsItemElement> = (\n itemProps\n) => {\n const {\n id,\n className,\n label,\n target,\n selected,\n truncate,\n variant,\n position,\n size,\n updateSelected,\n setItemLevelOffset,\n } = itemProps;\n\n return (\n <a\n id={id}\n onClick={() => updateSelected(position)}\n class={`${selected && \"table-of-contents-item-content-selected\"}\n ${\n size === \"large\"\n ? `table-of-contents-item-content-large`\n : `table-of-contents-item-content-default`\n }\n ${className}\n `}\n href={`#${target}`}\n >\n <ic-typography\n id={`${id}-label`}\n bold={selected === position}\n class={`${truncate && \"truncated-item-text\"} ${\n size && `table-of-contents-item-content-${size}`\n }\n table-of-contents-item-label\n `}\n style={{\n paddingLeft: setItemLevelOffset(variant),\n }}\n >\n {label}\n </ic-typography>\n </a>\n );\n};\n\nexport const TableOfContentsItem = (props: TOCItemProps) => {\n const innerProps = ItemHook();\n return <ItemComponent {...props} {...innerProps} />;\n};\n",":host {\n display: block;\n border: none;\n max-height: 100vh;\n}\n\n.table-of-contents-section-container {\n display: flex;\n}\n\n.table-of-contents-content {\n top: 0;\n left: 0;\n padding: 0 var(--ic-space-md);\n font: var(--ic-color-text-primary);\n max-height: 100vh;\n z-index: 1;\n}\n\n:host .table-of-contents-position-top {\n min-width: 10rem;\n max-width: 50rem;\n}\n\n:host .table-of-contents-position-side {\n min-width: 8rem;\n max-width: 20rem;\n width: 20rem;\n position: sticky;\n}\n\n.table-of-contents-list {\n display: flex;\n flex-direction: row;\n max-width: inherit;\n}\n\n:host ol {\n list-style: none;\n margin-block-start: 0;\n padding-inline-start: 0;\n}\n\n.table-of-contents-list-items {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.table-of-contents-sidebar {\n background-color: var(--ic-table-of-contents-banner);\n height: 1.75rem;\n min-width: 0.25rem;\n}\n\n.table-of-contents-sidebar-monochrome {\n background-color: var(--ic-table-of-contents-banner-monochrome);\n}\n\n.table-of-contents-item {\n min-height: 1.5rem;\n line-height: 1.5rem;\n}\n\n.table-of-contents-item-content:hover {\n background-color: var(--ic-table-of-contents-hover);\n}\n\n.table-of-contents-item-monochrome-content:hover {\n background-color: var(--ic-table-of-contents-hover-monochrome);\n}\n\n.table-of-contents-item-content {\n border: none;\n max-width: inherit;\n display: flex;\n align-items: center;\n text-decoration: none;\n position: relative;\n color: var(--ic-table-of-contents-text);\n min-height: 1.5rem;\n\n --ic-typography-color: var(--ic-table-of-contents-text);\n}\n\n.table-of-contents-item-content-default {\n padding-top: var(--ic-space-xxxs);\n padding-bottom: var(--ic-space-xxxs);\n}\n\n.table-of-contents-item-content:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n background-color: var(--ic-table-of-contents-hover);\n}\n\n.table-of-contents-item-content:active {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n background-color: var(--ic-table-of-contents-pressed);\n}\n\n.truncated-item-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Large styles /\n\n.table-of-contents-item-content-large {\n padding-top: var(--ic-space-xxs);\n padding-bottom: var(--ic-space-xxs);\n}\n\n.table-of-contents-sidebar.large {\n height: 2.5rem;\n}\n\n.table-of-contents-heading.large {\n padding-bottom: var(--ic-space-xs);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .table-of-contents-sidebar {\n transition: all 0.3s ease;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n / limit sidebar scroll animation /\n .table-of-contents-sidebar {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .table-of-contents-sidebar {\n background-color: Highlight;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { IcPositionTopOrRight, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { TableOfContentsItem } from \"./ic-table-of-contents-item\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\n\nimport \"../../../../web-components/src/components/ic-tooltip/ic-tooltip\";\nimport \"../../../../web-components/src/components/ic-section-container/ic-section-container\";\nimport \"../../../../web-components/src/components/ic-typography/ic-typography\";\nimport \"../../../../web-components/src/components/ic-top-navigation/ic-top-navigation\";\nimport \"../../../../web-components/src/components/ic-navigation-item/ic-navigation-item\";\nimport \"../../../../web-components/src/components/ic-page-header/ic-page-header\";\nimport \"../../../../web-components/src/components/ic-button/ic-button\";\nimport \"../../../../web-components/src/components/ic-link/ic-link\";\nimport \"../../../../web-components/src/components/ic-theme/ic-theme\";\n\nconst TOC_CONTENT_CLASS = \"table-of-contents-content\";\nconst TOC_LIST_ITEMS_CLASS = \"table-of-contents-list-items\";\nconst TOC_ITEM_CLASS = \"table-of-contents-item-content\";\nconst TOC_CONTAINER_CLASS = \"table-of-contents-section-container\";\n\ninterface RankedElement extends Element {\n rank: string;\n textLabel: string;\n treeChildren: RankedElement[];\n trueIndex: number;\n}\n\n@Component({\n tag: \"ic-table-of-contents\",\n styleUrl: \"ic-table-of-contents.css\",\n shadow: true,\n})\nexport class TableOfContents {\n @Element() el: HTMLIcTableOfContentsElement;\n\n /\n Heading text of the table of contents.\n /\n @Prop() heading: string = \"Contents\";\n\n /\n Maximum heading level of child content that will generate an item in the table of contents. E.g. when set to '3', headings of <h4> and <h5> will not appear.\n /\n @Prop() maximumHeadingLevel: number = 3;\n\n /\n If `true`, the table of contents will display as black in the light theme, and white in dark theme.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n Whether the table of contents will appear on the right of or above child content on large viewport widths.\n /\n @Prop({ mutable: true }) position: IcPositionTopOrRight = \"right\";\n\n /\n Vertical offset to page scroll (in percent) when table of contents item is selected, to account for other page components like headers.\n /\n @Prop() setScrollHeight: number = 50;\n\n /\n The size of the table of contents items.\n /\n @Prop() size: IcSizes = \"medium\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the table of contents item label will be truncated.\n /\n @Prop() truncate: boolean = true;\n\n @State() focusedElement: number = 0;\n\n // heading items\n private referenceElements: HTMLElement[] = [];\n\n // heights of heading items\n private currentTargetHeights: number[] = [];\n\n private resizeObserver: ResizeObserver;\n // header height if present\n private headerHeight: number = 0;\n // holds initial position to allow for responsive changes\n private initialPosition: IcPositionTopOrRight = this.position;\n\n // suppress scroll listener to allow for click selection without scroll listener firing\n @State() suppressListener: boolean = false;\n\n @Watch(\"suppressListener\")\n suppressListenerHandler(): void {\n window.scrollTo(0, window.scrollY - this.headerHeight - 50);\n }\n\n /\n Generate a TOC Item.\n * These items are wrapped in empty tooltips that will be populated by addTooltip()\n * @param tocHeading heading element to refer item information from\n * @param children\n * @returns TocItem ready to be rendered, with nested children if applicable\n /\n private createTocItem = (\n tocHeading: RankedElement,\n children?: HTMLElement[]\n ): HTMLElement => {\n const tocId = `toc_${tocHeading.id}`;\n\n const tocItem = (\n <TableOfContentsItem\n id={tocId}\n className={TOC_ITEM_CLASS}\n variant={tocHeading.tagName.toLowerCase()}\n label={tocHeading.textLabel}\n target={tocHeading.id}\n truncate={this.truncate}\n selected={this.focusedElement}\n updateSelected={this.updateOnSelection}\n position={tocHeading.trueIndex}\n size={this.size}\n />\n );\n\n const wrappedToc = this.truncate ? (\n <ic-tooltip target={tocId} label={tocHeading.innerHTML}>\n {tocItem}\n </ic-tooltip>\n ) : (\n tocItem\n );\n return (\n <li\n class={`table-of-contents-item ${\n this.monochrome && \"table-of-contents-item-monochrome\"\n }`}\n >\n {wrappedToc}\n {children ? <ol>{children}</ol> : null}\n </li>\n );\n };\n\n /\n Render TocItems and recursively render children items if they exist\n * @param listItem\n * @returns HTML Element array to be rendered\n /\n private renderTocTree = (listItem: RankedElement): HTMLElement => {\n let results;\n if (listItem.treeChildren.length > 0) {\n const children = listItem.treeChildren.map((i) => this.renderTocTree(i));\n results = this.createTocItem(listItem, children);\n } else {\n results = this.createTocItem(listItem);\n }\n return results;\n };\n\n /\n Scrape for heading elements on the page content within TOC, down to the maximumHeadingLevel.\n * From this, generate an array of Elements with lower rank headings inserted as treeChildren on top level headings.\n * @returns RankedElement[] array of HTML elements with additional props for rank, trueIndex and treeChildren array\n /\n private generateHeadingTree(): RankedElement[] {\n const resultArray: RankedElement[] = [];\n\n const headingDepth =\n this.maximumHeadingLevel < 5\n ? [\"h2\", \"h3\", \"h4\", \"h5\"]\n .slice(\n 0,\n (this.maximumHeadingLevel < 2 ? 2 : this.maximumHeadingLevel) - 1\n )\n .join(\",\")\n : \"h2, h3, h4, h5\";\n const headingList = this.el.querySelectorAll(headingDepth);\n\n if (headingList) {\n const headingArray = Array.from(headingList) as RankedElement[];\n headingArray.forEach((item, index) => {\n this.referenceElements.push(item as unknown as HTMLElement);\n item.trueIndex = index;\n item.rank = item.tagName.toLowerCase().slice(1, 2);\n item.textLabel = item.textContent\n ? item.textContent.trimStart().split(\"\\n\")[0]\n : `${item.rank}-${index}`;\n item.treeChildren = [];\n });\n\n let currentRank = headingArray[0]?.rank \|\| 2;\n\n headingArray.reverse().forEach((h, i) => {\n if (!h.id) {\n h.setAttribute(\"id\", h.textLabel.replace(/\\s+/g, \"-\").toLowerCase());\n }\n if (h.rank > currentRank && h.trueIndex > 0) {\n if (headingArray[i] && headingArray[i].rank < h.rank) {\n headingArray[i].treeChildren.unshift(h);\n } else {\n resultArray.push(h);\n }\n } else {\n currentRank = h.rank;\n resultArray.push(h);\n }\n });\n }\n return resultArray.reverse();\n }\n\n //container orientation logic\n private containerPosition(): void {\n if (this.position) {\n const container = this.el.shadowRoot?.querySelector(\n `.${TOC_CONTAINER_CLASS}`\n ) as HTMLIcSectionContainerElement;\n switch (this.position) {\n case \"right\":\n container.style.flexDirection = \"row-reverse\";\n break;\n case \"top\":\n container.style.flexDirection = \"column\";\n break;\n }\n }\n }\n\n /\n Move the sidebar to the provided position on the page.\n * Also, resize the sidebar to stretch the height of the selected heading.\n * @param newPosition\n /\n private sidebarTranslation(newPosition: number): void {\n const sidebar = this.el.shadowRoot?.querySelector(\n \".table-of-contents-sidebar\"\n ) as HTMLIcSectionContainerElement;\n\n const itemHeights: number[] = [];\n let previousItemsHeight = 0;\n this.el.shadowRoot\n ?.querySelectorAll(`.${TOC_ITEM_CLASS}`)\n ?.forEach((item: any) => {\n if (item !== null) itemHeights.push(item.offsetHeight);\n });\n itemHeights\n .slice(0, newPosition)\n .forEach((i) => (previousItemsHeight += i));\n\n sidebar.style.transform = `translateY(${previousItemsHeight}px)`;\n sidebar.style.height = `${itemHeights[newPosition]}px`;\n }\n\n // list item clicked logic\n private updateOnSelection = (position: number) => {\n this.suppressListener = true;\n this.focusedElement = position;\n this.sidebarTranslation(this.focusedElement);\n };\n\n // find element heights to be used to determine focused item from scroll position\n private findElementsHeights() {\n const contentBounds: number[] = [];\n this.referenceElements.forEach((element) => {\n contentBounds.push(element.getBoundingClientRect().top);\n });\n this.currentTargetHeights = contentBounds;\n }\n\n //resize window logic\n private handleResizeBounds() {\n if (window.innerWidth < DEVICE_SIZES.XL && this.initialPosition !== \"top\") {\n this.position = \"top\";\n this.containerPosition();\n } else if (\n window.innerWidth > DEVICE_SIZES.XL &&\n this.position === \"top\" &&\n this.initialPosition === \"right\"\n ) {\n this.position = \"right\";\n this.containerPosition();\n }\n this.findElementsHeights();\n this.truncateText();\n }\n\n // scroll logic\n private updateSelectedItemFromScroll() {\n const targetHeight =\n window.scrollY + window.innerHeight (this.setScrollHeight / 100);\n if (window.scrollY === 0) {\n this.focusedElement = 0;\n this.sidebarTranslation(this.focusedElement);\n } else if (targetHeight < this.currentTargetHeights[this.focusedElement]) {\n const previousItems = this.currentTargetHeights.slice(\n 0,\n this.focusedElement\n );\n const closestItem = previousItems.reduce((newValue, curr, index) => {\n if (\n Math.abs(curr - targetHeight) <\n Math.abs(previousItems[newValue] - targetHeight)\n )\n return index;\n return newValue;\n }, 0);\n this.focusedElement = closestItem;\n this.sidebarTranslation(this.focusedElement);\n } else if (\n targetHeight > this.currentTargetHeights[this.focusedElement] &&\n this.focusedElement !== this.currentTargetHeights.length\n ) {\n const relevantItems = this.currentTargetHeights.slice(\n this.focusedElement\n );\n\n const closestItem = relevantItems.reduce((newValue, curr, index) => {\n if (\n Math.abs(curr - targetHeight) <\n Math.abs(relevantItems[newValue] - targetHeight) &&\n curr < targetHeight\n )\n return index;\n return newValue;\n }, 0);\n if (closestItem + this.focusedElement !== this.focusedElement) {\n this.focusedElement += closestItem;\n this.sidebarTranslation(this.focusedElement);\n }\n }\n }\n\n // find header element height\n private findHeaderElement(): number {\n const element = document.querySelector(\"ic-page-header\");\n if (element) {\n return element.clientHeight;\n }\n const header = document.querySelector(\"header\");\n if (header) {\n return header.clientHeight;\n }\n return 0;\n }\n\n // add margin to the list based off the header element height\n private addListMargin(): void {\n const content = this.el.shadowRoot?.querySelector(\n `.${TOC_CONTENT_CLASS}`\n ) as HTMLDivElement;\n content?.style.setProperty(\"top\", `${this.headerHeight}px`);\n }\n\n // add tooltip to the item if it is too wide\n private addTooltip(item: any, widthBreakpoint: number) {\n const itemLabel = item.querySelector(\".table-of-contents-item-label\");\n if (item.parentNode?.tagName == \"IC-TOOLTIP\") {\n const tooltip = item.parentNode;\n if (itemLabel?.offsetWidth < itemLabel?.scrollWidth) {\n const tooltipPosition =\n window.innerWidth < widthBreakpoint\n ? \"bottom\"\n : this.position === \"right\"\n ? \"left\"\n : \"right\";\n //Modify the ic-tooltip wrapped around the list item\n tooltip.setAttribute(\"disable-click\", false);\n tooltip.setAttribute(\"disable-hover\", false);\n tooltip.setAttribute(\"placement\", tooltipPosition);\n tooltip.setAttribute(\"target\", item.id);\n tooltip.setAttribute(\"style\", \"overflow:hidden\");\n } else {\n //disable the tooltip if the item does not need to truncate\n tooltip.setAttribute(\"disable-click\", true);\n tooltip.setAttribute(\"disable-hover\", true);\n }\n }\n }\n\n // truncate text if it goes out of bounds of the container\n private truncateText = () => {\n const links = this.el.shadowRoot?.querySelectorAll(`.${TOC_ITEM_CLASS}`);\n const contentList = this.el.shadowRoot?.querySelector(\n `.${TOC_LIST_ITEMS_CLASS}`\n );\n if (contentList)\n links?.forEach((item) => {\n this.addTooltip(item, DEVICE_SIZES.S);\n });\n };\n\n // initialise resize observer\n componentWillLoad(): void {\n this.resizeObserver = new ResizeObserver(() => this.handleResizeBounds());\n this.resizeObserver.observe(this.el);\n }\n\n // initialise scroll listener\n componentDidRender(): void {\n document.addEventListener(\"scroll\", () => {\n if (!this.suppressListener) this.updateSelectedItemFromScroll();\n else this.suppressListener = false;\n });\n this.containerPosition();\n this.findElementsHeights();\n this.sidebarTranslation(this.focusedElement);\n }\n\n // after component has loaded modify the list based of position, size and surrounding elements\n async componentDidLoad(): Promise<void> {\n this.focusedElement = 0;\n this.headerHeight = this.findHeaderElement();\n this.addListMargin();\n this.truncateText();\n this.findElementsHeights();\n this.sidebarTranslation(this.focusedElement);\n }\n\n // Component is a wrapper for page contents, and will build list from heading items\n render() {\n const { heading, monochrome, position, size, theme } = this;\n return (\n <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n <ic-section-container class={TOC_CONTAINER_CLASS} aligned=\"full-width\">\n <div\n role=\"navigation\"\n class={`${TOC_CONTENT_CLASS} ${\n position === \"top\" && \"table-of-contents-position-top\"\n }\n ${position === \"right\" && \"table-of-contents-position-side\"}`}\n >\n <ic-typography\n class={`table-of-contents-heading ${size}`}\n variant=\"subtitle-large\"\n >\n {heading}\n </ic-typography>\n <div class=\"table-of-contents-list\">\n <div\n class={`table-of-contents-sidebar ${\n monochrome && `table-of-contents-sidebar-monochrome`\n }\n ${size}\n `}\n />\n <ol class={TOC_LIST_ITEMS_CLASS}>\n {this.generateHeadingTree().map((item) =>\n this.renderTocTree(item)\n )}\n </ol>\n </div>\n </div>\n <slot></slot>\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-text-field.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface IcTextField extends Components.IcTextField, HTMLElement {}
+export const IcTextField: {
+    prototype: IcTextField;
+    new (): IcTextField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-text-field2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { Q as isEmptyString, M as checkSlotInChildMutations, r as removeDisabledFalse, R as debounceEvent, u as removeFormResetListener, b as inheritAttributes, t as addFormResetListener, o as onComponentRequiredPropUndefined, S as IGNORED_KEYBOARD_CHARACTERS, B as IcInformationStatus, x as getInputDescribedByText, v as renderHiddenInput, w as removeHiddenInput, i as isSlotUsed, I as IC_INHERITED_ARIA } from './helpers.js';
+import { G as isEmptyString, A as checkSlotInChildMutations, r as removeDisabledFalse, H as debounceEvent, n as removeFormResetListener, d as inheritAttributes, m as addFormResetListener, o as onComponentRequiredPropUndefined, J as IGNORED_KEYBOARD_CHARACTERS, v as IcInformationStatus, D as getInputDescribedByText, p as renderHiddenInput, q as removeHiddenInput, k as isSlotUsed, I as IC_INHERITED_ARIA } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$4 } from './ic-input-container2.js';
 import { d as defineCustomElement$3 } from './ic-input-label2.js';
@@ -399,14 +399,14 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '4a38a5d8bd42f37b2ab1e9f3af485695b6185a8a', class: {
+        return (h(Host, { key: '11ef7517682f8b0bfc112469ea94168623c0620e', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: 'a7da6f94bac334322b00b223cfb3462d026fbba1', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '97a5cc41a79cfc56c3e8e309154cbcc015bbadad', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'd9994cb1bb7218712bbed976057a3ca8d9ad3c2b', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '0d3a988b563b2f9f2033b52a75f4fd5e27056ba8', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '319fa22903ab0b2c2315377abb9f9e7bad15f221', class: {
+            } }, h("ic-input-container", { key: 'c398e1ae5d7662592e1a6f658ff415a81364d8be', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'ed8bd39780d844c25db37a306c9e2aac4b1e37bb', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '86fdfd1ee03730dd14c2f8c37fa1c4fd328f4558', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'aea5bcbdc9608b16a44ce431403bbb449b375c91', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'e5337300214b72fffa76d4473dadcbdfa85e88d1', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '1224a807133d300df0a6070c998260ece29e8c80', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: '166e01f71f3a45c086d625a78f5730b3eb9ab08a', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
@@ -414,12 +414,12 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: 'e50c8194546e08898e7ef0ed4dd940a881ffd5c4', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'e2ba7a0f555593f767ff1c93c4c58b71967da1a7', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '7b22fe423951f0f38c5419ff3c35e9f32a72735d', name: "menu" }), h("ic-input-validation", { key: '85aec8ebd4633fa36585e3253e1cc8107c374495', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '23ccdbcab169c456f9345d1b180dc6c65c574caf', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '2be2b533c6e58382dbcf1895d7ae206da8e33344', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'f3f82679a12572255ef6009abdf4a8b938b691fe', name: "menu" }), h("ic-input-validation", { key: 'f92b2306b96ef39a857359d25d85313fcba15bdb', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: 'f857927758c96f735592e7af679dba91c333fbf1', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'eed01e87433155c8311c5ef958145d484c65264a', variant: "caption", class: "char-count-text" }, h("span", { key: '1752a0a453ed7dd28b909029f847330ffbff406c', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'cd708a611a6133a7cf3b892d8f83cbf592791907', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'ebe5600dece8662d9966667308e79872793b098c', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: '551d93912ece5bda01ebfe9cddc0d350791afa43', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '9bcb57101c5efa05fbc88a2adf30174e1e0f485e', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '1bd76ec4e97b4b959a01cb77bb7f6239ae9fa04c', variant: "caption", class: "char-count-text" }, h("span", { key: '4fd60bd9a377516cc4803e241aae355fa0e6f305', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '637b8a4280010c8076179f931763a655313f23d5', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'cf2fe8e9783048e97c52f6f6cdec6b1335858e7f', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     get el() { return this; }
     static get watchers() { return {