globuswebcomponents 1.4.6 → 1.4.8

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

@@ -63,7 +63,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: 'bd2c1acebef00ad4311830177d84765177896ef9', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: 'cced3d0d8c052d5ab60b6a52220bf921506e2a6c' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: '2bad8d865f267e9b9a723ea66f516cf248119fcd', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: 'b692eb81b7a9c53c87bccfe16798bcb68b5b0e10' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-button/readme.md

@@ -26,7 +26,6 @@
 
  - [gb-action-panel](../gb-action-panel)
  - [gb-checkbox-group-item](../gb-checkbox-group-item)
- - [gb-comment](../gb-comment)
  - [gb-detail-cell](../gb-detail-cell)
  - [gb-file-upload](../gb-file-upload)
  - [gb-file-upload-item-base](../gb-file-upload-item-base)
@@ -41,7 +40,6 @@
 graph TD;
   gb-action-panel --> gb-button
   gb-checkbox-group-item --> gb-button
-  gb-comment --> gb-button
   gb-detail-cell --> gb-button
   gb-file-upload --> gb-button
   gb-file-upload-item-base --> gb-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: 'e5da351da4655d83c8c888bf08245b0def484fd5', class: `${this.size} ${this.color}` }, h("svg", { key: '7701ebc9e6702efd3a221bc9a140adee75e26463', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: 'ed94ab1277663b68889db24fd2e09a83a67f4816', 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: '873f52990d07c0b7ce74e13b4cba016fe4379d58', class: `${this.size} ${this.color}` }, h("svg", { key: 'defc57708df0ee08279211db14a716fec5094d4d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: 'fd76832bd2121979ef148dfcc699a9124e445339', 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-carousel-arrow/gb-carousel-arrow.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbCarouselArrow {
     render() {
-        return (h("div", { key: '5d1ae65145367772bea4173526a6736c9d7e8b73', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '025cfde6dfa2f67a807d1035b9fce0bd5957bf8f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'fc4bf834ad0b5597e80ca7c245db186406fbae67', 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: 'd73b1e156d176650c80e776f38be9d314e5168f2', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd25e6783f4094e6d2eb61d512e694828335f45c2', 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: '931c74e406b7b9682f6ef34f9d1b6c8cd586c5a3', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '5cb32fb53127980d031abf00d7bebe2183d2da3d', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c330ceab86b48a0d95363fd0d7e16d46ac0dd0c6', 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: 'c76de3176e338fe3921786e88a71dc8717fc0002', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c930652d52238f0864cef33701f494992ea576d2', 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: '78e1d5277f0fe739fbdca8292c62a56fc5466a92', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: '4dcb784a3bb86c4999d7234d3794de731b319c4d', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: 'a77d268688f8151b557567a858cfc6602cbe59b6', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this) })), this.text && (h("div", { key: '15f8969d4d210c621dea6e15ecebaf278663f46d', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: '13984df24b220b159d30cf1b14740b6b0ce3dba9', name: "label" }), this.supportingText && h("slot", { key: 'b93da58aff2bf88b67d783292dbdaba12c4dae6e', name: "supporting_text" })))));
+        return (h("div", { key: 'aff1696dfd6d88e217cafa4437563d24d3abc106', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: '3c783717f79946ca51f8a7f182a29263adc45e19', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: 'd765c1a546a68e9832280b86476e48fe2f8679bf', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this) })), this.text && (h("div", { key: 'ebeb6595675d66397253e131224dd7ac357b67d1', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: 'd99cad479fdd100d06169232dd4ccc8d0b19c69f', name: "label" }), this.supportingText && h("slot", { key: '445bd5c905e72b18ed5d5c5a83d25f5ac5b20e78', name: "supporting_text" })))));
     }
     static get is() { return "gb-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,7 +100,7 @@ export class GbCheckboxBase {
         }
     }
     render() {
-        return (h("div", { key: '96f6bc614d8594011bf23ca06ee1dbc45546296d', class: `checkbox_container ${this.size}`, onClick: () => {
+        return (h("div", { key: '277c1506940ed420915d2233a0afa197fc5e7b33', class: `checkbox_container ${this.size}`, onClick: () => {
                 if (this.type === 'checkbox') {
                     return this.toggleCheckboxState();
                 }

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: '28608b200233ae763443c8c39741dfe7cf4f1916', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: 'b6a4b6965796dfb7d03bdead8d7108c900dbf156', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'dc3794a95111df5e6161be3d639fa72654471aec', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '7578003213c3ecd4dfdb99513d3e604600f980ab', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '014cf58cf7454f9be15c221980b0ba34c028c852', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'e1814f3c6f5f8c8c75c2271443b6ac578ed1d2ca', size: this.size, type: this.type, breakpoint: this.breakpoint })));
+        return (h("div", { key: 'c6ed893d4384568c293280a6f54a21bb16b88393', class: `checkbox_group` }, h("gb-checkbox-group-item", { key: 'fa1a3dd56a2a1cd674cbe2535a8690b0c819d71e', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'f368370a5df642731198dfe7c0c292839b70fbd3', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'f61883874893c2d930617364be30338ab9c02a5b', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: '5f5e770e4dc4de80dddad677fb7431878a91ce13', size: this.size, type: this.type, breakpoint: this.breakpoint }), h("gb-checkbox-group-item", { key: 'e92991d187ff445005ce66d77e06278bf9d4b843', 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

@@ -82,7 +82,7 @@ export class GbCheckboxGroupItem {
     }
     render() {
         return [
-            h("div", { key: '53e4dc2a4948df5c5e9e83792d474b30d94b3d66', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: '3ee1cd10ecc9001d9d3ce3db6ea1af096f5088c3', class: "item-content" }, this.renderIcon(), h("div", { key: '12e34bee677663ef684f1da298ffcaeced64cccd', class: "text-container" }, h("div", { key: '5fe7d7b3a1035025801d5458c25ae0bb80e0af36', class: `label-cost ${this.type}` }, h("slot", { key: '7f04dbca6fb52dbab12a2f7c52640e4aa3500ee5', name: "label" }), this.showCost && h("slot", { key: '346ceae9b839cdeacdb6956273fea2dc197069b6', 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" })))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: 'check_circle', size: this.size, state: this.state, checked: this.selected }))) : null),
+            h("div", { key: '79dd00d5987c033d0027335d18e20218f439367b', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''} ${this.breakpoint}`, onClick: () => this.toggleSelection() }, h("div", { key: '526755b1b6671edb44f72d3f0ef97a2ed5e58fd6', class: "item-content" }, this.renderIcon(), h("div", { key: '8659e1db901e2d2c3e1fe31f50b6b9b94522fa69', class: "text-container" }, h("div", { key: 'a9c8530b29b7f5be54bda7ef6a41b7fef8fffcc7', class: `label-cost ${this.type}` }, h("slot", { key: 'f77e0a8bb6beb6f6cb657d9f7f54e18f4cda5a5f', name: "label" }), this.showCost && h("slot", { key: 'abd3b136a6979a7e6440caa693edd86cf8d2209a', 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" })))), this.type === 'icon_simple' || this.type === 'avatar' || this.type === 'payment_icon' ? (h("div", { class: `checkbox_container` }, h("gb-checkbox", { type: 'check_circle', 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: 'a3111f6f1d34afeee1d9e9401ab7b0d1ccffd4c9' }, h("div", { key: 'bc4e649d1733a394afe70e89bb9f5943fec6856c', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, this.action === 'collapse' && [
-                h("svg", { key: 'c949a16a94f73556ac6466cf01d10d3bbd99a70f', 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: 'c2215f11c722980233e4a2272b0ea620057f7c49', 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: '3e743b7a660d9d2a58d4667d58dcfffbdca3e13f', 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: '780189708fdffac932b3d027bfdf11ac8b8811f4', 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: '10e316c09ac867858daa4ce66c92704649d02980' }, h("div", { key: 'ced81269b56bc0a131c57b68c9a154bce8ecc58c', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseOver: () => (this.isHovered = true), onMouseOut: () => (this.isHovered = false) }, this.action === 'collapse' && [
+                h("svg", { key: 'a38afa319d2462390e58fb01b968e5966b31b9d5', 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: 'ac2f4b342195b0cd458043a6f1694ce42d4fd233', 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: 'b80eb509aa5bd2c8dd2baabc47dfd7497b0e3b3d', 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: '9740a56ebfbd4c95a26ca7112f9117a01dd226ce', 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.js

@@ -1,55 +1,51 @@
 import { h, getAssetPath } from "@stencil/core";
-export var State;
-(function (State) {
-    State["Expanded"] = "expanded";
-    State["Collapsed"] = "collapsed";
-})(State || (State = {}));
-export class ReviewersComments {
+export class GbComment {
     constructor() {
-        this.heading = "Reviewers' comment";
-        this.state = State.Expanded;
-        this.noCommentText = "No comment yet";
-        this.noCommentTextSub = "No reviewer has left a comment yet, you will be notified when a comment drops";
+        this.heading = 'Reviewers comment';
+        this.state = 'expanded';
+        this.noCommentText = 'No comment yet';
+        this.noCommentTextSub = 'No reviewer has left a comment yet, you will be notified when a comment drops';
         this.comments = [
-            {
-                author: 'Prince Ogheneriere',
-                role: 'Authorizer',
-                comment: 'This is error and fraud free. I concur',
-                timestamp: '07-Oct-2024 6:00PM',
-            },
-            // {
-            //   author: 'Prince Ogheneriere',
-            //   role: 'Authorizer',
-            //   comment: 'This is error and fraud free. I concur',
-            //   timestamp: '07-Oct-2024 6:00PM',
-            // },
-            // {
-            //   author: 'Prince Ogheneriere',
-            //   role: 'Authorizer',
-            //   comment: 'I concur to the transactions in this call-over',
-            //   timestamp: '07-Oct-2024 6:00PM',
-            // },
-            // {
-            //   author: 'Gideon',
-            //   role: 'Designer',
-            //   comment: 'I concur to the transactions in this call-over',
-            //   timestamp: '07-Nov-2024 6:00PM',
-            // },
+        // {
+        //   name: 'Prince Ogheneriere',
+        //   role: 'Authorizer',
+        //   comments: 'This is error and fraud free. I concur',
+        //   timestamp: '07-Oct-2024 6:00PM',
+        // },
+        // {
+        //   name: 'Prince Ogheneriere',
+        //   role: 'Authorizer',
+        //   comment: 'This is error and fraud free. I concur',
+        //   timestamp: '07-Oct-2024 6:00PM'
+        // },
+        // {
+        //   name: 'Prince Ogheneriere',
+        //   role: 'Authorizer',
+        //   comment: 'I concur to the transactions in this call-over',
+        //   timestamp: '07-Oct-2024 6:00PM',
+        // },
+        // {
+        //   name: 'Gideon',
+        //   role: 'Designer',
+        //   comment: 'I concur to the transactions in this call-over',
+        //   timestamp: '07-Nov-2024 6:00PM',
+        // },
         ];
     }
     toggleComments() {
-        if (this.state === State.Expanded) {
-            this.state = State.Collapsed;
+        if (this.state === 'expanded') {
+            this.state = 'collapsed';
         }
-        else if (this.state === State.Collapsed) {
-            this.state = State.Expanded;
+        else if (this.state === 'collapsed') {
+            this.state = 'expanded';
         }
     }
     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: 'e5364c585af30d5cdcc366074e1a9bc961a646a9', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: '3ca067f34ad203d0e68ca2eba716d7c39e731e6f', class: `header ${this.state}` }, h("div", { key: 'cdbbbc44770d9cfc4f09fbaf16b73a66937ad431', class: "title-section" }, h("svg", { key: '3c233ab057c3bf9c601fea010b7bf394a88f04b6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: '617b4acab6e1dc6f3dbdedc7695b86260d576ac4', 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: 'b63f9c442889f2b5466f417db56d4dfe6aa36216', "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: 'e4938b61f5cc05132ff65866d9fc7976e40f0d0f', "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: '22655971a99bef3aa2a2fd85818f902ce6aee6da', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: '20c5fad0c0d7ebd43952d59afa393ba665ad1350', 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, author: comment.author, role: comment.role, comment: comment.comment, timestamp: 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))))))))));
+        return (h("div", { key: 'ffc086c7e41b6aa2f857873deacdc8fd36fafae1', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: '7874985b6c15343384e886322de1822b386fe05a', class: `header ${this.state}` }, h("div", { key: '26b4c1ceba8bf77dd60c8faf171ee7bc97e62903', class: "title-section" }, h("svg", { key: '89111c89755007e7ffe4ac68e096a70e6563ceb4', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: '4b6fa55b77413c3ccb51b7f87b82a19e44bd0a81', 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: '2da8ceb33579fca080ed81645d32d4feec404d8e', "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: '28d12f684d9c1e1a5a73387419890c377683f31d', "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: '54f06c164b666653a2fcb154b9bd6c24ebf77455', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: 'ac2676c40fe45df1945e0c3bb7b55c98701f2f11', 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, author: comment.name, role: comment.role, comment: comment.comments, timestamp: 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))))))))));
     }
     static get is() { return "gb-comment"; }
     static get encapsulation() { return "shadow"; }
@@ -83,21 +79,15 @@ export class ReviewersComments {
                 "setter": false,
                 "attribute": "heading",
                 "reflect": false,
-                "defaultValue": "\"Reviewers' comment\""
+                "defaultValue": "'Reviewers comment'"
             },
             "state": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "State",
-                    "resolved": "State.Collapsed | State.Expanded",
-                    "references": {
-                        "State": {
-                            "location": "local",
-                            "path": "C:/Users/EmmanuelKadiri/Documents/Globus Work/globusComponent/src/components/gb-comment/gb-comment.tsx",
-                            "id": "src/components/gb-comment/gb-comment.tsx::State"
-                        }
-                    }
+                    "original": "'expanded' | 'collapsed'",
+                    "resolved": "\"collapsed\" | \"expanded\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -109,7 +99,7 @@ export class ReviewersComments {
                 "setter": false,
                 "attribute": "state",
                 "reflect": false,
-                "defaultValue": "State.Expanded"
+                "defaultValue": "'expanded'"
             },
             "noCommentText": {
                 "type": "string",
@@ -129,7 +119,7 @@ export class ReviewersComments {
                 "setter": false,
                 "attribute": "no-comment-text",
                 "reflect": false,
-                "defaultValue": "\"No comment yet\""
+                "defaultValue": "'No comment yet'"
             },
             "noCommentTextSub": {
                 "type": "string",
@@ -149,7 +139,7 @@ export class ReviewersComments {
                 "setter": false,
                 "attribute": "no-comment-text-sub",
                 "reflect": false,
-                "defaultValue": "\"No reviewer has left a comment yet, you will be notified when a comment drops\""
+                "defaultValue": "'No reviewer has left a comment yet, you will be notified when a comment drops'"
             },
             "comments": {
                 "type": "unknown",
@@ -167,7 +157,7 @@ export class ReviewersComments {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      author: '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    //   author: '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    // {\r\n    //   author: '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    //   author: '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  ]"
+                "defaultValue": "[\r\n    // {\r\n    //   name: 'Prince Ogheneriere',\r\n    //   role: 'Authorizer',\r\n    //   comments: '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  ]"
             }
         };
     }

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEjE,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,8BAAqB,CAAA;IACrB,gCAAuB,CAAA;AACzB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAQD,MAAM,OAAO,iBAAiB;IAN9B;QAOU,YAAO,GAAW,oBAAoB,CAAC;QACxB,UAAK,GAAU,KAAK,CAAC,QAAQ,CAAC;QAC7C,kBAAa,GAAW,gBAAgB,CAAA;QACvC,qBAAgB,GAAW,+EAA+E,CAAA;QAC3G,aAAQ,GAAS;YACvB;gBACE,MAAM,EAAE,oBAAoB;gBAC5B,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,wCAAwC;gBACjD,SAAS,EAAE,oBAAoB;aAChC;YACD,IAAI;YACJ,kCAAkC;YAClC,wBAAwB;YACxB,uDAAuD;YACvD,qCAAqC;YAErC,KAAK;YACL,IAAI;YACJ,kCAAkC;YAClC,wBAAwB;YACxB,+DAA+D;YAC/D,qCAAqC;YACrC,KAAK;YACL,IAAI;YACJ,sBAAsB;YACtB,sBAAsB;YACtB,+DAA+D;YAC/D,qCAAqC;YACrC,KAAK;SAEN,CAAC;KA2FH;IAzFC,cAAc;QACZ,IAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/B,CAAC;aAAM,IAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAG,YAAY,CAAC,+BAA+B,CAAC,CAAC;QACjE,MAAM,eAAe,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;QAIhE,OAAO,CACL,4DAAK,KAAK,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE;YACzE,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE;gBAChC,4DAAK,KAAK,EAAC,eAAe;oBACxB,4DACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,WAAW;wBAEjB,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,gzBAAgzB,EAClzB,IAAI,EAAC,SAAS,GACd;wBACF,0EACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,4ZAA4Z,EAC9Z,IAAI,EAAC,SAAS,GACd;wBACF,0EACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,+LAA+L,EACjM,IAAI,EAAC,SAAS,GACd,CACE;oBACN,2DAAI,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,OAAO,CAAM,CACrD;gBAEN,kEAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAC5F,IAAI,CAAC,KAAK,KAAK,UAAU,CAAA,CAAC,CAAC,CAAC,6BAAoB,CAAC,CAAA,CAAC,CAAA,CAAC,6BAAoB,CAAC,CAC/D,CACR;YAEL,IAAI,CAAC,KAAK,KAAK,UAAU,IAAI,CAC5B,WAAW,CAAC,CAAC,CAAC,CACZ,WAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,uBACE,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS,EAE5B,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAC,CAAC,IAAE,KAAK,GAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAC,CAAC,CAAA,CAAC,CAAA,IAAI,CAAA,CAAC,CAAA,KAAK,GAC1E,CACH,CAAC,CACE,CACP,CAAC,CAAC,CAAC,CACH,WAAK,KAAK,EAAC,WAAW;gBACpB,WAAK,KAAK,EAAC,OAAO;oBACjB,WAAK,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,qBAAqB,GAAG;oBAC3D,WAAK,KAAK,EAAC,aAAa;wBACtB,WAAK,KAAK,EAAC,SAAS;4BAClB,WAAK,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,GAAG;4BAC/D,WAAK,KAAK,EAAC,MAAM;gCACf,SAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,aAAa,CAAK;gCAC/D,SAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,gBAAgB,CAAK,CAC3D,CACF,CACF,CACF,CACD,CAEN,CACF,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\nexport enum State {\r\n  Expanded = 'expanded',\r\n  Collapsed = 'collapsed'\r\n}\r\n\r\n@Component({\r\n  tag: 'gb-comment', \r\n  styleUrl: 'gb-comment.css',\r\n  shadow: true \r\n})\r\n\r\nexport class ReviewersComments {\r\n  @Prop() heading: string = \"Reviewers' comment\";\r\n  @Prop({mutable: true}) state: State = State.Expanded;\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      author: '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    //   author: '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    // {\r\n    //   author: '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    //   author: '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\r\n  toggleComments() {\r\n    if(this.state === State.Expanded) {\r\n      this.state = State.Collapsed;\r\n    } else if(this.state === State.Collapsed) {\r\n      this.state = 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    \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 \r\n              width=\"24\" \r\n              height=\"24\" \r\n              viewBox=\"0 0 24 24\" \r\n              fill=\"none\" \r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"info-icon\"\r\n            >\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                  author={comment.author} \r\n                  role={comment.role} \r\n                  comment={comment.comment} \r\n                  timestamp={comment.timestamp} \r\n                  \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          )\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 } 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 = 'Reviewers comment';\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed' = 'expanded';\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    //   comments: '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                  author={comment.name}\r\n                  role={comment.role}\r\n                  comment={comment.comments}\r\n                  timestamp={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}"]}

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

@@ -8,7 +8,7 @@ export class GbCommentItem {
         this.connector = false;
     }
     render() {
-        return (h("div", { key: '4d8d43fd78ced42968f55655e5181500f230dd65', class: "comment-item" }, h("div", { key: 'bbee393f4c0889bd82d5ca10e82ed3e85911e8ef', class: "left" }, h("div", { key: 'efcac42df27a67d5d8b6ea84c6c8c95249e9eb8d', class: "comment-bullet" }), this.connector && h("hr", { key: '369bbcc5e5624407b5fd7b9c11a6745fdd741bfa', class: "line" })), h("div", { key: 'e36205187b4303091a15b39852a2848b6760ea26', class: "comment-content" }, h("div", { key: '5fdd726012da3db60c71281f1f1c45d25bd5ed08', class: "reviewer-info" }, h("p", { key: '5d63464e980acce482ab267e941f6e18755aeff7', class: "text-sm-semi-bold" }, this.author, " (", this.role, ")")), h("div", { key: '824492e9ef5e8d89575b464eeea6b4b0b9021473', class: "comment-text" }, h("p", { key: '5aaea337b83b2b75e8a7fd2c325ab60f650d5b38', class: "text-sm-regular" }, this.comment)), h("div", { key: 'c47f02332707bb53439ad317442f895c0129f0a3', class: "timestamp" }, h("p", { key: '39b3b2e171735c53000fbf7293c19861ca78b44e', class: "text-xs-regular" }, " ", this.timestamp)))));
+        return (h("div", { key: '8edd338c3c0e4c5c7619b903e33376a0c73c5073', class: "comment-item" }, h("div", { key: '67c23aecbc7c647eba84af903f7eeff7820a5aef', class: "left" }, h("div", { key: '0aa524c3a988d97a3c481a13a54d8ba12ca645cc', class: "comment-bullet" }), this.connector && h("hr", { key: '0af0b354cdde70a04691e54f6d4b680beb769923', class: "line" })), h("div", { key: '17850c5135ccccb771a830e0faf87413c3e8e74f', class: "comment-content" }, h("div", { key: 'adf568c58044c001a63ae559d0d40051def9244f', class: "reviewer-info" }, h("p", { key: 'b18ca43c6f067cffda2e73c24f213c725ec78f49', class: "text-sm-semi-bold" }, this.author, " (", this.role, ")")), h("div", { key: '1ccd575ce271509e72e6de0c608b6add2496ec18', class: "comment-text" }, h("p", { key: 'b20ae0066e8685a6ad86758d1d345b1bfc7c4e49', class: "text-sm-regular" }, this.comment)), h("div", { key: '17effe39ccfca0ef7591a8dd4ac9a380fd9894a8', class: "timestamp" }, h("p", { key: 'd8799f8f26464c4e5c288594e0167a1ab9004a7f', class: "text-xs-regular" }, " ", this.timestamp)))));
     }
     static get is() { return "gb-comment-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-comment-item.js","sourceRoot":"","sources":["../../../src/components/gb-comment-item/gb-comment-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,aAAa;IAN1B;QAOU,WAAM,GAAW,EAAE,CAAC;QACpB,SAAI,GAAU,EAAE,CAAC;QACjB,YAAO,GAAW,EAAE,CAAC;QACrB,cAAS,GAAW,EAAE,CAAC;QACvB,cAAS,GAAY,KAAK,CAAC;KAuBpC;IArBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,cAAc;YACvB,4DAAK,KAAK,EAAC,MAAM;gBACjB,4DAAK,KAAK,EAAC,gBAAgB,GAAO;gBACjC,IAAI,CAAC,SAAS,IAAI,2DAAI,KAAK,EAAC,MAAM,GAAE,CAC/B;YACR,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,eAAe;oBACxB,0DAAG,KAAK,EAAC,mBAAmB;wBAAE,IAAI,CAAC,MAAM;;wBAAI,IAAI,CAAC,IAAI;4BAAM,CACxD;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,0DAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,OAAO,CAAK,CACzC;gBACN,4DAAK,KAAK,EAAC,WAAW;oBACpB,0DAAG,KAAK,EAAC,iBAAiB;;wBAAG,IAAI,CAAC,SAAS,CAAK,CAC5C,CACF,CACF,CACL,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\r\n \r\n@Component({\r\n  tag: 'gb-comment-item',\r\n  styleUrl: 'gb-comment-item.css',\r\n  shadow: true,\r\n})\r\n\r\nexport class GbCommentItem { \r\n  @Prop() author: string = '';\r\n  @Prop() role: string ='';\r\n  @Prop() comment: string = '';\r\n  @Prop() timestamp: string = '';\r\n  @Prop() connector: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"comment-item\">\r\n        <div class=\"left\">\r\n        <div class=\"comment-bullet\"></div>\r\n        {this.connector && <hr class=\"line\"/>}\r\n        </div>\r\n      <div class=\"comment-content\">\r\n        <div class=\"reviewer-info\">\r\n          <p class=\"text-sm-semi-bold\">{this.author} ({this.role})</p>\r\n        </div>\r\n        <div class=\"comment-text\">\r\n          <p class=\"text-sm-regular\">{this.comment}</p>\r\n        </div>\r\n        <div class=\"timestamp\">\r\n          <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    )\r\n  }\r\n}"]}
+{"version":3,"file":"gb-comment-item.js","sourceRoot":"","sources":["../../../src/components/gb-comment-item/gb-comment-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,aAAa;IAL1B;QAMU,WAAM,GAAW,EAAE,CAAC;QACpB,SAAI,GAAW,EAAE,CAAC;QAClB,YAAO,GAAW,EAAE,CAAC;QACrB,cAAS,GAAW,EAAE,CAAC;QACvB,cAAS,GAAY,KAAK,CAAC;KAyBpC;IAvBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,cAAc;YACvB,4DAAK,KAAK,EAAC,MAAM;gBACf,4DAAK,KAAK,EAAC,gBAAgB,GAAO;gBACjC,IAAI,CAAC,SAAS,IAAI,2DAAI,KAAK,EAAC,MAAM,GAAG,CAClC;YACN,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,eAAe;oBACxB,0DAAG,KAAK,EAAC,mBAAmB;wBACzB,IAAI,CAAC,MAAM;;wBAAI,IAAI,CAAC,IAAI;4BACvB,CACA;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,0DAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,OAAO,CAAK,CACzC;gBACN,4DAAK,KAAK,EAAC,WAAW;oBACpB,0DAAG,KAAK,EAAC,iBAAiB;;wBAAG,IAAI,CAAC,SAAS,CAAK,CAC5C,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-comment-item',\r\n  styleUrl: 'gb-comment-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbCommentItem {\r\n  @Prop() author: string = '';\r\n  @Prop() role: string = '';\r\n  @Prop() comment: string = '';\r\n  @Prop() timestamp: string = '';\r\n  @Prop() connector: boolean = false;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"comment-item\">\r\n        <div class=\"left\">\r\n          <div class=\"comment-bullet\"></div>\r\n          {this.connector && <hr class=\"line\" />}\r\n        </div>\r\n        <div class=\"comment-content\">\r\n          <div class=\"reviewer-info\">\r\n            <p class=\"text-sm-semi-bold\">\r\n              {this.author} ({this.role})\r\n            </p>\r\n          </div>\r\n          <div class=\"comment-text\">\r\n            <p class=\"text-sm-regular\">{this.comment}</p>\r\n          </div>\r\n          <div class=\"timestamp\">\r\n            <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}