globuswebcomponents 0.6.3 → 0.6.4

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

@@ -0,0 +1,258 @@
+import { h } from "@stencil/core";
+export class GbAvatarDropdown {
+    constructor() {
+        this.type = undefined;
+        this.text = false;
+        this.showProfile = undefined;
+        this.showDarkTheme = undefined;
+        this.showLogOut = undefined;
+        this.listGroupOne = undefined;
+        this.listGroupTwo = undefined;
+        this.listGroupThree = undefined;
+        this.color = undefined;
+    }
+    applyColorToInitials() {
+        switch (this.color) {
+            case 'gray': return 'gray';
+            case 'blue': return 'blue';
+            case 'cyan': return 'cyan';
+            case 'pink': return 'pink';
+            case 'purple': return 'purple';
+            case 'green': return 'green';
+            case 'yellow': return 'yellow';
+        }
+    }
+    componentDidLoad() {
+        const slottedInitials = this.el.querySelector('[slot="initials"]');
+        if (slottedInitials) {
+            slottedInitials.classList.add('text-md-semi-bold');
+            slottedInitials.classList.add(this.applyColorToInitials());
+        }
+    }
+    async viewProfileClicked() { }
+    async logoutClicked() { }
+    render() {
+        if (this.type === 'simple') {
+            return (h("div", { class: "simple-dropdown" }, h("div", { class: "profile" }, h("gb-avatar-label-group", { size: "md", text: this.text, color: this.color }, h("slot", { name: "name", slot: "name" }), !this.text ? h("slot", { name: "image", slot: "image" }) : h("slot", { name: "initials", slot: "initials" }), h("slot", { name: "supporting_text", slot: "supporting_text" }))), h("div", { class: "menu-items" }, h("div", { class: "list" }, this.showProfile && (h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "user_profile", label: "View Profile", shortcut: true, shortcutIcon: "K + P", onClick: () => this.viewProfileClicked() })), this.showDarkTheme && h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "dark_theme", label: "Dark Theme", shortcut: true, shortcutIcon: "T" }), this.showLogOut && (h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "logout_button", label: "Log out", shortcut: true, shortcutIcon: "L", onClick: () => this.logoutClicked() }))))));
+        }
+        if (this.type === 'complex') {
+            return (h("div", { class: "complex-dropdown" }, h("div", { class: "profile" }, h("gb-avatar-label-group", { size: "md", class: "label_group", text: this.text, color: this.color }, h("slot", { name: "name", slot: "name" }), !this.text ? h("slot", { name: "image", slot: "image" }) : h("slot", { name: "initials", slot: "initials" }), h("slot", { name: "supporting_text", slot: "supporting_text" }))), this.listGroupOne && (h("div", { class: "list-group-one" }, h("div", { class: "one" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "user_profile", label: "View Profile", shortcut: true, shortcutIcon: "K+P", onClick: () => this.viewProfileClicked() })), h("div", { class: "two" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "dark_theme", label: "Dark Theme", shortcut: true, shortcutIcon: "T" })))), this.listGroupTwo && (h("div", { class: "list-group-two" }, h("div", { class: "one" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "configuration_02", label: "Configuration", shortcut: true, shortcutIcon: "S" })), h("div", { class: "two" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "user_group", label: "Team", shortcut: true, shortcutIcon: "K->T" })), h("div", { class: "three" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "user_add", label: "Invite Members", shortcut: true, shortcutIcon: "I" })))), this.listGroupThree && (h("div", { class: "list-group-three" }, h("div", { class: "one" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: "logout_button", label: "Log out", shortcut: true, shortcutIcon: "L", onClick: () => this.logoutClicked() }))))));
+        }
+    }
+    static get is() { return "gb-avatar-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-avatar-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-avatar-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'simple' | 'complex'",
+                    "resolved": "\"complex\" | \"simple\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "text": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showProfile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-profile",
+                "reflect": false
+            },
+            "showDarkTheme": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-dark-theme",
+                "reflect": false
+            },
+            "showLogOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-log-out",
+                "reflect": false
+            },
+            "listGroupOne": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "list-group-one",
+                "reflect": false
+            },
+            "listGroupTwo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "list-group-two",
+                "reflect": false
+            },
+            "listGroupThree": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "list-group-three",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarColorTypes",
+                    "resolved": "\"blue\" | \"cyan\" | \"gray\" | \"green\" | \"pink\" | \"purple\" | \"yellow\"",
+                    "references": {
+                        "AvatarColorTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::AvatarColorTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "viewProfileClicked": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "logoutClicked": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-avatar-dropdown.js.map

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

@@ -0,0 +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, Method, Prop, h} from '@stencil/core';\r\nimport { AvatarColorTypes } from '../../models/reusableModels';\r\n\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  @Prop() showDarkTheme: boolean;\r\n  @Prop() showLogOut: boolean;\r\n  @Prop() listGroupOne: boolean;\r\n  @Prop() listGroupTwo: boolean;\r\n  @Prop() listGroupThree: boolean;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Element() el: HTMLElement;\r\n\r\n  applyColorToInitials() {\r\n        switch(this.color) {\r\n            case 'gray': return 'gray';\r\n            case 'blue': return 'blue';\r\n            case 'cyan': return 'cyan';\r\n            case 'pink': return 'pink';\r\n            case 'purple': return 'purple';\r\n            case 'green': return 'green';\r\n            case 'yellow': return 'yellow';\r\n        }\r\n    }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-md-semi-bold');\r\n      slottedInitials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async viewProfileClicked() {}\r\n\r\n  @Method()\r\n  async logoutClicked() {}\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={this.text} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <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.showProfile && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"user_profile\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K + P\"\r\n                  onClick={() => this.viewProfileClicked()}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showDarkTheme && <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\"></gb-dropdown-items-with-shortcut>}\r\n              {this.showLogOut && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"logout_button\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.logoutClicked()}\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={this.text} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <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.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=\"user_profile\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K+P\"\r\n                  onClick={() => this.viewProfileClicked()}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut icon iconSrc=\"dark_theme\" label=\"Dark Theme\" shortcut shortcutIcon=\"T\"></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 icon iconSrc=\"configuration_02\" label=\"Configuration\" shortcut shortcutIcon=\"S\"></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut icon iconSrc=\"user_group\" label=\"Team\" shortcut shortcutIcon=\"K->T\"></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut icon iconSrc=\"user_add\" label=\"Invite Members\" shortcut shortcutIcon=\"I\"></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=\"logout_button\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.logoutClicked()}\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}"]}