@tylertech/forge 2.0.0

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IColorPickerComponent } from './color-picker';
+import { ColorPickerValueType, IHSVA, IRGBA } from './color-picker-constants';
+export interface IColorPickerAdapter extends IBaseAdapter {
+    setPreviewColor(rgbaStyle: string): void;
+    setHexInputValue(value: string): void;
+    setRgbaInputValue(rgba: IRGBA): void;
+    setHsvaInputValue(hsva: IHSVA): void;
+    updateA11y(hueValue: number, opacityValue: number): void;
+    setGradientColor(value: string): void;
+    getHueSliderElement(): HTMLElement;
+    getOpacitySliderElement(): HTMLElement;
+    getGradientElement(): HTMLElement;
+    setActiveValueType(type: ColorPickerValueType): void;
+    focusValueInput(type: ColorPickerValueType): void;
+    setTypeClickListener(listener: (evt: MouseEvent) => void): void;
+    removeTypeClickListener(listener: (evt: MouseEvent) => void): void;
+    setHexInputListener(type: string, listener: (evt: Event) => void): void;
+    removeHexInputListener(type: string, listener: (evt: Event) => void): void;
+    getHexInputValue(): string;
+    setRgbaInputListener(type: string, listener: (evt: Event) => void): void;
+    removeRgbaInputListener(type: string, listener: (evt: Event) => void): void;
+    getRgbaInputValue(): IRGBA;
+    setHsvaInputListener(type: string, listener: (evt: Event) => void): void;
+    removeHsvaInputListener(type: string, listener: (evt: Event) => void): void;
+    getHsvaInputValue(): IHSVA;
+    toggleOpacityControls(visible: boolean): void;
+}
+export declare class ColorPickerAdapter extends BaseAdapter<IColorPickerComponent> implements IColorPickerAdapter {
+    private _gradientElement;
+    private _previewColorElement;
+    private _hexInputElement;
+    private _rgbaInputRElement;
+    private _rgbaInputGElement;
+    private _rgbaInputBElement;
+    private _rgbaInputAElement;
+    private _hsvaInputHElement;
+    private _hsvaInputSElement;
+    private _hsvaInputVElement;
+    private _hsvaInputAElement;
+    private _hueSliderElement;
+    private _hueSliderThumbElement;
+    private _opacitySliderElement;
+    private _opacitySliderThumbElement;
+    private _hexValueContainerElement;
+    private _rgbaValueContainerElement;
+    private _hsvaValueContainerElement;
+    private _typeButtonElement;
+    constructor(component: IColorPickerComponent);
+    setPreviewColor(rgbaStyle: string): void;
+    setHexInputValue(value: string): void;
+    setRgbaInputValue(rgba: IRGBA): void;
+    setHsvaInputValue(hsva: IHSVA): void;
+    updateA11y(hueValue: number, opacityValue: number): void;
+    setGradientColor(value: string): void;
+    getHueSliderElement(): HTMLElement;
+    getOpacitySliderElement(): HTMLElement;
+    getGradientElement(): HTMLElement;
+    setActiveValueType(type: ColorPickerValueType): void;
+    focusValueInput(type: ColorPickerValueType): void;
+    setTypeClickListener(listener: (evt: MouseEvent) => void): void;
+    removeTypeClickListener(listener: (evt: MouseEvent) => void): void;
+    setHexInputListener(type: string, listener: (evt: Event) => void): void;
+    removeHexInputListener(type: string, listener: (evt: Event) => void): void;
+    getHexInputValue(): string;
+    setRgbaInputListener(type: string, listener: (evt: Event) => void): void;
+    removeRgbaInputListener(type: string, listener: (evt: Event) => void): void;
+    getRgbaInputValue(): IRGBA;
+    setHsvaInputListener(type: string, listener: (evt: Event) => void): void;
+    removeHsvaInputListener(type: string, listener: (evt: Event) => void): void;
+    getHsvaInputValue(): IHSVA;
+    toggleOpacityControls(visible: boolean): void;
+}

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

@@ -0,0 +1,175 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { ColorPickerValueType, COLOR_PICKER_CONSTANTS } from './color-picker-constants';
+export class ColorPickerAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._gradientElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.GRADIENT);
+        this._previewColorElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.PREVIEW_COLOR);
+        this._hexInputElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.HEX_INPUT);
+        this._rgbaInputRElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_R);
+        this._rgbaInputGElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_G);
+        this._rgbaInputBElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_B);
+        this._rgbaInputAElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_A);
+        this._hsvaInputHElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_H);
+        this._hsvaInputSElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_S);
+        this._hsvaInputVElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_V);
+        this._hsvaInputAElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_A);
+        this._hueSliderElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.HUE_SLIDER);
+        this._hueSliderThumbElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.HUE_SLIDER_THUMB);
+        this._opacitySliderElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.OPACITY_SLIDER);
+        this._opacitySliderThumbElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.OPACITY_SLIDER_THUMB);
+        this._hexValueContainerElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HEX_CONTAINER);
+        this._rgbaValueContainerElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_CONTAINER);
+        this._hsvaValueContainerElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_CONTAINER);
+        this._typeButtonElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.TYPE_BUTTON);
+    }
+    setPreviewColor(rgbaStyle) {
+        this._previewColorElement.style.backgroundColor = rgbaStyle;
+    }
+    setHexInputValue(value) {
+        this._hexInputElement.value = value;
+    }
+    setRgbaInputValue(rgba) {
+        this._rgbaInputRElement.value = rgba.r.toString();
+        this._rgbaInputGElement.value = rgba.g.toString();
+        this._rgbaInputBElement.value = rgba.b.toString();
+        this._rgbaInputAElement.value = rgba.a.toString();
+    }
+    setHsvaInputValue(hsva) {
+        this._hsvaInputHElement.value = hsva.h.toString();
+        this._hsvaInputSElement.value = hsva.s.toString();
+        this._hsvaInputVElement.value = hsva.v.toString();
+        this._hsvaInputAElement.value = hsva.a.toString();
+    }
+    updateA11y(hueValue, opacityValue) {
+        this._hueSliderThumbElement.setAttribute('aria-valuenow', hueValue.toString());
+        this._hueSliderThumbElement.setAttribute('aria-valuetext', hueValue.toString());
+        this._opacitySliderThumbElement.setAttribute('aria-valuenow', opacityValue.toString());
+        this._opacitySliderThumbElement.setAttribute('aria-valuetext', opacityValue.toString());
+    }
+    setGradientColor(value) {
+        this._gradientElement.style.backgroundColor = value;
+    }
+    getHueSliderElement() {
+        return this._hueSliderElement;
+    }
+    getOpacitySliderElement() {
+        return this._opacitySliderElement;
+    }
+    getGradientElement() {
+        return this._gradientElement;
+    }
+    setActiveValueType(type) {
+        this._hexValueContainerElement.style.display = 'none';
+        this._rgbaValueContainerElement.style.display = 'none';
+        this._hsvaValueContainerElement.style.display = 'none';
+        switch (type) {
+            case ColorPickerValueType.HEX:
+                this._hexValueContainerElement.style.removeProperty('display');
+                break;
+            case ColorPickerValueType.RGBA:
+                this._rgbaValueContainerElement.style.removeProperty('display');
+                break;
+            case ColorPickerValueType.HSVA:
+                this._hsvaValueContainerElement.style.removeProperty('display');
+                break;
+        }
+    }
+    focusValueInput(type) {
+        switch (type) {
+            case ColorPickerValueType.HEX:
+                this._hexInputElement.focus();
+                this._hexInputElement.select();
+                break;
+            case ColorPickerValueType.RGBA:
+                this._rgbaInputRElement.focus();
+                this._rgbaInputRElement.select();
+                break;
+            case ColorPickerValueType.HSVA:
+                this._hsvaInputHElement.focus();
+                this._hsvaInputHElement.select();
+                break;
+        }
+    }
+    setTypeClickListener(listener) {
+        this._typeButtonElement.addEventListener('click', listener);
+    }
+    removeTypeClickListener(listener) {
+        this._typeButtonElement.removeEventListener('click', listener);
+    }
+    setHexInputListener(type, listener) {
+        this._hexInputElement.addEventListener(type, listener);
+    }
+    removeHexInputListener(type, listener) {
+        this._hexInputElement.removeEventListener(type, listener);
+    }
+    getHexInputValue() {
+        return this._hexInputElement.value;
+    }
+    setRgbaInputListener(type, listener) {
+        this._rgbaInputRElement.addEventListener(type, listener);
+        this._rgbaInputGElement.addEventListener(type, listener);
+        this._rgbaInputBElement.addEventListener(type, listener);
+        this._rgbaInputAElement.addEventListener(type, listener);
+    }
+    removeRgbaInputListener(type, listener) {
+        this._rgbaInputRElement.removeEventListener(type, listener);
+        this._rgbaInputGElement.removeEventListener(type, listener);
+        this._rgbaInputBElement.removeEventListener(type, listener);
+        this._rgbaInputAElement.removeEventListener(type, listener);
+    }
+    getRgbaInputValue() {
+        return {
+            r: parseInt(this._rgbaInputRElement.value, 10),
+            g: parseInt(this._rgbaInputGElement.value, 10),
+            b: parseInt(this._rgbaInputBElement.value, 10),
+            a: parseFloat(this._rgbaInputAElement.value)
+        };
+    }
+    setHsvaInputListener(type, listener) {
+        this._hsvaInputHElement.addEventListener(type, listener);
+        this._hsvaInputSElement.addEventListener(type, listener);
+        this._hsvaInputVElement.addEventListener(type, listener);
+        this._hsvaInputAElement.addEventListener(type, listener);
+    }
+    removeHsvaInputListener(type, listener) {
+        this._hsvaInputHElement.removeEventListener(type, listener);
+        this._hsvaInputSElement.removeEventListener(type, listener);
+        this._hsvaInputVElement.removeEventListener(type, listener);
+        this._hsvaInputAElement.removeEventListener(type, listener);
+    }
+    getHsvaInputValue() {
+        return {
+            h: parseInt(this._hsvaInputHElement.value, 10),
+            s: parseInt(this._hsvaInputSElement.value, 10),
+            v: parseInt(this._hsvaInputVElement.value, 10),
+            a: parseFloat(this._hsvaInputAElement.value)
+        };
+    }
+    toggleOpacityControls(visible) {
+        if (visible) {
+            this._opacitySliderElement.style.removeProperty('display');
+            if (this._rgbaInputAElement.parentElement) {
+                this._rgbaInputAElement.parentElement.style.removeProperty('display');
+            }
+            if (this._hsvaInputAElement.parentElement) {
+                this._hsvaInputAElement.parentElement.style.removeProperty('display');
+            }
+        }
+        else {
+            this._opacitySliderElement.style.display = 'none';
+            if (this._rgbaInputAElement.parentElement) {
+                this._rgbaInputAElement.parentElement.style.display = 'none';
+            }
+            if (this._hsvaInputAElement.parentElement) {
+                this._hsvaInputAElement.parentElement.style.display = 'none';
+            }
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const COLOR_PICKER_CONSTANTS: {
+    elementName: "forge-color-picker";
+    attributes: {
+        VALUE: string;
+        ALLOW_OPACITY: string;
+        DEBOUNCE_CHANGE_EVENT: string;
+    };
+    events: {
+        CHANGE: string;
+    };
+    classes: {
+        SLIDER_THUMB_ACTIVE: string;
+        GRADIENT_THUMB_ACTIVE: string;
+    };
+    selectors: {
+        GRADIENT: string;
+        GRADIENT_THUMB: string;
+        PREVIEW_COLOR: string;
+        HEX_INPUT: string;
+        RGBA_INPUT: string;
+        HSVA_INPUT: string;
+        HUE_SLIDER: string;
+        HUE_SLIDER_THUMB: string;
+        OPACITY_SLIDER: string;
+        OPACITY_SLIDER_THUMB: string;
+        SLIDER: string;
+        SLIDER_THUMB: string;
+        COLOR_VALUE_HEX_CONTAINER: string;
+        COLOR_VALUE_RGBA_CONTAINER: string;
+        COLOR_VALUE_HSVA_CONTAINER: string;
+        TYPE_BUTTON: string;
+        COLOR_VALUE_RGBA_R: string;
+        COLOR_VALUE_RGBA_G: string;
+        COLOR_VALUE_RGBA_B: string;
+        COLOR_VALUE_RGBA_A: string;
+        COLOR_VALUE_HSVA_H: string;
+        COLOR_VALUE_HSVA_S: string;
+        COLOR_VALUE_HSVA_V: string;
+        COLOR_VALUE_HSVA_A: string;
+    };
+    numbers: {
+        CHANGE_EVENT_DEBOUNCE_THRESHOLD: number;
+    };
+};
+export declare const DEFAULT_COLOR = "000000";
+export declare enum ColorPickerValueType {
+    HEX = "hex",
+    RGB = "rgb",
+    RGBA = "rgba",
+    HSV = "hsv",
+    HSVA = "hsva"
+}
+export interface IRGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface IHSVA {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export declare type ColorPickerChangeEventType = 'slider' | 'input';
+export declare type ColorPickerChangeEventSource = 'gradient' | 'hue' | 'opacity' | 'hex' | 'rgba' | 'hsva';
+export interface IColorPickerChangeEventData {
+    type: ColorPickerChangeEventType;
+    source: ColorPickerChangeEventSource;
+    hex: string;
+    rgba: IRGBA;
+    hsva: IHSVA;
+    alpha?: number;
+}

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

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}color-picker`;
+const attributes = {
+    VALUE: 'value',
+    ALLOW_OPACITY: 'allow-opacity',
+    DEBOUNCE_CHANGE_EVENT: 'debounce-change-event'
+};
+const classes = {
+    SLIDER_THUMB_ACTIVE: 'forge-color-picker__slider-thumb--active',
+    GRADIENT_THUMB_ACTIVE: 'forge-color-picker__gradient-thumb--active'
+};
+const selectors = {
+    GRADIENT: '.forge-color-picker__gradient',
+    GRADIENT_THUMB: '.forge-color-picker__gradient-thumb',
+    PREVIEW_COLOR: '.forge-color-picker__color-preview',
+    HEX_INPUT: '#forge-color-picker-hex-input',
+    RGBA_INPUT: '#forge-color-picker-rgba-input',
+    HSVA_INPUT: '#forge-color-picker-hsva-input',
+    HUE_SLIDER: '.forge-color-picker__hue-slider',
+    HUE_SLIDER_THUMB: '#forge-color-picker-hue-thumb',
+    OPACITY_SLIDER: '.forge-color-picker__opacity-slider',
+    OPACITY_SLIDER_THUMB: '#forge-color-picker-opacity-thumb',
+    SLIDER: '.forge-color-picker__slider',
+    SLIDER_THUMB: '.forge-color-picker__slider-thumb',
+    COLOR_VALUE_HEX_CONTAINER: '.forge-color-picker__color-hex',
+    COLOR_VALUE_RGBA_CONTAINER: '.forge-color-picker__color-rgba',
+    COLOR_VALUE_HSVA_CONTAINER: '.forge-color-picker__color-hsva',
+    TYPE_BUTTON: '#forge-color-picker-type-button',
+    COLOR_VALUE_RGBA_R: '#forge-color-picker-rgba-r-input',
+    COLOR_VALUE_RGBA_G: '#forge-color-picker-rgba-g-input',
+    COLOR_VALUE_RGBA_B: '#forge-color-picker-rgba-b-input',
+    COLOR_VALUE_RGBA_A: '#forge-color-picker-rgba-a-input',
+    COLOR_VALUE_HSVA_H: '#forge-color-picker-hsva-h-input',
+    COLOR_VALUE_HSVA_S: '#forge-color-picker-hsva-s-input',
+    COLOR_VALUE_HSVA_V: '#forge-color-picker-hsva-v-input',
+    COLOR_VALUE_HSVA_A: '#forge-color-picker-hsva-a-input'
+};
+const events = {
+    CHANGE: `${elementName}-change`
+};
+const numbers = {
+    CHANGE_EVENT_DEBOUNCE_THRESHOLD: 200
+};
+export const COLOR_PICKER_CONSTANTS = {
+    elementName,
+    attributes,
+    events,
+    classes,
+    selectors,
+    numbers
+};
+export const DEFAULT_COLOR = '000000';
+export var ColorPickerValueType;
+(function (ColorPickerValueType) {
+    ColorPickerValueType["HEX"] = "hex";
+    ColorPickerValueType["RGB"] = "rgb";
+    ColorPickerValueType["RGBA"] = "rgba";
+    ColorPickerValueType["HSV"] = "hsv";
+    ColorPickerValueType["HSVA"] = "hsva";
+})(ColorPickerValueType || (ColorPickerValueType = {}));

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IColorPickerAdapter } from './color-picker-adapter';
+import { IHSVA, IRGBA } from './color-picker-constants';
+export interface IColorPickerFoundation extends ICustomElementFoundation {
+    value: string | null;
+    rgba: IRGBA | null;
+    hsva: IHSVA | null;
+    opacity: number | null;
+    allowOpacity: boolean;
+    debounceChangeEvent: boolean;
+}
+export declare class ColorPickerFoundation implements IColorPickerFoundation {
+    private _adapter;
+    private _value;
+    private _allowOpacity;
+    private _hex;
+    private _hsva;
+    private _rgba;
+    private _debounceChangeEvent;
+    private _valueType;
+    private _gradientSlider;
+    private _hueSlider;
+    private _opacitySlider;
+    private _gradientSliderChangedListener;
+    private _hueSliderChangedListener;
+    private _opacitySliderChangedListener;
+    private _typeClickListener;
+    private _hexInputChangedListener;
+    private _rgbaInputChangedListener;
+    private _hsvaInputChangedListener;
+    private _triggerChangeEvent;
+    constructor(_adapter: IColorPickerAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _applyChangeEventTrigger;
+    private _initializeOpacity;
+    private _onTypeClicked;
+    private _onHexInputChanged;
+    private _onRgbaInputChanged;
+    private _onHsvaInputChanged;
+    private _setColorFromHex;
+    private _onGradientSliderChanged;
+    private _onHueSliderChanged;
+    private _onOpacitySliderChanged;
+    private _setGradientColor;
+    private _syncColors;
+    private _render;
+    private _getFormattedHex;
+    private _emitChangeEvent;
+    get value(): string | null;
+    set value(value: string | null);
+    get rgba(): IRGBA | null;
+    set rgba(value: IRGBA | null);
+    get hsva(): IHSVA | null;
+    set hsva(value: IHSVA | null);
+    get opacity(): number | null;
+    set opacity(value: number | null);
+    get allowOpacity(): boolean;
+    set allowOpacity(value: boolean);
+    get debounceChangeEvent(): boolean;
+    set debounceChangeEvent(value: boolean);
+}