globuswebcomponents 1.3.0 → 1.3.2

package/dist/collection/components/gb-top-bar/gb-top-bar.js

@@ -0,0 +1,490 @@
+import { getAssetPath, h } from "@stencil/core";
+export class GbTopBar {
+    constructor() {
+        this.category = undefined;
+        this.firstTabIcon = '';
+        this.secondTabIcon = '';
+        this.thirdTabIcon = '';
+        this.fourthTabIcon = '';
+        this.fifthTabIcon = '';
+        this.sixthTabIcon = '';
+        this.seventhTabIcon = '';
+        this.firstTabLabel = '';
+        this.secondTabLabel = '';
+        this.thirdTabLabel = '';
+        this.fourthTabLabel = '';
+        this.fifthTabLabel = '';
+        this.sixthTabLabel = '';
+        this.seventhTabLabel = '';
+        this.firstTabIconOnly = false;
+        this.secondTabIconOnly = false;
+        this.thirdTabIconOnly = false;
+        this.fourthTabIconOnly = false;
+        this.fifthTabIconOnly = false;
+        this.sixthTabIconOnly = false;
+        this.seventhTabIconOnly = false;
+        this.activeIndex = 0;
+    }
+    onTabItemClicked(index) {
+        this.activeIndex = index;
+        this.topBarItemClicked.emit(index);
+    }
+    render() {
+        const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
+        return (h("div", { key: 'd3b0314c7c5a1173beb135a7e7827b8154238fc7', class: `top_bar_div ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '200516b1a593216099ec2a30a924f411507e607b', class: "pattern" }, h("img", { key: 'ad89725150f65d29ee61b2c78fb5ce276c1c10c8', src: patternSrc, alt: "" }))), h("div", { key: 'dd5874774cce280eeabc069dc66f860fc5432de7', class: "top_bar_content" }, h("div", { key: 'cd10d197d211f80e262ccdbd46ab0ae78cb19899', class: "content" }, this.firstTabLabel && (h("gb-top-bar-item", { key: '7a4daa6b66b1d65eb6add52bd827411344d2dc6d', state: this.activeIndex === 0 ? 'active' : 'default', "icon-only": this.firstTabIconOnly, category: this.category, icon: this.firstTabIcon, label: this.firstTabLabel, onClick: () => this.onTabItemClicked(0) })), this.secondTabLabel && (h("gb-top-bar-item", { key: 'a3338869ec8751f0b089d20cf0f4c67d6a9b8e5e', state: this.activeIndex === 1 ? 'active' : 'default', "icon-only": this.secondTabIconOnly, category: this.category, icon: this.secondTabIcon, label: this.secondTabLabel, onClick: () => this.onTabItemClicked(1) })), this.thirdTabLabel && (h("gb-top-bar-item", { key: '3e41efa5b25b0ae5f2c333de004c40de61dbb081', state: this.activeIndex === 2 ? 'active' : 'default', "icon-only": this.thirdTabIconOnly, category: this.category, icon: this.thirdTabIcon, label: this.thirdTabLabel, onClick: () => this.onTabItemClicked(2) })), this.fourthTabLabel && (h("gb-top-bar-item", { key: '7fa62a025c84f9283776feb7a36d49d854cde1bf', state: this.activeIndex === 3 ? 'active' : 'default', "icon-only": this.fourthTabIconOnly, category: this.category, icon: this.fourthTabIcon, label: this.fourthTabLabel, onClick: () => this.onTabItemClicked(3) })), this.fifthTabLabel && (h("gb-top-bar-item", { key: '7e7c421aaa31d9cd60c14117bd87968801090f1a', state: this.activeIndex === 4 ? 'active' : 'default', "icon-only": this.fifthTabIconOnly, category: this.category, icon: this.fifthTabIcon, label: this.fifthTabLabel, onClick: () => this.onTabItemClicked(4) })), this.sixthTabLabel && (h("gb-top-bar-item", { key: '1e419316f1da79e12c2723c0541d1a34f12ed9aa', state: this.activeIndex === 5 ? 'active' : 'default', "icon-only": this.sixthTabIconOnly, category: this.category, icon: this.sixthTabIcon, label: this.sixthTabLabel, onClick: () => this.onTabItemClicked(5) })), this.seventhTabLabel && (h("gb-top-bar-item", { key: '9ec5ac6297f8dc223dc6d94460c950b06e9072f7', state: this.activeIndex === 6 ? 'active' : 'default', "icon-only": this.seventhTabIconOnly, category: this.category, icon: this.seventhTabIcon, label: this.seventhTabLabel, onClick: () => this.onTabItemClicked(6) }))))));
+    }
+    static get is() { return "gb-top-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-top-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-top-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralBackgroundCategories",
+                    "resolved": "\"colored_background\" | \"plain_background\"",
+                    "references": {
+                        "GeneralBackgroundCategories": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralBackgroundCategories"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "category",
+                "reflect": false
+            },
+            "firstTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "second-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "thirdTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "third-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fourthTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fourth-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fifthTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fifth-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "sixthTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sixth-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "seventhTabIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "seventh-tab-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "firstTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "second-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "thirdTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "third-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fourthTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fourth-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fifthTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fifth-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "sixthTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sixth-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "seventhTabLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "seventh-tab-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "firstTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "secondTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "second-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "thirdTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "third-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fourthTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fourth-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fifthTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fifth-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "sixthTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sixth-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "seventhTabIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "seventh-tab-icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "activeIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-index",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "topBarItemClicked",
+                "name": "topBarItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=gb-top-bar.js.map

package/dist/collection/components/gb-top-bar/gb-top-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-top-bar.js","sourceRoot":"","sources":["../../../src/components/gb-top-bar/gb-top-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-top-bar',\r\n  styleUrl: 'gb-top-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbTopBar {\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() firstTabIcon: string = '';\r\n  @Prop() secondTabIcon: string = '';\r\n  @Prop() thirdTabIcon: string = '';\r\n  @Prop() fourthTabIcon: string = '';\r\n  @Prop() fifthTabIcon: string = '';\r\n  @Prop() sixthTabIcon: string = '';\r\n  @Prop() seventhTabIcon: string = '';\r\n  @Prop() firstTabLabel: string = '';\r\n  @Prop() secondTabLabel: string = '';\r\n  @Prop() thirdTabLabel: string = '';\r\n  @Prop() fourthTabLabel: string = '';\r\n  @Prop() fifthTabLabel: string = '';\r\n  @Prop() sixthTabLabel: string = '';\r\n  @Prop() seventhTabLabel: string = '';\r\n  @Prop() firstTabIconOnly: boolean = false;\r\n  @Prop() secondTabIconOnly: boolean = false;\r\n  @Prop() thirdTabIconOnly: boolean = false;\r\n  @Prop() fourthTabIconOnly: boolean = false;\r\n  @Prop() fifthTabIconOnly: boolean = false;\r\n  @Prop() sixthTabIconOnly: boolean = false;\r\n  @Prop() seventhTabIconOnly: boolean = false;\r\n  @Prop({ mutable: true }) activeIndex: number = 0;\r\n  @Event() topBarItemClicked: EventEmitter<number>;\r\n\r\n  onTabItemClicked(index: number) {\r\n    this.activeIndex = index;\r\n    this.topBarItemClicked.emit(index);\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n    return (\r\n      <div class={`top_bar_div ${this.category}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"top_bar_content\">\r\n          <div class=\"content\">\r\n            {this.firstTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 0 ? 'active' : 'default'}\r\n                icon-only={this.firstTabIconOnly}\r\n                category={this.category}\r\n                icon={this.firstTabIcon}\r\n                label={this.firstTabLabel}\r\n                onClick={() => this.onTabItemClicked(0)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n            {this.secondTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 1 ? 'active' : 'default'}\r\n                icon-only={this.secondTabIconOnly}\r\n                category={this.category}\r\n                icon={this.secondTabIcon}\r\n                label={this.secondTabLabel}\r\n                onClick={() => this.onTabItemClicked(1)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n            {this.thirdTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 2 ? 'active' : 'default'}\r\n                icon-only={this.thirdTabIconOnly}\r\n                category={this.category}\r\n                icon={this.thirdTabIcon}\r\n                label={this.thirdTabLabel}\r\n                onClick={() => this.onTabItemClicked(2)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n            {this.fourthTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 3 ? 'active' : 'default'}\r\n                icon-only={this.fourthTabIconOnly}\r\n                category={this.category}\r\n                icon={this.fourthTabIcon}\r\n                label={this.fourthTabLabel}\r\n                onClick={() => this.onTabItemClicked(3)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n            {this.fifthTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 4 ? 'active' : 'default'}\r\n                icon-only={this.fifthTabIconOnly}\r\n                category={this.category}\r\n                icon={this.fifthTabIcon}\r\n                label={this.fifthTabLabel}\r\n                onClick={() => this.onTabItemClicked(4)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n            {this.sixthTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 5 ? 'active' : 'default'}\r\n                icon-only={this.sixthTabIconOnly}\r\n                category={this.category}\r\n                icon={this.sixthTabIcon}\r\n                label={this.sixthTabLabel}\r\n                onClick={() => this.onTabItemClicked(5)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n            {this.seventhTabLabel && (\r\n              <gb-top-bar-item\r\n                state={this.activeIndex === 6 ? 'active' : 'default'}\r\n                icon-only={this.seventhTabIconOnly}\r\n                category={this.category}\r\n                icon={this.seventhTabIcon}\r\n                label={this.seventhTabLabel}\r\n                onClick={() => this.onTabItemClicked(6)}\r\n              ></gb-top-bar-item>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}