npm - @ukic/web-components - Versions diffs - 3.17.0 → 3.19.0 - Mend

@ukic/web-components 3.17.0 → 3.19.0

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

Files changed (398) hide show

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

@@ -33,12 +33,12 @@ export class StatusTag {
     }
     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: '323e76e08750e7459a431c762e74c5490276d5fe', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'e71a302621590a1e5f5eb94a4e823f614e72d604', 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: '842f8be2e88546b594f8af03d4cbab5bbeaaae03', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'ae96c68b504376e9366cd7f712b3136b68677d07' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,6 +17,7 @@
 }
 .heading,
+::slotted([slot="heading"]),
 .subheading,
 .step-status,
 .next-step {
@@ -79,11 +80,13 @@
   width: 14.25rem;
 }
-:host(.ic-step-compact) .heading {
+:host(.ic-step-compact) .heading,
+:host(.ic-step-compact) ::slotted([slot="heading"]) {
   color: var(--ic-stepper-compact-step-title);
 }
-:host(.ic-step-compact) .disabled .heading {
+:host(.ic-step-compact) .disabled .heading,
+:host(.ic-step-compact) .disabled ::slotted([slot="heading"]) {
   color: var(--ic-stepper-compact-step-title-disabled);
 }
@@ -165,24 +168,29 @@
 }
 :host(.ic-step-default) .heading,
+:host(.ic-step-default) ::slotted([slot="heading"]),
 .subheading {
   width: -moz-fit-content;
   width: fit-content;
 }
-.heading {
+.heading,
+::slotted([slot="heading"]) {
   color: var(--ic-step-title);
 }
-.current .heading {
+.current .heading,
+.current ::slotted([slot="heading"]) {
   color: var(--ic-step-title-current);
 }
-.completed .heading {
+.completed .heading,
+.completed ::slotted([slot="heading"]) {
   color: var(--ic-step-title-success);
 }
-.disabled .heading {
+.disabled .heading,
+.disabled ::slotted([slot="heading"]) {
   color: var(--ic-step-title-disabled);
 }
@@ -317,7 +325,8 @@
   .disabled,
   .disabled .heading-area,
   .disabled .step-icon-inner,
-  .disabled .heading {
+  .disabled .heading,
+  .disabled ::slotted([slot="heading"]) {
     color: GrayText;
   }

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

@@ -1,7 +1,10 @@
 import { Host, h } from "@stencil/core";
 import checkIcon from "../../assets/check-icon.svg";
 import warningIcon from "../../assets/warning-icon-outline.svg";
-import { isPropDefined } from "../../utils/helpers";
+import { isPropDefined, isSlotUsed } from "../../utils/helpers";
+/**
+ * @slot heading - Content will be rendered in place of the heading prop.
+ */
 export class Step {
     constructor() {
         /**
@@ -44,6 +47,8 @@ export class Step {
         const { compactStepStyling, current, heading, icI18n, lastStep, lastStepNum, nextStepHeading, progress, status, stepNum, subheading, theme, type, variant, } = this;
         // ARIA LABEL
         let ariaLabel = "";
+        const hasHeading = (isPropDefined(heading) && heading !== "") ||
+            isSlotUsed(this.el, "heading");
         if (type === "completed") {
             ariaLabel = `. ${icI18n.completed}`;
         }
@@ -72,27 +77,27 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (type === "completed" || compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '864d4561a571389ff3128b00ffb529010930b4b5', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: 'f00988dead6559d428d05f7cad2dc3874c083b81', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (type === "disabled" || compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: '7bf14abf049e8e5d3fc870c574393adb49e68b8c', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '3bdca1321df04ccd4cdc164b75d73d317df4bbd9', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '4f3ac82fbcc83d16b72393415b08bb383b3844e1', class: {
+        const compactStep = (h("div", { key: '3f25b7b66363726dd2b5135f3429a344709866e9', class: {
                 ["step"]: true,
                 ["current"]: !!current,
                 [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                 ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: '53ebcdba2a35459adeb1ac198e7a48620eb5ed8f', class: {
+            } }, h("ic-loading-indicator", { key: '75766eec3f516860b6b8be028bb6a0e4854300d8', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": type === "disabled" || compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '1206ec1c72eafac85fa94f936db215fd6d66a9da', class: "heading-area" }, h("ic-typography", { key: 'ecd033d92e805fc2538f92253f43a667594d30da', variant: "h4", class: "heading" }, heading), h("div", { key: '98f5a4369ed8e41271c9e5121d6ef4e68191e766', class: "info-line" }, h("ic-typography", { key: '5b58bcbe7124d039d41e6cddd1c737a82e689f46', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '86b332b0596baaa8f14e6232ca4742fca349b401', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '4140264d827f0120fcd7525dc4f1942370c70e30', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: '6c5b55bb5800586076bc7111905f2caf0e6236d3', class: "info-line" }, h("ic-typography", { key: 'aeb427b1db840cab7acb4558e3037e886b6ed148', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '7ea25ca9263310b55e827f1f481c907a80143333', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
             type === "completed" ||
             type === "disabled" ||
             (this.variant === "compact" &&
                 !!compactStepStyling &&
                 compactStepStyling !== "active") ||
-            !!status) && (h("div", { key: 'e7348cf5cb486de2bd35047429b8baedb64e7945', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '1e636d26071c9274b29b3e9fbd5edcff666bf650', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            !!status) && (h("div", { key: 'fa72ca837d1540891cffe3d8f8b36e7a1dac9fd7', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '9b3ca7eb5950f1133f28dcd0b7ef003765c90493', variant: "caption" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : type === "disabled" ||
                 (variant === "compact" &&
@@ -105,26 +110,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (type !== "completed") {
-            icon = (h("ic-typography", { key: '11944edb6340175b2619cd7bf1a92a077c2581e7', variant: "subtitle-small" }, h("span", { key: '5636bdbab2cbae08c7122adae7376b380d2c0e6b', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '6fb92b96a4ba63a95148e64e1f2800d10b19c08a', variant: "subtitle-small" }, h("span", { key: '3a249db8c6dc0fb5d2f8f02c820845894888da46', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: 'b479680a69976f4a1fecff4944fe49d6ad7a1803', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'f147fc626a8a1ee01f7a00e642353f0393f2a9bf', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'f50a3bcd503d21345a156c7cede8385b38744325', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '505fc3d70507b3d7156c7d646308af137de76eac', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = type === "current" && (h("div", { key: '38562e1d3953a8e3fad8a666be017c6eb8b023d8', class: "step-connect-inner" }));
-        const finalStep = !lastStep && (h("div", { key: '92355de2de8a20e3efd244e90181ed4728908396', class: {
+        const partialBar = type === "current" && (h("div", { key: 'fc7efb490b654258f332bfa8baefff01e23a16b1', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: '948d526e77439d94ead70c9aeef4bd65f54ffe0e', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { key: '26938dd799f54d8440d45c9d9615a4831f7cab98', class: {
+        const defaultStep = (h("div", { key: '13d1b412c26e150291a7695556856edffff72c0b', class: {
                 ["step"]: true,
                 [`${type}`]: true,
-            } }, h("div", { key: '34aca5fbe4025940b5226476d1da17725831a7db', class: "step-top" }, h("div", { key: 'e59c7c95a9b32b9e897a6dc6d37000cd45294caf', class: "step-icon" }, icon), finalStep), (heading || subheading || status) && (h("div", { key: '568405e10345dfe382fd78d096391cc870914f6a', class: "heading-area" }, heading && (h("ic-typography", { key: '6dcac8ec5550fe94c80e75c65ecec33dee7b4157', variant: "subtitle-large", class: "heading" }, heading)), heading && (subheading || status) && (h("ic-typography", { key: 'efe9c1f647e25a84eded6c390ff1b487e0ea5a0d', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            } }, h("div", { key: '6b3605667f7ddfd1ebc7e3f36851c1fa81a543c4', class: "step-top" }, h("div", { key: '206915065c8674a4fb8b9a33854ea75a05270421', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: 'd05f3e280508507b3a5fbe05c53d63e867cc3500', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (h("ic-typography", { key: 'c8b0adb02467cf89be3577b44a0e70ca12136da9', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : stepStatus))))));
-        return (h(Host, { key: '359b602ab02607c5ec02673283f99172c3b4a924', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
+        return (h(Host, { key: '41bf288a82e0167529d35661adda1ec1ad1dcb71', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                 [`ic-step-${variant}`]: true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAOhE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAQpD,MAAM,OAAO,IAAI;IALjB;QAaE;;WAEG;QACsB,YAAO,GAAa,KAAK,CAAC;QAEnD;;WAEG;QACK,WAAM,GAAe;YAC3B,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;YACd,EAAE,EAAE,IAAI;YACR,QAAQ,EAAE,WAAW;YACrB,SAAS,EAAE,WAAW;YACtB,WAAW,EAAE,cAAc;YAC3B,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,UAAU;SACrB,CAAC;QA0CF;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;QAOxC;;WAEG;QACK,SAAI,GAAiB,QAAQ,CAAC;KA4OvC;IAzOC,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC1D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,EACJ,kBAAkB,EAClB,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,WAAW,EACX,eAAe,EACf,QAAQ,EACR,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,IAAI,EACJ,OAAO,GACR,GAAG,IAAI,CAAC;QAET,aAAa;QACb,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;YACzB,SAAS,GAAG,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC;QACtC,CAAC;aAAM,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YAC/B,SAAS,GAAG,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC;QACxC,CAAC;aAAM,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,SAAS,GAAG,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;QACrC,CAAC;aAAM,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,SAAS,GAAG,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;QACrC,CAAC;QAED,cAAc;QACd,IAAI,UAAU,CAAC;QACf,IAAI,MAAM,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;YACpC,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACzD,CAAC;QAED,YAAY;QACZ,IAAI,QAAQ,CAAC;QACb,IAAI,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU,EAAE,CAAC;YAC7D,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;QAChC,CAAC;aAAM,IAAI,kBAAkB,KAAK,WAAW,EAAE,CAAC;YAC9C,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;QAC9B,CAAC;QAED,+BAA+B;QAC/B,IAAI,UAAU,CAAC;QACf,IAAI,IAAI,KAAK,WAAW,IAAI,kBAAkB,KAAK,WAAW,EAAE,CAAC;YAC/D,UAAU,GAAG,CACX,6DACE,KAAK,EAAC,sBAAsB,iBAChB,MAAM,EAClB,SAAS,EAAE,SAAS,GACd,CACT,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU,EAAE,CAAC;YACpE,UAAU,GAAG,CACX,6DACE,KAAK,EAAC,wBAAwB,iBAClB,MAAM,EAClB,SAAS,EAAE,WAAW,GAChB,CACT,CAAC;QACJ,CAAC;QAED,yBAAyB;QACzB,MAAM,WAAW,GAAG,CAClB,4DACE,KAAK,EAAE;gBACL,CAAC,MAAM,CAAC,EAAE,IAAI;gBACd,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;gBACtB,CAAC,gBAAgB,kBAAkB,EAAE,CAAC,EAAE,CAAC,CAAC,kBAAkB;gBAC5D,CAAC,UAAU,CAAC,EACV,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU;aAC3D;YAED,6EACE,KAAK,EAAE;oBACL,iCAAiC,EAAE,IAAI;oBACvC,cAAc,EACZ,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU;iBAC3D,iBACW,MAAM,EAClB,IAAI,EAAC,OAAO,iBACC,OAAO,EACpB,QAAQ,EAAE,QAAQ,GACI;YACxB,4DAAK,KAAK,EAAC,cAAc;gBACvB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,IACxC,OAAO,CACM;gBAChB,4DAAK,KAAK,EAAC,WAAW;oBACpB,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU;wBAC9C,GAAG,OAAO,IAAI,MAAM,CAAC,EAAE,IAAI,WAAW,EAAE;wBACzC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,MAAM,CAAC,KAAK,EAAE,CAAQ,CAC3C;oBACf,CAAC,IAAI,CAAC,UAAU;wBACf,IAAI,KAAK,WAAW;wBACpB,IAAI,KAAK,UAAU;wBACnB,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;4BACzB,CAAC,CAAC,kBAAkB;4BACpB,kBAAkB,KAAK,QAAQ,CAAC;wBAClC,CAAC,CAAC,MAAM,CAAC,IAAI,CACb,4DAAK,KAAK,EAAC,aAAa;wBACrB,UAAU,KAAK,SAAS,IAAI,UAAU;wBACtC,CAAC,UAAU,IAAI,QAAQ,CAAC,IAAI,CAC3B,sEAAe,OAAO,EAAC,SAAS,IAC7B,UAAU,KAAK,IAAI,IAAI,aAAa,CAAC,UAAU,CAAC;4BAC/C,CAAC,CAAC,UAAU;4BACZ,CAAC,CAAC,IAAI,KAAK,UAAU;gCACnB,CAAC,OAAO,KAAK,SAAS;oCACpB,kBAAkB,KAAK,UAAU,CAAC;gCACpC,IAAI,KAAK,WAAW;gCACpB,CAAC,OAAO,KAAK,SAAS;oCACpB,kBAAkB,KAAK,WAAW,CAAC;gCACvC,CAAC,CAAC,QAAQ;gCACV,CAAC,CAAC,MAAM,IAAI,UAAU,CACV,CACjB,CACG,CACP,CACG;gBACL,QAAQ,CAAC,CAAC,CAAC,CACV,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,IACtD,MAAM,CAAC,QAAQ,CACF,CACjB,CAAC,CAAC,CAAC,CACF,aAAa,CAAC,eAAe,CAAC,IAAI,CAChC,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW;oBACtD,MAAM,CAAC,IAAI;oBACZ,YAAM,KAAK,EAAC,iBAAiB;;wBAAG,MAAM,CAAC,IAAI,CAAQ;;oBAAE,GAAG;oBACvD,IAAI,CAAC,eAAe,CACP,CACjB,CACF,CACG,CACF,CACP,CAAC;QAEF,wBAAwB;QACxB,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;YACzB,IAAI,GAAG,CACL,sEAAe,OAAO,EAAC,gBAAgB;gBACrC,6DAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,CACL,4DAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;gBAC7C,6DAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;QACJ,CAAC;QAED,gCAAgC;QAChC,MAAM,UAAU,GAAG,IAAI,KAAK,SAAS,IAAI,CACvC,4DAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,QAAQ,IAAI,CAC7B,4DACE,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,EAAE,IAAI;gBACtB,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CACxB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;oBAC/D,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CACrE;aACF,IAEA,UAAU,CACP,CACP,CAAC;QAEF,yBAAyB;QACzB,MAAM,WAAW,GAAG,CAClB,4DACE,KAAK,EAAE;gBACL,CAAC,MAAM,CAAC,EAAE,IAAI;gBACd,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;aAClB;YAED,4DAAK,KAAK,EAAC,UAAU;gBACnB,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO;gBAClC,SAAS,CACN;YACL,CAAC,OAAO,IAAI,UAAU,IAAI,MAAM,CAAC,IAAI,CACpC,4DAAK,KAAK,EAAC,cAAc;gBACtB,OAAO,IAAI,CACV,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,IACpD,OAAO,CACM,CACjB;gBACA,OAAO,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,IAAI,CACpC,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IAChD,UAAU,KAAK,IAAI,IAAI,aAAa,CAAC,UAAU,CAAC;oBAC/C,CAAC,CAAC,UAAU;oBACZ,CAAC,CAAC,UAAU,CACA,CACjB,CACG,CACP,CACG,CACP,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,gBACH,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,GAAG,SAAS,EAAE,kBACrC,CAAC,OAAO,IAAI,IAAI,KAAK,SAAS,CAAC,IAAI,MAAM,EACvD,KAAK,EAAE;gBACL,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CACxB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;oBAC/D,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CACrE;gBACD,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,IAAI;gBAC5B,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAChD,IAEA,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAC7C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /*\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n Words within the component that can be replaced to translate the component into a different language\n /\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepHeading?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() status?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() subheading?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() heading?: string;\n\n /\n @internal 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 @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" \|\| compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n </ic-typography>\n {(this.subheading \|\|\n type === \"completed\" \|\|\n type === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") \|\|\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") \|\|\n type === \"completed\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading \|\| subheading \|\| status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading \|\| status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current \|\| type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot heading - Content will be rendered in place of the heading prop.\n /\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n Words within the component that can be replaced to translate the component into a different language\n /\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepHeading?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() status?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() subheading?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() heading?: string;\n\n /\n @internal 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 @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n const hasHeading =\n (isPropDefined(heading) && heading !== \"\") \|\|\n isSlotUsed(this.el, \"heading\");\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" \|\| compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\"></slot>\n ) : (\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n </ic-typography>\n {(this.subheading \|\|\n type === \"completed\" \|\|\n type === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") \|\|\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") \|\|\n type === \"completed\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(hasHeading \|\| subheading \|\| status) && (\n <div class=\"heading-area\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\"></slot>\n ) : (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {hasHeading && (subheading \|\| status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current \|\| type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"]}

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

@@ -47,10 +47,29 @@ export class Stepper {
          * The variant of the stepper.
          */
         this.variant = "default";
+        this.stepHeading = (step, includeAutogeneratedTitles = false) => {
+            var _a, _b, _c, _d;
+            if (step.hasAttribute("heading") && step.getAttribute("heading") !== "") {
+                return step.getAttribute("heading") || undefined;
+            }
+            const headingSlot = (_a = step.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="heading"]');
+            const assignedNodes = ((_b = headingSlot === null || headingSlot === void 0 ? void 0 : headingSlot.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(headingSlot)) || [];
+            for (const node of assignedNodes) {
+                const text = node.nodeType === Node.TEXT_NODE
+                    ? (_c = node.textContent) === null || _c === void 0 ? void 0 : _c.trim()
+                    : (_d = node.innerText) === null || _d === void 0 ? void 0 : _d.trim();
+                if (text)
+                    return text;
+            }
+            if (includeAutogeneratedTitles && step.heading) {
+                return step.heading;
+            }
+            return undefined;
+        };
         // Get all steps currently within this stepper
         this.getChildren = () => {
             this.steps = Array.from(this.el.querySelectorAll("ic-step"));
-            this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[heading]"));
+            this.stepsWithStepTitles = this.steps.filter((step) => !!this.stepHeading(step, false));
         };
         // Inform the user that stepTitles are required on all steps in a compact stepper
         this.checkStepTitles = () => {
@@ -132,7 +151,8 @@ export class Stepper {
                         step.classList.add("hide");
                     }
                     if (!step.lastStep) {
-                        step.nextStepHeading = this.steps[index + 1].heading;
+                        const nextStep = this.steps[index + 1];
+                        step.nextStepHeading = this.stepHeading(nextStep, true);
                         step.progress = (step.stepNum / this.steps.length) * 100;
                     }
                     else if (step.lastStep && this.stepTypes[index] !== "completed") {
@@ -259,11 +279,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: '8905befe9177785369ef0d277f7f21d823cd727b', class: {
+        return (h(Host, { key: 'e2ac3f9e87779cfd5582ab705cf7a4d1424f20b7', class: {
                 [`ic-stepper-${this.variant}`]: true,
                 ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("ul", { key: '19d67dcea521d17802c2d98946ce24254ef4969a', class: "step-item-list" }, h("slot", { key: 'fe75a601beeed1e3dbfc9df495909af26ad11523' }))));
+            } }, h("ul", { key: '86ee53977017f83030114eaf2e78621d7f4c7f80', class: "step-item-list" }, h("slot", { key: 'a296d57cb512552f97d35cd7a65ab3db644a6c62' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver \| null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number \| undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /*\n The alignment of the default stepper within its container.\n /\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /\n The length of the connector between each step in pixels. Minimum length is 100px.\n /\n @Prop() connectorWidth?: number = 100;\n\n /\n If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n /\n @Prop() hideStepInfo?: boolean = false;\n\n /\n Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n /\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\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 @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /\n The variant of the stepper.\n /\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = Array.from(\n this.el.querySelectorAll(\"ic-step[heading]\")\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true \|\| step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n step.nextStepHeading = this.steps[index + 1].heading;\n step.progress = (step.stepNum / this.steps.length) 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver \| null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number \| undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /*\n The alignment of the default stepper within its container.\n /\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /\n The length of the connector between each step in pixels. Minimum length is 100px.\n /\n @Prop() connectorWidth?: number = 100;\n\n /\n If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n /\n @Prop() hideStepInfo?: boolean = false;\n\n /\n Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n /\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\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 @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /\n The variant of the stepper.\n /\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private stepHeading = (\n step: HTMLIcStepElement,\n includeAutogeneratedTitles: boolean = false\n ): string \| undefined => {\n if (step.hasAttribute(\"heading\") && step.getAttribute(\"heading\") !== \"\") {\n return step.getAttribute(\"heading\") \|\| undefined;\n }\n\n const headingSlot = step.shadowRoot?.querySelector(\n 'slot[name=\"heading\"]'\n ) as HTMLSlotElement \| null;\n const assignedNodes = headingSlot?.assignedNodes?.() \|\| [];\n for (const node of assignedNodes) {\n const text =\n node.nodeType === Node.TEXT_NODE\n ? node.textContent?.trim()\n : (node as HTMLElement).innerText?.trim();\n if (text) return text;\n }\n\n if (includeAutogeneratedTitles && step.heading) {\n return step.heading;\n }\n return undefined;\n };\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = this.steps.filter(\n (step) => !!this.stepHeading(step, false)\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true \|\| step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n const nextStep = this.steps[index + 1];\n step.nextStepHeading = this.stepHeading(nextStep, true);\n step.progress = (step.stepNum / this.steps.length) 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-stepper/ic-stepper.stories.js CHANGED Viewed

@@ -338,6 +338,18 @@ export const Internationalisation = {
   name: "Internationalisation",
 };
+export const SlottedHeading = {
+  render: () =>
+    html`<ic-stepper>
+      <ic-step type="completed"><span slot="heading">Create</span></ic-step>
+      <ic-step type="current"><span slot="heading">Read</span></ic-step>
+      <ic-step type="active"><span slot="heading">Update</span></ic-step>
+      <ic-step type="disabled"><span slot="heading">Delete</span></ic-step>
+    </ic-stepper>`,
+  name: "Slotted heading",
+};
 export const Playground = {
   render: (args) =>
     html`<ic-stepper theme=${args.theme}>

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

@@ -91,16 +91,16 @@ export class Switch {
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
         const isSmall = size === "small";
         renderHiddenInput(this.el, checkedState ? value : "", name, disabled);
-        return (h(Host, { key: '83cfaa808706cfbd930349b19264611eeb9eb7a1', class: {
+        return (h(Host, { key: '4d5830cca94b2dd699ad0f906dc1095f267675d4', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: '3952a6e8d7bd6778f6e72bd714f3413fb32ce43c', class: {
+            } }, h("label", { key: '61c6e73d0435b8911566ac628313f6a44c67d297', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'da48a174f9dd1a8ec052f102424cecfe39b629f1', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'e8be8d74b3183a3b4a8ab53e7f38e0eda8d8b4e0', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } }, h("slot", { key: 'f80f2d947f1ef1c448152a54878e00ca8ad93733', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: '3c56f4c0fb5e15be23d11931b95d9abfe6dc56f0', class: "ic-switch-line-break" }), h("input", { key: '2f23a8d5ef4aed9348bae49cf1d65d27d6af7f50', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '1799cf9b15ba7f41ecdd5846c874313270b005d7', class: "ic-switch-toggle" }, h("svg", { key: 'dfdd27f600056edb4f0c21dc52c9c5b316a58749', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: 'e1fc26ba3d5ffe9901f5ded149c6783e5e897951', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: 'dbe0ba812d70c2ced199a5fbdfd2637a67477f3c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '41fab06f91865db47d4c82b44eb913cb566a965c', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: '26b7e9ad4067d5571b676872dd506371c03766b2', name: "right-adornment" }))));
+            } }, h("slot", { key: 'c26f98190a6dac0fcbcac0e76d512de045ed728e', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: '138bab016cba136f3f5bf5f8ed04fef823dfa7c1', class: "ic-switch-line-break" }), h("input", { key: 'e1ee536f3683fbf23a874fa3b33099107df38636', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '1148ac346b57bac965f562511a4d05e480bddd6c', class: "ic-switch-toggle" }, h("svg", { key: '78508c5b97bf67b0e9e3b23911bb53aaeeb7271c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: 'c32e2f0c7d95be778ba673085d95b03275e17d42', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: 'ba5c613c591a7d1b7d9c11682b3db371449bf9e6', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'c15318f31f8b84ac4d38488ab90808ba8fd6886c', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: '9ea7ffdc5e061674be43b1f5a06e262acc7ebd3a', name: "right-adornment" }))));
     }
     static get is() { return "ic-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-tab-context/ic-tab-context.js CHANGED Viewed

@@ -228,7 +228,7 @@ export class TabContext {
         }
     }
     render() {
-        return h("slot", { key: '10bbbe55408243a3a5665b6f079a2b88912abb61' });
+        return h("slot", { key: 'a64045ed32f186e6117f25642dafab8efe17dd13' });
     }
     static get is() { return "ic-tab-context"; }
     static get properties() {

package/dist/collection/components/ic-tab-group/ic-tab-group.js CHANGED Viewed

@@ -16,11 +16,11 @@ export class TabGroup {
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: '6d47bc467418bb3448bc201c2903c1729d0b218c', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: '907693650fa274e54826ca116016e8bea75aa29c', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: '4cd7ad023ed041945dd0ea53ea30ef471c4dc87a', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '7b755ee071f940a648289a38cf792a86b19ee0f5', class: "tabs-container" }, h("slot", { key: 'c28ac4504330b33bc6809e8cc4bb8646eb0545e9' })))));
+            } }, h("ic-horizontal-scroll", { key: '94a5fd18b222a07d6119c6bc291522b12aaf91f3', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'a81bf05bd2e9d2d079a9b05899da06c6a27cb231', class: "tabs-container" }, h("slot", { key: '434bc2798a1f471d7365a9854254f82bafa3c2d5' })))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js CHANGED Viewed

@@ -17,10 +17,10 @@ export class TabPanel {
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: 'aa17ab5e82e7692328cfa063e5666edfd65b1c9c', class: {
+        return (h(Host, { key: '51756c01996190f5a90e7018a2146f6e27e6185a', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '719d420b5a75b8fcc722c7e510f86411e18afade' }, h("slot", { key: 'bec1ba48c3e0ced13c339f31f9af1663c068144d' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: 'fbe0b579017645beeb19d419f1ccf2fcde4c51e1' }, h("slot", { key: '482a66418dc7c89364da609e03f544f5b71d9849' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-text-field/ic-text-field.js CHANGED Viewed

@@ -6,6 +6,7 @@ let inputIds = 0;
 const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
 /**
  * @slot helper-text - Content is set as the helper text for the text field.
+ * @slot validation-text - Content is set as validation text for the text field.
  * @slot icon - Content will be placed to the left of the text input.
  */
 export class TextField {
@@ -386,14 +387,14 @@ export class TextField {
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '4a38a5d8bd42f37b2ab1e9f3af485695b6185a8a', class: {
+        return (h(Host, { key: 'a098007f75d3bf05058679006000a305447a3f97', 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: 'a75383406081d9f9dd9bf83b794713c8a8c33eff', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '5e145b4a2b71e47d8a9600571666e8b18a1973bd', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'fbde0ccff51839c9e8604b49ef2e5a0e42513f09', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '217ca703c97abad8551a4598ed33dee4af0a1ee3', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'c76c20299561c6112ec484b8197bcf681584115d', 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: '171169b5eb33513fda471e8de18a20c0ae040936', 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,
@@ -401,12 +402,12 @@ export class TextField {
                 "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: '79c4833270e9e5d2ba5b235267f1f0e50195163d', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'a3db17f9b067f54fcc4ddc4a47a7d794a7b627cb', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'f9750f4141ff93b1a58401afc7bef74ded33b11f', name: "menu" }), h("ic-input-validation", { key: 'd582922b6f50b5bf776f1a7b31fa743fbf2e97ca', 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: '80fa88be4c45ce4355da0d1d62adae0dd56b021d', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '575559f310a0cf1b953f9423efdaaa4a00ea1b94', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'b98ae8945e4528c5df4f100cd10359781b19f4b4', variant: "caption", class: "char-count-text" }, h("span", { key: '9e70d0c79c6a69fcb08182487a612b55c493b37e', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'a598443cda020214b8d60285c1843ff47f40fda8', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'a1d6085adef0f94c8fbb8f85f0e5cff4d1f0eae9', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }