globuswebcomponents 2.2.1 → 2.2.3

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

@@ -32,15 +32,13 @@ export class GbStepBase {
         this.internalStatus = this.status;
     }
     onStatusChange(newValue, _oldValue) {
-        // console.log('state changed from', oldValue, 'to', newValue);
         this.internalStatus = newValue;
     }
     onStateChange(newValue, _oldValue) {
-        // console.log('state changed from', oldValue, 'to', newValue);
         this.internalState = newValue;
     }
     render() {
-        return (h(Fragment, null, this.type === 'text_line' && (h(Fragment, null, h("div", { key: 'd197cda8967dc47f67fee38c93abe30cb6fa73b5', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (h("div", { key: '209c916094fa952cf3b07eff5facb1898d6f89b2', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, h("div", { key: '5c805d6726442f8ffe71185a876fd73ceb8846d8', class: `text_line_div_content` }, h("p", { key: '20ca0f49896437eb010fae0db2e4a384e40f288d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && h("p", { key: '4977400f42bf67931c2895525fa0a29e239043ee', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (h("div", { key: 'd4fb9636a2f2e88e06c776024dc8b2fad4b54e7f', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'f2c5769d286e3deceaa11470d3937144e8b84116', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: 'a49d1cb3cb41f2bfff6723f2edeedb48d46a80b7', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '952a0b17a6dcdeaace0c0ff533792a0a06789291', 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" }))))), this.type === 'icon_left' && (h("div", { key: '971edae2fddee1b0386b831bed2461a44addbb2b', class: `icon_left_div ${this.size}` }, h("div", { key: 'd6814c9efcf56e9fd9630d4fd0c8b1e4fafe6d46', class: "connector_wrap" }, h("div", { key: '62f20a42b689dc0b733693e4ae1871e421eb8399', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '09b77f392d830fdfb7408c421a7ce7be96d6411e', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '22d8d7528472560b45d001cf49dc9b90452c90d1', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '20bc5d226c395a9868484bb8c3c10f70465704a5', 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" })))), this.connector && (h("div", { key: 'ac08c6d5b4596095d13e58abde396a01f931903a', class: "connector_div" }, h("div", { key: '58eb090ad3b2fcb7c2bcea42ca1d0d08c1a94b68', class: `icon_left_connector ${this.internalState} ${this.status}` })))), h("div", { key: 'dfd500500d90d40530d4f80a8e012855a6e34d0b', class: "icon_left_text" }, h("p", { key: '7d6c6f4da8212997146bbdf5dcbc49f363cbab8d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: '402e14cadbb5f8f3099c038d5156c41ccae9d684', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (h("div", { key: '0058feab3ef09691c06111aeb2d7666696dff16e', class: `icon_top_div ${this.size}` }, h("div", { key: 'b2694b111ded7c66557cee64c874d65161509358', class: "step_icon_div" }, h("div", { key: 'b0ed79c575c6b2c98e5c816b958904f2c3fe1949', class: "step_icon" }, h("div", { key: '719401ee837e076038e22a5c1e46a38e09cbb377', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'c00555b55fb6bc29e0cd4d3c029b8cac15380caa', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '90635691a01b9ecfa289fad10814fa2da4918601', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '78f78478e446201a432ced1fa6edbb8214ae984d', 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" })))), this.connector && (h("div", { key: 'd18478afc3a5517574f6a7d73d5aec5674ebe28b', class: "connector_div" }, h("div", { key: '6ace46d99cf6818a5d5603db62cac2978680fa65', class: `icon_top_connector ${this.internalState} ${this.status}` }))))), h("div", { key: 'f33fe99fadb710b5e360d39f23b4b6d05ec840db', class: "icon_top_content" }, h("p", { key: '9190515cdcd656c37bbd2f5e171daa9cd09d38ce', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'f40cf800bef991de3ba45cf4ce9f947907f813a1', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (h("div", { key: '96895d62af946e5fc26fdcf2947a822713d7796d', class: "featured_icon_left_div" }, h("div", { key: '8bd885e322470f6c5eac395bf45cf515f2ad54f5', class: "connector_wrap" }, h("gb-featured-icon", { key: '01f832f432780897884edd8c57f67cfad2638b35', size: this.size, icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), h("div", { key: 'f76dfcfd6d6c0b53bc522ad68e145dbf0627f998', class: "connector_div" }, h("div", { key: 'ba0cc3fa367b4d84ed339d882557f24c76ce8438', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` }))), h("div", { key: '3a18113a42d0c599a473651059eec897645f95ef', class: "featured_icon_left_content" }, h("p", { key: 'ae53fe14e9c91733446fea7406590c751ac64435', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'e2769ad2e665216813413fcf3d6c40514a9c6b2c', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
+        return (h(Fragment, null, this.type === 'text_line' && (h(Fragment, null, h("div", { key: '5f246274ec3d2257023d32b66efa66fa8a0100e5', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (h("div", { key: 'f778520c9ff9168d93ee89d5275db5cbcfb8bd95', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, h("div", { key: '7585fe7f46dad5b23d434b9cb02fe7043a29013d', class: `text_line_div_content` }, h("p", { key: '0c7c59d9946fa6af63ca9507cf7414e2131f85ee', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && h("p", { key: '5df15f6eecdb793f615561276891be5b8b8613c0', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (h("div", { key: 'a5f1fec179a1ee061bf25403023e6c25becaf605', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '45c8926c51b5cde322e65994039371df0a4f555e', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '025031bab54d7fbd2adbddf876cfcd8d298b9bfd', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '8ba831844041c666d094787e2e7264f694778d45', 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" }))))), this.type === 'icon_left' && (h("div", { key: 'bc53e193812a565d28b484fd71c370f1be48c5f0', class: `icon_left_div ${this.size}` }, h("div", { key: '2d1b0a025387db3e20c6b837ed906b05c5e3cf0b', class: "connector_wrap" }, h("gb-step-icon-base", { key: '92e8d29fff8910ffd780dff1754b619726dcbf40', size: this.size, status: this.internalStatus, state: this.internalState }), this.connector && (h("div", { key: '7b77c6a3beda827997a4b6f896dc574ee349bf2f', class: "connector_div" }, h("div", { key: '33d5c41ce2c5b8d7d6eba998f26a83ff349ebc98', class: `icon_left_connector ${this.internalState} ${this.status}` })))), h("div", { key: '026533b1d2ed27d32cf83a3008ad9f0f7d4c2172', class: "icon_left_text" }, h("p", { key: 'a900ed23e5f6530881ea6881473865a6b0ee5150', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: '1de04cfdc538b0496093830014441717354234df', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (h("div", { key: '8c769a7be8c168e611ee678a89246eb304c29fcd', class: `icon_top_div ${this.size}` }, h("div", { key: 'd9b9f800cbe9677a8cc2f50de3b8a561d4f4389a', class: "step_icon_div" }, h("div", { key: 'ce3f48a85a7d1cab1ab13a47b1d2c5ab9eb5822a', class: "step_icon" }, h("div", { key: '178e02db52dc5e26ac66f840cecf427fa8ceb273', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '26150628f97962ad6e6638293abb3087a9e375f3', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '4eb67ced9d408bbbc40d1234a4cdb7cc3ab1e99a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '4baef58be43caac1c31baad95870dd8525bbe559', 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" })))))), h("div", { key: '4534403b9e087e32e77ac7a224c5c1b3368947b5', class: "icon_top_content" }, h("p", { key: '0d67a0f48310c6c58bf438cf410ab6851d042d0a', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'c62f8a16757613f8e11e1dffe7cc13f6ca4b5d21', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (h("div", { key: '6e0f7827423db8cd6d2395241b9009b27324e7fe', class: "featured_icon_left_div" }, h("div", { key: '29bb3e22b722517017d96f713c714702bf26ce4e', class: "connector_wrap" }, h("gb-featured-icon", { key: 'e9c75f6dbf04187fa91d248e6eab5b6244249921', size: this.size, icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), h("div", { key: '50e9c616e9b07c2e7ca1ca8163ed4cb4e01e30c9', class: "connector_div" }, h("div", { key: '718455e6b32cc47eeeea2e11af25d82174d78d8e', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` }))), h("div", { key: 'acab0c1c8bd0e34b4c289fd3c0e5c58128debeae', class: "featured_icon_left_content" }, h("p", { key: 'aa60367e6ecd51d062ce7d7043bf16a2e988f48d', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), h("p", { key: '628632410bc9b78ff92b8c0667ade3d8ac132779', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
     }
     static get is() { return "gb-step-base"; }
     static get encapsulation() { return "shadow"; }
@@ -255,6 +253,31 @@ export class GbStepBase {
                 "attribute": "supporting-text",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreakPoints",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {
+                        "BreakPoints": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::BreakPoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "breakpoint",
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-step-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-base/gb-step-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-step-base',\r\n  styleUrl: 'gb-step-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepBase {\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: ProgressStepTypes;\r\n  @Prop() state: ProgressStepStates;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() showContent: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n\r\n  featuredIconLeftLabelClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  featuredIconLeftTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n    }\r\n  }\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    // console.log('state changed from', oldValue, 'to', newValue);\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    // console.log('state changed from', oldValue, 'to', newValue);\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'text_line' && (\r\n          <>\r\n            <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n            {this.showContent && (\r\n              <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n                <div class={`text_line_div_content`}>\r\n                  <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n                  {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'icon_only' && (\r\n          <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n            {this.status !== 'complete' && <div class={`dot ${this.status} ${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.status} ${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        {this.type === 'icon_left' && (\r\n          <div class={`icon_left_div ${this.size}`}>\r\n            <div class=\"connector_wrap\">\r\n              <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                {this.status !== 'complete' && <div class={`dot ${this.status} ${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.status} ${this.internalState} ${this.size}`}>\r\n                    <path\r\n                      d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                      stroke=\"#075DB2\"\r\n                      stroke-width=\"2\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                )}\r\n              </div>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"icon_left_text\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_top' && (\r\n          <div class={`icon_top_div ${this.size}`}>\r\n            <div class=\"step_icon_div\">\r\n              <div class=\"step_icon\">\r\n                <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                  {this.status !== 'complete' && <div class={`dot ${this.status} ${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.status} ${this.internalState} ${this.size}`}>\r\n                      <path\r\n                        d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                        stroke=\"#075DB2\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n                {this.connector && (\r\n                  <div class=\"connector_div\">\r\n                    <div class={`icon_top_connector ${this.internalState} ${this.status}`}></div>\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </div>\r\n            <div class=\"icon_top_content\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'featured_icon_left' && (\r\n          <div class=\"featured_icon_left_div\">\r\n            <div class=\"connector_wrap\">\r\n              <gb-featured-icon size={this.size} icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n              <div class=\"connector_div\">\r\n                <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"featured_icon_left_content\">\r\n              <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-step-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-base/gb-step-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ3E,MAAM,OAAO,UAAU;IALvB;QAUU,cAAS,GAAY,KAAK,CAAC;QAC3B,gBAAW,GAAY,KAAK,CAAC;QAC7B,uBAAkB,GAAY,KAAK,CAAC;QACpC,UAAK,GAAW,EAAE,CAAC;QACnB,mBAAc,GAAW,EAAE,CAAC;KA+HrC;IA1HC,4BAA4B;QAC1B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,2BAA2B;QACzB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,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;YACG,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B;gBACE,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,GAAQ;gBAC1E,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE;oBAC3E,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;wBACnG,IAAI,CAAC,kBAAkB,IAAI,0DAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CAClI,CACF,CACP,CACA,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC1E,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;gBACzG,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,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;oBAC5J,6DAAM,CAAC,EAAC,uEAAuE,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAG,CAC/J,CACP,CACG,CACP;YACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE;gBACtC,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,0EAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,GAAsB;oBAC/G,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,GAAQ,CAC1E,CACP,CACG;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBACpG,0DAAG,KAAK,EAAE,kBAAkB,IAAI,CAAC,UAAU,oBAAoB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CACzH,CACF,CACP;YACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;gBACrC,4DAAK,KAAK,EAAC,eAAe;oBACxB,4DAAK,KAAK,EAAC,WAAW;wBACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;4BAC1E,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;4BACzG,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,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gCAC5J,6DACE,CAAC,EAAC,uEAAuE,EACzE,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACG,CACF,CACF;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBACpG,0DAAG,KAAK,EAAE,kBAAkB,IAAI,CAAC,UAAU,oBAAoB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CACzH,CACF,CACP;YACA,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,CACrC,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,yEAAkB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,iBAAiB,EAAC,WAAW,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAqB;oBAC/I,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAE,gCAAgC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,GAAQ,CAChG,CACF;gBACN,4DAAK,KAAK,EAAC,4BAA4B;oBACrC,0DAAG,KAAK,EAAE,4BAA4B,IAAI,CAAC,4BAA4B,EAAE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBAClI,0DAAG,KAAK,EAAE,2BAA2B,IAAI,CAAC,2BAA2B,EAAE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CACrI,CACF,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { BreakPoints, GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-step-base',\r\n  styleUrl: 'gb-step-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepBase {\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: ProgressStepTypes;\r\n  @Prop() state: ProgressStepStates;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() showContent: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n  @Prop() breakpoint: BreakPoints;\r\n\r\n  featuredIconLeftLabelClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  featuredIconLeftTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n    }\r\n  }\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      <>\r\n        {this.type === 'text_line' && (\r\n          <>\r\n            <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n            {this.showContent && (\r\n              <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n                <div class={`text_line_div_content`}>\r\n                  <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n                  {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'icon_only' && (\r\n          <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n            {this.status !== 'complete' && <div class={`dot ${this.status} ${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.status} ${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        {this.type === 'icon_left' && (\r\n          <div class={`icon_left_div ${this.size}`}>\r\n            <div class=\"connector_wrap\">\r\n              <gb-step-icon-base size={this.size} status={this.internalStatus} state={this.internalState}></gb-step-icon-base>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"icon_left_text\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_top' && (\r\n          <div class={`icon_top_div ${this.size}`}>\r\n            <div class=\"step_icon_div\">\r\n              <div class=\"step_icon\">\r\n                <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                  {this.status !== 'complete' && <div class={`dot ${this.status} ${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.status} ${this.internalState} ${this.size}`}>\r\n                      <path\r\n                        d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                        stroke=\"#075DB2\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"icon_top_content\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'featured_icon_left' && (\r\n          <div class=\"featured_icon_left_div\">\r\n            <div class=\"connector_wrap\">\r\n              <gb-featured-icon size={this.size} icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n              <div class=\"connector_div\">\r\n                <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"featured_icon_left_content\">\r\n              <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}"]}