globuswebcomponents 0.2.6 → 0.2.9

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: '6a5339068b173f33140d8b61b6f29c9bd6af49aa', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: 'ee25af2c41a75d699e256ef08b371fb3a1008f6b', class: `in_progress_div ${this.heightSize}` }, h("div", { key: '87ffe8301893c1a07ee2ee892de7aed3d1015c26', class: "file_icon" }), h("div", { key: 'ed7858dc48924d00ce2db28c1608310c5ff5e784', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'a01f5d20f49884c4b2b55322a194badd6af42e47', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '88d6b0a85bdcfed5f0550ad4a48dc6a1b4f08cbb', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '96b234d3496cc8a31d6393b0b49ea9c1299bbaaa', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '3c3d50211b0574cefdfaa3016158f5e1dad18aa0', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: 'c70b9449076972bee54c98febd6c89d92eb5d7d6', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'dfcbe9a556963e24a615c8f8da8344dcadc9e643', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '3a6f68218dcd1509ffab13a7a7fae410fb38fc00', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: 'e6e6eaa4093f41f57fbf7cdee40f26f0a5c99982', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: 'dbea30b859063ee5aba273621b25b0c672baab9a', class: `complete ${this.heightSize}` }, h("div", { key: 'c8e2506da0a713c1b962f6904efd742bbf5fc7ec', class: "file_icon" }), h("div", { key: '7bac364b33c1a79dabdc827ceef19ea13f228070', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '3a68a1755e7d5f49312518362e9d482e59f77905', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'f03a179d7b186da6b56148d946778930f81185e1', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'f35d08b87a225dd152b8f49fb09446452fd71ade', 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: '7e256667a1beaa892c8655dd4c83087479ce1c26', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'a7b7c47f6c908ce458f199318e4d6e7ece2ac1bd', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'e9f14e778d1d2a886dd618797a6f680dc1cf99ba', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '49c0a74059a9ef01b96730b87af362127f9238b9' }, "Clear"))))))), this.state === 'error' && (h("div", { key: 'ef369cbdfb0c3ab654bbaff1dd6f44fb5ae427c9', class: `error ${this.heightSize}` }, h("div", { key: '012663b656b4b628d5f10ef57feb66ea6e00d814', class: "file_icon" }), h("div", { key: 'cd1bd51359d8045ee14c5bbde3eeddc34399dfde', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'b9e50573687f402b8430a44eeb7b2767dfd3a1a9', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '09412c3c849971b8f930a091a24101dfafc39410', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: 'b2985746893192ecea1b673ad6ed18854944f254', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: '1ff18012188093e1e19085c7093bf1a1406ca3d3' }, "Try again")), h("gb-button", { key: 'bd14989c836ac8fd1361d312f219944bc2e9fe54', 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: 'ce6bf71bcc8b339194d8db805ef7c3b239537cdf', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '89ec141db93ef34909cb440598fc2b740ba237d0', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: '8d6d4c5e8ff7374d52772bdcb888be4a4123521e', class: "btns" }, h("test-button", { key: '1476b77b0e3dd4f92a0d189a97b94b86a423a8ea', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '87c11f576a152d60a87461a18140ec9de61fbac8' }, "Clear")), h("div", { key: 'bad0d16c3527b7e89cc7b2b75ac55a8848f6488e', class: "btn" }, h("test-button", { key: '58c9dd426aa72b11513d6fd2675877464f5a3d1e', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: 'fff8e0533dd6418e831282f3a7a18c918f803315' }, "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\"",
+                    "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"]}