globuswebcomponents 0.2.6 → 0.2.8

package/dist/collection/components/gb-sliders/slider.js

@@ -0,0 +1,157 @@
+import { h } from "@stencil/core";
+export class GbSlider {
+    constructor() {
+        this.isDragging = false;
+        this.activeThumb = null;
+        this.snapPoints = [0, 25, 50, 75, 100];
+        this.handleMouseDown = (_e, thumb) => {
+            this.isDragging = true;
+            this.activeThumb = thumb;
+            document.addEventListener('mousemove', this.handleMouseMove);
+            document.addEventListener('mouseup', this.handleMouseUp);
+        };
+        this.handleMouseMove = (e) => {
+            if (!this.isDragging)
+                return;
+            // Calculate the position of the mouse relative to the slider's width.
+            const position = e.offsetX / this.containerEl.offsetWidth;
+            // Convert the position into a value within the slider's range and snap to the nearest point.
+            const value = this.findNearestSnapPoint(position * 100);
+            // Update the appropriate thumb's value.
+            if (this.activeThumb === 'left') {
+                this.leftValue = Math.min(value, this.rightValue - 25);
+            }
+            else {
+                this.rightValue = Math.max(value, this.leftValue + 25);
+            }
+            // Update the track's appearance and emit the new values.
+            this.updateTrack();
+            this.valueChange.emit({ left: this.leftValue, right: this.rightValue });
+        };
+        this.handleMouseUp = () => {
+            this.isDragging = false;
+            this.activeThumb = null;
+            document.removeEventListener('mousemove', this.handleMouseMove);
+            document.removeEventListener('mouseup', this.handleMouseUp);
+        };
+        this.min = 0;
+        this.max = 100;
+        this.thumbType = 'text';
+        this.leftValue = 0;
+        this.rightValue = 100;
+    }
+    componentDidLoad() {
+        this.trackEl = this.el.shadowRoot.querySelector('.track');
+        this.containerEl = this.el.shadowRoot.querySelector('.slider-container');
+        this.updateTrack();
+    }
+    findNearestSnapPoint(value) {
+        return this.snapPoints.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+    }
+    updateTrack() {
+        const leftPos = this.leftValue;
+        const rightPos = this.rightValue;
+        // Update the track's left position and width to match the thumb positions.
+        this.trackEl.style.left = `${leftPos}%`;
+        this.trackEl.style.width = `${rightPos - leftPos}%`;
+    }
+    render() {
+        return (h("div", { key: 'e0d852e942b7103697c7d8798b9ce69446f15b29', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: '2302a2877a4a5c79112c13910d8626fc41adca0d', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '638440acfad057a72b7cdd972f00bbc4f44208e2', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '11b5501bfa89f1d4622d3b6cb0be73d79437ee68', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
+    }
+    static get is() { return "gb-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "thumbType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'tooltip'",
+                    "resolved": "\"text\" | \"tooltip\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "thumb-type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "leftValue": {},
+            "rightValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ left: number; right: number }",
+                    "resolved": "{ left: number; right: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=slider.js.map

package/dist/collection/components/gb-sliders/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/gb-sliders/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOxF,MAAM,OAAO,QAAQ;;QAcX,eAAU,GAAY,KAAK,CAAC;QAC5B,gBAAW,GAA4B,IAAI,CAAC;QAE5C,eAAU,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAQ1C,oBAAe,GAAG,CAAC,EAAc,EAAE,KAAuB,EAAE,EAAE;YAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAA;QAED,oBAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAE7B,sEAAsE;YACtE,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;YAE1D,6FAA6F;YAC7F,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;YAExD,wCAAwC;YACxC,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,CAAC;YACzD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC;YACzD,CAAC;YAED,yDAAyD;YACzD,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1E,CAAC,CAAA;QAED,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9D,CAAC,CAAA;mBAvDqB,CAAC;mBACD,GAAG;yBACe,MAAM;yBAEjB,CAAC;0BACA,GAAG;;IAWjC,gBAAgB;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACzE,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAqCD,oBAAoB,CAAC,KAAa;QAChC,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAC3C,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAC9D,CAAC;IACJ,CAAC;IAED,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;QAEjC,2EAA2E;QAC3E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,OAAO,GAAG,CAAC;QACxC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB;YAChF,4DAAK,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAoB,GAAQ;YAE3E,iFACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,EAAE,EACrC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,CAAC,GACzB;YAE5B,iFACE,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC,GAC1B,CACxB,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() min: number = 0;  \r\n  @Prop() max: number = 100; \r\n  @Prop() thumbType: 'text' | 'tooltip' = 'text'; \r\n\r\n  @State() leftValue: number = 0;   \r\n  @State() rightValue: number = 100; \r\n\r\n  @Event() valueChange: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement; \r\n  private containerEl: HTMLDivElement; \r\n  private isDragging: boolean = false; \r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  private snapPoints = [0, 25, 50, 75, 100];\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack(); \r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb; \r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return; \r\n\r\n    // Calculate the position of the mouse relative to the slider's width.\r\n    const position = e.offsetX / this.containerEl.offsetWidth;\r\n    \r\n    // Convert the position into a value within the slider's range and snap to the nearest point.\r\n    const value = this.findNearestSnapPoint(position * 100);\r\n\r\n    // Update the appropriate thumb's value.\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.min(value, this.rightValue - 25);\r\n    } else {\r\n      this.rightValue = Math.max(value, this.leftValue + 25);\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values.\r\n    this.updateTrack();\r\n    this.valueChange.emit({ left: this.leftValue, right: this.rightValue });\r\n  }\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false; \r\n    this.activeThumb = null; \r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  }\r\n\r\n  findNearestSnapPoint(value: number): number {\r\n    return this.snapPoints.reduce((prev, curr) => \r\n      Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev\r\n    );\r\n  }\r\n\r\n  updateTrack() {\r\n    const leftPos = this.leftValue; \r\n    const rightPos = this.rightValue; \r\n    \r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={(el) => this.containerEl = el as HTMLDivElement}>\r\n        <div class=\"track\" ref={(el) => this.trackEl = el as HTMLDivElement}></div>\r\n        \r\n        <gb-slider-control-handle \r\n          class=\"left\"\r\n          value={this.leftValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.leftValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n\r\n        <gb-slider-control-handle \r\n          class=\"right\"\r\n          value={this.rightValue}\r\n          type={this.thumbType}\r\n          style={{ left: `${this.rightValue}%` }}\r\n          onMouseDown={(e) => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}