globuswebcomponents 0.2.6 → 0.2.8

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

@@ -0,0 +1,93 @@
+import { h } from "@stencil/core";
+export class GbCollapseButton {
+    constructor() {
+        this.color = undefined;
+        this.currentIconDirection = 'left';
+        this.isHovered = false;
+    }
+    toggleIcon() {
+        if (this.currentIconDirection === 'left') {
+            this.currentIconDirection = 'right';
+        }
+        else if (this.currentIconDirection === 'right') {
+            this.currentIconDirection = 'left';
+        }
+    }
+    render() {
+        return [
+            h("div", { key: 'b0e5cd3db09c0e622e6e8411815e25a90e0b484a' }, h("div", { key: '00b0f82d7a5f1a25740127774c52f79ba144d0cd', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false }, this.currentIconDirection === 'left' && [
+                h("svg", { key: 'ca7ff1cd95a89405b42f17e5c3f96b88654758f1', 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: '08c8b3a0e4527b029504bdb446b5f81574461e3d', 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.currentIconDirection === 'right' && (h("svg", { key: '8f17b79b20a4cb106195621e5d22169f12ccd6ad', 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: 'a23026f4dd36999a0ff2f672d08fccd5ce16933f', 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.currentIconDirection === 'left' ? (h("gb-tooltip", { class: "tooltip", "arrow-position": "left" }, h("p", { slot: "main_text", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.currentIconDirection === 'right' ? (h("gb-tooltip", { class: "tooltip", "arrow-position": "left" }, h("p", { slot: "main_text", 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
+            },
+            "currentIconDirection": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "current-icon-direction",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "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"
+            }
+        };
+    }
+}
+//# 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,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,gBAAgB;;;oCAE+B,MAAM;yBAChB,KAAK;;IAEnD,UAAU;QACN,IAAI,IAAI,CAAC,oBAAoB,KAAK,MAAM,EAAE,CAAC;YACvC,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;QACxC,CAAC;aAAM,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,EAAE,CAAC;YAC/C,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC;QACvC,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO;YACH;gBACI,4DACI,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK;oBAEzC,IAAI,CAAC,oBAAoB,KAAK,MAAM,IAAI;wBACrC,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;4BACtH,6DAAM,CAAC,EAAC,sLAAsL,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CACjR;qBACT;oBACA,IAAI,CAAC,oBAAoB,KAAK,OAAO,IAAI,CACtC,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;wBACtH,6DAAM,CAAC,EAAC,sLAAsL,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CACjR,CACT,CACC;gBACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,KAAK,MAAM,CAAC,CAAC,CAAC,CACtD,kBAAY,KAAK,EAAC,SAAS,oBAAgB,MAAM;oBAC7C,SAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,eAAa,CACjD,CACZ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,CAAC,CAAC,CAAC,CAC1D,kBAAY,KAAK,EAAC,SAAS,oBAAgB,MAAM;oBAC7C,SAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,aAAW,CAC/C,CAChB,CAAC,CAAC,CAAC,IAAI,CACV;SACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, 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\n\r\nexport class GbCollapseButton {\r\n    @Prop() color: 'gray' | 'white';\r\n    @Prop({ mutable: true }) currentIconDirection: string = 'left';\r\n    @Prop({ mutable: true }) isHovered: boolean = false;\r\n\r\n    toggleIcon() {\r\n        if (this.currentIconDirection === 'left') {\r\n            this.currentIconDirection = 'right';\r\n        } else if (this.currentIconDirection === 'right') {\r\n            this.currentIconDirection = 'left';\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return [\r\n            <div>\r\n                <div \r\n                    class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} \r\n                    onMouseEnter={() => this.isHovered = true} \r\n                    onMouseLeave={() => this.isHovered = false}\r\n                    >\r\n                    {this.currentIconDirection === 'left' && [\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 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\"/>\r\n                        </svg>\r\n                    ]}\r\n                    {this.currentIconDirection === 'right' && (\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 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\"/>\r\n                        </svg>\r\n                    )}\r\n                </div>\r\n                {this.isHovered && this.currentIconDirection === 'left' ? (\r\n                    <gb-tooltip class=\"tooltip\" arrow-position=\"left\">\r\n                        <p slot=\"main_text\" class=\"text-xs-semi-bold\">Collapse</p>\r\n                    </gb-tooltip>\r\n                    ) : this.isHovered && this.currentIconDirection === 'right' ? (\r\n                        <gb-tooltip class=\"tooltip\" arrow-position=\"left\">\r\n                            <p slot=\"main_text\" class=\"text-xs-semi-bold\">Expand</p>\r\n                        </gb-tooltip>\r\n                    ) : null}\r\n            </div>\r\n        ];\r\n    }\r\n}"]}