globuswebcomponents 0.2.6 → 0.2.8

package/dist/collection/components/gb-slider-control-handle/slider-control-handle.js

@@ -0,0 +1,82 @@
+import { h } from "@stencil/core";
+export class SliderControlHandle {
+    constructor() {
+        this.value = 0;
+        this.type = undefined;
+        this.isHovered = false;
+        this.isFocused = false;
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    handleFocus() {
+        this.isFocused = true;
+    }
+    handleBlur() {
+        this.isFocused = false;
+    }
+    render() {
+        return (h("div", { key: '088c49474b7c45bc7ecbfc425e4c145b83aab10a', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '690c71b921875d1d64b18e507a76bc5775009e6f', class: "tooltip-container" }, h("gb-tooltip", { key: '6ed9eafa42b0a8a2e52f8b368ba62c93afd54def', arrow: 'none' }, h("p", { key: '7821667ff95f09aca187802d1b38d19d6957a6d7', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: '34ab6b12b511eedf9e35bc78480de269dfbda441', class: "thumb-label" }, this.value, "%"))));
+    }
+    static get is() { return "gb-slider-control-handle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider-control-handle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider-control-handle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'tooltip'",
+                    "resolved": "\"text\" | \"tooltip\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {},
+            "isFocused": {}
+        };
+    }
+}
+//# sourceMappingURL=slider-control-handle.js.map

package/dist/collection/components/gb-slider-control-handle/slider-control-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-control-handle.js","sourceRoot":"","sources":["../../../src/components/gb-slider-control-handle/slider-control-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,mBAAmB;;qBACN,CAAC;;yBAGK,KAAK;yBACL,KAAK;;IAEnC,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EACzG,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,QAAQ,EAAC,GAAG;YAET,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,mEAAY,KAAK,EAAC,MAAM;oBACtB,0DAAG,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,WAAW;wBAAE,IAAI,CAAC,KAAK;4BAAM,CACpD,CACT,CACP;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,aAAa;gBACrB,IAAI,CAAC,KAAK;oBACP,CACP,CACG,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider-control-handle',\r\n  styleUrl: 'slider-control-handle.css',\r\n  shadow: true,\r\n})\r\nexport class SliderControlHandle {\r\n  @Prop() value: number = 0;\r\n  @Prop() type?: 'text' | 'tooltip'; \r\n  \r\n  @State() isHovered: boolean = false; \r\n  @State() isFocused: boolean = false; \r\n\r\n  handleMouseEnter() {\r\n    this.isHovered = true;\r\n  }\r\n\r\n  handleMouseLeave() {\r\n    this.isHovered = false;\r\n  }\r\n\r\n  handleFocus() {\r\n    this.isFocused = true;\r\n  }\r\n\r\n  handleBlur() {\r\n    this.isFocused = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`}\r\n        onMouseEnter={() => this.handleMouseEnter()}\r\n        onMouseLeave={() => this.handleMouseLeave()}\r\n        onFocus={() => this.handleFocus()}\r\n        onBlur={() => this.handleBlur()}\r\n        tabindex=\"0\"\r\n      >\r\n          {this.type === 'tooltip' && (\r\n            <div class=\"tooltip-container\">\r\n              <gb-tooltip arrow='none'>\r\n                <p class=\"text-xs-semi-bold\" slot=\"main_text\">{this.value}%</p>\r\n              </gb-tooltip>\r\n            </div>\r\n          )}\r\n          {this.type === 'text' && (\r\n            <div class=\"thumb-label\">\r\n              {this.value}%\r\n            </div>\r\n          )}\r\n        </div>\r\n    );\r\n  }\r\n}\r\n"]}