npm - globuswebcomponents - Versions diffs - 1.3.2 → 1.3.4 - Mend

globuswebcomponents 1.3.2 → 1.3.4

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.

Files changed (58) hide show

package/dist/components/gb-detail-cell.js.map CHANGED Viewed

	@@ -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 } 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() 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 @Event() viewButtonClicked: EventEmitter<void>;\r\n @Event() downloadButtonClicked: EventEmitter<void>;\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}

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

@@ -10,6 +10,10 @@ const GbStepperHorizontalLineWithText$1 = /*@__PURE__*/ proxyCustomElement(class
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.updatePropBasedOnSize();
+        };
         this.size = undefined;
         this.breakpoint = undefined;
         this.showContent = false;
@@ -42,16 +46,24 @@ const GbStepperHorizontalLineWithText$1 = /*@__PURE__*/ proxyCustomElement(class
         this.fifthStepSupportingText = '';
         this.sixthStepSupportingText = '';
         this.seventhStepSupportingText = '';
+        this.width = window.innerWidth;
+    }
+    componentWillLoad() {
+        this.updatePropBasedOnSize();
+        window.addEventListener('resize', this.handleResize);
+    }
+    updatePropBasedOnSize() {
+        this.showSupportingText = this.width < 768 ? false : true;
     }
     render() {
-        return (h("div", { key: '621392cf06a84b250320fd17362706f082192a16', class: "text_with_line" }, h("gb-step-base", { key: '85c7b373bdf8eb31bf5743831d62d104d9707229', 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: 'fbffa619dd3e3e754bcccdebd54767c8c3aaf050', 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: 'caf10ccba9bc0ffba9b45aa8263c6babae8e99c0', 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: 'ad95242930df4239c849e951ca7d8d597c5a944d', 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: '011646c06a7409a8dc7a80b63d698907dbbf6f45', 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: '0ead260051b211464223011bdb73efcbb0862876', 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: '1943cf77014e2469b33e9b6e73dfff72edeac2e7', 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 }))));
+        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 }))));
     }
     static get style() { return GbStepperHorizontalLineWithTextStyle0; }
 }, [1, "gb-stepper-horizontal-line-with-text", {
         "size": [1],
         "breakpoint": [1],
         "showContent": [4, "show-content"],
-        "showSupportingText": [4, "show-supporting-text"],
+        "showSupportingText": [1028, "show-supporting-text"],
         "firstStepState": [1, "first-step-state"],
         "secondStepState": [1, "second-step-state"],
         "thirdStepState": [1, "third-step-state"],
@@ -79,7 +91,8 @@ const GbStepperHorizontalLineWithText$1 = /*@__PURE__*/ proxyCustomElement(class
         "fourthStepSupportingText": [1, "fourth-step-supporting-text"],
         "fifthStepSupportingText": [1, "fifth-step-supporting-text"],
         "sixthStepSupportingText": [1, "sixth-step-supporting-text"],
-        "seventhStepSupportingText": [1, "seventh-step-supporting-text"]
+        "seventhStepSupportingText": [1, "seventh-step-supporting-text"],
+        "width": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/gb-stepper-horizontal-line-with-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gb-stepper-horizontal-line-with-text.js","mappings":";;;;AAAA,MAAM,kCAAkC,GAAG,2GAA2G,CAAC;AACvJ,8CAAe,kCAAkC;;MCOpCA,iCAA+B~~;;;;;;;2BAGX~~,KAAK;~~kCACE~~,KAAK;;;;;;;;;;;;;;;~~8BAeV~~,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;;~~IAE9C~~,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,gBAAgB,IACzB,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,EAChB,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,EACf,IAAI,CAAC,cAAc,KAClB,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,EACA,IAAI,CAAC,eAAe,KACnB,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,EACA,IAAI,CAAC,cAAc,KAClB,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,EACA,IAAI,CAAC,cAAc,KAClB,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,EACA,IAAI,CAAC,gBAAgB,KACpB,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,EACN;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","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, 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() 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\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}
1	+ {"file":"gb-stepper-horizontal-line-with-text.js","mappings":";;;;AAAA,MAAM,kCAAkC,GAAG,2GAA2G,CAAC;AACvJ,8CAAe,kCAAkC;;MCOpCA,iCAA+B;;;;;QAwClC,iBAAY,GAAG;YACrB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;YAC/B,IAAI,CAAC,qBAAqB,EAAE,CAAA;SAC7B,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;KACrD;IAOO,qBAAqB;QAC3B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC;KAC3D;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,gBAAgB,IACzB,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,EAChB,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,EACf,IAAI,CAAC,cAAc,KAClB,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,EACA,IAAI,CAAC,eAAe,KACnB,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,EACA,IAAI,CAAC,cAAc,KAClB,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,EACA,IAAI,CAAC,cAAc,KAClB,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,EACA,IAAI,CAAC,gBAAgB,KACpB,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,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-03-17T12:51:55",
+  "timestamp": "2025-03-18T08:29:21",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",
@@ -5311,7 +5311,7 @@
               }
             }
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "cell-style",
           "reflectToAttr": false,
           "docs": "",
@@ -15305,7 +15305,7 @@
             "resolved": "boolean",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "show-supporting-text",
           "reflectToAttr": false,
           "docs": "",
@@ -19347,6 +19347,7 @@
       "filePath": "src/components/gb-top-bar/gb-top-bar.tsx",
       "encapsulation": "shadow",
       "tag": "gb-top-bar",
+      "readme": "# gb-top-bar\n\n\n",
       "docs": "",
       "docsTags": [],
       "usage": {},