npm - globuswebcomponents - Versions diffs - 2.13.1 → 2.13.3 - Mend

globuswebcomponents 2.13.1 → 2.13.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/dist/collection/components/gb-approval-modal/gb-approval-modal.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import { h } from "@stencil/core";
-export class gbapprovalmodal {
+export class GbApprovalModal {
     constructor() {
         this.showDecision = true;
+        this.badgeType = 'badge_color';
+        this.badgeIcon = 'dot';
+        this.badgeLabel = '';
         this.firstButtonText = '';
         this.secondButtonText = '';
-        this.thirdButtonText = '';
-        this.firstIconButtonSwap = '';
-        this.secondIconButtonSwap = '';
-        this.firstButtonIconLeadingSwap = '';
-        this.secondButtonIconLeadingSwap = '';
-        this.thirdButtonIconLeadingSwap = '';
-        this.firstButtonIconTrailingSwap = '';
-        this.secondButtonIconTrailingSwap = '';
-        this.thirdButtonIconTrailingSwap = '';
+        this.firstButtonState = 'default';
+        this.headerText = '';
+        this.textareaLabel = '';
+    }
+    emitTextareaValue(textareaValue) {
+        this.textareaValueChanged.emit(textareaValue.detail);
     }
     render() {
-        return (h("div", { key: 'b6da5dadb3dd324d93e0e3d1b317e62659ac7b9d', class: "approval-modal shadow-sm " }, h("gb-modal-header", { key: 'f1b63ee1582ee36f4fc6b11048ff87b290a1f845', "close-button-position": "right", text: "Title" }), h("div", { key: '1f2e4a465fb65e7df5771a17d3b7e3dbba46e5e0', class: "modal-content" }, this.showDecision && (h("div", { key: '1ecde7de795a352001da605e8ce5c22f9756c539', class: "modal-row" }, h("p", { key: 'a78071ba9bbff44e5959912abc694d3aa6398c7b', class: "text-sm-regular heading" }, "Reviewer's decision"), h("gb-badge", { key: '9bad898e049a8e44be35d112ee9c36a45f822e21', size: "sm", type: this.badgeType, icon: this.badgeIcon, color: this.badgeColor }, h("p", { key: 'c6c4c967c22519d0a519fcbd2e518a1254149653' }, this.badgeLabel)))), h("div", { key: '674a80220833e0f663f83df30f4bba9101a1f156', class: "modal-textarea" }, h("gb-textarea-input-field", { key: '02765879314430e27ce7fcc6ba5fde098bd15dcf', idOfInput: "default", state: "default", type: "default", "show-label": true, label: "Reason", "show-hint-text": false, destructive: false, "placeholder-text": "Enter comments here" }))), h("gb-modal-action", { key: 'fcf09623e979cddae70c46558f52765905984b01', "action-type": "double", "first-button-text": this.firstButtonText, "second-button-text": this.secondButtonText })));
+        return (h("div", { key: '5f494111fe6a24abacd5f3944ecb83052f08f8a7', class: "approval-modal shadow-sm" }, h("gb-modal-header", { key: '89b9aff2552c397b3e09a43280f445e8e559848d', "close-button-position": "right", text: this.headerText }), h("div", { key: '7987ce95d2e2dad2323090f0e107ac366d84fbfe', class: "modal-content" }, this.showDecision && (h("div", { key: 'cfa41c5e6112a96433d41c883de1d0204ac49388', class: "modal-row" }, h("p", { key: 'fdf1dc3dc2c73ff47c257202050645cafd48db78', class: "text-sm-regular heading" }, "Reviewer's decision"), h("gb-badge", { key: '241b70919bcd70341f4a123a3e9799b047c73400', size: "sm", type: this.badgeType, icon: this.badgeIcon, color: this.badgeColor }, h("p", { key: '6ac9efe7c0c8a1ce23e444a583dd95b3253084a8' }, this.badgeLabel)))), h("div", { key: 'e89df4e499f8fe587220d8562db16b06a7952bba', class: "modal-textarea" }, h("gb-textarea-input-field", { key: '4c8108bc3bbf1de21ff8b5fa50c7e9cb7746b13c', idOfInput: "default", state: "default", type: "default", "show-label": true, label: this.textareaLabel || 'Reason', "show-hint-text": false, destructive: false, "placeholder-text": "Enter comments here", onTextareaValueChanged: this.emitTextareaValue.bind(this) }))), h("gb-modal-action", { key: 'ba83b57c4f911bf3ae57a0911a1528d0bd1b3894', "action-type": "double", "first-button-state": this.firstButtonState, "first-button-text": this.firstButtonText, "second-button-text": this.secondButtonText, onFirstButtonClicked: () => this.primaryButtonClicked.emit(), onSecondButtonClicked: () => this.secondaryButtonClicked.emit() })));
     }
     static get is() { return "gb-approval-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +99,8 @@ export class gbapprovalmodal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "badge-type"
+                "attribute": "badge-type",
+                "defaultValue": "'badge_color'"
             },
             "badgeIcon": {
                 "type": "string",
@@ -124,7 +125,8 @@ export class gbapprovalmodal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "badge-icon"
+                "attribute": "badge-icon",
+                "defaultValue": "'dot'"
             },
             "badgeLabel": {
                 "type": "string",
@@ -143,7 +145,8 @@ export class gbapprovalmodal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "badge-label"
+                "attribute": "badge-label",
+                "defaultValue": "''"
             },
             "firstButtonText": {
                 "type": "string",
@@ -185,53 +188,19 @@ export class gbapprovalmodal {
                 "attribute": "second-button-text",
                 "defaultValue": "''"
             },
-            "thirdButtonText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "third-button-text",
-                "defaultValue": "''"
-            },
-            "firstIconButtonSwap": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "first-icon-button-swap",
-                "defaultValue": "''"
-            },
-            "secondIconButtonSwap": {
+            "firstButtonState": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "StateType",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
+                    "references": {
+                        "StateType": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -242,10 +211,10 @@ export class gbapprovalmodal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "second-icon-button-swap",
-                "defaultValue": "''"
+                "attribute": "first-button-state",
+                "defaultValue": "'default'"
             },
-            "firstButtonIconLeadingSwap": {
+            "headerText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -262,10 +231,10 @@ export class gbapprovalmodal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "first-button-icon-leading-swap",
+                "attribute": "header-text",
                 "defaultValue": "''"
             },
-            "secondButtonIconLeadingSwap": {
+            "textareaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -282,90 +251,58 @@ export class gbapprovalmodal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "second-button-icon-leading-swap",
+                "attribute": "textarea-label",
                 "defaultValue": "''"
-            },
-            "thirdButtonIconLeadingSwap": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "primaryButtonClicked",
+                "name": "primaryButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "third-button-icon-leading-swap",
-                "defaultValue": "''"
-            },
-            "firstButtonIconTrailingSwap": {
-                "type": "string",
-                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
-                },
-                "required": false,
-                "optional": false,
+                }
+            }, {
+                "method": "secondaryButtonClicked",
+                "name": "secondaryButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "first-button-icon-trailing-swap",
-                "defaultValue": "''"
-            },
-            "secondButtonIconTrailingSwap": {
-                "type": "string",
-                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
-                },
-                "required": false,
-                "optional": false,
+                }
+            }, {
+                "method": "textareaValueChanged",
+                "name": "textareaValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "second-button-icon-trailing-swap",
-                "defaultValue": "''"
-            },
-            "thirdButtonIconTrailingSwap": {
-                "type": "string",
-                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "third-button-icon-trailing-swap",
-                "defaultValue": "''"
-            }
-        };
+                }
+            }];
     }
 }
 //# sourceMappingURL=gb-approval-modal.js.map

package/dist/collection/components/gb-approval-modal/gb-approval-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-approval-modal.js","sourceRoot":"","sources":["../../../src/components/gb-approval-modal/gb-approval-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAQnD~~,MAAM,OAAO,eAAe;IAL5B;QAMU,iBAAY,GAAY,IAAI,CAAC;~~QAK7B~~,~~oBAAe~~,~~GAAW~~,~~EAAE~~,CAAC;~~QAC7B~~,~~qBAAgB~~,~~GAAW~~,~~EAAE~~,CAAC;~~QAC9B~~,~~oBAAe~~,GAAW,EAAE,CAAC;~~QAC7B~~,~~wBAAmB~~,GAAW,EAAE,CAAC;~~QACjC~~,~~yBAAoB~~,GAAW,EAAE,CAAC;~~QAClC,+BAA0B~~,~~GAAW~~,~~EAAE~~,CAAC;QACxC,~~gCAA2B~~,GAAW,EAAE,CAAC;~~QACzC,+BAA0B~~,GAAW,EAAE,CAAC;~~QACxC~~,~~gCAA2B~~,~~GAAW~~,~~EAAE~~,CAAC~~;QACzC~~,~~iCAA4B~~,~~GAAW~~,~~EAAE~~,CAAC~~;QAC1C~~,~~gCAA2B~~,~~GAAW~~,~~EAAE~~,CAAC;~~KAsClD~~;~~IApCC~~,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,~~2BAA2B~~;~~YACpC~~,iGAAuC,OAAO,EAAC,IAAI,~~EAAC~~,~~OAAO~~,~~GAAmB~~;~~YAM9E~~,4DAAK,KAAK,EAAC,eAAe;gBACvB,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,WAAW;oBACpB,0DAAG,KAAK,EAAC,yBAAyB,0BAAwB;oBAC1D,iEAAU,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU;wBACpF,4DAAI,IAAI,CAAC,UAAU,CAAK,CACf,CACP,CACP;gBAED,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,gFACE,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,gBACF,IAAI,EAChB,KAAK,~~EAAC~~,QAAQ,~~oBACE~~,KAAK,EACrB,WAAW,EAAE,KAAK,sBACD,qBAAqB,~~GACb~~,CACvB,CACF;YACN,~~uFAA6B~~,QAAQ,~~uBAAoB~~,IAAI,CAAC,eAAe,~~wBAAsB~~,IAAI,CAAC,gBAAgB,~~GAAoB~~,~~CACxI~~,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\r\nimport { GeneralColors, BadgeTypes, BadgeIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-approval-modal',\r\n styleUrl: 'gb-approval-modal.css',\r\n shadow: true,\r\n})\r\nexport class ~~gbapprovalmodal~~ {\r\n @Prop() showDecision: boolean = true;\r\n @Prop() badgeColor: GeneralColors;\r\n @Prop() badgeType: BadgeTypes;\r\n @Prop() badgeIcon: BadgeIconTypes~~;\r\n @Prop()~~ ~~badgeLabel:~~ ~~string~~;\r\n @Prop() ~~firstButtonText~~: string = '';\r\n @Prop() ~~secondButtonText~~: string = '';\r\n @Prop() ~~thirdButtonText~~: string = '';\r\n @Prop() ~~firstIconButtonSwap~~: ~~string~~ = '';\r\n @Prop() ~~secondIconButtonSwap~~: string = '';\r\n @Prop() ~~firstButtonIconLeadingSwap~~: string = '';\r\n @~~Prop~~() ~~secondButtonIconLeadingSwap~~: ~~string = '';\~~r\n @~~Prop~~() ~~thirdButtonIconLeadingSwap~~: ~~string = '';\~~r\n @~~Prop~~() ~~firstButtonIconTrailingSwap~~: string ~~= '';\~~r\n ~~@Prop~~(~~) secondButtonIconTrailingSwap~~: ~~string~~ ~~= '';\~~r\n ~~@Prop~~() ~~thirdButtonIconTrailingSwap: string = ''~~;\r\n\r\n render() {\r\n return (\r\n <div class=\"approval-modal shadow-sm \">\r\n <gb-modal-header close-button-position=\"right\" text~~=\"Title\"~~></gb-modal-header>\r\n {/* <div class=\"modal-top\">\r\n <p class=\"display-xs-semi-bold\">Title</p>\r\n <gb-button-close size=\"sm\" color=\"gray\"></gb-button-close>\r\n </div> */}\r\n\r\n <div class=\"modal-content\">\r\n {this.showDecision && (\r\n <div class=\"modal-row\">\r\n <p class=\"text-sm-regular heading\">Reviewer's decision</p>\r\n <gb-badge size=\"sm\" type={this.badgeType} icon={this.badgeIcon} color={this.badgeColor}>\r\n <p>{this.badgeLabel}</p>\r\n </gb-badge>\r\n </div>\r\n )}\r\n\r\n <div class=\"modal-textarea\">\r\n <gb-textarea-input-field\r\n idOfInput=\"default\"\r\n state=\"default\"\r\n type=\"default\"\r\n show-label={true}\r\n label~~=\"~~Reason\"\r\n show-hint-text={false}\r\n destructive={false}\r\n placeholder-text=\"Enter comments here\"\r\n ></gb-textarea-input-field>\r\n </div>\r\n </div>\r\n <gb-modal-action action-type=\"double\" first-button-text={this.firstButtonText} second-button-text={this.secondButtonText}></gb-modal-action>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-approval-modal.js","sourceRoot":"","sources":["../../../src/components/gb-approval-modal/gb-approval-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,eAAe;IAL5B;QAMU,iBAAY,GAAY,IAAI,CAAC;QAE7B,cAAS,GAAe,aAAa,CAAC;QACtC,cAAS,GAAmB,KAAK,CAAC;QAClC,eAAU,GAAW,EAAE,CAAC;QACxB,oBAAe,GAAW,EAAE,CAAC;QAC7B,qBAAgB,GAAW,EAAE,CAAC;QAC9B,qBAAgB,GAAc,SAAS,CAAC;QACxC,eAAU,GAAW,EAAE,CAAC;QACxB,kBAAa,GAAW,EAAE,CAAC;KAqDpC;IAhDC,iBAAiB,CAAC,aAAkB;QAClC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,0BAA0B;YACnC,iGAAuC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAoB;YAMxF,4DAAK,KAAK,EAAC,eAAe;gBACvB,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,WAAW;oBACpB,0DAAG,KAAK,EAAC,yBAAyB,0BAAwB;oBAC1D,iEAAU,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU;wBACpF,4DAAI,IAAI,CAAC,UAAU,CAAK,CACf,CACP,CACP;gBAED,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,gFACE,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,gBACF,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,QAAQ,oBACrB,KAAK,EACrB,WAAW,EAAE,KAAK,sBACD,qBAAqB,EACtC,sBAAsB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAChC,CACvB,CACF;YACN,uFACc,QAAQ,wBACA,IAAI,CAAC,gBAAgB,uBACtB,IAAI,CAAC,eAAe,wBACnB,IAAI,CAAC,gBAAgB,EACzC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,EAC5D,qBAAqB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,GAC9C,CACf,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\r\nimport { GeneralColors, BadgeTypes, BadgeIconTypes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-approval-modal',\r\n styleUrl: 'gb-approval-modal.css',\r\n shadow: true,\r\n})\r\nexport class GbApprovalModal {\r\n @Prop() showDecision: boolean = true;\r\n @Prop() badgeColor: GeneralColors;\r\n @Prop() badgeType: BadgeTypes = 'badge_color';\r\n @Prop() badgeIcon: BadgeIconTypes = 'dot';\r\n @Prop() badgeLabel: string = '';\r\n @Prop() firstButtonText: string = '';\r\n @Prop() secondButtonText: string = '';\r\n @Prop() firstButtonState: StateType = 'default';\r\n @Prop() headerText: string = '';\r\n @Prop() textareaLabel: string = '';\r\n @Event() primaryButtonClicked: EventEmitter<void>;\r\n @Event() secondaryButtonClicked: EventEmitter<void>;\r\n @Event() textareaValueChanged: EventEmitter<string>;\r\n\r\n emitTextareaValue(textareaValue: any) {\r\n this.textareaValueChanged.emit(textareaValue.detail);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"approval-modal shadow-sm\">\r\n <gb-modal-header close-button-position=\"right\" text={this.headerText}></gb-modal-header>\r\n {/* <div class=\"modal-top\">\r\n <p class=\"display-xs-semi-bold\">Title</p>\r\n <gb-button-close size=\"sm\" color=\"gray\"></gb-button-close>\r\n </div> */}\r\n\r\n <div class=\"modal-content\">\r\n {this.showDecision && (\r\n <div class=\"modal-row\">\r\n <p class=\"text-sm-regular heading\">Reviewer's decision</p>\r\n <gb-badge size=\"sm\" type={this.badgeType} icon={this.badgeIcon} color={this.badgeColor}>\r\n <p>{this.badgeLabel}</p>\r\n </gb-badge>\r\n </div>\r\n )}\r\n\r\n <div class=\"modal-textarea\">\r\n <gb-textarea-input-field\r\n idOfInput=\"default\"\r\n state=\"default\"\r\n type=\"default\"\r\n show-label={true}\r\n label={this.textareaLabel \|\| 'Reason'}\r\n show-hint-text={false}\r\n destructive={false}\r\n placeholder-text=\"Enter comments here\"\r\n onTextareaValueChanged={this.emitTextareaValue.bind(this)}\r\n ></gb-textarea-input-field>\r\n </div>\r\n </div>\r\n <gb-modal-action\r\n action-type=\"double\"\r\n first-button-state={this.firstButtonState}\r\n first-button-text={this.firstButtonText}\r\n second-button-text={this.secondButtonText}\r\n onFirstButtonClicked={() => this.primaryButtonClicked.emit()}\r\n onSecondButtonClicked={() => this.secondaryButtonClicked.emit()}\r\n ></gb-modal-action>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -8,6 +8,7 @@ export class GbButtonGroup {
         // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },
         // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },
         ];
+        this.icon = 'checkbox';
         this.showLabel = false;
         this.label = '';
         this.internalItems = [];
@@ -29,7 +30,7 @@ export class GbButtonGroup {
         // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });
     }
     render() {
-        return (h("div", { key: 'eee8d36896df16f3a303aae8e1e5b14ba1035eca', class: "button_group_container" }, this.showLabel && h("p", { key: 'e92e4015de28d11feb17df832f740d9395b3b04c', class: "dropdown_label text-sm-regular" }, this.label), h("div", { key: 'ccbb6c61d25f6c50b92a97c987092798b9ce6618', 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: '4787b4849abe0146ce478ad4c5760454b77f0d52', class: "button_group_container" }, this.showLabel && h("p", { key: '7b07d2799bb7cfb42ae56c75cc3d7646716d4d79', class: "dropdown_label text-sm-regular" }, this.label), h("div", { key: 'c8c48e1e0cca9329b9805247205b424d16035cd1', 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"; }
@@ -87,7 +88,8 @@ export class GbButtonGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "icon",
+                "defaultValue": "'checkbox'"
             },
             "showLabel": {
                 "type": "boolean",

package/dist/collection/components/gb-button-group/gb-button-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-button-group.js","sourceRoot":"","sources":["../../../src/components/gb-button-group/gb-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASvG,MAAM,OAAO,aAAa;IAN1B;QAQU,UAAK,GAA0D;QACrE,oEAAoE;QACpE,uEAAuE;QACvE,mEAAmE;QACnE,uEAAuE;QACvE,yEAAyE;SAC1E,CAAC;~~QAEM~~,cAAS,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAW,EAAE,CAAC;QAClB,kBAAa,GAA0D,EAAE,CAAC;QAC1E,kBAAa,GAAW,EAAE,CAAC;KAkDrC;IA7CC,cAAc,CAAC,QAA+D;QAC5E,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAEtD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,CAAC,KAAK,KAAK,IACpB,CAAC,CAAC;QAEJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAEnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,kCAAkC;QAElC,0FAA0F;QAC1F,oGAAoG;IACtG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,wBAAwB;YAChC,IAAI,CAAC,SAAS,IAAI,0DAAG,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,KAAK,CAAK;YAC7E,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,4BACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAC7B,IAAI,CAAC,IAAI,GACG,CACzB,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { AttachInternals, Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonGroupTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-button-group',\r\n styleUrl: 'gb-button-group.css',\r\n shadow: true,\r\n formAssociated: true,\r\n})\r\nexport class GbButtonGroup {\r\n @AttachInternals() internals: ElementInternals;\r\n @Prop() items: { label: string; current?: boolean; icon?: string }[] = [\r\n // { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n ];\r\n @Prop() icon: ButtonGroupTypes;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @State() internalItems: { label: string; current?: boolean; icon?: string }[] = [];\r\n @State() selectedValue: string = '';\r\n // @Event() valueChange: EventEmitter<{ value: string; current: boolean }>;\r\n @Event() optionChange: EventEmitter<string>;\r\n\r\n @Watch('items')\r\n onItemsUpdated(newValue: { label: string; current?: boolean; icon?: string }[]) {\r\n this.internalItems = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalItems = [...this.items];\r\n }\r\n\r\n handleSelect(index: number) {\r\n const selectedValue = this.internalItems[index].label;\r\n\r\n this.internalItems = this.internalItems.map((item, i) => ({\r\n ...item,\r\n current: i === index,\r\n }));\r\n\r\n this.selectedValue = selectedValue;\r\n\r\n this.optionChange.emit(this.selectedValue);\r\n // console.log(this.selectedValue)\r\n\r\n // console.log({ value: this.selectedValue, current: this.internalItems[index].current });\r\n // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"button_group_container\">\r\n {this.showLabel && <p class=\"dropdown_label text-sm-regular\">{this.label}</p>}\r\n <div class=\"button_group_wrapper\">\r\n {this.internalItems.map((item, index) => (\r\n <gb-button-group-base\r\n key={index}\r\n state=\"default\"\r\n icon={this.icon}\r\n label={item.label}\r\n current={item.current}\r\n onClick={() => this.handleSelect(index)}\r\n icon-src={item.icon}\r\n ></gb-button-group-base>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-button-group.js","sourceRoot":"","sources":["../../../src/components/gb-button-group/gb-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASvG,MAAM,OAAO,aAAa;IAN1B;QAQU,UAAK,GAA0D;QACrE,oEAAoE;QACpE,uEAAuE;QACvE,mEAAmE;QACnE,uEAAuE;QACvE,yEAAyE;SAC1E,CAAC;QACM,SAAI,GAAqB,UAAU,CAAC;QACpC,cAAS,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAW,EAAE,CAAC;QAClB,kBAAa,GAA0D,EAAE,CAAC;QAC1E,kBAAa,GAAW,EAAE,CAAC;KAkDrC;IA7CC,cAAc,CAAC,QAA+D;QAC5E,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAEtD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,CAAC,KAAK,KAAK,IACpB,CAAC,CAAC;QAEJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAEnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,kCAAkC;QAElC,0FAA0F;QAC1F,oGAAoG;IACtG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,wBAAwB;YAChC,IAAI,CAAC,SAAS,IAAI,0DAAG,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,KAAK,CAAK;YAC7E,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,4BACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAC7B,IAAI,CAAC,IAAI,GACG,CACzB,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonGroupTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-button-group',\r\n styleUrl: 'gb-button-group.css',\r\n shadow: true,\r\n formAssociated: true,\r\n})\r\nexport class GbButtonGroup {\r\n @AttachInternals() internals: ElementInternals;\r\n @Prop() items: { label: string; current?: boolean; icon?: string }[] = [\r\n // { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n ];\r\n @Prop() icon: ButtonGroupTypes = 'checkbox';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @State() internalItems: { label: string; current?: boolean; icon?: string }[] = [];\r\n @State() selectedValue: string = '';\r\n // @Event() valueChange: EventEmitter<{ value: string; current: boolean }>;\r\n @Event() optionChange: EventEmitter<string>;\r\n\r\n @Watch('items')\r\n onItemsUpdated(newValue: { label: string; current?: boolean; icon?: string }[]) {\r\n this.internalItems = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalItems = [...this.items];\r\n }\r\n\r\n handleSelect(index: number) {\r\n const selectedValue = this.internalItems[index].label;\r\n\r\n this.internalItems = this.internalItems.map((item, i) => ({\r\n ...item,\r\n current: i === index,\r\n }));\r\n\r\n this.selectedValue = selectedValue;\r\n\r\n this.optionChange.emit(this.selectedValue);\r\n // console.log(this.selectedValue)\r\n\r\n // console.log({ value: this.selectedValue, current: this.internalItems[index].current });\r\n // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"button_group_container\">\r\n {this.showLabel && <p class=\"dropdown_label text-sm-regular\">{this.label}</p>}\r\n <div class=\"button_group_wrapper\">\r\n {this.internalItems.map((item, index) => (\r\n <gb-button-group-base\r\n key={index}\r\n state=\"default\"\r\n icon={this.icon}\r\n label={item.label}\r\n current={item.current}\r\n onClick={() => this.handleSelect(index)}\r\n icon-src={item.icon}\r\n ></gb-button-group-base>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import { h, Fragment, getAssetPath } from "@stencil/core";
+import { StateEnum } from "../../models/reusableModels";
 export class GbInputDropdownMenuItem {
     constructor() {
+        this.type = 'default';
         this.supportingText = false;
         this.selected = false;
+        this.state = StateEnum.Default;
         this.iconLeading = false;
         this.iconLeadingSwap = '';
         this.ellipsed = true;
@@ -51,13 +54,13 @@ export class GbInputDropdownMenuItem {
     render() {
         return (
         // <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
-        h("div", { key: '2de33ec0d27a91ec027951e2a8b0f4ff1e4d26d7', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '0e015d184f26cce9560105178d7699559590924d', class: {
+        h("div", { key: 'b9889f67621d8f78fd707694f2d30ad3a5a64f62', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '8cd44c0225af757c7eb378503ab28c51b53609b9', class: {
                 'dropdown-item': true,
                 'selected': this.selected,
                 'disabled': this.state === 'disabled',
                 'checkbox': this.type === 'checkbox',
                 [this.type]: true,
-            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '5454b6d0126c4ac4c03a6f91d8b8b706d38e9c90', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '487572e8182581eb9b0f83c0320e8495a9e8f4ca', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: 'd5eccba22bd6a01e3895ea7be11d223f1166bdaa', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: 'acdf8105f09d9978d83b4094b7c79a4b44b70d6f', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: '91c2e1e4c518a072f5bfcefb91b24d9d7d9466ba', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '4b7d68f510c23691fbd7a11b302ac7e35f0386c3', name: "name" }), this.supportingText && (h("span", { key: '72b20ec4640004662553335c9d346a4eae87c375' }, h("slot", { key: '2266cc770ec98bfab960335dafbe60c6c4eab234', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: 'c767ad58437df6c7cfebd01b4eb90716fa4221ae', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '200f44bbe4cc7a8fb1b2193575d6eafd843be16f', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '226ae5d180ddd362e08daad08790165a87d222b9', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: '04c68cff7ad84c070d72999ff6e564db04994c93', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: '1814b58f8a781007ecb1c22d09fee477ea497d53', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: 'b9bc6bbbd0b1d9cc397d9366e5574f34f8b12a08', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '9e464846673c46ad2f3228d54a7f013d2422dbfe', name: "name" }), this.supportingText && (h("span", { key: '0586327e4d77898e4f31eb56e3d634bff9a54416' }, h("slot", { key: '178d75d8776dfe2683f276b9000fd2a04204dfa6', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '1b4044482cc8d8cd2cace7825848a094bac3fda9', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "gb-input-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -96,7 +99,8 @@ export class GbInputDropdownMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "type",
+                "defaultValue": "'default'"
             },
             "supportingText": {
                 "type": "boolean",
@@ -161,7 +165,8 @@ export class GbInputDropdownMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state"
+                "attribute": "state",
+                "defaultValue": "StateEnum.Default"
             },
             "color": {
                 "type": "string",

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Fragment, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-input-dropdown-menu-item',\r\n styleUrl: 'gb-input-dropdown-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n @Prop() type: DropdownTypes;\r\n @Prop() supportingText: boolean = false;\r\n @Prop({ mutable: true }) selected: boolean = false;\r\n @Prop() state: StateEnum;\r\n @Prop() color: ColorTypes;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string = '';\r\n @Prop() ellipsed: boolean = true;\r\n @State() leadingIconSvg: string = '';\r\n @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n @Element() el: HTMLElement;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconLeadingSwap);\r\n }\r\n\r\n componentDidLoad() {\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (nameSlot) {\r\n nameSlot.classList.add('text-md-medium');\r\n\r\n if(this.ellipsed) {\r\n nameSlot.classList.add('ellipsed');\r\n }\r\n }\r\n\r\n if (initialsSlot) {\r\n initialsSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n async handleClick() {\r\n this.dropdownItemClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n <div\r\n class={{\r\n 'dropdown-item': true,\r\n 'selected': this.selected,\r\n 'disabled': this.state === 'disabled',\r\n 'checkbox': this.type === 'checkbox',\r\n [this.type]: true,\r\n }}\r\n role=\"option\"\r\n aria-selected={this.selected ? 'true' : 'false'}\r\n aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n >\r\n <div class=\"content\">\r\n {this.type === 'icon_leading' && this.iconLeading && <div class={`icon_leading ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n {this.type === 'avatar_leading' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.type === 'dot_leading' && (\r\n <>\r\n {this.state === 'default' ? (\r\n <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n <slot name=\"name\"></slot>\r\n {this.supportingText && (\r\n <span>\r\n <slot name=\"supporting_text\"></slot>\r\n </span>\r\n )}\r\n </div>\r\n {this.selected && this.type !== 'checkbox' && (\r\n <div class={`tick`}>\r\n {this.state !== 'disabled' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Fragment, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-input-dropdown-menu-item',\r\n styleUrl: 'gb-input-dropdown-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n @Prop() type: DropdownTypes = 'default';\r\n @Prop() supportingText: boolean = false;\r\n @Prop({ mutable: true }) selected: boolean = false;\r\n @Prop() state: StateEnum = StateEnum.Default;\r\n @Prop() color: ColorTypes;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string = '';\r\n @Prop() ellipsed: boolean = true;\r\n @State() leadingIconSvg: string = '';\r\n @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n @Element() el: HTMLElement;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.iconLeadingSwap);\r\n }\r\n\r\n componentDidLoad() {\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n if (nameSlot) {\r\n nameSlot.classList.add('text-md-medium');\r\n\r\n if(this.ellipsed) {\r\n nameSlot.classList.add('ellipsed');\r\n }\r\n }\r\n\r\n if (initialsSlot) {\r\n initialsSlot.classList.add('text-xs-semi-bold');\r\n }\r\n\r\n if (supportingTextSlot) {\r\n supportingTextSlot.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n async handleClick() {\r\n this.dropdownItemClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n <div\r\n class={{\r\n 'dropdown-item': true,\r\n 'selected': this.selected,\r\n 'disabled': this.state === 'disabled',\r\n 'checkbox': this.type === 'checkbox',\r\n [this.type]: true,\r\n }}\r\n role=\"option\"\r\n aria-selected={this.selected ? 'true' : 'false'}\r\n aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n >\r\n <div class=\"content\">\r\n {this.type === 'icon_leading' && this.iconLeading && <div class={`icon_leading ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n {this.type === 'avatar_leading' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n </gb-avatar>\r\n )}\r\n {this.type === 'dot_leading' && (\r\n <>\r\n {this.state === 'default' ? (\r\n <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n <slot name=\"name\"></slot>\r\n {this.supportingText && (\r\n <span>\r\n <slot name=\"supporting_text\"></slot>\r\n </span>\r\n )}\r\n </div>\r\n {this.selected && this.type !== 'checkbox' && (\r\n <div class={`tick`}>\r\n {this.state !== 'disabled' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/gb-input-field/gb-input-field.css CHANGED Viewed

@@ -2808,6 +2808,7 @@
   color: var(--color-text-danger, #b51726) !important;
 } */
 :host {
   position: relative;
 }
@@ -2818,7 +2819,7 @@ input {
   outline: none;
 }
-input:focus{
+input:focus {
   caret-color: var(--color-text, #4b5565);
 }
@@ -3173,6 +3174,12 @@ input:autofill {
 .country_icon {
   display: flex;
   align-items: center;
+  border-radius: var(--rounded-full);
+  overflow: hidden;
+}
+.country_icon img {
+  /* object-fit: cover; */
 }
 .dropdown_menu {