@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11

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

@@ -1,39 +1,121 @@
 import { Host, h } from "@stencil/core";
 import checkIcon from "../../assets/check-icon.svg";
+import warningIcon from "../../assets/warning-icon-outline.svg";
 export class Step {
   constructor() {
-    this.stepType = "active";
+    this.variant = undefined;
     this.stepTitle = undefined;
     this.stepSubtitle = undefined;
+    this.stepStatus = undefined;
+    this.stepType = "active";
+    this.current = false;
+    this.compactStepStyling = undefined;
     this.stepNum = undefined;
     this.lastStep = undefined;
+    this.lastStepNum = undefined;
+    this.nextStepTitle = undefined;
+    this.progress = undefined;
   }
-  render() {
-    let icon;
-    if (this.stepType !== "completed") {
-      icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+  stepTypeChangeHandler() {
+    if (this.variant === "compact" && this.stepType === "current") {
+      this.current = true;
     }
     else {
-      icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+      this.current = false;
     }
+  }
+  render() {
+    // ARIA LABEL
     let ariaLabel = "";
     if (this.stepType === "completed") {
       ariaLabel = ". Completed step";
     }
     else if (this.stepType === "disabled") {
-      ariaLabel = ". Disabled step";
+      ariaLabel = ". Non-required step";
+    }
+    else if (this.stepStatus === "required") {
+      ariaLabel = ". Required step";
+    }
+    else if (this.stepStatus === "optional") {
+      ariaLabel = ". Optional step";
+    }
+    // STEP STATUS
+    let stepStatus;
+    if (this.stepStatus) {
+      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);
+    }
+    // STEP TYPE
+    let stepType;
+    if (this.stepType === "disabled" ||
+      this.compactStepStyling === "disabled") {
+      stepType = "Not required";
+    }
+    else if (this.compactStepStyling === "completed") {
+      stepType = "Completed";
+    }
+    // STATUS ICON FOR COMPACT STEP
+    let statusIcon;
+    if (this.stepType === "completed" ||
+      this.compactStepStyling === "completed") {
+      statusIcon = (h("span", { class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+    }
+    else if (this.stepType === "disabled" ||
+      this.compactStepStyling === "disabled") {
+      statusIcon = (h("span", { class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+    }
+    // COMPACT STEP COMPONENT
+    const compactStep = (h("div", { class: {
+        ["step"]: true,
+        ["current"]: this.current,
+        [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
+      } }, h("ic-loading-indicator", { class: {
+        "compact-step-progress-indicator": true,
+        "not-required": this.stepType === "disabled" ||
+          this.compactStepStyling === "disabled",
+      }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "step-title-area" }, h("ic-typography", { variant: "h4", class: "step-title" }, this.stepTitle), 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.stepSubtitle ||
+      this.stepType === "completed" ||
+      this.stepType === "disabled" ||
+      (this.variant === "compact" &&
+        !!this.compactStepStyling &&
+        this.compactStepStyling !== "active") ||
+      !!this.stepStatus) && (h("div", { class: "step-status" }, statusIcon && statusIcon, (this.stepSubtitle || stepType) && (h("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
+      this.stepSubtitle !== undefined
+      ? this.stepSubtitle
+      : this.stepType === "disabled" ||
+        (this.variant === "compact" &&
+          this.compactStepStyling === "disabled") ||
+        this.stepType === "completed" ||
+        (this.variant === "compact" &&
+          this.compactStepStyling === "completed")
+        ? stepType
+        : this.stepStatus && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (this.nextStepTitle !== undefined && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
+    // ICON FOR DEFAULT STEP
+    let icon;
+    if (this.stepType !== "completed") {
+      icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { 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 })));
+    }
+    // STEP CONNECT FOR DEFAULT STEP
     const partialBar = this.stepType === "current" && (h("div", { class: "step-connect-inner" }));
     const finalStep = !this.lastStep && (h("div", { class: {
         ["step-connect"]: true,
-        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
       } }, partialBar));
-    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": this.stepType == "current" ? "step" : null, class: {
-        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
-      } }, h("div", { class: {
+    // DEFAULT STEP COMPONENT
+    const defaultStep = (h("div", { class: {
         ["step"]: true,
         [`${this.stepType}`]: true,
-      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepSubtitle && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle)))))));
+      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && this.stepSubtitle !== undefined
+      ? this.stepSubtitle
+      : stepStatus))))));
+    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.stepType === "current") && "step", class: {
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
+        [`${this.variant}`]: true,
+      } }, this.variant === "compact" ? compactStep : defaultStep));
   }
   static get is() { return "ic-step"; }
   static get encapsulation() { return "shadow"; }
@@ -49,28 +131,30 @@ export class Step {
   }
   static get properties() {
     return {
-      "stepType": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcStepTypes",
-          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+          "original": "IcStepVariants",
+          "resolved": "\"compact\" | \"default\"",
           "references": {
-            "IcStepTypes": {
+            "IcStepVariants": {
               "location": "import",
               "path": "./ic-step.types"
             }
           }
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
-          "tags": [],
-          "text": "State of step"
+          "tags": [{
+              "name": "internal",
+              "text": "The variant of the step. This is managed by ic-stepper."
+            }],
+          "text": ""
         },
-        "attribute": "step-type",
-        "reflect": false,
-        "defaultValue": "\"active\""
+        "attribute": "variant",
+        "reflect": false
       },
       "stepTitle": {
         "type": "string",
@@ -84,7 +168,7 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Name of step"
+          "text": "The title of the step within the stepper."
         },
         "attribute": "step-title",
         "reflect": false
@@ -101,11 +185,102 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Additional information about step"
+          "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."
         },
         "attribute": "step-subtitle",
         "reflect": false
       },
+      "stepStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepStatuses",
+          "resolved": "\"optional\" | \"required\"",
+          "references": {
+            "IcStepStatuses": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The status of the step. Use this prop to display a status message on the step if it is required or optional."
+        },
+        "attribute": "step-status",
+        "reflect": false
+      },
+      "stepType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepTypes",
+          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+          "references": {
+            "IcStepTypes": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The state of the step within the stepper."
+        },
+        "attribute": "step-type",
+        "reflect": false,
+        "defaultValue": "\"active\""
+      },
+      "current": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, and a compact stepper  is being used, the current step will be the only step in view."
+            }],
+          "text": ""
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "compactStepStyling": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepTypes",
+          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+          "references": {
+            "IcStepTypes": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If a compact stepper is being used, this sets the styling of the step."
+            }],
+          "text": ""
+        },
+        "attribute": "compact-step-styling",
+        "reflect": false
+      },
       "stepNum": {
         "type": "number",
         "mutable": false,
@@ -119,7 +294,7 @@ export class Step {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "The step number, managed by ic-stepper"
+              "text": "The step number, managed by ic-stepper."
             }],
           "text": ""
         },
@@ -134,20 +309,86 @@ export class Step {
           "resolved": "boolean",
           "references": {}
         },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "last-step",
+        "reflect": false
+      },
+      "lastStepNum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Final step in series flag, managed by ic-stepper"
+              "text": "The step number of the final step. This is managed by ic-stepper."
             }],
           "text": ""
         },
-        "attribute": "last-step",
+        "attribute": "last-step-num",
+        "reflect": false
+      },
+      "nextStepTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The name of the next step. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "next-step-title",
+        "reflect": false
+      },
+      "progress": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "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."
+            }],
+          "text": ""
+        },
+        "attribute": "progress",
         "reflect": false
       }
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "stepType",
+        "methodName": "stepTypeChangeHandler"
+      }];
+  }
 }
 //# sourceMappingURL=ic-step.js.map

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAQpD,MAAM,OAAO,IAAI;;oBAKkB,QAAQ;;;;;;EAsBzC,MAAM;IACJ,IAAI,IAAI,CAAC;IACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,IAAI,GAAG,CACL,qBAAe,OAAO,EAAC,gBAAgB;QACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;KACH;SAAM;MACL,IAAI,GAAG,CACL,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;QAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;KACH;IAED,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,SAAS,GAAG,kBAAkB,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;MACvC,SAAS,GAAG,iBAAiB,CAAC;KAC/B;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAChD,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,WACE,KAAK,EAAE;QACL,CAAC,cAAc,CAAC,EAAE,IAAI;QACtB,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAEA,UAAU,CACP,CACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE;MAED,WACE,KAAK,EAAE;UACL,CAAC,MAAM,CAAC,EAAE,IAAI;UACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC3B;QAED,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO;UAClC,SAAS,CACN;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CACxC,WAAK,KAAK,EAAC,iBAAiB;UACzB,IAAI,CAAC,SAAS,IAAI,CACjB,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB;UACA,IAAI,CAAC,YAAY,IAAI,CACpB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,CACJ,CACjB,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { IcStepTypes } from \"./ic-step.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   * State of step\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * Name of step\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * Additional information about step\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * @internal The step number, managed by ic-stepper\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * @internal Final step in series flag, managed by ic-stepper\n   */\n  @Prop() lastStep?: boolean;\n\n  render() {\n    let icon;\n    if (this.stepType !== \"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    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Disabled step\";\n    }\n\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={this.stepType == \"current\" ? \"step\" : null}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        <div\n          class={{\n            [\"step\"]: true,\n            [`${this.stepType}`]: true,\n          }}\n        >\n          <div class=\"step-top\">\n            <div class=\"step-icon\">{icon}</div>\n            {finalStep}\n          </div>\n          {(this.stepTitle || this.stepSubtitle) && (\n            <div class=\"step-title-area\">\n              {this.stepTitle && (\n                <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                  {this.stepTitle}\n                </ic-typography>\n              )}\n              {this.stepSubtitle && (\n                <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                  {this.stepSubtitle}\n                </ic-typography>\n              )}\n            </div>\n          )}\n        </div>\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\";\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   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() stepTitle?: string;\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() stepSubtitle?: string;\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() stepStatus?: IcStepStatuses;\n\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\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 a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\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() nextStepTitle?: 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  @Watch(\"stepType\")\n  stepTypeChangeHandler(): void {\n    if (this.variant === \"compact\" && this.stepType === \"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.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.stepStatus === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.stepStatus === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.stepStatus) {\n      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\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 (\n      this.stepType === \"completed\" ||\n      this.compactStepStyling === \"completed\"\n    ) {\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.stepType === \"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.stepType === \"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=\"step-title-area\">\n          <ic-typography variant=\"h4\" class=\"step-title\">\n            {this.stepTitle}\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.stepSubtitle ||\n              this.stepType === \"completed\" ||\n              this.stepType === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.stepStatus) && (\n              <div class=\"step-status\">\n                {statusIcon && statusIcon}\n                {(this.stepSubtitle || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.stepSubtitle !== null &&\n                    this.stepSubtitle !== undefined\n                      ? this.stepSubtitle\n                      : this.stepType === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.stepType === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.stepStatus && 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            this.nextStepTitle !== undefined && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n                {this.nextStepTitle}\n              </ic-typography>\n            )\n          )}\n        </div>\n      </div>\n    );\n\n    // ICON FOR DEFAULT STEP\n    let icon;\n    if (this.stepType !== \"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.stepType === \"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(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    // DEFAULT STEP COMPONENT\n    const defaultStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [`${this.stepType}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.stepTitle || this.stepSubtitle || this.stepStatus) && (\n          <div class=\"step-title-area\">\n            {this.stepTitle && (\n              <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                {this.stepTitle}\n              </ic-typography>\n            )}\n            {this.stepTitle && (this.stepSubtitle || this.stepStatus) && (\n              <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                {this.stepSubtitle !== null && this.stepSubtitle !== undefined\n                  ? this.stepSubtitle\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.stepType === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n          [`${this.variant}`]: true,\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ic-step.types.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStepTypes = \"active\" | \"current\" | \"completed\" | \"disabled\";\n"]}
+{"version":3,"file":"ic-step.types.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStepVariants = \"default\" | \"compact\";\n\nexport type IcStepStatuses = \"optional\" | \"required\";\n\nexport type IcStepTypes = \"active\" | \"current\" | \"completed\" | \"disabled\";\n"]}

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

@@ -0,0 +1,74 @@
+export const defaultStepper = `
+    <ic-stepper>
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-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
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-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
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const compactStepper = `
+    <ic-stepper variant="compact" id="custom-compact-stepper">
+        <ic-step 
+        step-title="First"
+        ></ic-step>
+        <ic-step
+          step-title="Second With a Very Long Title"
+          step-subtitle="Optional subtitle that is long and should wrap"
+          current
+          step-type="current"
+        ></ic-step>
+        <ic-step
+          step-title="Third"
+          step-type="disabled"
+        ></ic-step>
+        <ic-step
+          step-title="Fourth title that is long and should wrap"
+          step-subtitle="Optional Subtitle"
+          step-type="completed"
+        ></ic-step>
+        <ic-step
+          step-title="Fifth and final step"
+          step-subtitle="Optional Subtitle"
+          icon
+          step-status="optional"
+          step-type="completed"
+        ></ic-step>
+      </ic-stepper>`;
+//# sourceMappingURL=ic-stepper-test-examples.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/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"]}

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

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