@tylertech/forge 3.0.0-next.15 → 3.0.0-next.16

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

@@ -13,7 +13,7 @@ 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\" 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></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></div></div></div></div></template>';
+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\" 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></forge-icon-button><forge-tooltip placement=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip></div></div></div></div></template>';
 const styles = '*{-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:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);-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}';
 /**
  * The web component class behind the `<forge-color-picker>` custom element.

package/esm/constants.d.ts

@@ -8,6 +8,7 @@ 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/";
+export declare const canUserHoverElements: boolean;
 /** A method symbol that gets the submitted value of a form-associated component. */
 export declare const getFormValue: unique symbol;
 /** A method symbol that gets the form state of a form-associated component. */

package/esm/constants.js

@@ -3,10 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { supportsHover } from './core/utils/feature-detection';
 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/';
+export const canUserHoverElements = supportsHover();
 /** A method symbol that gets the submitted value of a form-associated component. */
 export const getFormValue = Symbol('getFormValue');
 /** A method symbol that gets the form state of a form-associated component. */

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

@@ -29,6 +29,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
     focusHost(options?: FocusOptions): void;
+    clickHost(): void;
 }
 export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
     protected _component: T;
@@ -57,5 +58,6 @@ export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapt
     setBodyAttribute(name: string, value: string): void;
     removeBodyAttribute(name: string): void;
     focusHost(options?: FocusOptions): void;
+    clickHost(): void;
     get isConnected(): boolean;
 }

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

@@ -67,23 +67,26 @@ export class BaseAdapter {
         window.removeEventListener(event, callback, options);
     }
     addDocumentListener(event, callback, options) {
-        document.addEventListener(event, callback, options);
+        this._component.ownerDocument.addEventListener(event, callback, options);
     }
     removeDocumentListener(event, callback, options) {
-        document.removeEventListener(event, callback, options);
+        this._component.ownerDocument.removeEventListener(event, callback, options);
     }
     getScreenWidth() {
         return window.innerWidth;
     }
     setBodyAttribute(name, value) {
-        document.body.setAttribute(name, value);
+        this._component.ownerDocument.body.setAttribute(name, value);
     }
     removeBodyAttribute(name) {
-        document.body.removeAttribute(name);
+        this._component.ownerDocument.body.removeAttribute(name);
     }
     focusHost(options) {
         HTMLElement.prototype.focus.call(this._component, options);
     }
+    clickHost() {
+        HTMLElement.prototype.click.call(this._component);
+    }
     get isConnected() {
         return this._component.isConnected;
     }

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

@@ -5,7 +5,3 @@
  */
 export * from './base-adapter';
 export * from './base-component';
-export * from './base-element-internals-component';
-export * from './base-focusable-component';
-export * from './base-form-associated-component';
-export * from './base-label-aware-component';

package/esm/core/base/index.js

@@ -5,7 +5,3 @@
  */
 export * from './base-adapter';
 export * from './base-component';
-export * from './base-element-internals-component';
-export * from './base-focusable-component';
-export * from './base-form-associated-component';
-export * from './base-label-aware-component';

package/esm/core/{base/base-focusable-component.d.ts → mixins/focus/with-focusable.d.ts}

@@ -11,8 +11,8 @@
  * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
  * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/focusable.ts)
  */
-import { AbstractConstructor, isFocusable, MixinBase } from '../../constants';
-import { IBaseComponent } from './base-component';
+import { AbstractConstructor, isFocusable, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
 /**
  * An element that can enable and disable `tabindex` focusability.
  */

package/esm/core/{base/base-focusable-component.js → mixins/focus/with-focusable.js}

@@ -11,7 +11,7 @@
  * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
  * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/focusable.ts)
  */
-import { isFocusable } from '../../constants';
+import { isFocusable } from '../../../constants';
 const _privateIsFocusable = Symbol('privateIsFocusable');
 const _externalTabIndex = Symbol('externalTabIndex');
 const _isUpdatingTabIndex = Symbol('isUpdatingTabIndex');

package/esm/core/{base/base-form-associated-component.d.ts → mixins/form/with-form-associated.d.ts}

@@ -11,13 +11,13 @@
  * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
  * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/form-associated.ts)
  */
-import { MixinBase, getFormState, getFormValue, getValidationMessage, inputType, internals, AbstractConstructor } from '../../constants';
-import { FormRestoreReason, FormRestoreState, FormValue, InputType, InputValidationProps } from '../utils/form-utils';
-import { IBaseComponent } from './base-component';
+import { MixinBase, getFormState, getFormValue, getValidationMessage, inputType, internals, AbstractConstructor } from '../../../constants';
+import { FormRestoreReason, FormRestoreState, FormValue, InputType, InputValidationProps } from '../../utils/form-utils';
+import { IBaseComponent } from '../../base/base-component';
 /**
  * A component that can be associated with a form.
  */
-export interface IWithFormAssociation extends IBaseComponent {
+export interface IWithFormAssociation<TValue = FormValue | null> extends IBaseComponent {
     /**
      * The form element that the component is associated with.
      */
@@ -26,10 +26,6 @@ export interface IWithFormAssociation extends IBaseComponent {
      * The labels associated with the component.
      */
     readonly labels: NodeList;
-    /**
-     * The value to use in form submission.
-     */
-    value: FormValue | null;
     /**
      * The HTML name to use in form submission.
      */
@@ -98,8 +94,6 @@ export declare abstract class WithFormAssociationContract {
     get labels(): NodeList;
     get name(): string;
     set name(value: string);
-    abstract get value(): FormValue | null;
-    abstract set value(value: FormValue | null);
     abstract get disabled(): boolean;
     abstract set disabled(value: boolean);
     abstract get readonly(): boolean;

package/esm/core/{base/base-form-associated-component.js → mixins/form/with-form-associated.js}

@@ -12,7 +12,7 @@
  * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/labs/behaviors/form-associated.ts)
  */
 import { toggleAttribute } from '@tylertech/forge-core';
-import { getFormState, getFormValue, getValidationMessage, inputType, internals } from '../../constants';
+import { getFormState, getFormValue, getValidationMessage, inputType, internals } from '../../../constants';
 /**
  * Mixes in form functionality into a base component.
  *

package/esm/core/mixins/form/with-form-validity.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
+/**
+ * An element that is integrated with native form validation.
+ */
+export interface IWithFormValidity extends IBaseComponent {
+    required: boolean;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    readonly willValidate: boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+}
+export declare abstract class WithFormValidityContract {
+    abstract required: boolean;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+}
+/**
+ * Provides form validity functionality for an element.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithFormValidity<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithFormValidityContract> & TBase;

package/esm/core/mixins/form/with-form-validity.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../../constants';
+/**
+ * Provides form validity functionality for an element.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithFormValidity(base) {
+    class FormValidity extends base {
+        constructor() {
+            super(...arguments);
+            // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+            // Replace with this.internals.validity.customError when resolved.
+            this._hasCustomValidityError = false;
+        }
+        get validity() {
+            return this[internals].validity;
+        }
+        get validationMessage() {
+            return this[internals].validationMessage;
+        }
+        get willValidate() {
+            return this[internals].willValidate;
+        }
+        checkValidity() {
+            return this[internals].checkValidity();
+        }
+        reportValidity() {
+            return this[internals].reportValidity();
+        }
+        setCustomValidity(error) {
+            this._hasCustomValidityError = error !== '';
+            this[internals].setCustomValidity({ customError: this._hasCustomValidityError }, error);
+        }
+    }
+    return FormValidity;
+}

package/esm/core/mixins/interactions/longpress/with-longpress-listener.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, MixinBase } from '../../../../constants';
+/**
+ * The delay in milliseconds before a longpress event is detected.
+ */
+export declare const LONGPRESS_TRIGGER_DELAY = 500;
+export declare abstract class WithLongpressListenerContract {
+    /**
+     * The delay in milliseconds before a longpress event is detected.
+     */
+    protected _longpressDelay: number;
+    /**
+     * Called when a longpress event is detected.
+     */
+    protected abstract _onLongpress(): void;
+    /**
+     * Called after a longpress event has been detected, but after the user has released the pointer.
+     */
+    protected _onLongpressEnd(evt: PointerEvent | TouchEvent): void;
+    /**
+     * Starts listening for longpress events.
+     */
+    protected _startLongpressListener(el: HTMLElement): void;
+    /**
+     * Stops listening for longpress events.
+     */
+    protected _stopLongpressListener(el: HTMLElement): void;
+}
+export declare function WithLongpressListener<TBase extends MixinBase<object>>(base?: TBase): AbstractConstructor<WithLongpressListenerContract> & TBase;

package/esm/core/mixins/interactions/longpress/with-longpress-listener.js

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { canUserHoverElements } from '../../../../constants';
+/**
+ * The delay in milliseconds before a longpress event is detected.
+ */
+export const LONGPRESS_TRIGGER_DELAY = 500;
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithLongpressListener(base = class {
+}) {
+    class LongpressListener extends base {
+        constructor() {
+            super(...arguments);
+            this._longpressStartListener = this._onLongpressStart.bind(this);
+            this._longpressEndListener = this._onLongpressEnd.bind(this);
+            this._longpressContextMenuListener = this._onLongpressContextMenu.bind(this);
+            this._longpressClickPrevent = this._onLongpressClickPrevent.bind(this);
+            this._longpressDelay = LONGPRESS_TRIGGER_DELAY;
+        }
+        _startLongpressListener(el) {
+            const type = canUserHoverElements ? 'pointerdown' : 'touchstart';
+            el.addEventListener(type, this._longpressStartListener);
+        }
+        _stopLongpressListener(el) {
+            const type = canUserHoverElements ? 'pointerdown' : 'touchstart';
+            el.removeEventListener(type, this._longpressStartListener);
+            this._unlistenLongpressEnd(el);
+        }
+        _onLongpressStart(evt) {
+            evt.target.setPointerCapture(evt.pointerId);
+            this._listenLongpressEnd(evt.target);
+            this._longpressTimeout = window.setTimeout(() => {
+                this._onLongpress();
+                if (!canUserHoverElements) {
+                    navigator.vibrate(1);
+                }
+                // We need to prevent any ghost click events from firing after a longpress is detected
+                evt.target.addEventListener('click', this._longpressClickPrevent, { capture: true, once: true });
+            }, this._longpressDelay);
+        }
+        _onLongpressClickPrevent(evt) {
+            evt.stopPropagation();
+        }
+        _onLongpressEnd(evt) {
+            this._clearTimeout();
+            this._unlistenLongpressEnd(evt.target);
+        }
+        _onLongpressContextMenu(evt) {
+            this._clearTimeout();
+            evt.target.removeEventListener('click', this._longpressClickPrevent, { capture: true });
+            this._unlistenLongpressEnd(evt.target);
+        }
+        _listenLongpressEnd(el) {
+            if (!canUserHoverElements) {
+                el.addEventListener('touchend', this._longpressEndListener);
+            }
+            else {
+                el.addEventListener('pointerup', this._longpressEndListener);
+                el.addEventListener('pointercancel', this._longpressEndListener);
+                el.addEventListener('contextmenu', this._longpressContextMenuListener);
+            }
+        }
+        _unlistenLongpressEnd(el) {
+            if (!canUserHoverElements) {
+                el.removeEventListener('touchend', this._longpressEndListener);
+            }
+            else {
+                el.removeEventListener('pointerup', this._longpressEndListener);
+                el.removeEventListener('pointercancel', this._longpressEndListener);
+                el.removeEventListener('contextmenu', this._longpressContextMenuListener);
+            }
+        }
+        _clearTimeout() {
+            window.clearTimeout(this._longpressTimeout);
+            this._longpressTimeout = undefined;
+        }
+    }
+    return LongpressListener;
+}

package/esm/core/mixins/internals/with-default-aria.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { MixinBase, setDefaultAria, AbstractConstructor } from '../../../constants';
+import { ARIAMixinStrict, DefaultAriaOptions } from '../../utils/a11y-utils';
+import { IBaseComponent } from '../../base/base-component';
+/**
+ * A component with support for setting default ARIA.
+ */
+export interface IWithDefaultAria extends IBaseComponent {
+    /**
+     * Sets the default ARIA of the component using Element Internals if supported or sprouting
+     * ARIA attributes if not.
+     *
+     * @param properties The ARIA properties and values to set.
+     * @param options Whether or not to overwrite existing ARIA attributes. This only takes effect
+     * if Element Internals are not supported and a new attribute will be sprouted.
+     */
+    [setDefaultAria](properties: Partial<ARIAMixinStrict>, options?: DefaultAriaOptions): void;
+}
+export declare abstract class WithDefaultAriaContract {
+    [setDefaultAria](properties: Partial<ARIAMixinStrict>, options?: DefaultAriaOptions): void;
+}
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithDefaultAria<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithDefaultAriaContract> & TBase;

package/esm/core/mixins/internals/with-default-aria.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals, setDefaultAria } from '../../../constants';
+import { setDefaultAria as setDefaultAriaUtil } from '../../utils/a11y-utils';
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithDefaultAria(base) {
+    class DefaultAria extends base {
+        [setDefaultAria](properties, options) {
+            setDefaultAriaUtil(this, this[internals], properties, options);
+        }
+    }
+    return DefaultAria;
+}

package/esm/core/mixins/internals/with-element-internals.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, internals, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
+/**
+ * A component with attached Element Internals.
+ */
+export interface IWithElementInternals extends IBaseComponent {
+    /**
+     * The Element Internals of the component.
+     */
+    readonly [internals]: ElementInternals;
+}
+export declare abstract class WithElementInternalsContract {
+    readonly [internals]: ElementInternals;
+}
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithElementInternals<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithElementInternalsContract> & TBase;

package/esm/core/mixins/internals/with-element-internals.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../../constants';
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithElementInternals(base) {
+    class ElementInternalsComponent extends base {
+        constructor(...args) {
+            super(...args);
+            this[internals] = this.attachInternals();
+        }
+    }
+    return ElementInternalsComponent;
+}

package/esm/core/{base/base-label-aware-component.d.ts → mixins/label/with-label-aware.d.ts}

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { AbstractConstructor, MixinBase } from '../../constants';
-import { IBaseComponent } from './base-component';
+import { AbstractConstructor, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
 /**
  * An element that can be associated with a Forge label component.
  */

package/esm/core/utils/a11y-utils.d.ts

@@ -88,9 +88,9 @@ export declare function ariaPropertyToAttribute<K extends ARIAProperty | 'role'>
  * @returns An ARIA mixin property.
  */
 export declare function ariaAttributeToProperty<K extends ARIAAttribute | 'role'>(attribute: K): ARIAProperty;
-export interface DefaultAriaOptions {
-    overwrite?: boolean;
-}
+export type DefaultAriaOptions = {
+    setAttribute?: boolean;
+};
 /**
  * Applies default ARIA to an element through ElementInternals if supported. Otherwise, ARIA
  * attributes are set directly on the element and stored in additional `data-default-*` attributes
@@ -123,34 +123,4 @@ export interface DefaultAriaOptions {
  *   }
  * }
  */
-export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, options?: DefaultAriaOptions): void;
-/**
- * Sets a `*Default` property on an element to backup the default value of an ARIA attribute.
- *
- * @param element The element to store the default ARIA value on.
- * @param property The ARIA mixin property.
- * @param value The default value to store.
- */
-export declare function storeDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T, value: ARIAMixinStrict[T]): void;
-/**
- * Removes a `*Default` property from an element.
- *
- * @param element The element to remove the default ARIA value from.
- * @param property The ARIA mixin property.
- */
-export declare function removeDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T): void;
-/**
- * Gets a default ARIA value from an element's `*Default` property.
- *
- * @param element The element to retrieve the default ARIA value from.
- * @param property An ARIA mixin property.
- * @returns The value of the default ARIA attribute, or null if it does not exist.
- */
-export declare function retrieveDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T): ARIAMixinStrict[T] | null;
-/**
- * Restores the given ARIA attribute of an element to its default value if it exists.
- *
- * @param element The element to restore the ARIA attribute on.
- * @param property The ARIA mixin property.
- */
-export declare function restoreDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T): void;
+export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;