globuswebcomponents 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gb-action-panel_16.cjs.entry.js +1 -1
- package/dist/cjs/gb-action-panel_16.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-step-base/gb-step-base.js +1 -1
- package/dist/collection/components/gb-step-base/gb-step-base.js.map +1 -1
- package/dist/components/gb-progress-steps.js +1 -1
- package/dist/components/gb-step-base.js +1 -1
- package/dist/components/gb-stepper-horizontal-line-with-text.js +1 -1
- package/dist/components/{p-5d3a4cb3.js → p-f01d693a.js} +2 -2
- package/dist/components/p-f01d693a.js.map +1 -0
- package/dist/docs.json +1 -1
- package/dist/esm/gb-action-panel_16.entry.js +1 -1
- package/dist/esm/gb-action-panel_16.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-9794e598.entry.js → p-c11d7963.entry.js} +2 -2
- package/dist/globuscomponents/{p-9794e598.entry.js.map → p-c11d7963.entry.js.map} +1 -1
- package/package.json +1 -1
- package/dist/components/p-5d3a4cb3.js.map +0 -1
|
@@ -11,7 +11,7 @@ export class GbStepBase {
|
|
|
11
11
|
this.supportingText = '';
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Fragment, null, this.type === 'text_line' && (h("div", { key: '511bc306396b89f3f8e16bac5151439a637a8987', class: `text_line_div ${this.size} ${this.status} ${this.state}` }, h("div", { key: '4f74f6102f1cc12dfb5557ced02ec8564500c1c0', class: `text_line_div_content` }, h("p", { key: '820db3d390f01a55492510859855fe449cfab90d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` },
|
|
14
|
+
return (h(Fragment, null, this.type === 'text_line' && (h("div", { key: '511bc306396b89f3f8e16bac5151439a637a8987', class: `text_line_div ${this.size} ${this.status} ${this.state}` }, h("div", { key: '4f74f6102f1cc12dfb5557ced02ec8564500c1c0', class: `text_line_div_content` }, h("p", { key: '820db3d390f01a55492510859855fe449cfab90d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` }, this.label), h("p", { key: '518c684408b1b811c13cc96cc9e288bd6f6ad843', class: `text_line_text text-xs-regular ${this.status} ${this.state}` }, this.supportingText)))), this.type === 'icon_only' && (h("div", { key: 'efb2b087b9e06fb0f20b3d53126d8500d9c55dd4', class: `icon_only_div ${this.status} ${this.state} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'ddc8f5d970cbb18e942aff2a696999547a6b0420', class: `dot ${this.status} ${this.state} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '7cbda2a849e95c8eeb84f31838e1dacb796c618e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.state} ${this.size}` }, h("path", { key: '74cba08b4bd739b2c02b2a2844bd32e03d73fe1e', 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: 'f30545cd6741d924d16904b5e3e1827ca20a8efe', class: `icon_left_div ${this.size}` }, h("div", { key: '93689ab7ef718f1774752c4cf7aa2d67ea7bc732', class: "connector_wrap" }, h("div", { key: '58032c5e54c9e6e988594eabb01ae44827804486', class: `icon_only_div ${this.status} ${this.state} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'f5727a1f02db8e7bcb52e2527e525ef8bea2dea5', class: `dot ${this.status} ${this.state} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '57b55fa39ccbe497f145483cbabb1174fbd44d28', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.state} ${this.size}` }, h("path", { key: '9a430c22335094c46c214f8e64178987893e2c57', 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: 'c55162095fc16766743b78c5f733f246714a9aef', class: "connector_div" }, h("div", { key: '80b8e859f58ae67369d77bfcb55c621453d11af4', class: `connector ${this.state} ${this.status}` })))), h("div", { key: '0ef8f0b9cd539faded4804034e38e7dcd0f37497', class: "icon_left_text" }, h("p", { key: 'db894bfc10717b9946a511bdaf15f76ca8e6415f', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` }, this.label), h("p", { key: 'ac806057c237c3cb79151fea64ed63c7b02838d2', class: `text_line_text text-xs-regular ${this.status} ${this.state}` }, this.supportingText))))));
|
|
15
15
|
}
|
|
16
16
|
static get is() { return "gb-step-base"; }
|
|
17
17
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,UAAU;;;;;;yBAKQ,KAAK;kCACI,KAAK;qBACnB,EAAE;8BACO,EAAE;;IAEnC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;gBACnE,4DAAK,KAAK,EAAE,uBAAuB;oBACjC,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,
|
|
1
|
+
{"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,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,UAAU;;;;;;yBAKQ,KAAK;kCACI,KAAK;qBACnB,EAAE;8BACO,EAAE;;IAEnC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;gBACnE,4DAAK,KAAK,EAAE,uBAAuB;oBACjC,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBAC5F,0DAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CAC9F,CACF,CACP;YACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE;gBAClE,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;gBACjG,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,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE;oBACpJ,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,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE;wBAClE,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;wBACjG,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,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE;4BACpJ,6DACE,CAAC,EAAC,uEAAuE,EACzE,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACG;oBACL,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,GAAQ,CACxD,CACP,CACG;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBAC5F,0DAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CAC9F,CACF,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment } 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() showSupportingText: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() supportingText: string = '';\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.type === 'text_line' && (\r\n <div class={`text_line_div ${this.size} ${this.status} ${this.state}`}>\r\n <div class={`text_line_div_content`}>\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.state}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'icon_only' && (\r\n <div class={`icon_only_div ${this.status} ${this.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${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.state} ${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.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${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.state} ${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={`connector ${this.state} ${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.state}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment } from './p-ad960c29.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-f01d693a.js';
|
|
3
3
|
|
|
4
4
|
const gbProgressStepsCss = "";
|
|
5
5
|
const GbProgressStepsStyle0 = gbProgressStepsCss;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-ad960c29.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-f01d693a.js';
|
|
3
3
|
|
|
4
4
|
const gbStepperHorizontalLineWithTextCss = ".text_with_line{display:flex;width:100%;align-items:stretch;gap:var(--spacing-4)}gb-step-base{width:100%}";
|
|
5
5
|
const GbStepperHorizontalLineWithTextStyle0 = gbStepperHorizontalLineWithTextCss;
|
|
@@ -18,7 +18,7 @@ const GbStepBase = /*@__PURE__*/ proxyCustomElement(class GbStepBase extends H {
|
|
|
18
18
|
this.supportingText = '';
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (h(Fragment, null, this.type === 'text_line' && (h("div", { key: '511bc306396b89f3f8e16bac5151439a637a8987', class: `text_line_div ${this.size} ${this.status} ${this.state}` }, h("div", { key: '4f74f6102f1cc12dfb5557ced02ec8564500c1c0', class: `text_line_div_content` }, h("p", { key: '820db3d390f01a55492510859855fe449cfab90d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` },
|
|
21
|
+
return (h(Fragment, null, this.type === 'text_line' && (h("div", { key: '511bc306396b89f3f8e16bac5151439a637a8987', class: `text_line_div ${this.size} ${this.status} ${this.state}` }, h("div", { key: '4f74f6102f1cc12dfb5557ced02ec8564500c1c0', class: `text_line_div_content` }, h("p", { key: '820db3d390f01a55492510859855fe449cfab90d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` }, this.label), h("p", { key: '518c684408b1b811c13cc96cc9e288bd6f6ad843', class: `text_line_text text-xs-regular ${this.status} ${this.state}` }, this.supportingText)))), this.type === 'icon_only' && (h("div", { key: 'efb2b087b9e06fb0f20b3d53126d8500d9c55dd4', class: `icon_only_div ${this.status} ${this.state} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'ddc8f5d970cbb18e942aff2a696999547a6b0420', class: `dot ${this.status} ${this.state} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '7cbda2a849e95c8eeb84f31838e1dacb796c618e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.state} ${this.size}` }, h("path", { key: '74cba08b4bd739b2c02b2a2844bd32e03d73fe1e', 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: 'f30545cd6741d924d16904b5e3e1827ca20a8efe', class: `icon_left_div ${this.size}` }, h("div", { key: '93689ab7ef718f1774752c4cf7aa2d67ea7bc732', class: "connector_wrap" }, h("div", { key: '58032c5e54c9e6e988594eabb01ae44827804486', class: `icon_only_div ${this.status} ${this.state} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'f5727a1f02db8e7bcb52e2527e525ef8bea2dea5', class: `dot ${this.status} ${this.state} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '57b55fa39ccbe497f145483cbabb1174fbd44d28', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.state} ${this.size}` }, h("path", { key: '9a430c22335094c46c214f8e64178987893e2c57', 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: 'c55162095fc16766743b78c5f733f246714a9aef', class: "connector_div" }, h("div", { key: '80b8e859f58ae67369d77bfcb55c621453d11af4', class: `connector ${this.state} ${this.status}` })))), h("div", { key: '0ef8f0b9cd539faded4804034e38e7dcd0f37497', class: "icon_left_text" }, h("p", { key: 'db894bfc10717b9946a511bdaf15f76ca8e6415f', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` }, this.label), h("p", { key: 'ac806057c237c3cb79151fea64ed63c7b02838d2', class: `text_line_text text-xs-regular ${this.status} ${this.state}` }, this.supportingText))))));
|
|
22
22
|
}
|
|
23
23
|
static get style() { return GbStepBaseStyle0; }
|
|
24
24
|
}, [1, "gb-step-base", {
|
|
@@ -48,4 +48,4 @@ defineCustomElement();
|
|
|
48
48
|
|
|
49
49
|
export { GbStepBase as G, defineCustomElement as d };
|
|
50
50
|
|
|
51
|
-
//# sourceMappingURL=p-
|
|
51
|
+
//# sourceMappingURL=p-f01d693a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-f01d693a.js","mappings":"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","names":[],"sources":["src/components/gb-step-base/gb-step-base.css?tag=gb-step-base&encapsulation=shadow","src/components/gb-step-base/gb-step-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* Text Line Styles */\r\n.text_line_div{\r\n display: flex;\r\n width: 100%;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n}\r\n\r\n.text_line_div.sm{\r\n padding-top: var(--spacing-3);\r\n}\r\n\r\n.text_line_div.md{\r\n padding-top: var(--spacing-4);\r\n}\r\n\r\n.text_line_div.lg{\r\n padding-top: var(--spacing-5);\r\n}\r\n\r\n.text_line_div.default.incomplete{\r\n border-top: 4px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.text_line_div.default.current,\r\n.text_line_div.default.complete{\r\n border-top: 4px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.text_line_div.incomplete.destructive,\r\n.text_line_div.current.destructive,\r\n.text_line_div.complete.destructive{\r\n border-top: 4px solid var(--color-border-danger, #B51726);\r\n}\r\n\r\n.text_line_div_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.text_line_label.default.incomplete,\r\n.text_line_label.default.complete{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.text_line_label.default.current,\r\n.text_line_text.default.current{\r\n color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.text_line_text.default.incomplete,\r\n.text_line_text.default.complete{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.text_line_label.incomplete.destructive,\r\n.text_line_label.current.destructive,\r\n.text_line_label.complete.destructive{\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.text_line_text.incomplete.destructive,\r\n.text_line_text.current.destructive,\r\n.text_line_text.complete.destructive{\r\n color: var(--color-text-danger-subtle, #CC1A2A);\r\n}\r\n\r\n/* Icon Only Styles */\r\n.icon_only_div{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.icon_only_div.sm{\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.icon_only_div.md{\r\n width: 2rem;\r\n height: 2rem;\r\n}\r\n\r\n.icon_only_div.lg{\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n}\r\n\r\n.icon_only_div.default.incomplete{\r\n background: var(--color-background-card, #FFFFFF);\r\n border: 2px solid #CDD5DF;\r\n}\r\n\r\n.icon_only_div.default.current,\r\n.icon_only_div.default.complete{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n border: 2.5px solid var(--color-icon-selected, #075DB2);\r\n}\r\n\r\n.icon_only_div.incomplete.destructive,\r\n.icon_only_div.current.destructive,\r\n.icon_only_div.complete.destructive{\r\n background: var(--color-background-danger-subtlest, #FEF1F2);\r\n border: 2.5px solid var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.dot{\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.dot.sm{\r\n width: 0.6rem;\r\n height: 0.6rem;\r\n}\r\n\r\n.dot.md{\r\n width: 0.8rem;\r\n height: 0.8rem;\r\n}\r\n\r\n.dot.lg{\r\n width: 0.9rem;\r\n height: 0.9rem;\r\n}\r\n\r\n.dot.default.incomplete{\r\n background: #CDD5DF;\r\n} \r\n\r\n.dot.default.current{\r\n background: var(--color-icon-selected, #075DB2);\r\n}\r\n\r\n.dot.incomplete.destructive,\r\n.dot.current.destructive{\r\n background: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.tick.sm{\r\n width: 0.8rem;\r\n height: 0.8rem;\r\n}\r\n\r\n.tick.md{\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.tick.lg{\r\n width: 1.2rem;\r\n height: 1.2rem;\r\n}\r\n\r\n.tick.destructive path{\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Icon Left Styles */\r\n.icon_left_div{\r\n display: flex;\r\n width: 21.5rem;\r\n align-items: flex-start;\r\n}\r\n\r\n.icon_left_div.sm{\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.icon_left_div.md,\r\n.icon_left_div.lg{\r\n gap: var(--spacing-4);\r\n}\r\n\r\n.icon_left_text{\r\n display: flex;\r\n padding: var(--spacing-2) var(--spacing-none) var(--spacing-7) var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-3);\r\n flex: 1 0 0;\r\n}\r\n\r\n.connector_wrap{\r\n display: flex;\r\n padding-bottom: 0.25rem;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 0.25rem;\r\n align-self: stretch;\r\n}\r\n\r\n.connector_div{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.connector{\r\n width: var(--spacing-half); /* Adjust the width as needed */\r\n height: 2.13rem; /* Adjust the height as needed */\r\n border-radius: 5px; /* Half of the width to make it fully rounded */\r\n}\r\n\r\n.connector.default.incomplete,\r\n.connector.default.current{\r\n background-color: var(--color-boarder-subtler, #E3E8EF); /* Change the color as needed */\r\n}\r\n\r\n.connector.default.complete{\r\n background-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.connector.incomplete.destructive,\r\n.connector.current.destructive,\r\n.connector.complete.destructive{\r\n background-color: var(--color-border-danger, #B51726);\r\n}","import { Component, Prop, h, Fragment } 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() showSupportingText: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() supportingText: string = '';\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.type === 'text_line' && (\r\n <div class={`text_line_div ${this.size} ${this.status} ${this.state}`}>\r\n <div class={`text_line_div_content`}>\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.state}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'icon_only' && (\r\n <div class={`icon_only_div ${this.status} ${this.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${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.state} ${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.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${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.state} ${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={`connector ${this.state} ${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.state}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -784,7 +784,7 @@ const GbStepBase = class {
|
|
|
784
784
|
this.supportingText = '';
|
|
785
785
|
}
|
|
786
786
|
render() {
|
|
787
|
-
return (h(Fragment, null, this.type === 'text_line' && (h("div", { key: '511bc306396b89f3f8e16bac5151439a637a8987', class: `text_line_div ${this.size} ${this.status} ${this.state}` }, h("div", { key: '4f74f6102f1cc12dfb5557ced02ec8564500c1c0', class: `text_line_div_content` }, h("p", { key: '820db3d390f01a55492510859855fe449cfab90d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` },
|
|
787
|
+
return (h(Fragment, null, this.type === 'text_line' && (h("div", { key: '511bc306396b89f3f8e16bac5151439a637a8987', class: `text_line_div ${this.size} ${this.status} ${this.state}` }, h("div", { key: '4f74f6102f1cc12dfb5557ced02ec8564500c1c0', class: `text_line_div_content` }, h("p", { key: '820db3d390f01a55492510859855fe449cfab90d', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` }, this.label), h("p", { key: '518c684408b1b811c13cc96cc9e288bd6f6ad843', class: `text_line_text text-xs-regular ${this.status} ${this.state}` }, this.supportingText)))), this.type === 'icon_only' && (h("div", { key: 'efb2b087b9e06fb0f20b3d53126d8500d9c55dd4', class: `icon_only_div ${this.status} ${this.state} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'ddc8f5d970cbb18e942aff2a696999547a6b0420', class: `dot ${this.status} ${this.state} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '7cbda2a849e95c8eeb84f31838e1dacb796c618e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.state} ${this.size}` }, h("path", { key: '74cba08b4bd739b2c02b2a2844bd32e03d73fe1e', 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: 'f30545cd6741d924d16904b5e3e1827ca20a8efe', class: `icon_left_div ${this.size}` }, h("div", { key: '93689ab7ef718f1774752c4cf7aa2d67ea7bc732', class: "connector_wrap" }, h("div", { key: '58032c5e54c9e6e988594eabb01ae44827804486', class: `icon_only_div ${this.status} ${this.state} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'f5727a1f02db8e7bcb52e2527e525ef8bea2dea5', class: `dot ${this.status} ${this.state} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '57b55fa39ccbe497f145483cbabb1174fbd44d28', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.state} ${this.size}` }, h("path", { key: '9a430c22335094c46c214f8e64178987893e2c57', 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: 'c55162095fc16766743b78c5f733f246714a9aef', class: "connector_div" }, h("div", { key: '80b8e859f58ae67369d77bfcb55c621453d11af4', class: `connector ${this.state} ${this.status}` })))), h("div", { key: '0ef8f0b9cd539faded4804034e38e7dcd0f37497', class: "icon_left_text" }, h("p", { key: 'db894bfc10717b9946a511bdaf15f76ca8e6415f', class: `text_line_label text-sm-semi-bold ${this.status} ${this.state}` }, this.label), h("p", { key: 'ac806057c237c3cb79151fea64ed63c7b02838d2', class: `text_line_text text-xs-regular ${this.status} ${this.state}` }, this.supportingText))))));
|
|
788
788
|
}
|
|
789
789
|
};
|
|
790
790
|
GbStepBase.style = GbStepBaseStyle0;
|