@ukic/web-components 2.26.0 → 3.0.0

package/dist/collection/components/ic-step/test/basic/ic-step.spec.js

@@ -13,7 +13,7 @@ describe("default variant of ic-step component", () => {
     it("should render default step with correct title", async () => {
         const page = await newSpecPage({
             components: [Step, Typography],
-            html: `<ic-step variant="default" step-title="First"></ic-step>`,
+            html: `<ic-step variant="default" heading="First"></ic-step>`,
         });
         expect(page.root).toMatchSnapshot();
     });
@@ -21,27 +21,27 @@ describe("default variant of ic-step component", () => {
         const page = await newSpecPage({
             components: [Step, Typography],
             html: `<ic-step variant="default" 
-      step-title="Second With a Very Long Title"
-      step-subtitle="Optional Subtitle"
-      step-type="current"
+      heading="Second With a Very Long Title"
+      subheading="Optional Subtitle"
+      type="current"
     ></ic-step>`,
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should render disabled stepType", async () => {
+    it("should render disabled type", async () => {
         const page = await newSpecPage({
             components: [Step, Typography],
             html: `<ic-step variant="default" 
-      step-type="disabled"
+      type="disabled"
     ></ic-step>`,
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should render completed stepType", async () => {
+    it("should render completed type", async () => {
         const page = await newSpecPage({
             components: [Step, Typography],
             html: `<ic-step variant="default" 
-      step-type="completed"
+      type="completed"
     ></ic-step>`,
         });
         expect(page.root).toMatchSnapshot();
@@ -53,29 +53,29 @@ describe("compact variant of ic-step component", () => {
             components: [Step],
             html: `<ic-step
       variant="compact" 
-      step-type="current"
+      type="current"
       last-step="false"
       step-num="3"
       last-step-num="4"
       progress="75"
-      step-title="Third step"
-      next-step-title="Fourth step"></ic-step>`,
+      heading="Third step"
+      next-step-heading="Fourth step"></ic-step>`,
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should render an step status icon for a step with a disabled stepType", async () => {
+    it("should render an step status icon for a step with a disabled type", async () => {
         const page = await newSpecPage({
             components: [Step],
             html: `<ic-step
       variant="compact"
-      step-type="disabled"
+      type="disabled"
       compact-step-styling = "disabled"
       last-step="false"
       step-num="3"
       last-step-num="4"
       progress="75"
-      step-title="Third step"
-      next-step-title="next step"
+      heading="Third step"
+      next-step-heading="next step"
     ></ic-step>`,
         });
         expect(page.root).toMatchSnapshot();
@@ -84,7 +84,7 @@ describe("compact variant of ic-step component", () => {
         const statusIcon = page.root.shadowRoot.querySelector("span.step-icon");
         expect(statusIcon).toEqualHtml(`<span class="warning-icon step-icon" aria-hidden="true">svg</span>`);
     });
-    it("should render a step status icon for a step with a completed stepType", async () => {
+    it("should render a step status icon for a step with a completed type", async () => {
         const page = await newSpecPage({
             components: [Step],
             html: `<ic-step
@@ -93,9 +93,9 @@ describe("compact variant of ic-step component", () => {
       step-num="3"
       last-step-num="4"
       progress="75"
-      step-title="Third step"
-      next-step-title="next step"
-      step-type="completed"
+      heading="Third step"
+      next-step-heading="next step"
+      type="completed"
       compact-step-styling = "completed"
     ></ic-step>`,
         });
@@ -110,12 +110,12 @@ describe("compact variant of ic-step component", () => {
             components: [Step],
             html: `<ic-step
       variant="compact" 
-      step-type="current"
+      type="current"
       last-step="true"
       step-num=4"
       last-step-num="4"
       progress="100"
-      step-title="Final step"
+      heading="Final step"
     ></ic-step>`,
         });
         const lastStep = page.root.shadowRoot.querySelector(".next-step").textContent;
@@ -131,13 +131,13 @@ describe("compact variant of ic-step component", () => {
       step-num=4"
       last-step-num="4"
       progress="100"
-      step-title="Final step"
+      heading="Final step"
     ></ic-step>`,
         });
         const loadingIndicator = page.root.shadowRoot.querySelector(".step > ic-loading-indicator");
         expect(loadingIndicator.classList.contains("compact-step-progress-indicator")).toBeTruthy();
     });
-    it("should watch the stepType & change the value of the current prop if stepType = 'current'", async () => {
+    it("should watch the type & change the value of the current prop if type = 'current'", async () => {
         const page = await newSpecPage({
             components: [Step],
             html: `<ic-step
@@ -146,15 +146,15 @@ describe("compact variant of ic-step component", () => {
       step-num=4"
       last-step-num="4"
       progress="100"
-      step-title="Final step"
-      step-type = "current"
+      heading="Final step"
+      type = "current"
     ></ic-step>`,
         });
-        await page.rootInstance.stepTypeChangeHandler();
+        await page.rootInstance.typeChangeHandler();
         await page.waitForChanges();
         expect(page.rootInstance.current).toBeTruthy();
     });
-    it("should watch the stepType & shouldn't change the value of the current prop if stepType is not 'current'", async () => {
+    it("should watch the type & shouldn't change the value of the current prop if type is not 'current'", async () => {
         const page = await newSpecPage({
             components: [Step],
             html: `<ic-step
@@ -163,12 +163,12 @@ describe("compact variant of ic-step component", () => {
       step-num=4"
       last-step-num="4"
       progress="100"
-      step-title="Final step"
-      step-type = "completed"
+      heading="Final step"
+      type = "completed"
       compact-step-styling = "completed"
     ></ic-step>`,
         });
-        await page.rootInstance.stepTypeChangeHandler();
+        await page.rootInstance.typeChangeHandler();
         await page.waitForChanges();
         expect(page.rootInstance.current).toBeFalsy();
     });

package/dist/collection/components/ic-step/test/basic/ic-step.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-step.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-step/test/basic/ic-step.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Step } from \"../../ic-step\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { LoadingIndicator } from \"../../../ic-loading-indicator/ic-loading-indicator\";\n\ndescribe(\"default variant of ic-step component\", () => {\n  it(\"should render default step with no title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n  it(\"should render default step with correct title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" step-title=\"First\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render default step with correct title, subtitle and current state\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-type=\"disabled\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-type=\"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n\ndescribe(\"compact variant of ic-step component\", () => {\n  it(\"should render a compact step with no step status\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      step-type=\"current\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"Fourth step\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render an step status icon for a step with a disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      step-type=\"disabled\"\n      compact-step-styling = \"disabled\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"next step\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Not required\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"warning-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should render a step status icon for a step with a completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"next step\"\n      step-type=\"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Completed\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"check-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should set next step text as last step if last step is true\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      step-type=\"current\"\n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const lastStep =\n      page.root.shadowRoot.querySelector(\".next-step\").textContent;\n\n    expect(lastStep).toBe(\"Last step\");\n  });\n\n  it(\"should set the circular line width of the loading indicator as 40 for all steps\", async () => {\n    jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [Step, LoadingIndicator],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const loadingIndicator = page.root.shadowRoot.querySelector(\n      \".step > ic-loading-indicator\"\n    );\n\n    expect(\n      loadingIndicator.classList.contains(\"compact-step-progress-indicator\")\n    ).toBeTruthy();\n  });\n\n  it(\"should watch the stepType & change the value of the current prop if stepType = 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n      step-type = \"current\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.stepTypeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeTruthy();\n  });\n\n  it(\"should watch the stepType & shouldn't change the value of the current prop if stepType is not 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n      step-type = \"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.stepTypeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeFalsy();\n  });\n});\n"]}
+{"version":3,"file":"ic-step.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-step/test/basic/ic-step.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Step } from \"../../ic-step\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { LoadingIndicator } from \"../../../ic-loading-indicator/ic-loading-indicator\";\n\ndescribe(\"default variant of ic-step component\", () => {\n  it(\"should render default step with no title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n  it(\"should render default step with correct title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" heading=\"First\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render default step with correct title, subtitle and current state\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      heading=\"Second With a Very Long Title\"\n      subheading=\"Optional Subtitle\"\n      type=\"current\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled type\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      type=\"disabled\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render completed type\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      type=\"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n\ndescribe(\"compact variant of ic-step component\", () => {\n  it(\"should render a compact step with no step status\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      type=\"current\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      heading=\"Third step\"\n      next-step-heading=\"Fourth step\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render an step status icon for a step with a disabled type\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      type=\"disabled\"\n      compact-step-styling = \"disabled\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      heading=\"Third step\"\n      next-step-heading=\"next step\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Not required\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"warning-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should render a step status icon for a step with a completed type\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      heading=\"Third step\"\n      next-step-heading=\"next step\"\n      type=\"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Completed\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"check-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should set next step text as last step if last step is true\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      type=\"current\"\n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      heading=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const lastStep =\n      page.root.shadowRoot.querySelector(\".next-step\").textContent;\n\n    expect(lastStep).toBe(\"Last step\");\n  });\n\n  it(\"should set the circular line width of the loading indicator as 40 for all steps\", async () => {\n    jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [Step, LoadingIndicator],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      heading=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const loadingIndicator = page.root.shadowRoot.querySelector(\n      \".step > ic-loading-indicator\"\n    );\n\n    expect(\n      loadingIndicator.classList.contains(\"compact-step-progress-indicator\")\n    ).toBeTruthy();\n  });\n\n  it(\"should watch the type & change the value of the current prop if type = 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      heading=\"Final step\"\n      type = \"current\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.typeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeTruthy();\n  });\n\n  it(\"should watch the type & shouldn't change the value of the current prop if type is not 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      heading=\"Final step\"\n      type = \"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.typeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeFalsy();\n  });\n});\n"]}

package/dist/collection/components/ic-stepper/ic-stepper.css

@@ -9,19 +9,19 @@
   padding: 0;
 }
 
-:host(.default:not(.aligned-left)) .step-item-list {
+:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {
   flex: auto;
 }
 
-:host(.compact) ul ::slotted(ic-step) {
+:host(.ic-stepper-compact) ul ::slotted(ic-step) {
   display: none;
 }
 
-:host(.compact) ul ::slotted(ic-step.show) {
+:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {
   display: flex;
 }
 
-:host(.compact) ul ::slotted(ic-step.hide) {
+:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {
   display: none;
   opacity: 0;
   visibility: hidden;

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

@@ -7,7 +7,7 @@ export class Stepper {
         // 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[step-title]"));
+            this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[heading]"));
         };
         // Inform the user that stepTitles are required on all steps in a compact stepper
         this.checkStepTitles = () => {
@@ -16,7 +16,7 @@ export class Stepper {
                 this.variant === "compact") {
                 this.noOfResizes = this.noOfResizes + 1;
                 if (this.noOfResizes === 1) {
-                    console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`);
+                    console.error(`The prop 'heading' is required for all steps of the Stepper component (compact variant)`);
                 }
             }
         };
@@ -47,39 +47,39 @@ export class Stepper {
                 // Assign lastStep to final step
                 step.lastStep = index === this.steps.length - 1;
                 step.lastStepNum = this.steps.length;
-                if (step.stepType !== "current") {
+                if (step.type !== "current") {
                     step.current = false;
-                    this.stepTypes[index] = step.stepType;
+                    this.stepTypes[index] = step.type;
                 }
                 else {
                     step.current = true;
                 }
                 const stepTitleArea = step.shadowRoot &&
-                    step.shadowRoot.querySelector(".step > .step-title-area");
+                    step.shadowRoot.querySelector(".step > .heading-area");
                 if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
                     if (this.variant === "compact") {
                         this.autoSetStepTitles = true;
                         if (this.autoSetStepTitles) {
-                            step.stepTitle = "Step " + step.stepNum;
+                            step.heading = "Step " + step.stepNum;
                             stepTitleArea &&
                                 stepTitleArea
-                                    .querySelector(".step-title")
+                                    .querySelector(".heading")
                                     .setAttribute("aria-hidden", "true");
                         }
                     }
                     if (this.variant === "default") {
                         this.autoSetStepTitles = false;
                         if (!this.autoSetStepTitles) {
-                            step.stepTitle = undefined;
+                            step.heading = undefined;
                             stepTitleArea &&
                                 stepTitleArea
-                                    .querySelector(".step-title")
+                                    .querySelector(".heading")
                                     .removeAttribute("aria-hidden");
                         }
                     }
                 }
                 if (this.variant === "compact") {
-                    if (step.current === true || step.stepType === "current") {
+                    if (step.current === true || step.type === "current") {
                         step.classList.remove("hide");
                         step.classList.add("show");
                     }
@@ -88,7 +88,7 @@ export class Stepper {
                         step.classList.add("hide");
                     }
                     if (!step.lastStep) {
-                        step.nextStepTitle = this.steps[index + 1].stepTitle;
+                        step.nextStepHeading = this.steps[index + 1].heading;
                         step.progress = (step.stepNum / this.steps.length) * 100;
                     }
                     else if (step.lastStep && this.stepTypes[index] !== "completed") {
@@ -144,7 +144,7 @@ export class Stepper {
         this.setHideStepInfo = () => {
             this.steps.forEach((step) => {
                 var _a, _b;
-                const stepTitleArea = step.shadowRoot.querySelector(".step > .step-title-area");
+                const stepTitleArea = step.shadowRoot.querySelector(".step > .heading-area");
                 if (stepTitleArea !== null) {
                     if (this.hideStepInfo) {
                         (_a = stepTitleArea.classList) === null || _a === void 0 ? void 0 : _a.add(this.visuallyHidden);
@@ -220,8 +220,8 @@ export class Stepper {
     }
     render() {
         return (h(Host, { class: {
-                [`${this.variant}`]: true,
-                ["aligned-left"]: this.variant === "default" && this.aligned === "left",
+                [`ic-stepper-${this.variant}`]: true,
+                ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
             } }, h("ul", { class: "step-item-list" }, h("slot", null))));
     }
     static get is() { return "ic-stepper"; }

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

@@ -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 { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.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;\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 = 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 appearance of the stepper.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\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   * 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\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[step-title]\")\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 'step-title' (web components) / 'stepTitle' (react) 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 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.stepType !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.stepType;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .step-title-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.stepTitle = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.stepTitle = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.stepType === \"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.nextStepTitle = this.steps[index + 1].stepTitle;\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) {\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 {\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\") {\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 > .step-title-area\"\n      );\n\n      if (stepTitleArea !== null) {\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 (this.aligned === \"left\" && this.connectorWidth > 100) {\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  };\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          [`${this.variant}`]: true,\n          [\"aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"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 { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.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;\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 = 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 appearance of the stepper.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\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   * 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\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 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) {\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 {\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\") {\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 !== null) {\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 (this.aligned === \"left\" && this.connectorWidth > 100) {\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  };\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        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-stepper/test/basic/ic-stepper-test-examples.js

@@ -1,74 +1,74 @@
 export const defaultStepper = `
     <ic-stepper>
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-        step-title="Second With a Very Long Title"
-        step-subtitle="Optional Subtitle"
-        step-type="current"
+        heading="Second With a Very Long Title"
+        subheading="Optional Subtitle"
+        type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-        step-title="Fourth"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth"
+        subheading="Optional Subtitle"
+        type="completed"
         ></ic-step>
     </ic-stepper>`;
 export const customConnectorWidthStepper = `
     <ic-stepper aligned="left" connector-width="150">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-        step-title="Second With a Very Long Title"
-        step-subtitle="Optional Subtitle"
-        step-type="current"
+        heading="Second With a Very Long Title"
+        subheading="Optional Subtitle"
+        type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-        step-title="Fourth"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth"
+        subheading="Optional Subtitle"
+        type="completed"
         ></ic-step>
     </ic-stepper>`;
 export const invalidConnectorWidthStepper = `
     <ic-stepper aligned="left" connector-width="96">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-        step-title="Second With a Very Long Title"
-        step-subtitle="Optional Subtitle"
-        step-type="current"
+        heading="Second With a Very Long Title"
+        subheading="Optional Subtitle"
+        type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-        step-title="Fourth"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth"
+        subheading="Optional Subtitle"
+        type="completed"
         ></ic-step>
     </ic-stepper>`;
 export const compactStepper = `
     <ic-stepper variant="compact" id="custom-compact-stepper">
         <ic-step 
-        step-title="First"
+        heading="First"
         ></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
           icon
-          step-status="optional"
-          step-type="completed"
+          status="optional"
+          type="completed"
         ></ic-step>
       </ic-stepper>`;
 //# sourceMappingURL=ic-stepper-test-examples.js.map

package/dist/collection/components/ic-stepper/test/basic/ic-stepper-test-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;kBAcZ,CAAC;AAEnB,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;kBAczB,CAAC;AAEnB,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;kBAc1B,CAAC;AAEnB,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BV,CAAC","sourcesContent":["export const defaultStepper = `\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const customConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const invalidConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const compactStepper = `\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`;\n"]}
+{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;kBAcZ,CAAC;AAEnB,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;kBAczB,CAAC;AAEnB,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;kBAc1B,CAAC;AAEnB,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BV,CAAC","sourcesContent":["export const defaultStepper = `\n    <ic-stepper>\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const customConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const invalidConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const compactStepper = `\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        heading=\"First\"\n        ></ic-step>\n        <ic-step\n          heading=\"Second With a Very Long Title\"\n          subheading=\"Optional subtitle that is long and should wrap\"\n          current\n          type=\"current\"\n        ></ic-step>\n        <ic-step\n          heading=\"Third\"\n          type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fourth title that is long and should wrap\"\n          subheading=\"Optional Subtitle\"\n          type=\"completed\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fifth and final step\"\n          subheading=\"Optional Subtitle\"\n          icon\n          status=\"optional\"\n          type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`;\n"]}