@tylertech/forge 3.0.0-next.4 → 3.0.0-next.6

package/esm/expansion-panel/expansion-panel.js

@@ -17,11 +17,6 @@ const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansi
  * @tag forge-expansion-panel
  */
 let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
-    }
     static get observedAttributes() {
         return [
             EXPANSION_PANEL_CONSTANTS.attributes.OPEN,
@@ -29,6 +24,11 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
             EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/field/field-constants.d.ts

@@ -34,6 +34,6 @@ export declare const FIELD_CONSTANTS: {
         LABEL: string;
     };
 };
-export declare type FieldDensityType = 'roomy' | 'default' | 'dense';
-export declare type FieldFloatLabelType = 'always' | 'auto';
-export declare type FieldShapeType = 'default' | 'rounded';
+export type FieldDensityType = 'roomy' | 'default' | 'dense';
+export type FieldFloatLabelType = 'always' | 'auto';
+export type FieldShapeType = 'default' | 'rounded';

package/esm/field/field.js

@@ -8,9 +8,6 @@ import { FIELD_CONSTANTS } from './field-constants';
 import { BaseComponent } from '../core/base/base-component';
 import { coerceBoolean, ensureChild, FoundationProperty } from '@tylertech/forge-core';
 export class FieldComponent extends BaseComponent {
-    constructor() {
-        super();
-    }
     static get observedAttributes() {
         return [
             FIELD_CONSTANTS.attributes.DENSITY,
@@ -20,6 +17,9 @@ export class FieldComponent extends BaseComponent {
             FIELD_CONSTANTS.attributes.REQUIRED
         ];
     }
+    constructor() {
+        super();
+    }
     connectedCallback() {
         if (this.querySelector(FIELD_CONSTANTS.selectors.INPUT)) {
             this._initialize();

package/esm/file-picker/file-picker-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IFilePickerComponent } from './file-picker';
 import { IFilePickerChangeEventData } from './file-picker-constants';
-export declare type FilePickerComponentDelegateProps = Partial<IFilePickerComponent>;
+export type FilePickerComponentDelegateProps = Partial<IFilePickerComponent>;
 export interface IFilePickerComponentDelegateOptions extends IBaseComponentDelegateOptions {
     primaryText?: string;
     secondaryText?: string;

package/esm/file-picker/file-picker.js

@@ -18,11 +18,6 @@ const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:bord
  * @tag forge-file-picker
  */
 let FilePickerComponent = class FilePickerComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
-    }
     static get observedAttributes() {
         return [
             FILE_PICKER_CONSTANTS.attributes.ACCEPT,
@@ -34,6 +29,11 @@ let FilePickerComponent = class FilePickerComponent extends BaseComponent {
             FILE_PICKER_CONSTANTS.attributes.BORDERLESS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/floating-action-button/floating-action-button-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IFloatingActionButtonComponent } from './floating-action-button';
-export declare type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
+export type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
 export interface IFloatingActionButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     text?: string;
 }

package/esm/floating-action-button/floating-action-button.js

@@ -14,12 +14,6 @@ import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-const
  * @tag forge-fab
  */
 let FloatingActionButton = class FloatingActionButton extends BaseComponent {
-    constructor() {
-        super();
-        this._isExtended = false;
-        this._isMini = false;
-        this._isExited = false;
-    }
     static get observedAttributes() {
         return [
             FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED,
@@ -27,6 +21,12 @@ let FloatingActionButton = class FloatingActionButton extends BaseComponent {
             FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED
         ];
     }
+    constructor() {
+        super();
+        this._isExtended = false;
+        this._isMini = false;
+        this._isExited = false;
+    }
     connectedCallback() {
         if (this.children.length) {
             this._initialize();

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.js

@@ -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();

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,37 @@ 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 indicator container.
+ * @cssproperty --forge-linear-progress-indicator-background-color - The background color of the indicator.
+ * @cssproperty --forge-linear-progress-indicator-color - The color of the indicator.
+ *
+ * @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;
 }