@spectric/ui 0.0.17 → 0.0.19

package/src/components/color_picker/ColorPicker.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, eventOptions, property, state } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { PopoverElement } from '../tooltip/popover';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -12,6 +12,23 @@ export interface ColorPickerProps {
     showAlpha?: boolean
 }
 
+//Not all browsers support eyedropper
+interface EyeDropper {
+    new(): EyeDropper;
+
+    /**
+     * Opens the eyedropper mode, allowing the user to select a color from the screen.
+     * Returns a Promise that resolves with an object containing the selected color in sRGB hexadecimal format.
+     * The Promise rejects if the user cancels the eyedropper mode (e.g., by pressing Escape).
+     */
+    open(): Promise<{ sRGBHex: string }>;
+}
+
+declare var EyeDropper: EyeDropper;
+let eyedropper: EyeDropper | undefined
+if (window.hasOwnProperty("EyeDropper")) {
+    eyedropper = new EyeDropper()
+}
 @customElement('spectric-colorpicker')
 export class SpectricColorPicker extends LitElement implements ColorPickerProps {
     @property({ type: String, reflect: true })
@@ -34,7 +51,15 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    constructor() {
+        super()
+        this._handleAlphaChange = this._handleAlphaChange.bind(this)
+        this._handleHueChange = this._handleHueChange.bind(this)
+        this._handleApply = this._handleApply.bind(this)
+        this._cancel = this._cancel.bind(this)
+        this._handleSaturationLightnessClick = this._handleSaturationLightnessClick.bind(this)
 
+    }
     protected update(changedProperties: PropertyValues): void {
         if (changedProperties.has("value")) {
             let { h, s, l, a } = hexToHsl(this.value)
@@ -47,7 +72,6 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
         super.update(changedProperties)
     }
     private renderHueSaturationGrid() {
-        console.log("canvas render")
         if (!this.canvas.value) {
             return
         }
@@ -69,7 +93,8 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
                 y += ypix;
         }
     }
-    _handleSaturationLightnessClick = (e: PointerEvent) => {
+    @eventOptions({ capture: true })
+    _handleSaturationLightnessClick(e: PointerEvent) {
         if (!this.canvas.value) {
             return
         }
@@ -78,33 +103,44 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
         this.lightness = (this.canvas.value.height - offsetY) / this.canvas.value.height
         this.updateValue()
     }
-    _handleHueChange = (e: DomEvent<SpectricInput>) => {
+    @eventOptions({ capture: true })
+    _handleHueChange(e: DomEvent<SpectricInput>) {
+        e.stopPropagation()
         this.hue = (parseInt(String(e.target.value)) / 100) * 360
         e.target.style.setProperty("accent-color", `hsl(${this.hue}deg 100% 50%)`)
         this.renderHueSaturationGrid()
         this.updateValue()
     }
     private updateValue() {
-        this.value = hslToHex(this.hue, this.saturation * 100, this.lightness * 100) + (Math.round(this.alpha * 255).toString(16).padStart(2, "0"))
+        let hex = hslToHex(this.hue, this.saturation * 100, this.lightness * 100) + (Math.round(this.alpha * 255).toString(16).padStart(2, "0"))
+        this.value = hex
     }
-    _handleAlphaChange = (e: DomEvent<SpectricInput>) => {
+    @eventOptions({ capture: true })
+    _handleAlphaChange(e: DomEvent<SpectricInput>) {
+        e.stopPropagation()
         this.alpha = parseInt(String(e.target.value)) / 100
-        console.log(this.alpha, e)
         this.updateValue()
     }
-    _handleApply = () => {
-        console.log(this.hue, this.saturation, this.lightness, this.alpha)
+    @eventOptions({ capture: true })
+    _handleApply() {
         this.updateValue()
-        console.log(this.value)
         this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+        this.dispatchEvent(new Event("change", { bubbles: true }))
     }
-    _cancel = () => {
+    @eventOptions({ capture: true })
+    _cancel() {
         if (this.original) {
             this.value = this.original
         }
         this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+        this.dispatchEvent(new Event("cancel"))
     }
-    _openPopover = async () => {
+    @eventOptions({ capture: true })
+    async _openPopover() {
+        let popover = this.querySelector<PopoverElement>("spectric-popover")
+        if (!popover || popover.isOpen()) {
+            return
+        }
         this.original = this.value
         this.querySelector<PopoverElement>("spectric-popover")?.showPopover()
         while (!this.canvas.value) {
@@ -115,13 +151,32 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
     protected getPopover(): TemplateResult {
         return html`
                 <spectric-input label="Hue" class="hue-gradient" variant="range" .value=${this.hue || 0} style="accent-color:hsl(${this.hue}deg 100% 50%)" @change=${this._handleHueChange}></spectric-input>
-                <canvas ${ref(this.canvas)} width=200 height=100 class="saturation-lightness-grid" @click=${this._handleSaturationLightnessClick}
-                 @mousedown=${() => { this.sldown = true }} 
-                 @mouseup=${() => this.sldown = false}
+                <canvas ${ref(this.canvas)} width=200 height=100 class="color-picker-saturation-lightness-grid" @click=${this._handleSaturationLightnessClick}
+                 @mousedown=${(e: MouseEvent) => {
+                this.sldown = true
+                e.preventDefault()
+                e.stopPropagation()
+            }} 
+                 @mouseup=${(e: MouseEvent) => {
+                this.sldown = false
+                e.preventDefault()
+                e.stopPropagation()
+            }}
                  @mousemove=${(e: PointerEvent) => { if (this.sldown) { this._handleSaturationLightnessClick(e) } }}
                  ></canvas>
                 <spectric-input class="alpha-gradient" ?hidden=${!this.showAlpha} label="Opacity" variant="range" .value=${(this.alpha || 1) * 100} @change=${this._handleAlphaChange}></spectric-input>
                 <div class="color-picker-footer">
+                    <spectric-button icon class="color-picker-eyedropper ${eyedropper === undefined ? "hidden" : ""}" @click=${async () => {
+                if (eyedropper) {
+                    let result = await eyedropper?.open()
+                    let { h, s, l, a } = hexToHsl(result.sRGBHex);
+                    this.hue = h
+                    this.saturation = s
+                    this.lightness = l
+                    this.alpha = a
+                    this.updateValue()
+                }
+            }}>${eyedropper_icon}</spectric-button>
                     <spectric-button @click=${this._handleApply}>Apply</spectric-button>
                     <spectric-button variant="secondary" @click=${this._cancel}>Cancel</spectric-button>
                 </div>
@@ -130,14 +185,14 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
 
     protected render(): unknown {
         return html`
-        <spectric-button variant="text" @click=${this._openPopover}>
+        <spectric-button variant="secondary" @click=${this._openPopover} icon>
             <spectric-popover .text=${this.getPopover()} icon variant="text"></spectric-popover>
             <div style="width:15px;height:15px;background-color:${this.value}"></div>
         </spectric-button>
     `;
     }
 }
-
+const eyedropper_icon = html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" height="15" width="15" fill="currentColor"><path d="M222,67.34a33.81,33.81,0,0,0-10.64-24.25C198.12,30.56,176.68,31,163.54,44.18L142.82,65l-.63-.63a22,22,0,0,0-31.11,0l-9,9a14,14,0,0,0,0,19.81l3.47,3.47L53.14,149.1a37.79,37.79,0,0,0-9.84,36.73l-8.31,19a11.68,11.68,0,0,0,2.46,13A13.91,13.91,0,0,0,47.32,222,14.15,14.15,0,0,0,53,220.82L71,212.92a37.92,37.92,0,0,0,35.84-10.07l52.44-52.46,3.47,3.48a14,14,0,0,0,19.8,0l9-9a22,22,0,0,0,0-31.12l-.66-.66L212,91.85A33.76,33.76,0,0,0,222,67.34Zm-123.61,127a26,26,0,0,1-26,6.47,6,6,0,0,0-4.16.24l-20,8.75a2,2,0,0,1-2.09-.31l9.12-20.9a5.94,5.94,0,0,0,.19-4.31,25.88,25.88,0,0,1,6.26-26.72l52.44-52.45,36.76,36.78Zm105.16-111L178.17,108.9a6,6,0,0,0,0,8.47l4.88,4.89a10,10,0,0,1,0,14.15l-9,9a2,2,0,0,1-2.82,0l-60.69-60.7a2,2,0,0,1,0-2.83l9-9a10,10,0,0,1,14.14,0l4.89,4.89a6,6,0,0,0,4.24,1.75h0a6,6,0,0,0,4.25-1.77L172,52.66c8.58-8.58,22.52-9,31.08-.85a22,22,0,0,1,.44,31.57Z"/></svg>`
 function* hslGen(hue: number) {
     for (let l = 100; l >= 0; l--) {
         for (let s = 0; s <= 100; s++) {

package/src/components/index.ts

@@ -12,4 +12,5 @@ export * from "./pagination"
 export * from "./table"
 export * from "./tooltip"
 export * from "./types"
-export * from "./color_picker"
+export * from "./color_picker"
+export * from "./calendar"

package/src/components/input.css

@@ -14,39 +14,6 @@ spectric-input {
 spectric-input .inputWrapper {
     color: var(--text-secondary)
 }
-spectric-input.hue-gradient input[type="range"]::-webkit-slider-runnable-track {
-    background: linear-gradient(
-    to right,
-    hsl(0, 100%, 50%),   /* Red */
-    hsl(60, 100%, 50%),  /* Yellow */
-    hsl(120, 100%, 50%), /* Green */
-    hsl(180, 100%, 50%), /* Cyan */
-    hsl(240, 100%, 50%), /* Blue */
-    hsl(300, 100%, 50%), /* Magenta */
-    hsl(360, 100%, 50%)  /* Red (completes the circle) */
-  )
-}
-
-.saturation-lightness-grid {
-  /* Assuming a fixed hue, e.g., 240 (blue) */
-  background: linear-gradient(to right,
-    hsl(var(--accent-color), 0%, 50%), /* From desaturated */
-    hsl(var(--accent-color), 100%, 50%) /* To fully saturated */
-  ),
-  linear-gradient(to top,
-    hsl(var(--accent-color), 100%, 0%), /* From dark */
-    hsl(var(--accent-color), 100%, 50%), /* To mid-lightness */
-    hsl(var(--accent-color), 100%, 100%) /* To bright */
-  );
-}
-spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track {
-  background-image:
-    /* Alpha gradient from transparent to opaque */
-    linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
-}
-spectric-input.alpha-gradient input[type="range"],spectric-input.hue-gradient input[type="range"]{  -webkit-appearance: none; /* For WebKit browsers (Chrome, Safari) */
-  -moz-appearance: none;    /* For Mozilla Firefox */
-  appearance: none;         /* Standard property */}
 spectric-input .inputWrapper input {
     box-sizing: border-box;
     margin: 0px;
@@ -102,7 +69,7 @@ spectric-input #helper-text {
 spectric-input #helper-text.hidden {
     display: none;
 }
-spectric-input[variant="password"] spectric-button {
+spectric-input .input-button-right {
     position: absolute;
     right: 4px;
     bottom: 3px;
@@ -114,4 +81,8 @@ spectric-input .checkbox{
 }
 spectric-input spectric-colorpicker{
     display: block;
+}
+
+spectric-input[variant="color"] .fieldwrapper{
+  display: inline-block;
 }