@tylertech/forge 2.0.0

package/esm/color-picker/color-picker-foundation.js

@@ -0,0 +1,235 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { debounce } from '@tylertech/forge-core';
+import { ColorPickerValueType, COLOR_PICKER_CONSTANTS, DEFAULT_COLOR } from './color-picker-constants';
+import { ColorPickerGradientSlider } from './color-picker-gradient-slider';
+import { ColorPickerSlider } from './color-picker-slider';
+import { formatHex, formatRgba, hexToRgba, hsvaToRgba, isValidHex, isValidHSVA, isValidRGBA, rgbaToHex, rgbaToHsva } from './color-picker-utils';
+export class ColorPickerFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._value = null;
+        this._allowOpacity = true;
+        this._hex = DEFAULT_COLOR;
+        this._hsva = { h: 0, s: 0, v: 0, a: 1 };
+        this._rgba = { r: 0, g: 0, b: 0, a: 1 };
+        this._debounceChangeEvent = false;
+        this._valueType = ColorPickerValueType.HEX;
+        this._gradientSliderChangedListener = (x, y) => this._onGradientSliderChanged(x, y);
+        this._hueSliderChangedListener = value => this._onHueSliderChanged(value);
+        this._opacitySliderChangedListener = value => this._onOpacitySliderChanged(value);
+        this._typeClickListener = evt => this._onTypeClicked(evt);
+        this._hexInputChangedListener = evt => this._onHexInputChanged();
+        this._rgbaInputChangedListener = evt => this._onRgbaInputChanged();
+        this._hsvaInputChangedListener = evt => this._onHsvaInputChanged();
+    }
+    initialize() {
+        this._applyChangeEventTrigger();
+        this._adapter.setTypeClickListener(this._typeClickListener);
+        this._adapter.setHexInputListener('input', this._hexInputChangedListener);
+        this._adapter.setRgbaInputListener('input', this._rgbaInputChangedListener);
+        this._adapter.setHsvaInputListener('input', this._hsvaInputChangedListener);
+        this._gradientSlider = new ColorPickerGradientSlider(this._adapter.getGradientElement(), this._gradientSliderChangedListener);
+        this._hueSlider = new ColorPickerSlider(this._adapter.getHueSliderElement(), this._hueSliderChangedListener);
+        this._opacitySlider = new ColorPickerSlider(this._adapter.getOpacitySliderElement(), this._opacitySliderChangedListener);
+        this._initializeOpacity();
+        this._setColorFromHex();
+        this._adapter.setActiveValueType(this._valueType);
+    }
+    disconnect() {
+        this._adapter.removeTypeClickListener(this._typeClickListener);
+        this._adapter.removeHexInputListener('input', this._hexInputChangedListener);
+        this._adapter.removeRgbaInputListener('input', this._hexInputChangedListener);
+        this._adapter.removeHsvaInputListener('input', this._hexInputChangedListener);
+        this._gradientSlider.destroy();
+        this._hueSlider.destroy();
+        this._opacitySlider.destroy();
+    }
+    _applyChangeEventTrigger() {
+        if (this._debounceChangeEvent) {
+            this._triggerChangeEvent = debounce((type, source) => {
+                this._emitChangeEvent(type, source);
+            }, COLOR_PICKER_CONSTANTS.numbers.CHANGE_EVENT_DEBOUNCE_THRESHOLD, false);
+        }
+        else {
+            this._triggerChangeEvent = (type, source) => this._emitChangeEvent(type, source);
+        }
+    }
+    _initializeOpacity() {
+        this._hsva.a = 1;
+        this._adapter.toggleOpacityControls(this._allowOpacity);
+        this._render();
+    }
+    _onTypeClicked(evt) {
+        if (this._valueType === ColorPickerValueType.HEX) {
+            this._valueType = ColorPickerValueType.RGBA;
+        }
+        else if (this._valueType === ColorPickerValueType.RGBA) {
+            this._valueType = ColorPickerValueType.HSVA;
+        }
+        else if (this._valueType === ColorPickerValueType.HSVA) {
+            this._valueType = ColorPickerValueType.HEX;
+        }
+        this._adapter.setActiveValueType(this._valueType);
+        this._adapter.focusValueInput(this._valueType);
+    }
+    _onHexInputChanged() {
+        const value = this._adapter.getHexInputValue();
+        if (isValidHex(value)) {
+            this.value = value;
+            this._triggerChangeEvent('input', 'hex');
+        }
+    }
+    _onRgbaInputChanged() {
+        const value = this._adapter.getRgbaInputValue();
+        if (isValidRGBA(value)) {
+            this.value = rgbaToHex(value);
+            this._triggerChangeEvent('input', 'rgba');
+        }
+    }
+    _onHsvaInputChanged() {
+        const value = this._adapter.getHsvaInputValue();
+        if (isValidHSVA(value)) {
+            this.value = rgbaToHex(hsvaToRgba(value));
+            this._triggerChangeEvent('input', 'hsva');
+        }
+    }
+    _setColorFromHex() {
+        this._rgba = hexToRgba(this._hex);
+        this._hsva = rgbaToHsva(this._rgba);
+        this._gradientSlider.setValue(this._hsva.s, this._hsva.v);
+        this._hueSlider.setValue(parseFloat((this._hsva.h / 360).toFixed(2)));
+        this._opacitySlider.setValue(this._hsva.a);
+        this._render();
+    }
+    _onGradientSliderChanged(x, y) {
+        this._hsva.s = x;
+        this._hsva.v = y;
+        this._syncColors();
+        this._render();
+        this._triggerChangeEvent('slider', 'gradient');
+    }
+    _onHueSliderChanged(value) {
+        this._hsva.h = parseInt((360 * value).toString(), 10);
+        this._syncColors();
+        this._setGradientColor();
+        this._render();
+        this._triggerChangeEvent('slider', 'hue');
+    }
+    _onOpacitySliderChanged(value) {
+        this._hsva.a = value;
+        this._syncColors();
+        this._render();
+        this._triggerChangeEvent('slider', 'opacity');
+    }
+    _setGradientColor() {
+        const rgba = hsvaToRgba({ h: this._hsva.h, s: 100, v: 100, a: 1 });
+        this._adapter.setGradientColor(`rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`);
+    }
+    _syncColors() {
+        this._rgba = hsvaToRgba(this._hsva);
+        this._hex = rgbaToHex(this._rgba);
+        this._value = this._hex || null;
+    }
+    _render() {
+        this._setGradientColor();
+        this._adapter.setPreviewColor(formatRgba(this._rgba));
+        this._adapter.setHexInputValue(this._getFormattedHex());
+        this._adapter.setRgbaInputValue(this._rgba);
+        this._adapter.setHsvaInputValue(this._hsva);
+        this._adapter.updateA11y(this._hsva.h, Math.round(this._hsva.a * 100));
+    }
+    _getFormattedHex() {
+        return formatHex(this._hex, false);
+    }
+    _emitChangeEvent(type, source) {
+        const data = {
+            type,
+            source,
+            hex: formatHex(this._hex, false).replace(/^#/, ''),
+            rgba: this._rgba,
+            hsva: this._hsva
+        };
+        if (this._allowOpacity) {
+            data.alpha = this._hsva.a;
+        }
+        this._adapter.emitHostEvent(COLOR_PICKER_CONSTANTS.events.CHANGE, data);
+    }
+    get value() {
+        return this._getFormattedHex();
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value || DEFAULT_COLOR;
+            if (!isValidHex(this._value)) {
+                throw new Error('Invalid hex value provided.');
+            }
+            this._hex = this._value.replace(/^#/, '');
+            this._setColorFromHex();
+            this._adapter.setHostAttribute(COLOR_PICKER_CONSTANTS.attributes.VALUE, this._value);
+        }
+    }
+    get rgba() {
+        return !!this._rgba ? Object.assign({}, this._rgba) : null;
+    }
+    set rgba(value) {
+        if (value) {
+            if (isValidRGBA(value)) {
+                this.value = rgbaToHex(value);
+            }
+        }
+        else {
+            this.value = null;
+        }
+    }
+    get hsva() {
+        return !!this._hsva ? Object.assign({}, this._hsva) : null;
+    }
+    set hsva(value) {
+        if (value) {
+            if (isValidHSVA(value)) {
+                this.value = rgbaToHex(hsvaToRgba(value));
+            }
+        }
+        else {
+            this.value = null;
+        }
+    }
+    get opacity() {
+        return this._hsva ? this._hsva.a : null;
+    }
+    set opacity(value) {
+        if (this._hsva.a !== value) {
+            if (value !== null && value !== undefined && this._allowOpacity) {
+                if (value >= 0 && value <= 1) {
+                    this._hsva.a = value;
+                    this._opacitySlider.setValue(this._hsva.a);
+                    this._syncColors();
+                    this._render();
+                }
+                else {
+                    console.warn(`The provided opacity value (${value}) must be between 0 and 1.`);
+                }
+            }
+        }
+    }
+    get allowOpacity() {
+        return this._allowOpacity;
+    }
+    set allowOpacity(value) {
+        this._allowOpacity = value;
+        this._initializeOpacity();
+    }
+    get debounceChangeEvent() {
+        return this._debounceChangeEvent;
+    }
+    set debounceChangeEvent(value) {
+        if (this._debounceChangeEvent !== value) {
+            this._debounceChangeEvent = value;
+            this._applyChangeEventTrigger();
+        }
+    }
+}

package/esm/color-picker/color-picker-gradient-slider.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare class ColorPickerGradientSlider {
+    private _rootElement;
+    private _changeListener;
+    private _xPercent;
+    private _yPercent;
+    private _thumbElement;
+    private _keydownListener;
+    private _downListener;
+    private _moveListener;
+    private _upListener;
+    constructor(_rootElement: HTMLElement, _changeListener: (x: number, y: number) => void);
+    destroy(): void;
+    setValue(saturation: number, value: number): void;
+    private _initialize;
+    private _listen;
+    private _unlisten;
+    private _onKeydown;
+    private _onDown;
+    private _onMove;
+    private _onUp;
+    private _updateThumbPosition;
+    private _calculateSliderPercent;
+    private _setThumbPosition;
+    private _notify;
+}

package/esm/color-picker/color-picker-gradient-slider.js

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
+import { relativeCoords } from './color-picker-utils';
+export class ColorPickerGradientSlider {
+    constructor(_rootElement, _changeListener) {
+        this._rootElement = _rootElement;
+        this._changeListener = _changeListener;
+        this._keydownListener = evt => this._onKeydown(evt);
+        this._downListener = evt => this._onDown(evt);
+        this._moveListener = evt => this._onMove(evt);
+        this._upListener = evt => this._onUp(evt);
+        this._initialize();
+    }
+    destroy() {
+        this._unlisten();
+    }
+    setValue(saturation, value) {
+        window.requestAnimationFrame(() => {
+            const bounds = this._rootElement.getBoundingClientRect();
+            this._xPercent = Math.round(bounds.width * (saturation / 100));
+            this._yPercent = bounds.height - Math.round(bounds.height * (value / 100));
+            this._setThumbPosition(this._xPercent, this._yPercent);
+        });
+    }
+    _initialize() {
+        this._thumbElement = this._rootElement.querySelector(COLOR_PICKER_CONSTANTS.selectors.GRADIENT_THUMB);
+        this._listen();
+        this._setThumbPosition(this._xPercent, this._yPercent);
+    }
+    _listen() {
+        this._rootElement.addEventListener('keydown', this._keydownListener);
+        this._rootElement.addEventListener('mousedown', this._downListener);
+        this._rootElement.addEventListener('touchstart', this._downListener);
+    }
+    _unlisten() {
+        this._rootElement.removeEventListener('keydown', this._keydownListener);
+        this._rootElement.removeEventListener('mousedown', this._downListener);
+        this._rootElement.removeEventListener('touchstart', this._downListener);
+        document.removeEventListener('mousemove', this._moveListener);
+        document.removeEventListener('touchmove', this._moveListener);
+        document.removeEventListener('mouseup', this._upListener);
+        document.removeEventListener('touchend', this._upListener);
+    }
+    _onKeydown(evt) {
+        const isEnterKey = evt.key === 'Enter' || evt.keyCode === 13;
+        const isArrowLeftKey = evt.key === 'ArrowLeft' || evt.keyCode === 37;
+        const isArrowUpKey = evt.key === 'ArrowUp' || evt.keyCode === 38;
+        const isArrowRightKey = evt.key === 'ArrowRight' || evt.keyCode === 39;
+        const isArrowDownKey = evt.key === 'ArrowDown' || evt.keyCode === 40;
+        const bounds = this._rootElement.getBoundingClientRect();
+        if (isArrowDownKey) {
+            evt.preventDefault();
+            this._yPercent++;
+        }
+        else if (isArrowUpKey) {
+            evt.preventDefault();
+            this._yPercent--;
+        }
+        else if (isArrowLeftKey) {
+            evt.preventDefault();
+            this._xPercent--;
+        }
+        else if (isArrowRightKey) {
+            evt.preventDefault();
+            this._xPercent++;
+        }
+        else if (isEnterKey) {
+            evt.preventDefault();
+            // TODO(kieran.nichols): Select the current color
+        }
+        else {
+            return;
+        }
+        if (this._xPercent > bounds.width) {
+            this._xPercent = bounds.width;
+        }
+        else if (this._xPercent < 0) {
+            this._xPercent = 0;
+        }
+        if (this._yPercent > bounds.height) {
+            this._yPercent = bounds.height;
+        }
+        else if (this._yPercent < 0) {
+            this._yPercent = 0;
+        }
+        this._setThumbPosition(this._xPercent, this._yPercent);
+        this._notify();
+    }
+    _onDown(evt) {
+        evt.preventDefault();
+        document.addEventListener('mousemove', this._moveListener);
+        document.addEventListener('touchmove', this._moveListener);
+        document.addEventListener('mouseup', this._upListener);
+        document.addEventListener('touchend', this._upListener);
+        this._updateThumbPosition(evt);
+    }
+    _onMove(evt) {
+        evt.preventDefault();
+        this._updateThumbPosition(evt);
+    }
+    _onUp(evt) {
+        document.removeEventListener('mousemove', this._moveListener);
+        document.removeEventListener('touchmove', this._moveListener);
+        document.removeEventListener('mouseup', this._upListener);
+        document.removeEventListener('touchend', this._upListener);
+        this._updateThumbPosition(evt);
+        this._thumbElement.focus();
+    }
+    _updateThumbPosition(evt) {
+        const isMouseEvent = /^mouse/.test(evt.type);
+        const x = isMouseEvent ? evt.clientX : evt.changedTouches[0].clientX;
+        const y = isMouseEvent ? evt.clientY : evt.changedTouches[0].clientY;
+        const coords = this._calculateSliderPercent(x, y);
+        this._setThumbPosition(coords.x, coords.y);
+        this._xPercent = parseInt(((coords.x / coords.width) * 100).toString(), 10);
+        this._yPercent = Math.abs(parseInt(((coords.y / coords.height) * 100).toString(), 10) - 100);
+        this._notify();
+    }
+    _calculateSliderPercent(absX, absY) {
+        return relativeCoords(absX, absY, this._rootElement);
+    }
+    _setThumbPosition(xPercent, yPercent) {
+        this._thumbElement.style.left = `${xPercent}px`;
+        this._thumbElement.style.top = `${yPercent}px`;
+    }
+    _notify() {
+        if (typeof this._changeListener === 'function') {
+            this._changeListener(this._xPercent, this._yPercent);
+        }
+    }
+}

package/esm/color-picker/color-picker-slider.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export interface IColorPickerSliderOptions {
+    min: number;
+    max: number;
+    step: number;
+    change: (value: number) => void;
+}
+export declare class ColorPickerSlider {
+    private _rootElement;
+    private _changeListener;
+    private _percent;
+    private _min;
+    private _max;
+    private _step;
+    private _thumbElement;
+    private _keydownListener;
+    private _downListener;
+    private _moveListener;
+    private _upListener;
+    constructor(_rootElement: HTMLElement, _changeListener: (value: number) => void);
+    destroy(): void;
+    setValue(value: number): void;
+    private _initialize;
+    private _listen;
+    private _unlisten;
+    private _onKeydown;
+    private _onDown;
+    private _onMove;
+    private _onUp;
+    private _updateThumbPosition;
+    private _calculateSliderPercent;
+    private _setThumbPosition;
+    private _notify;
+}

package/esm/color-picker/color-picker-slider.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
+import { relativeCoords } from './color-picker-utils';
+export class ColorPickerSlider {
+    constructor(_rootElement, _changeListener) {
+        this._rootElement = _rootElement;
+        this._changeListener = _changeListener;
+        this._percent = 1;
+        this._min = 0;
+        this._max = 1;
+        this._step = 0.01;
+        this._keydownListener = evt => this._onKeydown(evt);
+        this._downListener = evt => this._onDown(evt);
+        this._moveListener = evt => this._onMove(evt);
+        this._upListener = evt => this._onUp(evt);
+        this._initialize();
+    }
+    destroy() {
+        this._unlisten();
+    }
+    setValue(value) {
+        this._percent = value;
+        this._setThumbPosition(this._percent);
+    }
+    _initialize() {
+        this._thumbElement = this._rootElement.querySelector(COLOR_PICKER_CONSTANTS.selectors.SLIDER_THUMB);
+        this._listen();
+        this._setThumbPosition(this._percent);
+    }
+    _listen() {
+        this._thumbElement.addEventListener('keydown', this._keydownListener);
+        this._rootElement.addEventListener('mousedown', this._downListener);
+        this._rootElement.addEventListener('touchstart', this._downListener);
+    }
+    _unlisten() {
+        this._thumbElement.removeEventListener('keydown', this._keydownListener);
+        this._rootElement.removeEventListener('mousedown', this._downListener);
+        this._rootElement.removeEventListener('touchstart', this._downListener);
+        document.removeEventListener('mousemove', this._moveListener);
+        document.removeEventListener('touchmove', this._moveListener);
+        document.removeEventListener('mouseup', this._upListener);
+        document.removeEventListener('touchend', this._upListener);
+    }
+    _onKeydown(evt) {
+        const isArrowLeftKey = evt.key === 'ArrowLeft' || evt.keyCode === 37;
+        const isArrowRightKey = evt.key === 'ArrowRight' || evt.keyCode === 39;
+        const isHomeKey = evt.key === 'Home' || evt.keyCode === 36;
+        const isEndKey = evt.key === 'End' || evt.keyCode === 35;
+        if (isArrowLeftKey) {
+            evt.preventDefault();
+            this._percent -= this._step;
+        }
+        else if (isArrowRightKey) {
+            evt.preventDefault();
+            this._percent += this._step;
+        }
+        else if (isHomeKey) {
+            evt.preventDefault();
+            this._percent = this._min;
+        }
+        else if (isEndKey) {
+            evt.preventDefault();
+            this._percent = this._max;
+        }
+        if (this._percent < this._min) {
+            this._percent = this._min;
+        }
+        else if (this._percent > this._max) {
+            this._percent = this._max;
+        }
+        this._setThumbPosition(this._percent);
+        this._notify();
+    }
+    _onDown(evt) {
+        evt.preventDefault();
+        document.addEventListener('mousemove', this._moveListener);
+        document.addEventListener('touchmove', this._moveListener);
+        document.addEventListener('mouseup', this._upListener);
+        document.addEventListener('touchend', this._upListener);
+        this._updateThumbPosition(evt);
+    }
+    _onMove(evt) {
+        evt.preventDefault();
+        this._thumbElement.classList.add(COLOR_PICKER_CONSTANTS.classes.SLIDER_THUMB_ACTIVE);
+        this._updateThumbPosition(evt);
+    }
+    _onUp(evt) {
+        this._thumbElement.classList.remove(COLOR_PICKER_CONSTANTS.classes.SLIDER_THUMB_ACTIVE);
+        document.removeEventListener('mousemove', this._moveListener);
+        document.removeEventListener('touchmove', this._moveListener);
+        document.removeEventListener('mouseup', this._upListener);
+        document.removeEventListener('touchend', this._upListener);
+        this._updateThumbPosition(evt);
+        this._thumbElement.focus();
+    }
+    _updateThumbPosition(evt) {
+        const x = /^mouse/.test(evt.type) ? evt.clientX : evt.changedTouches[0].clientX;
+        this._percent = this._calculateSliderPercent(x);
+        this._setThumbPosition(this._percent);
+        this._notify();
+    }
+    _calculateSliderPercent(absX) {
+        const coords = relativeCoords(absX, 0, this._rootElement);
+        return parseFloat((coords.x / coords.width).toFixed(2));
+    }
+    _setThumbPosition(percent) {
+        this._thumbElement.style.left = `${percent * 100}%`;
+    }
+    _notify() {
+        if (typeof this._changeListener === 'function') {
+            this._changeListener(this._percent);
+        }
+    }
+}

package/esm/color-picker/color-picker-utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IRGBA, IHSVA } from './color-picker-constants';
+/**
+ * Calcuates coordinates relative to the provided element based on absolute coordinates.
+ * @param absX The x coordinate in screen space.
+ * @param absY The y coordinate in screen space.
+ * @param element The element to calculate the relative coordinates from.
+ */
+export declare function relativeCoords(absX: number, absY: number, element: HTMLElement): {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+};
+export declare function hsvaToRgba(hsva: IHSVA): IRGBA;
+export declare function rgbaToHex(rgba: IRGBA): string;
+export declare function toHex(x: number): string;
+export declare function hexToRgba(hex: string): IRGBA;
+export declare function formatRgba(rgba: IRGBA): string;
+export declare function formatHex(value: string, allowOpacity: boolean): string;
+export declare function rgbaToHsva(rgba: IRGBA): IHSVA;
+/**
+ * Determines if the provided hex color string is valid.
+ * @param value The hex color string.
+ */
+export declare function isValidHex(value: string): boolean;
+/**
+ * Determines if the provided RGBA values are valid.
+ * @param value The RGBA color values.
+ */
+export declare function isValidRGBA(value: IRGBA): boolean;
+/**
+ * Determines if the provided HSVA values are valid.
+ * @param value The HSVA color values.
+ */
+export declare function isValidHSVA(value: IHSVA): boolean;