@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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

@@ -3,54 +3,154 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement } from '@tylertech/forge-core';
+import { getShadowElement, listenOwnProperty, randomChars, toggleAttribute } from '@tylertech/forge-core';
 import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
-import { FieldAdapter } from '../field/field-adapter';
-export class ChipFieldAdapter extends FieldAdapter {
+import { BaseFieldAdapter } from '../field/base/base-field-adapter';
+import { FIELD_CONSTANTS } from '../field/field-constants';
+import { LABEL_CONSTANTS } from '../label';
+export class ChipFieldAdapter extends BaseFieldAdapter {
+    get hasValue() {
+        const hasMembers = !!this._component.querySelector(CHIP_FIELD_CONSTANTS.selectors.MEMBER);
+        return hasMembers || this.hasInputValue;
+    }
+    get hasPlaceholder() {
+        var _a;
+        return !!((_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.placeholder);
+    }
+    get hasInputValue() {
+        var _a;
+        return !!((_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.value);
+    }
+    get inputHasFocus() {
+        var _a;
+        return !!((_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.matches(':focus'));
+    }
+    get popoverTargetElement() {
+        if (!this._popoverTargetElement) {
+            this._popoverTargetElement = getShadowElement(this._fieldElement, FIELD_CONSTANTS.selectors.POPOVER_TARGET);
+        }
+        return this._popoverTargetElement;
+    }
     constructor(component) {
         super(component);
+        this._fieldElement = getShadowElement(component, FIELD_CONSTANTS.elementName);
+        this._containerElement = getShadowElement(component, CHIP_FIELD_CONSTANTS.selectors.CONTAINER);
+        this._memberSlot = getShadowElement(component, CHIP_FIELD_CONSTANTS.selectors.MEMBER_SLOT);
+        this._fieldElement.setAttribute('exportparts', Object.values(FIELD_CONSTANTS.parts).join(', '));
     }
     initialize() {
-        super.initialize(CHIP_FIELD_CONSTANTS.selectors.ROOT);
-        this._memberSlot = getShadowElement(this._component, CHIP_FIELD_CONSTANTS.selectors.MEMBER_SLOT);
-        this._inputContainerElement = getShadowElement(this._component, CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER);
+        this._inputElement = this._component.querySelector('input:not([type=checkbox]):not([type=radio])');
     }
-    addRootListener(type, callback) {
-        this._rootElement.addEventListener(type, callback);
+    addRootListener(type, listener, options) {
+        this._fieldElement.addEventListener(type, listener, options);
     }
-    removeRootListener(type, callback) {
-        this._rootElement.removeEventListener(type, callback);
+    removeRootListener(type, listener, options) {
+        this._fieldElement.removeEventListener(type, listener, options);
     }
-    addMemberSlotListener(listener) {
-        this._memberSlot.addEventListener('slotchange', listener);
+    addInputListener(type, listener) {
+        var _a;
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
     }
-    removeMemberSlotListener(listener) {
-        if (this._memberSlot) {
-            this._memberSlot.removeEventListener('slotchange', listener);
-        }
+    removeInputListener(type, listener) {
+        var _a;
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
     }
-    addInputContainerListener(type, callback) {
-        this._inputContainerElement.addEventListener(type, callback);
+    clickInput() {
+        var _a;
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.click();
     }
-    removeInputContainerListener(type, callback) {
-        this._inputContainerElement.removeEventListener(type, callback);
+    tryAddValueChangeListener(context, listener) {
+        var _a;
+        (_a = this._destroyValueChangerListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        if (this._inputElement) {
+            this._destroyValueChangerListener = listenOwnProperty(context, this._inputElement, 'value', listener);
+        }
     }
-    fieldHasValue() {
-        const aMemberExists = !!this._component.querySelector(CHIP_FIELD_CONSTANTS.selectors.MEMBER);
-        return aMemberExists || super.inputHasValue();
+    removeValueChangeListener() {
+        var _a;
+        (_a = this._destroyValueChangerListener) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     focusInput() {
         var _a;
         (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    tryPropagateClick(target) {
-        var _a;
-        // We only propagate the click to the input if it originated from our internal input container
-        if (!this._inputElement.disabled && target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
-            (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click'));
+    getSlottedMemberElements() {
+        return this._memberSlot.assignedElements();
+    }
+    click() {
+        this.focusInput();
+    }
+    applyLabel(value) {
+        /* c8 ignore next 3 */
+        if (!this._inputElement) {
+            return;
         }
+        toggleAttribute(this._inputElement, !!value, 'aria-label', value !== null && value !== void 0 ? value : '');
     }
-    getSlottedMemberElements() {
-        return this._component.querySelectorAll(CHIP_FIELD_CONSTANTS.selectors.MEMBER);
+    tryFloatLabel(force) {
+        if (force !== undefined) {
+            this._component.floatLabel = force;
+            return;
+        }
+        this._component.floatLabel = this.hasValue || this.hasPlaceholder;
+    }
+    handleDefaultSlotChange(slot, listener) {
+        var _a, _b;
+        (_a = this._inputMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const assignedElements = slot.assignedElements();
+        this._inputElement = assignedElements.find(el => el.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT));
+        if (this._inputElement) {
+            if (this._component.disabled) {
+                this._inputElement.disabled = true;
+            }
+            this._inputMutationObserver = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    if (mutation.attributeName) {
+                        const element = mutation.target;
+                        const attribute = element.getAttribute(mutation.attributeName);
+                        const attributeName = mutation.attributeName;
+                        listener(attributeName, attribute);
+                    }
+                });
+            });
+            (_b = this._inputMutationObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElement, { attributes: true, attributeFilter: CHIP_FIELD_CONSTANTS.observedInputAttributes });
+            // Call the listener with each observed attribute to capture the initial state
+            Object.values(CHIP_FIELD_CONSTANTS.observedInputAttributes).forEach(value => {
+                const attributeName = value;
+                if (this._inputElement) {
+                    listener(attributeName, this._inputElement.getAttribute(attributeName));
+                }
+            });
+        }
+    }
+    tryConnectSlottedLabel(slot) {
+        /* c8 ignore next 3 */
+        if (!this._inputElement) {
+            return;
+        }
+        const elements = slot.assignedElements({ flatten: true });
+        // Attempt to find and connect a `<forge-label>` element
+        const forgeLabel = elements.find(el => el.matches(LABEL_CONSTANTS.elementName));
+        if (forgeLabel) {
+            forgeLabel.forElement = this._component;
+            forgeLabel.clickTarget = this._inputElement;
+            return;
+        }
+        // Attempt to find and connect a `<label>` element
+        const label = elements.find(el => el.tagName === CHIP_FIELD_CONSTANTS.tagNames.LABEL);
+        if (!label || label.control) {
+            return;
+        }
+        const id = this._inputElement.id || `forge-input-${randomChars()}`;
+        this._inputElement.id = id;
+        label.htmlFor = id;
+    }
+    toggleContainerClass(className, force) {
+        this._containerElement.classList.toggle(className, force);
+    }
+    setDisabled(value) {
+        if (this._inputElement) {
+            this._inputElement.disabled = value;
+        }
     }
 }

package/esm/chip-field/chip-field-component-delegate.js

@@ -95,7 +95,7 @@ export class ChipFieldComponentDelegate extends FormFieldComponentDelegate {
         }
     }
     floatLabel(value) {
-        this._element.floatLabel(value);
+        this._element.floatLabel = value;
     }
     _createLabel(text) {
         var _a;

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

@@ -3,32 +3,34 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+declare const observedInputAttributes: string[];
 export declare const CHIP_FIELD_CONSTANTS: {
-    attributes: {
-        ADD_ON_BLUR: string;
-    };
     elementName: "forge-chip-field";
-    classes: {
-        ROOT: string;
+    observedAttributes: {
+        ADD_ON_BLUR: string;
     };
-    slots: {
-        LABEL: string;
-        HELPER_TEXT: string;
-        MEMBER: string;
+    attributes: {
+        ADD_ON_BLUR: string;
     };
     selectors: {
-        ROOT: string;
-        INPUT_CONTAINER: string;
+        CONTAINER: string;
         INPUT: string;
-        LABEL: string;
-        HELPER_TEXT: string;
-        MEMBER: string;
-        LABEL_SLOT: string;
         MEMBER_SLOT: string;
+        MEMBER: string;
+    };
+    classes: {
+        HAS_MEMBERS: string;
     };
     events: {
         MEMBER_ADDED: string;
         MEMBER_REMOVED: string;
     };
+    observedInputAttributes: string[];
+    tagNames: {
+        TEXTAREA: string;
+        LABEL: string;
+    };
 };
-export { type FieldDensityType as ChipFieldDensityType, type FieldFloatLabelType as ChipFieldFloatLabelType, type FieldShapeType as ChipFieldShapeType } from '../field/field-constants';
+export { type FieldDensity as ChipFieldDensityType, type FieldShape as ChipFieldShapeType } from '../field/base/base-field-constants';
+export type ChipFieldInputAttributeObserver = (name: keyof typeof observedInputAttributes, value: string | null) => void;
+export type ChipFieldValueChangeListener = (value: string | null) => void;

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

@@ -5,36 +5,35 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}chip-field`;
-const classes = {
-    ROOT: 'forge-chip-field'
-};
-const slots = {
-    LABEL: 'label',
-    HELPER_TEXT: 'helper-text',
-    MEMBER: 'member'
+const observedAttributes = {
+    ADD_ON_BLUR: 'add-on-blur'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
-    ROOT: `.${classes.ROOT}`,
-    INPUT_CONTAINER: '.forge-field__input-container',
+    CONTAINER: '.container',
     INPUT: 'input',
-    LABEL: `[slot=${slots.LABEL}]`,
-    HELPER_TEXT: `[slot=${slots.HELPER_TEXT}]`,
-    MEMBER: `[slot=${slots.MEMBER}]`,
-    LABEL_SLOT: `slot[name=${slots.LABEL}]`,
-    MEMBER_SLOT: `slot[name=${slots.MEMBER}]`
+    MEMBER_SLOT: 'slot[name=member]',
+    MEMBER: '[slot=member]'
+};
+const classes = {
+    HAS_MEMBERS: 'has-members'
 };
 const events = {
     MEMBER_ADDED: `${elementName}-member-added`,
     MEMBER_REMOVED: `${elementName}-member-removed`
 };
-const attributes = {
-    ADD_ON_BLUR: 'add-on-blur'
+const observedInputAttributes = ['disabled', 'placeholder'];
+const tagNames = {
+    TEXTAREA: 'TEXTAREA',
+    LABEL: 'LABEL'
 };
 export const CHIP_FIELD_CONSTANTS = {
-    attributes,
     elementName,
-    classes,
-    slots,
+    observedAttributes,
+    attributes,
     selectors,
-    events
+    classes,
+    events,
+    observedInputAttributes,
+    tagNames
 };

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

@@ -4,32 +4,42 @@
  * License: Apache-2.0
  */
 import { IChipFieldAdapter } from './chip-field-adapter';
-import { IFieldFoundation, FieldFoundation } from '../field/field-foundation';
-export interface IChipFieldFoundation extends IFieldFoundation {
+import { BaseFieldFoundation, IBaseFieldFoundation } from '../field/base/base-field-foundation';
+export interface IChipFieldFoundation extends IBaseFieldFoundation {
     addOnBlur: boolean;
+    readonly popoverTargetElement: HTMLElement;
 }
-export declare class ChipFieldFoundation extends FieldFoundation implements IChipFieldFoundation {
-    protected _adapter: IChipFieldAdapter;
+export declare class ChipFieldFoundation extends BaseFieldFoundation<IChipFieldAdapter> implements IChipFieldFoundation {
     private _addOnBlur;
-    private _memberSlotListener;
-    private _inputContainerMouseDownListener;
-    private _handleRootKeyDown;
-    private _handleKeyDown;
-    constructor(_adapter: IChipFieldAdapter);
+    private _mouseDownListener;
+    private _clickListener;
+    private _rootKeyDownListener;
+    private _inputKeyDownListener;
+    private _slotChangeListener;
+    private _inputAttributeListener;
+    private _valueChangeListener;
+    private _inputListener;
+    private _blurListener;
+    constructor(adapter: IChipFieldAdapter);
     initialize(): void;
-    disconnect(): void;
-    /** Controls adding a member of entered text on blur. */
-    get addOnBlur(): boolean;
-    set addOnBlur(value: boolean);
-    private _onInputContainerMouseDown;
+    destroy(): void;
     protected _onBlur(event: FocusEvent): void;
+    private _onMouseDown;
+    private _onClick;
+    private _onValueChange;
+    private _onSlotChange;
+    private _onInputAttributeChange;
     private _onRootKeyDown;
     private _onKeyDown;
     private _focusNextMember;
     private _focusPreviousMember;
-    private _memberIsActive;
+    private _isMemberActive;
     private _getActiveMember;
     private _addMember;
     private _removeMember;
-    private _onMemberSlotChanged;
+    get addOnBlur(): boolean;
+    set addOnBlur(value: boolean);
+    get popoverTargetElement(): HTMLElement;
+    get disabled(): boolean;
+    set disabled(value: boolean);
 }

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

@@ -3,48 +3,44 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getActiveElement } from '@tylertech/forge-core';
 import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
-import { FieldFoundation } from '../field/field-foundation';
-export class ChipFieldFoundation extends FieldFoundation {
-    constructor(_adapter) {
-        super(_adapter);
-        this._adapter = _adapter;
+import { BaseFieldFoundation } from '../field/base/base-field-foundation';
+export class ChipFieldFoundation extends BaseFieldFoundation {
+    constructor(adapter) {
+        super(adapter);
         this._addOnBlur = false;
-        this._memberSlotListener = () => this._onMemberSlotChanged();
-        this._inputContainerMouseDownListener = evt => this._onInputContainerMouseDown(evt);
-        this._handleRootKeyDown = evt => this._onRootKeyDown(evt);
-        this._handleKeyDown = evt => this._onKeyDown(evt);
+        this._mouseDownListener = this._onMouseDown.bind(this);
+        this._clickListener = this._onClick.bind(this);
+        this._rootKeyDownListener = this._onRootKeyDown.bind(this);
+        this._inputKeyDownListener = this._onKeyDown.bind(this);
+        this._slotChangeListener = this._onSlotChange.bind(this);
+        this._inputAttributeListener = this._onInputAttributeChange.bind(this);
+        this._valueChangeListener = this._onValueChange.bind(this);
+        this._inputListener = this._onValueChange.bind(this);
+        this._blurListener = this._onBlur.bind(this);
     }
     initialize() {
-        super.initialize();
-        this._adapter.addMemberSlotListener(this._memberSlotListener);
-        this._adapter.addInputContainerListener('mousedown', this._inputContainerMouseDownListener);
-        this._adapter.addRootListener('keydown', this._handleRootKeyDown);
-        this._adapter.addInputListener('keydown', this._handleKeyDown);
-    }
-    disconnect() {
-        super.disconnect();
-        this._adapter.removeMemberSlotListener(this._memberSlotListener);
-        this._adapter.removeInputContainerListener('mousedown', this._inputContainerMouseDownListener);
-        this._adapter.removeRootListener('keydown', this._handleRootKeyDown);
-        this._adapter.removeInputListener('keydown', this._handleKeyDown);
-    }
-    /** Controls adding a member of entered text on blur. */
-    get addOnBlur() {
-        return this._addOnBlur;
-    }
-    set addOnBlur(value) {
-        value = Boolean(value);
-        if (this._addOnBlur !== value) {
-            this._addOnBlur = value;
-            this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, this._addOnBlur);
+        this._adapter.initialize();
+        this._adapter.addRootListener('mousedown', this._mouseDownListener, { capture: true });
+        this._adapter.addRootListener('click', this._clickListener);
+        this._adapter.addRootListener('keydown', this._rootKeyDownListener);
+        this._adapter.addInputListener('keydown', this._inputKeyDownListener);
+        this._adapter.addRootListener('slotchange', this._slotChangeListener);
+        this._adapter.addRootListener('input', this._inputListener);
+        this._adapter.tryAddValueChangeListener(this, this._valueChangeListener);
+        if (this._addOnBlur) {
+            this._adapter.addInputListener('blur', this._blurListener);
         }
     }
-    _onInputContainerMouseDown(evt) {
-        evt.preventDefault();
-        this._adapter.focusInput();
-        this._adapter.tryPropagateClick(evt.target);
+    destroy() {
+        this._adapter.removeRootListener('mousedown', this._mouseDownListener, { capture: true });
+        this._adapter.removeRootListener('click', this._clickListener);
+        this._adapter.removeRootListener('keydown', this._rootKeyDownListener);
+        this._adapter.removeInputListener('keydown', this._inputKeyDownListener);
+        this._adapter.removeRootListener('slotchange', this._slotChangeListener);
+        this._adapter.removeRootListener('input', this._inputListener);
+        this._adapter.removeInputListener('blur', this._blurListener);
+        this._adapter.removeValueChangeListener();
     }
     _onBlur(event) {
         const input = event.target;
@@ -52,37 +48,75 @@ export class ChipFieldFoundation extends FieldFoundation {
             this._addMember(input);
         }
         input.value = '';
-        super._onBlur(event);
     }
-    _onRootKeyDown(event) {
-        if (this._adapter.inputHasValue()) {
+    _onMouseDown(evt) {
+        if (this._disabled || this._adapter.inputHasFocus) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+    }
+    _onClick(_evt) {
+        if (this._disabled) {
             return;
         }
-        switch (event.key) {
-            case 'Right':
+        this._adapter.focusInput();
+        this._adapter.clickInput();
+    }
+    _onValueChange() {
+        this._tryFloatLabel();
+    }
+    _onSlotChange(evt) {
+        const target = evt.target;
+        switch (target.name) {
+            case 'label':
+                this._adapter.tryConnectSlottedLabel(target);
+                break;
+            case 'member':
+                this._adapter.toggleContainerClass(CHIP_FIELD_CONSTANTS.classes.HAS_MEMBERS, target.assignedElements().length > 0);
+                this._adapter.tryFloatLabel();
+                this._adapter.getSlottedMemberElements().forEach(x => x.tabIndex = -1);
+                break;
+            case '':
+                this._adapter.handleDefaultSlotChange(target, this._inputAttributeListener);
+                this._adapter.tryAddValueChangeListener(this, this._valueChangeListener);
+                this._tryFloatLabel();
+                break;
+        }
+    }
+    _onInputAttributeChange(name, value) {
+        switch (name) {
+            case 'disabled':
+                this.disabled = value !== null;
+                break;
+            case 'placeholder':
+                this._tryFloatLabel();
+                break;
+        }
+    }
+    _onRootKeyDown({ key }) {
+        if (this._adapter.hasInputValue) {
+            return;
+        }
+        switch (key) {
             case 'ArrowRight':
                 this._focusNextMember();
                 break;
-            case 'Left':
             case 'ArrowLeft':
                 this._focusPreviousMember();
                 break;
             case 'Backspace':
             case 'Delete':
-            case 'Del':
                 this._removeMember();
                 break;
-            default:
-                break;
         }
     }
-    _onKeyDown(event) {
-        const input = event.target;
-        switch (event.key) {
+    _onKeyDown({ target, key }) {
+        const input = target;
+        switch (key) {
             case 'Enter':
                 this._addMember(input);
                 break;
-            case 'Esc':
             case 'Escape':
                 input.value = '';
                 break;
@@ -91,19 +125,17 @@ export class ChipFieldFoundation extends FieldFoundation {
                     input.value = '';
                 }
                 break;
-            default:
-                break;
         }
     }
     _focusNextMember() {
         const members = this._adapter.getSlottedMemberElements();
-        if (members.length < 1 || this._adapter.inputHasFocus()) {
+        if (!members.length || this._adapter.inputHasFocus) {
             return;
         }
         for (let i = 0; i < members.length; i++) {
-            const member = members.item(i);
-            const nextMember = members.item(i + 1);
-            if (this._memberIsActive(member)) {
+            const member = members.at(i);
+            const nextMember = members.at(i + 1);
+            if (member && this._isMemberActive(member)) {
                 if (nextMember) {
                     nextMember.focus();
                     break;
@@ -116,38 +148,33 @@ export class ChipFieldFoundation extends FieldFoundation {
     }
     _focusPreviousMember() {
         const members = this._adapter.getSlottedMemberElements();
-        if (members.length < 1) {
+        if (!members.length) {
             return;
         }
-        if (this._adapter.inputHasFocus()) {
+        if (this._adapter.inputHasFocus) {
             members[members.length - 1].focus();
             return;
         }
         for (let i = 0; i < members.length; i++) {
-            const previousMember = members.item(i - 1);
-            const member = members.item(i);
-            if (this._memberIsActive(member) && previousMember) {
+            const previousMember = members.at(i - 1);
+            const member = members.at(i);
+            if (member && this._isMemberActive(member) && previousMember) {
                 previousMember.focus();
                 break;
             }
         }
     }
-    _memberIsActive(ele) {
-        return ele.matches(':focus-within') || getActiveElement(ele.ownerDocument) === ele || ele.hasAttribute('focused');
+    _isMemberActive(el) {
+        return el.matches(':focus-within');
     }
     _getActiveMember() {
+        var _a;
         const members = this._adapter.getSlottedMemberElements();
-        for (let i = 0; i < members.length; i++) {
-            const member = members.item(i);
-            if (this._memberIsActive(member)) {
-                return member;
-            }
-        }
-        return null;
+        return (_a = members.find(x => this._isMemberActive(x))) !== null && _a !== void 0 ? _a : null;
     }
     _addMember(input) {
         const cleanInputValue = input.value.trim();
-        if (cleanInputValue && cleanInputValue.length > 0) {
+        if (cleanInputValue.length > 0) {
             this._adapter.emitHostEvent(CHIP_FIELD_CONSTANTS.events.MEMBER_ADDED, cleanInputValue);
         }
         input.value = '';
@@ -156,7 +183,7 @@ export class ChipFieldFoundation extends FieldFoundation {
         let memberToRemove = this._getActiveMember();
         if (!memberToRemove) {
             const members = this._adapter.getSlottedMemberElements();
-            memberToRemove = members.item(members.length - 1);
+            memberToRemove = members.at(-1);
         }
         if (!memberToRemove) {
             return;
@@ -164,8 +191,35 @@ export class ChipFieldFoundation extends FieldFoundation {
         this._focusNextMember();
         this._adapter.emitHostEvent(CHIP_FIELD_CONSTANTS.events.MEMBER_REMOVED, memberToRemove);
     }
-    _onMemberSlotChanged() {
-        this.floatLabel(this._adapter.fieldHasValue() || this._adapter.inputHasFocus());
-        this._adapter.getSlottedMemberElements().forEach(x => x.tabIndex = -1);
+    get addOnBlur() {
+        return this._addOnBlur;
+    }
+    set addOnBlur(value) {
+        value = Boolean(value);
+        if (this._addOnBlur !== value) {
+            this._addOnBlur = value;
+            if (this._adapter.isConnected) {
+                if (this._addOnBlur) {
+                    this._adapter.addInputListener('blur', this._blurListener);
+                }
+                else {
+                    this._adapter.removeInputListener('blur', this._blurListener);
+                }
+            }
+            this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, this._addOnBlur);
+        }
+    }
+    get popoverTargetElement() {
+        return this._adapter.popoverTargetElement;
+    }
+    get disabled() {
+        return super.disabled;
+    }
+    set disabled(value) {
+        if (this.disabled === value) {
+            return;
+        }
+        super.disabled = value;
+        this._adapter.setDisabled(value);
     }
 }