@ixfx/components 0.2.2 → 0.2.4

package/dist/colour-picker/colour-picker-popup.js

@@ -0,0 +1,399 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Colour } from '@ixfx/visual';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ICON_CHECK } from '../icons/defaults.js';
+import { popupSurfaceStyles } from '../styles/popup.js';
+import { oklchToCss } from './util.js';
+import './colour-picker.js';
+let _instanceCounter = 0;
+const PICKER_SIZES = {
+    small: { width: 130, height: 100 },
+    medium: { width: 100, height: 155 },
+    large: { width: 200, height: 180 },
+    huge: { width: 290, height: 240 },
+};
+function swatchBackground(l, c, h, a) {
+    if (a < 1) {
+        return `
+      linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),
+      repeating-conic-gradient(
+        var(--surface-2) 0% 25%,
+        var(--surface-4) 0% 50%
+      ) 50% / 8px 8px
+    `;
+    }
+    return oklchToCss(l, c, h);
+}
+let ColourPickerPopup = class ColourPickerPopup extends LitElement {
+    constructor() {
+        super();
+        this.mode = `fluid`;
+        this.l = 0.7;
+        this.c = 0.15;
+        this.h = 180;
+        this.a = 1;
+        this.showPreview = false;
+        this.hideH = false;
+        this.hideL = false;
+        this.hideC = false;
+        this.showA = false;
+        this.horizontal = false;
+        this.size = `medium`;
+        this._isOpen = false;
+        this._everOpened = false;
+        // Confirm mode: values being adjusted (not yet committed)
+        this._pendingL = this.l;
+        this._pendingC = this.c;
+        this._pendingH = this.h;
+        this._pendingA = this.a;
+        // Confirm mode: snapshot taken on open, used for revert on dismiss
+        this._savedL = this.l;
+        this._savedC = this.c;
+        this._savedH = this.h;
+        this._savedA = this.a;
+        // Set to true just before hidePopover() in _onConfirm to suppress revert
+        this._pendingConfirmed = false;
+        this._onPopoverToggle = (e) => {
+            const te = e;
+            this._isOpen = te.newState === `open`;
+            if (te.newState === `open`) {
+                this._savedL = this.l;
+                this._savedC = this.c;
+                this._savedH = this.h;
+                this._savedA = this.a;
+                this._pendingL = this.l;
+                this._pendingC = this.c;
+                this._pendingH = this.h;
+                this._pendingA = this.a;
+                this._pendingConfirmed = false;
+            }
+            else if (this.mode === `confirm` && !this._pendingConfirmed) {
+                // Dismissed without confirming — reset inner picker to saved values
+                this._pickerEl?.setColour(oklchToCss(this._savedL, this._savedC, this._savedH, this._savedA));
+            }
+        };
+        this._onPickerInput = (e) => {
+            e.stopPropagation();
+            const detail = e.detail;
+            if (this.mode === `confirm`) {
+                this._pendingL = detail.l;
+                this._pendingC = detail.c;
+                this._pendingH = detail.h;
+                this._pendingA = detail.a ?? 1;
+                return;
+            }
+            this.l = detail.l;
+            this.c = detail.c;
+            this.h = detail.h;
+            this.a = detail.a ?? 1;
+            this._dispatchInput();
+        };
+        this._onPickerChange = (e) => {
+            e.stopPropagation();
+            const detail = e.detail;
+            if (this.mode === `confirm`) {
+                this._pendingL = detail.l;
+                this._pendingC = detail.c;
+                this._pendingH = detail.h;
+                this._pendingA = detail.a ?? 1;
+                return;
+            }
+            this.l = detail.l;
+            this.c = detail.c;
+            this.h = detail.h;
+            this.a = detail.a ?? 1;
+            this._dispatchChange();
+        };
+        this._onConfirm = () => {
+            this.l = this._pendingL;
+            this.c = this._pendingC;
+            this.h = this._pendingH;
+            this.a = this._pendingA;
+            this._pendingConfirmed = true;
+            this._dispatchChange();
+            try {
+                this._popupEl.hidePopover();
+            }
+            catch {
+                // Popover API not supported
+            }
+        };
+        this._onSwatchClick = async () => {
+            if (!this._everOpened) {
+                this._everOpened = true;
+                await this.updateComplete;
+            }
+            try {
+                this._popupEl.showPopover();
+            }
+            catch {
+                // Popover API not supported
+            }
+        };
+        const id = ++_instanceCounter;
+        this._uid = `cp-popup-${id}`;
+        this._anchorName = `--cp-popup-anchor-${id}`;
+        this._popupId = `cp-popup-panel-${id}`;
+    }
+    get value() {
+        return oklchToCss(this.l, this.c, this.h, this.a);
+    }
+    get _innerHidePreview() {
+        // Fluid mode hides the preview by default (swatch already shows live colour).
+        // show-preview overrides this. Confirm mode shows it by default.
+        if (this.mode === `fluid`)
+            return !this.showPreview;
+        return false;
+    }
+    get _pickerDimensions() {
+        return PICKER_SIZES[this.size] ?? PICKER_SIZES.medium;
+    }
+    setColour(colour) {
+        const c = Colour.convert(colour, `oklch-absolute`);
+        this.l = c.l;
+        this.c = c.c;
+        this.h = c.h;
+        this.a = c.opacity ?? 1;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this._applyAnchorPositioning();
+        this._updateSwatchBackground();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        const colourChanged = changedProperties.has(`l`) || changedProperties.has(`c`)
+            || changedProperties.has(`h`) || changedProperties.has(`a`);
+        if (colourChanged) {
+            this._updateSwatchBackground();
+        }
+    }
+    _applyAnchorPositioning() {
+        const swatch = this.shadowRoot?.querySelector(`.swatch`);
+        if (swatch) {
+            swatch.style.setProperty(`anchor-name`, this._anchorName);
+        }
+        if (this._popupEl) {
+            this._popupEl.style.setProperty(`position-anchor`, this._anchorName);
+        }
+    }
+    _updateSwatchBackground() {
+        const swatch = this.shadowRoot?.querySelector(`.swatch`);
+        if (swatch) {
+            swatch.style.background = swatchBackground(this.l, this.c, this.h, this.a);
+        }
+    }
+    _dispatchInput() {
+        const detail = { l: this.l, c: this.c, h: this.h, a: this.a };
+        this.dispatchEvent(new CustomEvent(`input`, { detail, bubbles: true, composed: true }));
+    }
+    _dispatchChange() {
+        const detail = { l: this.l, c: this.c, h: this.h, a: this.a };
+        this.dispatchEvent(new CustomEvent(`change`, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <button
+        class="swatch"
+        @click=${this._onSwatchClick}
+        aria-label="Pick colour: ${this.value}"
+        aria-expanded="${this._isOpen}"
+        aria-haspopup="dialog"
+      ></button>
+      <div
+        id="${this._popupId}"
+        class="popup popup-surface"
+        popover="auto"
+        role="dialog"
+        aria-label="Colour picker"
+        style="--cp-popup-min-width:${this._pickerDimensions.width}px;--cp-popup-min-height:${this._pickerDimensions.height}px"
+        @toggle=${this._onPopoverToggle}
+      >
+        ${this._everOpened
+            ? html `
+          <ixfx-colour-picker
+            .l=${this.l}
+            .c=${this.c}
+            .h=${this.h}
+            .a=${this.a}
+            style="width:${this._pickerDimensions.width}px;height:${this._pickerDimensions.height}px"
+            ?hide-preview=${this._innerHidePreview}
+            ?hide-h=${this.hideH}
+            ?hide-l=${this.hideL}
+            ?hide-c=${this.hideC}
+            ?show-a=${this.showA}
+            ?horizontal=${this.horizontal}
+            hide-tooltips
+            @input=${this._onPickerInput}
+            @change=${this._onPickerChange}
+          ></ixfx-colour-picker>
+          ${this.mode === `confirm`
+                ? html `
+            <button class="confirm-btn" @click=${this._onConfirm} aria-label="Confirm colour" title="Confirm colour">
+              ${unsafeHTML(ICON_CHECK)}
+            </button>
+          `
+                : nothing}
+        `
+            : nothing}
+      </div>
+    `;
+    }
+    static { this.styles = [popupSurfaceStyles, css `
+    :host {
+      display: inline-block;
+    }
+
+    .swatch {
+      display: inline-block;
+      width: var(--cp-popup-swatch-size, 1.5em);
+      height: var(--cp-popup-swatch-size, 1.5em);
+      border-radius: var(--radius-m, 4px);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+      padding: 0;
+      box-sizing: border-box;
+      vertical-align: middle;
+      transition: transform 0.1s ease, box-shadow 0.1s ease;
+    }
+
+    .swatch:hover {
+      transform: scale(1.1);
+    }
+
+    .swatch:focus-visible {
+      outline: 2px solid var(--accent, oklch(60% 0.15 140));
+      outline-offset: 2px;
+    }
+
+    /* Popover panel */
+    .popup {
+      display:flex;
+      flex-direction: column;
+      gap: var(--space-s);
+      /* Reset popover UA inset */
+      inset: unset;
+      margin: 0;
+
+      min-width: var(--cp-popup-min-width);
+      min-height: var(--cp-popup-min-height);
+
+      /* CSS anchor positioning — position-anchor set via inline style in JS */
+      position: fixed;
+      position-area: block-end span-inline-start;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      margin-block-start: 4px;
+
+      padding: var(--space-l);
+      z-index: 100;
+
+      /* Animate in/out */
+      opacity: 0;
+      scale: 0.97;
+      pointer-events: none;
+      transition: opacity 0.12s ease, scale 0.12s ease;
+    }
+
+    .popup:popover-open {
+      opacity: 1;
+      scale: 1;
+      pointer-events: auto;
+    }
+
+    ixfx-colour-picker {
+      display: block;
+    }
+
+    .confirm-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-block-start: var(--space-s);
+      margin-inline-start: auto;
+      width: 1.8em;
+      height: 1.8em;
+      border-radius: 50%;
+      border: none;
+      background: var(--accent, oklch(60% 0.15 140));
+      color: var(--accent-text, #fff);
+      padding: 0;
+      cursor: pointer;
+      transition: background var(--transition, 0.15s ease-out);
+    }
+
+    .confirm-btn svg {
+      width: 1.1em;
+      height: 1.1em;
+      flex-shrink: 0;
+    }
+
+    .confirm-btn:hover {
+      background: var(--accent, oklch(70% 0.15 140));
+    }
+
+    .confirm-btn:focus-visible {
+      outline: 2px solid var(--accent, oklch(60% 0.15 140));
+      outline-offset: 2px;
+    }
+  `]; }
+};
+__decorate([
+    property({ type: String })
+], ColourPickerPopup.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number })
+], ColourPickerPopup.prototype, "l", void 0);
+__decorate([
+    property({ type: Number })
+], ColourPickerPopup.prototype, "c", void 0);
+__decorate([
+    property({ type: Number })
+], ColourPickerPopup.prototype, "h", void 0);
+__decorate([
+    property({ type: Number })
+], ColourPickerPopup.prototype, "a", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `show-preview` })
+], ColourPickerPopup.prototype, "showPreview", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-h`, reflect: true })
+], ColourPickerPopup.prototype, "hideH", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-l`, reflect: true })
+], ColourPickerPopup.prototype, "hideL", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `hide-c`, reflect: true })
+], ColourPickerPopup.prototype, "hideC", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `show-a` })
+], ColourPickerPopup.prototype, "showA", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `horizontal` })
+], ColourPickerPopup.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: String })
+], ColourPickerPopup.prototype, "size", void 0);
+__decorate([
+    state()
+], ColourPickerPopup.prototype, "_isOpen", void 0);
+__decorate([
+    state()
+], ColourPickerPopup.prototype, "_everOpened", void 0);
+__decorate([
+    query(`.popup`)
+], ColourPickerPopup.prototype, "_popupEl", void 0);
+__decorate([
+    query(`ixfx-colour-picker`)
+], ColourPickerPopup.prototype, "_pickerEl", void 0);
+ColourPickerPopup = __decorate([
+    customElement(`ixfx-colour-picker-popup`)
+], ColourPickerPopup);
+export { ColourPickerPopup };
+//# sourceMappingURL=colour-picker-popup.js.map

package/dist/colour-picker/colour-picker-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-picker-popup.js","sourceRoot":"","sources":["../../src/colour-picker/colour-picker-popup.ts"],"names":[],"mappings":"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"}

package/dist/colour-picker/colour-picker.d.ts

@@ -0,0 +1,100 @@
+/**
+ * <ixfx-colour-picker> — OKLCH colour picker using CSS-gradient-rendered sliders.
+ *
+ * Properties:
+ *   l — lightness 0..1
+ *   c — chroma 0..0.4
+ *   h — hue 0..360
+ *
+ * Getters:
+ *   value — current color as CSS string e.g. "oklch(0.7 0.15 180)"
+ *
+ * Methods:
+ *   setColour(colour: Colour.Colourish) — programmatically set colour from any
+ *     ixfx-compatible format; also resets double-click defaults for all sliders.
+ *
+ * Events:
+ *   input — CustomEvent { detail: { l, c, h } }
+ *
+ * Double-click any slider label to reset that channel to the last
+ * programmatically set value (not the user-dialled value).
+ */
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import type { Range, RangeInput } from './types.js';
+import { Colour } from '@ixfx/visual';
+import { LitElement } from 'lit';
+import '../labelled-range-input/index.js';
+export declare class ColourPicker extends LitElement {
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+    hidePreview: boolean;
+    hideH: boolean;
+    hideL: boolean;
+    hideC: boolean;
+    showA: boolean;
+    horizontal: boolean;
+    slidersVertical: boolean;
+    hideTooltips: boolean;
+    private _valueAttr;
+    rangeLAttr: string | null;
+    rangeCAttr: string | null;
+    rangeHAttr: string | null;
+    rangeAAttr: string | null;
+    private _ranges;
+    _sliderL: HTMLElement;
+    _sliderC: HTMLElement;
+    _sliderH: HTMLElement;
+    _sliderA: HTMLElement;
+    _previewEl: HTMLElement;
+    private _defaultL;
+    private _defaultC;
+    private _defaultH;
+    private _defaultA;
+    private readonly _userInitiated;
+    get value(): string;
+    set value(colourString: string);
+    /**
+     * Set the colour from any ixfx-compatible format (CSS string, OkLch object,
+     * HSL object, etc.). Also updates the double-click reset defaults for all
+     * sliders.
+     */
+    setColour(colour: Colour.Colourish): void;
+    get rangeL(): Range;
+    set rangeL(range: RangeInput);
+    get rangeC(): Range;
+    set rangeC(range: RangeInput);
+    get rangeH(): Range;
+    set rangeH(range: RangeInput);
+    get rangeA(): Range;
+    set rangeA(range: RangeInput);
+    setRangeL(range: RangeInput): void;
+    setRangeC(range: RangeInput): void;
+    setRangeH(range: RangeInput): void;
+    setRangeA(range: RangeInput): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _applyRangeInput;
+    private _coerceRangeInput;
+    private _setRangeFromAttribute;
+    private _setRange;
+    private _getRange;
+    private _parseRangeString;
+    private _normalizeRange;
+    private _clampToRange;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    _updateGradients(): void;
+    _onInput: (e: Event, channel: `l` | `c` | `h` | `a`) => void;
+    _onChange: (e: Event, channel: `l` | `c` | `h` | `a`) => void;
+    _dispatchInput(): void;
+    _dispatchChange(): void;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-colour-picker': ColourPicker;
+    }
+}
+//# sourceMappingURL=colour-picker.d.ts.map

package/dist/colour-picker/colour-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-picker.d.ts","sourceRoot":"","sources":["../../src/colour-picker/colour-picker.ts"],"names":[],"mappings":"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"}