@sekiui/elements 0.0.60 → 0.0.63

package/dist/collection/components/slider/seki-slider.js

@@ -0,0 +1,514 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component seki-slider
+ * @description An input where the user selects a value from within a given range.
+ * Features a track, range indicator, and draggable thumb with full keyboard and mouse support.
+ * @example
+ * <seki-slider></seki-slider>
+ * <seki-slider min="0" max="100" value="50"></seki-slider>
+ * <seki-slider step="10" default-value="30"></seki-slider>
+ */
+export class SekiSlider {
+    constructor() {
+        this.isDragging = false;
+        /**
+         * Minimum value of the slider.
+         */
+        this.min = 0;
+        /**
+         * Maximum value of the slider.
+         */
+        this.max = 100;
+        /**
+         * Step increment for the slider.
+         */
+        this.step = 1;
+        /**
+         * Disables all interactions when true.
+         */
+        this.disabled = false;
+        /**
+         * Orientation of the slider.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Internal value for uncontrolled mode.
+         */
+        this.internalValue = 0;
+        /**
+         * Handle mouse down on track or thumb
+         */
+        this.handleMouseDown = (event) => {
+            var _a;
+            if (this.disabled)
+                return;
+            event.preventDefault();
+            this.isDragging = true;
+            this.updateValueFromPosition(event.clientX, event.clientY);
+            (_a = this.thumbEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Add global listeners for drag
+            document.addEventListener('mousemove', this.handleMouseMove);
+            document.addEventListener('mouseup', this.handleMouseUp);
+        };
+        /**
+         * Handle mouse move during drag
+         */
+        this.handleMouseMove = (event) => {
+            if (!this.isDragging)
+                return;
+            this.updateValueFromPosition(event.clientX, event.clientY);
+        };
+        /**
+         * Handle mouse up to end drag
+         */
+        this.handleMouseUp = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            this.emitChange();
+            // Remove global listeners
+            document.removeEventListener('mousemove', this.handleMouseMove);
+            document.removeEventListener('mouseup', this.handleMouseUp);
+        };
+        /**
+         * Handle touch start
+         */
+        this.handleTouchStart = (event) => {
+            var _a;
+            if (this.disabled)
+                return;
+            event.preventDefault();
+            this.isDragging = true;
+            const touch = event.touches[0];
+            this.updateValueFromPosition(touch.clientX, touch.clientY);
+            (_a = this.thumbEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Add global touch listeners
+            document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+            document.addEventListener('touchend', this.handleTouchEnd);
+        };
+        /**
+         * Handle touch move during drag
+         */
+        this.handleTouchMove = (event) => {
+            if (!this.isDragging)
+                return;
+            event.preventDefault();
+            const touch = event.touches[0];
+            this.updateValueFromPosition(touch.clientX, touch.clientY);
+        };
+        /**
+         * Handle touch end
+         */
+        this.handleTouchEnd = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            this.emitChange();
+            // Remove global touch listeners
+            document.removeEventListener('touchmove', this.handleTouchMove);
+            document.removeEventListener('touchend', this.handleTouchEnd);
+        };
+    }
+    componentWillLoad() {
+        // Initialize internal value
+        if (this.defaultValue !== undefined) {
+            this.internalValue = this.clampValue(this.defaultValue);
+        }
+        else {
+            this.internalValue = this.clampValue(this.min);
+        }
+    }
+    /**
+     * Get current value (controlled vs uncontrolled), clamped to valid range
+     */
+    get currentValue() {
+        const rawValue = this.value !== undefined ? this.value : this.internalValue;
+        return this.clampValue(rawValue);
+    }
+    /**
+     * Clamp value to min/max range and round to step
+     */
+    clampValue(val) {
+        // Round to step
+        const stepped = Math.round((val - this.min) / this.step) * this.step + this.min;
+        // Clamp to range
+        return Math.min(Math.max(stepped, this.min), this.max);
+    }
+    /**
+     * Calculate percentage of value within range
+     */
+    get percentage() {
+        const range = this.max - this.min;
+        if (range === 0)
+            return 0;
+        return ((this.currentValue - this.min) / range) * 100;
+    }
+    /**
+     * Update value from a position (mouse/touch)
+     */
+    updateValueFromPosition(clientX, clientY) {
+        if (!this.trackEl || this.disabled)
+            return;
+        const rect = this.trackEl.getBoundingClientRect();
+        let percentage;
+        if (this.orientation === 'horizontal') {
+            percentage = (clientX - rect.left) / rect.width;
+        }
+        else {
+            // For vertical, invert so bottom is min and top is max
+            percentage = 1 - (clientY - rect.top) / rect.height;
+        }
+        // Clamp percentage to 0-1
+        percentage = Math.min(Math.max(percentage, 0), 1);
+        // Calculate new value
+        const range = this.max - this.min;
+        const newValue = this.clampValue(this.min + percentage * range);
+        this.setValue(newValue, true);
+    }
+    /**
+     * Set value and emit events
+     */
+    setValue(newValue, isInput = false) {
+        const clampedValue = this.clampValue(newValue);
+        if (clampedValue === this.currentValue)
+            return;
+        // Update internal state only in uncontrolled mode
+        if (this.value === undefined) {
+            this.internalValue = clampedValue;
+        }
+        // Emit input event for real-time updates
+        if (isInput) {
+            this.sekiInput.emit({ value: clampedValue });
+        }
+    }
+    /**
+     * Emit change event (called when interaction ends)
+     */
+    emitChange() {
+        this.sekiChange.emit({ value: this.currentValue });
+    }
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        let newValue = this.currentValue;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newValue = this.currentValue + this.step;
+                handled = true;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newValue = this.currentValue - this.step;
+                handled = true;
+                break;
+            case 'PageUp':
+                // Jump by 10% of range or 10 steps
+                newValue = this.currentValue + Math.max(this.step * 10, (this.max - this.min) * 0.1);
+                handled = true;
+                break;
+            case 'PageDown':
+                newValue = this.currentValue - Math.max(this.step * 10, (this.max - this.min) * 0.1);
+                handled = true;
+                break;
+            case 'Home':
+                newValue = this.min;
+                handled = true;
+                break;
+            case 'End':
+                newValue = this.max;
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.setValue(newValue, true);
+            this.emitChange();
+        }
+    }
+    /**
+     * Clean up event listeners on disconnect
+     */
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    }
+    render() {
+        const percentage = this.percentage;
+        const isVertical = this.orientation === 'vertical';
+        // Style for range (filled portion)
+        const rangeStyle = isVertical
+            ? { height: `${percentage}%` }
+            : { width: `${percentage}%` };
+        // Style for thumb position
+        const thumbStyle = isVertical
+            ? { bottom: `${percentage}%` }
+            : { left: `${percentage}%` };
+        return (h(Host, { key: '9ce9d0c5e526a1a3f58503d0a6560d62a1e9a326', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: 'd5de689b1c51bb97b62090545454b4df5bd2ac74', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: 'bf85aa3c37083d788dc127e698210e25437c29cc', class: "track", part: "track" }, h("div", { key: '282298ecdf11787ee2f4bae8d68ff818c3ce8c02', class: "range", part: "range", style: rangeStyle })), h("div", { key: '20391fd60815ba5f930801e8810dd494fc9d42f8', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined })), this.name && (h("input", { key: 'afc464c9e2bf2b6c0657213c205f61529429d889', type: "hidden", name: this.name, value: this.currentValue.toString() }))));
+    }
+    static get is() { return "seki-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment for the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled value. When provided, component operates in controlled mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value for uncontrolled mode. Ignored if value prop is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all interactions when true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name for form integration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "ariaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element describing this slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-describedby"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiInput",
+                "name": "sekiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes during interaction."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiChange",
+                "name": "sekiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes after interaction ends."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}