globuswebcomponents 0.6.3 → 0.6.5

package/dist/collection/components/gb-collapse-button/gb-collapse-button.js

@@ -0,0 +1,156 @@
+import { h } from "@stencil/core";
+export class GbCollapseButton {
+    constructor() {
+        this.color = undefined;
+        this.isCollapsed = false;
+        this.action = 'collapse';
+        this.isHovered = false;
+    }
+    toggleIcon() {
+        if (this.action === 'collapse') {
+            this.action = 'expand';
+        }
+        else if (this.action === 'expand') {
+            this.action = 'collapse';
+        }
+    }
+    async collapseSidebar() {
+        this.isCollapsed = true;
+    }
+    async expandSidebar() {
+        this.isCollapsed = false;
+    }
+    render() {
+        return [
+            h("div", { key: 'a0410a45abb1ecfd0ba9226d422998d42013859f' }, h("div", { key: '18395b299210f1d19a25f44405ddc42e902ade20', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, this.action === 'collapse' && [
+                h("svg", { key: 'feeb389df0054a37803f478a5f4897190b349b14', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'a12809ad344bb735604b58c1fc3b9a7abfea9ed9', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+            ], this.action === 'expand' && (h("svg", { key: 'c2e3d7a092e51ad80fb418af646064601888420c', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'b3eafeb6c61b96fc172cc547d6640e20d6bd72c2', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
+        ];
+    }
+    static get is() { return "gb-collapse-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-collapse-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-collapse-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'gray' | 'white'",
+                    "resolved": "\"gray\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "isCollapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-collapsed",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "action": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "action",
+                "reflect": false,
+                "defaultValue": "'collapse'"
+            },
+            "isHovered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-hovered",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "collapseSidebar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "expandSidebar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-collapse-button.js.map

package/dist/collection/components/gb-collapse-button/gb-collapse-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-collapse-button.js","sourceRoot":"","sources":["../../../src/components/gb-collapse-button/gb-collapse-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO3D,MAAM,OAAO,gBAAgB;;;2BAEqB,KAAK;sBACX,UAAU;yBACN,KAAK;;IAEnD,UAAU;QACR,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACpC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;QAC3B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAGD,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO;YACL;gBACE,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACrK,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI;wBAC7B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,EAAE;4BACxH,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE;qBACP;oBACA,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAC3B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,EAAE;wBACxH,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACG;gBACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CAC9C,kBAAY,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM;oBACtC,SAAG,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,mBAAmB,eAErC,CACO,CACd,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/C,kBAAY,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM;oBACtC,SAAG,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,mBAAmB,aAErC,CACO,CACd,CAAC,CAAC,CAAC,IAAI,CACJ;SACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Method, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-collapse-button',\r\n  styleUrl: 'gb-collapse-button.css',\r\n  shadow: true,\r\n})\r\nexport class GbCollapseButton {\r\n  @Prop() color: 'gray' | 'white';\r\n  @Prop({ mutable: true }) isCollapsed: boolean = false;\r\n  @Prop({ mutable: true }) action: string = 'collapse';\r\n  @Prop({ mutable: true }) isHovered: boolean = false;\r\n\r\n  toggleIcon() {\r\n    if (this.action === 'collapse') {\r\n      this.action = 'expand';\r\n    } else if (this.action === 'expand') {\r\n      this.action = 'collapse';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async collapseSidebar() {\r\n    this.isCollapsed = true;\r\n  }\r\n\r\n  @Method()\r\n  async expandSidebar() {\r\n    this.isCollapsed = false;\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div>\r\n        <div class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)}>\r\n          {this.action === 'collapse' && [\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>,\r\n          ]}\r\n          {this.action === 'expand' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </div>\r\n        {this.isHovered && this.action === 'collapse' ? (\r\n          <gb-tooltip class=\"tooltip\" arrow=\"left\">\r\n            <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n              Collapse\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : this.isHovered && this.action === 'expand' ? (\r\n          <gb-tooltip class=\"tooltip\" arrow=\"left\">\r\n            <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n              Expand\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : null}\r\n      </div>,\r\n    ];\r\n  }\r\n}"]}