globuswebcomponents 2.5.0 → 2.5.2

package/dist/collection/components/gb-button/gb-button.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, getAssetPath, h, Prop, State, Fragment } from '@stencil/core';
 import { GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';
 
 @Component({
@@ -23,40 +23,25 @@ export class GbButton {
   @State() internalButtonState: string = '';
   @State() internalIconLeadingState: string = '';
   @State() internalIconTrailingState: string = '';
-  @State() internalSize: string = '';
 
   componentWillLoad() {
     if (this.iconLeading && this.iconLeadingSwap) {
       this.loadIcon(this.iconLeadingSwap, 'leading');
     }
-    if (this.iconTrailing && this.iconTrailingSwap) { 
+    if (this.iconTrailing && this.iconTrailingSwap) {
       this.loadIcon(this.iconTrailingSwap, 'trailing');
     }
 
     const buttonSlot = this.el.querySelector('p');
 
+    if (this.state === 'loading') {
+      buttonSlot.style.display = 'none';
+    }
+
     if (buttonSlot) {
       buttonSlot.classList.add(this.getButtonTextClasses());
       buttonSlot.classList.add('nowrap');
     }
-
-    // if (!this.iconLeading && !this.iconTrailing) {
-    //   buttonSlot.classList.add('center');
-    // }
-  }
-
-  @Watch('state')
-  updateButtonState(newValue: string) {
-    this.internalButtonState = newValue;
-  }
-
-  @Watch('size')
-  updateSize(newValue: GeneralSizes) {
-    this.internalSize = newValue;
-  }
-
-  componentWillRender() {
-    this.internalButtonState = this.state;
   }
 
   async loadIcon(iconName: string, type: 'leading' | 'trailing') {
@@ -74,18 +59,17 @@ export class GbButton {
   getButtonClasses() {
     return {
       button: true,
-      [this.internalSize]: true,
+      [this.size]: true,
       [this.hierarchy]: true,
       destructive: this.destructive,
-      disabled: this.internalButtonState === 'disabled',
+      disabled: this.state === 'disabled',
       default: this.icon === 'default',
       only: this.icon === 'only',
-      oneicon: this.iconLeading || this.iconTrailing,
     };
   }
 
   getButtonTextClasses() {
-    switch (this.internalSize) {
+    switch (this.size) {
       case 'xl2':
         return 'text-lg-semi-bold';
       case 'xl':
@@ -100,7 +84,7 @@ export class GbButton {
   }
 
   renderLeadingIcon() {
-    return <div class={`icon left-icon ${this.internalSize}`} innerHTML={this.leadingIconSvg}></div>;
+    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;
   }
 
   renderTrailingIcon() {
@@ -110,10 +94,19 @@ export class GbButton {
   render() {
     return (
       <button disabled={this.internalButtonState === 'disabled'} class={this.getButtonClasses()}>
-        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}
-        {this.icon === 'default' && <slot></slot>}
-        {this.iconTrailing && this.renderTrailingIcon()}
-        {this.icon === 'only' && this.renderLeadingIcon()}
+        {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon}`}></div>}
+        {this.state !== 'loading' && (
+          <>
+            {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}
+            {this.icon === 'default' && (
+              <div class={`btn_text`}>
+                <slot></slot>
+              </div>
+            )}
+            {this.iconTrailing && this.renderTrailingIcon()}
+            {this.icon === 'only' && this.renderLeadingIcon()}
+          </>
+        )}
       </button>
     );
   }

package/dist/collection/components/gb-button-close/gb-button-close.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbButtonClose {
     render() {
-        return (h("div", { key: '8d2aedd27ea5bae3a4c66fc8b1494508661626d4', class: `${this.size} ${this.color}` }, h("svg", { key: '83b6c4728fd603405a917afc9760e391a6f4b76d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: '828194887980f7ea4d852c3421940ad2be2b3a86', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: 'fcc6d7f281904147734552c3fbda666db3ba5843', class: `${this.size} ${this.color}` }, h("svg", { key: '8c8ff25c541045f283ad62e755b0bcf923bfe34a', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: 'c546771c6a7c0c38942407f9c4971e9f118094b9', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-button-close"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-button-group/gb-button-group.js

@@ -29,7 +29,7 @@ export class GbButtonGroup {
         // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });
     }
     render() {
-        return (h("div", { key: 'f015f3f0f93ded18cc349d44892a03aefa2705ed', class: "button_group_container" }, this.showLabel && h("p", { key: '7f1eadd42a4b4adf8ee28a1bab0c22ad7308cfbe', class: "dropdown_label text-sm-regular" }, this.label), h("div", { key: '16404891f793f2288feb69f5665a762c7a3f0271', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon }))))));
+        return (h("div", { key: 'deee2d888e363af6013de1cbdc73f74430bf4080', class: "button_group_container" }, this.showLabel && h("p", { key: '013af862d6e27f4d068abdd258959c5ce014c791', class: "dropdown_label text-sm-regular" }, this.label), h("div", { key: '91970ada826620710da0ceca6b1de8c2469a33e5', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon }))))));
     }
     static get is() { return "gb-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-button-group-base/gb-button-group-base.js

@@ -16,7 +16,7 @@ export class GbButtonGroupBase {
         this.loadIcon(this.iconSrc);
     }
     render() {
-        return (h("div", { key: '3575f244fa7104101b43c28db664f38f03ff21ce', class: `button_group_base_div ${this.current ? 'current' : ''} ${this.icon} ${this.state}` }, this.icon === 'leading' && h("div", { key: '6e08ceb1665f3e98c0a325e47160a1793039e55b', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'only' && h("div", { key: '79fe8c4a9c91fc7246be5eba38e00b574c770bee', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'checkbox' && (h("gb-checkbox", { key: 'da0e67631aaf19899836d20aa9609675553cda4a', checked: this.current, indeterminate: false, size: "sm", type: "radio", state: this.state, text: true, "supporting-text": false }, h("p", { key: '7d2620b7960d4374b80aa50b0abb9d90efcc552a', slot: "label" }, this.label))), this.icon === 'dot' && (h("div", { key: 'c675c72df44dfb4ef9a83606bed911e1bf7e324e', class: "dot_div" }, h("div", { key: '6d23e7510ed7ae3a2528d135aa5c2d5dc053b934', class: `dott ${this.state}` }))), this.icon !== 'only' && this.icon !== 'checkbox' && h("p", { key: '288f632a6aff5835f86769490e2fb4f04e4c965d', class: "text-sm-semi-bold" }, this.label)));
+        return (h("div", { key: '76b11845160f33dd61adcc09c488b467287fb7d0', class: `button_group_base_div ${this.current ? 'current' : ''} ${this.icon} ${this.state}` }, this.icon === 'leading' && h("div", { key: '36942c914fd1e2a72d2597bcbe6c670b1dda05c4', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'only' && h("div", { key: 'ceba870c62ddf022075ae1ce775c90bbc93fb3e0', class: `icon ${this.current ? 'current' : ''} ${this.state}`, innerHTML: this.leadingIconSvg }), this.icon === 'checkbox' && (h("gb-checkbox", { key: 'ee67d673fca5cfa087bdeef987810072de6a7272', checked: this.current, indeterminate: false, size: "sm", type: "radio", state: this.state, text: true, "supporting-text": false }, h("p", { key: 'b878de44aed7fba4328e5adffa67869cc807939c', slot: "label" }, this.label))), this.icon === 'dot' && (h("div", { key: 'ff502337e2f96dcf2bb44db3d32bb8dfef2a194e', class: "dot_div" }, h("div", { key: 'fc4d6d07f7d3c70069623641b24222e71fda9f32', class: `dott ${this.state}` }))), this.icon !== 'only' && this.icon !== 'checkbox' && h("p", { key: '048047275c6917f693005b9963921e05d26386cf', class: "text-sm-semi-bold" }, this.label)));
     }
     static get is() { return "gb-button-group-base"; }
     static get encapsulation() { return "shadow"; }
@@ -82,7 +82,7 @@ export class GbButtonGroupBase {
                 "mutable": false,
                 "complexType": {
                     "original": "StateType",
-                    "resolved": "\"applied\" | \"default\" | \"disabled\"",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
                     "references": {
                         "StateType": {
                             "location": "import",

package/dist/collection/components/gb-card-icon/gb-card-icon.js

@@ -14,7 +14,7 @@ export class GbCardIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '15c4541f3fc7f05390e2d0dc3e64aaf2d4917405', class: `card_icon_div ${this.color} ${this.size}` }, h("div", { key: 'a24074612636653a4ecead0ba5f6825188637328', class: `icon_svg ${this.size}`, innerHTML: this.leadingIconSvg })));
+        return (h("div", { key: '1cceeff0f5258560e2bad06221dff0aadb38093d', class: `card_icon_div ${this.color} ${this.size}` }, h("div", { key: '55ee7424911c44a29177c2248f4ebaa05d323203', class: `icon_svg ${this.size}`, innerHTML: this.leadingIconSvg })));
     }
     static get is() { return "gb-card-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-carousel-arrow/gb-carousel-arrow.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbCarouselArrow {
     render() {
-        return (h("div", { key: 'a51ed238e81a804b8fb1227385001960228ef8ef', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '733873e84ff41d864053a3d306f7a587e77c5979', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '50dbfc2dc01552faebe9ecedd9c89e6e4b337ebf', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (h("svg", { key: 'f5b569a025cd44e71c833664e2a40cbfcc88919c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '9430e558406e856c2a6012f2b810917d6e968763', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("div", { key: 'c7760f53af94d1e71fb624227ee1c44914fc52ff', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '8ed59944f037c319eb544f2e7f0fda634ee80226', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd59e77a0a4a4fd06e162aeb9eb088bc61c531f44', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (h("svg", { key: '60f760f594cac54bf5ac67664224dc2b187ca33c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'f2e66a56e0aa46f49dcd388dfb8927313e96c34e', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-carousel-arrow"; }
     static get originalStyleUrls() {

package/dist/collection/components/gb-checkbox/gb-checkbox.js

@@ -36,7 +36,7 @@ export class GbCheckbox {
         this.checkboxClicked.emit(event.detail);
     }
     render() {
-        return (h("div", { key: '14a14363c505d3e4af59890f1fbb06df8694f2da', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: 'b4b569cb30305a53e57bb89030f56445e880c8e0', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: '6de3c7e7f2144ac59d2e4f5b582798bb23bd99fb', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this), checked: this.checked })), this.text && (h("div", { key: '43fea06494e23f1df72376cd29d5229d32f98b61', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: 'e0ba601b583562536ef22426dbf6ab86d99a6d65', name: "label" }), this.supportingText && h("slot", { key: '4906088f62cb4232a5c849f448e8d37168c5ec40', name: "supporting_text" })))));
+        return (h("div", { key: 'b33c4e5d27d93b06dad019dba4e31c456bd9ecb8', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: '5b0ab89fab8c4c4f11bfc2784aee8f54764256e2', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: '2536f13968c33e7c63c9e121dbb63947765ecb63', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this), checked: this.checked })), this.text && (h("div", { key: 'cfec632ee0b87b83e47f81fb5d56432847a509ff', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: '98811182dddc5f0b69ac70568848d656ec73c4df', name: "label" }), this.supportingText && h("slot", { key: '4dbc45f944a6e1f0306f492fd1d45e96faff71d2', name: "supporting_text" })))));
     }
     static get is() { return "gb-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -147,7 +147,7 @@ export class GbCheckbox {
                 "mutable": false,
                 "complexType": {
                     "original": "StateType",
-                    "resolved": "\"applied\" | \"default\" | \"disabled\"",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
                     "references": {
                         "StateType": {
                             "location": "import",

package/dist/collection/components/gb-checkbox-base/gb-checkbox-base.js

@@ -99,7 +99,7 @@ export class GbCheckboxBase {
         }
     }
     render() {
-        return (h("div", { key: '3753fe6e67d38310f9032cda0308b31c680c893e', class: `checkbox_container ${this.size}`, onClick: () => {
+        return (h("div", { key: 'ac63c6c0b6e569cf571ab2cc962e208c3bb83977', class: `checkbox_container ${this.size}`, onClick: () => {
                 if (this.type === 'checkbox') {
                     return this.toggleCheckboxState();
                 }
@@ -130,7 +130,7 @@ export class GbCheckboxBase {
                 "mutable": true,
                 "complexType": {
                     "original": "StateType",
-                    "resolved": "\"applied\" | \"default\" | \"disabled\"",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
                     "references": {
                         "StateType": {
                             "location": "import",

package/dist/collection/components/gb-checkbox-group/gb-checkbox-group.js

@@ -5,7 +5,7 @@ export class GbCheckboxGroup {
         this.selected = false;
     }
     render() {
-        return (h("div", { key: 'd1d67896263c88ed398324f7107d3a273ed4d548', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: '684aeeb99d0506d7066b224a91a784ee04d813e3', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'a7d239ec0d4b41d16e48fe7b98b0900e34c817e2', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'e7054a8c77679b8628a0de8eba4f0755e57e3db8', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '11ea3d879d9c9c91e935fc77c3176fc3adf18f9b', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'b82e4b4b5bdde2f56ef7799826d52add12628b58', size: this.size, type: this.type, breakpoint: this.breakpoint })));
+        return (h("div", { key: 'a366b70afdb0aa92b0cf2a41a3e888d33a08b9c5', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: '39c971ced416bffbcffb6de211dececd6218d854', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '0e252e92577af53936065a29588a5d157df3de23', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '737a3c335a08a328c55470327a0fb2af74cb0f7a', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'c416562c359c29406e5ab6d1a48a5b67167253bc', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '5c3b967ec184a18275052dbf54dfc0fd3e2e589a', size: this.size, type: this.type, breakpoint: this.breakpoint })));
     }
     static get is() { return "gb-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-checkbox-group-item/gb-checkbox-group-item.js

@@ -124,10 +124,10 @@ export class GbCheckboxGroupItem {
     }
     render() {
         return [
-            h("div", { key: '458e216a4ef457a11d051cc7159439ebc11ed995', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: 'f06568f303541b8f3ebb4a25238513582cfecd37', class: "item-content" }, this.renderIcon(), h("div", { key: 'c4ff9e46c81138fa2d2b8d40e7556cd954a3c2e1', class: "text-container" }, h("div", { key: '7cb75bfef3115dcf78ac5b64e0202e7a2ae524cd', class: `label-cost ${this.type}` }, h("slot", { key: '3919caf1d5c28b4b31b07adf085f3b1a34d9add6', name: "label" }), this.showCost && h("slot", { key: '5e51a9b3ee93abff5f0b3c9a4a3033be177b2648', name: "cost" })), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })), h("gb-button", { key: '1a46de6f677b9f0e5783ab6517866240a85d9904', class: "button", size: "lg", state: this.state, hierarchy: this.selected ? 'link_color' : 'link_gray', icon: "default", onClick: e => {
+            h("div", { key: 'cc0c2a5ae1a54e62656e3661c1a43fcbff8bef11', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: 'cef275d837921c15260d78b82cd48e018ff82517', class: "item-content" }, this.renderIcon(), h("div", { key: '56e655c3abc8979a577b971d382bd2b97f1ce020', class: "text-container" }, h("div", { key: 'f8a00c07383d232338206b10fd50a9ec1a8b1a31', class: `label-cost ${this.type}` }, h("slot", { key: '4c4aa20e58b5bee38ac5f27464783b3bf75e5c2c', name: "label" }), this.showCost && h("slot", { key: 'e035872c103a69936f853420b025f9f2bb9122bb', name: "cost" })), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })), h("gb-button", { key: 'ea2e590b99fae9fbc2a6284b4e6f1215f7b1cf07', class: "button", size: "lg", state: this.state, hierarchy: this.selected ? 'link_color' : 'link_gray', icon: "default", onClick: e => {
                     this.onButtonClicked();
                     e.stopPropagation();
-                } }, h("p", { key: '43e174a071f21fd554474a4ab81b189cb08a1dbf' }, this.buttonText)))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: this.checkboxType, size: this.size, state: this.state, checked: this.selected }))) : null),
+                } }, h("p", { key: '3d8b6d3ab4ff3e545755046413c3fe84991eba9d' }, this.buttonText)))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: this.checkboxType, size: this.size, state: this.state, checked: this.selected }))) : null),
         ];
     }
     static get is() { return "gb-checkbox-group-item"; }

package/dist/collection/components/gb-collapse-button/gb-collapse-button.js

@@ -23,9 +23,9 @@ export class GbCollapseButton {
     }
     render() {
         return [
-            h("div", { key: '0bcc73c74dde8f3cfa2fb6baa8e25fa477e4f333' }, h("div", { key: '41e55cb856b01cb5410c2bc8521a5428840fe41a', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, this.action === 'collapse' && [
-                h("svg", { key: '89c824bbd06d7bc6b1be63226a5b2421676ad8a2', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'c3f42826b71746958b63fc2c545c0601f863bc21', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
-            ], this.action === 'expand' && (h("svg", { key: '546bc203390cea748af9fdc8e72b1f4b8c7f949a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'eb2926363f7391aa191b76b400fd84e632e7d6b1', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: "tooltip", "show-arrow": true, arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: "tooltip", "show-arrow": true, arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
+            h("div", { key: 'a5ad7e83156ad524024d6e26aa645081157f3434' }, h("div", { key: 'ab497d9f11c34f471a926f6695bb0a83f9254981', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, this.action === 'collapse' && [
+                h("svg", { key: '0348fe1fae5e0ee37b44f3e04b53695614b1cac8', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: '287eac53f2fa203dca181adaa46f6bcbe3c4dbd9', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+            ], this.action === 'expand' && (h("svg", { key: '6b8f018b3c445df90c93f1204d95113696ebdf0d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: '2d8c2b73978cd42dbd119c8c8ddc729514465964', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: "tooltip", "show-arrow": true, arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: "tooltip", "show-arrow": true, arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
         ];
     }
     static get is() { return "gb-collapse-button"; }

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

@@ -2751,7 +2751,7 @@
   border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);
   background: var(--color-background-information-subtlest, #E4F0FC);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  /* transition: 1s ease-in-out; */
+  /* transition: height 0.4s; */
 }
 
 .header {

package/dist/collection/components/gb-comment/gb-comment.js

@@ -30,6 +30,8 @@ export class GbComment {
         //   timestamp: '07-Nov-2024 6:00PM',
         // },
         ];
+        this.theme = 'system';
+        this.isDarkTheme = false;
     }
     toggleComments() {
         if (this.state === 'expanded') {
@@ -39,12 +41,33 @@ export class GbComment {
             this.state = 'expanded';
         }
     }
+    changeTheme() {
+        if (this.theme === 'system') {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                this.isDarkTheme = true;
+            }
+            else {
+                this.isDarkTheme = false;
+            }
+        }
+        else if (this.theme === 'light') {
+            this.isDarkTheme = false;
+        }
+        else if (this.theme === 'dark') {
+            this.isDarkTheme = true;
+        }
+    }
+    componentWillLoad() {
+        this.changeTheme();
+    }
     render() {
         const hasComments = this.comments && this.comments.length > 0;
-        const patternSrc = getAssetPath(`assets/background_pattern.svg`);
-        const illustrationSrc = getAssetPath(`assets/illustration.svg`);
-        return (h("div", { key: '2e0af45c242ac9111264ef209646f2f4c989ad6d', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: '3ac636fe08d436340d8daf3a0338ab02b85162f8', class: `header ${this.state}` }, h("div", { key: 'c4811dd608401795d6cb2970f52e3d44de43eebd', class: "title-section" }, h("svg", { key: '5ff92b47607ae3de6707af1076dd2ec6a1ac19a2', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: 'd8089ef03439ed08b81de6c3c0b8a11c40466bf0', opacity: "0.4", d: "M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z", fill: "#064E94" }), h("path", { key: 'c14812a10d3dddcbe09dc925483b96960fe1ffc9', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z", fill: "#064E94" }), h("path", { key: 'd04bb23754ebe000db83f691b73b4c2b3c2536d2', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z", fill: "#064E94" })), h("h2", { key: 'b45ec33a484c648e476694bfabcc58ae9ea13472', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: 'a668561f021eb9df29262c523e3ecedb8d1ca627', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.toggleComments() }, this.state === 'expanded' ? h("p", null, "Hide Comments") : h("p", null, "Show Comments"))), this.state === 'expanded' &&
-            (hasComments ? (h("div", { class: "comments-wrapper" }, this.comments.map((comment, index) => (h("gb-comment-item", { key: index, name: comment.name, duty: comment.role, comment: comment.comment, "time-stamp": comment.timeStamp, connector: this.comments.length > 1 && index < this.comments.length - 1 ? true : false }))))) : (h("div", { class: "container" }, h("div", { class: "frame" }, h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { class: "text" }, h("p", { class: "main-text text-lg-semi-bold" }, this.noCommentText), h("p", { class: "sub-text text-sm-regular" }, this.noCommentTextSub))))))))));
+        const patternSrcLightMode = getAssetPath(`assets/background_pattern.svg`);
+        const patternSrcDarkMode = getAssetPath(`assets/background_pattern_dark_mode.svg`);
+        const illustrationSrcLightMode = getAssetPath(`assets/illustration.svg`);
+        const illustrationSrcDarkMode = getAssetPath(`assets/illustration_dark_mode.svg`);
+        return (h("div", { key: 'b74af102c0eb2d74f7db4aad30ba05486e948be4', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: '173400abd9f65f85d2a504d41a2513ec9ec9e6f9', class: `header ${this.state}` }, h("div", { key: 'c941f8fb353bea6c9ec47f0dbc9e5e4aff1b3b8f', class: "title-section" }, h("svg", { key: '0dc315c8a8aec664b4935a6cc4e686f8188b93cf', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: 'c05aa9c215ff1fc1d8378fd139ad2a7bad6bb2b5', opacity: "0.4", d: "M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: '64cae3bde46b8ebe554e7caa5978612a31aa30b1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: '40a55ab297a8742a0c2dd7f80de63ef1f1a7c068', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z", fill: "var(--color-icon-information, #064E94)" })), h("h2", { key: '9b2b1969d3bfe54e963f2100645d42daead0d915', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: 'cc13ca4b98727a9aa16853d5d73d2765506321f3', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.toggleComments() }, this.state === 'expanded' ? h("p", null, "Hide Comments") : h("p", null, "Show Comments"))), this.state === 'expanded' &&
+            (hasComments ? (h("div", { class: "comments-wrapper" }, this.comments.map((comment, index) => (h("gb-comment-item", { key: index, name: comment.name, duty: comment.role, comment: comment.comment, "time-stamp": comment.timeStamp, connector: this.comments.length > 1 && index < this.comments.length - 1 ? true : false }))))) : (h("div", { class: "container" }, h("div", { class: "frame" }, this.isDarkTheme ? h("img", { src: patternSrcDarkMode, alt: "", class: "empty_state_pattern" }) : h("img", { src: patternSrcLightMode, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, this.isDarkTheme ? (h("img", { src: illustrationSrcDarkMode, alt: "bell-icon", class: "bell_icon" })) : (h("img", { src: illustrationSrcLightMode, alt: "bell-icon", class: "bell_icon" })), h("div", { class: "text" }, h("p", { class: "main-text text-lg-semi-bold" }, this.noCommentText), h("p", { class: "sub-text text-sm-regular" }, this.noCommentTextSub))))))))));
     }
     static get is() { return "gb-comment"; }
     static get encapsulation() { return "shadow"; }
@@ -156,8 +179,39 @@ export class GbComment {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM' ,\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Gideon',\r\n    //   role: 'Designer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Nov-2024 6:00PM',\r\n    // },\r\n  ]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeTypes",
+                    "resolved": "\"dark\" | \"light\" | \"system\"",
+                    "references": {
+                        "ThemeTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ThemeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'system'"
             }
         };
     }
+    static get states() {
+        return {
+            "isDarkTheme": {}
+        };
+    }
 }
 //# sourceMappingURL=gb-comment.js.map

package/dist/collection/components/gb-comment/gb-comment.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-comment.js","sourceRoot":"","sources":["../../../src/components/gb-comment/gb-comment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-comment',\r\n  styleUrl: 'gb-comment.css',\r\n  shadow: true,\r\n})\r\nexport class GbComment {\r\n  @Prop() heading: string = '';\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed';\r\n  @Prop() noCommentText: string = 'No comment yet';\r\n  @Prop() noCommentTextSub: string = 'No reviewer has left a comment yet, you will be notified when a comment drops';\r\n  @Prop() comments: any[] = [\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM' ,\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Gideon',\r\n    //   role: 'Designer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Nov-2024 6:00PM',\r\n    // },\r\n  ];\r\n\r\n  toggleComments() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    } else if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const hasComments = this.comments && this.comments.length > 0;\r\n    const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n    const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n    return (\r\n      <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n        <div class={`header ${this.state}`}>\r\n          <div class=\"title-section\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"info-icon\">\r\n              <path\r\n                opacity=\"0.4\"\r\n                d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\"\r\n                fill=\"#064E94\"\r\n              />\r\n              <path\r\n                fill-rule=\"evenodd\"\r\n                clip-rule=\"evenodd\"\r\n                d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\"\r\n                fill=\"#064E94\"\r\n              />\r\n              <path\r\n                fill-rule=\"evenodd\"\r\n                clip-rule=\"evenodd\"\r\n                d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\"\r\n                fill=\"#064E94\"\r\n              />\r\n            </svg>\r\n            <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n          </div>\r\n\r\n          <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.toggleComments()}>\r\n            {this.state === 'expanded' ? <p>Hide Comments</p> : <p>Show Comments</p>}\r\n          </gb-button>\r\n        </div>\r\n\r\n        {this.state === 'expanded' &&\r\n          (hasComments ? (\r\n            <div class=\"comments-wrapper\">\r\n              {this.comments.map((comment, index) => (\r\n                <gb-comment-item\r\n                  key={index}\r\n                  name={comment.name}\r\n                  duty={comment.role}\r\n                  comment={comment.comment}\r\n                  time-stamp={comment.timeStamp}\r\n                  connector={this.comments.length > 1 && index < this.comments.length - 1 ? true : false}\r\n                />\r\n              ))}\r\n            </div>\r\n          ) : (\r\n            <div class=\"container\">\r\n              <div class=\"frame\">\r\n                <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n                <div class=\"empty_state\">\r\n                  <div class=\"content\">\r\n                    <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                    <div class=\"text\">\r\n                      <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n                      <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          ))}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-comment.js","sourceRoot":"","sources":["../../../src/components/gb-comment/gb-comment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath, State } from '@stencil/core';\r\nimport { ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-comment',\r\n  styleUrl: 'gb-comment.css',\r\n  shadow: true,\r\n})\r\nexport class GbComment {\r\n  @Prop() heading: string = '';\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed';\r\n  @Prop() noCommentText: string = 'No comment yet';\r\n  @Prop() noCommentTextSub: string = 'No reviewer has left a comment yet, you will be notified when a comment drops';\r\n  @Prop() comments: any[] = [\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM' ,\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'This is error and fraud free. I concur',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Oct-2024 6:00PM',\r\n    // },\r\n    // {\r\n    //   name: 'Gideon',\r\n    //   role: 'Designer',\r\n    //   comment: 'I concur to the transactions in this call-over',\r\n    //   timestamp: '07-Nov-2024 6:00PM',\r\n    // },\r\n  ];\r\n  @Prop() theme: ThemeTypes = 'system';\r\n  @State() isDarkTheme: boolean = false;\r\n\r\n  toggleComments() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    } else if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n  }\r\n\r\n  changeTheme() {\r\n    if (this.theme === 'system') {\r\n      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n        this.isDarkTheme = true;\r\n      } else {\r\n        this.isDarkTheme = false;\r\n      }\r\n    } else if (this.theme === 'light') {\r\n      this.isDarkTheme = false;\r\n    } else if (this.theme === 'dark') {\r\n      this.isDarkTheme = true;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.changeTheme();\r\n  }\r\n\r\n  render() {\r\n    const hasComments = this.comments && this.comments.length > 0;\r\n    const patternSrcLightMode = getAssetPath(`assets/background_pattern.svg`);\r\n    const patternSrcDarkMode = getAssetPath(`assets/background_pattern_dark_mode.svg`);\r\n    const illustrationSrcLightMode = getAssetPath(`assets/illustration.svg`);\r\n    const illustrationSrcDarkMode = getAssetPath(`assets/illustration_dark_mode.svg`);\r\n\r\n    return (\r\n      <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n        <div class={`header ${this.state}`}>\r\n          <div class=\"title-section\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"info-icon\">\r\n              <path\r\n                opacity=\"0.4\"\r\n                d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\"\r\n                fill=\"var(--color-icon-information, #064E94)\"\r\n              />\r\n              <path\r\n                fill-rule=\"evenodd\"\r\n                clip-rule=\"evenodd\"\r\n                d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\"\r\n                fill=\"var(--color-icon-information, #064E94)\"\r\n              />\r\n              <path\r\n                fill-rule=\"evenodd\"\r\n                clip-rule=\"evenodd\"\r\n                d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\"\r\n                fill=\"var(--color-icon-information, #064E94)\"\r\n              />\r\n            </svg>\r\n            <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n          </div>\r\n\r\n          <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.toggleComments()}>\r\n            {this.state === 'expanded' ? <p>Hide Comments</p> : <p>Show Comments</p>}\r\n          </gb-button>\r\n        </div>\r\n\r\n        {this.state === 'expanded' &&\r\n          (hasComments ? (\r\n            <div class=\"comments-wrapper\">\r\n              {this.comments.map((comment, index) => (\r\n                <gb-comment-item\r\n                  key={index}\r\n                  name={comment.name}\r\n                  duty={comment.role}\r\n                  comment={comment.comment}\r\n                  time-stamp={comment.timeStamp}\r\n                  connector={this.comments.length > 1 && index < this.comments.length - 1 ? true : false}\r\n                />\r\n              ))}\r\n            </div>\r\n          ) : (\r\n            <div class=\"container\">\r\n              <div class=\"frame\">\r\n                {this.isDarkTheme ? <img src={patternSrcDarkMode} alt=\"\" class=\"empty_state_pattern\" /> : <img src={patternSrcLightMode} alt=\"\" class=\"empty_state_pattern\" />}\r\n                <div class=\"empty_state\">\r\n                  <div class=\"content\">\r\n                    {this.isDarkTheme ? (\r\n                      <img src={illustrationSrcDarkMode} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                    ) : (\r\n                      <img src={illustrationSrcLightMode} alt=\"bell-icon\" class=\"bell_icon\" />\r\n                    )}\r\n                    <div class=\"text\">\r\n                      <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n                      <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-comment-item/gb-comment-item.js

@@ -12,7 +12,7 @@ export class GbCommentItem {
         return nameAndRole;
     }
     render() {
-        return (h("div", { key: 'e0a0427f6e6e7694be700bb74afbc00b23087570', class: "comment-item" }, h("div", { key: '37d43b666a96ca31e8d808eb849adae04d053f81', class: "left" }, h("div", { key: '990d911dc4dc1b79ce9cf266204bf5e226125bac', class: "comment-bullet" }), this.connector && h("hr", { key: '50f6366e45d085d41cb9fc73a4ff00529f555978', class: "line" })), h("div", { key: 'cbee19732694f15c0287f7763ae3f9064b365077', class: "comment-content" }, h("div", { key: 'ca146b8698374cf74e6a8cc18d56e6f920650258', class: "reviewer-info" }, h("p", { key: '5cc5a999f39684cc35e60df061472271c96d4c17', class: "text-sm-semi-bold" }, this.displayNameAndRole())), h("div", { key: '5211c8247449fbdd998f7e3057de97e0b3308bda', class: "comment-text" }, h("p", { key: 'f9e51ef6c4f363593217a5a7cc17d67695d5a76a', class: "text-sm-regular" }, this.comment)), h("div", { key: 'f60a44072ca5c592f816f8b6d4718bad14e20e07', class: "timestamp" }, h("p", { key: '03af6d217ae2f9c0ef050f9552163c6ab9b45d4f', class: "text-xs-regular" }, this.timeStamp)))));
+        return (h("div", { key: '9154236a4e0fcc2b4d009591a9c2a007b9bf7ca1', class: "comment-item" }, h("div", { key: '49f5caa589a17c29dada791b201e5585fdb33ed9', class: "left" }, h("div", { key: '1ad30034cc8e59ebca19471592bab7875d047fdc', class: "comment-bullet" }), this.connector && h("hr", { key: '08386c258ef3bf8daa2a8294971f9c30bde6d9f2', class: "line" })), h("div", { key: '32694fc9d3bcf588ecc66cfcd673b48e0195aafe', class: "comment-content" }, h("div", { key: 'c34e6d257549551b555d9b506de5a4f241da7a8f', class: "reviewer-info" }, h("p", { key: 'ee1f567e7dd9d181278685788c1a106b72a41eca', class: "text-sm-semi-bold" }, this.displayNameAndRole())), h("div", { key: '41ab75b27efb110a9d3cd32862ca6ab06bd5a151', class: "comment-text" }, h("p", { key: 'b91ad398f9c99b9c47cba219b4dff0bef083d641', class: "text-sm-regular" }, this.comment)), h("div", { key: '0a9b78b8a69dc8c589f2ed8d8e5988dfba72a6b5', class: "timestamp" }, h("p", { key: 'aa96ea796051a4eda3f44ccc344c4ea0cfef8a87', class: "text-xs-regular" }, this.timeStamp)))));
     }
     static get is() { return "gb-comment-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-complex-primary-side-bar-item/gb-complex-primary-side-bar-item.js

@@ -22,7 +22,7 @@ export class GbComplexPrimarySideBarItem {
         const whiteBarSrc = getAssetPath(`assets/complex_bar_white.svg`);
         const redCompactBarSrc = getAssetPath(`assets/compact_bar_red.svg`);
         const whiteCompactBarSrc = getAssetPath(`assets/compact_bar_white.svg`);
-        return (h(Fragment, null, this.itemStyle === 'standard' && (h("div", { key: '42dcd1e58780a54bcd9faf011e388523b9e453b2', class: `container ${this.state} ${this.category}` }, h("div", { key: 'fa2ba48b09f4949816515ff175c2fd48720076d5', class: `wrapper ${this.state} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'ce1f83bcb01223db5033f217bf2f96e48d29e4ed', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '014279bc98f2384bb9031c3362d04af61598003d', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '0d2bdc17857fc3a1caec6af69f0c8f52f8e7f27f', class: "icon_container" }, h("div", { key: '2b2ec86ec7be55ed3ff5d623af07e21f17d90926', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), h("p", { key: '38ea4209321afe5f197610834b079a2741c2f647', class: `label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}` }, this.label)))), this.itemStyle === 'compact' && (h("div", { key: '672cd67130a7d3b095e154e340497f6949d399ed', class: "compact_container" }, h("div", { key: '507b7cc7eb9c894a1f7eb4cfa70bf484e488f139', class: `compact_wrapper ${this.state} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'c55464bd2581556ece862aac649862b5618b9507', src: redCompactBarSrc, alt: "", class: "compact_bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '9d9d2afecad36cdaa89e360e907c619dbdb3fe63', src: whiteCompactBarSrc, alt: "", class: "compact_bar" }), h("div", { key: '49d2b07b84bdec45e954997fae1fe92cad94985a', class: "compact_icon_container" }, h("div", { key: '1cd3f0d7274b81271e816bda041f9cdfbd5df1c8', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), this.itemStyle === 'compact' && this.showTooltip && (h("gb-tooltip", { key: '31edc6efd8371914cf23de872e9ebec0c753fdff', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: 'f8ad094ff69f73a228261be4a32df366fc189ff7', slot: "label" }, this.label))))))));
+        return (h(Fragment, null, this.itemStyle === 'standard' && (h("div", { key: 'c0e307129545e1bc528a857edc52d343848cf593', class: `container ${this.state} ${this.category}` }, h("div", { key: 'a7f74b11a7313be4261af4e8546d66e56a635252', class: `wrapper ${this.state} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '3ce40f685004196bb708a66fd970407a6fe0d1be', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '73172015b7b5b340480ea1e530502f0ac866489e', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '6d070c2274dcfb713bb2b31e7a3667d947d78c47', class: "icon_container" }, h("div", { key: '3cbcb27d11300b3a6339d57b37ca195a2cdff685', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), h("p", { key: '00fb9747f6e0f5aece1f9e1002f5631b43324568', class: `label_text ${this.state} ${this.category} ${this.state === 'active' ? 'text-xs-semi-bold' : 'text-xs-regular'}` }, this.label)))), this.itemStyle === 'compact' && (h("div", { key: '371847f3d74b0edefcd6985a206b26a126a2c10a', class: "compact_container" }, h("div", { key: '82976868c06db672e9bd71bc4aa53112d8ba39d5', class: `compact_wrapper ${this.state} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '9c4efb7f0c75a845e9ba2bafd9ecf3c8e2335fb4', src: redCompactBarSrc, alt: "", class: "compact_bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '84b2ab3a3ff6b728e1a87ecd80ee4750b3fc947e', src: whiteCompactBarSrc, alt: "", class: "compact_bar" }), h("div", { key: 'df914503e5e8a733b60efb828f1bcdaa53ee5246', class: "compact_icon_container" }, h("div", { key: '7cd9501d38d611f16a50b0a299ef0513f5c9505b', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg })), this.itemStyle === 'compact' && this.showTooltip && (h("gb-tooltip", { key: '20b289915079a8a0f5a630dc79a6b3651543332a', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '739f2d33400514d0380b7890c75f98c27b004a7e', slot: "label" }, this.label))))))));
     }
     static get is() { return "gb-complex-primary-side-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js

@@ -16,7 +16,7 @@ export class GbComplexSecondarySideBarItem {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '4d576554f1724cbf4d5e7eb29969964253bcc486', class: `container ${this.type}` }, h("div", { key: 'c9e53d0b7957f84c685bd955b31b85f2df0233dd', class: `secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'b826ead4b952526dca017ea783d887340897b14b', class: "icon" }, h("div", { key: '36d37476fb57125cd81bc87c914d2aea6ebf2696', class: "icon_container" }, h("div", { key: 'be441fa7bc8e6f4e5d5500b02f053878023db228', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }))), this.type === 'full_with_label' && (h("div", { key: '1a9bca957645dec6e651d6163191fd352f16ba43', class: "text" }, h("p", { key: 'cf1ea2483bf21caaa4671c8051a54813888c842f', class: `label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}` }, this.label))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '575c21075a0c313c263116aabd15c94ef53ec95a', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: 'c205b16be0d3064ddce63b4b11a9ebf630a9b9b7', slot: "label" }, this.label))))));
+        return (h("div", { key: '8d17f006b9a9786c3077ccc2a5cf572d12d7982a', class: `container ${this.type}` }, h("div", { key: '722ade506a11cfb03e6a7f566b65b3243fede588', class: `secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '6881aeed084afebd5f464ae64cb77bbcc9a8986d', class: "icon" }, h("div", { key: '56626d32f07e864b85c306d14431586b10b80f9f', class: "icon_container" }, h("div", { key: '775277409945a431dee00c5502c8292d6be07791', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }))), this.type === 'full_with_label' && (h("div", { key: '195eca14cd1253f4e36f184071c74d1fa40e8022', class: "text" }, h("p", { key: '45c7a057148bf993f744320e8634f0caf25b1722', class: `label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}` }, this.label))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '42e3602fcfec0f21599ca030b917c769b637d893', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: 'da78d025e87260bb044dfbce8bec22363054c2fb', slot: "label" }, this.label))))));
     }
     static get is() { return "gb-complex-secondary-side-bar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class GbDetailCell {
         this.showActionButtons = false;
     }
     render() {
-        return (h("div", { key: 'b1bda9e56e67ff07d4ae840b381908e79fdaf875', 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: '4107d497f93a5725543ff6fea72a580afc2e3261', class: "info_text_div" }, h("p", { key: 'c4c14e82a7b00198c974de480e5205e815af53b5', class: "label text-sm-regular" }, this.label), h("div", { key: '59e0a60a8b6c61f2b23ff37a218cbff2d6e45311', class: "detail_div" }, h("p", { key: '399f4a288a68469038ad1459da60ae9121417715', class: `detail ${this.supportingText ? '' : 'no_supporting_text'} text-md-medium`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showSupportingText && h("p", { key: '4195239d05afbe03eb7e61a19bdc24b3f5fc0f89', class: "supporting_text text-md-medium" }, this.supportingText)), this.showTooltip && (h("gb-tooltip", { key: 'cee9f629d38f5d4e26d80a1904000da8c816ffca', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: 'c62ccdbb8331a98dfe3b6bbf22349d8895069a70', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: 'a84c317f996251379578f5f114b5e44aab6dc57a', 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: '40abea60b1356fa00cbe7da51cdf0a69c2f53d56', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: '62b11e2a21e6a14c9a5112b9683b2c8e3062b952', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: 'b87ada05152ad993020ef227a9dc2c6a878f2f16', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: 'ef0cb6dc7c828eabdc6f2d80156849084099f258', class: "document_text_div" }, h("p", { key: '341a5b89058b4b52d7fb2e919ab6be07353f4411', class: "label text-sm-regular" }, this.label), h("p", { key: '5f0413c6e9c702cfd96d428fe38c8751de3ea258', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: 'de061ad93a75f224bd9b496bf5b0b6fd6b09c5f9', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: 'e0c2ae346996abf78e12ca8ea3cc354bc047dd91', 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: '8341a9ccdab80f1e43ba19e28101e98c97d62e6c', class: "status_text_div" }, h("p", { key: '2c829d40a408e411b146a002239a3ad8638495d0', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: 'd154d5687f626f45d29cf7d0549fbdb25cd5fa21', size: "sm", type: this.badgeType, icon: this.badgeIcon, color: this.badgeColor, "icon-leading-swap": this.badgeIconLeading, "icon-trailing-swap": this.badgeIconTrailing }, h("p", { key: '94f575adc0f97919d5884e01ad40294ac4ab64fc' }, this.badgeLabel)))), this.type === 'button' && this.cellStyle === 'standard' && (h("div", { key: 'e49c2e2db60fa6182fbab0d38f2f558bc61088ca', class: "button_div" }, h("p", { key: '03a3774af316304b61f1fe93d02455449240f1f5', class: "label text-sm-regular" }, this.label), h("gb-button", { key: '299de9c1efeb466e436d637fd7f3f0bd66f8d4a7', size: "sm", hierarchy: "link_color", icon: "default" }, h("p", { key: 'a0b4880ffc8258c97ff973d8e68a8fcb199634ec' }, "Button CTA")))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: 'cc48a68a879170f8b5793e6a6fadcf1345cb86ac', class: "compact_info_div" }, h("div", { key: '52f31b113399c9c0523f841cca775bea1df5ffe8', class: "compact_info_text_div" }, h("div", { key: '0f6ad7810eb86efa6e3449da5393c3b86b97bd29', class: "compact_label" }, h("p", { key: 'e957e3ffb63d689de0fc7698efb9c0ff355019c7', class: "label text-sm-regular" }, this.label)), h("div", { key: 'c523cfaddd76b70fbe43554ab580ce9ccf4c4531', class: "compact_detail" }, h("p", { key: '13f16d27cd887d2a755cf40014f6b818bcb2afc5', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: '218b8a71fce5dab21a9c593bf4db96c61069adda', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: 'e3e577b1af8230ae2439bcd29bd609cc6b1557c1', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: '8e29738fd4ae485ed30e32db703562bf2ff2588c', 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: 'f16ecbd0225bb70038d19b91b4051d54ae9c6f72', class: "compact_div" }, h("gb-file-type-icon", { key: 'ec5cbc8b97b93d412dd43be34c896bc51cf82d49', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: 'abfbd34f19872e5b003b9cb0e8b68c55fe7b24d0', class: "compact_doc_text_div" }, h("p", { key: '4163af04873373e8df00756ed9b4b64458608c2d', class: "doc_label text-sm-regular" }, this.label), h("div", { key: '2037b77fdc0d64cd4cdf7ddebdc99a9103a1e9bc', class: "compact_doc_detail" }, h("p", { key: '1372a7a9577e28c96f7cd3c9743e8b1789d5dafb', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: '3acf680574ad75e01064a93c770593a903cff382', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: 'd3a4806c8d80ddbc0c17c9dda9fde35bb29213b6', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '7c5590929ffe05952231a97fe505e13bd3a7e086', class: "button_container" }, this.showViewButton && (h("gb-button", { key: 'eb265c64391daeab1609bf351f3d80d61b2a9757', 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: '3486239e5420f18a7eba562eaaeb21e8dc0684c8', 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: '9f9f8147c355132e5c8954ee696d99fe916fd552', class: "compact_div" }, h("div", { key: '5eb0b14f65add386c08cdb3991f8da3b20abae73', class: "compact_status_text_div" }, h("div", { key: '8bc953d0242950d6f29c3e535c97fb4b92c9c83c', class: "compact_label" }, h("p", { key: '9f766e9577f3292289ab4a31bfa7eb00ff38b474', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: '82c6004b1ab47a3cf4f512a7f68ece3dd6d4cb75', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: '54a1f58a596edc11d03af5cf4f3355aab979b6a7' }, this.badgeLabel))))), this.type === 'button' && this.cellStyle === 'compact' && (h("div", { key: '22349f35cd69c60c3b77973dd61c9b2550e28ab6', class: "compact_div" }, h("div", { key: '82e8d2e88f2ac60e94c8a86b7a8154ed571fc82d', class: "compact_status_text_div" }, h("div", { key: '650155832b2c0f0e0f5526a3c1f97e6c4eab866a', class: "compact_label" }, h("p", { key: '22494c135927fbd147976f86d75da5ab00a20f4f', class: "label text-sm-regular" }, this.label)), h("gb-button", { key: 'd475f9fb54e1d945c7571a1e6522498c59324788', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.onButtonClicked() }, h("p", { key: '6759e3169f3f16c4e7a237e5f8f0e52721291c9f' }, this.buttonText)))))));
+        return (h("div", { key: 'ab4974812e48b4067d04ee98c32dae8f618e35d7', 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: '5228687821061bf49fa9334418cc480b3f7bd929', class: "info_text_div" }, h("p", { key: 'f21ce62acb723dd186a1e44ffd1601c9288dc15b', class: "label text-sm-regular" }, this.label), h("div", { key: '6d1e08915bd0168fc46bd838d9872822b3bee36f', class: "detail_div" }, h("p", { key: 'b426c7e6dacbab752cea2a811a8813ac1451fe1e', class: `detail ${this.supportingText ? '' : 'no_supporting_text'} text-md-medium`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showSupportingText && h("p", { key: '4dea6268ef276dfd1636e88bb04c6e96def42bd5', class: "supporting_text text-md-medium" }, this.supportingText)), this.showTooltip && (h("gb-tooltip", { key: '7b105539d3a91a943e799422bee951b0b078f258', "show-arrow": false, class: "information_text_tooltip" }, h("p", { key: '10056d049c23839fdfb800e2644d6015947b2ecb', slot: "label" }, this.detail)))), this.showStandardCopyButton && (h("gb-button", { key: '9cee1446c5a53d3dd82fdb8a0814db2ec6a518db', 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: '444ae514d5193c4e458269e200a6b23c44084442', "show-arrow": false, class: "copied_tooltip" }, h("p", { key: '43920feb6a6fcdb9c7f8136a7636cf1a2b5e6a8c', slot: "label" }, "Copied!"))))), this.type === 'document' && this.cellStyle === 'standard' && (h(Fragment, null, h("gb-file-type-icon", { key: 'bbce59d4bd9da4e00ecb6f8240781be9c58e690d', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '84d3dfecf0228641ef8f480188b6edfb12981ca3', class: "document_text_div" }, h("p", { key: 'bcc8e87292e431a92733e0359cc5343a7a3490a8', class: "label text-sm-regular" }, this.label), h("p", { key: '44574d5add48a4c754383d958ac3292b90b9d811', class: "detail text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail), this.showTooltip && (h("gb-tooltip", { key: '98e8f4e602b61cbb709b58dc9d14bc8e94ca6c0e', "show-arrow": false, class: "document_detail_tooltip" }, h("p", { key: 'c27b331285134f2574e71d4a232c9afc438415c2', 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: '48ebf6a0c407f64e84bad3241626269524ae745f', class: "status_text_div" }, h("p", { key: 'd0225b2604c49307b60bd94a2efb33694aba7ccc', class: "label text-sm-regular" }, this.label), h("gb-badge", { key: '49ddb9d18f70f116f235798992c1baabb5623530', size: "sm", type: this.badgeType, icon: this.badgeIcon, color: this.badgeColor, "icon-leading-swap": this.badgeIconLeading, "icon-trailing-swap": this.badgeIconTrailing }, h("p", { key: 'ca0a7069d703e8216ad3b8c1c4673a0f6ee8e38a' }, this.badgeLabel)))), this.type === 'button' && this.cellStyle === 'standard' && (h("div", { key: 'f4adc213daa662924403ea2e9c3153e8e3b24282', class: "button_div" }, h("p", { key: '2d90f2ad560e5b3e5a7e751d3e1fd05c870e4bab', class: "label text-sm-regular" }, this.label), h("gb-button", { key: '80349ed9893aea70bfe56c4b4671c3c4170c2870', size: "sm", hierarchy: "link_color", icon: "default" }, h("p", { key: '4a46e6c20eb55d67c1c5656032da358096dfc72e' }, "Button CTA")))), this.type === 'information' && this.cellStyle === 'compact' && (h("div", { key: '736a6cdc83e3efe33a99757501e9c68079411fd3', class: "compact_info_div" }, h("div", { key: 'ab8fa2055e5077495865b53ddcaace115a39eb16', class: "compact_info_text_div" }, h("div", { key: 'b9d025027ba75c404dce0c1e4464122e192203b0', class: "compact_label" }, h("p", { key: 'b200c29ae5989c36b205dd626730fe5e7fb01111', class: "label text-sm-regular" }, this.label)), h("div", { key: '4a15d6b40bb88df9d7bbabdf7a2c2d18328830c7', class: "compact_detail" }, h("p", { key: 'bc2c8375ba1189cd7e8ffa9f30a1434ec17dbef7', class: "detail_compact_text text-md-medium" }, this.detail), this.copied && (h("gb-tooltip", { key: 'ad0b3afffd17bc63d8ce95f4c2ced364283a08bf', "show-arrow": false, class: "compact_copied_tooltip" }, h("p", { key: 'ae5393dd3e7d4d85733dfc525487deaf69472ee5', slot: "label" }, "Copied!")))), this.showCopyButton && (h("gb-button", { key: '15bb1d7c289941e46a8a449830ed4f9ea143bfdf', 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: 'e7515d9538d4066d5c0294b0a2614e85ac072cb6', class: "compact_div" }, h("gb-file-type-icon", { key: 'eb1cc07447a5f41b19a777b82680d75524eac8f9', "file-style": this.fileStyle, "file-type": this.fileType }), h("div", { key: '1cd9b31b5be5cc08a9e1360b474cf4c7d1f55136', class: "compact_doc_text_div" }, h("p", { key: '778a56ca3869787e0f2d10093d7c6643d4a32c60', class: "doc_label text-sm-regular" }, this.label), h("div", { key: 'cdff5855a4f233bb7cf9693d1c6fd0b35ab057ce', class: "compact_doc_detail" }, h("p", { key: '2dccfe23169d6dde7ef22e6c31a4da165f9452ef', class: "detaill text-md-medium", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, this.detail)), this.isDownloaded && (h("gb-tooltip", { key: 'ae0f4a929acd51717c9350407618127e54d30346', "show-arrow": false, class: "compact_downloaded_tooltip" }, h("p", { key: 'e5cfc4a3a1965cffe000737fba78ec6a5079bedb', slot: "label" }, "Downloaded!"))), this.showActionButtons && (h("div", { key: '9ab8ff8afb6d1446dd7b141701dc8d4a224f5bc0', class: "button_container" }, this.showViewButton && (h("gb-button", { key: 'a02a282b2e2370cae8367a80f5ea54bc2eccc1b7', 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: '5d15872dcf0ab54d67ff3137180dc618190a690f', 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: '5ce467088037a2fb5a41012b2dc6a353803dc885', class: "compact_div" }, h("div", { key: '0cfa77af8d2095c77b22006052761b3f3aebcab0', class: "compact_status_text_div" }, h("div", { key: '1221ca294a6832140dea307ffcdfc7e4ec296d28', class: "compact_label" }, h("p", { key: 'ef0df96922d0908ba5891c53e509b8fc7c9083bc', class: "label text-sm-regular" }, this.label)), h("gb-badge", { key: 'd689ed39daa767c3b21da0929d56440fa2be2b36', size: "sm", type: this.badgeType, icon: "dot", color: this.badgeColor }, h("p", { key: 'd04b9137fdcb8c1b0e2cd9e85ce515cd951e41d2' }, this.badgeLabel))))), this.type === 'button' && this.cellStyle === 'compact' && (h("div", { key: 'eb124d66414d16dcd328fe15947900eb58b8628f', class: "compact_div" }, h("div", { key: '0501505139f2bbca89d7bf3881003f726bb65e7c', class: "compact_status_text_div" }, h("div", { key: 'aa3be01891b0d47f9212a5e9e8732b3c2aff63b6', class: "compact_label" }, h("p", { key: '352fe7d0b8db64b9ae4f45ca85739fdf83065ccc', class: "label text-sm-regular" }, this.label)), h("gb-button", { key: '041b1c65462a275f023c3eb7bd47a87304d130f2', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.onButtonClicked() }, h("p", { key: 'a6e51cc8315e55e513a0b37377b228adde87b0b1' }, this.buttonText)))))));
     }
     static get is() { return "gb-detail-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2784,10 +2784,6 @@
   letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);
 }
 
-.icon_div {
-  padding-left: 7px;
-}
-
 .icon{
   display: flex;
   justify-content: center;

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

@@ -29,7 +29,7 @@ export class GbDropdownShortcut {
         this.loadIcon(this.iconSrc);
     }
     render() {
-        return (h("div", { key: '58a8b374319ac8e431a6dfdb6e0dfc64017c7d22', class: "shortcut-container" }, h("div", { key: 'fc84a9ee5a264d10eed7702ce8c86ae9e4c68f30', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}` }, this.icon && (h("div", { key: 'd66c2b7da49f8316d5de5368bc5a6d351cd63c9a', class: "icon_div" }, h("div", { key: 'e4e4ec54db7216b8f29c3ae6c812dd2da1429f0b', class: `icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`, innerHTML: this.leadingIconSvg }))), this.checkbox && !this.icon && h("gb-checkbox", { key: '15641d5aff0eef425fa5c60898f2280616f4795a', class: "checkbox", size: "sm", type: "checkbox", state: StateEnum.Default }), h("span", { key: '672bf690c3cadbcd19cbf0a8327215267121833e', class: "label_div" }, h("p", { key: '3149e8a8d204d3cc18977a1e82778080ccd5111a', class: `label text-sm-medium ${this.destructive ? 'destructive' : ''}` }, this.label)), this.shortcut && (h("span", { key: '751dc3f5abeb784e19eaecd6f0b445b531bb011a', class: "shortcut-icon" }, h("slot", { key: '0cc196256eba52d82c58438a5bc8aec56de63c7c' }, "\u2318", this.shortcutIcon))))));
+        return (h("div", { key: 'faeb16acfc049c498bc282e5ac7261e0b77b9a9a', class: "shortcut-container" }, h("div", { key: 'ce7bcb3aebd843d522a8072b1d39f36334dc7e10', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}` }, this.icon && (h("div", { key: '3d692fe26c90c19e53ced8b5fab5c93b0b549e74', class: "icon_div" }, h("div", { key: '0086c482131911f44c25296e429c2edc1226c799', class: `icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`, innerHTML: this.leadingIconSvg }))), this.checkbox && !this.icon && h("gb-checkbox", { key: 'f0f6af2a4b8deb2a4acadcd37e74a076315148c5', class: "checkbox", size: "sm", type: "checkbox", state: StateEnum.Default }), h("span", { key: '6ab60a27a4d447dbce925396b0ff54c94d4aa65f', class: "label_div" }, h("p", { key: 'fd7c275ced9ced21248a56e2505f6bfcaca344c1', class: `label text-sm-medium ${this.destructive ? 'destructive' : ''}` }, this.label)), this.shortcut && (h("span", { key: 'ca03553368d5af120842f2295e6617ce5fe529ce', class: "shortcut-icon" }, h("slot", { key: '6d3c96964904b389d53fd449033a06a25d56c3a2' }, this.shortcutIcon))))));
     }
     static get is() { return "gb-dropdown-items-with-shortcut"; }
     static get encapsulation() { return "shadow"; }