@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/color/picker.js

@@ -1,540 +0,0 @@
-import { html } from 'lit-html';
-import { dispatchControlEvent } from "../shared.js";
-import { COLOR_FORMATS, getColorComponents, hexToHsv, hsvToHex, hsvToRgb, isLightColor, isValidHex, updateHsvFromComponents } from "./utils.js";
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-import { styleMap } from '../../utils/template-helpers';
-import "../icons/interface/arrows-vertical.js";
-import "../icons/interface/picker.js";
-@Component({
-    tag: 'ease-color-picker',
-    autoSlot: false,
-    styles: `
-    :host {
-      display: grid;
-      grid-gap: 8px;
-      user-select: none;
-      -webkit-user-select: none;
-
-      --ease-color-picker-width: 180px;
-    }
-
-    [part="saturation"] {
-      position: relative;
-      width: 100%;
-      height: 124px;
-      cursor: pointer;
-      background-image: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent);
-      border-radius: 7px;
-      touch-action: none;
-    }
-
-    [part="saturation-handle"] {
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      box-shadow: inset 0 0 0 2px var(--color-blue-100);
-      border-radius: 50%;
-      pointer-events: none;
-    }
-
-    [part="hue"] {
-      position: relative;
-      height: 8px;
-      align-self: center;
-      flex-grow: 1;
-      cursor: pointer;
-      border-radius: 9px;
-      background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
-      touch-action: none;
-    }
-
-    [part="hue-handle"] {
-      position: absolute;
-      top: 0;
-      width: 8px;
-      height: 8px;
-      box-shadow: inset 0 0 0 2px var(--color-blue-100);
-      border-radius: 50%;
-      pointer-events: none;
-    }
-
-    [part="preview"] {
-      position: relative;
-      width: 20px;
-      height: 20px;
-      border-radius: 5px;
-      box-shadow: inset 0 0 0 .75px var(--color-blue-80);
-      display: grid;
-      place-items: center;
-
-      &[data-eyedropper] {
-        cursor: pointer;
-
-        &:hover,
-        &:focus-visible {
-          ease-icon-picker {
-            scale: 1.1;
-          }
-        }
-
-        ease-icon-picker {
-          color: var(--icon-color, var(--color-blue-100));
-          transition: scale 0.2s, color 0.15s;
-          filter: drop-shadow(0 0 2px var(--color-black-15));
-        }
-      }
-    }
-
-    [part="toolbar"] {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 8px;
-      position: relative;
-      z-index: 1;
-    }
-
-    [part="toolbar"] ease-button {
-      padding: 4px;
-      width: max-content;
-    }
-
-    [part="format-container"] {
-      display: grid;
-      grid-template-columns: 30px 1fr;
-      align-items: center;
-      gap: 8px;
-    }
-
-    [part="format-inputs"] {
-      padding: 2px 4px;
-      width: 100%;
-      border-radius: var(--ease-color-picker-format-radius, var(--radii-md));
-      background-color: var(--ease-color-picker-format-background, var(--color-gray-850));
-      cursor: pointer;
-      box-shadow: var(
-        --ease-color-picker-format-shadow,
-        inset 0 1px 0.25px 0 var(--color-white-4),
-        0 1px 2.5px 0 var(--color-black-8)
-      );
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-around;
-
-      &:hover,
-      &:focus-within {
-        background-color: var(--ease-color-picker-format-background-hover, var(--color-gray-825));
-      }
-    }
-
-    [part="format-input"] {
-      appearance: none;
-      -moz-appearance: textfield;
-      cursor: pointer;
-      box-sizing: border-box;
-      font-size: var(--ease-color-picker-format-font-size, 11px);
-      font-weight: 500;
-      color: var(--color-gray-600);
-      min-width: 0;
-      box-sizing: border-box;
-      border: none;
-      outline: none;
-      padding: 4px;
-      margin: 0;
-      background-color: transparent;
-      line-height: 12px;
-      transition: color 0.2s;
-      width: 100%;
-      text-align: center;
-      font-optical-sizing: auto;
-      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
-
-      &:hover,
-      &:focus-within {
-        color: var(--color-blue-100);
-      }
-
-      &::placeholder {
-        color: var(--color-gray-800);
-        opacity: 1;
-      }
-
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-    }
-
-    [part="color-container"] {
-      display: grid;
-      grid-template-columns: 1fr 20px;
-      align-items: center;
-      gap: 8px;
-    }
-
-    [part="format-trigger"] {
-      --ease-icon-size: var(--ease-color-picker-format-icon-size, 10px);
-
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
-      font-optical-sizing: auto;
-      font-size: var(--ease-color-picker-format-trigger-font-size, 10px);
-      font-weight: 500;
-      color: var(--color-gray-400);
-      cursor: pointer;
-      transition: color 0.15s;
-      overflow: hidden;
-      position: relative;
-      height: 14px;
-
-      &:hover {
-        color: var(--color-gray-200);
-      }
-
-      ease-icon-arrows-vertical {
-        color: var(--color-gray-600);
-        flex-shrink: 0;
-      }
-    }
-
-    [part="format-label"] {
-      display: inline-block;
-    }
-
-    [part="format-label"][data-animating="out"] {
-      animation: formatOut 0.15s ease-in forwards;
-    }
-
-    [part="format-label"][data-animating="in"] {
-      animation: formatIn 0.15s ease-out forwards;
-    }
-
-    @keyframes formatOut {
-      0% {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-      }
-      100% {
-        transform: translateY(6px) scale(0.8);
-        opacity: 0;
-      }
-    }
-
-    @keyframes formatIn {
-      0% {
-        transform: translateY(-6px) scale(0.8);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-      }
-    }
-
-  `,
-    template() {
-        const { h, s, v } = this.hsv;
-        const pureHue = hsvToRgb(h, 1, 1);
-        const currentRgb = hsvToRgb(h, s, v);
-        const saturationBg = `rgb(${pureHue.r}, ${pureHue.g}, ${pureHue.b})`;
-        const huePercent = h / 360;
-        const vInverted = 1 - v;
-        // Position handles so they stay within container bounds (handle is 10px)
-        const saturationHandleStyles = {
-            left: `calc(${s * 100}% - ${s * 10}px)`,
-            top: `calc(${vInverted * 100}% - ${vInverted * 10}px)`
-        };
-        const hueHandleStyles = {
-            left: `calc(${huePercent * 100}% - ${huePercent * 10}px)`
-        };
-        const isLight = isLightColor(currentRgb.r, currentRgb.g, currentRgb.b);
-        const hasEyeDropper = 'EyeDropper' in window;
-        const previewStyles = {
-            backgroundColor: this.value,
-            '--icon-color': isLight ? 'var(--color-gray-900)' : 'var(--color-blue-100)'
-        };
-        const components = getColorComponents(this.hsv, this.format);
-        return html `
-      <div 
-        part="saturation" 
-        style=${styleMap({ backgroundColor: saturationBg })}
-        @pointerdown=${this.handleSaturationPointerDown}
-        @pointermove=${this.handleSaturationPointerMove}
-        @pointerup=${this.handleSaturationPointerUp}
-        @pointercancel=${this.handleSaturationPointerUp}
-      >
-        <div part="saturation-handle" style=${styleMap(saturationHandleStyles)}></div>
-      </div>
-      <div part="color-container">
-        <div 
-          part="hue"
-          @pointerdown=${this.handleHuePointerDown}
-          @pointermove=${this.handleHuePointerMove}
-          @pointerup=${this.handleHuePointerUp}
-          @pointercancel=${this.handleHuePointerUp}
-        >
-          <div part="hue-handle" style=${styleMap(hueHandleStyles)}></div>
-        </div>
-
-        <div 
-          part="preview" 
-          style=${styleMap(previewStyles)}
-          ?data-eyedropper=${hasEyeDropper}
-          @click=${hasEyeDropper ? this.handleEyeDropperClick : null}
-        >
-          ${hasEyeDropper ? html `<ease-icon-picker></ease-icon-picker>` : null}
-        </div>
-      </div>
-      <div part="format-container">
-        <div part="format-trigger" @click=${this.handleFormatCycle}>
-          <span part="format-label" data-animating=${this.formatAnimating}>${this.format.toUpperCase()}</span>
-          <ease-icon-arrows-vertical />
-        </div>
-        <div part="format-inputs">
-          ${this.format === 'hex'
-            ? html `
-              <input 
-                part="format-input" 
-                data-hex
-                type="text" 
-                .value=${components.values[0]}
-                @input=${(e) => this.handleComponentChange(0, e.target.value)}
-              />
-            `
-            : components.labels.map((_, i) => html `
-                <input 
-                  part="format-input" 
-                  type="number" 
-                  min="0"
-                  max=${components.max[i]}
-                  .value=${String(components.values[i])}
-                  @input=${(e) => this.handleComponentChange(i, Number(e.target.value))}
-                />
-            `)}
-        </div>
-      </div>
-      <div part="toolbar">
-        <ease-button variant="headless-muted" @click=${this.handleCancelButtonClick}>Cancel</ease-button>
-        <ease-button variant="headless" @click=${this.handleApplyButtonClick}>Apply</ease-button>
-      </div>
-    `;
-    }
-})
-export class ColorPicker extends HTMLElement {
-    hsv = { h: 0, s: 1, v: 1 };
-    originalValue = '#FF0000';
-    format = 'hex';
-    formatAnimating = 'none';
-    #isDraggingSaturation = false;
-    #isDraggingHue = false;
-    #activeSaturationPointer = null;
-    #activeHuePointer = null;
-    isInternalUpdate = false;
-    @Query('[part="saturation"]')
-    accessor saturationArea;
-    @Query('[part="hue"]')
-    accessor hueArea;
-    @Query('[part="hex-input"]')
-    accessor hexInput;
-    @Prop({
-        reflect: true,
-        defaultValue: '#FF0000',
-        onChange(value) {
-            if (!this.isInternalUpdate) {
-                this.updateFromHex(value ?? '#FF0000');
-            }
-        }
-    })
-    accessor value;
-    connectedCallback() {
-        this.originalValue = this.value;
-        this.updateFromHex(this.value);
-    }
-    updateFromHex(hex) {
-        if (!isValidHex(hex)) {
-            return;
-        }
-        const hsv = hexToHsv(hex);
-        if (hsv) {
-            this.hsv = hsv;
-        }
-    }
-    #updateValue(event) {
-        const newValue = hsvToHex(this.hsv.h, this.hsv.s, this.hsv.v);
-        if (this.value !== newValue) {
-            this.isInternalUpdate = true;
-            this.value = newValue;
-            this.isInternalUpdate = false;
-            if (this.hexInput && document.activeElement !== this.hexInput) {
-                this.hexInput.value = newValue;
-            }
-            if (event) {
-                dispatchControlEvent(this, 'input', { value: this.value, event });
-            }
-        }
-    }
-    handleSaturationPointerDown = (event) => {
-        if (!this.saturationArea) {
-            return;
-        }
-        if (event.button !== undefined && event.button !== 0) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.#isDraggingSaturation = true;
-        this.#activeSaturationPointer = event.pointerId;
-        this.saturationArea.setPointerCapture(event.pointerId);
-        this.updateSaturationValue(event);
-    };
-    handleSaturationPointerMove = (event) => {
-        if (!this.#isDraggingSaturation || event.pointerId !== this.#activeSaturationPointer) {
-            return;
-        }
-        event.preventDefault();
-        this.updateSaturationValue(event);
-    };
-    handleSaturationPointerUp = (event) => {
-        if (!this.#isDraggingSaturation || event.pointerId !== this.#activeSaturationPointer) {
-            return;
-        }
-        this.#isDraggingSaturation = false;
-        this.#activeSaturationPointer = null;
-        if (this.saturationArea?.hasPointerCapture(event.pointerId)) {
-            this.saturationArea.releasePointerCapture(event.pointerId);
-        }
-        dispatchControlEvent(this, 'change', { value: this.value, event });
-    };
-    updateSaturationValue(event) {
-        if (!this.saturationArea) {
-            return;
-        }
-        const rect = this.saturationArea.getBoundingClientRect();
-        const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
-        const y = Math.max(0, Math.min(rect.height, event.clientY - rect.top));
-        this.hsv.s = x / rect.width;
-        this.hsv.v = 1 - y / rect.height;
-        this.#updateValue(event);
-        this.requestRender();
-    }
-    handleHuePointerDown = (event) => {
-        if (!this.hueArea) {
-            return;
-        }
-        if (event.button !== undefined && event.button !== 0) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.#isDraggingHue = true;
-        this.#activeHuePointer = event.pointerId;
-        this.hueArea.setPointerCapture(event.pointerId);
-        this.updateHue(event);
-    };
-    handleHuePointerMove = (event) => {
-        if (!this.#isDraggingHue || event.pointerId !== this.#activeHuePointer) {
-            return;
-        }
-        event.preventDefault();
-        this.updateHue(event);
-    };
-    handleHuePointerUp = (event) => {
-        if (!this.#isDraggingHue || event.pointerId !== this.#activeHuePointer) {
-            return;
-        }
-        this.#isDraggingHue = false;
-        this.#activeHuePointer = null;
-        if (this.hueArea?.hasPointerCapture(event.pointerId)) {
-            this.hueArea.releasePointerCapture(event.pointerId);
-        }
-        dispatchControlEvent(this, 'change', { value: this.value, event });
-    };
-    updateHue(event) {
-        if (!this.hueArea) {
-            return;
-        }
-        const rect = this.hueArea.getBoundingClientRect();
-        const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
-        this.hsv.h = (x / rect.width) * 360;
-        this.#updateValue(event);
-        this.requestRender();
-    }
-    handleHexInputChange = (event) => {
-        const input = event.target;
-        const newValue = input.value;
-        if (isValidHex(newValue)) {
-            this.updateFromHex(newValue);
-            this.#updateValue(event);
-            this.requestRender();
-            dispatchControlEvent(this, 'change', { value: this.value, event });
-        }
-        else if (this.hexInput) {
-            this.hexInput.value = this.value;
-        }
-    };
-    handleComponentChange = (index, value) => {
-        this.hsv = updateHsvFromComponents(this.hsv, this.format, index, value);
-        this.#updateValue(null);
-        this.requestRender();
-    };
-    handleFormatChange = (format) => {
-        this.format = format;
-        this.requestRender();
-    };
-    handleFormatCycle = () => {
-        // Start exit animation
-        this.formatAnimating = 'out';
-        this.requestRender();
-        // After exit animation, change format and start enter animation
-        setTimeout(() => {
-            const currentIndex = COLOR_FORMATS.indexOf(this.format);
-            const nextIndex = (currentIndex + 1) % COLOR_FORMATS.length;
-            this.format = COLOR_FORMATS[nextIndex];
-            this.formatAnimating = 'in';
-            this.requestRender();
-            // Clear animation state after enter animation
-            setTimeout(() => {
-                this.formatAnimating = 'none';
-                this.requestRender();
-            }, 150);
-        }, 150);
-    };
-    handleCancelButtonClick = (event) => {
-        this.updateFromHex(this.originalValue);
-        this.isInternalUpdate = true;
-        this.value = this.originalValue;
-        this.isInternalUpdate = false;
-        this.requestRender();
-        dispatchControlEvent(this, 'cancel', { value: this.originalValue, event });
-    };
-    handleApplyButtonClick = (event) => {
-        this.originalValue = this.value;
-        dispatchControlEvent(this, 'apply', { value: this.value, event });
-    };
-    handleEyeDropperClick = async (event) => {
-        if (!('EyeDropper' in window)) {
-            return;
-        }
-        try {
-            const eyeDropper = new window.EyeDropper();
-            const result = await eyeDropper.open();
-            if (result.sRGBHex) {
-                this.updateFromHex(result.sRGBHex);
-                this.#updateValue(event);
-                this.requestRender();
-                dispatchControlEvent(this, 'change', { value: this.value, event });
-            }
-        }
-        catch {
-            // User cancelled or API error - silently ignore
-        }
-    };
-}
-export default {
-    ColorPicker
-};