globuswebcomponents 1.3.1 → 1.3.3

package/dist/collection/collection-manifest.json

@@ -74,6 +74,7 @@
     "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",

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

@@ -2682,17 +2682,13 @@
 
 .detail_cell_div.standard {
   height: 5rem;
+  padding: var(--spacing-none) var(--spacing-6);
 }
 
 .detail_cell_div.compact {
   padding: 0;
 }
 
-.detail_cell_div.standard.information,
-.detail_cell_div.standard.status {
-  padding: var(--spacing-none) var(--spacing-6);
-}
-
 .info_text_div,
 .status_text_div,
 .document_text_div {

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

@@ -1,6 +1,10 @@
 import { h, Fragment } from "@stencil/core";
 export class GbDetailCell {
     constructor() {
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.updateCellStyle();
+        };
         this.state = undefined;
         this.cellStyle = undefined;
         this.type = undefined;
@@ -19,6 +23,15 @@ export class GbDetailCell {
         this.showTooltip = false;
         this.copied = false;
         this.isDownloaded = false;
+        this.width = window.innerWidth;
+    }
+    componentWillLoad() {
+        this.updateCellStyle(); // Set initial variant
+        window.addEventListener('resize', this.handleResize);
+    }
+    updateCellStyle() {
+        this.cellStyle = this.width < 768 ? 'compact' : 'standard';
+        console.log(this.width);
     }
     onViewButtonClicked() {
         this.viewButtonClicked.emit();
@@ -31,7 +44,7 @@ export class GbDetailCell {
         this.downloadButtonClicked.emit();
     }
     onShowCopyButton() {
-        if (this.cellStyle === "standard") {
+        if (this.cellStyle === 'standard') {
             this.showStandardCopyButton = true;
         }
     }
@@ -53,7 +66,7 @@ export class GbDetailCell {
         }
     }
     render() {
-        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)))))));
+        return (h("div", { key: 'e104c5b01ec47ceec0b12e637676d0e6565da3e8', 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: '77bfe04fe341fdc83c31c4344df15482d5008124', class: "info_text_div" }, h("p", { key: '6e3ba16b8c515bda20b3063a16759818999ed163', class: "label text-sm-regular" }, this.label), h("p", { key: '5567e17d969d0301683ae8667c834dd9a60ba7e5', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '4d648cb2933ffb737fdc7f316f094153e7721e6e', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: 'c34136e6818a93eae0b776b4c5a9366584f651c4', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: '6db3c5f8bd18360342dde9cfd48ed9fb2f38a3c0', 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: '656487c4b126495fcd0c8f27ccaea87b4a7404ce', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: 'cda58e3228139c9e9e4b4d61c56ccd43b1a4bd26', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: 'bcd080fc61bccefb12358eaf36ea415c532d8036', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: 'd90736ad47474e4dfb87c5497eaa00b6814a1b29', class: "document_text_div" }, h("p", { key: 'ec45e08ab3db7715e5b1104c472ff4789bc9d02a', class: "label text-sm-regular" }, this.label), h("p", { key: '5ca48802a46d3a223ac28456cbce24a1a4f41625', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: 'a41669292bbe61705bf75111f051016421c135bc', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: '9aab554cbfa363ad462b892b396318f3a9aaab57', 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: '8bd65d8b975465784086303659fe400bda6fc0d0', class: "status_text_div" }, h("p", { key: 'a30d5a29d73609c872bf15a1f70fc4986a05b3e9', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: '37a9866e60e9e727b5f7d70ac2eda75394fbeafa', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '5080a957c924728fbc4f76d9c6f4e4b63a63c46c' }, this.badgeLabel)))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: 'b8c985f9778192dabd791c3cf1309e74f876bd9d', class: "compact_info_div" }, h("div", { key: 'd87202afdc46b32160433e9367e65b8911081758', class: "compact_info_text_div" }, h("div", { key: '0dfb4658f87e56f9eb8934ecfc32ac4c6683aa8b', class: "compact_label" }, h("p", { key: '53a88db33110370e9267d0b2a16b4eff9d66801c', class: "label text-sm-regular" }, this.label)), h("div", { key: '9a1f6ef7b3d5a6d8a32d0718ba1d8ab4d99f878f', class: "compact_detail" }, h("p", { key: '4920f6a2e3212c1363b3216fc22ff035109539fe', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: '069794e42d783c7a805a8807f2594819db08c090', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: 'd24b15b3245de4ae76862a14300c72f069f45bc5', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: '494844ec5b577adf50f6511cbdca0160eeb7c386', 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: '0801e3d0337c326bcee70bce87d71cd7247d341e', class: "compact_doc_div" }, h("gb-file-type-icon", { key: '01372b72fab2d7bac884a55abff1ee88f4e18f33', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '12f786e4848a7f003ef6ba4be6b1d83e902c28ed', class: "compact_doc_text_div" }, h("p", { key: '1d8ec881443027f351e5f173a3fa8f395e8a1eb2', class: "doc_label text-sm-regular" }, this.label), h("div", { key: '773804889ac8c6327269e7a0e5a9e65985c54826', class: "compact_doc_detail" }, h("p", { key: '843d735d5c0e4327bf41e4bd0bc51826215c3640', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: '3928a85caf0b61fcf9d8a180b6a6536861522dad', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: '0b552101f3176163c22113721f02518480bee1b7', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '2690140586575a4a9bed2217d5951be44d8628d5', class: "button_container" }, this.showViewButton && (h("gb-button", { key: 'f14847b9bca2bbb48311aca16910073412c2b0b5', 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: '5fa362b1cd5edbc8965e939a6022248ab9837f82', 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: 'b2774b335b754b2d3e8468347ef72a918c63d3fb', class: "compact_status_div" }, h("div", { key: 'def90ba6931d63b5bd15a6bf7dc4e06f136d503a', class: "compact_status_text_div" }, h("div", { key: 'fd52ce65d0eb51b25e7d1634413b620e887f11a8', class: "compact_label" }, h("p", { key: 'e15821bbccb3e3bfb70a3d0d47c20c4a953d9a48', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: '19960219dd6579f7464c5036ad67050dc7e36b4e', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: 'b11968857355e4119662adb9072f37875ee8094b' }, this.badgeLabel)))))));
     }
     static get is() { return "gb-detail-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -88,7 +101,7 @@ export class GbDetailCell {
             },
             "cellStyle": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "GeneralStyles",
                     "resolved": "\"compact\" | \"standard\"",
@@ -351,7 +364,8 @@ export class GbDetailCell {
             "showStandardCopyButton": {},
             "showTooltip": {},
             "copied": {},
-            "isDownloaded": {}
+            "isDownloaded": {},
+            "width": {}
         };
     }
     static get events() {
@@ -387,5 +401,6 @@ export class GbDetailCell {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-detail-cell.js.map

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.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,"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, Element } from '@stencil/core';\r\nimport { BadgeTypes, FileIconStyles, FileIconTypes, GeneralColors, GeneralStyles } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-detail-cell',\r\n  styleUrl: 'gb-detail-cell.css',\r\n  shadow: true,\r\n})\r\nexport class GbDetailCell {\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop({ mutable: true }) cellStyle: GeneralStyles;\r\n  @Prop() type: 'information' | 'document' | 'status';\r\n  @Prop() label: string = '';\r\n  @Prop() detail: string = '';\r\n  @Prop() badgeColor: GeneralColors;\r\n  @Prop() badgeLabel: string = '';\r\n  @Prop() badgeType: BadgeTypes;\r\n  @Prop() fileType: FileIconTypes;\r\n  @Prop() fileStyle: FileIconStyles;\r\n  @Prop() showActionButtons: boolean = false;\r\n  @Prop() showViewButton: boolean = false;\r\n  @Prop() showDownloadButton: boolean = false;\r\n  @Prop({ mutable: true }) showCopyButton: boolean = false;\r\n  @State() showStandardCopyButton: boolean = false;\r\n  @State() showTooltip: boolean = false;\r\n  @State() copied: boolean = false;\r\n  @State() isDownloaded: boolean = false;\r\n  @State() width: number = window.innerWidth;\r\n  @Event() viewButtonClicked: EventEmitter<void>;\r\n  @Event() downloadButtonClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentWillLoad() {\r\n    this.updateCellStyle(); // Set initial variant\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  private handleResize = () => {\r\n    this.width = window.innerWidth;\r\n    this.updateCellStyle();\r\n  };\r\n\r\n  private updateCellStyle() {\r\n    this.cellStyle = this.width < 768 ? 'compact' : 'standard';\r\n    console.log(this.width);\r\n  }\r\n\r\n  onViewButtonClicked() {\r\n    this.viewButtonClicked.emit();\r\n  }\r\n\r\n  onDownloadButtonClicked() {\r\n    this.isDownloaded = true;\r\n\r\n    setTimeout(() => {\r\n      this.isDownloaded = false;\r\n    }, 2000);\r\n\r\n    this.downloadButtonClicked.emit();\r\n  }\r\n\r\n  onShowCopyButton() {\r\n    if (this.cellStyle === 'standard') {\r\n      this.showStandardCopyButton = true;\r\n    }\r\n  }\r\n\r\n  onHideCopyButton() {\r\n    if (this.cellStyle === 'standard') {\r\n      this.showStandardCopyButton = false;\r\n    }\r\n  }\r\n\r\n  async copyToClipboard() {\r\n    try {\r\n      await navigator.clipboard.writeText(this.detail);\r\n      this.copied = true;\r\n\r\n      setTimeout(() => {\r\n        this.copied = false;\r\n      }, 2000); // Reset copied state after 2 seconds\r\n    } catch (error) {\r\n      console.error('Failed to copy:', error);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`detail_cell_div ${this.type} ${this.cellStyle}`} onMouseEnter={() => this.onShowCopyButton()} onMouseLeave={() => this.onHideCopyButton()}>\r\n        {this.type === 'information' && this.cellStyle === 'standard' && (\r\n          <>\r\n            <div class=\"info_text_div\">\r\n              <p class=\"label text-sm-regular\">{this.label}</p>\r\n              <p class=\"detail text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n                {this.detail}\r\n              </p>\r\n              {this.showTooltip && (\r\n                <gb-tooltip show-arrow={false} class=\"information_text_tooltip\">\r\n                  <p slot=\"label\">{this.detail}</p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n            {this.showStandardCopyButton && (\r\n              <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading=\"true\" icon-leading-swap=\"assets/copy.svg\" onClick={() => this.copyToClipboard()}></gb-button>\r\n            )}\r\n            {this.copied && (\r\n              <gb-tooltip show-arrow={false} class=\"copied_tooltip\">\r\n                <p slot=\"label\">Copied!</p>\r\n              </gb-tooltip>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'document' && this.cellStyle === 'standard' && (\r\n          <>\r\n            <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n            <div class=\"document_text_div\">\r\n              <p class=\"label text-sm-regular\">{this.label}</p>\r\n              <p class=\"detail text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n                {this.detail}\r\n              </p>\r\n              {this.showTooltip && (\r\n                <gb-tooltip show-arrow={false} class=\"document_detail_tooltip\">\r\n                  <p slot=\"label\">{this.detail}</p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n            {!this.isDownloaded ? (\r\n              <>\r\n                {this.showActionButtons && (\r\n                  <>\r\n                    {this.showViewButton && (\r\n                      <gb-button\r\n                        size=\"sm\"\r\n                        hierarchy=\"tertiary_gray\"\r\n                        icon=\"only\"\r\n                        icon-leading=\"true\"\r\n                        icon-leading-swap=\"assets/view.svg\"\r\n                        onClick={() => this.onViewButtonClicked()}\r\n                      ></gb-button>\r\n                    )}\r\n                    {this.showDownloadButton && (\r\n                      <gb-button\r\n                        size=\"sm\"\r\n                        hierarchy=\"tertiary_gray\"\r\n                        icon=\"only\"\r\n                        icon-leading=\"true\"\r\n                        icon-leading-swap=\"assets/download-03.svg\"\r\n                        onClick={() => this.onDownloadButtonClicked()}\r\n                      ></gb-button>\r\n                    )}\r\n                  </>\r\n                )}\r\n              </>\r\n            ) : (\r\n              <gb-tooltip show-arrow={false} class=\"downloaded_tooltip\">\r\n                <p slot=\"label\">Downloaded!</p>\r\n              </gb-tooltip>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'status' && this.cellStyle === 'standard' && (\r\n          <div class=\"status_text_div\">\r\n            <p class=\"label text-sm-regular\">{this.label}</p>\r\n            <gb-badge size=\"sm\" type={this.badgeType} icon=\"dot\" color={this.badgeColor}>\r\n              <p>{this.badgeLabel}</p>\r\n            </gb-badge>\r\n          </div>\r\n        )}\r\n        {this.type === 'information' && this.cellStyle === 'compact' && (\r\n          <div class=\"compact_info_div\">\r\n            <div class=\"compact_info_text_div\">\r\n              <div class=\"compact_label\">\r\n                <p class=\"label text-sm-regular\">{this.label}</p>\r\n              </div>\r\n              <div class=\"compact_detail\">\r\n                <p class=\"detail_compact_text text-md-medium\">{this.detail}</p>\r\n                {this.copied && (\r\n                  <gb-tooltip show-arrow={false} class=\"compact_copied_tooltip\">\r\n                    <p slot=\"label\">Copied!</p>\r\n                  </gb-tooltip>\r\n                )}\r\n              </div>\r\n              {this.showCopyButton && (\r\n                <gb-button\r\n                  size=\"sm\"\r\n                  hierarchy=\"tertiary_gray\"\r\n                  icon=\"only\"\r\n                  icon-leading=\"true\"\r\n                  icon-leading-swap=\"assets/copy.svg\"\r\n                  onClick={() => this.copyToClipboard()}\r\n                ></gb-button>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'document' && this.cellStyle === 'compact' && (\r\n          <div class=\"compact_doc_div\">\r\n            <gb-file-type-icon file-style={this.fileStyle} file-type={this.fileType}></gb-file-type-icon>\r\n            <div class=\"compact_doc_text_div\">\r\n              <p class=\"doc_label text-sm-regular\">{this.label}</p>\r\n              <div class=\"compact_doc_detail\">\r\n                <p class=\"detaill text-md-medium\" onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n                  {this.detail}\r\n                </p>\r\n              </div>\r\n              {this.isDownloaded && (\r\n                <gb-tooltip show-arrow={false} class=\"compact_downloaded_tooltip\">\r\n                  <p slot=\"label\">Downloaded!</p>\r\n                </gb-tooltip>\r\n              )}\r\n              {this.showActionButtons && (\r\n                <div class=\"button_container\">\r\n                  {this.showViewButton && (\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      icon-leading=\"true\"\r\n                      icon-leading-swap=\"assets/view.svg\"\r\n                      onClick={() => this.onViewButtonClicked()}\r\n                    ></gb-button>\r\n                  )}\r\n                  {this.showDownloadButton && (\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      icon-leading=\"true\"\r\n                      icon-leading-swap=\"assets/download-03.svg\"\r\n                      onClick={() => this.onDownloadButtonClicked()}\r\n                    ></gb-button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'status' && this.cellStyle === 'compact' && (\r\n          <div class=\"compact_status_div\">\r\n            <div class=\"compact_status_text_div\">\r\n              <div class=\"compact_label\">\r\n                <p class=\"label text-sm-regular\">{this.label}</p>\r\n              </div>\r\n              <gb-badge size=\"sm\" type={this.badgeType} icon=\"dot\" color={this.badgeColor}>\r\n                <p>{this.badgeLabel}</p>\r\n              </gb-badge>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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;
+}