npm - globuswebcomponents - Versions diffs - 2.5.1 → 2.5.2 - Mend

globuswebcomponents 2.5.1 → 2.5.2

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 (736) hide show

package/dist/collection/components/gb-avatar-dropdown/gb-avatar-dropdown.css CHANGED Viewed

@@ -2733,7 +2733,8 @@
 .simple-dropdown {
-  display: inline-flex;
+  display: flex;
+  width: 15rem;
   padding: 0px;
   flex-direction: column;
   align-items: flex-start;
@@ -2746,24 +2747,19 @@
 .profile {
   display: flex;
-  padding: var(--spacing-3);
-  flex-direction: column;
   align-items: flex-start;
   gap: var(--spacing-none);
   border-radius: var(--rounded-none);
-  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
-}
-.simple_profile {
-  width: 15rem;
-}
-.complex_profile {
-  width: 15rem;
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+  padding: 0.5rem;
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
 }
 .complex-dropdown {
-  display: inline-flex;
+  width: 15rem;
+  display: flex;
   padding: 0px;
   flex-direction: column;
   align-items: flex-start;
@@ -2801,9 +2797,7 @@
   border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
 }
-.one,
-.two,
-.three {
+.item {
   width: 96.5%;
 }
@@ -2817,13 +2811,14 @@
 }
 .theme_tab {
-  width: 91%;
+  width: 100%;
+  box-sizing: border-box;
   padding: var(--spacing-3);
   border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
 }
 .roles {
-  /* width: 100%; */
+  width: 100%;
   display: flex;
   padding: var(--spacing-3);
   gap: var(--spacing-2);
@@ -2831,6 +2826,7 @@
   align-items: flex-start;
   border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
   color: var(--color-text, #4b5565);
+  box-sizing: border-box;
 }
 .badges {
@@ -2841,4 +2837,4 @@
   gap: 0.5rem var(--spacing-2);
   align-self: stretch;
   flex-wrap: wrap;
-}
+}

package/dist/collection/components/gb-avatar-dropdown/gb-avatar-dropdown.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 export class GbAvatarDropdown {
     constructor() {
+        this.type = 'simple';
         this.text = false;
         this.showRoles = false;
         this.roles = [
@@ -20,6 +21,16 @@ export class GbAvatarDropdown {
         //   badgeType: 'badge_color',
         // },
         ];
+        this.listGroupOne = [
+        // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },
+        // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },
+        // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },
+        ];
+        this.listGroupTwo = [
+        // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },
+        // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },
+        // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },
+        ];
         this.showBorder = false;
     }
     applyColorToInitials() {
@@ -44,7 +55,6 @@ export class GbAvatarDropdown {
         this.itemClicked.emit(item);
     }
     emitTheme(theme) {
-        // console.log(theme.detail);
         this.themeTabClicked.emit(theme);
     }
     componentDidLoad() {
@@ -64,10 +74,10 @@ export class GbAvatarDropdown {
     }
     render() {
         if (this.type === 'simple') {
-            return (h("div", { class: "simple-dropdown" }, h("div", { class: "profile simple_profile" }, h("gb-avatar-label-group", { size: "md", text: true, color: this.color, "show-border": this.showBorder }, h("slot", { name: "name", slot: "name" }), h("slot", { name: "initials", slot: "initials" }), h("slot", { name: "supporting_text", slot: "supporting_text" }))), h("div", { class: "menu-items" }, h("div", { class: "list" }, this.showThemeTab && (h("div", { class: "theme_tab" }, h("gb-theme-tab", { "current-active-tab": this.currentTheme, onThemeTabClicked: this.emitTheme.bind(this) }))), this.showProfile && (h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/user_profile.svg", label: "View Profile", shortcut: true, shortcutIcon: "K + P", onClick: () => this.onItemClicked('view_profile') })), this.showLogOut && (h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/logout_button.svg", label: "Log out", shortcut: true, shortcutIcon: "L", onClick: () => this.onItemClicked('log_out') }))))));
+            return (h("div", { class: "simple-dropdown" }, h("div", { class: "profile" }, h("gb-avatar-label-group", { size: "md", text: true, color: this.color, "show-border": this.showBorder }, h("slot", { name: "name", slot: "name" }), h("slot", { name: "initials", slot: "initials" }), h("slot", { name: "supporting_text", slot: "supporting_text" }))), h("div", { class: "menu-items" }, h("div", { class: "list" }, this.showThemeTab && (h("div", { class: "theme_tab" }, h("gb-theme-tab", { "current-active-tab": this.currentTheme, onThemeTabClicked: this.emitTheme.bind(this) }))), this.showProfile && (h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/user_profile.svg", label: "View Profile", shortcut: true, shortcutIcon: "K + P", onClick: () => this.onItemClicked('view_profile') })), this.showLogOut && (h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/logout_button.svg", label: "Log out", shortcut: true, shortcutIcon: "L", onClick: () => this.onItemClicked('log_out') }))))));
         }
         if (this.type === 'complex') {
-            return (h("div", { class: "complex-dropdown" }, h("div", { class: "profile complex_profile" }, h("gb-avatar-label-group", { size: "md", class: "label_group", text: true, color: this.color }, h("slot", { name: "name", slot: "name" }), h("slot", { name: "initials", slot: "initials" }), h("slot", { name: "supporting_text", slot: "supporting_text" }))), this.showRoles && (h("div", { class: "roles" }, h("p", { class: "text-sm-medium" }, "Available roles"), h("div", { class: "badges" }, this.roles.map(role => (h("gb-badge", { size: "md", color: role.badgeColor, type: role.badgeType }, h("p", null, role.badgeLabel))))))), this.showThemeTab && (h("div", { class: "theme_tab" }, h("gb-theme-tab", { "current-active-tab": this.currentTheme, onThemeTabClicked: this.emitTheme.bind(this) }))), this.listGroupOne && (h("div", { class: "list-group-one" }, h("div", { class: "one" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/user_profile.svg", label: "View Profile", shortcut: true, shortcutIcon: "K+P", onClick: () => this.onItemClicked('view_profile') })), h("div", { class: "two" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/book-open-02.svg", label: "Documentation", shortcut: true, shortcutIcon: "T", onClick: () => this.onItemClicked('documentation') })), h("div", { class: "three" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/customer-support.svg", label: "Support", shortcut: true, shortcutIcon: "C", onClick: () => this.onItemClicked('support') })))), this.listGroupTwo && (h("div", { class: "list-group-two" }, h("div", { class: "one" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/configuration_02.svg", label: "Configuration", shortcut: true, shortcutIcon: "S", onClick: () => this.onItemClicked('configuration') })), h("div", { class: "two" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/user_group.svg", label: "Team", shortcut: true, shortcutIcon: "K->T", onClick: () => this.onItemClicked('team') })), h("div", { class: "three" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/user_add.svg", label: "Invite Members", shortcut: true, shortcutIcon: "I", onClick: () => this.onItemClicked('invite_members') })))), this.listGroupThree && (h("div", { class: "list-group-three" }, h("div", { class: "one" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/logout_button.svg", label: "Log out", shortcut: true, shortcutIcon: "L", onClick: () => this.onItemClicked('log_out') }))))));
+            return (h("div", { class: "complex-dropdown" }, h("div", { class: "profile" }, h("gb-avatar-label-group", { size: "md", class: "label_group", text: true, color: this.color }, h("slot", { name: "name", slot: "name" }), h("slot", { name: "initials", slot: "initials" }), h("slot", { name: "supporting_text", slot: "supporting_text" }))), this.showRoles && (h("div", { class: "roles" }, h("p", { class: "text-sm-medium" }, "Available roles"), h("div", { class: "badges" }, this.roles.map(role => (h("gb-badge", { size: "md", color: role.badgeColor, type: role.badgeType }, h("p", null, role.badgeLabel))))))), this.showThemeTab && (h("div", { class: "theme_tab" }, h("gb-theme-tab", { "current-active-tab": this.currentTheme, onThemeTabClicked: this.emitTheme.bind(this) }))), this.listGroupOne.length > 0 && (h("div", { class: "list-group-one" }, this.listGroupOne.map(item => (h("div", { class: "item" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: item.icon, label: item.label, shortcut: true, shortcutIcon: item.shortcut, onClick: () => this.onItemClicked(item.label.replace(/\s+/g, '_').toLowerCase()) })))))), this.listGroupTwo.length > 0 && (h("div", { class: "list-group-two" }, this.listGroupTwo.map(item => (h("div", { class: "item" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: item.icon, label: item.label, shortcut: true, shortcutIcon: item.shortcut, onClick: () => this.onItemClicked(item.label.replace(/\s+/g, '_').toLowerCase()) })))))), this.showLogOut && (h("div", { class: "list-group-three" }, h("div", { class: "item" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "assets/logout_button.svg", label: "Log out", shortcut: true, shortcutIcon: "Ctrl + L", onClick: () => this.onItemClicked('log_out') }))))));
         }
     }
     static get is() { return "gb-avatar-dropdown"; }
@@ -101,7 +111,8 @@ export class GbAvatarDropdown {
                 "getter": false,
                 "setter": false,
                 "attribute": "type",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'simple'"
             },
             "text": {
                 "type": "boolean",
@@ -225,12 +236,18 @@ export class GbAvatarDropdown {
                 "reflect": false
             },
             "listGroupOne": {
-                "type": "boolean",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DropdownListGroup[]",
+                    "resolved": "DropdownListGroup[]",
+                    "references": {
+                        "DropdownListGroup": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownListGroup"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -240,35 +257,21 @@ export class GbAvatarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "list-group-one",
-                "reflect": false
+                "defaultValue": "[\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ]"
             },
             "listGroupTwo": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "list-group-two",
-                "reflect": false
-            },
-            "listGroupThree": {
-                "type": "boolean",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DropdownListGroup[]",
+                    "resolved": "DropdownListGroup[]",
+                    "references": {
+                        "DropdownListGroup": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownListGroup"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -278,8 +281,7 @@ export class GbAvatarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "list-group-three",
-                "reflect": false
+                "defaultValue": "[\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ]"
             },
             "color": {
                 "type": "string",

package/dist/collection/components/gb-avatar-dropdown/gb-avatar-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-avatar-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,gBAAgB;IAL7B;QAOU,SAAI,GAAY,KAAK,CAAC;QAItB,cAAS,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAoB;QAC/B,IAAI;QACJ,6BAA6B;QAC7B,+BAA+B;QAC/B,8BAA8B;QAC9B,KAAK;QACL,IAAI;QACJ,8BAA8B;QAC9B,2BAA2B;QAC3B,8BAA8B;QAC9B,KAAK;QACL,IAAI;QACJ,0BAA0B;QAC1B,wBAAwB;QACxB,8BAA8B;QAC9B,KAAK;SACN,CAAC;QAMM,eAAU,GAAY,KAAK,CAAC;KAkNrC;IA5MC,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;QACpB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,IAAY;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,SAAS,CAAC,KAAK;QACb,6BAA6B;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACnE,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;QAE5E,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YACnD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,MAAM,CAAC,CAAC;QACvE,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,wBAAwB;oBACjC,6BAAuB,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,iBAAe,IAAI,CAAC,UAAU;wBAC1F,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ;wBACrC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ;wBAC7C,YAAM,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,iBAAiB,GAAQ,CACrC,CACpB;gBACN,WAAK,KAAK,EAAC,YAAY;oBACrB,WAAK,KAAK,EAAC,MAAM;wBACd,IAAI,CAAC,YAAY,IAAI,CACpB,WAAK,KAAK,EAAC,WAAW;4BACpB,0CAAkC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAiB,CAC9G,CACP;wBACA,IAAI,CAAC,WAAW,IAAI,CACnB,uCACE,IAAI,QACJ,OAAO,EAAC,yBAAyB,EACjC,KAAK,EAAC,cAAc,EACpB,QAAQ,QACR,YAAY,EAAC,OAAO,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,GAChB,CACpC;wBACA,IAAI,CAAC,UAAU,IAAI,CAClB,uCACE,IAAI,QACJ,OAAO,EAAC,0BAA0B,EAClC,KAAK,EAAC,SAAS,EACf,QAAQ,QACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,GACX,CACpC,CACG,CACF,CACF,CACP,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,WAAK,KAAK,EAAC,yBAAyB;oBAClC,6BAAuB,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;wBAChF,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ;wBACrC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ;wBAC7C,YAAM,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,iBAAiB,GAAQ,CACrC,CACpB;gBACL,IAAI,CAAC,SAAS,IAAI,CACjB,WAAK,KAAK,EAAC,OAAO;oBAChB,SAAG,KAAK,EAAC,gBAAgB,sBAAoB;oBAC7C,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,gBAAU,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS;wBAC9D,aAAI,IAAI,CAAC,UAAU,CAAK,CACf,CACZ,CAAC,CACE,CACF,CACP;gBACA,IAAI,CAAC,YAAY,IAAI,CACpB,WAAK,KAAK,EAAC,WAAW;oBACpB,0CAAkC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAiB,CAC9G,CACP;gBACA,IAAI,CAAC,YAAY,IAAI,CACpB,WAAK,KAAK,EAAC,gBAAgB;oBACzB,WAAK,KAAK,EAAC,KAAK;wBACd,uCACE,IAAI,QACJ,OAAO,EAAC,yBAAyB,EACjC,KAAK,EAAC,cAAc,EACpB,QAAQ,QACR,YAAY,EAAC,KAAK,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,GAChB,CAC/B;oBACN,WAAK,KAAK,EAAC,KAAK;wBACd,uCACE,IAAI,QACJ,OAAO,EAAC,yBAAyB,EACjC,KAAK,EAAC,eAAe,EACrB,QAAQ,QACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,GACjB,CAC/B;oBACN,WAAK,KAAK,EAAC,OAAO;wBAChB,uCACE,IAAI,QACJ,OAAO,EAAC,6BAA6B,EACrC,KAAK,EAAC,SAAS,EACf,QAAQ,QACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,GACX,CAC/B,CACF,CACP;gBACA,IAAI,CAAC,YAAY,IAAI,CACpB,WAAK,KAAK,EAAC,gBAAgB;oBACzB,WAAK,KAAK,EAAC,KAAK;wBACd,uCACE,IAAI,QACJ,OAAO,EAAC,6BAA6B,EACrC,KAAK,EAAC,eAAe,EACrB,QAAQ,QACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,GACjB,CAC/B;oBACN,WAAK,KAAK,EAAC,KAAK;wBACd,uCACE,IAAI,QACJ,OAAO,EAAC,uBAAuB,EAC/B,KAAK,EAAC,MAAM,EACZ,QAAQ,QACR,YAAY,EAAC,MAAM,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GACR,CAC/B;oBACN,WAAK,KAAK,EAAC,OAAO;wBAChB,uCACE,IAAI,QACJ,OAAO,EAAC,qBAAqB,EAC7B,KAAK,EAAC,gBAAgB,EACtB,QAAQ,QACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAClB,CAC/B,CACF,CACP;gBACA,IAAI,CAAC,cAAc,IAAI,CACtB,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,WAAK,KAAK,EAAC,KAAK;wBACd,uCACE,IAAI,QACJ,OAAO,EAAC,0BAA0B,EAClC,KAAK,EAAC,SAAS,EACf,QAAQ,QACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,GACX,CAC/B,CACF,CACP,CACG,CACP,CAAC;QACJ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from '@stencil/core';\r\nimport { ColorTypes, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\r\n@Component({\r\n tag: 'gb-avatar-dropdown',\r\n styleUrl: 'gb-avatar-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n @Prop() type: 'simple' \| 'complex';\r\n @Prop() text: boolean = false;\r\n @Prop() showProfile: boolean;\r\n\r\n @Prop() showThemeTab: boolean;\r\n @Prop() showRoles: boolean = false;\r\n @Prop() roles: DropdownRoles[] = [\r\n // {\r\n // badgeLabel: 'Initiator',\r\n // badgeColor: 'information',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Authorizer',\r\n // badgeColor: 'success',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Viewer',\r\n // badgeColor: 'gray',\r\n // badgeType: 'badge_color',\r\n // },\r\n ];\r\n @Prop() showLogOut: boolean;\r\n @Prop() listGroupOne: boolean;\r\n @Prop() listGroupTwo: boolean;\r\n @Prop() listGroupThree: boolean;\r\n @Prop() color: ColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Prop() currentTheme: ThemeTypes;\r\n @Element() el: HTMLElement;\r\n @Event() itemClicked: EventEmitter<string>;\r\n @Event() themeTabClicked: EventEmitter<string>;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n onItemClicked(item: string) {\r\n this.itemClicked.emit(item);\r\n }\r\n\r\n emitTheme(theme) {\r\n // console.log(theme.detail);\r\n this.themeTabClicked.emit(theme);\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n if (slottedInitials) {\r\n slottedInitials.classList.add('text-md-semi-bold');\r\n slottedInitials.classList.add(this.applyColorToInitials() \|\| 'gray');\r\n }\r\n\r\n if (nameInitials) {\r\n nameInitials.classList.add('text-sm-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 render() {\r\n if (this.type === 'simple') {\r\n return (\r\n <div class=\"simple-dropdown\">\r\n <div class=\"profile simple_profile\">\r\n <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n <div class=\"menu-items\">\r\n <div class=\"list\">\r\n {this.showThemeTab && (\r\n <div class=\"theme_tab\">\r\n <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n </div>\r\n )}\r\n {this.showProfile && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/user_profile.svg\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K + P\"\r\n onClick={() => this.onItemClicked('view_profile')}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n {this.showLogOut && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/logout_button.svg\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.onItemClicked('log_out')}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n if (this.type === 'complex') {\r\n return (\r\n <div class=\"complex-dropdown\">\r\n <div class=\"profile complex_profile\">\r\n <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n {this.showRoles && (\r\n <div class=\"roles\">\r\n <p class=\"text-sm-medium\">Available roles</p>\r\n <div class=\"badges\">\r\n {this.roles.map(role => (\r\n <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\r\n <p>{role.badgeLabel}</p>\r\n </gb-badge>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n {this.showThemeTab && (\r\n <div class=\"theme_tab\">\r\n <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n </div>\r\n )}\r\n {this.listGroupOne && (\r\n <div class=\"list-group-one\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/user_profile.svg\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K+P\"\r\n onClick={() => this.onItemClicked('view_profile')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"two\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/book-open-02.svg\"\r\n label=\"Documentation\"\r\n shortcut\r\n shortcutIcon=\"T\"\r\n onClick={() => this.onItemClicked('documentation')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"three\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/customer-support.svg\"\r\n label=\"Support\"\r\n shortcut\r\n shortcutIcon=\"C\"\r\n onClick={() => this.onItemClicked('support')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n {this.listGroupTwo && (\r\n <div class=\"list-group-two\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/configuration_02.svg\"\r\n label=\"Configuration\"\r\n shortcut\r\n shortcutIcon=\"S\"\r\n onClick={() => this.onItemClicked('configuration')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"two\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/user_group.svg\"\r\n label=\"Team\"\r\n shortcut\r\n shortcutIcon=\"K->T\"\r\n onClick={() => this.onItemClicked('team')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n <div class=\"three\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/user_add.svg\"\r\n label=\"Invite Members\"\r\n shortcut\r\n shortcutIcon=\"I\"\r\n onClick={() => this.onItemClicked('invite_members')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n {this.listGroupThree && (\r\n <div class=\"list-group-three\">\r\n <div class=\"one\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/logout_button.svg\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.onItemClicked('log_out')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}"]}
1	+ {"version":3,"file":"gb-avatar-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\r\n@Component({\r\n tag: 'gb-avatar-dropdown',\r\n styleUrl: 'gb-avatar-dropdown.css',\r\n shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n @Prop() type: 'simple' \| 'complex' = 'simple';\r\n @Prop() text: boolean = false;\r\n @Prop() showProfile: boolean;\r\n\r\n @Prop() showThemeTab: boolean;\r\n @Prop() showRoles: boolean = false;\r\n @Prop() roles: DropdownRoles[] = [\r\n // {\r\n // badgeLabel: 'Initiator',\r\n // badgeColor: 'information',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Authorizer',\r\n // badgeColor: 'success',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Viewer',\r\n // badgeColor: 'gray',\r\n // badgeType: 'badge_color',\r\n // },\r\n ];\r\n @Prop() showLogOut: boolean;\r\n @Prop() listGroupOne: DropdownListGroup[] = [\r\n // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n ];\r\n @Prop() listGroupTwo: DropdownListGroup[] = [\r\n // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n ];\r\n @Prop() color: ColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Prop() currentTheme: ThemeTypes;\r\n @Element() el: HTMLElement;\r\n @Event() itemClicked: EventEmitter<string>;\r\n @Event() themeTabClicked: EventEmitter<string>;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n onItemClicked(item: string) {\r\n this.itemClicked.emit(item);\r\n }\r\n\r\n emitTheme(theme) {\r\n this.themeTabClicked.emit(theme);\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n if (slottedInitials) {\r\n slottedInitials.classList.add('text-md-semi-bold');\r\n slottedInitials.classList.add(this.applyColorToInitials() \|\| 'gray');\r\n }\r\n\r\n if (nameInitials) {\r\n nameInitials.classList.add('text-sm-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 render() {\r\n if (this.type === 'simple') {\r\n return (\r\n <div class=\"simple-dropdown\">\r\n <div class=\"profile\">\r\n <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n <div class=\"menu-items\">\r\n <div class=\"list\">\r\n {this.showThemeTab && (\r\n <div class=\"theme_tab\">\r\n <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n </div>\r\n )}\r\n {this.showProfile && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/user_profile.svg\"\r\n label=\"View Profile\"\r\n shortcut\r\n shortcutIcon=\"K + P\"\r\n onClick={() => this.onItemClicked('view_profile')}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n {this.showLogOut && (\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/logout_button.svg\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"L\"\r\n onClick={() => this.onItemClicked('log_out')}\r\n ></gb-dropdown-items-with-shortcut>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n if (this.type === 'complex') {\r\n return (\r\n <div class=\"complex-dropdown\">\r\n <div class=\"profile\">\r\n <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n <slot name=\"name\" slot=\"name\"></slot>\r\n <slot name=\"initials\" slot=\"initials\"></slot>\r\n <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n </gb-avatar-label-group>\r\n </div>\r\n {this.showRoles && (\r\n <div class=\"roles\">\r\n <p class=\"text-sm-medium\">Available roles</p>\r\n <div class=\"badges\">\r\n {this.roles.map(role => (\r\n <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\r\n <p>{role.badgeLabel}</p>\r\n </gb-badge>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n {this.showThemeTab && (\r\n <div class=\"theme_tab\">\r\n <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n </div>\r\n )}\r\n {this.listGroupOne.length > 0 && (\r\n <div class=\"list-group-one\">\r\n {this.listGroupOne.map(item => (\r\n <div class=\"item\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc={item.icon}\r\n label={item.label}\r\n shortcut\r\n shortcutIcon={item.shortcut}\r\n onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n {this.listGroupTwo.length > 0 && (\r\n <div class=\"list-group-two\">\r\n {this.listGroupTwo.map(item => (\r\n <div class=\"item\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc={item.icon}\r\n label={item.label}\r\n shortcut\r\n shortcutIcon={item.shortcut}\r\n onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n {this.showLogOut && (\r\n <div class=\"list-group-three\">\r\n <div class=\"item\">\r\n <gb-dropdown-items-with-shortcut\r\n icon\r\n iconSrc=\"assets/logout_button.svg\"\r\n label=\"Log out\"\r\n shortcut\r\n shortcutIcon=\"Ctrl + L\"\r\n onClick={() => this.onItemClicked('log_out')}\r\n ></gb-dropdown-items-with-shortcut>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n"]}

package/dist/collection/components/gb-avatar-label-group/gb-avatar-label-group.css CHANGED Viewed

@@ -2733,7 +2733,7 @@
 :host{
-    width: fit-content;
+    width: 100%;
     height: fit-content;
 }
@@ -2744,10 +2744,11 @@
 }
 .label{
-    width: fit-content;
+    width: 100%;
     display: flex;
     padding: var(--spacing-none);
     border-radius: var(--rounded-none);
+    overflow: hidden;
 }
 /* Label Sizes */
@@ -2772,12 +2773,18 @@
     flex-direction: column;
     justify-content: center;
     gap: var(--spacing-2);
+    flex: 1;
+    overflow: hidden;
 }
 ::slotted([slot="name"]){
     color: var(--color-text, #4B5565);
+    width: 100%;
 }
 ::slotted([slot="supporting_text"]){
     color: var(--color-text-subtle, #697586);
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }