globuswebcomponents 1.3.0 → 1.3.2

package/dist/collection/collection-manifest.json

@@ -74,6 +74,8 @@
     "components/gb-token-field-compact/gb-token-field-compact.js",
     "components/gb-token-field-compressed/gb-token-field-compressed.js",
     "components/gb-tooltip/gb-tooltip.js",
+    "components/gb-top-bar/gb-top-bar.js",
+    "components/gb-top-bar-item/gb-top-bar-item.js",
     "components/gb-vertical-tabs/gb-vertical-tabs.js",
     "components/gb-wysiwyg-editor-icon/gb-wysiwyg-editor-icon.js",
     "components/gb-wysiwyg-tooltip/gb-wysiwyg-tooltip.js",

package/dist/collection/components/gb-detail-cell/gb-detail-cell.css

@@ -2667,7 +2667,6 @@
 .detail_cell_div {
   display: flex;
   justify-content: space-between;
-  padding: 0 var(--spacing-6);
   align-items: center;
   border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
   cursor: pointer;
@@ -2681,8 +2680,9 @@
   background: var(--color-background-gray-subtlest, #f6f8fa);
 }
 
-.detail_cell_div.standard{
+.detail_cell_div.standard {
   height: 5rem;
+  padding: var(--spacing-none) var(--spacing-6);
 }
 
 .detail_cell_div.compact {
@@ -2759,7 +2759,7 @@
 .compact_info_div {
   display: flex;
   width: 100%;
-  padding: var(--spacing-3) var(--spacing-6);
+  padding: var(--spacing-3) var(--spacing-2);
   align-items: center;
 }
 
@@ -2786,7 +2786,7 @@
   text-align: right; /* Keeps text aligned to the right */
 }
 
-.detail_compact_text{
+.detail_compact_text {
   color: var(--color-text, #4b5565);
 }
 
@@ -2799,7 +2799,7 @@
 .compact_status_div {
   display: flex;
   width: 100%;
-  padding: var(--spacing-3) var(--spacing-6);
+  padding: var(--spacing-3) var(--spacing-2);
   align-items: center;
 }
 
@@ -2815,7 +2815,7 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-  padding: var(--spacing-3) var(--spacing-6);
+  padding: var(--spacing-3) var(--spacing-2);
   align-items: center;
   gap: var(--spacing-2);
 }
@@ -2838,24 +2838,23 @@
   overflow-wrap: break-word;
   white-space: normal; /* Allows wrapping */
   max-width: 100%; /* Prevents overflow */
-
 }
 
-.compact_doc_detail{
+.compact_doc_detail {
   display: flex;
   flex: 1 0 0;
   text-align: right;
   justify-content: flex-end;
 }
 
-.doc_label{
+.doc_label {
   color: var(--color-text-subtle, #697586);
   display: block; /* Ensure block or inline-block */
   white-space: nowrap; /* Prevent text from wrapping */
   text-overflow: ellipsis; /* Apply ellipsis */
 }
 
-.detaill{
+.detaill {
   max-width: 100%; /* Ensures it doesn’t stretch too far */
   word-break: break-word; /* Breaks long words */
   white-space: normal; /* Allows text to wrap */

package/dist/collection/components/gb-detail-cell/gb-detail-cell.js

@@ -53,7 +53,7 @@ export class GbDetailCell {
         }
     }
     render() {
-        return (h("div", { key: '16ab1845cc2409351ecf34c268f6b2321fdedd8b', class: `detail_cell_div ${this.cellStyle}`, onMouseEnter: () => this.onShowCopyButton(), onMouseLeave: () => this.onHideCopyButton() }, this.type === 'information' && this.cellStyle === 'standard' && (h(Fragment, null, h("div", { key: 'fb6bf2a2b623062f9aeb7749f2306a4a57b0a46c', class: "info_text_div" }, h("p", { key: '61ab0a85c46cfa911a151589963d366d44f0c209', class: "label text-sm-regular" }, this.label), h("p", { key: 'a2c8d777380e5631d1ed346d904e075cde5cf1fd', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '2fa0c57e5a8056c586079d2a894a4cc54f421822', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: '75b351dfda6c8b0c0eabfa6f6450b292975aa99c', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: 'a16eecf03cc81696e419149a52fe4fba1ca68a68', 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: 'e2e10bea70e5b762a51aba7d33f6fc6380cf7b98', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: '97b953ac99a6bb25f38a89d4d1ee5bde6f817d62', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: '6ec21ef7eadd07ce44ccf858b7dbacad00325f4c', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '5f24ec59bb9fe5a11da6b6311d4e8a03c19e9c40', class: "document_text_div" }, h("p", { key: 'a2d01425a0f4939af6166cf1c4efa73458bd22f5', class: "label text-sm-regular" }, this.label), h("p", { key: '70b74f84f31cdc1a2a090c30af29a537e3268a33', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '223794b0a6e285dd530209b92cdbcfc3bcfabc44', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: '4471f0ddbf02deb60ebfd64faeea169304d15911', 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: 'e31fab6f4474e5db67099bfc6215f492dec33ba9', class: "status_text_div" }, h("p", { key: 'a382e0dea7df3d418369ddb221964b4ea14c2398', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: '9bc18bd3529068c38da995885d073e86f41430fd', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: 'a98175e669d75d1e18bf74913559169479cd275f' }, this.badgeLabel)))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: 'c39d3ab5d9502f96e1566459aa2d7932d50dd60e', class: "compact_info_div" }, h("div", { key: '88d055227f69b5e93981585b2bf229696328b2bc', class: "compact_info_text_div" }, h("div", { key: 'bf2972ebd0cf63c6271e2260c6801bbab23743b4', class: "compact_label" }, h("p", { key: '3c3cd6f0f7dc54cdef43e11ad03bf89595f5a55e', class: "label text-sm-regular" }, this.label)), h("div", { key: 'b7019702bb715547679d3d45a4423a1adc21f82e', class: "compact_detail" }, h("p", { key: '60dec5e96058b2425ed57fba7e73f9cbe546c295', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: 'd7ce3c68bc910d1aa6e50dbab89eb5e809595ade', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: '2ba727638e52ef31c5be7e420c4dfd51f188818b', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: 'ec9dca4d530afaca0ee10894ed0ac6cfd6d71d6c', 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: '72c754666deacb7150c36de7e554f38b841650f7', class: "compact_doc_div" }, h("gb-file-type-icon", { key: '291fd5ade3820e0f9d6a4201f1fc591ab48d4576', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: 'a0d8e4759d127243ed1c4336eed3debf14db6282', class: "compact_doc_text_div" }, h("p", { key: 'ee0011ae6317fd891c22803569d13432448b2e4e', class: "doc_label text-sm-regular" }, this.label), h("div", { key: '571d4fe1bc361bd890bddf91a414587659b8c9fd', class: "compact_doc_detail" }, h("p", { key: '1faf1f25b0e6946b3b58ddb2c4ab436640f8beeb', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: '0ab504ae6027977ae55f1d24e7a5ce7a60dadca7', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: 'f75bf3d37f1f311720c901d1522d004a88d7a84f', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '5aa14a17a458f1e187f9164e62401805a0e57755', class: "button_container" }, this.showViewButton && (h("gb-button", { key: '205b21c7a49ee94fa2cd08d9be2021e08be4f69f', 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: 'cd23740249846bd35b00f32820a1c158d66fe28f', 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: '07d802e0bdf6cac4752e2509e8619745b28c03cf', class: "compact_status_div" }, h("div", { key: '9afeb7863f0239211fb84d7cb14284666c45c0d9', class: "compact_status_text_div" }, h("div", { key: '543e98b089f09c25af711c900c2926b5f8222f29', class: "compact_label" }, h("p", { key: '729e6f38ac439eaf6a946dccb3331b4426a60826', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: '5e0960fd9f0de408208de1072ba5076848caea88', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '8d6c12d4633f6bc95947c3ae8ca75324fe596a84' }, this.badgeLabel)))))));
+        return (h("div", { key: '4c59d38e5bf34890bb30f069c2d1ad2556d1bdbc', 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: 'd1dfa6885f9a05cfa11ce3503cd19dc0f5d211fe', class: "info_text_div" }, h("p", { key: '8a3f3a9ab4c800b77506a7c71a71012dd839ac36', class: "label text-sm-regular" }, this.label), h("p", { key: 'aff730519df40df7244c8b036ba3bcb87ea1ca28', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: 'e444f0b0b5b2e375644df5e8e40959de20ec3b10', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: 'b5f8ff0490ccead645a274242b2800384a02fb81', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: '862a19dbd2c6c7755b2265ed2aa34ecc9904748f', 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: '092cb67ab2bf1e3c81fd5cdfa47ef89ca1f59783', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: '96ceb0bbd3469c2fa0db23d40495281303d71a41', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: '9216c4af27e60e31486ca176b588da2daa2be2f9', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '8df41b7e9d691016fd8f83cec7fcb2e81956dfb1', class: "document_text_div" }, h("p", { key: 'bad176073ab7e2991c2c53a8eec6195c96b02dd0', class: "label text-sm-regular" }, this.label), h("p", { key: 'b5ffc8975efb74f72330df53d0e5ea6b452c2102', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '0270367ecfd9bc964d6955f95d77b20b24a8ff98', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: '9f72112ebcc3dd9f255e0e2a2c04f6146f8aaa93', 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: '2d8f77a2a6ea412fa7c977af90b8f469910bfff6', class: "status_text_div" }, h("p", { key: '86cb1318d108b45b47e4f14ccfb5c57f9261433e', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: 'ef0580bde63558b66c441fd3d9bdd1646ce4525c', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '0f88cdb01d2166695776f1a14bf49261288c110d' }, this.badgeLabel)))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: '26084dc9489a2e68fcf56f33be2a3b5e0516f6af', class: "compact_info_div" }, h("div", { key: '34c9444ad163a15966f5309b954eb793501e7849', class: "compact_info_text_div" }, h("div", { key: '2bce91befd97a8f7174cf4f9a4330f28b1ecd221', class: "compact_label" }, h("p", { key: 'a9a272abdbf9bf5fc88cfa829f9753a5a4be3aac', class: "label text-sm-regular" }, this.label)), h("div", { key: 'c089be4a7accebbb29fc3706b4ebcf19b93846f8', class: "compact_detail" }, h("p", { key: '853e63492e9a5f662ee62add35e5620f9103b336', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: '5c9cdb10c04751cc78b1bbc6709b2f0f8b909957', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: '7439cf8e185e691188296c2f14e92a9e0e6102cd', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: '500683cba9e9bae9239be3c2a371c49371bd780c', 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: 'e4534d00a9efe129c2f1a9c641dbab9d29e85370', class: "compact_doc_div" }, h("gb-file-type-icon", { key: '4d484f70dea25f55816104c012e76af65b14a274', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '12698279c55c023ac644ab18b91ff1016672c059', class: "compact_doc_text_div" }, h("p", { key: 'ec438bd2a0f873ad75982b468155af3ed631802c', class: "doc_label text-sm-regular" }, this.label), h("div", { key: '89e363de5113566ad138fd6d10b0963ae0b19699', class: "compact_doc_detail" }, h("p", { key: '23f0ad711e90c48f3335a7a928df35ab13958c16', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: '6a685c5f2800b312523d0a87f14e672590429461', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: '3cb04a3347d70d2a3c4ac91895efa71bfcce0d70', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '9507894a67601cf2cc608a83b3d60aa0afda806b', class: "button_container" }, this.showViewButton && (h("gb-button", { key: '188d83c98da3f2716ac676e1cada6e27cfe0a2f5', 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: '4b07784ee9d8c7e4aff65bd3b9500140b92a225d', 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: '4ecf1991582610e29df571de1655a0149efeca31', class: "compact_status_div" }, h("div", { key: '24cd51096ca331e65fe6c65331af1b5e637bc15b', class: "compact_status_text_div" }, h("div", { key: 'c52004167bf380a9cb7667947edad0a6b355158b', class: "compact_label" }, h("p", { key: '6313a111a9ab3f70ba51a85957b560c81444bea3', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: 'e5579a09c12031e5ecea280d881877dcc6e3f803', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '964bccf551715fe30f84e1dde6f84a116ffc2336' }, this.badgeLabel)))))));
     }
     static get is() { return "gb-detail-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-detail-cell/gb-detail-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-detail-cell.js","sourceRoot":"","sources":["../../../src/components/gb-detail-cell/gb-detail-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["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.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,"file":"gb-detail-cell.js","sourceRoot":"","sources":["../../../src/components/gb-detail-cell/gb-detail-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css

@@ -2660,121 +2660,123 @@
 }
 
 .shortcut-container {
-    display: flex;
-    width: 100%;
-    padding: var(--spacing-half) var(--spacing-1);
-    align-items: center;
-    gap: var(--spacing-none);
-    border-radius: var(--rounded-none);   
-    cursor: pointer;
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-half) var(--spacing-1);
+  align-items: center;
+  gap: var(--spacing-none);
+  border-radius: var(--rounded-none);
+  cursor: pointer;
 }
 
 .shortcut {
-    display: flex;
-    padding: var(--spacing-2);
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-2);
-    flex: 1 0 0;
-    border-radius: var(--rounded-xs);
+  display: flex;
+  padding: var(--spacing-2);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex: 1 0 0;
+  border-radius: var(--rounded-xs);
 }
 
-.shortcut.destructive:hover{
-    background-color: var(--color-background-danger-subtlest, #FEF1F2);
+.shortcut.destructive:hover {
+  background-color: var(--color-background-danger-subtlest, #fef1f2);
 }
 
-.shortcut.destructive:active{
-    background-color: var(--color-background-danger-subtler, #FDE3E5);
+.shortcut.destructive:active {
+  background-color: var(--color-background-danger-subtler, #fde3e5);
 }
 
 .label_div {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .label {
-    color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
 .label.destructive {
-    color: var(--color-text-danger, #B51726);
+  color: var(--color-text-danger, #b51726);
 }
 
 .shortcut-icon {
-    display: flex;
-    justify-content: flex-end;
-    color: var(--color-text, #4B5565);
-    font-family: var(--Font-Family-Body, Sora);
-    font-size: var(--Font-Size-T-xs, 12px);
-    font-style: normal;
-    font-weight: var(--Font-Weight-Regular, 400);
-    line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */
-    letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);
+  display: flex;
+  justify-content: flex-end;
+  color: var(--color-text, #4b5565);
+  font-family: var(--Font-Family-Body, Sora);
+  font-size: var(--Font-Size-T-xs, 12px);
+  font-style: normal;
+  font-weight: var(--Font-Weight-Regular, 400);
+  line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */
+  letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);
 }
 
 .icon_div {
-    padding-left: 7px;
-    width: 20px;
-    height: 20px;
+  padding-left: 7px;
+}
+
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .icon path[stroke] {
-    stroke: var(--color-icon, #4B5565);
+  stroke: var(--color-icon, #4b5565);
 }
 
 .icon path[fill] {
-    fill: var(--color-icon, #4B5565);
+  fill: var(--color-icon, #4b5565);
 }
 
 .icon.disabled path[stroke],
 .icon.disabled.destructive path[stroke] {
-    stroke: var(--color-icon-disabled, #CDD5DF);
+  stroke: var(--color-icon-disabled, #cdd5df);
 }
 
 .icon.disabled path[fill],
 .icon.disabled.destructive path[fill] {
-    fill: var(--color-icon-disabled, #CDD5DF);
+  fill: var(--color-icon-disabled, #cdd5df);
 }
 
 .icon.destructive path[stroke] {
-    stroke: var(--color-icon-danger, #B51726);
+  stroke: var(--color-icon-danger, #b51726);
 }
 
 .icon.destructive path[fill] {
-    fill: var(--color-icon-danger, #B51726);
+  fill: var(--color-icon-danger, #b51726);
 }
 
 gb-checkbox {
-    padding-top: 4px;
-    padding-left: 7px;
+  padding-top: 4px;
+  padding-left: 7px;
 }
 
 .shortcut:hover {
-    background-color: var(--color-background-gray-subtler, #EEF2F6);
+  background-color: var(--color-background-gray-subtler, #eef2f6);
 }
 .shortcut:active {
-    background: var(--color-background-gray-subtle, #E3E8EF);
+  background: var(--color-background-gray-subtle, #e3e8ef);
 }
 
 .shortcut.disabled {
-    background-color: var(---color-background-card, #ffffff);
-    color: var(--color-text-disabled, #CDD5DF);
-    pointer-events: none;
+  background-color: var(---color-background-card, #ffffff);
+  color: var(--color-text-disabled, #cdd5df);
+  pointer-events: none;
 }
 
 .shortcut.disabled .label,
 .shortcut.disabled .shortcut-icon,
 .shortcut.disabled gb-checkbox {
-    color: var(--color-text-disabled, #CDD5DF); /* Ensures all text/icons use the disabled color */
+  color: var(--color-text-disabled, #cdd5df); /* Ensures all text/icons use the disabled color */
 }
 
 .shortcut.disabled .icon img {
-    opacity: 0.5;
-    stroke: var(--color-icon-disabled, #CDD5DF); /* Reduce opacity for the icon in disabled state */
+  opacity: 0.5;
+  stroke: var(--color-icon-disabled, #cdd5df); /* Reduce opacity for the icon in disabled state */
 }
 
 /* Optional: You can also change the checkbox appearance */
 .shortcut.disabled gb-checkbox {
-    pointer-events: none;
-    opacity: 0.5; /* Dim the checkbox when disabled */
+  pointer-events: none;
+  opacity: 0.5; /* Dim the checkbox when disabled */
 }
-

package/dist/collection/components/gb-header/gb-header.css

@@ -43,7 +43,7 @@
     }
 }
 
-@media (max-width: 340px) {
+@media (max-width: 450px) {
     .logo{
         display: none;
     }

package/dist/collection/components/gb-top-bar/gb-top-bar.css

@@ -0,0 +1,45 @@
+.top_bar_div {
+  display: flex;
+  width: 100%;
+  height: 5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.top_bar_div.colored_background {
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);
+}
+
+.top_bar_div.plain_background {
+  border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);
+  background: var(--color-surface);
+}
+
+.top_bar_content {
+  display: flex;
+  padding: 0rem 2rem;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1 0 0;
+}
+
+.pattern {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  mix-blend-mode: multiply;
+}