@tylertech/forge 2.0.0

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

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isNumber } from '@tylertech/forge-core';
+/**
+ * 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 function relativeCoords(absX, absY, element) {
+    const bounds = element.getBoundingClientRect();
+    let x = absX - bounds.left;
+    let y = absY - bounds.top;
+    if (x > bounds.width) {
+        x = bounds.width;
+    }
+    else if (x < 0) {
+        x = 0;
+    }
+    if (y > bounds.height) {
+        y = bounds.height;
+    }
+    else if (y < 0) {
+        y = 0;
+    }
+    return { x, y, height: bounds.height, width: bounds.width };
+}
+export function hsvaToRgba(hsva) {
+    let r;
+    let g;
+    let b;
+    const h = hsva.h / 60;
+    const s = hsva.s / 100;
+    const v = hsva.v / 100;
+    if (s === 0) {
+        r = g = b = v;
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255),
+            a: hsva.a
+        };
+    }
+    const i = Math.floor(h);
+    const f = h - i;
+    const p = v * (1 - s);
+    const q = v * (1 - s * f);
+    const t = v * (1 - s * (1 - f));
+    switch (i) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        default:
+            r = v;
+            g = p;
+            b = q;
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+        a: hsva.a
+    };
+}
+export function rgbaToHex(rgba) {
+    return toHex(rgba.r) + toHex(rgba.g) + toHex(rgba.b) + (Math.round(rgba.a * 255) + 0x10000).toString(16).substr(-2);
+}
+export function toHex(x) {
+    return ('0' + x.toString(16)).slice(-2);
+}
+export function hexToRgba(hex) {
+    const isShorthand = hex.length === 3 || hex.length === 4;
+    const hexR = isShorthand ? `${hex.slice(0, 1)}${hex.slice(0, 1)}` : hex.slice(0, 2);
+    const hexG = isShorthand ? `${hex.slice(1, 2)}${hex.slice(1, 2)}` : hex.slice(2, 4);
+    const hexB = isShorthand ? `${hex.slice(2, 3)}${hex.slice(2, 3)}` : hex.slice(4, 6);
+    const hexA = (isShorthand ? `${hex.slice(3, 4)}${hex.slice(3, 4)}` : hex.slice(6, 8)) || 'ff';
+    return {
+        r: parseInt(hexR, 16),
+        g: parseInt(hexG, 16),
+        b: parseInt(hexB, 16),
+        a: parseFloat((parseInt(hexA, 16) / 255).toFixed(2))
+    };
+}
+export function formatRgba(rgba) {
+    return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+}
+export function formatHex(value, allowOpacity) {
+    let hex = value.replace(/^#/, '');
+    if (!allowOpacity) {
+        if (hex.length === 4) {
+            hex = hex.substring(0, 3);
+        }
+        else if (hex.length === 8) {
+            hex = hex.substring(0, 6);
+        }
+    }
+    return `#${hex}`;
+}
+export function rgbaToHsva(rgba) {
+    const r = rgba.r / 255;
+    const g = rgba.g / 255;
+    const b = rgba.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = max;
+    let s = max;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max === min) {
+        h = 0;
+    }
+    else {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        v: Math.round(v * 100),
+        a: rgba.a
+    };
+}
+/**
+ * Determines if the provided hex color string is valid.
+ * @param value The hex color string.
+ */
+export function isValidHex(value) {
+    if (!value || typeof value !== 'string') {
+        return false;
+    }
+    if (value.substring(0, 1) === '#') {
+        value = value.substring(1);
+    }
+    switch (value.length) {
+        case 3: return /^[0-9A-F]{3}$/i.test(value);
+        case 4: return /^[0-9A-F]{4}$/i.test(value);
+        case 6: return /^[0-9A-F]{6}$/i.test(value);
+        case 8: return /^[0-9A-F]{8}$/i.test(value);
+        default: return false;
+    }
+}
+/**
+ * Determines if the provided RGBA values are valid.
+ * @param value The RGBA color values.
+ */
+export function isValidRGBA(value) {
+    return isNumber(value.r) && value.r >= 0 && value.r <= 255 &&
+        isNumber(value.g) && value.g >= 0 && value.g <= 255 &&
+        isNumber(value.b) && value.b >= 0 && value.b <= 255 &&
+        isNumber(value.a) && value.a >= 0 && value.a <= 1;
+}
+/**
+ * Determines if the provided HSVA values are valid.
+ * @param value The HSVA color values.
+ */
+export function isValidHSVA(value) {
+    return isNumber(value.h) && value.h >= 0 && value.h <= 360 &&
+        isNumber(value.s) && value.s >= 0 && value.s <= 100 &&
+        isNumber(value.v) && value.v >= 0 && value.v <= 100 &&
+        isNumber(value.a) && value.a >= 0 && value.a <= 1;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { IColorPickerChangeEventData, IHSVA, IRGBA } from './color-picker-constants';
+export interface IColorPickerComponent extends IBaseComponent {
+    value: string | null;
+    rgba: IRGBA | null;
+    hsva: IHSVA | null;
+    opacity: number | null;
+    allowOpacity: boolean;
+    debounceChangeEvent: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-color-picker': IColorPickerComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-color-picker-change': CustomEvent<IColorPickerChangeEventData>;
+    }
+}
+export declare class ColorPickerComponent extends BaseComponent implements IColorPickerComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Gets/sets the value using hex format only. */
+    value: string | null;
+    /** Gets/sets the value using rgba format. */
+    rgba: IRGBA | null;
+    /** Gets/sets the value using hsva format. */
+    hsva: IHSVA | null;
+    /** Gets/sets the opacity value, if `allowOpacity` is true. */
+    opacity: number | null;
+    /** Gets/sets whether opacity is displayed and allowed be to changed. */
+    allowOpacity: boolean;
+    /** Gets/sets whether change event has a debounce applied to avoid successive updates. Defaults to `false`. */
+    debounceChangeEvent: boolean;
+}

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

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconUnfoldMore } from '@tylertech/tyler-icons/standard';
+import { BaseComponent } from '../core/base/base-component';
+import { IconComponent, IconRegistry } from '../icon';
+import { IconButtonComponent } from '../icon-button';
+import { TooltipComponent } from '../tooltip';
+import { ColorPickerAdapter } from './color-picker-adapter';
+import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
+import { ColorPickerFoundation } from './color-picker-foundation';
+const template = '<template><div class=\"forge-color-picker\" part=\"root\"><input type=\"color\" tabindex=\"-1\" class=\"forge-color-picker__input\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"Color picker value\" part=\"input\"><div class=\"forge-color-picker__container\" part=\"container\"><div class=\"forge-color-picker__gradient\" tabindex=\"0\" part=\"gradient\"><div class=\"forge-color-picker__gradient-color\" part=\"gradient-color\"></div><div class=\"forge-color-picker__gradient-thumb\" part=\"gradient-thumb\"></div></div><div class=\"forge-color-picker__control-preview\" part=\"controls-preview-container\"><div class=\"forge-color-picker__controls\" part=\"controls-container\"><div class=\"forge-color-picker__slider-control\" part=\"hue-control-container\"><div class=\"forge-color-picker__slider forge-color-picker__hue-slider\" part=\"hue-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-hue-thumb\" part=\"hue-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change hue\" aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div><div class=\"forge-color-picker__slider-control\" part=\"opacity-control-container\"><div class=\"forge-color-picker__canvas\" part=\"opacity-control-canvas\"><div class=\"forge-color-picker__slider forge-color-picker__opacity-slider\" part=\"opacity-control-slider\"><div class=\"forge-color-picker__slider-thumb\" id=\"forge-color-picker-opacity-thumb\" part=\"opacity-control-slider-thumb\" tabindex=\"0\" role=\"slider\" aria-label=\"Change opacity\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-orientation=\"horizontal\" aria-valuetext=\"0\"></div></div></div></div></div><div class=\"forge-color-picker__color-preview-container forge-color-picker__canvas\" part=\"color-preview-container\"><div class=\"forge-color-picker__color-preview\" part=\"color-preview\"></div></div></div><div class=\"forge-color-picker__value\" part=\"value-container\"><div class=\"forge-color-picker__color-types\" part=\"types-container\"><div class=\"forge-color-picker__color-hex\" part=\"hex-type-container\"><div part=\"hex-type-label-wrapper\"><label for=\"forge-color-picker-hex-input\" part=\"hex-label\">HEX</label></div><input type=\"text\" id=\"forge-color-picker-hex-input\" part=\"hex-input\" style=\"width: 88px;\" maxlength=\"9\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"HEX value\"></div><div class=\"forge-color-picker__color-rgba\" part=\"rgba-type-container\"><div part=\"rgba-type-wrapper-r\"><label for=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-label-r\">R</label> <input type=\"number\" id=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-input-r\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Red\"></div><div part=\"rgba-type-wrapper-g\"><label for=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-label-g\">G</label> <input type=\"number\" id=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-input-g\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Green\"></div><div part=\"rgba-type-wrapper-b\"><label for=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-label-b\">B</label> <input type=\"number\" id=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-input-b\" min=\"0\" max=\"255\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Blue\"></div><div part=\"rgba-type-wrapper-a\"><label for=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div><div class=\"forge-color-picker__color-hsva\" part=\"hsva-type-container\"><div part=\"hsva-type-wrapper-h\"><label for=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-label-h\">H</label> <input type=\"number\" id=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-input-h\" min=\"0\" max=\"360\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Hue\"></div><div part=\"hsva-type-wrapper-s\"><label for=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-label-s\">S</label> <input type=\"number\" id=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-input-s\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Saturation\"></div><div part=\"hsva-type-wrapper-v\"><label for=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-label-v\">V</label> <input type=\"number\" id=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-input-v\" min=\"0\" max=\"100\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Value\"></div><div part=\"hsva-type-wrapper-a\"><label for=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-label-a\">A</label> <input type=\"number\" id=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-input-a\" min=\"0\" max=\"1\" step=\"0.1\" maxlength=\"3\" autocomplete=\"off\" aria-label=\"Alpha\"></div></div></div><div class=\"forge-color-picker__type-button\" part=\"type-container\"><forge-icon-button part=\"type-button\"><button type=\"button\" id=\"forge-color-picker-type-button\" aria-labelledby=\"type-button-tooltip\" part=\"type-button-element\"><forge-icon name=\"unfold_more\" part=\"type-button-icon\"></forge-icon></button><forge-tooltip delay=\"500\" position=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></forge-icon-button></div></div></div></div></template>';
+const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}*{-webkit-box-sizing:border-box;box-sizing:border-box}.forge-color-picker{width:272px;width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(#000)),-webkit-gradient(linear,left top,right top,color-stop(0,#fff),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{-webkit-box-flex:1;flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;-webkit-transition:left .4s cubic-bezier(.25, .8, .25, 1);transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{-webkit-transition:none;transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;-webkit-transition:background-color .2s cubic-bezier(.25, .8, .25, 1);transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{-webkit-box-flex:1;flex:1}.forge-color-picker__color-types label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))}.forge-color-picker__color-types input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{color:#000;color:var(--mdc-theme-on-surface,#000);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);-webkit-box-shadow:0 0 0 1px inset #3f51b5;box-shadow:0 0 0 1px inset #3f51b5;-webkit-box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center;-moz-appearance:textfield}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.forge-color-picker__color-hex{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:space-between;align-items:space-between}.forge-color-picker__canvas{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\")}.forge-color-picker__hue-slider{height:8px;background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),to(#ff0004));background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,0)),to(red));background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:-webkit-box;display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
+let ColorPickerComponent = class ColorPickerComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define(tylIconUnfoldMore);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ColorPickerFoundation(new ColorPickerAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            COLOR_PICKER_CONSTANTS.attributes.VALUE,
+            COLOR_PICKER_CONSTANTS.attributes.ALLOW_OPACITY,
+            COLOR_PICKER_CONSTANTS.attributes.DEBOUNCE_CHANGE_EVENT
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case COLOR_PICKER_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case COLOR_PICKER_CONSTANTS.attributes.ALLOW_OPACITY:
+                this.allowOpacity = coerceBoolean(newValue);
+                break;
+            case COLOR_PICKER_CONSTANTS.attributes.DEBOUNCE_CHANGE_EVENT:
+                this.debounceChangeEvent = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], ColorPickerComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], ColorPickerComponent.prototype, "rgba", void 0);
+__decorate([
+    FoundationProperty()
+], ColorPickerComponent.prototype, "hsva", void 0);
+__decorate([
+    FoundationProperty()
+], ColorPickerComponent.prototype, "opacity", void 0);
+__decorate([
+    FoundationProperty()
+], ColorPickerComponent.prototype, "allowOpacity", void 0);
+__decorate([
+    FoundationProperty()
+], ColorPickerComponent.prototype, "debounceChangeEvent", void 0);
+ColorPickerComponent = __decorate([
+    CustomElement({
+        name: COLOR_PICKER_CONSTANTS.elementName,
+        dependencies: [
+            IconButtonComponent,
+            TooltipComponent,
+            IconComponent
+        ]
+    })
+], ColorPickerComponent);
+export { ColorPickerComponent };

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './color-picker-adapter';
+export * from './color-picker-constants';
+export * from './color-picker-foundation';
+export * from './color-picker';
+export declare function defineColorPickerComponent(): void;

package/esm/color-picker/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { ColorPickerComponent } from './color-picker';
+export * from './color-picker-adapter';
+export * from './color-picker-constants';
+export * from './color-picker-foundation';
+export * from './color-picker';
+export function defineColorPickerComponent() {
+    defineCustomElement(ColorPickerComponent);
+}

package/esm/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const COMPONENT_NAME_PREFIX = "forge-";
+export declare const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
+export declare const ICON_CLASS_NAME = "tyler-icons";
+export declare const CDN_BASE_URL = "https://cdn.forge.tylertech.com/";

package/esm/constants.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export const COMPONENT_NAME_PREFIX = 'forge-';
+export const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
+export const ICON_CLASS_NAME = 'tyler-icons';
+export const CDN_BASE_URL = 'https://cdn.forge.tylertech.com/';

package/esm/core/base/base-adapter.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseComponent } from './base-component';
+export interface IBaseAdapter {
+    readonly isConnected: boolean;
+    removeHostAttribute(name: string): void;
+    getHostAttribute(name: string): string | null;
+    setHostAttribute(name: string, value?: string): void;
+    toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
+    emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
+    addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    removeHostListener(event: string, callback: (event: Event) => void): void;
+    addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
+    addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    removeDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
+    getScreenWidth(): number;
+    setBodyAttribute(name: string, value: string): void;
+    removeBodyAttribute(name: string): void;
+}
+export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
+    protected _component: T;
+    constructor(_component: T);
+    getHostAttribute(name: string): string | null;
+    setHostAttribute(name: string, value?: string): void;
+    removeHostAttribute(name: string): void;
+    toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
+    emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
+    addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    removeHostListener(event: string, callback: (event: Event) => void): void;
+    addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
+    addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
+    removeDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
+    getScreenWidth(): number;
+    setBodyAttribute(name: string, value: string): void;
+    removeBodyAttribute(name: string): void;
+    get isConnected(): boolean;
+}

package/esm/core/base/base-adapter.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { emitEvent, toggleAttribute } from '@tylertech/forge-core';
+export class BaseAdapter {
+    constructor(_component) {
+        this._component = _component;
+    }
+    getHostAttribute(name) {
+        return this._component.getAttribute(name);
+    }
+    setHostAttribute(name, value = '') {
+        this._component.setAttribute(name, value);
+    }
+    removeHostAttribute(name) {
+        this._component.removeAttribute(name);
+    }
+    toggleHostAttribute(name, hasAttribute, value) {
+        toggleAttribute(this._component, hasAttribute, name, value);
+    }
+    emitHostEvent(type, data = null, bubble = true, cancelable) {
+        return emitEvent(this._component, type, data, bubble, cancelable);
+    }
+    addHostListener(event, callback, options) {
+        this._component.addEventListener(event, callback, options);
+    }
+    removeHostListener(event, callback) {
+        this._component.removeEventListener(event, callback);
+    }
+    addWindowListener(event, callback, options) {
+        window.addEventListener(event, callback, options);
+    }
+    removeWindowListener(event, callback, options) {
+        window.removeEventListener(event, callback, options);
+    }
+    addDocumentListener(event, callback, options) {
+        document.addEventListener(event, callback, options);
+    }
+    removeDocumentListener(event, callback, options) {
+        document.removeEventListener(event, callback, options);
+    }
+    getScreenWidth() {
+        return window.innerWidth;
+    }
+    setBodyAttribute(name, value) {
+        document.body.setAttribute(name, value);
+    }
+    removeBodyAttribute(name) {
+        document.body.removeAttribute(name);
+    }
+    get isConnected() {
+        return this._component.isConnected;
+    }
+}

package/esm/core/base/base-component.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElement } from '@tylertech/forge-core';
+export interface IBaseComponent extends ICustomElement {
+}
+/** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
+export declare abstract class BaseComponent extends HTMLElement implements IBaseComponent {
+}

package/esm/core/base/base-component.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
+export class BaseComponent extends HTMLElement {
+}

package/esm/core/base/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base-adapter';
+export * from './base-component';

package/esm/core/base/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base-adapter';
+export * from './base-component';

package/esm/core/delegates/base-component-delegate.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare type BaseComponentDelegateProps<T extends HTMLElement> = Partial<T>;
+export interface IBaseComponentDelegateOptions {
+    style?: Partial<CSSStyleDeclaration> | {
+        [key: string]: string;
+    };
+    attributes?: {
+        [key: string]: string;
+    } | Map<string, string>;
+    parent?: HTMLElement;
+    children?: HTMLElement | string;
+}
+export interface IBaseComponentDelegateConfig<T extends HTMLElement, K extends IBaseComponentDelegateOptions> {
+    props?: BaseComponentDelegateProps<T>;
+    options?: K;
+}
+export interface IBaseComponentDelegate<T> {
+    element: T;
+    destroy(): void;
+    disconnect(): void;
+}
+export declare abstract class BaseComponentDelegate<T extends HTMLElement, K extends IBaseComponentDelegateOptions> implements IBaseComponentDelegate<T> {
+    protected _config: IBaseComponentDelegateConfig<T, K>;
+    protected _element: T;
+    get element(): T;
+    constructor(_config?: IBaseComponentDelegateConfig<T, K>);
+    destroy(): void;
+    disconnect(): void;
+    private _initialize;
+    private _applyProps;
+    private _applyStyle;
+    private _applyAttrs;
+    private _applyChildren;
+    protected abstract _build(): T;
+    protected _configure?(): void;
+}