@tylertech/forge 2.0.0

package/esm/stepper/index.js

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

package/esm/stepper/step/index.d.ts

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

package/esm/stepper/step/index.js

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

package/esm/stepper/step/step-adapter.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base';
+import { IStepComponent } from './step';
+import { StepIcons } from './step-constants';
+import { ForgeRipple, ForgeRippleCapableSurface } from '../../ripple';
+export interface IStepAdapter extends IBaseAdapter {
+    component: IStepComponent;
+    toggleDisabled(disabled: boolean): void;
+    focusButton(): void;
+    attachRipple: () => void;
+    detatchRipple: () => void;
+    setIndex(value: number): void;
+    initialize(): void;
+    toggleRootClass(className: string, on: boolean): void;
+    setRootAttribute(attribute: string, value: string): void;
+    setRootTabIndex(value: number): void;
+    toggleIcon(name: StepIcons, show: boolean): void;
+    setClickListener(listener: (evt: MouseEvent) => void): void;
+    removeClickListener(listener: (evt: MouseEvent) => void): void;
+    slotHasContent(): boolean;
+    setExpanded(expanded: boolean): void;
+    setSlotListener(listener: (evt: MouseEvent) => void): void;
+    removeSlotListener(listener: (evt: MouseEvent) => void): void;
+    setExpansionPanelAnimations: (animate: boolean) => void;
+    addExpansionPanel: () => void;
+    removeExpansionPanel: () => void;
+    addExpansionIcon: () => void;
+    removeExpansionIcon: () => void;
+    addExpansionPanelListener(event: string, listener: EventListener): void;
+    removeExpansionPanelListener(event: string, listener: EventListener): void;
+    isExpandedContentInFocus(checkElement?: HTMLElement): boolean;
+}
+export declare class StepAdapter extends BaseAdapter<IStepComponent> implements IStepAdapter, ForgeRippleCapableSurface {
+    private _buttonElement;
+    private _container;
+    private _rippleInstance;
+    private _expansionSlot;
+    private _expansionPanel;
+    constructor(_component: IStepComponent);
+    get root(): HTMLElement;
+    unbounded: boolean;
+    get disabled(): boolean;
+    get component(): IStepComponent;
+    setRootTabIndex(value: number): void;
+    initialize(): void;
+    attachRipple(): void;
+    detatchRipple(): void;
+    initializeRipple(): ForgeRipple;
+    setIndex(value: number): void;
+    toggleRootClass(className: string, on: boolean): void;
+    setRootAttribute(attribute: string, value: string): void;
+    focusButton(): void;
+    toggleDisabled(disabled: boolean): void;
+    toggleIcon(name: StepIcons, show: boolean): void;
+    slotHasContent(): boolean;
+    setClickListener(listener: (evt: MouseEvent) => void): void;
+    removeClickListener(listener: (evt: MouseEvent) => void): void;
+    setSlotListener(listener: (evt: MouseEvent) => void): void;
+    removeSlotListener(listener: (evt: MouseEvent) => void): void;
+    setExpanded(expanded: boolean): void;
+    setExpansionPanelAnimations(animate: boolean): void;
+    addExpansionPanel(): void;
+    removeExpansionPanel(): void;
+    addExpansionIcon(): void;
+    removeExpansionIcon(): void;
+    addExpansionPanelListener(event: string, listener: EventListener): void;
+    removeExpansionPanelListener(event: string, listener: EventListener): void;
+    isExpandedContentInFocus(checkElement?: HTMLElement): boolean;
+    private _createRipple;
+    private _createExpansionPanel;
+    private _createExpansionIcon;
+}

package/esm/stepper/step/step-adapter.js

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base';
+import { STEP_CONSTANTS } from './step-constants';
+import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
+export class StepAdapter extends BaseAdapter {
+    constructor(_component) {
+        super(_component);
+        this.unbounded = false;
+        this._buttonElement = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP);
+        this._container = getShadowElement(_component, STEP_CONSTANTS.selectors.STEP_CONTAINER);
+    }
+    // ForgeRippleCapableSurface
+    get root() {
+        return this._buttonElement;
+    }
+    get disabled() {
+        return this._buttonElement.disabled;
+    }
+    get component() {
+        return this._component;
+    }
+    setRootTabIndex(value) {
+        this._buttonElement.tabIndex = value;
+    }
+    initialize() {
+        this._component.setAttribute('role', 'tab');
+    }
+    attachRipple() {
+        this._rippleInstance = this.initializeRipple();
+    }
+    detatchRipple() {
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+        }
+    }
+    initializeRipple() {
+        return this._createRipple();
+    }
+    setIndex(value) {
+        this._buttonElement.querySelector(STEP_CONSTANTS.selectors.INDEX).innerHTML = (value + 1 || '').toString();
+    }
+    toggleRootClass(className, on) {
+        toggleClass(this._buttonElement, on, className);
+    }
+    setRootAttribute(attribute, value) {
+        this._buttonElement.setAttribute(attribute, value);
+    }
+    focusButton() {
+        this._buttonElement.focus();
+    }
+    toggleDisabled(disabled) {
+        toggleClass(this._buttonElement, disabled, STEP_CONSTANTS.classes.DISABLED);
+        toggleAttribute(this._buttonElement, disabled, 'aria-disabled');
+        this._buttonElement.disabled = disabled;
+    }
+    toggleIcon(name, show) {
+        const index = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.INDEX);
+        const icon = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.ICON);
+        if (!show) {
+            index.style.display = 'inherit';
+            icon.style.display = 'none';
+            return;
+        }
+        index.style.display = 'none';
+        icon.style.display = 'inherit';
+        icon.name = name;
+    }
+    slotHasContent() {
+        return this._expansionSlot.assignedElements({ flatten: true }).length > 0;
+    }
+    setClickListener(listener) {
+        this._buttonElement.addEventListener('click', listener);
+    }
+    removeClickListener(listener) {
+        this._buttonElement.removeEventListener('click', listener);
+    }
+    setSlotListener(listener) {
+        this._expansionSlot.addEventListener('slotchange', listener);
+    }
+    removeSlotListener(listener) {
+        if (this._expansionSlot) {
+            this._expansionSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    setExpanded(expanded) {
+        if (this._expansionPanel) {
+            this._expansionPanel.open = expanded;
+            toggleAttribute(this._expansionPanel, !expanded, 'tabindex', '-1');
+        }
+        toggleClass(this._buttonElement, expanded, STEP_CONSTANTS.classes.EXPANDED);
+    }
+    setExpansionPanelAnimations(animate) {
+        this._expansionPanel.useAnimations = animate;
+    }
+    addExpansionPanel() {
+        const panel = this._container.querySelector(STEP_CONSTANTS.selectors.EXPANSION_PANEL);
+        if (panel) {
+            return;
+        }
+        this._expansionPanel = this._container.appendChild(this._createExpansionPanel());
+        this._expansionSlot = this._expansionPanel.querySelector(STEP_CONSTANTS.selectors.EXPANSION_SLOT);
+    }
+    removeExpansionPanel() {
+        const panel = this._container.querySelector(STEP_CONSTANTS.selectors.EXPANSION_PANEL);
+        if (panel) {
+            this._container.removeChild(panel);
+        }
+    }
+    addExpansionIcon() {
+        const icon = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.EXPANSION_ICON);
+        if (icon) {
+            return;
+        }
+        this._buttonElement.appendChild(this._createExpansionIcon());
+    }
+    removeExpansionIcon() {
+        const icon = this._buttonElement.querySelector(STEP_CONSTANTS.selectors.EXPANSION_ICON);
+        if (icon) {
+            this._buttonElement.removeChild(icon);
+        }
+    }
+    addExpansionPanelListener(event, listener) {
+        this._expansionPanel.addEventListener(event, listener);
+    }
+    removeExpansionPanelListener(event, listener) {
+        if (this._expansionPanel) {
+            this._expansionPanel.removeEventListener(event, listener);
+        }
+    }
+    isExpandedContentInFocus(checkElement) {
+        return this._expansionSlot.assignedElements().some(element => element.contains(checkElement || document.activeElement));
+    }
+    _createRipple() {
+        const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { isSurfaceDisabled: () => this._buttonElement.disabled });
+        const ripple = new ForgeRipple(this._buttonElement, new ForgeRippleFoundation(adapter));
+        return ripple;
+    }
+    _createExpansionPanel() {
+        const panel = document.createElement('forge-expansion-panel');
+        panel.useAnimations = false;
+        panel.setAttribute('part', 'expansion-panel');
+        addClass(STEP_CONSTANTS.classes.EXPANSION_PANEL, panel);
+        const slot = document.createElement('slot');
+        slot.setAttribute('name', 'expansion-content');
+        addClass(STEP_CONSTANTS.classes.EXPANSION_CONTENT, slot);
+        panel.appendChild(slot);
+        return panel;
+    }
+    _createExpansionIcon() {
+        const icon = document.createElement('forge-icon');
+        addClass(STEP_CONSTANTS.classes.EXPANSION_ICON, icon);
+        icon.name = 'keyboard_arrow_down';
+        icon.setAttribute('part', 'expanded-icon');
+        return icon;
+    }
+}

package/esm/stepper/step/step-constants.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const STEP_CONSTANTS: {
+    elementName: "forge-step";
+    classes: {
+        STEP: string;
+        STEP_CONTAINER: string;
+        ERROR: string;
+        SELECTED: string;
+        COMPLETED: string;
+        EDITABLE: string;
+        ALTERNATIVE: string;
+        ICON_CONTENT: string;
+        ICON: string;
+        LABEL_CONTAINER: string;
+        LABEL: string;
+        OPTIONAL_LABEL: string;
+        INDEX: string;
+        CLUSTERED: string;
+        DISABLED: string;
+        VERTICAL: string;
+        EXPANDED: string;
+        EXPANDABLE: string;
+        EXPANSION_PANEL: string;
+        EXPANSION_ICON: string;
+        EXPANSION_ICON_EXPANDED: string;
+        EXPANSION_CONTENT: string;
+    };
+    selectors: {
+        STEP: string;
+        STEP_CONTAINER: string;
+        INDEX: string;
+        ICON: string;
+        ICON_CONTENT: string;
+        EXPANSION_SLOT: string;
+        EXPANSION_PANEL: string;
+        EXPANSION_ICON: string;
+    };
+    attributes: {
+        SELECTED: string;
+        INDEX: string;
+        EDITABLE: string;
+        COMPLETED: string;
+        ERROR: string;
+        ALTERNATIVE: string;
+        FIRST: string;
+        LAST: string;
+        ARIA_SELECTED: string;
+        CLUSTERED: string;
+        DISABLED: string;
+        VERTICAL: string;
+        EXPANDED: string;
+        EXPANDABLE: string;
+        IGNORE_USER_EXPANSION: string;
+    };
+    events: {
+        SELECT: string;
+        EXPANDED_CONTENT_FOCUSIN: string;
+        EXPANDED_CONTENT_FOCUSOUT: string;
+    };
+    strings: {
+        ARROW_LEFT_KEY: string;
+        ARROW_RIGHT_KEY: string;
+        ARROW_UP_KEY: string;
+        ARROW_DOWN_KEY: string;
+        END_KEY: string;
+        ENTER_KEY: string;
+        HOME_KEY: string;
+        SPACE_KEY: string;
+        EXPANSION_CONTENT_SLOT_NAME: string;
+    };
+};
+export declare type StepIcons = 'check' | 'block' | 'mode_edit' | 'warning' | '';

package/esm/stepper/step/step-constants.js

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}step`;
+const classes = {
+    STEP: 'forge-step',
+    STEP_CONTAINER: 'forge-step__container',
+    ERROR: 'forge-step--error',
+    SELECTED: 'forge-step--selected',
+    COMPLETED: 'forge-step--completed',
+    EDITABLE: 'forge-step--editable',
+    ALTERNATIVE: 'forge-step--alternative',
+    ICON_CONTENT: 'forge-step-icon-content',
+    ICON: 'forge-step-icon',
+    LABEL_CONTAINER: 'forge-step-label-container',
+    LABEL: 'forge-step-label',
+    OPTIONAL_LABEL: 'forge-step-optional-label',
+    INDEX: 'forge-step-index',
+    CLUSTERED: 'forge-step--clustered',
+    DISABLED: 'forge-step--disabled',
+    VERTICAL: 'forge-step--vertical',
+    EXPANDED: 'forge-step--expanded',
+    EXPANDABLE: 'forge-step--expandable',
+    EXPANSION_PANEL: 'forge-step__expansion-panel',
+    EXPANSION_ICON: 'forge-step__expanded-icon',
+    EXPANSION_ICON_EXPANDED: 'forge-step__expanded-icon--expanded',
+    EXPANSION_CONTENT: 'forge-step__expansion-content'
+};
+const attributes = {
+    SELECTED: `selected`,
+    INDEX: `index`,
+    EDITABLE: `editable`,
+    COMPLETED: `completed`,
+    ERROR: `error`,
+    ALTERNATIVE: 'alternative',
+    FIRST: 'first',
+    LAST: 'last',
+    ARIA_SELECTED: 'aria-selected',
+    CLUSTERED: `clustered`,
+    DISABLED: 'disabled',
+    VERTICAL: 'vertical',
+    EXPANDED: 'expanded',
+    EXPANDABLE: 'expandable',
+    IGNORE_USER_EXPANSION: 'ignore-user-expansion'
+};
+const selectors = {
+    STEP: `.${classes.STEP}`,
+    STEP_CONTAINER: `.${classes.STEP_CONTAINER}`,
+    INDEX: `.${classes.INDEX}`,
+    ICON: `.${classes.ICON}`,
+    ICON_CONTENT: `.${classes.ICON_CONTENT}`,
+    EXPANSION_SLOT: `slot[name="expansion-content"]`,
+    EXPANSION_PANEL: `.${classes.EXPANSION_PANEL}`,
+    EXPANSION_ICON: `.${classes.EXPANSION_ICON}`
+};
+const strings = {
+    ARROW_LEFT_KEY: 'ArrowLeft',
+    ARROW_RIGHT_KEY: 'ArrowRight',
+    ARROW_UP_KEY: 'ArrowUp',
+    ARROW_DOWN_KEY: 'ArrowDown',
+    END_KEY: 'End',
+    ENTER_KEY: 'Enter',
+    HOME_KEY: 'Home',
+    SPACE_KEY: 'Space',
+    EXPANSION_CONTENT_SLOT_NAME: 'expansion-content'
+};
+const events = {
+    SELECT: `${elementName}-select`,
+    EXPANDED_CONTENT_FOCUSIN: `${elementName}-expanded-content-focusin`,
+    EXPANDED_CONTENT_FOCUSOUT: `${elementName}-expanded-content-focusout`
+};
+export const STEP_CONSTANTS = {
+    elementName,
+    classes,
+    selectors,
+    attributes,
+    events,
+    strings
+};

package/esm/stepper/step/step-foundation.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IStepAdapter } from './step-adapter';
+export interface IStepFoundation extends ICustomElementFoundation {
+    index: number;
+    editable: boolean;
+    completed: boolean;
+    error: boolean;
+    selected: boolean;
+    alternative: boolean;
+    vertical: boolean;
+    setStepTabIndex(index: number): void;
+}
+export declare class StepFoundation implements IStepFoundation {
+    private _adapter;
+    private _index;
+    private _completed;
+    private _editable;
+    private _error;
+    private _selected;
+    private _alternative;
+    private _disabled;
+    private _iconState;
+    private _vertical;
+    private _expanded;
+    private _ignoreUserExpansion;
+    private _initialized;
+    private _expandedContentFocused;
+    private _clickListener;
+    private _expansionContentFocusInListener;
+    private _expansionContentFocusOutListener;
+    private _expansionContentSlotChangeListener;
+    constructor(_adapter: IStepAdapter);
+    initialize(): void;
+    disconnect(): void;
+    get index(): number;
+    set index(value: number);
+    get editable(): boolean;
+    set editable(value: boolean);
+    get completed(): boolean;
+    set completed(value: boolean);
+    get error(): boolean;
+    set error(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get alternative(): boolean;
+    set alternative(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    get ignoreUserExpansion(): boolean;
+    set ignoreUserExpansion(value: boolean);
+    setStepTabIndex(index: number): void;
+    private _applyExpanded;
+    private _applyVertical;
+    focus(): void;
+    private _applyAlternative;
+    private _applySelected;
+    private _applyIndex;
+    private _applyEditable;
+    private _applyCompleted;
+    private _applyError;
+    private _applyDisabled;
+    private _getIconState;
+    private _toggleIcon;
+    private _toggleExpanded;
+    private _onClickListener;
+    private _onExpansionContentSlotChange;
+    private _onExpansionContentFocusIn;
+    private _onExpansionContentFocusOut;
+}