@easemate/web-kit 0.1.0

package/build/elements/slider/index.js

@@ -0,0 +1,228 @@
+import "../input/index.js";
+import { html } from 'lit-html';
+import { coerceNumber, dispatchControlEvent, setBooleanAttribute } from "../shared.js";
+import { Component } from '~/decorators/Component';
+import { Listen } from '~/decorators/Listen';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+@Component({
+    tag: 'ease-slider',
+    styles: `
+    :host {
+      display: contents;
+      --track-color: var(--ease-slider-track-color, var(--color-gray-825));
+      --active-track-color: var(--ease-slider-active-track-color, var(--color-blue-1100));
+      --thumb-color: var(--ease-slider-thumb-color, var(--color-blue-900));
+      --thumb-size: var(--ease-slider-thumb-size, 18px);
+      --track-height: var(--ease-slider-track-height, 4px);
+    }
+
+    [part="container"] {
+      flex: 1;
+      display: grid;
+      grid-template-columns: auto var(--ease-slider-value-width, 36px);
+      grid-gap: var(--ease-slider-gap, 12px);
+    }
+
+    ease-input[part="value"] {
+      --ease-input-padding: 8px 0;
+      min-width: 0;
+      text-align: center;
+      width: var(--ease-slider-value-width, 36px);
+      font-variant-numeric: tabular-nums;
+      font-feature-settings: "tnum";
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+    }
+
+    input[part="control"][type="range"] {
+      height: var(--ease-slider-height, 30px);
+      margin: 0;
+      padding: 0;
+      appearance: none;
+      background-color: transparent;
+      width: 100%;
+      cursor: pointer;
+    }
+
+    input[part="control"][type="range"]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: var(--track-height);
+      background: linear-gradient(to right, var(--active-track-color) var(--progress, 0%), var(--track-color) var(--progress, 0%));
+      border-radius: calc(var(--track-height) / 2);
+      border: none;
+    }
+
+    input[part="control"][type="range"]::-moz-range-track {
+      width: 100%;
+      height: var(--track-height);
+      background: var(--track-color);
+      border-radius: calc(var(--track-height) / 2);
+      border: none;
+    }
+
+    input[part="control"][type="range"]::-moz-range-progress {
+      background-color: var(--active-track-color);
+      height: var(--track-height);
+      border-radius: calc(var(--track-height) / 2);
+    }
+
+    input[part="control"][type="range"]::-webkit-slider-thumb {
+      appearance: none;
+      height: var(--thumb-size);
+      width: var(--thumb-size);
+      border-radius: 50%;
+      margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
+      box-shadow: inset 0 0 0 .75px var(--color-white-15), inset 0 0 5px var(--color-white-20);
+      transition: transform 0.2s;
+      position: relative;
+      background: radial-gradient(circle at center, var(--color-blue-100-50) 4.5px, var(--color-white-0) 4.5px),  var(--thumb-color) no-repeat center center;
+    }
+    
+    input[part="control"][type="range"]:hover::-webkit-slider-thumb {
+        transform: scale(1.075);
+    }
+    
+    input[part="control"][type="range"]:active::-webkit-slider-thumb {
+        transform: scale(.975);
+    }
+
+    input[part="control"][type="range"]::-moz-range-thumb {
+      height: var(--thumb-size);
+      width: var(--thumb-size);
+      border-radius: 50%;
+      background: radial-gradient(circle at center, var(--color-blue-100-50) 4.5px, var(--color-white-0) 4.5px),  var(--thumb-color) no-repeat center center;
+      border: none;
+      box-shadow: inset 0 0 0 .75px var(--color-white-15), inset 0 0 5px var(--color-white-20);
+      transition: transform 0.2s;
+      position: relative;
+    }
+
+    input[part="control"][type="range"]:hover::-moz-range-thumb {
+        transform: scale(1.075);
+    }
+
+    input[part="control"][type="range"]:active::-moz-range-thumb {
+        transform: scale(.975);
+    }
+  `,
+    template() {
+        return html `
+      <div part="container">
+        <input
+          part="control"
+          type="range"
+          .min=${this.min ?? 0}
+          .max=${this.max ?? 100}
+          .step=${this.step ?? 1}
+          .value=${String(this.value ?? 0)}
+          ?disabled=${this.disabled}
+          ?aria-disabled=${this.disabled}
+        />
+        
+        <ease-input
+          part="value"
+          type="number"
+          placeholder="-"
+          .disabled=${Boolean(this.disabled)}
+          .value=${this.value === null || this.value === undefined ? '' : String(this.value)}
+        />
+      </div>
+    `;
+    }
+})
+export class Slider extends HTMLElement {
+    @Prop({ type: Number, reflect: true })
+    accessor value;
+    @Prop({ type: Number, reflect: true })
+    accessor min;
+    @Prop({ type: Number, reflect: true })
+    accessor max;
+    @Prop({ type: Number, reflect: true })
+    accessor step;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled;
+    @Query('input')
+    accessor control;
+    @Query('ease-input')
+    accessor valueControl;
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const control = this.control;
+        const value = this.value ?? 0;
+        control.value = String(value);
+        control.min = this.min === null || this.min === undefined ? '' : String(this.min);
+        control.max = this.max === null || this.max === undefined ? '' : String(this.max);
+        control.step = this.step === null || this.step === undefined ? '' : String(this.step);
+        control.type = 'range';
+        control.setAttribute('part', 'control');
+        control.disabled = Boolean(this.disabled);
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+        this.updateProgress();
+    }
+    @Listen('input', { selector: 'input[type="range"]' })
+    handleRangeInput(event, target) {
+        if (!target) {
+            return;
+        }
+        const numericValue = coerceNumber(target.value);
+        this.value = numericValue;
+        this.updateProgress();
+        if (this.valueControl) {
+            this.valueControl.value = numericValue === null ? '' : String(numericValue);
+        }
+        dispatchControlEvent(this, 'input', { value: this.value, event });
+    }
+    @Listen('change', { selector: 'input[type="range"]' })
+    handleRangeChange(event, target) {
+        if (target) {
+            const numericValue = coerceNumber(target.value);
+            this.value = numericValue;
+            this.updateProgress();
+            if (this.valueControl) {
+                this.valueControl.value = numericValue === null ? '' : String(numericValue);
+            }
+        }
+        dispatchControlEvent(this, 'change', { value: this.value, event });
+    }
+    @Listen('input', {
+        selector: 'ease-input',
+        when: (event) => event instanceof CustomEvent && typeof event.detail?.value === 'string'
+    })
+    handleValueInput(event) {
+        const rawValue = event.detail?.value ?? '';
+        const numericValue = coerceNumber(rawValue);
+        this.value = numericValue;
+        this.updateProgress();
+        if (this.control) {
+            this.control.value = String(numericValue ?? 0);
+        }
+        dispatchControlEvent(this, 'input', { value: this.value, event: event.detail?.event ?? event });
+    }
+    @Listen('change', {
+        selector: 'ease-input',
+        when: (event) => event instanceof CustomEvent && typeof event.detail?.value === 'string'
+    })
+    handleValueChange(event) {
+        const rawValue = event.detail?.value ?? '';
+        const numericValue = coerceNumber(rawValue);
+        this.value = numericValue;
+        this.updateProgress();
+        if (this.control) {
+            this.control.value = String(numericValue ?? 0);
+        }
+        dispatchControlEvent(this, 'change', { value: this.value, event: event.detail?.event ?? event });
+    }
+    updateProgress() {
+        if (!this.control) {
+            return;
+        }
+        // Ensure numeric coercion for proper calculation
+        const value = Number(this.value) || 0;
+        const min = Number(this.min) || 0;
+        const max = Number(this.max) || 100;
+        const percent = max === min ? 0 : ((value - min) / (max - min)) * 100;
+        this.control.style.setProperty('--progress', `${Math.max(0, Math.min(100, percent))}%`);
+    }
+}