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

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

@@ -5,67 +5,75 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IChipAdapter } from './chip-adapter';
-import { ChipType } from './chip-constants';
+import { ChipTheme, ChipType } from './chip-constants';
 export interface IChipFoundation extends ICustomElementFoundation {
     type: ChipType;
+    value: unknown;
     selected: boolean;
-    disabled: boolean;
     invalid: boolean;
-    value: any;
+    disabled: boolean;
     dense: boolean;
-    emulateFocus: boolean;
-    setFocus(): void;
-    tryFocusDelete(): void;
+    theme: ChipTheme;
+    href: string;
+    target: string;
+    download: string;
+    rel: string;
+    focus(options?: FocusOptions): void;
+    focusRemoveButton(): void;
+    click(): void;
 }
 export declare class ChipFoundation implements IChipFoundation {
     private _adapter;
     private _type;
+    private _value;
     private _selected;
-    private _disabled;
     private _invalid;
-    private _value;
+    private _disabled;
     private _dense;
-    private _emulateFocus;
-    private _isInitialized;
-    private _rippleInstance;
+    private _theme;
+    private _href;
+    private _target;
+    private _download;
+    private _rel;
     private _clickListener;
     private _keydownListener;
-    private _deleteKeydownListener;
-    private _buttonFocusListener;
-    private _buttonBlurListener;
     constructor(_adapter: IChipAdapter);
     initialize(): void;
-    disconnect(): void;
-    private _destroyRipple;
-    private _applyState;
+    focus(options?: FocusOptions): void;
+    focusRemoveButton(): void;
+    click(): void;
+    private _attachListeners;
+    private _detachListeners;
+    private _tryInheritChipSetState;
     private _onClick;
     private _onKeydown;
-    private _onDeleteKeydown;
-    private _onButtonFocus;
-    private _onButtonBlur;
-    private _handleDeleteInteraction;
+    private _tryNavigate;
+    private _isRemoveButton;
     private _handleSelectInteraction;
-    private _emitSelectEvent;
-    private _emitDeleteEvent;
+    private _dispatchSelectEvent;
+    private _dispatchDeleteEvent;
     private _applyType;
     private _applySelected;
-    private _applyDisabled;
-    private _applyDense;
-    private _applyEmulateFocus;
     get type(): ChipType;
     set type(value: ChipType);
+    get value(): unknown;
+    set value(value: unknown);
     get selected(): boolean;
     set selected(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get invalid(): boolean;
-    set invalid(val: boolean);
-    get value(): any;
-    set value(value: any);
     get dense(): boolean;
     set dense(value: boolean);
-    get emulateFocus(): boolean;
-    set emulateFocus(value: boolean);
-    setFocus(): void;
-    tryFocusDelete(): void;
+    get theme(): ChipTheme;
+    set theme(value: ChipTheme);
+    get href(): string;
+    set href(value: string);
+    get target(): string;
+    set target(value: string);
+    get download(): string;
+    set download(value: string);
+    get rel(): string;
+    set rel(value: string);
 }

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

@@ -9,161 +9,150 @@ export class ChipFoundation {
         this._adapter = _adapter;
         this._type = CHIP_CONSTANTS.defaults.TYPE;
         this._selected = false;
-        this._disabled = false;
         this._invalid = false;
-        this._value = null;
+        this._disabled = false;
         this._dense = false;
-        this._emulateFocus = false;
-        this._isInitialized = false;
-        this._clickListener = evt => this._onClick(evt);
-        this._keydownListener = evt => this._onKeydown(evt);
-        this._deleteKeydownListener = evt => this._onDeleteKeydown(evt);
-        this._buttonFocusListener = evt => this._onButtonFocus(evt);
-        this._buttonBlurListener = evt => this._onButtonBlur(evt);
+        this._theme = CHIP_CONSTANTS.defaults.THEME;
+        this._clickListener = this._onClick.bind(this);
+        this._keydownListener = this._onKeydown.bind(this);
     }
     initialize() {
-        this._rippleInstance = this._adapter.initializeRipple();
+        this._attachListeners();
+        this._tryInheritChipSetState();
+    }
+    focus(options) {
+        this._adapter.focusTrigger(options);
+    }
+    focusRemoveButton() {
+        var _a;
+        (_a = this._adapter.removeButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    click() {
+        this._adapter.clickTrigger();
+    }
+    _attachListeners() {
         this._adapter.addRootListener('click', this._clickListener);
         this._adapter.addRootListener('keydown', this._keydownListener);
-        this._adapter.addButtonListener('focus', this._buttonFocusListener);
-        this._adapter.addButtonListener('blur', this._buttonBlurListener);
-        this._applyState();
-        this._isInitialized = true;
     }
-    disconnect() {
-        this._destroyRipple();
+    _detachListeners() {
         this._adapter.removeRootListener('click', this._clickListener);
         this._adapter.removeRootListener('keydown', this._keydownListener);
-        this._adapter.removeButtonListener('focus', this._buttonFocusListener);
-        this._adapter.removeButtonListener('blur', this._buttonBlurListener);
-        this._isInitialized = false;
-    }
-    _destroyRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-            this._rippleInstance = undefined;
-        }
     }
-    _applyState() {
+    _tryInheritChipSetState() {
         // Attempt to inherit state from the parent chip-set component
         // Note: this should only inherit properties that need to be the same across the chips within a set
         const chipSetState = this._adapter.getChipSetState();
         if (chipSetState) {
-            this._type = chipSetState.type;
-            this._disabled = chipSetState.disabled;
-            this._dense = chipSetState.dense;
-        }
-        // Ensure that only non-action chips can be selected
-        if (this._type === 'action') {
-            this._selected = false;
+            if (chipSetState.type !== undefined) {
+                this.type = chipSetState.type;
+            }
+            if (chipSetState.disabled !== undefined) {
+                this.disabled = chipSetState.disabled;
+            }
+            if (chipSetState.dense !== undefined) {
+                this.dense = chipSetState.dense;
+            }
         }
-        this._applyDisabled();
-        this._applyType();
-        this._applySelected();
-        this._applyDense();
-        this._applyEmulateFocus();
     }
     _onClick(evt) {
-        const target = evt.target;
-        const isDeleteButton = target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON) ||
-            target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON_TOUCH_TARGET);
-        if (isDeleteButton) {
-            this._handleDeleteInteraction(evt);
+        if (this._isRemoveButton(evt)) {
+            evt.stopImmediatePropagation();
+            this._dispatchDeleteEvent();
         }
         else {
             this._handleSelectInteraction();
         }
     }
     _onKeydown(evt) {
-        var _a;
         switch (evt.key) {
             case 'Delete':
             case 'Backspace':
                 if (this._type === 'input') {
                     evt.preventDefault();
-                    this._emitDeleteEvent();
+                    this._dispatchDeleteEvent();
                 }
                 break;
             case 'Enter':
             case ' ':
                 evt.preventDefault();
-                (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.animate();
-                this._handleSelectInteraction();
+                if (this._isRemoveButton(evt)) {
+                    evt.stopImmediatePropagation();
+                    if (evt.key === 'Enter') {
+                        this._adapter.clickRemoveButton();
+                    }
+                }
+                else {
+                    this.click();
+                    if (this._adapter.isAnchor) {
+                        this._adapter.animateStateLayer();
+                    }
+                }
                 break;
             case 'ArrowLeft':
-                evt.preventDefault();
-                this._adapter.tryMoveFocusPrevious();
-                break;
             case 'ArrowRight':
-                evt.preventDefault();
-                this._adapter.tryMoveFocusNext();
+                this._tryNavigate(evt);
+                break;
+            case 'Tab':
+                if (this._type === 'input' && this._isRemoveButton(evt)) {
+                    this._tryNavigate(evt);
+                }
                 break;
         }
     }
-    _onDeleteKeydown(evt) {
-        if (evt.key === 'Enter') {
-            this._handleDeleteInteraction(evt);
+    _tryNavigate(evt) {
+        var _a;
+        if (this._type === 'input') {
+            const isRemoveButtonFocused = !!((_a = this._adapter.removeButtonElement) === null || _a === void 0 ? void 0 : _a.matches(':focus'));
+            if (isRemoveButtonFocused) {
+                evt.stopPropagation();
+                evt.preventDefault();
+                if (evt.key === 'ArrowLeft') {
+                    this._adapter.focusTrigger();
+                    return;
+                }
+            }
+            else if (evt.key === 'ArrowRight') {
+                this._adapter.tryFocusRemoveButton();
+                return;
+            }
         }
+        const detail = { direction: evt.key === 'ArrowRight' || evt.key === 'Tab' ? 'next' : 'previous' };
+        this._adapter.dispatchHostEvent(new CustomEvent(CHIP_CONSTANTS.events.NAVIGATE, { bubbles: true, detail }));
     }
-    _onButtonFocus(evt) {
-        this._adapter.setHostAttribute('focused');
-    }
-    _onButtonBlur(evt) {
-        this._adapter.removeHostAttribute('focused');
-    }
-    _handleDeleteInteraction(evt) {
-        // The delete event can only be fired when the `input` or `field` type is used
-        const target = evt.target;
-        const isDeleteButton = target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON) ||
-            target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON_TOUCH_TARGET);
-        if (isDeleteButton) {
-            evt.stopPropagation();
-            this._emitDeleteEvent();
-        }
+    _isRemoveButton(evt) {
+        return !!this._adapter.removeButtonElement && evt.composedPath().includes(this._adapter.removeButtonElement);
     }
     _handleSelectInteraction() {
-        const wasDefaultPrevented = this._emitSelectEvent();
+        const originalSelected = this._selected;
+        this._selected = !this._selected;
+        const wasDefaultPrevented = this._dispatchSelectEvent();
+        this._selected = originalSelected;
         const isSelectableType = ['filter', 'choice', 'input'].includes(this._type);
-        // We only toggle the selected state for certain types (and if default wasn't prevented on the event)
         if (!wasDefaultPrevented && isSelectableType) {
             this._selected = !this._selected;
             this._applySelected();
         }
     }
-    _emitSelectEvent() {
-        const selectEventData = {
-            selected: !this._selected,
+    _dispatchSelectEvent() {
+        const detail = {
+            selected: this._selected,
             value: this._value
         };
-        return !this._adapter.emitHostEvent(CHIP_CONSTANTS.events.SELECT, selectEventData, true, true);
+        const event = new CustomEvent(CHIP_CONSTANTS.events.SELECT, { detail, bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(event);
+        return event.defaultPrevented;
     }
-    _emitDeleteEvent() {
-        const deleteEventData = { value: this._value };
-        this._adapter.emitHostEvent(CHIP_CONSTANTS.events.DELETE, deleteEventData, true, true);
+    _dispatchDeleteEvent() {
+        const detail = { value: this._value };
+        this._adapter.dispatchHostEvent(new CustomEvent(CHIP_CONSTANTS.events.DELETE, { detail, bubbles: true }));
     }
     _applyType() {
-        this._adapter.clearTypeClass();
-        switch (this._type) {
-            case 'action':
-                this._adapter.addRootClass(CHIP_CONSTANTS.classes.ACTION);
-                break;
-            case 'choice':
-                this._adapter.addRootClass(CHIP_CONSTANTS.classes.CHOICE);
-                break;
-            case 'filter':
-                this._adapter.addRootClass(CHIP_CONSTANTS.classes.FILTER);
-                break;
-            case 'input':
-                this._adapter.addRootClass(CHIP_CONSTANTS.classes.INPUT);
-                break;
-            case 'field':
-                this._adapter.addRootClass(CHIP_CONSTANTS.classes.FIELD);
-                break;
-        }
-        this._adapter.setCheckmarkVisibility(this._type === 'filter');
         const showDeleteButton = this._type === 'input' || this._type === 'field';
-        this._adapter.setDeleteButtonVisibility(showDeleteButton, this._deleteKeydownListener);
-        this._adapter.setLeadingSlotVisibility(!this._selected);
+        this._adapter.setDeleteButtonVisibility(showDeleteButton);
+        this._adapter.setCheckmarkVisibility(this._type === 'filter');
+        this._adapter.setStartSlotVisibility(!this._selected);
+        this._adapter.toggleFieldVariant(this._type !== 'field');
+        this._applySelected();
         this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.TYPE, this._type);
     }
     _applySelected() {
@@ -171,119 +160,136 @@ export class ChipFoundation {
         // If using the filter type, we need to hide the leading slot to ensure that
         // the checkmark shows in place of any leading elements
         if (this._type === 'filter') {
-            this._adapter.setLeadingSlotVisibility(!this._selected);
+            this._adapter.setStartSlotVisibility(!this._selected);
         }
         this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.SELECTED, this._selected);
     }
-    _applyDisabled() {
-        this._adapter.setDisabled(this._disabled);
-        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DISABLED, this._disabled);
-    }
-    _applyDense() {
-        this._adapter.setDense(this._dense);
-        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DISABLED, this._disabled);
-    }
-    _applyEmulateFocus() {
-        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.EMULATE_FOCUS, this._emulateFocus);
-        this._adapter.setEmulatedFocus(this._emulateFocus);
-    }
     get type() {
         return this._type;
     }
     set type(value) {
         if (this._type !== value) {
             this._type = value;
-            if (this._isInitialized) {
-                const isValidType = ['action', 'choice', 'filter', 'input', 'field'].includes(this._type);
-                if (!isValidType) {
-                    this._type = 'action';
-                }
-                if (this._type === 'action') {
-                    this._selected = false;
-                    this._applySelected();
-                }
-                this._applyType();
+            const isValidType = ['action', 'choice', 'filter', 'input', 'field'].includes(this._type);
+            if (!isValidType) {
+                this._type = 'action';
             }
+            this._applyType();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.VALUE, String(this._value));
         }
     }
     get selected() {
         return this._selected;
     }
     set selected(value) {
+        value = Boolean(value);
         if (this._selected !== value) {
             this._selected = value;
-            if (this._isInitialized) {
-                if (this._type === 'action') {
-                    this._selected = false;
-                }
-                this._applySelected();
-            }
+            this._applySelected();
+        }
+    }
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(value) {
+        value = Boolean(value);
+        if (this._invalid !== value) {
+            this._invalid = value;
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.INVALID, value);
         }
     }
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
+        value = Boolean(value);
         if (this._disabled !== value) {
             this._disabled = value;
-            if (this._isInitialized) {
-                this._applyDisabled();
+            this._adapter.setDisabled(this._disabled);
+            if (this._adapter.isConnected) {
+                if (this._disabled) {
+                    this._detachListeners();
+                }
+                else {
+                    this._attachListeners();
+                }
             }
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
-    get invalid() {
-        return this._invalid;
-    }
-    set invalid(val) {
-        if (this._invalid === val) {
-            return;
-        }
-        this._invalid = val;
-        if (val) {
-            this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.INVALID, '');
-            this._adapter.addRootClass(CHIP_CONSTANTS.classes.INVALID);
-        }
-        else {
-            this._adapter.removeHostAttribute(CHIP_CONSTANTS.attributes.INVALID);
-            this._adapter.removeRootClass(CHIP_CONSTANTS.classes.INVALID);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this._value = value;
-    }
     get dense() {
         return this._dense;
     }
     set dense(value) {
+        value = Boolean(value);
         if (this._dense !== value) {
             this._dense = value;
-            if (this._isInitialized) {
-                this._applyDense();
-            }
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : CHIP_CONSTANTS.defaults.THEME;
+            this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.THEME, this._theme);
         }
     }
-    get emulateFocus() {
-        return this._emulateFocus;
+    get href() {
+        return this._href;
     }
-    set emulateFocus(value) {
-        if (this._emulateFocus !== value) {
-            this._emulateFocus = value;
-            if (this._isInitialized) {
-                this._applyEmulateFocus();
+    set href(value) {
+        var _a;
+        if (this._href !== value) {
+            this._href = value;
+            const hasHref = !!((_a = this._href) === null || _a === void 0 ? void 0 : _a.trim());
+            this._adapter.setAnchor(hasHref);
+            if (hasHref && this._disabled) {
+                this._adapter.setDisabled(false);
             }
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.HREF, hasHref, this._href);
         }
     }
-    setFocus() {
-        this._adapter.setFocus();
+    get target() {
+        return this._target;
     }
-    tryFocusDelete() {
-        if (this._type === 'input') {
-            this._adapter.tryFocusDelete();
-            return;
+    set target(value) {
+        var _a;
+        if (this._target !== value) {
+            this._target = value;
+            this._adapter.setAnchorProperty('target', value);
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.TARGET, !!((_a = this._target) === null || _a === void 0 ? void 0 : _a.trim()), this._target);
+        }
+    }
+    get download() {
+        return this._download;
+    }
+    set download(value) {
+        var _a;
+        if (this._download !== value) {
+            this._download = value;
+            this._adapter.setAnchorProperty('download', value);
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DOWNLOAD, !!((_a = this._download) === null || _a === void 0 ? void 0 : _a.trim()), this._download);
+        }
+    }
+    get rel() {
+        return this._rel;
+    }
+    set rel(value) {
+        var _a;
+        if (this._rel !== value) {
+            this._rel = value;
+            this._adapter.setAnchorProperty('rel', value);
+            this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.REL, !!((_a = this._rel) === null || _a === void 0 ? void 0 : _a.trim()), this._rel);
         }
-        this.setFocus();
     }
 }