globuswebcomponents 2.2.2 → 2.2.3

package/dist/collection/components/gb-step-icon-base/gb-step-icon-base.js

@@ -0,0 +1,123 @@
+import { h } from "@stencil/core";
+export class GbStepIconBase {
+    componentWillLoad() {
+        this.internalState = this.state;
+        this.internalStatus = this.status;
+    }
+    onStatusChange(newValue, _oldValue) {
+        this.internalStatus = newValue;
+    }
+    onStateChange(newValue, _oldValue) {
+        this.internalState = newValue;
+    }
+    render() {
+        return (h("div", { key: '55970c4dffae615e8d8d965cd22d403732c2d6ad', class: `icon_base_div ${this.internalStatus} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '46dd645ca62620affdf616a8817dc2a159bdc0d6', class: `dot ${this.internalStatus} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '4b87abc2a25bcc8d72b4de46ed7b95964c4244ba', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.internalStatus} ${this.internalState} ${this.size}` }, h("path", { key: '2688cd0fde0deecbdfa8ecd52fb32cf11dd8f503', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+    }
+    static get is() { return "gb-step-icon-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-step-icon-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-step-icon-base.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProgressStepStatus",
+                    "resolved": "\"complete\" | \"current\" | \"incomplete\"",
+                    "references": {
+                        "ProgressStepStatus": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ProgressStepStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProgressStepStates",
+                    "resolved": "\"default\" | \"destructive\"",
+                    "references": {
+                        "ProgressStepStates": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ProgressStepStates"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalState": {},
+            "internalStatus": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "status",
+                "methodName": "onStatusChange"
+            }, {
+                "propName": "state",
+                "methodName": "onStateChange"
+            }];
+    }
+}
+//# sourceMappingURL=gb-step-icon-base.js.map

package/dist/collection/components/gb-step-icon-base/gb-step-icon-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-step-icon-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-icon-base/gb-step-icon-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,cAAc;IAOzB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;IACpC,CAAC;IAGD,cAAc,CAAC,QAA4B,EAAE,SAA6B;QACxE,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACjC,CAAC;IAGD,aAAa,CAAC,QAA4B,EAAE,SAA6B;QACvE,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;YAClF,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;YACjH,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,CAC7B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gBACpK,6DAAM,CAAC,EAAC,uEAAuE,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAG,CAC/J,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, ProgressStepStatus, ProgressStepStates } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-step-icon-base',\r\n  styleUrl: 'gb-step-icon-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepIconBase {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() state: ProgressStepStates;\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalStatus = this.status;\r\n  }\r\n\r\n  @Watch('status')\r\n  onStatusChange(newValue: ProgressStepStatus, _oldValue: ProgressStepStatus) {\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`icon_base_div ${this.internalStatus} ${this.internalState} ${this.size}`}>\r\n        {this.status !== 'complete' && <div class={`dot ${this.internalStatus} ${this.internalState} ${this.size}`}></div>}\r\n        {this.status === 'complete' && (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.internalStatus} ${this.internalState} ${this.size}`}>\r\n            <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.css

@@ -1,3 +1,40 @@
-.step_div{
-    display: flex;
-}
+.icons_centered_div{
+  display: inline-flex;
+padding: 0rem 9rem;
+flex-direction: column;
+align-items: center;
+}
+
+.step_div {
+  display: flex;
+}
+
+.connector_div {
+  min-width: -50px;
+  width: 100%;
+  background: transparent;
+  padding: 13px;
+}
+
+.icon_top_connector {
+  background-color: blue;
+  margin-left: -6rem;
+  margin-right: -6rem;
+  height: 0.13rem;
+  border-radius: 5px;
+}
+
+.icon_top_connector.default.incomplete,
+.icon_top_connector.default.current {
+  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */
+}
+
+.icon_top_connector.default.complete {
+  background-color: var(--color-border-selected, #075db2);
+}
+
+.icon_top_connector.incomplete.destructive,
+.icon_top_connector.current.destructive,
+.icon_top_connector.complete.destructive {
+  background-color: var(--color-border-danger, #b51726);
+}

package/dist/collection/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.js

@@ -6,19 +6,30 @@ export class GbStepperHorizontalIconsCentered {
                 state: 'default',
                 status: 'complete',
                 label: 'First Step',
-                supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
+                supportingText: 'Please provide your name and email',
             },
             {
                 state: 'default',
                 status: 'current',
                 label: 'Second Step',
+                supportingText: 'A few details about your company',
+            },
+            {
+                state: 'default',
+                status: 'incomplete',
+                label: 'Third Step',
+                supportingText: 'Start collaborating with your team',
+            },
+            {
+                state: 'default',
+                status: 'incomplete',
+                label: 'Fourth Step',
                 supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
             },
         ];
-        this.connector = false;
     }
     render() {
-        return (h(Fragment, null, this.type === 'icon' && (h("div", { key: '602135ea7fcec8bd3da9238869c5f740eec72b29', class: "icons_centered_div" }, this.breakpoint === 'desktop' && (h("div", { key: '3798a00cabc36885cac6850e8ecdf387190317c4', class: "step_div" }, this.steps.map((step, index) => (h(Fragment, null, h("gb-step-base", { size: this.size, type: "icon_top", state: step.state, status: step.status, connector: index === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText })))))), this.breakpoint === 'mobile' && (h(Fragment, null, this.steps.map((step, index) => (h(Fragment, null, h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText }))))))))));
+        return (h(Fragment, null, this.type === 'icon' && (h("div", { key: '7fc3edab36076f823173c8c9d1ceae064fabd5ce', class: "icons_centered_div" }, this.breakpoint === 'desktop' && (h("div", { key: 'e44763146843e90e6925c6d83ca8f77a6913f65d', class: "step_div" }, this.steps.map((step, index) => (h(Fragment, null, h("gb-step-base", { size: this.size, type: "icon_top", state: step.state, status: step.status, connector: index === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText, breakpoint: "desktop" }), index !== this.steps.length - 1 ? (h("div", { class: "connector_div" }, h("div", { class: `icon_top_connector ${step.state} ` }))) : null))))), this.breakpoint === 'mobile' && (h(Fragment, null, this.steps.map((step, index) => (h(Fragment, null, h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index === this.steps.length - 1 ? false : true, label: step.label, "supporting-text": step.supportingText }))))))))));
     }
     static get is() { return "gb-stepper-horizontal-icons-centered"; }
     static get encapsulation() { return "shadow"; }
@@ -81,7 +92,7 @@ export class GbStepperHorizontalIconsCentered {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      state: 'default',\r\n      status: 'complete',\r\n      label: 'First Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'current',\r\n      label: 'Second Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n  ]"
+                "defaultValue": "[\r\n    {\r\n      state: 'default',\r\n      status: 'complete',\r\n      label: 'First Step',\r\n      supportingText: 'Please provide your name and email',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'current',\r\n      label: 'Second Step',\r\n      supportingText: 'A few details about your company',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'incomplete',\r\n      label: 'Third Step',\r\n      supportingText: 'Start collaborating with your team',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'incomplete',\r\n      label: 'Fourth Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n  ]"
             },
             "type": {
                 "type": "string",
@@ -129,10 +140,5 @@ export class GbStepperHorizontalIconsCentered {
             }
         };
     }
-    static get states() {
-        return {
-            "connector": {}
-        };
-    }
 }
 //# sourceMappingURL=gb-stepper-horizontal-icons-centered.js.map

package/dist/collection/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-stepper-horizontal-icons-centered.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQpE,MAAM,OAAO,gCAAgC;IAL7C;QAOU,UAAK,GAAkB;YAC7B;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,UAAU;gBAClB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,gEAAgE;aACjF;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,aAAa;gBACpB,cAAc,EAAE,gEAAgE;aACjF;SACF,CAAC;QAGO,cAAS,GAAY,KAAK,CAAC;KA8CrC;IA5CC,MAAM;QACJ,OAAO,CACL,kBACG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,oBAAoB;YAC5B,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,CAChC,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B;gBACE,oBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,IAAI,CAAC,cAAc,GACtB,CACf,CACJ,CAAC,CACE,CACP;YACA,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,CAC/B,kBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B;gBACE,oBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,IAAI,CAAC,cAAc,GACtB,CACf,CACJ,CAAC,CACD,CACJ,CACG,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, State } from '@stencil/core';\r\nimport { BreakPoints, GeneralSizes, StepperType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-stepper-horizontal-icons-centered',\r\n  styleUrl: 'gb-stepper-horizontal-icons-centered.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepperHorizontalIconsCentered {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() steps: StepperType[] = [\r\n    {\r\n      state: 'default',\r\n      status: 'complete',\r\n      label: 'First Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'current',\r\n      label: 'Second Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n  ];\r\n  @Prop() type: 'icon' | 'featured_icon';\r\n  @Prop() breakpoint: BreakPoints;\r\n  @State() connector: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'icon' && (\r\n          <div class=\"icons_centered_div\">\r\n            {this.breakpoint === 'desktop' && (\r\n              <div class=\"step_div\">\r\n                {this.steps.map((step, index) => (\r\n                  <>\r\n                    <gb-step-base\r\n                      size={this.size}\r\n                      type=\"icon_top\"\r\n                      state={step.state}\r\n                      status={step.status}\r\n                      connector={index === this.steps.length - 1 ? false : true}\r\n                      label={step.label}\r\n                      supporting-text={step.supportingText}\r\n                    ></gb-step-base>\r\n                  </>\r\n                ))}\r\n              </div>\r\n            )}\r\n            {this.breakpoint === 'mobile' && (\r\n              <>\r\n                {this.steps.map((step, index) => (\r\n                  <>\r\n                    <gb-step-base\r\n                      size={this.size}\r\n                      type=\"icon_left\"\r\n                      state={step.state}\r\n                      status={step.status}\r\n                      connector={index === this.steps.length - 1 ? false : true}\r\n                      label={step.label}\r\n                      supporting-text={step.supportingText}\r\n                    ></gb-step-base>\r\n                  </>\r\n                ))}\r\n              </>\r\n            )}\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-stepper-horizontal-icons-centered.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-horizontal-icons-centered/gb-stepper-horizontal-icons-centered.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,gCAAgC;IAL7C;QAOU,UAAK,GAAkB;YAC7B;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,UAAU;gBAClB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,oCAAoC;aACrD;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,aAAa;gBACpB,cAAc,EAAE,kCAAkC;aACnD;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,oCAAoC;aACrD;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,aAAa;gBACpB,cAAc,EAAE,gEAAgE;aACjF;SACF,CAAC;KAsDH;IAlDC,MAAM;QACJ,OAAO,CACL,kBACG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,oBAAoB;YAC5B,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,CAChC,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B;gBACE,oBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,IAAI,CAAC,cAAc,EACpC,UAAU,EAAC,SAAS,GACN;gBACf,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjC,WAAK,KAAK,EAAC,eAAe;oBACxB,WAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,KAAK,GAAG,GAAQ,CACnD,CACP,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAC,CACE,CACP;YACA,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,CAC/B,kBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B;gBACE,oBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,IAAI,CAAC,cAAc,GACtB,CACf,CACJ,CAAC,CACD,CACJ,CACG,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment } from '@stencil/core';\r\nimport { BreakPoints, GeneralSizes, StepperType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-stepper-horizontal-icons-centered',\r\n  styleUrl: 'gb-stepper-horizontal-icons-centered.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepperHorizontalIconsCentered {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() steps: StepperType[] = [\r\n    {\r\n      state: 'default',\r\n      status: 'complete',\r\n      label: 'First Step',\r\n      supportingText: 'Please provide your name and email',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'current',\r\n      label: 'Second Step',\r\n      supportingText: 'A few details about your company',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'incomplete',\r\n      label: 'Third Step',\r\n      supportingText: 'Start collaborating with your team',\r\n    },\r\n    {\r\n      state: 'default',\r\n      status: 'incomplete',\r\n      label: 'Fourth Step',\r\n      supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n    },\r\n  ];\r\n  @Prop() type: 'icon' | 'featured_icon';\r\n  @Prop() breakpoint: BreakPoints;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'icon' && (\r\n          <div class=\"icons_centered_div\">\r\n            {this.breakpoint === 'desktop' && (\r\n              <div class=\"step_div\">\r\n                {this.steps.map((step, index) => (\r\n                  <>\r\n                    <gb-step-base\r\n                      size={this.size}\r\n                      type=\"icon_top\"\r\n                      state={step.state}\r\n                      status={step.status}\r\n                      connector={index === this.steps.length - 1 ? false : true}\r\n                      label={step.label}\r\n                      supporting-text={step.supportingText}\r\n                      breakpoint=\"desktop\"\r\n                    ></gb-step-base>\r\n                    {index !== this.steps.length - 1 ? (\r\n                      <div class=\"connector_div\">\r\n                        <div class={`icon_top_connector ${step.state} `}></div>\r\n                      </div>\r\n                    ) : null}\r\n                  </>\r\n                ))}\r\n              </div>\r\n            )}\r\n            {this.breakpoint === 'mobile' && (\r\n              <>\r\n                {this.steps.map((step, index) => (\r\n                  <>\r\n                    <gb-step-base\r\n                      size={this.size}\r\n                      type=\"icon_left\"\r\n                      state={step.state}\r\n                      status={step.status}\r\n                      connector={index === this.steps.length - 1 ? false : true}\r\n                      label={step.label}\r\n                      supporting-text={step.supportingText}\r\n                    ></gb-step-base>\r\n                  </>\r\n                ))}\r\n              </>\r\n            )}\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.js

@@ -41,7 +41,7 @@ export class GbStepperHorizontalLineWithText {
         this.showSupportingText = this.width < 768 ? false : true;
     }
     render() {
-        return (h("div", { key: '6a786a75a71ef8499c0cd51dbfa69aaa46b01a30', class: "text_with_line" }, this.internalSteps.map(step => (h("gb-step-base", { size: this.size, type: "text_line", state: step.state, status: step.status, label: step.label, "supporting-text": step.supportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })))));
+        return (h("div", { key: '2b8ded8d6b193ff677655a5b0e8dd9146965924b', class: "text_with_line" }, this.internalSteps.map(step => (h("gb-step-base", { size: this.size, type: "text_line", state: step.state, status: step.status, label: step.label, "supporting-text": step.supportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })))));
     }
     static get is() { return "gb-stepper-horizontal-line-with-text"; }
     static get encapsulation() { return "shadow"; }