igniteui-webcomponents 7.3.0-beta.1 → 7.3.0

package/components/color-picker/color-picker.js

@@ -0,0 +1,620 @@
+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;
+};
+var IgcColorPickerComponent_1;
+import { html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { addAriaProjector } from '#internals/controllers/aria-projection.js';
+import { addKeybindings, altKey, arrowDown, arrowRight, arrowUp, endKey, escapeKey, } from '#internals/controllers/key-bindings.js';
+import { addRootClickController } from '#internals/controllers/root-click.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { shadowOptions } from '#internals/decorators/shadow-options.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';
+import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { partMap } from '#internals/part-map.js';
+import { isEmpty } from '#internals/utils/arrays.js';
+import { addSafeEventListener, focusLeftHost, getElementFromPath, stopPropagation, } from '#internals/utils/events.js';
+import { bindIf } from '#internals/utils/lit.js';
+import { asNumber, clamp } from '#internals/utils/math.js';
+import { addThemingController } from '#theming/theming-controller.js';
+import IgcButtonComponent from '../button/button.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import IgcDividerComponent from '../divider/divider.js';
+import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
+import IgcInputComponent from '../input/input.js';
+import IgcPopoverComponent from '../popover/popover.js';
+import IgcSelectComponent from '../select/select.js';
+import IgcValidationContainerComponent from '../validation-container/validation-container.js';
+import IgcVisuallyHiddenComponent from '../visually-hidden/visually-hidden.js';
+import { isValidColor, normalizeColor } from './common.js';
+import { ColorModel, getContext } from './model.js';
+import IgcPickerCanvasComponent from './picker-canvas.js';
+import { styles } from './themes/color-picker.base.css.js';
+import { styles as shared } from './themes/shared/color-picker.common.css.js';
+import { all } from './themes/themes.js';
+import { colorPickerValidators } from './validators.js';
+const Slots = setSlots('value-missing', 'custom-error', 'invalid', 'helper-text');
+const formatPlaceholders = {
+    hex: '#rrggbb',
+    rgb: 'rgb(r g b)',
+    hsl: 'hsl(h s% l%)',
+};
+const nonDigits = /\D/g;
+function caretLimit(text) {
+    return Math.max(text.length - 1, 0);
+}
+function getEyeDropper() {
+    return globalThis.EyeDropper;
+}
+let IgcColorPickerComponent = class IgcColorPickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxComponent)) {
+    static { IgcColorPickerComponent_1 = this; }
+    static { this.tagName = 'igc-color-picker'; }
+    static { this.styles = [styles, shared]; }
+    static register() {
+        registerComponent(IgcColorPickerComponent_1, IgcInputComponent, IgcPopoverComponent, IgcFocusTrapComponent, IgcSelectComponent, IgcPickerCanvasComponent, IgcDividerComponent, IgcButtonComponent, IgcIconButtonComponent, IgcValidationContainerComponent, IgcVisuallyHiddenComponent);
+    }
+    get __validators() {
+        return colorPickerValidators;
+    }
+    get _isInputMode() {
+        return this.mode === 'input';
+    }
+    set value(value) {
+        this._color = ColorModel.parse(value);
+        this._updateColor();
+    }
+    get value() {
+        return this._formValue.value;
+    }
+    constructor() {
+        super();
+        this._slots = addSlotController(this, { slots: Slots });
+        this._rootClickController = addRootClickController(this, {
+            onHide: this._handleClosing,
+        });
+        this._formValue = createFormValueState(this, {
+            initialValue: '',
+        });
+        this._alphaRef = createRef();
+        this._alphaInputRef = createRef();
+        this._canvasRef = createRef();
+        this._hueRef = createRef();
+        this._anchorRef = createRef();
+        this._supportsEyeDropper = Boolean(getEyeDropper());
+        this._color = ColorModel.empty();
+        this._oldValue = '';
+        this._appliedProperties = new Map();
+        this.format = 'hex';
+        this.hideFormats = false;
+        this.showAlpha = false;
+        this.mode = 'default';
+        this.swatches = [];
+        addThemingController(this, all);
+        addSafeEventListener(this, 'focusin', this._handleFocusIn);
+        addSafeEventListener(this, 'focusout', this._handleFocusOut);
+        addKeybindings(this, { skip: () => this.disabled })
+            .set(escapeKey, this._handleKeyboardClosing)
+            .set([altKey, arrowDown], this._handleAnchorClick)
+            .set([altKey, arrowUp], this._handleKeyboardClosing);
+        addKeybindings(this, {
+            skip: () => this.disabled || !this._alphaInputRef.value,
+            ref: this._alphaInputRef,
+            bindingDefaults: { repeat: true },
+        })
+            .set(arrowUp, () => this._handleAlphaInputSpin(1))
+            .set(arrowDown, () => this._handleAlphaInputSpin(-1))
+            .set(arrowRight, this._handleAlphaInputCaretForward, {
+            preventDefault: false,
+        })
+            .set(endKey, this._handleAlphaInputCaretForward, {
+            preventDefault: false,
+        });
+        addAriaProjector(this, {
+            target: () => (this._isInputMode ? this._anchorRef.value : null),
+            state: () => ({
+                hasPopup: 'dialog',
+                expanded: `${this.open}`,
+                labelledBy: this._internals.labels,
+                describedBy: this._helperText ? [this._helperText] : null,
+            }),
+        });
+    }
+    update(props) {
+        if (props.has('open')) {
+            this._rootClickController.update();
+        }
+        if (this.hasUpdated && props.has('format')) {
+            this._formValue.setValueAndFormState(this._color.asString(this.format));
+        }
+        this._applyColorProperties();
+        super.update(props);
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has('open') || props.has('value')) {
+            requestAnimationFrame(() => this._syncCanvasPosition());
+        }
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        if (this._isInputMode) {
+            const input = this._anchorRef.value;
+            input?.['formResetCallback']();
+        }
+    }
+    _handleClosing() {
+        this._hide(true);
+    }
+    async _handleKeyboardClosing() {
+        if (await this._hide(true)) {
+            this._anchorRef.value?.focus();
+        }
+    }
+    _handleFocusIn(event) {
+        if (focusLeftHost(this, event)) {
+            this._oldValue = this._alphaColor;
+        }
+    }
+    _handleFocusOut(event) {
+        if (!focusLeftHost(this, event)) {
+            return;
+        }
+        this._handleBlur();
+        if (this._alphaColor !== this._oldValue) {
+            this._oldValue = this._alphaColor;
+            this.emitEvent('igcChange', { detail: this.value });
+        }
+    }
+    _handleCanvasColorPicked(event) {
+        this._color.setSaturationAndValue(event.detail.x, 100 - event.detail.y);
+        this._updateColor();
+        this._emitInputEvent();
+    }
+    _handleHueValueChange(event) {
+        stopPropagation(event);
+        this._color.h = asNumber(this._hueRef.value?.value);
+        this._updateColor();
+        this._emitInputEvent();
+    }
+    _handleAlphaSliderValueChange(event) {
+        stopPropagation(event);
+        this._setAlpha(asNumber(this._alphaRef.value?.value));
+    }
+    _handleAlphaInputEdit(event) {
+        const input = this._alphaInputRef.value;
+        const native = getElementFromPath('input', event);
+        if (!input || !native)
+            return;
+        const caret = native.selectionStart ?? native.value.length;
+        const typed = native.value.slice(0, caret).replace(nonDigits, '').length;
+        const digits = native.value.replace(nonDigits, '');
+        const percent = clamp(asNumber(digits), 0, 100);
+        const text = digits ? `${percent}%` : '';
+        this._writeAlphaText(input, text, Math.min(typed, caretLimit(text)));
+        if (digits) {
+            this._setAlpha(percent);
+        }
+    }
+    _handleAlphaInputCaret(event) {
+        const native = getElementFromPath('input', event);
+        if (!native)
+            return;
+        const limit = caretLimit(native.value);
+        native.setSelectionRange(Math.min(native.selectionStart ?? 0, limit), Math.min(native.selectionEnd ?? 0, limit));
+    }
+    _handleAlphaInputSpin(increment) {
+        const input = this._alphaInputRef.value;
+        const percent = clamp(this._alphaPercent + increment, 0, 100);
+        if (!input || percent === this._alphaPercent)
+            return;
+        this._writeAlphaText(input, `${percent}%`);
+        this._setAlpha(percent);
+    }
+    _handleAlphaInputCaretForward(event) {
+        const native = getElementFromPath('input', event);
+        if (!native)
+            return;
+        const limit = caretLimit(native.value);
+        if (event.key === endKey || (native.selectionEnd ?? 0) >= limit) {
+            event.preventDefault();
+            native.setSelectionRange(limit, limit);
+        }
+    }
+    _handleAlphaInputChange(event) {
+        stopPropagation(event);
+        const input = event.target;
+        if (!input.value) {
+            input.value = `${this._alphaPercent}%`;
+        }
+    }
+    _handleFormatChange(event) {
+        stopPropagation(event);
+        this.format = event.detail.value;
+    }
+    _handleColorInputChange(event) {
+        stopPropagation(event);
+        const input = event.target;
+        const value = normalizeColor(event.detail);
+        const cleared = !value;
+        if (!cleared && !isValidColor(value, getContext())) {
+            input.value = this._color.asString(this.format);
+            return;
+        }
+        this._color = cleared ? ColorModel.empty() : ColorModel.parse(value);
+        this._updateColor();
+        this._syncCanvasPosition();
+    }
+    _handleEyeDropperClick() {
+        const EyeDropper = getEyeDropper();
+        if (!EyeDropper)
+            return;
+        new EyeDropper()
+            .open()
+            .then((result) => {
+            this.value = result.sRGBHex;
+            this._emitInputEvent();
+        })
+            .catch(() => { });
+    }
+    _handleCopy() {
+        navigator.clipboard?.writeText(this.value).catch(() => { });
+    }
+    _handleSwatchClick(event) {
+        const swatch = getElementFromPath('button[part="swatch"]', event);
+        const color = swatch?.dataset.color;
+        if (color) {
+            this.value = color;
+            this._emitInputEvent();
+        }
+    }
+    get _alphaColor() {
+        return this._color.asString('rgb', true);
+    }
+    get _opaqueColor() {
+        return new ColorModel(this._color.toRGB()).asString('rgb');
+    }
+    get _alphaPercent() {
+        return Math.round(this._color.alpha * 100);
+    }
+    get _currentColor() {
+        return `hsl(${this._color.h} 100% 50%)`;
+    }
+    _applyColorProperties() {
+        const properties = {
+            '--_current-color': this._currentColor,
+            '--_selected-color': this._opaqueColor,
+        };
+        for (const [name, value] of Object.entries(properties)) {
+            if (this._appliedProperties.get(name) !== value) {
+                this._appliedProperties.set(name, value);
+                this.style.setProperty(name, value);
+            }
+        }
+    }
+    _writeAlphaText(input, text, caret = caretLimit(text)) {
+        input.setRangeText(text, 0, input.value.length);
+        input.setSelectionRange(caret, caret);
+    }
+    _setAlpha(percent) {
+        const alpha = clamp(percent, 0, 100) / 100;
+        if (this._color.alpha === alpha) {
+            return;
+        }
+        this._color.alpha = alpha;
+        this._updateColor();
+        this._emitInputEvent();
+    }
+    _updateColor() {
+        this._formValue.setValueAndFormState(this._color.asString(this.format));
+        this.requestUpdate();
+    }
+    _syncCanvasPosition() {
+        if (!this._canvasRef.value || !this.open)
+            return;
+        const rect = this._canvasRef.value.getBoundingClientRect();
+        const { width: markerWidth, height: markerHeight } = this._canvasRef.value.getMarkerDimensions();
+        const [, s, v] = this._color.toHSV();
+        const x = (s / 100) * rect.width - markerWidth;
+        const y = ((100 - v) / 100) * rect.height - markerHeight;
+        this._canvasRef.value.x = x;
+        this._canvasRef.value.y = y;
+    }
+    _emitInputEvent() {
+        this.emitEvent('igcInput', { detail: this.value });
+    }
+    _renderCanvasGradient() {
+        const [, saturation, brightness] = this._color.toHSV();
+        return html `
+      <igc-picker-canvas
+        exportparts="marker, dragging"
+        part="picker-canvas"
+        ${ref(this._canvasRef)}
+        @igcColorPicked=${this._handleCanvasColorPicked}
+        currentColor=${this._currentColor}
+        markerColor=${this._opaqueColor}
+        .saturation=${saturation}
+        .brightness=${brightness}
+      >
+      </igc-picker-canvas>
+    `;
+    }
+    _renderHueSlider() {
+        return html `
+      <input
+        ${ref(this._hueRef)}
+        aria-label="Hue"
+        type="range"
+        part="hue"
+        min="0"
+        max="360"
+        .value=${String(Math.round(this._color.h))}
+        @input=${this._handleHueValueChange}
+        @change=${stopPropagation}
+      />
+    `;
+    }
+    _renderIconButton(part, icon, label, handler, disabled = false) {
+        return html `
+      <igc-icon-button
+        part=${part}
+        variant="flat"
+        name=${icon}
+        ?disabled=${disabled}
+        @click=${handler}
+      >
+        <igc-visually-hidden>${label}</igc-visually-hidden>
+      </igc-icon-button>
+    `;
+    }
+    _renderPickerButtons() {
+        return html `
+      <div part="buttons">
+        ${this._renderIconButton('copy', 'copy_content', 'Copy color value to clipboard', this._handleCopy)}
+        ${this._renderIconButton('eye-dropper', 'eye_dropper', 'Pick a color from the screen', this._handleEyeDropperClick, !this._supportsEyeDropper)}
+      </div>
+    `;
+    }
+    _renderAlphaRow() {
+        return html `
+      <input
+        ${ref(this._alphaRef)}
+        aria-label="Alpha slider"
+        type="range"
+        part="alpha"
+        min="0"
+        max="100"
+        .value=${String(this._alphaPercent)}
+        @input=${this._handleAlphaSliderValueChange}
+        @change=${stopPropagation}
+      />
+
+      <igc-visually-hidden>
+        <label for="alpha">Alpha value</label>
+      </igc-visually-hidden>
+
+      <igc-input
+        ${ref(this._alphaInputRef)}
+        id="alpha"
+        name="alpha"
+        placeholder="Alpha value"
+        inputmode="numeric"
+        part="alpha-input"
+        outlined
+        type="text"
+        .value=${live(`${this._alphaPercent}%`)}
+        @input=${this._handleAlphaInputEdit}
+        @focusin=${this._handleAlphaInputCaret}
+        @click=${this._handleAlphaInputCaret}
+        @keyup=${this._handleAlphaInputCaret}
+        @igcChange=${this._handleAlphaInputChange}
+      ></igc-input>
+    `;
+    }
+    _renderSelect() {
+        return html `
+      <igc-visually-hidden>
+        <label for="format-select">Color format</label>
+      </igc-visually-hidden>
+
+      <igc-select
+        id="format-select"
+        part="format-select"
+        placeholder="Color format"
+        name="format"
+        outlined
+        .value=${this.format}
+        @igcChange=${this._handleFormatChange}
+      >
+        <igc-select-item value="hex">Hex</igc-select-item>
+        <igc-select-item value="rgb">RGB</igc-select-item>
+        <igc-select-item value="hsl">HSL</igc-select-item>
+      </igc-select>
+    `;
+    }
+    _renderInputsRow() {
+        return html `
+      ${cache(this.hideFormats ? nothing : this._renderSelect())}
+      <igc-visually-hidden>
+        <label for="color-input"> Color value input </label>
+      </igc-visually-hidden>
+
+      <igc-input
+        id="color-input"
+        name="color-input"
+        placeholder=${formatPlaceholders[this.format]}
+        outlined
+        .value=${live(this._color.asString(this.format))}
+        @igcChange=${this._handleColorInputChange}
+      ></igc-input>
+    `;
+    }
+    _renderSwatches() {
+        return !isEmpty(this.swatches)
+            ? html `
+          <igc-divider></igc-divider>
+          <div part="swatches" @click=${this._handleSwatchClick}>
+            ${this.swatches.map((color) => html `
+                <button
+                  type="button"
+                  part="swatch"
+                  data-color=${color}
+                  aria-label=${color}
+                  style="background-color: ${color}"
+                ></button>
+              `)}
+          </div>
+        `
+            : nothing;
+    }
+    get _anchorParts() {
+        return partMap({
+            anchor: true,
+            empty: this._color.isEmpty,
+            'input-mode': this._isInputMode,
+        });
+    }
+    _previewStyle() {
+        const color = this._alphaColor;
+        return bindIf(color, styleMap({
+            '--_alpha-preview': color,
+            '--_color-preview': this._opaqueColor,
+        }));
+    }
+    _renderButtonAnchor() {
+        return html `
+      <button
+        ${ref(this._anchorRef)}
+        id="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-controls="picker"
+        aria-expanded=${this.open}
+        aria-describedby="helper-text"
+        part=${this._anchorParts}
+        slot="anchor"
+        style=${this._previewStyle()}
+        ?disabled=${this.disabled}
+        @click=${this._handleAnchorClick}
+      >
+        <igc-visually-hidden>Open color picker</igc-visually-hidden>
+      </button>
+    `;
+    }
+    _renderInputAnchor() {
+        return html `
+      <igc-input
+        ${ref(this._anchorRef)}
+        slot="anchor"
+        outlined
+        placeholder=${formatPlaceholders[this.format]}
+        label=${ifDefined(this.label)}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        .value=${live(this.value)}
+        .invalid=${this.invalid}
+        @igcChange=${this._handleColorInputChange}
+      >
+        <div slot="prefix">
+          <button
+            type="button"
+            part=${this._anchorParts}
+            aria-label="Open color picker"
+            aria-haspopup="dialog"
+            aria-controls="picker"
+            aria-expanded=${this.open}
+            style=${this._previewStyle()}
+            ?disabled=${this.disabled}
+            @click=${this._handleAnchorClick}
+          ></button>
+        </div>
+      </igc-input>
+    `;
+    }
+    _renderAnchor() {
+        return this._isInputMode
+            ? this._renderInputAnchor()
+            : this._renderButtonAnchor();
+    }
+    _renderHelperText() {
+        return this._renderValidationContainer({
+            id: 'helper-text',
+            hasHelperText: true,
+        });
+    }
+    _renderPicker() {
+        return html `
+      <igc-focus-trap ?disabled=${!this.open} .inert=${!this.open}>
+        <div
+          id="picker"
+          part="picker"
+          role="dialog"
+          aria-label="Color picker"
+          aria-modal="false"
+        >
+          ${this._renderCanvasGradient()}
+          <div part="main-row">
+            ${this._renderHueSlider()}${this._renderPickerButtons()}
+          </div>
+          ${this.showAlpha
+            ? html `<div part="alpha-row">${this._renderAlphaRow()}</div>`
+            : nothing}
+          <div part="inputs-row">${this._renderInputsRow()}</div>
+          ${this._renderSwatches()}
+        </div>
+      </igc-focus-trap>
+    `;
+    }
+    render() {
+        return html `
+      <div part="color-picker">
+        <igc-popover ?open=${this.open} shift flip>
+          ${this._renderAnchor()}${this._renderPicker()}
+        </igc-popover>
+        ${!this._isInputMode && this.label
+            ? html `<label part="label" for="trigger">${this.label}</label>`
+            : nothing}
+        ${this._renderHelperText()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    query('#helper-text')
+], IgcColorPickerComponent.prototype, "_helperText", void 0);
+__decorate([
+    property()
+], IgcColorPickerComponent.prototype, "label", void 0);
+__decorate([
+    property()
+], IgcColorPickerComponent.prototype, "value", null);
+__decorate([
+    property()
+], IgcColorPickerComponent.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-formats' })
+], IgcColorPickerComponent.prototype, "hideFormats", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-alpha' })
+], IgcColorPickerComponent.prototype, "showAlpha", void 0);
+__decorate([
+    property({ reflect: true })
+], IgcColorPickerComponent.prototype, "mode", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcColorPickerComponent.prototype, "swatches", void 0);
+IgcColorPickerComponent = IgcColorPickerComponent_1 = __decorate([
+    shadowOptions({ delegatesFocus: true })
+], IgcColorPickerComponent);
+export default IgcColorPickerComponent;
+//# sourceMappingURL=color-picker.js.map