globuswebcomponents 0.3.5 → 0.3.7

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js

@@ -0,0 +1,213 @@
+import { h } from "@stencil/core";
+export class GbTabButtonBase {
+    constructor() {
+        this.current = false;
+        this.size = undefined;
+        this.fullWidth = false;
+        this.badge = false;
+        this.type = undefined;
+        this.tabName = '';
+    }
+    getTextClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'text-sm-medium';
+            case 'md':
+                return 'text-md-medium';
+        }
+    }
+    getCurrentTextClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'text-sm-semi-bold';
+            case 'md':
+                return 'text-md-semi-bold';
+        }
+    }
+    getCountTextClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'text-xs-medium';
+            case 'md':
+                return 'text-sm-medium';
+        }
+    }
+    componentDidLoad() {
+        const tabName = this.el.querySelector('[slot="name"]');
+        const tabCount = this.el.querySelector('[slot="count"]');
+        if (this.current) {
+            tabName.classList.add(this.getCurrentTextClasses());
+        }
+        else {
+            tabName.classList.add(this.getTextClasses());
+        }
+        if (tabCount) {
+            tabCount.classList.add(this.getCountTextClasses());
+        }
+    }
+    handleClick() {
+        this.tabClicked.emit();
+    }
+    render() {
+        return (h("div", { key: '01114b4c8c9eb3b7505fae097ea76a5058409341', class: `tab_button_div ${this.type}
+      ${this.current ? 'current' : ''} 
+      ${this.fullWidth ? 'full_width' : ''} 
+      ${this.size}`, onClick: () => this.handleClick() }, h("p", { key: 'a429311fde724b211376cb64c19a92466e374391', class: `${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: 'ef46b6c4b259a91be630ea96fb1250ab3e1c3872', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary' ? 'information' :
+                this.current && this.type === 'underline' ? 'information' :
+                    this.current && this.type === 'line' ? 'information' : 'gray' }, h("slot", { key: '8b676cdf7c61a529dda147002815e13fb7298c47', name: "count" })))));
+    }
+    static get is() { return "gb-tab-button-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-tab-button-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-tab-button-base.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "current",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "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": "size",
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "badge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "badge",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabTypes",
+                    "resolved": "\"button_gray\" | \"button_primary\" | \"button_white\" | \"button_white_border\" | \"line\" | \"rounded_button_white\" | \"rounded_button_white_border\" | \"underline\" | \"underline_filled\"",
+                    "references": {
+                        "TabTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::TabTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "tabName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-name",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabClicked",
+                "name": "tabClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-tab-button-base.js.map

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-tab-button-base.js","sourceRoot":"","sources":["../../../src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, TabTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-tab-button-base',\r\n  styleUrl: 'gb-tab-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbTabButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop() type: TabTypes;\r\n  @Prop() tabName: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() tabClicked: EventEmitter<void>;\r\n\r\n  getTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-medium';\r\n      case 'md':\r\n        return 'text-md-medium';\r\n    }\r\n  }\r\n\r\n  getCurrentTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  getCountTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-medium';\r\n      case 'md':\r\n        return 'text-sm-medium';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const tabName = this.el.querySelector('[slot=\"name\"]');\r\n    const tabCount = this.el.querySelector('[slot=\"count\"]');\r\n\r\n    if (this.current) {\r\n      tabName.classList.add(this.getCurrentTextClasses());\r\n    } else {\r\n      tabName.classList.add(this.getTextClasses());\r\n    }\r\n\r\n    if(tabCount) {\r\n        tabCount.classList.add(this.getCountTextClasses());\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.tabClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div \r\n      class={`tab_button_div ${this.type}\r\n      ${this.current ? 'current' : ''} \r\n      ${this.fullWidth ? 'full_width' : ''} \r\n      ${this.size}`} onClick={() => this.handleClick()}>\r\n        <p class={`${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.tabName}</p>\r\n        {this.badge && (\r\n          <gb-badge\r\n            size=\"sm\"\r\n            type=\"pill_color\"\r\n            color={\r\n              this.current && this.type === 'button_primary' ? 'information' :\r\n              this.current && this.type === 'underline' ? 'information' :\r\n              this.current && this.type === 'line' ? 'information' : 'gray'\r\n            }\r\n          >\r\n            <slot name=\"count\"></slot>\r\n          </gb-badge>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}