globuswebcomponents 1.3.3 → 1.3.5
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-avatar_32.cjs.entry.js +15 -5
- package/dist/cjs/gb-avatar_32.cjs.entry.js.map +1 -1
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-detail-cell/gb-detail-cell.js +1 -3
- package/dist/collection/components/gb-detail-cell/gb-detail-cell.js.map +1 -1
- package/dist/collection/components/gb-header/gb-header.js +1 -1
- package/dist/collection/components/gb-header/gb-header.js.map +1 -1
- package/dist/collection/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.js +19 -2
- package/dist/collection/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.js.map +1 -1
- package/dist/components/gb-detail-cell.js +1 -3
- package/dist/components/gb-detail-cell.js.map +1 -1
- package/dist/components/gb-header.js +1 -1
- package/dist/components/gb-header.js.map +1 -1
- package/dist/components/gb-stepper-horizontal-line-with-text.js +16 -3
- package/dist/components/gb-stepper-horizontal-line-with-text.js.map +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/gb-avatar_32.entry.js +15 -5
- package/dist/esm/gb-avatar_32.entry.js.map +1 -1
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js.map +1 -1
- package/dist/globuscomponents/{p-264260d5.entry.js → p-6766111b.entry.js} +2 -2
- package/dist/globuscomponents/p-6766111b.entry.js.map +1 -0
- package/dist/types/components/gb-detail-cell/gb-detail-cell.d.ts +0 -1
- package/dist/types/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.d.ts +4 -0
- package/package.json +1 -1
- package/dist/globuscomponents/p-264260d5.entry.js.map +0 -1
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class GbStepperHorizontalLineWithText {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.handleResize = () => {
|
|
5
|
+
this.width = window.innerWidth;
|
|
6
|
+
this.updatePropBasedOnSize();
|
|
7
|
+
};
|
|
4
8
|
this.size = undefined;
|
|
5
9
|
this.breakpoint = undefined;
|
|
6
10
|
this.showContent = false;
|
|
@@ -33,9 +37,17 @@ export class GbStepperHorizontalLineWithText {
|
|
|
33
37
|
this.fifthStepSupportingText = '';
|
|
34
38
|
this.sixthStepSupportingText = '';
|
|
35
39
|
this.seventhStepSupportingText = '';
|
|
40
|
+
this.width = window.innerWidth;
|
|
41
|
+
}
|
|
42
|
+
componentWillLoad() {
|
|
43
|
+
this.updatePropBasedOnSize();
|
|
44
|
+
window.addEventListener('resize', this.handleResize);
|
|
45
|
+
}
|
|
46
|
+
updatePropBasedOnSize() {
|
|
47
|
+
this.showSupportingText = this.width < 768 ? false : true;
|
|
36
48
|
}
|
|
37
49
|
render() {
|
|
38
|
-
return (h("div", { key: '
|
|
50
|
+
return (h("div", { key: 'd733e51f58b7729651bd3ccf8a02766b6021d382', class: "text_with_line" }, h("gb-step-base", { key: '48713ec89b1690dcdb0e3eaf51af3d08c97fc759', size: this.size, type: "text_line", state: this.firstStepState, status: this.firstStepStatus, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), h("gb-step-base", { key: 'e7f2d3b1b33930d7d7b52216735e0e2e4587abf2', size: this.size, type: "text_line", state: this.secondStepState, status: this.secondStepStatus, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), this.thirdStepLabel && (h("gb-step-base", { key: '557bdc0f8d3eb1d4bd2a3a2c045b194f51bb8693', size: this.size, type: "text_line", state: this.thirdStepState, status: this.thirdStepStatus, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fourthStepLabel && (h("gb-step-base", { key: '2270971a094e7a8d75b1ec9bee100831f58a2831', size: this.size, type: "text_line", state: this.fourthStepState, status: this.fourthStepStatus, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fifthStepLabel && (h("gb-step-base", { key: '5ea8c20066ab46d90e97298de20978f0e1738b8a', size: this.size, type: "text_line", state: this.fifthStepState, status: this.fifthStepStatus, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.sixthStepLabel && (h("gb-step-base", { key: 'bff5ddf0ad83573fa3a3bef9d97807a52056bf10', size: this.size, type: "text_line", state: this.sixthStepState, status: this.sixthStepStatus, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.seventhStepLabel && (h("gb-step-base", { key: 'c0dde41fe810d95aac96a4991917fd131e8e8c65', size: this.size, type: "text_line", state: this.seventhStepState, status: this.seventhStepStatus, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }))));
|
|
39
51
|
}
|
|
40
52
|
static get is() { return "gb-stepper-horizontal-line-with-text"; }
|
|
41
53
|
static get encapsulation() { return "shadow"; }
|
|
@@ -117,7 +129,7 @@ export class GbStepperHorizontalLineWithText {
|
|
|
117
129
|
},
|
|
118
130
|
"showSupportingText": {
|
|
119
131
|
"type": "boolean",
|
|
120
|
-
"mutable":
|
|
132
|
+
"mutable": true,
|
|
121
133
|
"complexType": {
|
|
122
134
|
"original": "boolean",
|
|
123
135
|
"resolved": "boolean",
|
|
@@ -709,5 +721,10 @@ export class GbStepperHorizontalLineWithText {
|
|
|
709
721
|
}
|
|
710
722
|
};
|
|
711
723
|
}
|
|
724
|
+
static get states() {
|
|
725
|
+
return {
|
|
726
|
+
"width": {}
|
|
727
|
+
};
|
|
728
|
+
}
|
|
712
729
|
}
|
|
713
730
|
//# sourceMappingURL=gb-stepper-horizontal-line-with-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-stepper-horizontal-line-with-text.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"gb-stepper-horizontal-line-with-text.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ1D,MAAM,OAAO,+BAA+B;;QAwClC,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;YAC/B,IAAI,CAAC,qBAAqB,EAAE,CAAA;QAC9B,CAAC,CAAA;;;2BAxC8B,KAAK;kCACmB,KAAK;;;;;;;;;;;;;;;8BAe3B,EAAE;+BACD,EAAE;8BACH,EAAE;+BACD,EAAE;8BACH,EAAE;8BACF,EAAE;gCACA,EAAE;uCACK,EAAE;wCACD,EAAE;uCACH,EAAE;wCACD,EAAE;uCACH,EAAE;uCACF,EAAE;yCACA,EAAE;qBACrB,MAAM,CAAC,UAAU;;IAE1C,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAA;QAC5B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;IACtD,CAAC;IAOO,qBAAqB;QAC3B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,gBAAgB;YACzB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,qBACT,IAAI,CAAC,uBAAuB,kBAC/B,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B;YAChB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,KAAK,EAAE,IAAI,CAAC,eAAe,qBACV,IAAI,CAAC,wBAAwB,kBAChC,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B;YACf,IAAI,CAAC,cAAc,IAAI,CACtB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,qBACT,IAAI,CAAC,uBAAuB,kBAC/B,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B,CACjB;YACA,IAAI,CAAC,eAAe,IAAI,CACvB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,KAAK,EAAE,IAAI,CAAC,eAAe,qBACV,IAAI,CAAC,wBAAwB,kBAChC,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B,CACjB;YACA,IAAI,CAAC,cAAc,IAAI,CACtB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,qBACT,IAAI,CAAC,uBAAuB,kBAC/B,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B,CACjB;YACA,IAAI,CAAC,cAAc,IAAI,CACtB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,qBACT,IAAI,CAAC,uBAAuB,kBAC/B,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B,CACjB;YACA,IAAI,CAAC,gBAAgB,IAAI,CACxB,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,KAAK,EAAE,IAAI,CAAC,gBAAgB,qBACX,IAAI,CAAC,yBAAyB,kBACjC,IAAI,CAAC,WAAW,0BACR,IAAI,CAAC,kBAAkB,GAC/B,CACjB,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h } from '@stencil/core';\r\nimport { BreakPoints, GeneralSizes, ProgressStepStates, ProgressStepStatus } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-stepper-horizontal-line-with-text',\r\n styleUrl: 'gb-stepper-horizontal-line-with-text.css',\r\n shadow: true,\r\n})\r\nexport class GbStepperHorizontalLineWithText {\r\n @Prop() size: GeneralSizes;\r\n @Prop() breakpoint: BreakPoints;\r\n @Prop() showContent: boolean = false;\r\n @Prop({ mutable: true }) showSupportingText: boolean = false;\r\n @Prop() firstStepState: ProgressStepStates;\r\n @Prop() secondStepState: ProgressStepStates;\r\n @Prop() thirdStepState: ProgressStepStates;\r\n @Prop() fourthStepState: ProgressStepStates;\r\n @Prop() fifthStepState: ProgressStepStates;\r\n @Prop() sixthStepState: ProgressStepStates;\r\n @Prop() seventhStepState: ProgressStepStates;\r\n @Prop() firstStepStatus: ProgressStepStatus;\r\n @Prop() secondStepStatus: ProgressStepStatus;\r\n @Prop() thirdStepStatus: ProgressStepStatus;\r\n @Prop() fourthStepStatus: ProgressStepStatus;\r\n @Prop() fifthStepStatus: ProgressStepStatus;\r\n @Prop() sixthStepStatus: ProgressStepStatus;\r\n @Prop() seventhStepStatus: ProgressStepStatus;\r\n @Prop() firstStepLabel: string = '';\r\n @Prop() secondStepLabel: string = '';\r\n @Prop() thirdStepLabel: string = '';\r\n @Prop() fourthStepLabel: string = '';\r\n @Prop() fifthStepLabel: string = '';\r\n @Prop() sixthStepLabel: string = '';\r\n @Prop() seventhStepLabel: string = '';\r\n @Prop() firstStepSupportingText: string = '';\r\n @Prop() secondStepSupportingText: string = '';\r\n @Prop() thirdStepSupportingText: string = '';\r\n @Prop() fourthStepSupportingText: string = '';\r\n @Prop() fifthStepSupportingText: string = '';\r\n @Prop() sixthStepSupportingText: string = '';\r\n @Prop() seventhStepSupportingText: string = '';\r\n @State() width: number = window.innerWidth;\r\n\r\n componentWillLoad() {\r\n this.updatePropBasedOnSize()\r\n window.addEventListener('resize', this.handleResize)\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updatePropBasedOnSize()\r\n }\r\n\r\n private updatePropBasedOnSize () {\r\n this.showSupportingText = this.width < 768 ? false : true;\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"text_with_line\">\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.firstStepState}\r\n status={this.firstStepStatus}\r\n label={this.firstStepLabel}\r\n supporting-text={this.firstStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.secondStepState}\r\n status={this.secondStepStatus}\r\n label={this.secondStepLabel}\r\n supporting-text={this.secondStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n {this.thirdStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.thirdStepState}\r\n status={this.thirdStepStatus}\r\n label={this.thirdStepLabel}\r\n supporting-text={this.thirdStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.fourthStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.fourthStepState}\r\n status={this.fourthStepStatus}\r\n label={this.fourthStepLabel}\r\n supporting-text={this.fourthStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.fifthStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.fifthStepState}\r\n status={this.fifthStepStatus}\r\n label={this.fifthStepLabel}\r\n supporting-text={this.fifthStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.sixthStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.sixthStepState}\r\n status={this.sixthStepStatus}\r\n label={this.sixthStepLabel}\r\n supporting-text={this.sixthStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.seventhStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.seventhStepState}\r\n status={this.seventhStepStatus}\r\n label={this.seventhStepLabel}\r\n supporting-text={this.seventhStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -48,7 +48,6 @@ const GbDetailCell$1 = /*@__PURE__*/ proxyCustomElement(class GbDetailCell exten
|
|
|
48
48
|
}
|
|
49
49
|
updateCellStyle() {
|
|
50
50
|
this.cellStyle = this.width < 768 ? 'compact' : 'standard';
|
|
51
|
-
console.log(this.width);
|
|
52
51
|
}
|
|
53
52
|
onViewButtonClicked() {
|
|
54
53
|
this.viewButtonClicked.emit();
|
|
@@ -83,9 +82,8 @@ const GbDetailCell$1 = /*@__PURE__*/ proxyCustomElement(class GbDetailCell exten
|
|
|
83
82
|
}
|
|
84
83
|
}
|
|
85
84
|
render() {
|
|
86
|
-
return (h("div", { key: '
|
|
85
|
+
return (h("div", { key: '1553706466bc58168bdeb1b2c3354190b4400582', class: `detail_cell_div ${this.type} ${this.cellStyle}`, onMouseEnter: () => this.onShowCopyButton(), onMouseLeave: () => this.onHideCopyButton() }, this.type === 'information' && this.cellStyle === 'standard' && (h(Fragment, null, h("div", { key: '33ec965d64e941750629df4098fa2255f68b694d', class: "info_text_div" }, h("p", { key: 'd105ac2111148e1ba349f6c151de00f5fa589aa8', class: "label text-sm-regular" }, this.label), h("p", { key: '5154a8aaf7b156704c33fedeab091389a7d2c92b', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '0012a66f18e8aaa6d846f41e3508821abdbd49b1', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: '0440c79101b5fd0bb67fcd71ad70e50163648433', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: '6eb23ab566809271d7e7afeacbcf29a8c4388377', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/copy.svg", onClick: () => this.copyToClipboard() })), this.copied && (h("gb-tooltip", { key: '44007f77eec1ab7fbace55b3d597c9676f61ed7c', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: '6e4cc647ada1184de14e9880a16129f0decbb225', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: '4efcda0eebbff709bfecf0cad316b04e161c6d94', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: 'f56d825aedf3735e5b59a4db5a754a6e18ae20b4', class: "document_text_div" }, h("p", { key: 'aadaa8c53ceb2b22a9f27a4b5f29ef1d64976e88', class: "label text-sm-regular" }, this.label), h("p", { key: '537e7017288331c9c7ff1faffe5fdc4349031d1d', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: 'f86120a65c36fe37a4a5cd7d068483ef32a49c35', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: '79aec15ef8952a82c64c4481bf0e05e169a11308', slot: "label" }, this.detail)))), !this.isDownloaded ? (h(Fragment, null, this.showActionButtons && (h(Fragment, null, this.showViewButton && (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/view.svg", onClick: () => this.onViewButtonClicked() })), this.showDownloadButton && (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/download-03.svg", onClick: () => this.onDownloadButtonClicked() })))))) : (h("gb-tooltip", { "show-arrow": false, class: "downloaded_tooltip" }, h("p", { slot: "label" }, "Downloaded!"))))), this.type === 'status' && this.cellStyle === 'standard' && (h("div", { key: 'b72812e9b91b89b3109b23679ed9165d83fc72aa', class: "status_text_div" }, h("p", { key: 'efacd0f4722eceb1397578bf7dc4425d6301affe', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: '4c0c31923a5e19e26f03c62c59ae8941c81f7618', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '488ba92cacdadd8c65b120813ae6d2614fd95907' }, this.badgeLabel)))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: '329a16b35ca9a9654e4aaf19c8d28c92ce530028', class: "compact_info_div" }, h("div", { key: '59556b9b38ec304e53554d27439c4ca5b051cc1c', class: "compact_info_text_div" }, h("div", { key: '7ef56dd340a2bfdecc7a2311d2c2e034e2cda7ba', class: "compact_label" }, h("p", { key: 'c4700ad143d378011c3f438aeb0e2efd58e5a4bd', class: "label text-sm-regular" }, this.label)), h("div", { key: '99c42029ebb32a9bb810d69a054d6c178c70b110', class: "compact_detail" }, h("p", { key: '219d00fc805aa7261d8a05ab9e61ae9d43ebb2af', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: '22f52674e947aebd410410e8dd65a69309bf48b0', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: '01ca5f47e44773234b401b7f8aa824773fbad278', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: '67cb677c6efae405f2eae95bbfb40c2b030e694d', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/copy.svg", onClick: () => this.copyToClipboard() }))))), this.type === 'document' && this.cellStyle === 'compact' && (h("div", { key: 'a9f6354505eb25bdf48ac4fd2c5de8d8eed7412d', class: "compact_doc_div" }, h("gb-file-type-icon", { key: '52aabff2a94cc4ec54ba26ca976dd94cb493f4d7', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '736ee7ebe5df90bc6d97da150b83d294000d4746', class: "compact_doc_text_div" }, h("p", { key: '05eb2d050cacd70301cc6e69e86a940f8169351b', class: "doc_label text-sm-regular" }, this.label), h("div", { key: '66e5b2e793c12da061eefa562be8591f06b9738a', class: "compact_doc_detail" }, h("p", { key: 'f47ca81acccc056cef3de6792032051bdf810dd4', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: '7c594c9fe39f0ade8bb7f9d0fd6be02ea1f6a058', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: 'b53de10d9bd1e2e4b5b7979c1a484fa7385f130f', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '2952ff5ef85c62206c83d3695249086cb5b0462a', class: "button_container" }, this.showViewButton && (h("gb-button", { key: 'a4b5c88a33cfa8e9c9d2ec010c9c89ba4627e6eb', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/view.svg", onClick: () => this.onViewButtonClicked() })), this.showDownloadButton && (h("gb-button", { key: '1ac75d58d7579e90223bc46bf0b496dd14bd972a', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/download-03.svg", onClick: () => this.onDownloadButtonClicked() }))))))), this.type === 'status' && this.cellStyle === 'compact' && (h("div", { key: '4ed254c054d89cfd96193f54eac909a20ea7beab', class: "compact_status_div" }, h("div", { key: 'c30634c7d918b342cd9e9413cd69867b9ad579c3', class: "compact_status_text_div" }, h("div", { key: 'f19c4d39cbdc50bde2812a2b2a6f632661a126c9', class: "compact_label" }, h("p", { key: 'f708466e7bce39fef8a9f3eb2544467f5e2267a5', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: '5a7a92fe89d991da7923da89623fe5511486dc1f', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '369e9413d0f0f818cc8293f2b46f61b9c2514318' }, this.badgeLabel)))))));
|
|
87
86
|
}
|
|
88
|
-
get el() { return this; }
|
|
89
87
|
static get style() { return GbDetailCellStyle0; }
|
|
90
88
|
}, [1, "gb-detail-cell", {
|
|
91
89
|
"state": [1],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-detail-cell.js","mappings":"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","names":["GbDetailCell"],"sources":["src/components/gb-detail-cell/gb-detail-cell.css?tag=gb-detail-cell&encapsulation=shadow","src/components/gb-detail-cell/gb-detail-cell.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n min-width: 0;\r\n width: 100%;\r\n}\r\n\r\n.detail_cell_div {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n cursor: pointer;\r\n position: relative;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.detail_cell_div:hover {\r\n background: var(--color-background-gray-subtlest, #f6f8fa);\r\n}\r\n\r\n.detail_cell_div.standard {\r\n height: 5rem;\r\n padding: var(--spacing-none) var(--spacing-6);\r\n}\r\n\r\n.detail_cell_div.compact {\r\n padding: 0;\r\n}\r\n\r\n.info_text_div,\r\n.status_text_div,\r\n.document_text_div {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n flex: 1;\r\n}\r\n\r\n.status_text_div {\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label {\r\n color: var(--color-text-subtle, #697586);\r\n display: block; /* Ensure block or inline-block */\r\n max-width: 100%; /* Set a fixed or max width */\r\n white-space: nowrap; /* Prevent text from wrapping */\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis; /* Apply ellipsis */\r\n flex: 1;\r\n min-width: 0; /* Ensure it can shrink properly */\r\n}\r\n\r\n.detail_div {\r\n width: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.detail {\r\n color: var(--color-text, #4b5565);\r\n display: block; /* Ensure block or inline-block */\r\n max-width: 100%; /* Set a fixed or max width */\r\n white-space: nowrap; /* Prevent text from wrapping */\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis; /* Apply ellipsis */\r\n flex: 1;\r\n min-width: 0; /* Ensure it can shrink properly */\r\n}\r\n\r\n.information_text_tooltip {\r\n position: absolute;\r\n bottom: 90%;\r\n}\r\n\r\n.document_detail_tooltip {\r\n position: absolute;\r\n left: 4rem;\r\n bottom: 90%;\r\n}\r\n\r\n.copied_tooltip {\r\n position: absolute;\r\n right: 6rem;\r\n bottom: 3.5rem;\r\n}\r\n\r\n.downloaded_tooltip {\r\n position: absolute;\r\n right: 8rem;\r\n bottom: 3.5rem;\r\n}\r\n\r\n/* Compact Information Styles */\r\n.compact_info_div {\r\n display: flex;\r\n width: 100%;\r\n padding: var(--spacing-3) var(--spacing-2);\r\n align-items: center;\r\n}\r\n\r\n.compact_info_text_div {\r\n display: flex;\r\n min-height: 2.25rem;\r\n /* justify-content: space-between; */\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n flex: 1 0 0;\r\n width: 100%;\r\n}\r\n\r\n.compact_detail {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n flex: 1 0 0;\r\n align-items: flex-end;\r\n position: relative;\r\n flex-wrap: wrap;\r\n word-wrap: break-word; /* Ensures words break if needed */\r\n overflow-wrap: break-word; /* Helps in modern browsers */\r\n white-space: normal; /* Allows text wrapping */\r\n text-align: right; /* Keeps text aligned to the right */\r\n}\r\n\r\n.detail_compact_text {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.compact_copied_tooltip {\r\n position: absolute;\r\n right: 4rem;\r\n bottom: 2rem;\r\n}\r\n\r\n.compact_status_div {\r\n display: flex;\r\n width: 100%;\r\n padding: var(--spacing-3) var(--spacing-2);\r\n align-items: center;\r\n}\r\n\r\n.compact_status_text_div {\r\n display: flex;\r\n min-height: 2.25rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n}\r\n\r\n.compact_doc_div {\r\n display: flex;\r\n width: 100%;\r\n justify-content: space-between;\r\n padding: var(--spacing-3) var(--spacing-2);\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.compact_doc_text_div {\r\n display: flex;\r\n min-height: 2.25rem;\r\n align-items: center;\r\n gap: 1.25rem;\r\n flex: 1 0 0;\r\n}\r\n\r\n.compact_doc_textt_div {\r\n display: flex;\r\n flex-direction: column; /* Allows stacking if necessary */\r\n align-items: flex-start; /* Aligns text to the left */\r\n gap: 0.5rem;\r\n flex: 1 1 auto;\r\n word-wrap: break-word; /* Ensures words break properly */\r\n overflow-wrap: break-word;\r\n white-space: normal; /* Allows wrapping */\r\n max-width: 100%; /* Prevents overflow */\r\n}\r\n\r\n.compact_doc_detail {\r\n display: flex;\r\n flex: 1 0 0;\r\n text-align: right;\r\n justify-content: flex-end;\r\n}\r\n\r\n.doc_label {\r\n color: var(--color-text-subtle, #697586);\r\n display: block; /* Ensure block or inline-block */\r\n white-space: nowrap; /* Prevent text from wrapping */\r\n text-overflow: ellipsis; /* Apply ellipsis */\r\n}\r\n\r\n.detaill {\r\n max-width: 100%; /* Ensures it doesn’t stretch too far */\r\n word-break: break-word; /* Breaks long words */\r\n white-space: normal; /* Allows text to wrap */\r\n overflow-wrap: break-word;\r\n display: flex;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.button_container {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.downloaded_toolip_div {\r\n position: relative;\r\n width: 100%;\r\n}\r\n\r\n.compact_downloaded_tooltip {\r\n position: absolute;\r\n bottom: 3rem;\r\n right: 10rem;\r\n}\r\n","import { Component, Prop, State, h, Fragment, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { BadgeTypes, FileIconStyles, FileIconTypes, GeneralColors, GeneralStyles } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-detail-cell',\r\n styleUrl: 'gb-detail-cell.css',\r\n shadow: true,\r\n})\r\nexport class GbDetailCell {\r\n @Prop() state: 'default' | 'disabled';\r\n @Prop({ mutable: true }) cellStyle: GeneralStyles;\r\n @Prop() type: 'information' | 'document' | 'status';\r\n @Prop() label: string = '';\r\n @Prop() detail: string = '';\r\n @Prop() badgeColor: GeneralColors;\r\n @Prop() badgeLabel: string = '';\r\n @Prop() badgeType: BadgeTypes;\r\n @Prop() fileType: FileIconTypes;\r\n @Prop() fileStyle: FileIconStyles;\r\n @Prop() showActionButtons: boolean = false;\r\n @Prop() showViewButton: boolean = false;\r\n @Prop() showDownloadButton: boolean = false;\r\n @Prop({ mutable: true }) showCopyButton: boolean = false;\r\n @State() showStandardCopyButton: boolean = false;\r\n @State() showTooltip: boolean = false;\r\n @State() copied: boolean = false;\r\n @State() isDownloaded: boolean = false;\r\n @State() width: number = window.innerWidth;\r\n @Event() viewButtonClicked: EventEmitter<void>;\r\n @Event() downloadButtonClicked: EventEmitter<void>;\r\n @Element() el: HTMLElement;\r\n\r\n componentWillLoad() {\r\n this.updateCellStyle(); // Set initial variant\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updateCellStyle();\r\n };\r\n\r\n private updateCellStyle() {\r\n this.cellStyle = this.width < 768 ? 'compact' : 'standard';\r\n console.log(this.width);\r\n }\r\n\r\n onViewButtonClicked() {\r\n this.viewButtonClicked.emit();\r\n }\r\n\r\n onDownloadButtonClicked() {\r\n this.isDownloaded = true;\r\n\r\n setTimeout(() => {\r\n this.isDownloaded = false;\r\n }, 2000);\r\n\r\n this.downloadButtonClicked.emit();\r\n }\r\n\r\n onShowCopyButton() {\r\n if (this.cellStyle === 'standard') {\r\n this.showStandardCopyButton = true;\r\n }\r\n }\r\n\r\n onHideCopyButton() {\r\n if (this.cellStyle === 'standard') {\r\n this.showStandardCopyButton = false;\r\n }\r\n }\r\n\r\n async copyToClipboard() {\r\n try {\r\n await navigator.clipboard.writeText(this.detail);\r\n this.copied = true;\r\n\r\n setTimeout(() => {\r\n this.copied = false;\r\n }, 2000); // Reset copied state after 2 seconds\r\n } catch (error) {\r\n console.error('Failed to copy:', error);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`detail_cell_div ${this.type} ${this.cellStyle}`} onMouseEnter={() => this.onShowCopyButton()} onMouseLeave={() => this.onHideCopyButton()}>\r\n {this.type === 'information' && this.cellStyle === 'standard' && (\r\n <>\r\n <div class=\"info_text_div\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n <p class=\"detail text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.detail}\r\n </p>\r\n {this.showTooltip && (\r\n <gb-tooltip show-arrow={false} class=\"information_text_tooltip\">\r\n <p slot=\"label\">{this.detail}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n {this.showStandardCopyButton && (\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading=\"true\" icon-leading-swap=\"assets/copy.svg\" onClick={() => this.copyToClipboard()}></gb-button>\r\n )}\r\n {this.copied && (\r\n <gb-tooltip show-arrow={false} class=\"copied_tooltip\">\r\n <p slot=\"label\">Copied!</p>\r\n </gb-tooltip>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'document' && this.cellStyle === 'standard' && (\r\n <>\r\n <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n <div class=\"document_text_div\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n <p class=\"detail text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.detail}\r\n </p>\r\n {this.showTooltip && (\r\n <gb-tooltip show-arrow={false} class=\"document_detail_tooltip\">\r\n <p slot=\"label\">{this.detail}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n {!this.isDownloaded ? (\r\n <>\r\n {this.showActionButtons && (\r\n <>\r\n {this.showViewButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/view.svg\"\r\n onClick={() => this.onViewButtonClicked()}\r\n ></gb-button>\r\n )}\r\n {this.showDownloadButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/download-03.svg\"\r\n onClick={() => this.onDownloadButtonClicked()}\r\n ></gb-button>\r\n )}\r\n </>\r\n )}\r\n </>\r\n ) : (\r\n <gb-tooltip show-arrow={false} class=\"downloaded_tooltip\">\r\n <p slot=\"label\">Downloaded!</p>\r\n </gb-tooltip>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'status' && this.cellStyle === 'standard' && (\r\n <div class=\"status_text_div\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n <gb-badge size=\"sm\" type={this.badgeType} icon=\"dot\" color={this.badgeColor}>\r\n <p>{this.badgeLabel}</p>\r\n </gb-badge>\r\n </div>\r\n )}\r\n {this.type === 'information' && this.cellStyle === 'compact' && (\r\n <div class=\"compact_info_div\">\r\n <div class=\"compact_info_text_div\">\r\n <div class=\"compact_label\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n </div>\r\n <div class=\"compact_detail\">\r\n <p class=\"detail_compact_text text-md-medium\">{this.detail}</p>\r\n {this.copied && (\r\n <gb-tooltip show-arrow={false} class=\"compact_copied_tooltip\">\r\n <p slot=\"label\">Copied!</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n {this.showCopyButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/copy.svg\"\r\n onClick={() => this.copyToClipboard()}\r\n ></gb-button>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'document' && this.cellStyle === 'compact' && (\r\n <div class=\"compact_doc_div\">\r\n <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n <div class=\"compact_doc_text_div\">\r\n <p class=\"doc_label text-sm-regular\">{this.label}</p>\r\n <div class=\"compact_doc_detail\">\r\n <p class=\"detaill text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.detail}\r\n </p>\r\n </div>\r\n {this.isDownloaded && (\r\n <gb-tooltip show-arrow={false} class=\"compact_downloaded_tooltip\">\r\n <p slot=\"label\">Downloaded!</p>\r\n </gb-tooltip>\r\n )}\r\n {this.showActionButtons && (\r\n <div class=\"button_container\">\r\n {this.showViewButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/view.svg\"\r\n onClick={() => this.onViewButtonClicked()}\r\n ></gb-button>\r\n )}\r\n {this.showDownloadButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/download-03.svg\"\r\n onClick={() => this.onDownloadButtonClicked()}\r\n ></gb-button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'status' && this.cellStyle === 'compact' && (\r\n <div class=\"compact_status_div\">\r\n <div class=\"compact_status_text_div\">\r\n <div class=\"compact_label\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n </div>\r\n <gb-badge size=\"sm\" type={this.badgeType} icon=\"dot\" color={this.badgeColor}>\r\n <p>{this.badgeLabel}</p>\r\n </gb-badge>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"gb-detail-cell.js","mappings":"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","names":["GbDetailCell"],"sources":["src/components/gb-detail-cell/gb-detail-cell.css?tag=gb-detail-cell&encapsulation=shadow","src/components/gb-detail-cell/gb-detail-cell.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n min-width: 0;\r\n width: 100%;\r\n}\r\n\r\n.detail_cell_div {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n cursor: pointer;\r\n position: relative;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.detail_cell_div:hover {\r\n background: var(--color-background-gray-subtlest, #f6f8fa);\r\n}\r\n\r\n.detail_cell_div.standard {\r\n height: 5rem;\r\n padding: var(--spacing-none) var(--spacing-6);\r\n}\r\n\r\n.detail_cell_div.compact {\r\n padding: 0;\r\n}\r\n\r\n.info_text_div,\r\n.status_text_div,\r\n.document_text_div {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n flex: 1;\r\n}\r\n\r\n.status_text_div {\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label {\r\n color: var(--color-text-subtle, #697586);\r\n display: block; /* Ensure block or inline-block */\r\n max-width: 100%; /* Set a fixed or max width */\r\n white-space: nowrap; /* Prevent text from wrapping */\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis; /* Apply ellipsis */\r\n flex: 1;\r\n min-width: 0; /* Ensure it can shrink properly */\r\n}\r\n\r\n.detail_div {\r\n width: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.detail {\r\n color: var(--color-text, #4b5565);\r\n display: block; /* Ensure block or inline-block */\r\n max-width: 100%; /* Set a fixed or max width */\r\n white-space: nowrap; /* Prevent text from wrapping */\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis; /* Apply ellipsis */\r\n flex: 1;\r\n min-width: 0; /* Ensure it can shrink properly */\r\n}\r\n\r\n.information_text_tooltip {\r\n position: absolute;\r\n bottom: 90%;\r\n}\r\n\r\n.document_detail_tooltip {\r\n position: absolute;\r\n left: 4rem;\r\n bottom: 90%;\r\n}\r\n\r\n.copied_tooltip {\r\n position: absolute;\r\n right: 6rem;\r\n bottom: 3.5rem;\r\n}\r\n\r\n.downloaded_tooltip {\r\n position: absolute;\r\n right: 8rem;\r\n bottom: 3.5rem;\r\n}\r\n\r\n/* Compact Information Styles */\r\n.compact_info_div {\r\n display: flex;\r\n width: 100%;\r\n padding: var(--spacing-3) var(--spacing-2);\r\n align-items: center;\r\n}\r\n\r\n.compact_info_text_div {\r\n display: flex;\r\n min-height: 2.25rem;\r\n /* justify-content: space-between; */\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n flex: 1 0 0;\r\n width: 100%;\r\n}\r\n\r\n.compact_detail {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n flex: 1 0 0;\r\n align-items: flex-end;\r\n position: relative;\r\n flex-wrap: wrap;\r\n word-wrap: break-word; /* Ensures words break if needed */\r\n overflow-wrap: break-word; /* Helps in modern browsers */\r\n white-space: normal; /* Allows text wrapping */\r\n text-align: right; /* Keeps text aligned to the right */\r\n}\r\n\r\n.detail_compact_text {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.compact_copied_tooltip {\r\n position: absolute;\r\n right: 4rem;\r\n bottom: 2rem;\r\n}\r\n\r\n.compact_status_div {\r\n display: flex;\r\n width: 100%;\r\n padding: var(--spacing-3) var(--spacing-2);\r\n align-items: center;\r\n}\r\n\r\n.compact_status_text_div {\r\n display: flex;\r\n min-height: 2.25rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex: 1 0 0;\r\n}\r\n\r\n.compact_doc_div {\r\n display: flex;\r\n width: 100%;\r\n justify-content: space-between;\r\n padding: var(--spacing-3) var(--spacing-2);\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.compact_doc_text_div {\r\n display: flex;\r\n min-height: 2.25rem;\r\n align-items: center;\r\n gap: 1.25rem;\r\n flex: 1 0 0;\r\n}\r\n\r\n.compact_doc_textt_div {\r\n display: flex;\r\n flex-direction: column; /* Allows stacking if necessary */\r\n align-items: flex-start; /* Aligns text to the left */\r\n gap: 0.5rem;\r\n flex: 1 1 auto;\r\n word-wrap: break-word; /* Ensures words break properly */\r\n overflow-wrap: break-word;\r\n white-space: normal; /* Allows wrapping */\r\n max-width: 100%; /* Prevents overflow */\r\n}\r\n\r\n.compact_doc_detail {\r\n display: flex;\r\n flex: 1 0 0;\r\n text-align: right;\r\n justify-content: flex-end;\r\n}\r\n\r\n.doc_label {\r\n color: var(--color-text-subtle, #697586);\r\n display: block; /* Ensure block or inline-block */\r\n white-space: nowrap; /* Prevent text from wrapping */\r\n text-overflow: ellipsis; /* Apply ellipsis */\r\n}\r\n\r\n.detaill {\r\n max-width: 100%; /* Ensures it doesn’t stretch too far */\r\n word-break: break-word; /* Breaks long words */\r\n white-space: normal; /* Allows text to wrap */\r\n overflow-wrap: break-word;\r\n display: flex;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.button_container {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.downloaded_toolip_div {\r\n position: relative;\r\n width: 100%;\r\n}\r\n\r\n.compact_downloaded_tooltip {\r\n position: absolute;\r\n bottom: 3rem;\r\n right: 10rem;\r\n}\r\n","import { Component, Prop, State, h, Fragment, Event, EventEmitter } from '@stencil/core';\r\nimport { BadgeTypes, FileIconStyles, FileIconTypes, GeneralColors, GeneralStyles } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-detail-cell',\r\n styleUrl: 'gb-detail-cell.css',\r\n shadow: true,\r\n})\r\nexport class GbDetailCell {\r\n @Prop() state: 'default' | 'disabled';\r\n @Prop({ mutable: true }) cellStyle: GeneralStyles;\r\n @Prop() type: 'information' | 'document' | 'status';\r\n @Prop() label: string = '';\r\n @Prop() detail: string = '';\r\n @Prop() badgeColor: GeneralColors;\r\n @Prop() badgeLabel: string = '';\r\n @Prop() badgeType: BadgeTypes;\r\n @Prop() fileType: FileIconTypes;\r\n @Prop() fileStyle: FileIconStyles;\r\n @Prop() showActionButtons: boolean = false;\r\n @Prop() showViewButton: boolean = false;\r\n @Prop() showDownloadButton: boolean = false;\r\n @Prop({ mutable: true }) showCopyButton: boolean = false;\r\n @State() showStandardCopyButton: boolean = false;\r\n @State() showTooltip: boolean = false;\r\n @State() copied: boolean = false;\r\n @State() isDownloaded: boolean = false;\r\n @State() width: number = window.innerWidth;\r\n @Event() viewButtonClicked: EventEmitter<void>;\r\n @Event() downloadButtonClicked: EventEmitter<void>;\r\n\r\n componentWillLoad() {\r\n this.updateCellStyle(); // Set initial variant\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updateCellStyle();\r\n };\r\n\r\n private updateCellStyle() {\r\n this.cellStyle = this.width < 768 ? 'compact' : 'standard';\r\n }\r\n\r\n onViewButtonClicked() {\r\n this.viewButtonClicked.emit();\r\n }\r\n\r\n onDownloadButtonClicked() {\r\n this.isDownloaded = true;\r\n\r\n setTimeout(() => {\r\n this.isDownloaded = false;\r\n }, 2000);\r\n\r\n this.downloadButtonClicked.emit();\r\n }\r\n\r\n onShowCopyButton() {\r\n if (this.cellStyle === 'standard') {\r\n this.showStandardCopyButton = true;\r\n }\r\n }\r\n\r\n onHideCopyButton() {\r\n if (this.cellStyle === 'standard') {\r\n this.showStandardCopyButton = false;\r\n }\r\n }\r\n\r\n async copyToClipboard() {\r\n try {\r\n await navigator.clipboard.writeText(this.detail);\r\n this.copied = true;\r\n\r\n setTimeout(() => {\r\n this.copied = false;\r\n }, 2000); // Reset copied state after 2 seconds\r\n } catch (error) {\r\n console.error('Failed to copy:', error);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`detail_cell_div ${this.type} ${this.cellStyle}`} onMouseEnter={() => this.onShowCopyButton()} onMouseLeave={() => this.onHideCopyButton()}>\r\n {this.type === 'information' && this.cellStyle === 'standard' && (\r\n <>\r\n <div class=\"info_text_div\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n <p class=\"detail text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.detail}\r\n </p>\r\n {this.showTooltip && (\r\n <gb-tooltip show-arrow={false} class=\"information_text_tooltip\">\r\n <p slot=\"label\">{this.detail}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n {this.showStandardCopyButton && (\r\n <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading=\"true\" icon-leading-swap=\"assets/copy.svg\" onClick={() => this.copyToClipboard()}></gb-button>\r\n )}\r\n {this.copied && (\r\n <gb-tooltip show-arrow={false} class=\"copied_tooltip\">\r\n <p slot=\"label\">Copied!</p>\r\n </gb-tooltip>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'document' && this.cellStyle === 'standard' && (\r\n <>\r\n <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n <div class=\"document_text_div\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n <p class=\"detail text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.detail}\r\n </p>\r\n {this.showTooltip && (\r\n <gb-tooltip show-arrow={false} class=\"document_detail_tooltip\">\r\n <p slot=\"label\">{this.detail}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n {!this.isDownloaded ? (\r\n <>\r\n {this.showActionButtons && (\r\n <>\r\n {this.showViewButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/view.svg\"\r\n onClick={() => this.onViewButtonClicked()}\r\n ></gb-button>\r\n )}\r\n {this.showDownloadButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/download-03.svg\"\r\n onClick={() => this.onDownloadButtonClicked()}\r\n ></gb-button>\r\n )}\r\n </>\r\n )}\r\n </>\r\n ) : (\r\n <gb-tooltip show-arrow={false} class=\"downloaded_tooltip\">\r\n <p slot=\"label\">Downloaded!</p>\r\n </gb-tooltip>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'status' && this.cellStyle === 'standard' && (\r\n <div class=\"status_text_div\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n <gb-badge size=\"sm\" type={this.badgeType} icon=\"dot\" color={this.badgeColor}>\r\n <p>{this.badgeLabel}</p>\r\n </gb-badge>\r\n </div>\r\n )}\r\n {this.type === 'information' && this.cellStyle === 'compact' && (\r\n <div class=\"compact_info_div\">\r\n <div class=\"compact_info_text_div\">\r\n <div class=\"compact_label\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n </div>\r\n <div class=\"compact_detail\">\r\n <p class=\"detail_compact_text text-md-medium\">{this.detail}</p>\r\n {this.copied && (\r\n <gb-tooltip show-arrow={false} class=\"compact_copied_tooltip\">\r\n <p slot=\"label\">Copied!</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n {this.showCopyButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/copy.svg\"\r\n onClick={() => this.copyToClipboard()}\r\n ></gb-button>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'document' && this.cellStyle === 'compact' && (\r\n <div class=\"compact_doc_div\">\r\n <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n <div class=\"compact_doc_text_div\">\r\n <p class=\"doc_label text-sm-regular\">{this.label}</p>\r\n <div class=\"compact_doc_detail\">\r\n <p class=\"detaill text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n {this.detail}\r\n </p>\r\n </div>\r\n {this.isDownloaded && (\r\n <gb-tooltip show-arrow={false} class=\"compact_downloaded_tooltip\">\r\n <p slot=\"label\">Downloaded!</p>\r\n </gb-tooltip>\r\n )}\r\n {this.showActionButtons && (\r\n <div class=\"button_container\">\r\n {this.showViewButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/view.svg\"\r\n onClick={() => this.onViewButtonClicked()}\r\n ></gb-button>\r\n )}\r\n {this.showDownloadButton && (\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading=\"true\"\r\n icon-leading-swap=\"assets/download-03.svg\"\r\n onClick={() => this.onDownloadButtonClicked()}\r\n ></gb-button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'status' && this.cellStyle === 'compact' && (\r\n <div class=\"compact_status_div\">\r\n <div class=\"compact_status_text_div\">\r\n <div class=\"compact_label\">\r\n <p class=\"label text-sm-regular\">{this.label}</p>\r\n </div>\r\n <gb-badge size=\"sm\" type={this.badgeType} icon=\"dot\" color={this.badgeColor}>\r\n <p>{this.badgeLabel}</p>\r\n </gb-badge>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -63,7 +63,7 @@ const GbHeader$1 = /*@__PURE__*/ proxyCustomElement(class GbHeader extends H {
|
|
|
63
63
|
const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
|
|
64
64
|
const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
65
65
|
const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
66
|
-
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '
|
|
66
|
+
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '2ce1bc88f9dd3d05b98b8e6c194ff267a2d1747f', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '50bb4aa47e78bc4dc0e61c9eb3b9e95d683e5ec9', src: logo, alt: "" })), h("div", { key: 'a9a9ecfdd28d4e44e4d9046c0e57c13ad07fd762', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '0e69e359f719a422ed3267158c9130b1956b126e', src: iconLogo, alt: "" })))), h("div", { key: '4b8011a3de7b2f7e6f0fd7a0be4727735d694f2f', class: "inner_content" }, h("div", { key: 'ac586242978e6fc7521d90b1d58de54ed5fe0d7e', class: `action` }, this.showHelp && h("gb-header-icon", { key: 'e6a28785ba274970291a9cd4f2fbeaafad3628ad', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: 'a7a8b857753a2af10e3959cb80d9b4752c29c79a', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: '91f39c66cb6564916bd1a7361cc26557a49bb13a', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
|
|
67
67
|
}
|
|
68
68
|
get el() { return this; }
|
|
69
69
|
static get style() { return GbHeaderStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-header.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,soBAAsoB,CAAC;AAC3pB,uBAAe,WAAW;;MCObA,UAAQ;;;;;;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;0BAEN,KAAK;gCACC,KAAK;wBACb,KAAK;wBACL,KAAK;;IAKjC,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;SACnB;KACF;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACrD;KACF;IAGD,MAAM,mBAAmB,CAAC,IAAY;;QAEpC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;KAEnC;IAED,MAAM,aAAa;QACjB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,YAAY,CAAC,kCAAkC,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,YAAY,CAAC,mCAAmC,CAAC,CAAC;QAEnE,QACE,4DAAK,KAAK,EAAE,YAAY,IACtB,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,QAAQ,KACZ,kBACE,4DAAK,KAAK,EAAC,MAAM,
|
|
1
|
+
{"file":"gb-header.js","mappings":"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","names":["GbHeader"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":[".header_div{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center; \r\n width: 100%;\r\n border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n height: 4.5rem;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n align-self: stretch;\r\n}\r\n\r\n.logo{\r\n display: block;\r\n}\r\n\r\n.icon_logo{\r\n display: none;\r\n}\r\n\r\n.inner_content{\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex: 1 0 0;\r\n}\r\n\r\n.action{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n@media (max-width: 440px) {\r\n .content{\r\n padding: var(--spacing-none) var(--spacing-5);\r\n }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n .logo{\r\n display: none;\r\n }\r\n\r\n .icon_logo{\r\n display: block;\r\n }\r\n}","import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop, Fragment } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-header',\r\n styleUrl: 'gb-header.css',\r\n shadow: true,\r\n})\r\nexport class GbHeader {\r\n @Prop() state: StateEnum;\r\n @Prop() showIndicator: boolean = false;\r\n @Prop() text: boolean = false;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() color: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Prop() showNotification: boolean = false;\r\n @Prop() showHelp: boolean = false;\r\n @Prop() showLogo: boolean = false;\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<string>;\r\n @Event() menuClicked: EventEmitter<void>;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n initials.classList.add('text-md-semi-bold');\r\n initials.classList.add(this.applyColorToInitials());\r\n }\r\n }\r\n\r\n @Method()\r\n async onNavBarItemClicked(item: string) {\r\n // console.log('nav-bar-item clicked');\r\n this.navBarItemClicked.emit(item);\r\n // console.log(index);\r\n }\r\n\r\n async onMenuClicked() {\r\n this.menuClicked.emit();\r\n }\r\n\r\n render() {\r\n const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n return (\r\n <div class={`header_div`}>\r\n <div class=\"content\">\r\n {this.showLogo && (\r\n <>\r\n <div class=\"logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n <img src={logo} alt=\"\" />\r\n </div>\r\n <div class=\"icon_logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n <img src={iconLogo} alt=\"\" />\r\n </div>\r\n </>\r\n )}\r\n <div class=\"inner_content\">\r\n <div class={`action`}>\r\n {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked('help')}></gb-header-icon>}\r\n {this.showNotification && (\r\n <gb-header-icon\r\n state={this.state}\r\n icon={notificationIconSrc}\r\n show-indicator={this.showIndicator}\r\n onClick={() => this.onNavBarItemClicked('notification')}\r\n ></gb-header-icon>\r\n )}\r\n </div>\r\n <gb-avatar\r\n size=\"md\"\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n onClick={() => this.onNavBarItemClicked('avatar')}\r\n >\r\n {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n </gb-avatar>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -10,6 +10,10 @@ const GbStepperHorizontalLineWithText$1 = /*@__PURE__*/ proxyCustomElement(class
|
|
|
10
10
|
super();
|
|
11
11
|
this.__registerHost();
|
|
12
12
|
this.__attachShadow();
|
|
13
|
+
this.handleResize = () => {
|
|
14
|
+
this.width = window.innerWidth;
|
|
15
|
+
this.updatePropBasedOnSize();
|
|
16
|
+
};
|
|
13
17
|
this.size = undefined;
|
|
14
18
|
this.breakpoint = undefined;
|
|
15
19
|
this.showContent = false;
|
|
@@ -42,16 +46,24 @@ const GbStepperHorizontalLineWithText$1 = /*@__PURE__*/ proxyCustomElement(class
|
|
|
42
46
|
this.fifthStepSupportingText = '';
|
|
43
47
|
this.sixthStepSupportingText = '';
|
|
44
48
|
this.seventhStepSupportingText = '';
|
|
49
|
+
this.width = window.innerWidth;
|
|
50
|
+
}
|
|
51
|
+
componentWillLoad() {
|
|
52
|
+
this.updatePropBasedOnSize();
|
|
53
|
+
window.addEventListener('resize', this.handleResize);
|
|
54
|
+
}
|
|
55
|
+
updatePropBasedOnSize() {
|
|
56
|
+
this.showSupportingText = this.width < 768 ? false : true;
|
|
45
57
|
}
|
|
46
58
|
render() {
|
|
47
|
-
return (h("div", { key: '
|
|
59
|
+
return (h("div", { key: 'd733e51f58b7729651bd3ccf8a02766b6021d382', class: "text_with_line" }, h("gb-step-base", { key: '48713ec89b1690dcdb0e3eaf51af3d08c97fc759', size: this.size, type: "text_line", state: this.firstStepState, status: this.firstStepStatus, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), h("gb-step-base", { key: 'e7f2d3b1b33930d7d7b52216735e0e2e4587abf2', size: this.size, type: "text_line", state: this.secondStepState, status: this.secondStepStatus, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), this.thirdStepLabel && (h("gb-step-base", { key: '557bdc0f8d3eb1d4bd2a3a2c045b194f51bb8693', size: this.size, type: "text_line", state: this.thirdStepState, status: this.thirdStepStatus, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fourthStepLabel && (h("gb-step-base", { key: '2270971a094e7a8d75b1ec9bee100831f58a2831', size: this.size, type: "text_line", state: this.fourthStepState, status: this.fourthStepStatus, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fifthStepLabel && (h("gb-step-base", { key: '5ea8c20066ab46d90e97298de20978f0e1738b8a', size: this.size, type: "text_line", state: this.fifthStepState, status: this.fifthStepStatus, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.sixthStepLabel && (h("gb-step-base", { key: 'bff5ddf0ad83573fa3a3bef9d97807a52056bf10', size: this.size, type: "text_line", state: this.sixthStepState, status: this.sixthStepStatus, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.seventhStepLabel && (h("gb-step-base", { key: 'c0dde41fe810d95aac96a4991917fd131e8e8c65', size: this.size, type: "text_line", state: this.seventhStepState, status: this.seventhStepStatus, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }))));
|
|
48
60
|
}
|
|
49
61
|
static get style() { return GbStepperHorizontalLineWithTextStyle0; }
|
|
50
62
|
}, [1, "gb-stepper-horizontal-line-with-text", {
|
|
51
63
|
"size": [1],
|
|
52
64
|
"breakpoint": [1],
|
|
53
65
|
"showContent": [4, "show-content"],
|
|
54
|
-
"showSupportingText": [
|
|
66
|
+
"showSupportingText": [1028, "show-supporting-text"],
|
|
55
67
|
"firstStepState": [1, "first-step-state"],
|
|
56
68
|
"secondStepState": [1, "second-step-state"],
|
|
57
69
|
"thirdStepState": [1, "third-step-state"],
|
|
@@ -79,7 +91,8 @@ const GbStepperHorizontalLineWithText$1 = /*@__PURE__*/ proxyCustomElement(class
|
|
|
79
91
|
"fourthStepSupportingText": [1, "fourth-step-supporting-text"],
|
|
80
92
|
"fifthStepSupportingText": [1, "fifth-step-supporting-text"],
|
|
81
93
|
"sixthStepSupportingText": [1, "sixth-step-supporting-text"],
|
|
82
|
-
"seventhStepSupportingText": [1, "seventh-step-supporting-text"]
|
|
94
|
+
"seventhStepSupportingText": [1, "seventh-step-supporting-text"],
|
|
95
|
+
"width": [32]
|
|
83
96
|
}]);
|
|
84
97
|
function defineCustomElement$1() {
|
|
85
98
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-stepper-horizontal-line-with-text.js","mappings":";;;;AAAA,MAAM,kCAAkC,GAAG,2GAA2G,CAAC;AACvJ,8CAAe,kCAAkC;;MCOpCA,iCAA+B
|
|
1
|
+
{"file":"gb-stepper-horizontal-line-with-text.js","mappings":"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","names":["GbStepperHorizontalLineWithText"],"sources":["src/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.css?tag=gb-stepper-horizontal-line-with-text&encapsulation=shadow","src/components/gb-stepper-horizontal-line-with-text/gb-stepper-horizontal-line-with-text.tsx"],"sourcesContent":[".text_with_line{\r\n display: flex;\r\n width: 100%;\r\n align-items: stretch;\r\n gap: var(--spacing-4);\r\n}\r\n\r\ngb-step-base{\r\n width: 100%;\r\n}","import { Component, Prop, State, h } from '@stencil/core';\r\nimport { BreakPoints, GeneralSizes, ProgressStepStates, ProgressStepStatus } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-stepper-horizontal-line-with-text',\r\n styleUrl: 'gb-stepper-horizontal-line-with-text.css',\r\n shadow: true,\r\n})\r\nexport class GbStepperHorizontalLineWithText {\r\n @Prop() size: GeneralSizes;\r\n @Prop() breakpoint: BreakPoints;\r\n @Prop() showContent: boolean = false;\r\n @Prop({ mutable: true }) showSupportingText: boolean = false;\r\n @Prop() firstStepState: ProgressStepStates;\r\n @Prop() secondStepState: ProgressStepStates;\r\n @Prop() thirdStepState: ProgressStepStates;\r\n @Prop() fourthStepState: ProgressStepStates;\r\n @Prop() fifthStepState: ProgressStepStates;\r\n @Prop() sixthStepState: ProgressStepStates;\r\n @Prop() seventhStepState: ProgressStepStates;\r\n @Prop() firstStepStatus: ProgressStepStatus;\r\n @Prop() secondStepStatus: ProgressStepStatus;\r\n @Prop() thirdStepStatus: ProgressStepStatus;\r\n @Prop() fourthStepStatus: ProgressStepStatus;\r\n @Prop() fifthStepStatus: ProgressStepStatus;\r\n @Prop() sixthStepStatus: ProgressStepStatus;\r\n @Prop() seventhStepStatus: ProgressStepStatus;\r\n @Prop() firstStepLabel: string = '';\r\n @Prop() secondStepLabel: string = '';\r\n @Prop() thirdStepLabel: string = '';\r\n @Prop() fourthStepLabel: string = '';\r\n @Prop() fifthStepLabel: string = '';\r\n @Prop() sixthStepLabel: string = '';\r\n @Prop() seventhStepLabel: string = '';\r\n @Prop() firstStepSupportingText: string = '';\r\n @Prop() secondStepSupportingText: string = '';\r\n @Prop() thirdStepSupportingText: string = '';\r\n @Prop() fourthStepSupportingText: string = '';\r\n @Prop() fifthStepSupportingText: string = '';\r\n @Prop() sixthStepSupportingText: string = '';\r\n @Prop() seventhStepSupportingText: string = '';\r\n @State() width: number = window.innerWidth;\r\n\r\n componentWillLoad() {\r\n this.updatePropBasedOnSize()\r\n window.addEventListener('resize', this.handleResize)\r\n }\r\n\r\n private handleResize = () => {\r\n this.width = window.innerWidth;\r\n this.updatePropBasedOnSize()\r\n }\r\n\r\n private updatePropBasedOnSize () {\r\n this.showSupportingText = this.width < 768 ? false : true;\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"text_with_line\">\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.firstStepState}\r\n status={this.firstStepStatus}\r\n label={this.firstStepLabel}\r\n supporting-text={this.firstStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.secondStepState}\r\n status={this.secondStepStatus}\r\n label={this.secondStepLabel}\r\n supporting-text={this.secondStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n {this.thirdStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.thirdStepState}\r\n status={this.thirdStepStatus}\r\n label={this.thirdStepLabel}\r\n supporting-text={this.thirdStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.fourthStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.fourthStepState}\r\n status={this.fourthStepStatus}\r\n label={this.fourthStepLabel}\r\n supporting-text={this.fourthStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.fifthStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.fifthStepState}\r\n status={this.fifthStepStatus}\r\n label={this.fifthStepLabel}\r\n supporting-text={this.fifthStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.sixthStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.sixthStepState}\r\n status={this.sixthStepStatus}\r\n label={this.sixthStepLabel}\r\n supporting-text={this.sixthStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n {this.seventhStepLabel && (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"text_line\"\r\n state={this.seventhStepState}\r\n status={this.seventhStepStatus}\r\n label={this.seventhStepLabel}\r\n supporting-text={this.seventhStepSupportingText}\r\n show-content={this.showContent}\r\n show-supporting-text={this.showSupportingText}\r\n ></gb-step-base>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-03-
|
|
2
|
+
"timestamp": "2025-03-18T09:25:43",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.20.0",
|
|
@@ -15305,7 +15305,7 @@
|
|
|
15305
15305
|
"resolved": "boolean",
|
|
15306
15306
|
"references": {}
|
|
15307
15307
|
},
|
|
15308
|
-
"mutable":
|
|
15308
|
+
"mutable": true,
|
|
15309
15309
|
"attr": "show-supporting-text",
|
|
15310
15310
|
"reflectToAttr": false,
|
|
15311
15311
|
"docs": "",
|
|
@@ -650,7 +650,6 @@ const GbDetailCell = class {
|
|
|
650
650
|
}
|
|
651
651
|
updateCellStyle() {
|
|
652
652
|
this.cellStyle = this.width < 768 ? 'compact' : 'standard';
|
|
653
|
-
console.log(this.width);
|
|
654
653
|
}
|
|
655
654
|
onViewButtonClicked() {
|
|
656
655
|
this.viewButtonClicked.emit();
|
|
@@ -685,9 +684,8 @@ const GbDetailCell = class {
|
|
|
685
684
|
}
|
|
686
685
|
}
|
|
687
686
|
render() {
|
|
688
|
-
return (h("div", { key: '
|
|
687
|
+
return (h("div", { key: '1553706466bc58168bdeb1b2c3354190b4400582', class: `detail_cell_div ${this.type} ${this.cellStyle}`, onMouseEnter: () => this.onShowCopyButton(), onMouseLeave: () => this.onHideCopyButton() }, this.type === 'information' && this.cellStyle === 'standard' && (h(Fragment, null, h("div", { key: '33ec965d64e941750629df4098fa2255f68b694d', class: "info_text_div" }, h("p", { key: 'd105ac2111148e1ba349f6c151de00f5fa589aa8', class: "label text-sm-regular" }, this.label), h("p", { key: '5154a8aaf7b156704c33fedeab091389a7d2c92b', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '0012a66f18e8aaa6d846f41e3508821abdbd49b1', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: '0440c79101b5fd0bb67fcd71ad70e50163648433', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: '6eb23ab566809271d7e7afeacbcf29a8c4388377', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/copy.svg", onClick: () => this.copyToClipboard() })), this.copied && (h("gb-tooltip", { key: '44007f77eec1ab7fbace55b3d597c9676f61ed7c', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: '6e4cc647ada1184de14e9880a16129f0decbb225', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: '4efcda0eebbff709bfecf0cad316b04e161c6d94', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: 'f56d825aedf3735e5b59a4db5a754a6e18ae20b4', class: "document_text_div" }, h("p", { key: 'aadaa8c53ceb2b22a9f27a4b5f29ef1d64976e88', class: "label text-sm-regular" }, this.label), h("p", { key: '537e7017288331c9c7ff1faffe5fdc4349031d1d', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: 'f86120a65c36fe37a4a5cd7d068483ef32a49c35', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: '79aec15ef8952a82c64c4481bf0e05e169a11308', slot: "label" }, this.detail)))), !this.isDownloaded ? (h(Fragment, null, this.showActionButtons && (h(Fragment, null, this.showViewButton && (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/view.svg", onClick: () => this.onViewButtonClicked() })), this.showDownloadButton && (h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/download-03.svg", onClick: () => this.onDownloadButtonClicked() })))))) : (h("gb-tooltip", { "show-arrow": false, class: "downloaded_tooltip" }, h("p", { slot: "label" }, "Downloaded!"))))), this.type === 'status' && this.cellStyle === 'standard' && (h("div", { key: 'b72812e9b91b89b3109b23679ed9165d83fc72aa', class: "status_text_div" }, h("p", { key: 'efacd0f4722eceb1397578bf7dc4425d6301affe', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: '4c0c31923a5e19e26f03c62c59ae8941c81f7618', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '488ba92cacdadd8c65b120813ae6d2614fd95907' }, this.badgeLabel)))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: '329a16b35ca9a9654e4aaf19c8d28c92ce530028', class: "compact_info_div" }, h("div", { key: '59556b9b38ec304e53554d27439c4ca5b051cc1c', class: "compact_info_text_div" }, h("div", { key: '7ef56dd340a2bfdecc7a2311d2c2e034e2cda7ba', class: "compact_label" }, h("p", { key: 'c4700ad143d378011c3f438aeb0e2efd58e5a4bd', class: "label text-sm-regular" }, this.label)), h("div", { key: '99c42029ebb32a9bb810d69a054d6c178c70b110', class: "compact_detail" }, h("p", { key: '219d00fc805aa7261d8a05ab9e61ae9d43ebb2af', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: '22f52674e947aebd410410e8dd65a69309bf48b0', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: '01ca5f47e44773234b401b7f8aa824773fbad278', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: '67cb677c6efae405f2eae95bbfb40c2b030e694d', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/copy.svg", onClick: () => this.copyToClipboard() }))))), this.type === 'document' && this.cellStyle === 'compact' && (h("div", { key: 'a9f6354505eb25bdf48ac4fd2c5de8d8eed7412d', class: "compact_doc_div" }, h("gb-file-type-icon", { key: '52aabff2a94cc4ec54ba26ca976dd94cb493f4d7', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '736ee7ebe5df90bc6d97da150b83d294000d4746', class: "compact_doc_text_div" }, h("p", { key: '05eb2d050cacd70301cc6e69e86a940f8169351b', class: "doc_label text-sm-regular" }, this.label), h("div", { key: '66e5b2e793c12da061eefa562be8591f06b9738a', class: "compact_doc_detail" }, h("p", { key: 'f47ca81acccc056cef3de6792032051bdf810dd4', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: '7c594c9fe39f0ade8bb7f9d0fd6be02ea1f6a058', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: 'b53de10d9bd1e2e4b5b7979c1a484fa7385f130f', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '2952ff5ef85c62206c83d3695249086cb5b0462a', class: "button_container" }, this.showViewButton && (h("gb-button", { key: 'a4b5c88a33cfa8e9c9d2ec010c9c89ba4627e6eb', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/view.svg", onClick: () => this.onViewButtonClicked() })), this.showDownloadButton && (h("gb-button", { key: '1ac75d58d7579e90223bc46bf0b496dd14bd972a', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/download-03.svg", onClick: () => this.onDownloadButtonClicked() }))))))), this.type === 'status' && this.cellStyle === 'compact' && (h("div", { key: '4ed254c054d89cfd96193f54eac909a20ea7beab', class: "compact_status_div" }, h("div", { key: 'c30634c7d918b342cd9e9413cd69867b9ad579c3', class: "compact_status_text_div" }, h("div", { key: 'f19c4d39cbdc50bde2812a2b2a6f632661a126c9', class: "compact_label" }, h("p", { key: 'f708466e7bce39fef8a9f3eb2544467f5e2267a5', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: '5a7a92fe89d991da7923da89623fe5511486dc1f', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '369e9413d0f0f818cc8293f2b46f61b9c2514318' }, this.badgeLabel)))))));
|
|
689
688
|
}
|
|
690
|
-
get el() { return getElement(this); }
|
|
691
689
|
};
|
|
692
690
|
GbDetailCell.style = GbDetailCellStyle0;
|
|
693
691
|
|
|
@@ -776,7 +774,7 @@ const GbHeader = class {
|
|
|
776
774
|
const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
|
|
777
775
|
const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
778
776
|
const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
779
|
-
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '
|
|
777
|
+
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '2ce1bc88f9dd3d05b98b8e6c194ff267a2d1747f', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '50bb4aa47e78bc4dc0e61c9eb3b9e95d683e5ec9', src: logo, alt: "" })), h("div", { key: 'a9a9ecfdd28d4e44e4d9046c0e57c13ad07fd762', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '0e69e359f719a422ed3267158c9130b1956b126e', src: iconLogo, alt: "" })))), h("div", { key: '4b8011a3de7b2f7e6f0fd7a0be4727735d694f2f', class: "inner_content" }, h("div", { key: 'ac586242978e6fc7521d90b1d58de54ed5fe0d7e', class: `action` }, this.showHelp && h("gb-header-icon", { key: 'e6a28785ba274970291a9cd4f2fbeaafad3628ad', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: 'a7a8b857753a2af10e3959cb80d9b4752c29c79a', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: '91f39c66cb6564916bd1a7361cc26557a49bb13a', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
|
|
780
778
|
}
|
|
781
779
|
get el() { return getElement(this); }
|
|
782
780
|
};
|
|
@@ -1575,6 +1573,10 @@ const GbStepperHorizontalLineWithTextStyle0 = gbStepperHorizontalLineWithTextCss
|
|
|
1575
1573
|
const GbStepperHorizontalLineWithText = class {
|
|
1576
1574
|
constructor(hostRef) {
|
|
1577
1575
|
registerInstance(this, hostRef);
|
|
1576
|
+
this.handleResize = () => {
|
|
1577
|
+
this.width = window.innerWidth;
|
|
1578
|
+
this.updatePropBasedOnSize();
|
|
1579
|
+
};
|
|
1578
1580
|
this.size = undefined;
|
|
1579
1581
|
this.breakpoint = undefined;
|
|
1580
1582
|
this.showContent = false;
|
|
@@ -1607,9 +1609,17 @@ const GbStepperHorizontalLineWithText = class {
|
|
|
1607
1609
|
this.fifthStepSupportingText = '';
|
|
1608
1610
|
this.sixthStepSupportingText = '';
|
|
1609
1611
|
this.seventhStepSupportingText = '';
|
|
1612
|
+
this.width = window.innerWidth;
|
|
1613
|
+
}
|
|
1614
|
+
componentWillLoad() {
|
|
1615
|
+
this.updatePropBasedOnSize();
|
|
1616
|
+
window.addEventListener('resize', this.handleResize);
|
|
1617
|
+
}
|
|
1618
|
+
updatePropBasedOnSize() {
|
|
1619
|
+
this.showSupportingText = this.width < 768 ? false : true;
|
|
1610
1620
|
}
|
|
1611
1621
|
render() {
|
|
1612
|
-
return (h("div", { key: '
|
|
1622
|
+
return (h("div", { key: 'd733e51f58b7729651bd3ccf8a02766b6021d382', class: "text_with_line" }, h("gb-step-base", { key: '48713ec89b1690dcdb0e3eaf51af3d08c97fc759', size: this.size, type: "text_line", state: this.firstStepState, status: this.firstStepStatus, label: this.firstStepLabel, "supporting-text": this.firstStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), h("gb-step-base", { key: 'e7f2d3b1b33930d7d7b52216735e0e2e4587abf2', size: this.size, type: "text_line", state: this.secondStepState, status: this.secondStepStatus, label: this.secondStepLabel, "supporting-text": this.secondStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }), this.thirdStepLabel && (h("gb-step-base", { key: '557bdc0f8d3eb1d4bd2a3a2c045b194f51bb8693', size: this.size, type: "text_line", state: this.thirdStepState, status: this.thirdStepStatus, label: this.thirdStepLabel, "supporting-text": this.thirdStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fourthStepLabel && (h("gb-step-base", { key: '2270971a094e7a8d75b1ec9bee100831f58a2831', size: this.size, type: "text_line", state: this.fourthStepState, status: this.fourthStepStatus, label: this.fourthStepLabel, "supporting-text": this.fourthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.fifthStepLabel && (h("gb-step-base", { key: '5ea8c20066ab46d90e97298de20978f0e1738b8a', size: this.size, type: "text_line", state: this.fifthStepState, status: this.fifthStepStatus, label: this.fifthStepLabel, "supporting-text": this.fifthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.sixthStepLabel && (h("gb-step-base", { key: 'bff5ddf0ad83573fa3a3bef9d97807a52056bf10', size: this.size, type: "text_line", state: this.sixthStepState, status: this.sixthStepStatus, label: this.sixthStepLabel, "supporting-text": this.sixthStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText })), this.seventhStepLabel && (h("gb-step-base", { key: 'c0dde41fe810d95aac96a4991917fd131e8e8c65', size: this.size, type: "text_line", state: this.seventhStepState, status: this.seventhStepStatus, label: this.seventhStepLabel, "supporting-text": this.seventhStepSupportingText, "show-content": this.showContent, "show-supporting-text": this.showSupportingText }))));
|
|
1613
1623
|
}
|
|
1614
1624
|
};
|
|
1615
1625
|
GbStepperHorizontalLineWithText.style = GbStepperHorizontalLineWithTextStyle0;
|