@ukic/web-components 3.0.0 → 3.1.0

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

@@ -4,17 +4,17 @@ import warningIcon from "../../assets/warning-icon-outline.svg";
 import { isPropDefined } from "../../utils/helpers";
 export class Step {
     constructor() {
-        this.compactStepStyling = undefined;
+        /**
+         * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
+         */
         this.current = false;
-        this.lastStep = undefined;
-        this.lastStepNum = undefined;
-        this.nextStepHeading = undefined;
-        this.progress = undefined;
-        this.stepNum = undefined;
-        this.status = undefined;
-        this.subheading = undefined;
-        this.heading = undefined;
-        this.variant = undefined;
+        /**
+         * @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.
+         */
+        this.theme = "inherit";
+        /**
+         * The state of the step within the stepper.
+         */
         this.type = "active";
     }
     typeChangeHandler() {
@@ -26,7 +26,7 @@ export class Step {
         }
     }
     render() {
-        var _a;
+        var _a, _b;
         // ARIA LABEL
         let ariaLabel = "";
         if (this.type === "completed") {
@@ -43,7 +43,7 @@ export class Step {
         }
         // STEP STATUS
         let stepStatus;
-        if (isPropDefined(this.status)) {
+        if (this.status && isPropDefined(this.status)) {
             stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
         }
         // STEP TYPE
@@ -57,28 +57,29 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '037cdd093417bdeff6f9de2795a2c0a29e23db63', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (this.type === "disabled" ||
             this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '115e2d476464fb4b4c48516e6cfc108928e6ebdc', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { class: {
+        const compactStep = (h("div", { key: 'ff799c9a5ac470cd917ecf47896c07d3e8ad6a55', class: {
                 ["step"]: true,
-                ["current"]: this.current,
+                ["current"]: !!this.current,
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
-            } }, h("ic-loading-indicator", { class: {
+                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
+            } }, h("ic-loading-indicator", { key: 'd96083b68c5bd6c34adb1062ab508adf2f3274c0', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": this.type === "disabled" ||
                     this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "heading-area" }, h("ic-typography", { variant: "h4", class: "heading" }, this.heading), h("div", { class: "info-line" }, h("ic-typography", { variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { class: "visually-hidden" }, " steps")), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: '1f6b95b5b99ab252f68e3501f6909b9b8240546b', class: "heading-area" }, h("ic-typography", { key: '8de4cab1512b2406d9d6e38a34026dd786727c56', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'f0aac2d40c6d7c75dba1a8ea061fe70fde1684f8', class: "info-line" }, h("ic-typography", { key: 'd7802839d057c38f72319063302e0f556b4b8799', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: 'b1f8716701f30af917c056dea0b77b23cbb86a09', class: "visually-hidden" }, " steps")), (this.subheading ||
             this.type === "completed" ||
             this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
+            !!this.status) && (h("div", { key: '230dc72e7a579193f8cf1a8552d1ef5749b1d04c', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: '4a089ec12dc7e4f77d3469e08e4ef77b3d3144a3', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : this.type === "disabled" ||
                 (this.variant === "compact" &&
@@ -91,31 +92,30 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.type !== "completed") {
-            icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '74584e3b8e9d2d3554723b3b7f23ca9fd2637800', variant: "subtitle-small" }, h("span", { key: '60a00009b73f622ff0d040d09d9b569b28be9cde', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'fae4dd9d0eab63264e9aed6e7b659da9d3ff511e', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '7f83174116e62e676940ca9ec23561250803d15f', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { class: {
+        const partialBar = this.type === "current" && (h("div", { key: 'eb8b63c2d0af8d883c09a56b8d3c47afac3e5f81', class: "step-connect-inner" }));
+        const finalStep = !this.lastStep && (h("div", { key: 'cc6e694712782a11aeccc78a0a4f06f39fec3819', class: {
                 ["step-connect"]: true,
-                ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
-                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
+                ["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", { class: {
+        const defaultStep = (h("div", { key: '91c97641133852cc4a5f4d3b8d1cae4996789cc3', class: {
                 ["step"]: true,
                 [`${this.type}`]: true,
-            } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { class: "heading-area" }, this.heading && (h("ic-typography", { variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
+            } }, h("div", { key: '6ebf175f84536a4ab79e3a130e952b592ec9e965', class: "step-top" }, h("div", { key: '23f9b5a7cd4fb0908b7f65ea55c192ee3a2964de', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '7be8f0257f73a29c0ff6f6bf31830a40cb3fe81f', class: "heading-area" }, this.heading && (h("ic-typography", { key: 'fd775a67501c4bd5db9498fc8fa57404f2a51163', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '2a857f45ff18834e6199a56330e68d40b034afae', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : stepStatus))))));
-        return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
-                ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
-                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
+        return (h(Host, { key: 'ad0c3301d762c11a2a2c78c3a25b4581dca348e9', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.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-${this.variant}`]: true,
-                ["ic-step-light"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.appearance) ===
-                    "light",
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.variant === "compact" ? compactStep : defaultStep));
     }
     static get is() { return "ic-step"; }
@@ -137,7 +137,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStepTypes",
-                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\" | undefined",
                     "references": {
                         "IcStepTypes": {
                             "location": "import",
@@ -155,6 +155,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "compact-step-styling",
                 "reflect": false
             },
@@ -163,7 +165,7 @@ export class Step {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -175,6 +177,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current",
                 "reflect": false,
                 "defaultValue": "false"
@@ -196,6 +200,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "last-step",
                 "reflect": false
             },
@@ -204,7 +210,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -216,6 +222,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "last-step-num",
                 "reflect": false
             },
@@ -224,7 +232,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -236,6 +244,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "next-step-heading",
                 "reflect": false
             },
@@ -244,7 +254,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -256,6 +266,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "progress",
                 "reflect": false
             },
@@ -264,7 +276,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -276,6 +288,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step-num",
                 "reflect": false
             },
@@ -284,7 +298,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStepStatuses",
-                    "resolved": "\"optional\" | \"required\"",
+                    "resolved": "\"optional\" | \"required\" | undefined",
                     "references": {
                         "IcStepStatuses": {
                             "location": "import",
@@ -299,6 +313,8 @@ export class Step {
                     "tags": [],
                     "text": "The status of the step. Use this prop to display a status message on the step if it is required or optional."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": false
             },
@@ -307,7 +323,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -316,6 +332,8 @@ export class Step {
                     "tags": [],
                     "text": "Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subheading",
                 "reflect": false
             },
@@ -324,7 +342,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -333,9 +351,40 @@ export class Step {
                     "tags": [],
                     "text": "The title of the step within the stepper."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -359,6 +408,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -367,7 +418,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStepTypes",
-                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\" | undefined",
                     "references": {
                         "IcStepTypes": {
                             "location": "import",
@@ -382,6 +433,8 @@ export class Step {
                     "tags": [],
                     "text": "The state of the step within the stepper."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"active\""

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

@@ -1 +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 { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\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   * @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 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    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.type === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.type === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.status === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.status === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (isPropDefined(this.status)) {\n      stepStatus = this.status[0].toUpperCase() + this.status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (this.type === \"disabled\" || this.compactStepStyling === \"disabled\") {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (this.type === \"completed\" || this.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 (\n      this.type === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\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\"]: this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.type === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          <ic-typography variant=\"h4\" class=\"heading\">\n            {this.heading}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.subheading ||\n              this.type === \"completed\" ||\n              this.type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.subheading !== null && isPropDefined(this.subheading)\n                      ? this.subheading\n                      : this.type === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.type === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            isPropDefined(this.nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</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 (this.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 = this.type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.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(\n              \"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          [`${this.type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.heading || this.subheading || this.status) && (\n          <div class=\"heading-area\">\n            {this.heading && (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {this.heading}\n              </ic-typography>\n            )}\n            {this.heading && (this.subheading || this.status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {this.subheading !== null && isPropDefined(this.subheading)\n                  ? this.subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.type === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"ic-stepper-default\") &&\n            !this.el.parentElement.classList.contains(\n              \"ic-stepper-aligned-left\"\n            ),\n          [`ic-step-${this.variant}`]: true,\n          [\"ic-step-light\"]:\n            (this.el.parentElement as HTMLIcStepperElement)?.appearance ===\n            \"light\",\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}
+{"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 { IcStepVariants, IcStepStatuses, IcStepTypes } 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   * @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    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.type === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.type === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.status === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.status === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.status && isPropDefined(this.status)) {\n      stepStatus = this.status[0].toUpperCase() + this.status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (this.type === \"disabled\" || this.compactStepStyling === \"disabled\") {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (this.type === \"completed\" || this.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 (\n      this.type === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\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\"]: !!this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n          [\"disabled\"]:\n            this.type === \"disabled\" || this.compactStepStyling === \"disabled\",\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.type === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          <ic-typography variant=\"h4\" class=\"heading\">\n            {this.heading}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.subheading ||\n              this.type === \"completed\" ||\n              this.type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.subheading !== null && isPropDefined(this.subheading)\n                      ? this.subheading\n                      : this.type === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.type === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            isPropDefined(this.nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</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 (this.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 = this.type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.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          [`${this.type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.heading || this.subheading || this.status) && (\n          <div class=\"heading-area\">\n            {this.heading && (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {this.heading}\n              </ic-typography>\n            )}\n            {this.heading && (this.subheading || this.status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {this.subheading !== null && isPropDefined(this.subheading)\n                  ? this.subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.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-${this.variant}`]: true,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}