@tylertech/forge 2.16.6 → 3.0.0-next.10

package/esm/icon/icon.js

@@ -17,11 +17,6 @@ const styles = ':host{font-size:24px;font-size:var(--forge-icon-font-size, 24px)
  * @tag forge-icon
  */
 let IconComponent = class IconComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new IconFoundation(new IconAdapter(this));
-    }
     static get observedAttributes() {
         return [
             ICON_CONSTANTS.attributes.NAME,
@@ -32,6 +27,11 @@ let IconComponent = class IconComponent extends BaseComponent {
             ICON_CONSTANTS.attributes.VIEWBOX
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new IconFoundation(new IconAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/icon-button/icon-button-component-delegate.d.ts

@@ -7,7 +7,7 @@ import { IconExternalType, IIconComponent } from '../icon';
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IIconButtonComponent } from './icon-button';
 import { PopupPlacement } from '../popup';
-export declare type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
+export type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
 export interface IIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     iconName?: string;
     iconExternal?: boolean;

package/esm/icon-button/icon-button.d.ts

@@ -33,6 +33,7 @@ export declare class IconButtonComponent extends BaseComponent implements IIconB
     private _dense;
     private _densityLevel;
     private _toggleHandler;
+    private _destroyUserInteractionListener;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/esm/icon-button/icon-button.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import { coerceBoolean, coerceNumber, CustomElement, emitEvent, ensureChild, toggleClass } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { ForgeRipple } from '../ripple';
-import { userInteractionListener } from '../core/utils';
+import { createUserInteractionListener } from '../core/utils';
 import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
 /**
  * The custom element class behind the `<forge-icon-button>` element.
@@ -15,13 +15,6 @@ import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
  * @tag forge-icon-button
  */
 let IconButtonComponent = class IconButtonComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._toggle = false;
-        this._isOn = false;
-        this._dense = false;
-        this._densityLevel = 5;
-    }
     static get observedAttributes() {
         return [
             ICON_BUTTON_CONSTANTS.attributes.IS_ON,
@@ -30,6 +23,13 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
             ICON_BUTTON_CONSTANTS.attributes.TOGGLE
         ];
     }
+    constructor() {
+        super();
+        this._toggle = false;
+        this._isOn = false;
+        this._dense = false;
+        this._densityLevel = 5;
+    }
     connectedCallback() {
         if (this.querySelector(ICON_BUTTON_CONSTANTS.selectors.BUTTON)) {
             this._initialize();
@@ -39,6 +39,10 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
         }
     }
     disconnectedCallback() {
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
         if (this._rippleInstance) {
             this._rippleInstance.destroy();
         }
@@ -130,7 +134,10 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
         this._deferRippleInitialization();
     }
     async _deferRippleInitialization() {
-        const type = await userInteractionListener(this._buttonElement);
+        const { userInteraction, destroy } = createUserInteractionListener(this._buttonElement);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
         if (!this._rippleInstance) {
             this._rippleInstance = this._createRipple();
             if (type === 'focusin') {

package/esm/index.d.ts

@@ -32,6 +32,7 @@ export * from './expansion-panel';
 export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
+export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
@@ -52,6 +53,7 @@ export * from './select';
 export * from './skeleton';
 export * from './slider';
 export * from './split-view';
+export * from './state-layer';
 export * from './stepper';
 export * from './switch';
 export * from './table';

package/esm/index.js

@@ -35,6 +35,7 @@ import { DrawerComponent, MiniDrawerComponent, ModalDrawerComponent } from './dr
 import { ExpansionPanelComponent } from './expansion-panel';
 import { FilePickerComponent } from './file-picker';
 import { FloatingActionButton } from './floating-action-button';
+import { FocusIndicatorComponent } from './focus-indicator';
 import { IconButtonComponent } from './icon-button';
 import { InlineMessageComponent } from './inline-message';
 import { KeyboardShortcutComponent } from './keyboard-shortcut';
@@ -57,6 +58,7 @@ import { OptionComponent, OptionGroupComponent, SelectComponent } from './select
 import { SkeletonComponent } from './skeleton';
 import { SliderComponent } from './slider';
 import { SplitViewComponent } from './split-view';
+import { StateLayerComponent } from './state-layer';
 import { StepComponent, StepperComponent } from './stepper';
 import { SwitchComponent } from './switch';
 import { TableComponent } from './table';
@@ -99,6 +101,7 @@ export * from './expansion-panel';
 export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
+export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
@@ -119,6 +122,7 @@ export * from './select';
 export * from './skeleton';
 export * from './slider';
 export * from './split-view';
+export * from './state-layer';
 export * from './stepper';
 export * from './switch';
 export * from './table';
@@ -162,6 +166,7 @@ const CUSTOM_ELEMENTS = [
     ExpansionPanelComponent,
     FilePickerComponent,
     FloatingActionButton,
+    FocusIndicatorComponent,
     ProductIconComponent,
     IconComponent,
     IconButtonComponent,
@@ -195,6 +200,7 @@ const CUSTOM_ELEMENTS = [
     SliderComponent,
     SplitViewComponent,
     StackComponent,
+    StateLayerComponent,
     StepperComponent,
     StepComponent,
     SwitchComponent,

package/esm/keyboard-shortcut/keyboard-shortcut.js

@@ -15,10 +15,6 @@ import { BaseComponent } from '../core/base/base-component';
  * @tag forge-keyboard-shortcut
  */
 let KeyboardShortcutComponent = class KeyboardShortcutComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._foundation = new KeyboardShortcutFoundation(new KeyboardShortcutAdapter(this));
-    }
     static get observedAttributes() {
         return [
             KEYBOARD_SHORTCUT_CONSTANTS.attributes.KEY,
@@ -31,6 +27,10 @@ let KeyboardShortcutComponent = class KeyboardShortcutComponent extends BaseComp
             KEYBOARD_SHORTCUT_CONSTANTS.attributes.DISABLED
         ];
     }
+    constructor() {
+        super();
+        this._foundation = new KeyboardShortcutFoundation(new KeyboardShortcutAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/label-value/label-value-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { ILabelValueComponent } from '../label-value';
-export declare type LabelValueComponentDelegateProps = Partial<ILabelValueComponent>;
+export type LabelValueComponentDelegateProps = Partial<ILabelValueComponent>;
 export interface ILabelValueComponentDelegateOptions extends IBaseComponentDelegateOptions {
     labelText: string;
     valueText: string;

package/esm/label-value/label-value-constants.d.ts

@@ -23,5 +23,5 @@ export declare const LABEL_VALUE_CONSTANTS: {
         ROOT: string;
     };
 };
-export declare type LabelValueAlignment = 'left' | 'center' | 'right';
+export type LabelValueAlignment = 'left' | 'center' | 'right';
 export { type FieldDensityType as LabelValueDensityType } from '../field/field-constants';

package/esm/label-value/label-value.js

@@ -17,11 +17,6 @@ const styles = ':host{display:block;min-width:0}:host([hidden]){display:none}.fo
  * @tag forge-label-value
  */
 let LabelValueComponent = class LabelValueComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new LabelValueFoundation(new LabelValueAdapter(this));
-    }
     static get observedAttributes() {
         return [
             LABEL_VALUE_CONSTANTS.attributes.EMPTY,
@@ -30,6 +25,11 @@ let LabelValueComponent = class LabelValueComponent extends BaseComponent {
             LABEL_VALUE_CONSTANTS.attributes.ALIGN
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new LabelValueFoundation(new LabelValueAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/linear-progress/linear-progress-adapter.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { ILinearProgressComponent } from './linear-progress';
+export interface ILinearProgressAdapter extends IBaseAdapter {
+    setDeterminate(value: boolean): void;
+    setProgress(value: number): void;
+    setBuffer(value: number): void;
+    setAriaLabel(value: string): void;
+}
+export declare class LinearProgressAdapter extends BaseAdapter<ILinearProgressComponent> implements ILinearProgressAdapter {
+    private readonly _rootElement;
+    private readonly _progressElement;
+    private readonly _bufferElement;
+    constructor(component: ILinearProgressComponent);
+    setDeterminate(value: boolean): void;
+    setProgress(value: number): void;
+    setBuffer(value: number): void;
+    setAriaLabel(value: string): void;
+}

package/esm/linear-progress/linear-progress-adapter.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
+export class LinearProgressAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.ROOT);
+        this._progressElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.PROGRESS);
+        this._bufferElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.BUFFER);
+    }
+    setDeterminate(value) {
+        if (!value) {
+            this._rootElement.removeAttribute('aria-valuenow');
+            this._progressElement.style.transform = '';
+            this._bufferElement.style.transform = '';
+        }
+        this._rootElement.classList.toggle(LINEAR_PROGRESS_CONSTANTS.classes.INDETERMINATE, !value);
+    }
+    setProgress(value) {
+        this._rootElement.setAttribute('aria-valuenow', `${value}`);
+        this._progressElement.style.transform = `scaleX(${value * 100}%)`;
+    }
+    setBuffer(value) {
+        this._bufferElement.style.transform = `scaleX(${value * 100}%)`;
+    }
+    setAriaLabel(value) {
+        toggleAttribute(this._rootElement, !!value, 'aria-label', value);
+    }
+}

package/esm/linear-progress/linear-progress-constants.d.ts

@@ -5,14 +5,18 @@
  */
 export declare const LINEAR_PROGRESS_CONSTANTS: {
     elementName: "forge-linear-progress";
+    classes: {
+        INDETERMINATE: string;
+    };
     selectors: {
         ROOT: string;
+        PROGRESS: string;
+        BUFFER: string;
     };
     attributes: {
         DETERMINATE: string;
         PROGRESS: string;
         BUFFER: string;
-        VISIBLE: string;
-        PROGRESSBAR_ARIA_LABEL: string;
+        ARIA_LABEL: string;
     };
 };

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

@@ -5,18 +5,23 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}linear-progress`;
+const classes = {
+    INDETERMINATE: 'forge-linear-progress--indeterminate'
+};
 const selectors = {
-    ROOT: '.mdc-linear-progress'
+    ROOT: '.forge-linear-progress',
+    PROGRESS: '.primary-bar',
+    BUFFER: '.buffer-bar'
 };
 const attributes = {
     DETERMINATE: 'determinate',
     PROGRESS: 'progress',
     BUFFER: 'buffer',
-    VISIBLE: 'visible',
-    PROGRESSBAR_ARIA_LABEL: 'progressbar-aria-label'
+    ARIA_LABEL: 'data-aria-label'
 };
 export const LINEAR_PROGRESS_CONSTANTS = {
     elementName,
+    classes,
     selectors,
     attributes
 };

package/esm/linear-progress/linear-progress-foundation.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ILinearProgressAdapter } from './linear-progress-adapter';
+export interface ICircularProgressFoundation extends ICustomElementFoundation {
+    determinate: boolean;
+    progress: number;
+    buffer: number;
+}
+export declare class LinearProgressFoundation {
+    private _adapter;
+    private _determinate;
+    private _progress;
+    private _buffer;
+    constructor(_adapter: ILinearProgressAdapter);
+    set ariaLabel(value: string);
+    get determinate(): boolean;
+    set determinate(value: boolean);
+    get progress(): number;
+    set progress(value: number);
+    get buffer(): number;
+    set buffer(value: number);
+}

package/esm/linear-progress/linear-progress-foundation.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
+export class LinearProgressFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._determinate = false;
+        this._progress = 0;
+        this._buffer = 1;
+    }
+    set ariaLabel(value) {
+        this._adapter.setAriaLabel(value);
+    }
+    get determinate() {
+        return this._determinate;
+    }
+    set determinate(value) {
+        if (this._determinate !== value) {
+            this._determinate = value;
+            this._adapter.setBuffer(this._determinate ? this._buffer : 1);
+            this._adapter.setProgress(this._determinate ? this._progress : 0);
+            this._adapter.setDeterminate(this._determinate);
+            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE, value);
+        }
+    }
+    get progress() {
+        return this._progress;
+    }
+    set progress(value) {
+        if (this._progress !== value) {
+            this._progress = value;
+            if (this._determinate) {
+                this._adapter.setProgress(this._progress);
+            }
+            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, value.toString());
+        }
+    }
+    get buffer() {
+        return this._buffer;
+    }
+    set buffer(value) {
+        if (this._buffer !== value) {
+            this._buffer = value;
+            if (this._determinate) {
+                this._adapter.setBuffer(this._buffer);
+            }
+            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER, value.toString());
+        }
+    }
+}

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

@@ -8,9 +8,6 @@ export interface ILinearProgressComponent extends IBaseComponent {
     determinate: boolean;
     progress: number;
     buffer: number;
-    visible: boolean;
-    open(): void;
-    close(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,32 +15,42 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-linear-progress>` custom element.
- *
  * @tag forge-linear-progress
+ *
+ * @summary
+ * Linear progress indicators display progress by animating along a linear track in a horizontal direction.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ *
+ * @property {boolean} determinate - Controls the determinate state.
+ * @property {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @property {boolean} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
+ *
+ * @attribute {boolean} determinate - Controls the determinate state.
+ * @attribute {number} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @attribute {number} buffer - Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
+ * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progress bar element.
+ *
+ * @cssproperty --forge-linear-progress-height - The height of the element.
+ * @cssproperty --forge-linear-progress-track-color - The background color of the indicator.
+ * @cssproperty --forge-linear-progress-indicator-color - The color of the indicator.
+ * @cssproperty --forge-linear-progress-track-shape - The shape of the indicator.
+ * @cssproperty --forge-linear-progress-indicator-height - The height of the indicator only.
+ * @cssproperty --forge-linear-progress-determinate-duration - The duration of the determinate animation.
+ * @cssproperty --forge-linear-progress-indeterminate-duration - The duration of the indeterminate animation.
+ * @cssproperty --forge-linear-progress-determinate-easing - The easing function to use for the determinate animation.
+ *
+ * @csspart progressbar - Styles the progress bar container element
  */
 export declare class LinearProgressComponent extends BaseComponent implements ILinearProgressComponent {
     static get observedAttributes(): string[];
-    private _mdcLinearProgress;
-    private _determinate;
-    private _progress;
-    private _buffer;
-    private _visible;
-    private _progressbarElement;
+    private _foundation;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    set determinate(value: boolean);
-    get determinate(): boolean;
-    set progress(value: number);
-    get progress(): number;
-    set buffer(value: number);
-    get buffer(): number;
-    get visible(): boolean;
-    set visible(value: boolean);
-    open(): void;
-    close(): void;
-    private _initialize;
-    private _applyVisibility;
+    determinate: boolean;
+    progress: number;
+    buffer: number;
 }