@tylertech/forge 3.13.1 → 3.14.0-dev.1

package/esm/circular-progress/circular-progress-constants.js

@@ -1,9 +1,11 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../constants';
+
+import { COMPONENT_NAME_PREFIX } from '../constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}circular-progress`;
 const attributes = {
     DETERMINATE: 'determinate',
@@ -19,9 +21,11 @@ const selectors = {
     DETERMINATE_PROGRESS_CIRCLE: '.progress',
     TEMPLATES: 'svg, .spinner'
 };
-export const CIRCULAR_PROGRESS_CONSTANTS = {
+const CIRCULAR_PROGRESS_CONSTANTS = {
     elementName,
     attributes,
     classes,
     selectors
 };
+
+export { CIRCULAR_PROGRESS_CONSTANTS };

package/esm/circular-progress/circular-progress-core.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { ICircularProgressAdapter } from './circular-progress-adapter';
-import { CircularProgressTheme } from './circular-progress-constants';
+import { ICircularProgressAdapter } from './circular-progress-adapter.js';
+import { CircularProgressTheme } from './circular-progress-constants.js';
 export interface ICircularProgressCore {
     determinate: boolean;
     progress: number;

package/esm/circular-progress/circular-progress-core.js

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
-export class CircularProgressCore {
+
+import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants.js';
+
+class CircularProgressCore {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._determinate = false;
@@ -69,3 +71,5 @@ export class CircularProgressCore {
         }
     }
 }
+
+export { CircularProgressCore };

package/esm/circular-progress/circular-progress.d.ts

@@ -1,12 +1,7 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { CircularProgressTheme } from './circular-progress-constants';
-import { BaseComponent } from '../core/base/base-component';
-import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
-import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { CircularProgressTheme } from './circular-progress-constants.js';
+import { BaseComponent } from '../core/base/base-component.js';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals.js';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria.js';
 export interface ICircularProgressComponent extends IWithElementInternals, IWithDefaultAria {
     determinate: boolean;
     progress: number;
@@ -18,7 +13,7 @@ declare global {
         'forge-circular-progress': ICircularProgressComponent;
     }
 }
-declare const CircularProgressComponent_base: import("..").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("..").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
+declare const CircularProgressComponent_base: import("../constants.js").AbstractConstructor<import("../core/mixins/internals/with-default-aria.js").WithDefaultAriaContract> & import("../constants.js").AbstractConstructor<import("../core/mixins/internals/with-element-internals.js").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-circular-progress
  *

package/esm/circular-progress/circular-progress.html.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var template = "<template>\n  <div class=\"forge-circular-progress\" part=\"progressbar\">\n    <slot class=\"center-content\"></slot>\n  </div>\n</template>\n";
+
+export { template as default };

package/esm/circular-progress/circular-progress.js

@@ -1,18 +1,20 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { customElement, attachShadowTemplate, coreProperty, coerceBoolean, coerceNumber } from '@tylertech/forge-core';
-import { CircularProgressAdapter } from './circular-progress-adapter';
-import { CircularProgressCore } from './circular-progress-core';
-import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
-import { BaseComponent } from '../core/base/base-component';
-import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
-import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
-const template = '<template><div class=\"forge-circular-progress\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
-const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:inline-flex;vertical-align:middle;block-size:var(--_circular-progress-size);inline-size:var(--_circular-progress-size);position:relative;align-items:center;justify-content:center;transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;animation:linear infinite linear-rotate;animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;animation:infinite both rotate-arc;animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host(:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}';
+
+import { __decorate } from 'tslib';
+import { attachShadowTemplate, coerceBoolean, coerceNumber, coreProperty, customElement } from '@tylertech/forge-core';
+import { CircularProgressAdapter } from './circular-progress-adapter.js';
+import { CircularProgressCore } from './circular-progress-core.js';
+import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants.js';
+import { BaseComponent } from '../core/base/base-component.js';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals.js';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria.js';
+import template from './circular-progress.html.js';
+import styles from './circular-progress.scss.js';
+
 /**
  * @tag forge-circular-progress
  *
@@ -100,4 +102,5 @@ CircularProgressComponent = __decorate([
         name: CIRCULAR_PROGRESS_CONSTANTS.elementName
     })
 ], CircularProgressComponent);
+
 export { CircularProgressComponent };

package/esm/circular-progress/circular-progress.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:inline-flex;vertical-align:middle;block-size:var(--_circular-progress-size);inline-size:var(--_circular-progress-size);position:relative;align-items:center;justify-content:center;transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;animation:linear infinite linear-rotate;animation-duration:calc(var(--_circular-progress-arc-duration)*360/306)}.forge-circular-progress,.spinner,.left,.right,.circle,svg{position:absolute;inset:0}.center-content{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:calc(-0.5*var(--_circular-progress-arc-duration)),0ms}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size)*var(--_circular-progress-track-width)/100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}svg{transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_circular-progress-track-width)/100));stroke-width:calc(var(--_circular-progress-track-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.progress{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:rgba(0,0,0,0)}.track-background{transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;animation:infinite both rotate-arc;animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host(:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors: active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}";
+
+export { styles as default };

package/esm/circular-progress/index.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './circular-progress-adapter';
-export * from './circular-progress-constants';
-export * from './circular-progress-core';
-export * from './circular-progress';
+export * from './circular-progress-adapter.js';
+export * from './circular-progress-constants.js';
+export * from './circular-progress-core.js';
+export * from './circular-progress.js';
 export declare function defineCircularProgressComponent(): void;

package/esm/circular-progress/index.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { CircularProgressComponent } from './circular-progress';
-export * from './circular-progress-adapter';
-export * from './circular-progress-constants';
-export * from './circular-progress-core';
-export * from './circular-progress';
-export function defineCircularProgressComponent() {
+import { CircularProgressComponent } from './circular-progress.js';
+export { CircularProgressAdapter } from './circular-progress-adapter.js';
+export { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants.js';
+export { CircularProgressCore } from './circular-progress-core.js';
+
+function defineCircularProgressComponent() {
     defineCustomElement(CircularProgressComponent);
 }
+
+export { CircularProgressComponent, defineCircularProgressComponent };

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

@@ -1,11 +1,6 @@
-/**
- * @license
- * Copyright 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';
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter.js';
+import { IColorPickerComponent } from './color-picker.js';
+import { ColorPickerValueType, IHSVA, IRGBA } from './color-picker-constants.js';
 export interface IColorPickerAdapter extends IBaseAdapter {
     setPreviewColor(rgbaStyle: string): void;
     setHexInputValue(value: string): void;

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

@@ -1,12 +1,14 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright 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 {
+import { BaseAdapter } from '../core/base/base-adapter.js';
+import { COLOR_PICKER_CONSTANTS, ColorPickerValueType } from './color-picker-constants.js';
+
+class ColorPickerAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
         this._gradientElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.GRADIENT);
@@ -173,3 +175,5 @@ export class ColorPickerAdapter extends BaseAdapter {
         }
     }
 }
+
+export { ColorPickerAdapter };

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

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 export declare const COLOR_PICKER_CONSTANTS: {
     elementName: "forge-color-picker";
     attributes: {

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

@@ -1,9 +1,11 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../constants';
+
+import { COMPONENT_NAME_PREFIX } from '../constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}color-picker`;
 const attributes = {
     VALUE: 'value',
@@ -46,7 +48,7 @@ const events = {
 const numbers = {
     CHANGE_EVENT_DEBOUNCE_THRESHOLD: 200
 };
-export const COLOR_PICKER_CONSTANTS = {
+const COLOR_PICKER_CONSTANTS = {
     elementName,
     attributes,
     events,
@@ -54,8 +56,8 @@ export const COLOR_PICKER_CONSTANTS = {
     selectors,
     numbers
 };
-export const DEFAULT_COLOR = '000000';
-export var ColorPickerValueType;
+const DEFAULT_COLOR = '000000';
+var ColorPickerValueType;
 (function (ColorPickerValueType) {
     ColorPickerValueType["HEX"] = "hex";
     ColorPickerValueType["RGB"] = "rgb";
@@ -63,3 +65,5 @@ export var ColorPickerValueType;
     ColorPickerValueType["HSV"] = "hsv";
     ColorPickerValueType["HSVA"] = "hsva";
 })(ColorPickerValueType || (ColorPickerValueType = {}));
+
+export { COLOR_PICKER_CONSTANTS, ColorPickerValueType, DEFAULT_COLOR };

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

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IColorPickerAdapter } from './color-picker-adapter';
-import { IHSVA, IRGBA } from './color-picker-constants';
+import { IColorPickerAdapter } from './color-picker-adapter.js';
+import { IHSVA, IRGBA } from './color-picker-constants.js';
 export interface IColorPickerCore {
     value: string | null | undefined;
     rgba: IRGBA | null | undefined;

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

@@ -1,14 +1,16 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { debounce } from '@tylertech/forge-core';
-import { ColorPickerValueType, COLOR_PICKER_CONSTANTS, DEFAULT_COLOR } from './color-picker-constants';
-import { ColorPickerGradientSlider } from './color-picker-gradient-slider';
-import { ColorPickerSlider } from './color-picker-slider';
-import { formatHex, formatRgba, hexToRgba, hsvaToRgba, isValidHex, isValidHSVA, isValidRGBA, rgbaToHex, rgbaToHsva } from './color-picker-utils';
-export class ColorPickerCore {
+import { DEFAULT_COLOR, ColorPickerValueType, COLOR_PICKER_CONSTANTS } from './color-picker-constants.js';
+import { ColorPickerGradientSlider } from './color-picker-gradient-slider.js';
+import { ColorPickerSlider } from './color-picker-slider.js';
+import { isValidHex, isValidRGBA, rgbaToHex, isValidHSVA, hsvaToRgba, hexToRgba, rgbaToHsva, formatRgba, formatHex } from './color-picker-utils.js';
+
+class ColorPickerCore {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._value = null;
@@ -242,3 +244,5 @@ export class ColorPickerCore {
         }
     }
 }
+
+export { ColorPickerCore };

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

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 export declare class ColorPickerGradientSlider {
     private _rootElement;
     private _changeListener;

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

@@ -1,11 +1,13 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
-import { relativeCoords } from './color-picker-utils';
-export class ColorPickerGradientSlider {
+
+import { COLOR_PICKER_CONSTANTS } from './color-picker-constants.js';
+import { relativeCoords } from './color-picker-utils.js';
+
+class ColorPickerGradientSlider {
     constructor(_rootElement, _changeListener) {
         this._rootElement = _rootElement;
         this._changeListener = _changeListener;
@@ -122,3 +124,5 @@ export class ColorPickerGradientSlider {
         }
     }
 }
+
+export { ColorPickerGradientSlider };

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

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 export interface IColorPickerSliderOptions {
     min: number;
     max: number;

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

@@ -1,11 +1,13 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COLOR_PICKER_CONSTANTS } from './color-picker-constants';
-import { relativeCoords } from './color-picker-utils';
-export class ColorPickerSlider {
+
+import { COLOR_PICKER_CONSTANTS } from './color-picker-constants.js';
+import { relativeCoords } from './color-picker-utils.js';
+
+class ColorPickerSlider {
     constructor(_rootElement, _changeListener) {
         this._rootElement = _rootElement;
         this._changeListener = _changeListener;
@@ -116,3 +118,5 @@ export class ColorPickerSlider {
         }
     }
 }
+
+export { ColorPickerSlider };

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

@@ -1,9 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IRGBA, IHSVA } from './color-picker-constants';
+import { IRGBA, IHSVA } from './color-picker-constants.js';
 /**
  * Calcuates coordinates relative to the provided element based on absolute coordinates.
  * @param absX The x coordinate in screen space.

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

@@ -1,16 +1,18 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright 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) {
+function relativeCoords(absX, absY, element) {
     const bounds = element.getBoundingClientRect();
     let x = absX - bounds.left;
     let y = absY - bounds.top;
@@ -28,7 +30,7 @@ export function relativeCoords(absX, absY, element) {
     }
     return { x, y, height: bounds.height, width: bounds.width };
 }
-export function hsvaToRgba(hsva) {
+function hsvaToRgba(hsva) {
     let r;
     let g;
     let b;
@@ -87,13 +89,13 @@ export function hsvaToRgba(hsva) {
         a: hsva.a
     };
 }
-export function rgbaToHex(rgba) {
+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) {
+function toHex(x) {
     return ('0' + x.toString(16)).slice(-2);
 }
-export function hexToRgba(hex) {
+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);
@@ -106,10 +108,10 @@ export function hexToRgba(hex) {
         a: parseFloat((parseInt(hexA, 16) / 255).toFixed(2))
     };
 }
-export function formatRgba(rgba) {
+function formatRgba(rgba) {
     return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
 }
-export function formatHex(value, allowOpacity) {
+function formatHex(value, allowOpacity) {
     let hex = value.replace(/^#/, '');
     if (!allowOpacity) {
         if (hex.length === 4) {
@@ -121,7 +123,7 @@ export function formatHex(value, allowOpacity) {
     }
     return `#${hex}`;
 }
-export function rgbaToHsva(rgba) {
+function rgbaToHsva(rgba) {
     const r = rgba.r / 255;
     const g = rgba.g / 255;
     const b = rgba.b / 255;
@@ -160,7 +162,7 @@ export function rgbaToHsva(rgba) {
  * Determines if the provided hex color string is valid.
  * @param value The hex color string.
  */
-export function isValidHex(value) {
+function isValidHex(value) {
     if (!value || typeof value !== 'string') {
         return false;
     }
@@ -184,7 +186,7 @@ export function isValidHex(value) {
  * Determines if the provided RGBA values are valid.
  * @param value The RGBA color values.
  */
-export function isValidRGBA(value) {
+function isValidRGBA(value) {
     return (isNumber(value.r) &&
         value.r >= 0 &&
         value.r <= 255 &&
@@ -202,7 +204,7 @@ export function isValidRGBA(value) {
  * Determines if the provided HSVA values are valid.
  * @param value The HSVA color values.
  */
-export function isValidHSVA(value) {
+function isValidHSVA(value) {
     return (isNumber(value.h) &&
         value.h >= 0 &&
         value.h <= 360 &&
@@ -216,3 +218,5 @@ export function isValidHSVA(value) {
         value.a >= 0 &&
         value.a <= 1);
 }
+
+export { formatHex, formatRgba, hexToRgba, hsvaToRgba, isValidHSVA, isValidHex, isValidRGBA, relativeCoords, rgbaToHex, rgbaToHsva, toHex };

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

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { IColorPickerChangeEventData, IHSVA, IRGBA } from './color-picker-constants';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component.js';
+import { IColorPickerChangeEventData, IHSVA, IRGBA } from './color-picker-constants.js';
 export interface IColorPickerComponent extends IBaseComponent {
     value: string | null | undefined;
     rgba: IRGBA | null | undefined;

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

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var template = "<template>\n  <div class=\"forge-color-picker\" part=\"root\">\n    <input type=\"color\" tabindex=\"-1\" class=\"forge-color-picker__input\" spellcheck=\"false\" autocomplete=\"off\" aria-label=\"Color picker value\" part=\"input\" />\n    <div class=\"forge-color-picker__container\" part=\"container\">\n      <div class=\"forge-color-picker__gradient\" tabindex=\"0\" part=\"gradient\">\n        <div class=\"forge-color-picker__gradient-color\" part=\"gradient-color\"></div>\n        <div class=\"forge-color-picker__gradient-thumb\" part=\"gradient-thumb\"></div>\n      </div>\n      <div class=\"forge-color-picker__control-preview\" part=\"controls-preview-container\">\n        <div class=\"forge-color-picker__controls\" part=\"controls-container\">\n          <div class=\"forge-color-picker__slider-control\" part=\"hue-control-container\">\n            <div class=\"forge-color-picker__slider forge-color-picker__hue-slider\" part=\"hue-control-slider\">\n              <div\n                class=\"forge-color-picker__slider-thumb\"\n                id=\"forge-color-picker-hue-thumb\"\n                part=\"hue-control-slider-thumb\"\n                tabindex=\"0\"\n                role=\"slider\"\n                aria-label=\"Change hue\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"360\"\n                aria-valuenow=\"0\"\n                aria-orientation=\"horizontal\"\n                aria-valuetext=\"0\"></div>\n            </div>\n          </div>\n          <div class=\"forge-color-picker__slider-control\" part=\"opacity-control-container\">\n            <div class=\"forge-color-picker__canvas\" part=\"opacity-control-canvas\">\n              <div class=\"forge-color-picker__slider forge-color-picker__opacity-slider\" part=\"opacity-control-slider\">\n                <div\n                  class=\"forge-color-picker__slider-thumb\"\n                  id=\"forge-color-picker-opacity-thumb\"\n                  part=\"opacity-control-slider-thumb\"\n                  tabindex=\"0\"\n                  role=\"slider\"\n                  aria-label=\"Change opacity\"\n                  aria-valuemin=\"0\"\n                  aria-valuemax=\"100\"\n                  aria-valuenow=\"0\"\n                  aria-orientation=\"horizontal\"\n                  aria-valuetext=\"0\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"forge-color-picker__color-preview-container forge-color-picker__canvas\" part=\"color-preview-container\">\n          <div class=\"forge-color-picker__color-preview\" part=\"color-preview\"></div>\n        </div>\n      </div>\n      <div class=\"forge-color-picker__value\" part=\"value-container\">\n        <div class=\"forge-color-picker__color-types\" part=\"types-container\">\n          <div class=\"forge-color-picker__color-hex\" part=\"hex-type-container\">\n            <div part=\"hex-type-label-wrapper\">\n              <label for=\"forge-color-picker-hex-input\" part=\"hex-label\">HEX</label>\n            </div>\n            <input\n              type=\"text\"\n              id=\"forge-color-picker-hex-input\"\n              part=\"hex-input\"\n              style=\"width: 88px\"\n              maxlength=\"9\"\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              aria-label=\"HEX value\" />\n          </div>\n          <div class=\"forge-color-picker__color-rgba\" part=\"rgba-type-container\">\n            <div part=\"rgba-type-wrapper-r\">\n              <label for=\"forge-color-picker-rgba-r-input\" part=\"rgba-type-label-r\">R</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-rgba-r-input\"\n                part=\"rgba-type-input-r\"\n                min=\"0\"\n                max=\"255\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Red\" />\n            </div>\n            <div part=\"rgba-type-wrapper-g\">\n              <label for=\"forge-color-picker-rgba-g-input\" part=\"rgba-type-label-g\">G</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-rgba-g-input\"\n                part=\"rgba-type-input-g\"\n                min=\"0\"\n                max=\"255\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Green\" />\n            </div>\n            <div part=\"rgba-type-wrapper-b\">\n              <label for=\"forge-color-picker-rgba-b-input\" part=\"rgba-type-label-b\">B</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-rgba-b-input\"\n                part=\"rgba-type-input-b\"\n                min=\"0\"\n                max=\"255\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Blue\" />\n            </div>\n            <div part=\"rgba-type-wrapper-a\">\n              <label for=\"forge-color-picker-rgba-a-input\" part=\"rgba-type-label-a\">A</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-rgba-a-input\"\n                part=\"rgba-type-input-a\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.1\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Alpha\" />\n            </div>\n          </div>\n          <div class=\"forge-color-picker__color-hsva\" part=\"hsva-type-container\">\n            <div part=\"hsva-type-wrapper-h\">\n              <label for=\"forge-color-picker-hsva-h-input\" part=\"hsva-type-label-h\">H</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-hsva-h-input\"\n                part=\"hsva-type-input-h\"\n                min=\"0\"\n                max=\"360\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Hue\" />\n            </div>\n            <div part=\"hsva-type-wrapper-s\">\n              <label for=\"forge-color-picker-hsva-s-input\" part=\"hsva-type-label-s\">S</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-hsva-s-input\"\n                part=\"hsva-type-input-s\"\n                min=\"0\"\n                max=\"100\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Saturation\" />\n            </div>\n            <div part=\"hsva-type-wrapper-v\">\n              <label for=\"forge-color-picker-hsva-v-input\" part=\"hsva-type-label-v\">V</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-hsva-v-input\"\n                part=\"hsva-type-input-v\"\n                min=\"0\"\n                max=\"100\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Value\" />\n            </div>\n            <div part=\"hsva-type-wrapper-a\">\n              <label for=\"forge-color-picker-hsva-a-input\" part=\"hsva-type-label-a\">A</label>\n              <input\n                type=\"number\"\n                id=\"forge-color-picker-hsva-a-input\"\n                part=\"hsva-type-input-a\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.1\"\n                maxlength=\"3\"\n                autocomplete=\"off\"\n                aria-label=\"Alpha\" />\n            </div>\n          </div>\n        </div>\n        <div class=\"forge-color-picker__type-button\" part=\"type-container\">\n          <forge-icon-button part=\"type-button\" id=\"forge-color-picker-type-button\" aria-labelledby=\"type-button-tooltip\" part=\"type-button-element\">\n            <forge-icon name=\"unfold_more\" part=\"type-button-icon\"></forge-icon>\n          </forge-icon-button>\n          <forge-tooltip placement=\"bottom\" id=\"type-button-tooltip\">Change color format</forge-tooltip>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n";
+
+export { template as default };