@ukic/canary-web-components 2.0.0-canary.0

package/dist/esm/ic-skeleton.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-36ab8165.js';
+
+const icSkeletonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@keyframes loading{0%{background-color:var(--ic-architectural-100)}50%{background-color:var(--ic-architectural-200)}100%{background-color:var(--ic-architectural-100)}}@keyframes loading-light{0%{background-color:var(--ic-architectural-600)}50%{background-color:var(--ic-architectural-400)}100%{background-color:var(--ic-architectural-600)}}:host{display:inline-block}:host(.skeleton){background-color:var(--ic-architectural-100);border-radius:var(--ic-border-radius);animation:loading 1200ms infinite;display:inline-block}:host(.skeleton)>*{opacity:0;visibility:hidden}:host(.circle){border-radius:50%}:host(.light){background-color:var(--ic-architectural-600);animation:loading-light 1200ms infinite}@media (forced-colors: active){:host(.skeleton){-ms-high-contrast-adjust:none;forced-color-adjust:none;background:currentcolor}}";
+
+const Skeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.default = undefined;
+    this.hasChild = undefined;
+    this.heightOnly = undefined;
+    this.widthOnly = undefined;
+    this.light = false;
+    this.variant = "rectangle";
+  }
+  componentWillLoad() {
+    if (this.el.style.height === "" && this.el.style.width === "") {
+      this.default = true;
+    }
+    else if (!(this.el.style.height === "") && this.el.style.width === "") {
+      this.heightOnly = true;
+    }
+    else if (!(this.el.style.width === "") && this.el.style.height === "") {
+      this.widthOnly = true;
+    }
+  }
+  render() {
+    const { variant, light } = this;
+    this.hasChild = !!this.el.firstElementChild;
+    const defaultSkeletonStyle = {
+      height: variant == "text" ? "1em" : variant == "circle" ? "25px" : "93px",
+      width: variant == "circle" ? "25px" : "260px",
+    };
+    const heightSetStyle = {
+      height: this.el.style.height,
+      width: variant == "circle" ? "25px" : "260px",
+    };
+    const widthSetStyle = {
+      height: variant == "text" ? "1em" : variant == "circle" ? "25px" : "93px",
+      width: this.el.style.width,
+    };
+    return (h(Host, { class: {
+        ["skeleton"]: true,
+        ["circle"]: variant == "circle",
+        ["light"]: light,
+      }, style: (!this.hasChild && this.default && defaultSkeletonStyle) ||
+        (this.heightOnly && heightSetStyle) ||
+        (this.widthOnly && widthSetStyle), "aria-disabled": "true" }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+Skeleton.style = icSkeletonCss;
+
+export { Skeleton as ic_skeleton };
+
+//# sourceMappingURL=ic-skeleton.entry.js.map

package/dist/esm/ic-skeleton.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-skeleton.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8rGAA8rG;;MCQvsG,QAAQ;;;;;;;iBAWO,KAAK;mBAKQ,WAAW;;EAElD,iBAAiB;IACf,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;SAAM,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;SAAM,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;GACF;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;IAE5C,MAAM,oBAAoB,GAAG;MAC3B,MAAM,EAAE,OAAO,IAAI,MAAM,GAAG,KAAK,GAAG,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG,MAAM;MACzE,KAAK,EAAE,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG,OAAO;KAC9C,CAAC;IAEF,MAAM,cAAc,GAAG;MACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;MAC5B,KAAK,EAAE,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG,OAAO;KAC9C,CAAC;IAEF,MAAM,aAAa,GAAG;MACpB,MAAM,EAAE,OAAO,IAAI,MAAM,GAAG,KAAK,GAAG,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG,MAAM;MACzE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;KAC3B,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,GAAG,IAAI;QAClB,CAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ;QAC/B,CAAC,OAAO,GAAG,KAAK;OACjB,EACD,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB;SACtD,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC;SAClC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,mBAErB,MAAM,IAEpB,eAAQ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","./src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-architectural-100);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-200);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-100);\n  }\n}\n\n@keyframes loading-light {\n  0% {\n    background-color: var(--ic-architectural-600);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-400);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-600);\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-architectural-100);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.circle) {\n  border-radius: 50%;\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-600);\n  animation: loading-light 1200ms infinite;\n}\n\n@media (forced-colors: active) {\n  :host(.skeleton) {\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n    background: currentcolor;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  @State() default: boolean;\n  @State() hasChild: boolean;\n  @State() heightOnly: boolean;\n  @State() widthOnly: boolean;\n\n  /**\n   * If `true`, the skeleton will be set to the light variant.\n   */\n  @Prop() light?: boolean = false;\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, light } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circle\"]: variant == \"circle\",\n          [\"light\"]: light,\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-status-tag.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host } from './index-36ab8165.js';
+import { a as onComponentRequiredPropUndefined } from './helpers-8617aaa0.js';
+import './types-dd515332.js';
+
+const icStatusTagCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.tag{padding:var(--ic-space-xxs) var(--ic-space-sm);font-size:0.875rem;border-radius:var(--ic-space-md);display:inline-block;min-width:2.5rem;text-align:center;color:var(--ic-color-primary-text)}.small{padding:var(--ic-space-xxxs) var(--ic-space-sm);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.filled-neutral{background-color:var(--ic-architectural-700);color:var(--ic-architectural-white)}.filled-success{background-color:var(--ic-status-success);color:var(--ic-architectural-white)}.filled-warning{background-color:var(--ic-status-warning-contrast)}.filled-danger{background-color:var(--ic-status-error);color:var(--ic-architectural-white)}.outlined-neutral{background-color:var(--ic-architectural-200);border:var(--ic-space-1px) solid var(--ic-architectural-400)}.outlined-success{background-color:var(--ic-status-success-light);border:var(--ic-space-1px) solid var(--ic-status-success)}.outlined-warning{background-color:var(--ic-status-warning-light);border:var(--ic-space-1px) solid var(--ic-status-warning-dark)}.outlined-danger{background-color:var(--ic-status-error-light);border:var(--ic-space-1px) solid var(--ic-status-error)}@media (forced-colors: active){.tag{border:var(--ic-hc-border);-ms-high-contrast-adjust:none;forced-color-adjust:none}}";
+
+const StatusTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.announced = false;
+    this.appearance = "filled";
+    this.label = undefined;
+    this.small = false;
+    this.status = "neutral";
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
+  }
+  render() {
+    const { label, status, appearance, small, announced } = this;
+    return (h(Host, { role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
+        ["tag"]: true,
+        [`${appearance}-${status}`]: true,
+        ["small"]: small,
+      } }, h("ic-typography", { variant: "label-uppercase", "apply-vertical-margins": false }, h("span", null, label)))));
+  }
+};
+StatusTag.style = icStatusTagCss;
+
+export { StatusTag as ic_status_tag };
+
+//# sourceMappingURL=ic-status-tag.entry.js.map

package/dist/esm/ic-status-tag.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-status-tag.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,6nHAA6nH;;MCYvoH,SAAS;;;qBAIU,KAAK;sBAKU,QAAQ;;iBAU3B,KAAK;kBAKQ,SAAS;;EAEhD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC7D,QACE,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,gBAAa,QAAQ,IAC1D,cACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,GAAG,IAAI;QACjC,CAAC,OAAO,GAAG,KAAK;OACjB,IAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK,IAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","./src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  font-size: 0.875rem;\n  border-radius: var(--ic-space-md);\n  display: inline-block;\n  min-width: 2.5rem;\n  text-align: center;\n  color: var(--ic-color-primary-text);\n}\n\n.small {\n  padding: var(--ic-space-xxxs) var(--ic-space-sm);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.filled-neutral {\n  background-color: var(--ic-architectural-700);\n  color: var(--ic-architectural-white);\n}\n\n.filled-success {\n  background-color: var(--ic-status-success);\n  color: var(--ic-architectural-white);\n}\n\n.filled-warning {\n  background-color: var(--ic-status-warning-contrast);\n}\n\n.filled-danger {\n  background-color: var(--ic-status-error);\n  color: var(--ic-architectural-white);\n}\n\n.outlined-neutral {\n  background-color: var(--ic-architectural-200);\n  border: var(--ic-space-1px) solid var(--ic-architectural-400);\n}\n\n.outlined-success {\n  background-color: var(--ic-status-success-light);\n  border: var(--ic-space-1px) solid var(--ic-status-success);\n}\n\n.outlined-warning {\n  background-color: var(--ic-status-warning-light);\n  border: var(--ic-space-1px) solid var(--ic-status-warning-dark);\n}\n\n.outlined-danger {\n  background-color: var(--ic-status-error-light);\n  border: var(--ic-space-1px) solid var(--ic-status-error);\n}\n\n@media (forced-colors: active) {\n  .tag {\n    border: var(--ic-hc-border);\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the small styling will be applied to the status tag.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, appearance, small, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: true,\n            [\"small\"]: small,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-step.entry.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-36ab8165.js';
+import { C as Check } from './check-icon-abb210ec.js';
+
+const warningIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>
+</svg>`;
+
+const icStepCss = ":host{display:flex;flex:auto}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.step-title,.step-subtitle,.step-status,.next-step{white-space:pre-line}.visually-hidden{position:absolute;left:-625rem;top:auto;width:1px;height:1px;overflow:hidden}:host(.compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-status-info);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host(.compact) .step-title-area{display:flex;flex-direction:column;width:14.25rem}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-color-secondary-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-status-success)}.compact-step-disabled :is(.step-title,.step-status){color:var(--ic-color-tertiary-text)}.step-num{color:var(--ic-color-secondary-text);white-space:nowrap}:host(.compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.default) .step{flex-direction:column}:host(.default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.default) .step-icon{border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}:host(.default) .current{color:var(--ic-status-info)}:host(.default) .step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.default) .step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}:host(.default) .completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 0.125rem}.current .step-icon-inner{background-color:var(--ic-status-info);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon-inner{border:var(--ic-space-1px) dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}:host(.default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-status-info);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-status-info)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-color-white-text)}@media (forced-colors: active){.compact-step-disabled :is(.step-title,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.default) .current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
+
+const Step = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.compactStepStyling = undefined;
+    this.current = false;
+    this.lastStep = undefined;
+    this.lastStepNum = undefined;
+    this.nextStepTitle = undefined;
+    this.progress = undefined;
+    this.stepNum = undefined;
+    this.stepStatus = undefined;
+    this.stepSubtitle = undefined;
+    this.stepTitle = undefined;
+    this.variant = undefined;
+    this.stepType = "active";
+  }
+  stepTypeChangeHandler() {
+    if (this.variant === "compact" && this.stepType === "current") {
+      this.current = true;
+    }
+    else {
+      this.current = false;
+    }
+  }
+  render() {
+    // ARIA LABEL
+    let ariaLabel = "";
+    if (this.stepType === "completed") {
+      ariaLabel = ". Completed step";
+    }
+    else if (this.stepType === "disabled") {
+      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: Check }));
+    }
+    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 !== undefined && 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: Check })));
+    }
+    // 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("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
+      } }, partialBar));
+    // 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 || 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));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "stepType": ["stepTypeChangeHandler"]
+  }; }
+};
+Step.style = icStepCss;
+
+export { Step as ic_step };
+
+//# sourceMappingURL=ic-step.entry.js.map

package/dist/esm/ic-step.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-step.entry.js","mappings":"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","names":["checkIcon"],"sources":["./src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","./src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n  display: flex;\n  flex: auto;\n}\n\n.step {\n  display: flex;\n  flex: 1 1 0;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n  white-space: pre-line;\n}\n\n.visually-hidden {\n  position: absolute;\n  left: -625rem;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* COMPACT STEP STYLING */\n:host(.compact) {\n  column-gap: var(--ic-space-sm);\n\n  --compact-step-inner-color: var(--ic-status-info);\n  --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact) .step {\n  column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n  margin: var(--ic-space-xs) 0 0;\n}\n\n:host(.compact) .step-title-area {\n  display: flex;\n  flex-direction: column;\n  width: 14.25rem;\n}\n\n.info-line {\n  display: flex;\n  column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n  display: flex;\n  color: var(--ic-color-secondary-text);\n  column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n  color: var(--ic-status-success);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n  color: var(--ic-color-tertiary-text);\n}\n\n.step-num {\n  color: var(--ic-color-secondary-text);\n  white-space: nowrap;\n}\n\n:host(.compact) .step-icon {\n  margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.default) .step {\n  flex-direction: column;\n}\n\n:host(.default.last-step) {\n  flex-grow: initial;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 2.5rem;\n}\n\n:host(.default) .step-icon {\n  border-radius: 50%;\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n:host(.default) .current {\n  color: var(--ic-status-info);\n}\n\n:host(.default) .step-title-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n  width: 100%;\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n  width: fit-content;\n}\n\n.step-subtitle {\n  color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n  color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-status-info);\n  color: white;\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n  color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-status-success);\n  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n:host(.default) .current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-status-info);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs));\n\n  /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-architectural-200);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 6.25rem;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 0.125rem dashed var(--ic-architectural-200);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-status-info);\n}\n\n.step-icon-inner .check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n  width: var(--ic-space-md);\n  height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n  fill: var(--ic-color-white-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  /* COMPACT STEP */\n  .compact-step-disabled :is(.step-title, .step-status) {\n    color: GrayText;\n  }\n\n  /* DEFAULT STEP */\n  .step-connect:not(.disabled .step-connect) {\n    border: var(--ic-hc-border);\n  }\n\n  .active .step-icon-inner,\n  .completed .step-icon-inner,\n  .current .step-icon-inner {\n    forced-color-adjust: none;\n    box-shadow: inset canvastext 0 0 0 0.125rem;\n    background-color: transparent;\n    color: canvastext;\n  }\n\n  :host(.default) .current .step-icon {\n    padding: 0;\n    border: none;\n  }\n\n  .disabled,\n  .disabled .step-title-area {\n    color: GrayText;\n  }\n\n  .step-connect-inner,\n  .completed .step-connect {\n    background-color: canvastext;\n  }\n\n  .step-icon-inner .check-icon > svg > path {\n    fill: canvastext;\n  }\n}\n","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  /**\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() 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  /**\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() stepStatus?: 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() stepSubtitle?: string;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() stepTitle?: 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() stepType?: IcStepTypes = \"active\";\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 !== undefined && 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"],"version":3}

package/dist/esm/ic-stepper.entry.js

@@ -0,0 +1,217 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-36ab8165.js';
+import { B as pxToRem, c as checkResizeObserver } from './helpers-8617aaa0.js';
+import './types-dd515332.js';
+
+const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}: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}";
+
+const Stepper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.resizeObserver = null;
+    // 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]"));
+    };
+    // Inform the user that stepTitles are required on all steps in a compact stepper
+    this.checkStepTitles = () => {
+      if (this.stepsWithStepTitles.length < this.steps.length &&
+        this.variantOverride &&
+        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)`);
+        }
+      }
+    };
+    this.setStepTypes = () => {
+      this.getChildren();
+      this.stepTypes = [];
+      for (let i = 0; i < this.steps.length; i++) {
+        this.stepTypes.push("active");
+      }
+    };
+    this.setStepperWidth = () => {
+      this.alignedFullWidth =
+        this.variant === "default" && this.aligned === "full-width";
+      const lastStep = this.steps[this.steps.length - 1];
+      lastStep.style.maxWidth = "none";
+      if (this.alignedFullWidth) {
+        this.stepperWidth = this.el.offsetWidth;
+        lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
+        this.lastStepWidth = lastStep.offsetWidth;
+      }
+    };
+    this.initialiseStepStates = () => {
+      this.steps.forEach((step, index) => {
+        // Set variant
+        step.variant = this.variant;
+        // Assign stepNum to each step
+        step.stepNum = index + 1;
+        // Assign lastStep to final step
+        step.lastStep = index === this.steps.length - 1;
+        step.lastStepNum = this.steps.length;
+        if (step.stepType !== "current") {
+          step.current = false;
+          this.stepTypes[index] = step.stepType;
+        }
+        else {
+          step.current = true;
+        }
+        const stepTitleArea = step.shadowRoot &&
+          step.shadowRoot.querySelector(".step > .step-title-area");
+        if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
+          if (this.variant === "compact") {
+            this.autoSetStepTitles = true;
+            if (this.autoSetStepTitles) {
+              step.stepTitle = "Step " + step.stepNum;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .setAttribute("aria-hidden", "true");
+            }
+          }
+          if (this.variant === "default") {
+            this.autoSetStepTitles = false;
+            if (!this.autoSetStepTitles) {
+              step.stepTitle = undefined;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .removeAttribute("aria-hidden");
+            }
+          }
+        }
+        if (this.variant === "compact") {
+          if (step.current === true || step.stepType === "current") {
+            step.classList.remove("hide");
+            step.classList.add("show");
+          }
+          else if (step.classList.contains("show")) {
+            step.classList.remove("show");
+            step.classList.add("hide");
+          }
+          if (!step.lastStep) {
+            step.nextStepTitle = this.steps[index + 1].stepTitle;
+            step.progress = (step.stepNum / this.steps.length) * 100;
+          }
+          else if (step.lastStep && this.stepTypes[index] !== "completed") {
+            step.progress = 95;
+          }
+          else {
+            step.progress = 100;
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.remove("visually-hidden");
+          }
+          step.compactStepStyling = this.stepTypes[index];
+        }
+        if (this.variant === "default") {
+          if (!step.lastStep) {
+            if (this.alignedFullWidth) {
+              step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
+                (this.steps.length - 1)}px`);
+              step.style.minWidth = pxToRem("148px");
+            }
+          }
+          else if (step.lastStep) {
+            step.classList.add("last-step");
+            if (this.alignedFullWidth) {
+              step.style.maxWidth = `${this.lastStepWidth}px`;
+            }
+            else {
+              step.style.maxWidth =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth + 48}px`)
+                  : pxToRem("148px");
+            }
+          }
+          if (this.aligned === "left") {
+            step.style.width =
+              this.connectorWidth > 100
+                ? pxToRem(`${this.connectorWidth + 48}px`)
+                : pxToRem("148px");
+            const stepConnect = step.shadowRoot.querySelector(".step > .step-top > .step-connect");
+            if (stepConnect) {
+              stepConnect.style.width =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth}px`)
+                  : pxToRem("100px");
+            }
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.add("visually-hidden");
+          }
+        }
+      });
+    };
+    this.overrideVariant = () => {
+      let minDefaultStepperWidth = 148 * this.steps.length;
+      if (this.aligned === "left" && this.connectorWidth > 100) {
+        minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;
+      }
+      if (this.variantOverride) {
+        if (this.el.clientWidth < minDefaultStepperWidth) {
+          this.variant = "compact";
+          this.getChildren();
+        }
+        else {
+          this.variant = "default";
+          this.getChildren();
+        }
+      }
+    };
+    this.resizeObserverCallback = () => {
+      this.getChildren();
+      this.checkStepTitles();
+      this.overrideVariant();
+      this.setStepperWidth();
+      this.initialiseStepStates();
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resizeObserverCallback();
+      });
+      this.resizeObserver.observe(this.el);
+    };
+    this.alignedFullWidth = true;
+    this.autoSetStepTitles = true;
+    this.lastStepWidth = 0;
+    this.noOfResizes = 0;
+    this.stepperWidth = document
+      .querySelector("ic-stepper")
+      .getBoundingClientRect().width;
+    this.stepTypes = [];
+    this.variantOverride = this.variant !== "compact";
+    this.aligned = "full-width";
+    this.connectorWidth = 100;
+    this.hideStepInfo = false;
+    this.variant = "default";
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.setStepTypes();
+    if (this.variant === "compact") {
+      this.variantOverride = false;
+    }
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+  }
+  render() {
+    return (h(Host, { class: {
+        [`${this.variant}`]: true,
+        ["aligned-left"]: this.variant === "default" && this.aligned === "left",
+      } }, h("ul", { class: "step-item-list" }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+Stepper.style = icStepperCss;
+
+export { Stepper as ic_stepper };
+
+//# sourceMappingURL=ic-stepper.entry.js.map

package/dist/esm/ic-stepper.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-stepper.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","./src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.step-item-list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n:host(.default:not(.aligned-left)) .step-item-list {\n  flex: auto;\n}\n\n:host(.compact) ul ::slotted(ic-step) {\n  display: none;\n}\n\n:host(.compact) ul ::slotted(ic-step.show) {\n  display: flex;\n}\n\n:host(.compact) ul ::slotted(ic-step.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State } 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\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 length of the connnector 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  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\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(\"visually-hidden\");\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(\"visually-hidden\");\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\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\n    if (this.variantOverride) {\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n        this.getChildren();\n      } else {\n        this.variant = \"default\";\n        this.getChildren();\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}