globuswebcomponents 0.6.3 → 0.6.4

package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.js

@@ -0,0 +1,151 @@
+import { h, Fragment } from "@stencil/core";
+import { StateEnum } from "../../models/reusableModels";
+export class GbFileUploadItemBase {
+    constructor() {
+        this.icon = undefined;
+        this.state = undefined;
+        this.heightSize = 'md';
+        this.fileType = undefined;
+        this.buttonState = StateEnum.Default;
+    }
+    returnIcons() {
+        switch (this.icon) {
+            case 'outline':
+                switch (this.fileType) {
+                    case 'pdf':
+                        return (h("svg", { width: "40", height: "41", viewBox: "0 0 40 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z", fill: "white", stroke: "#CDD5DF", "stroke-width": "1.5" }), h("path", { d: "M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5", stroke: "#CDD5DF", "stroke-width": "1.5" }), h("rect", { x: "0.5", y: "18", width: "27", height: "17", rx: "2", fill: "#E21B2E" }), h("path", { d: "M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z", fill: "white" })));
+                }
+        }
+    }
+    render() {
+        return (h("div", { key: 'f117145bc32118318efafa5b1d31a5bfddc30c0d', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: '5abb0fe1f2b665af65deeccff4aff44e05ff2fa2', class: `in_progress_div ${this.heightSize}` }, h("div", { key: 'dbbbe03446b2db8eeb21e1d5254e26bc74ec2594', class: "file_icon" }), h("div", { key: '02c33a322ccab3c5a447f9dfd7043be7bde1cfae', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '380fe97b42f0f7f2a37159758e2a95f0ae6c0fdf', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '5c2f25f4956c3323dfa07991533fd2c1ed0bdbb1', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'a25eb6a63203562c01b4c85fec6c7a24d2652aa5', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '0c2c72197d8b1b47061b54bb07b8d7a3db0314a0', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: 'd3dc96fff352ebcea9c015da41dbf5e41db40df8', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '4068b0b2303da1046856e614a4513b08b5c2300c', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'fe816e1950f1fb22d8d50a4f2de9b8099ab72b21', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: 'e1da0fc1f386ad8cc2dc12f4d1fb0d5b6538e107', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: '78c8d2fb74571c7e5b72e4ea44432758dd2a97e8', class: `complete ${this.heightSize}` }, h("div", { key: 'fb3458c21c01e7d5a11a8f77dd0cdb2f61b80576', class: "file_icon" }), h("div", { key: '1d36ddf38528ce2f662dbdcee06e17f5dcc0dd9c', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '48458746fc3d80f848bcfd6391dfff3e2e0cdfc2', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'd5656829bd41a2e30fe59cc92b9bf1acb0f7459b', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'fe353f40f403179113ab8adf8d9e3881f65b5696', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '33dd47687cc75d3e696a6954c2c627100d81b1c6', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '76659ee68738ef6886c578bc575669658c11b733', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'de10e6372f5c5dca12d4b44f3c29cff5c01e845c', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '6d0fa29d867c7da492145304e7b60e3ff41152ad' }, "Clear"))))))), this.state === 'error' && (h("div", { key: 'f4b91aec26698075e32d8f5e125c84c17781fe7d', class: `error ${this.heightSize}` }, h("div", { key: 'db4cd61e640d9fa51d6bf8c84de64e9a26009899', class: "file_icon" }), h("div", { key: 'f6b8ae042fd023dfde86d17d368328437cd3fb74', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '440daac4dc96ae036e08bc4d28ee21dd3f07b48c', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '0ed1afc00978f1620f6f701787772001197d48ac', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: 'bab6ab6db6a4a4fc4ca2423ddfed57ced7631a28', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: '9d591820e80bafb388d3d28f4373fcc90b6fe389' }, "Try again")), h("gb-button", { key: '2bd8d0f5108235caf6a4eb7056f3e3a58d772096', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '318ae0daaa805385c30d8069064ff733372b1498', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'd2951adb3ffbfb80718c17061632e985338182a1', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: '8b586626c78119c0bc32fb1d21e9e39996ca001a', class: "btns" }, h("test-button", { key: '0b54212e440a5a4d27a44c84087c9c354bd51c34', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'ad6c744b0e4baccbcc5a64340c3e2eedb0fd2280' }, "Clear")), h("div", { key: '73bbca0dfebdbd7740941eada7dbffb283897335', class: "btn" }, h("test-button", { key: '7aa1b74b7a370e20aadbc05ed89bcbcd942e7a95', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: 'a38cb26b54ed6572b6a05cbaa0af884e9b7e4019' }, "Try again")))))))))));
+    }
+    static get is() { return "gb-file-upload-item-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-file-upload-item-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-file-upload-item-base.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FileUploadIconType",
+                    "resolved": "\"icon\" | \"outline\"",
+                    "references": {
+                        "FileUploadIconType": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::FileUploadIconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FileUploadStates",
+                    "resolved": "\"complete\" | \"default\" | \"disabled\" | \"error\" | \"hover\" | \"in_progress\"",
+                    "references": {
+                        "FileUploadStates": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::FileUploadStates"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "heightSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "height-size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "fileType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pdf' | 'png' | 'jpg' | 'doc' | 'mp4'",
+                    "resolved": "\"doc\" | \"jpg\" | \"mp4\" | \"pdf\" | \"png\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "file-type",
+                "reflect": false
+            },
+            "buttonState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-state",
+                "reflect": false,
+                "defaultValue": "StateEnum.Default"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-file-upload-item-base.js.map

package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-file-upload-item-base.js","sourceRoot":"","sources":["../../../src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Fragment } from '@stencil/core';\r\nimport { FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-file-upload-item-base',\r\n  styleUrl: 'gb-file-upload-item-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n  @Prop() icon: FileUploadIconType;\r\n  @Prop() state: FileUploadStates;\r\n  @Prop() heightSize: GeneralSizes = 'md';\r\n  @Prop() fileType: 'pdf' | 'png' | 'jpg' | 'doc' | 'mp4';\r\n  @Prop() buttonState: StateEnum = StateEnum.Default;\r\n\r\n  returnIcons() {\r\n    switch (this.icon) {\r\n      case 'outline':\r\n        switch (this.fileType) {\r\n          case 'pdf':\r\n            return (\r\n              <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z\"\r\n                  fill=\"white\"\r\n                  stroke=\"#CDD5DF\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path d=\"M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" />\r\n                <rect x=\"0.5\" y=\"18\" width=\"27\" height=\"17\" rx=\"2\" fill=\"#E21B2E\" />\r\n                <path\r\n                  d=\"M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z\"\r\n                  fill=\"white\"\r\n                />\r\n              </svg>\r\n            );\r\n        }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n        {this.state === 'in_progress' && (\r\n          <div class={`in_progress_div ${this.heightSize}`}>\r\n            <div class=\"file_icon\"></div>\r\n            <div class=\"in_progress_content\">\r\n              {this.heightSize === 'md' && (\r\n                <>\r\n                  <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n                  <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n                  <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n                </>\r\n              )}\r\n              {this.heightSize === 'lg' && (\r\n                <>\r\n                  <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n                  <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n                  <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n                </>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.state === 'complete' && (\r\n          <div class={`complete ${this.heightSize}`}>\r\n            <div class=\"file_icon\"></div>\r\n            <div class={`complete_content ${this.heightSize}`}>\r\n              {this.heightSize === 'md' && (\r\n                <>\r\n                  <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n                  <test-button \r\n                  size=\"sm\" \r\n                  hierarchy=\"tertiary_gray\" \r\n                  icon=\"only\" \r\n                  icon-leading={true} \r\n                  icon-leading-swap=\"delete-02\" \r\n                  class=\"delete_button\"\r\n                  ></test-button>\r\n                </>\r\n              )}\r\n              {this.heightSize === 'lg' && (\r\n                <>\r\n                  <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n                  <test-button size=\"sm\" \r\n                  hierarchy=\"tertiary_gray\" \r\n                  icon=\"default\" \r\n                  icon-leading={true} \r\n                  icon-leading-swap=\"delete-02\">\r\n                    <p>Clear</p>\r\n                  </test-button>\r\n                </>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.state === 'error' && (\r\n          <div class={`error ${this.heightSize}`}>\r\n            <div class=\"file_icon\"></div>\r\n            <div class=\"error_content\">\r\n              {this.heightSize === 'md' && (\r\n                <>\r\n                  <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n                  <gb-button \r\n                  size=\"sm\" \r\n                  hierarchy=\"link_color\" \r\n                  icon={StateEnum.Default} \r\n                  destructive={true}>\r\n                    <p>Try again</p>\r\n                  </gb-button>\r\n                  <gb-button \r\n                  size=\"sm\" \r\n                  hierarchy=\"tertiary_gray\" \r\n                  icon=\"only\" destructive={true} \r\n                  icon-leading={true} \r\n                  icon-leading-swap=\"delete-02\"\r\n                  class=\"delete_button\"\r\n                  ></gb-button>\r\n                </>\r\n              )}\r\n              {this.heightSize === 'lg' && (\r\n                <>\r\n                  <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n                  <div class=\"btns\">\r\n                    <test-button size=\"sm\" \r\n                    hierarchy=\"tertiary_gray\" \r\n                    icon=\"default\" \r\n                    destructive={true} \r\n                    icon-leading={true} \r\n                    icon-leading-swap=\"delete-02\">\r\n                      <p>Clear</p>\r\n                    </test-button>\r\n                    <div class=\"btn\">\r\n                      <test-button \r\n                      size=\"sm\" \r\n                      hierarchy=\"link_color\" \r\n                      icon={StateEnum.Default} \r\n                      destructive={true} \r\n                      class=\"btn\">\r\n                        <p>Try again</p>\r\n                      </test-button>\r\n                    </div>\r\n                  </div>\r\n                </>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,29 @@
+.header_div{
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);
+    background: var(--color-surface, #FFFFFF);
+}
+
+.content{
+    display: flex;
+    height: 4.5rem;
+    padding: 0rem 2rem;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+}
+
+.inner_content{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-4);
+    flex: 1 0 0;
+}
+
+.action{
+    display: flex;
+    gap: var(--spacing-2);
+}

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

@@ -0,0 +1,200 @@
+import { getAssetPath, h } from "@stencil/core";
+import { StateEnum } from "../../models/reusableModels";
+export class GbHeader {
+    constructor() {
+        this.state = undefined;
+        this.showIndicator = false;
+        this.text = false;
+        this.placeholder = false;
+        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 initials = this.el.querySelector("[slot='initials']");
+        if (initials) {
+            initials.classList.add('text-md-semi-bold');
+            initials.classList.add(this.applyColorToInitials());
+        }
+    }
+    async onNavBarItemClicked(index) {
+        // console.log('nav-bar-item clicked');
+        this.navBarItemClicked.emit(index);
+        // console.log(index);
+    }
+    render() {
+        const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
+        const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
+        return (h("div", { key: '498f89fa79aa9726db6937b6e0fcc0c84b536b55', class: `header_div` }, h("div", { key: '910b340b6092907dc9f6a3c34a5fb1e5f00c9801', class: "content" }, h("div", { key: '1092c8d8c93228a4484a919d40e39e9aa3dd9158', class: "inner_content" }, h("div", { key: '6028979ae0bb3abe2a37254fa5d9730e33e26439', class: `action` }, h("gb-header-icon", { key: '7a83f22d95ddb3b6801051e314800617ea6af5b9', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked(0) }), h("gb-header-icon", { key: '1b78c89b90d8e7a163b555f848621d2e5cc232e0', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked(1) })), h("gb-avatar", { key: '7b98eb12ee5fddf807de9e870a149538d051e3c2', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, onClick: () => this.onNavBarItemClicked(2) }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
+    }
+    static get is() { return "gb-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "showIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-indicator",
+                "reflect": false,
+                "defaultValue": "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"
+            },
+            "placeholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "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 events() {
+        return [{
+                "method": "navBarItemClicked",
+                "name": "navBarItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "onNavBarItemClicked": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAoB,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAO1E,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;;IAMpC,oBAAoB;QAClB,QAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,MAAM,CAAC,CAAC,OAAO,MAAM,CAAC;YAC3B,KAAK,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC;YAC/B,KAAK,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC;YAC7B,KAAK,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,mBAAmB,CAAC,KAAa;QACrC,uCAAuC;QACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,sBAAsB;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAEvE,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,eAAe;oBACxB,4DAAK,KAAK,EAAE,QAAQ;wBAClB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAmB;wBAC1H,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,mBAAmB,oBAAkB,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAmB,CAC3J;oBACN,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAC/H,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1F,CACR,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: AvatarColorTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\r\n\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 initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async onNavBarItemClicked(index: number) {\r\n    // console.log('nav-bar-item clicked');\r\n    this.navBarItemClicked.emit(index);\r\n    // console.log(index);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked(0)}></gb-header-icon>\r\n              <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator} onClick={() => this.onNavBarItemClicked(1)}></gb-header-icon>\r\n            </div>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder} color={this.color} onClick={() => this.onNavBarItemClicked(2)}>\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}