@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/chips/chip/chip-adapter.d.ts

@@ -4,63 +4,58 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { ForgeRipple, ForgeRippleCapableSurface } from '../../ripple';
+import { IIconButtonComponent } from '../../icon-button';
 import { IChipComponent } from './chip';
 import { IChipState } from './chip-constants';
 export interface IChipAdapter extends IBaseAdapter {
-    addRootListener(type: string, listener: (evt: Event) => void): void;
-    removeRootListener(type: string, listener: (evt: Event) => void): void;
-    addButtonListener(type: string, listener: (evt: Event) => void): void;
-    removeButtonListener(type: string, listener: (evt: Event) => void): void;
-    initializeRipple(): ForgeRipple;
-    clearTypeClass(): void;
-    addRootClass(className: string): void;
-    removeRootClass(name: string): void;
-    setCheckmarkVisibility(isVisible: boolean): void;
-    setSelected(value: boolean): void;
-    setDisabled(value: boolean): void;
-    setDense(value: boolean): void;
-    setDeleteButtonVisibility(isVisible: boolean, listener: (evt: KeyboardEvent) => void): void;
-    setLeadingSlotVisibility(isVisible: boolean): void;
+    readonly removeButtonElement: IIconButtonComponent | undefined;
+    readonly isAnchor: boolean;
+    clickTrigger(): void;
+    addRootListener(type: string, listener: EventListener): void;
+    removeRootListener(type: string, listener: EventListener): void;
+    setAnchor(value: boolean): void;
+    setAnchorProperty<T extends keyof HTMLAnchorElement>(name: T, value: HTMLAnchorElement[T]): void;
+    setCheckmarkVisibility(value: boolean): void;
+    setDeleteButtonVisibility(value: boolean): void;
+    setStartSlotVisibility(value: boolean): void;
+    toggleFieldVariant(value: boolean): void;
     getChipSetState(): IChipState | null;
-    setFocus(): void;
-    tryFocusDelete(): void;
-    setEmulatedFocus(value: boolean): void;
-    tryMoveFocusPrevious(): void;
-    tryMoveFocusNext(): void;
+    setDisabled(value: boolean): void;
+    setSelected(value: boolean): void;
+    focusTrigger(options?: FocusOptions): void;
+    tryFocusRemoveButton(): void;
+    clickRemoveButton(): void;
+    animateStateLayer(): void;
 }
-export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements IChipAdapter, ForgeRippleCapableSurface {
+export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements IChipAdapter {
+    protected _component: IChipComponent;
     private _rootElement;
-    private _rippleInstance;
-    private _buttonElement;
-    private _deleteButton;
-    private _deleteButtonTouchTarget;
-    private _leadingSlotElement;
+    private _triggerElement;
+    private _removeButtonElement;
+    private _startSlotElement;
     private _checkmarkElement;
-    constructor(component: IChipComponent);
-    get root(): Element;
-    get unbounded(): boolean | undefined;
-    get disabled(): boolean | undefined;
-    addRootListener(type: string, listener: (evt: Event) => void): void;
-    removeRootListener(type: string, listener: (evt: Event) => void): void;
-    addButtonListener(type: string, listener: (evt: Event) => void): void;
-    removeButtonListener(type: string, listener: (evt: Event) => void): void;
-    initializeRipple(): ForgeRipple;
-    clearTypeClass(): void;
-    addRootClass(className: string): void;
-    removeRootClass(name: string): void;
-    setCheckmarkVisibility(isVisible: boolean): void;
-    setSelected(value: boolean): void;
+    private _focusIndicatorElement;
+    private _stateLayerElement;
+    constructor(_component: IChipComponent);
+    get removeButtonElement(): IIconButtonComponent | undefined;
+    get isAnchor(): boolean;
+    clickTrigger(): void;
+    addRootListener(type: string, listener: EventListener): void;
+    removeRootListener(type: string, listener: EventListener): void;
+    setAnchor(value: boolean): void;
+    setAnchorProperty<T extends keyof HTMLAnchorElement>(name: T, value: HTMLAnchorElement[T]): void;
+    setCheckmarkVisibility(value: boolean): void;
     setDisabled(value: boolean): void;
-    setDense(value: boolean): void;
-    setDeleteButtonVisibility(isVisible: boolean, listener: (evt: KeyboardEvent) => void): void;
-    setLeadingSlotVisibility(isVisible: boolean): void;
+    setSelected(value: boolean): void;
+    toggleFieldVariant(value: boolean): void;
+    setDeleteButtonVisibility(value: boolean): void;
+    setStartSlotVisibility(value: boolean): void;
     getChipSetState(): IChipState | null;
-    private _createDeleteButton;
-    private _createDeleteButtonTouchTarget;
-    setFocus(): void;
-    tryFocusDelete(): void;
-    setEmulatedFocus(value: boolean): void;
-    tryMoveFocusNext(): void;
-    tryMoveFocusPrevious(): void;
+    focusTrigger(options?: FocusOptions): void;
+    tryFocusRemoveButton(): void;
+    clickRemoveButton(): void;
+    animateStateLayer(): void;
+    private _createRemoveButton;
+    private _createAnchorElement;
+    private _createButtonElement;
 }

package/esm/chips/chip/chip-adapter.js

@@ -3,36 +3,32 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, elementFromHTML, getActiveElement, getShadowElement, removeClass, removeElement, toggleClass, walkUpUntil } from '@tylertech/forge-core';
+import { elementFromHTML, getShadowElement, toggleAttribute, walkUpUntil } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { ICON_CONSTANTS } from '../../icon';
-import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
+import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { CHIP_SET_CONSTANTS } from '../chip-set/chip-set-constants';
-const checkmarkTemplate = '<div class=\"forge-chip__checkmark\" aria-hidden=\"true\"><svg class=\"forge-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\"><path class=\"forge-chip__checkmark-path\" fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/></svg></div>';
 import { CHIP_CONSTANTS } from './chip-constants';
+const checkmarkTemplate = '<div class=\"checkmark\" aria-hidden=\"true\"><svg viewBox=\"-2 -3 30 30\"><path fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/></svg></div>';
+import { replaceElement } from '../../core/utils/utils';
 export class ChipAdapter extends BaseAdapter {
-    constructor(component) {
-        super(component);
+    constructor(_component) {
+        super(_component);
+        this._component = _component;
         this._rootElement = getShadowElement(this._component, CHIP_CONSTANTS.selectors.ROOT);
-        this._buttonElement = getShadowElement(this._component, CHIP_CONSTANTS.selectors.BUTTON);
-        this._leadingSlotElement = getShadowElement(this._component, 'slot[name=leading]');
-        this._rootElement.addEventListener('click', evt => {
-            if (evt.target === this._deleteButton) {
-                return;
-            }
-            this._buttonElement.focus();
-        }, { capture: true });
+        this._triggerElement = getShadowElement(this._component, CHIP_CONSTANTS.selectors.TRIGGER);
+        this._startSlotElement = getShadowElement(this._component, 'slot[name=start]');
+        this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
     }
-    // ForgeRippleCapableSurface
-    get root() {
-        return this._rootElement;
+    get removeButtonElement() {
+        return this._removeButtonElement;
     }
-    get unbounded() {
-        return false;
+    get isAnchor() {
+        return this._triggerElement.localName === 'a';
     }
-    get disabled() {
-        var _a;
-        return (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.disabled;
+    clickTrigger() {
+        this._triggerElement.click();
     }
     addRootListener(type, listener) {
         this._rootElement.addEventListener(type, listener);
@@ -40,84 +36,101 @@ export class ChipAdapter extends BaseAdapter {
     removeRootListener(type, listener) {
         this._rootElement.removeEventListener(type, listener);
     }
-    addButtonListener(type, listener) {
-        this._buttonElement.addEventListener(type, listener);
-    }
-    removeButtonListener(type, listener) {
-        this._buttonElement.removeEventListener(type, listener);
-    }
-    initializeRipple() {
-        const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { registerInteractionHandler: (evtType, handler) => {
-                if (['focus', 'blur', 'keydown'].includes(evtType)) {
-                    this._buttonElement.addEventListener(evtType, handler, { passive: true });
-                }
-                else {
-                    this._rootElement.addEventListener(evtType, handler, { passive: true });
-                }
-            }, deregisterInteractionHandler: (evtType, handler) => {
-                if (['focus', 'blur', 'keydown'].includes(evtType)) {
-                    this._buttonElement.removeEventListener(evtType, handler, { passive: true });
-                }
-                else {
-                    this._rootElement.removeEventListener(evtType, handler, { passive: true });
-                }
-            }, isSurfaceActive: () => this._buttonElement.matches(':active'), isUnbounded: () => Boolean(this.unbounded), isSurfaceDisabled: () => this._buttonElement.disabled, addClass: className => addClass(className, this._rootElement), removeClass: className => removeClass(className, this._rootElement), updateCssVariable: (varName, value) => this._rootElement.style.setProperty(varName, value) });
-        this._rippleInstance = new ForgeRipple(this._rootElement, new ForgeRippleFoundation(adapter));
-        return this._rippleInstance;
-    }
-    clearTypeClass() {
-        removeClass([CHIP_CONSTANTS.classes.ACTION, CHIP_CONSTANTS.classes.CHOICE, CHIP_CONSTANTS.classes.FILTER, CHIP_CONSTANTS.classes.INPUT], this._buttonElement);
-    }
-    addRootClass(className) {
-        this._rootElement.classList.add(className);
-    }
-    removeRootClass(name) {
-        this._rootElement.classList.remove(name);
-    }
-    setCheckmarkVisibility(isVisible) {
-        if (isVisible) {
+    setAnchor(value) {
+        if (value) {
+            if (this._triggerElement.localName === 'button') {
+                const anchor = this._createAnchorElement();
+                this._triggerElement = replaceElement(this._triggerElement, anchor);
+            }
+        }
+        else {
+            if (this._triggerElement.localName === 'a') {
+                const button = this._createButtonElement();
+                this._triggerElement = replaceElement(this._triggerElement, button);
+            }
+        }
+        if (this._stateLayerElement.targetElement !== this._triggerElement) {
+            this._stateLayerElement.targetElement = this._triggerElement;
+        }
+        if (this._focusIndicatorElement.targetElement !== this._triggerElement) {
+            this._focusIndicatorElement.targetElement = this._triggerElement;
+        }
+    }
+    setAnchorProperty(name, value) {
+        if (!(this._triggerElement.localName === 'a')) {
+            return;
+        }
+        if (this._triggerElement instanceof HTMLAnchorElement) {
+            this._triggerElement[name] = value;
+        }
+    }
+    setCheckmarkVisibility(value) {
+        if (value) {
             if (!this._checkmarkElement) {
                 this._checkmarkElement = elementFromHTML(checkmarkTemplate);
             }
             this._rootElement.insertBefore(this._checkmarkElement, this._rootElement.firstChild);
         }
         else if (this._checkmarkElement && this._checkmarkElement.isConnected) {
-            removeElement(this._checkmarkElement);
+            this._checkmarkElement.remove();
         }
     }
-    setSelected(value) {
-        toggleClass(this._rootElement, value, CHIP_CONSTANTS.classes.SELECTED);
-    }
     setDisabled(value) {
-        this._buttonElement.disabled = value;
-        this._buttonElement.tabIndex = value ? -1 : 0;
-        toggleClass(this._rootElement, value, CHIP_CONSTANTS.classes.DISABLED);
+        if (this._triggerElement instanceof HTMLAnchorElement) {
+            if (!this._focusIndicatorElement.isConnected) {
+                this._rootElement.append(this._focusIndicatorElement);
+            }
+            if (!this._stateLayerElement.isConnected) {
+                this._rootElement.append(this._stateLayerElement);
+            }
+            return;
+        }
+        if (this._removeButtonElement) {
+            this._removeButtonElement.disabled = value;
+        }
+        this._triggerElement.disabled = value;
+        this._triggerElement.tabIndex = value ? -1 : 0;
+        if (value) {
+            this._focusIndicatorElement.remove();
+            this._stateLayerElement.remove();
+        }
+        else {
+            this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
+        }
     }
-    setDense(value) {
-        toggleClass(this._rootElement, value, CHIP_CONSTANTS.classes.DENSE);
+    setSelected(value) {
+        if (this._triggerElement instanceof HTMLAnchorElement) {
+            return;
+        }
+        toggleAttribute(this._triggerElement, value, 'aria-pressed', String(value));
     }
-    setDeleteButtonVisibility(isVisible, listener) {
-        if (isVisible) {
-            if (!this._deleteButton) {
-                this._deleteButton = this._createDeleteButton(listener);
+    toggleFieldVariant(value) {
+        if (value) {
+            if (!this._stateLayerElement.isConnected) {
+                this._rootElement.append(this._stateLayerElement);
             }
-            if (!this._deleteButtonTouchTarget) {
-                this._deleteButtonTouchTarget = this._createDeleteButtonTouchTarget(listener);
+            if (this._focusIndicatorElement.targetElement !== this._triggerElement) {
+                this._focusIndicatorElement.targetElement = this._triggerElement;
             }
-            this._deleteButton.appendChild(this._deleteButtonTouchTarget);
-            this._rootElement.appendChild(this._deleteButton);
         }
         else {
-            if (this._deleteButtonTouchTarget) {
-                removeElement(this._deleteButtonTouchTarget);
-            }
-            if (this._deleteButton) {
-                removeElement(this._deleteButton);
+            this._stateLayerElement.remove();
+        }
+    }
+    setDeleteButtonVisibility(value) {
+        var _a;
+        if (value) {
+            if (!this._removeButtonElement) {
+                this._removeButtonElement = this._createRemoveButton();
             }
+            this._rootElement.appendChild(this._removeButtonElement);
+        }
+        else {
+            (_a = this._removeButtonElement) === null || _a === void 0 ? void 0 : _a.remove();
         }
     }
-    setLeadingSlotVisibility(isVisible) {
-        toggleClass(this._leadingSlotElement, !isVisible, CHIP_CONSTANTS.classes.LEADING_HIDDEN);
+    setStartSlotVisibility(value) {
+        this._startSlotElement.style.display = value ? '' : 'none';
     }
     getChipSetState() {
         let state = null;
@@ -131,60 +144,68 @@ export class ChipAdapter extends BaseAdapter {
         }
         return state;
     }
-    _createDeleteButton(listener) {
-        const el = document.createElement(ICON_CONSTANTS.elementName);
-        el.id = 'remove-button';
-        el.name = 'cancel';
-        el.tabIndex = -1;
-        el.setAttribute('aria-hidden', 'false');
-        el.setAttribute('aria-label', `Remove ${this._component.innerText}`);
-        el.setAttribute('role', 'button');
-        el.classList.add(CHIP_CONSTANTS.classes.DELETE_BUTTON);
-        el.addEventListener('keydown', listener);
-        return el;
-    }
-    _createDeleteButtonTouchTarget(listener) {
-        const el = document.createElement('div');
-        el.classList.add(CHIP_CONSTANTS.classes.DELETE_BUTTON_TOUCH_TARGET);
-        el.addEventListener('keydown', listener);
-        el.addEventListener('click', listener);
-        return el;
-    }
-    setFocus() {
-        this._buttonElement.focus();
-    }
-    tryFocusDelete() {
-        if (this._deleteButton) {
-            this._deleteButton.focus();
+    focusTrigger(options) {
+        this._triggerElement.focus(Object.assign({ preventScroll: true }, options));
+    }
+    tryFocusRemoveButton() {
+        if (this._removeButtonElement) {
+            this._removeButtonElement.focus({ preventScroll: true, focusVisible: true });
         }
         else {
-            this.setFocus();
+            this.focusTrigger();
         }
     }
-    setEmulatedFocus(value) {
-        this._buttonElement.classList.toggle('mdc-ripple-upgraded--background-focused', value);
-    }
-    tryMoveFocusNext() {
-        const activeElement = getActiveElement(this._component.ownerDocument);
-        if (activeElement === this._buttonElement) {
-            if (this._deleteButton) {
-                this._deleteButton.focus();
-            }
-            else {
-                this.emitHostEvent(CHIP_CONSTANTS.events.FOCUS_NEXT);
-            }
+    clickRemoveButton() {
+        var _a;
+        (_a = this._removeButtonElement) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    animateStateLayer() {
+        this._stateLayerElement.playAnimation();
+    }
+    _createRemoveButton() {
+        const buttonEl = document.createElement('forge-icon-button');
+        buttonEl.density = 'small';
+        buttonEl.id = 'remove-button';
+        buttonEl.classList.add('remove');
+        buttonEl.tabIndex = -1;
+        buttonEl.setAttribute('aria-label', `Remove ${this._component.innerText}`);
+        buttonEl.setAttribute('part', 'remove-button');
+        const iconEl = document.createElement('forge-icon');
+        iconEl.name = 'close';
+        buttonEl.appendChild(iconEl);
+        return buttonEl;
+    }
+    _createAnchorElement() {
+        const anchor = document.createElement('a');
+        anchor.id = 'trigger';
+        anchor.setAttribute('part', 'trigger');
+        anchor.classList.add('trigger');
+        if (this._component.href) {
+            anchor.href = this._component.href;
         }
-        else if (activeElement === this._deleteButton) {
-            this.emitHostEvent(CHIP_CONSTANTS.events.FOCUS_NEXT);
+        if (this._component.target) {
+            anchor.target = this._component.target;
         }
-    }
-    tryMoveFocusPrevious() {
-        const activeElement = getActiveElement(this._component.ownerDocument);
-        if (activeElement === this._deleteButton) {
-            this._buttonElement.focus();
+        if (this._component.download) {
+            anchor.download = this._component.download;
+        }
+        if (this._component.rel) {
+            anchor.rel = this._component.rel;
+        }
+        return anchor;
+    }
+    _createButtonElement() {
+        const buttonEl = document.createElement('button');
+        buttonEl.type = 'button';
+        buttonEl.id = 'trigger';
+        buttonEl.setAttribute('part', 'trigger');
+        buttonEl.classList.add('trigger');
+        if (this._component.disabled) {
+            buttonEl.disabled = true;
         }
-        else if (activeElement === this._buttonElement) {
-            this.emitHostEvent(CHIP_CONSTANTS.events.FOCUS_PREVIOUS);
+        if (this._component.selected) {
+            buttonEl.setAttribute('aria-pressed', 'true');
         }
+        return buttonEl;
     }
 }

package/esm/chips/chip/chip-constants.d.ts

@@ -3,46 +3,51 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../../constants';
 export declare const CHIP_CONSTANTS: {
     elementName: "forge-chip";
-    attributes: {
+    observedAttributes: {
         TYPE: string;
-        SELECTED: string;
         VALUE: string;
-        DISABLED: string;
+        SELECTED: string;
         INVALID: string;
+        DISABLED: string;
         DENSE: string;
-        EMULATE_FOCUS: string;
+        THEME: string;
+        HREF: string;
+        TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
     };
-    classes: {
-        ACTION: string;
-        CHOICE: string;
-        FILTER: string;
-        INPUT: string;
-        FIELD: string;
-        INVALID: string;
+    attributes: {
+        TYPE: string;
+        VALUE: string;
         SELECTED: string;
-        DELETE_BUTTON: string;
-        DELETE_BUTTON_TOUCH_TARGET: string;
-        DENSE: string;
+        INVALID: string;
         DISABLED: string;
-        LEADING_HIDDEN: string;
+        DENSE: string;
+        THEME: string;
+        HREF: string;
+        TARGET: string;
+        DOWNLOAD: string;
+        REL: string;
     };
     selectors: {
         ROOT: string;
-        BUTTON: string;
+        TRIGGER: string;
     };
     events: {
         DELETE: string;
         SELECT: string;
-        FOCUS_NEXT: string;
-        FOCUS_PREVIOUS: string;
+        NAVIGATE: string;
     };
     defaults: {
-        TYPE: string;
+        TYPE: ChipType;
+        THEME: Theme;
     };
 };
-export declare type ChipType = 'choice' | 'filter' | 'action' | 'input' | 'field';
+export type ChipTheme = Theme;
+export type ChipType = 'choice' | 'filter' | 'action' | 'input' | 'field';
 export interface IChipSelectEventData<T = any> {
     value: T;
     selected: boolean;
@@ -55,3 +60,6 @@ export interface IChipState {
     disabled: boolean;
     dense: boolean;
 }
+export interface IChipNavigateEventData {
+    direction: 'previous' | 'next';
+}

package/esm/chips/chip/chip-constants.js

@@ -5,46 +5,37 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}chip`;
-const attributes = {
+const observedAttributes = {
     TYPE: 'type',
-    SELECTED: 'selected',
     VALUE: 'value',
-    DISABLED: 'disabled',
+    SELECTED: 'selected',
     INVALID: 'invalid',
+    DISABLED: 'disabled',
     DENSE: 'dense',
-    EMULATE_FOCUS: 'emulate-focus'
-};
-const classes = {
-    ACTION: 'forge-chip--action',
-    CHOICE: 'forge-chip--choice',
-    FILTER: 'forge-chip--filter',
-    INPUT: 'forge-chip--input',
-    FIELD: 'forge-chip--field',
-    INVALID: 'forge-chip--invalid',
-    SELECTED: 'forge-chip--selected',
-    DELETE_BUTTON: 'forge-chip__delete-button',
-    DELETE_BUTTON_TOUCH_TARGET: 'forge-chip__delete-button__touch-target',
-    DENSE: 'forge-chip--dense',
-    DISABLED: 'forge-chip--disabled',
-    LEADING_HIDDEN: 'forge-chip__leading--hidden'
+    THEME: 'theme',
+    HREF: 'href',
+    TARGET: 'target',
+    DOWNLOAD: 'download',
+    REL: 'rel'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
     ROOT: '.forge-chip',
-    BUTTON: '[role=button]'
+    TRIGGER: '#trigger'
 };
 const events = {
     DELETE: `${elementName}-delete`,
     SELECT: `${elementName}-select`,
-    FOCUS_NEXT: `${elementName}-focus-next`,
-    FOCUS_PREVIOUS: `${elementName}-focus-previous`
+    NAVIGATE: `${elementName}-navigate`
 };
 const defaults = {
-    TYPE: 'action'
+    TYPE: 'action',
+    THEME: 'primary'
 };
 export const CHIP_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
-    classes,
     selectors,
     events,
     defaults