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

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

@@ -9,72 +9,72 @@ import { BaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAdapter } from './expansion-panel-adapter';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 import { ExpansionPanelFoundation } from './expansion-panel-foundation';
-const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
-const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0;-webkit-tap-highlight-color:transparent}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,var(--forge-shape-full,9999px));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host{display:block}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"content hidden\" part=\"content\"><div class=\"inner\"><slot></slot></div></div></div></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;-webkit-transition-property:opacity,grid-template-rows;transition-property:opacity,grid-template-rows;transition-property:opacity,grid-template-rows,-ms-grid-rows;-webkit-transition-duration:var(--_expansion-panel-animation-duration);transition-duration:var(--_expansion-panel-animation-duration);-webkit-transition-timing-function:var(--_expansion-panel-animation-easing);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;overflow:hidden;opacity:0}.content .inner{display:grid;grid-template-rows:1fr;overflow:hidden}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{-webkit-transition:none;transition:none}}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{-webkit-transition-property:opacity,grid-template-columns;transition-property:opacity,grid-template-columns;transition-property:opacity,grid-template-columns,-ms-grid-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{-webkit-transition:none;transition:none}';
 /**
- * A web component that encapsulates the functionality of expanding/collapsing content when clicked.
- *
  * @tag forge-expansion-panel
+ *
+ * @summary Expansion panels provide progressive disclosure of content.
+ *
+ * @property {boolean} open - Whether the panel is open or closed.
+ * @property {ExpansionPanelOrientation} orientation - The orientation of the panel.
+ * @property {ExpansionPanelAnimationType} animationType - The type of animation to use when opening/closing the panel.
+ *
+ * @attribute {boolean} open - Whether the panel is open or closed.
+ * @attribute {ExpansionPanelOrientation} orientation - The orientation of the panel.
+ * @attribute {ExpansionPanelAnimationType} animation-type - The type of animation to use when opening/closing the panel.
+ *
+ * @fires forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
+ * @fires forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
+ *
+ * @cssproperty --forge-expansion-animation-duration - The duration of the open/close animation.
+ * @cssproperty --forge-expansion-animation-easing - The easing function of the open/close animation.
+ *
+ * @csspart root - The root element of the panel.
+ * @csspart header - The header of the panel.
+ * @csspart content - The content of the panel.
+ *
+ * @slot - The content of the panel.
+ * @slot header - The header of the panel.
  */
 let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            EXPANSION_PANEL_CONSTANTS.attributes.OPEN,
-            EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION,
-            EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS
-        ];
+        return Object.values(EXPANSION_PANEL_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
         this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
     }
-    initializedCallback() {
-        this._foundation.initialize();
-    }
     connectedCallback() {
-        this._foundation.connect();
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case EXPANSION_PANEL_CONSTANTS.attributes.OPEN:
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN:
                 this.open = coerceBoolean(newValue);
                 break;
-            case EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION:
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.ORIENTATION:
                 this.orientation = newValue;
                 break;
-            case EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS:
-                this.useAnimations = coerceBoolean(newValue);
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.ANIMATION_TYPE:
+                this.animationType = newValue;
                 break;
         }
     }
-    disconnectedCallback() {
-        this._foundation.disconnect();
-    }
-    /** Toggles the collapsed state. */
     toggle() {
         this.open = !this.open;
     }
-    /** Forces the expansion panel to expand/collapse without transition animations. */
-    setOpenImmediate(open) {
-        this._foundation.setOpenImmediate(open);
-    }
 };
 __decorate([
     FoundationProperty()
 ], ExpansionPanelComponent.prototype, "open", void 0);
-__decorate([
-    FoundationProperty()
-], ExpansionPanelComponent.prototype, "openCallback", void 0);
-__decorate([
-    FoundationProperty()
-], ExpansionPanelComponent.prototype, "closeCallback", void 0);
 __decorate([
     FoundationProperty()
 ], ExpansionPanelComponent.prototype, "orientation", void 0);
 __decorate([
     FoundationProperty()
-], ExpansionPanelComponent.prototype, "useAnimations", void 0);
+], ExpansionPanelComponent.prototype, "animationType", void 0);
 ExpansionPanelComponent = __decorate([
     CustomElement({
         name: EXPANSION_PANEL_CONSTANTS.elementName

package/esm/{field-next → field}/base/base-field-foundation.js

@@ -54,6 +54,7 @@ export class BaseFieldFoundation {
         if (this._labelPosition !== value) {
             this._labelPosition = value;
             this._adapter.setFieldProperty('labelPosition', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.LABEL_POSITION, value);
         }
     }
     get labelAlignment() {
@@ -63,6 +64,7 @@ export class BaseFieldFoundation {
         if (this._labelAlignment !== value) {
             this._labelAlignment = value;
             this._adapter.setFieldProperty('labelAlignment', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.LABEL_ALIGNMENT, value);
         }
     }
     get invalid() {
@@ -72,6 +74,7 @@ export class BaseFieldFoundation {
         if (this._invalid !== value) {
             this._invalid = value;
             this._adapter.setFieldProperty('invalid', value);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.INVALID, value);
         }
     }
     get required() {
@@ -81,6 +84,7 @@ export class BaseFieldFoundation {
         if (this._required !== value) {
             this._required = value;
             this._adapter.setFieldProperty('required', value);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.REQUIRED, value);
         }
     }
     get optional() {
@@ -90,6 +94,7 @@ export class BaseFieldFoundation {
         if (this._optional !== value) {
             this._optional = value;
             this._adapter.setFieldProperty('optional', value);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.OPTIONAL, value);
         }
     }
     get disabled() {
@@ -99,6 +104,7 @@ export class BaseFieldFoundation {
         if (this._disabled !== value) {
             this._disabled = value;
             this._adapter.setFieldProperty('disabled', value);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.DISABLED, value);
         }
     }
     get permanentlyFloatLabel() {
@@ -108,6 +114,7 @@ export class BaseFieldFoundation {
         if (this._permanentlyFloatLabel !== value) {
             this._permanentlyFloatLabel = value;
             this._adapter.setFieldProperty('floatLabel', value || this._hasValue || this._hasPlaceholder);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.FLOAT_LABEL, value);
         }
     }
     get variant() {
@@ -117,6 +124,7 @@ export class BaseFieldFoundation {
         if (this._variant !== value) {
             this._variant = value;
             this._adapter.setFieldProperty('variant', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.VARIANT, value);
         }
     }
     get theme() {
@@ -126,6 +134,7 @@ export class BaseFieldFoundation {
         if (this._theme !== value) {
             this._theme = value;
             this._adapter.setFieldProperty('theme', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.THEME, value);
         }
     }
     get shape() {
@@ -135,6 +144,7 @@ export class BaseFieldFoundation {
         if (this._shape !== value) {
             this._shape = value;
             this._adapter.setFieldProperty('shape', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.SHAPE, value);
         }
     }
     get density() {
@@ -144,6 +154,7 @@ export class BaseFieldFoundation {
         if (this._density !== value) {
             this._density = value;
             this._adapter.setFieldProperty('density', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.DENSITY, value);
         }
     }
     get dense() {
@@ -153,6 +164,7 @@ export class BaseFieldFoundation {
         if (this._dense !== value) {
             this._dense = value;
             this._adapter.setFieldProperty('dense', value);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.DENSE, value);
         }
     }
     get popoverIcon() {
@@ -162,6 +174,7 @@ export class BaseFieldFoundation {
         if (this._popoverIcon !== value) {
             this._popoverIcon = value;
             this._adapter.setFieldProperty('popoverIcon', value);
+            this._adapter.toggleHostAttribute(BASE_FIELD_CONSTANTS.attributes.POPOVER_ICON, value);
         }
     }
     get supportTextInset() {
@@ -171,6 +184,7 @@ export class BaseFieldFoundation {
         if (this._supportTextInset !== value) {
             this._supportTextInset = value;
             this._adapter.setFieldProperty('supportTextInset', value);
+            this._adapter.setHostAttribute(BASE_FIELD_CONSTANTS.attributes.SUPPORT_TEXT_INSET, value);
         }
     }
 }

package/esm/{field-next/field-foundation.d.ts → field/base/with-base-field.d.ts}

@@ -3,60 +3,37 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { ICustomElementFoundation } from '@tylertech/forge-core';
-import { FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base/base-field-constants';
-import { IFieldAdapter } from './field-adapter';
-export interface IFieldFoundation extends ICustomElementFoundation {
+import { AbstractConstructor, MixinBase } from '../../constants';
+import { IBaseComponent } from '../../core/base/base-component';
+import { IFieldComponent } from '../field';
+import { FieldLabelPosition, FieldLabelAlignment, FieldVariant, FieldTheme, FieldShape, FieldDensity, FieldSupportTextInset } from './base-field-constants';
+/**
+ * Provides a consistent passthrough API to the underlying field component, for
+ * field-like wrapper components.
+ */
+export interface IWithBaseField extends IBaseComponent {
     labelPosition: FieldLabelPosition;
     labelAlignment: FieldLabelAlignment;
-    floatLabel: boolean;
     invalid: boolean;
     required: boolean;
     optional: boolean;
     disabled: boolean;
+    floatLabel: boolean;
     variant: FieldVariant;
     theme: FieldTheme;
     shape: FieldShape;
     density: FieldDensity;
     dense: boolean;
     popoverIcon: boolean;
-    popoverExpanded: boolean;
-    multiline: boolean;
     supportTextInset: FieldSupportTextInset;
-    initialize(): void;
+    initializeFieldInstance(fieldElement: IFieldComponent): void;
     floatLabelWithoutAnimation(value: boolean): void;
 }
-export declare class FieldFoundation implements IFieldFoundation {
-    private _adapter;
-    private _labelPosition;
-    private _labelAlignment;
-    private _floatLabel;
-    private _invalid;
-    private _required;
-    private _optional;
-    private _disabled;
-    private _variant;
-    private _theme;
-    private _shape;
-    private _density;
-    private _dense;
-    private _popoverIcon;
-    private _popoverExpanded;
-    private _multiline;
-    private _supportTextInset;
-    private _slotChangeListener;
-    private _popoverIconClickListener;
-    constructor(_adapter: IFieldAdapter);
-    initialize(): void;
-    private _onSlotChange;
-    private _onPopoverIconClick;
-    floatLabelWithoutAnimation(value: boolean): void;
+export declare abstract class WithBaseFieldContract {
     get labelPosition(): FieldLabelPosition;
     set labelPosition(value: FieldLabelPosition);
     get labelAlignment(): FieldLabelAlignment;
     set labelAlignment(value: FieldLabelAlignment);
-    get floatLabel(): boolean;
-    set floatLabel(value: boolean);
     get invalid(): boolean;
     set invalid(value: boolean);
     get required(): boolean;
@@ -65,6 +42,8 @@ export declare class FieldFoundation implements IFieldFoundation {
     set optional(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
+    get floatLabel(): boolean;
+    set floatLabel(value: boolean);
     get variant(): FieldVariant;
     set variant(value: FieldVariant);
     get theme(): FieldTheme;
@@ -77,10 +56,16 @@ export declare class FieldFoundation implements IFieldFoundation {
     set dense(value: boolean);
     get popoverIcon(): boolean;
     set popoverIcon(value: boolean);
-    get popoverExpanded(): boolean;
-    set popoverExpanded(value: boolean);
-    get multiline(): boolean;
-    set multiline(value: boolean);
     get supportTextInset(): FieldSupportTextInset;
     set supportTextInset(value: FieldSupportTextInset);
+    initializeFieldInstance(fieldElement: IFieldComponent): void;
+    floatLabelWithoutAnimation(value: boolean): void;
 }
+/**
+ * Provides a consistent passthrough API to the underlying field component, for
+ * field-like wrapper components.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithBaseField<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithBaseFieldContract> & TBase;

package/esm/field/base/with-base-field.js

@@ -0,0 +1,210 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { coerceBoolean } from '@tylertech/forge-core';
+import { FIELD_CONSTANTS } from '../field-constants';
+import { BASE_FIELD_CONSTANTS } from './base-field-constants';
+/**
+ * Provides a consistent passthrough API to the underlying field component, for
+ * field-like wrapper components.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithBaseField(base) {
+    class BaseFieldComponent extends base {
+        constructor(...args) {
+            super(...args);
+        }
+        initializeFieldInstance(fieldElement) {
+            this._fieldElement = fieldElement;
+            // Ensure the field element is upgraded if it hasn't been already.
+            // This is necessary for imperative creation of elements before they
+            // are connected to the DOM.
+            if (!this._fieldElement.shadowRoot) {
+                window.customElements.upgrade(this._fieldElement);
+            }
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            var _a;
+            switch (name) {
+                case BASE_FIELD_CONSTANTS.observedAttributes.LABEL_POSITION:
+                    this.labelPosition = newValue;
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.LABEL_ALIGNMENT:
+                    this.labelAlignment = newValue;
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.INVALID:
+                    this.invalid = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.REQUIRED:
+                    this.required = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.OPTIONAL:
+                    this.optional = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.DISABLED:
+                    this.disabled = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.FLOAT_LABEL:
+                    this.floatLabel = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.VARIANT:
+                    this.variant = newValue;
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.THEME:
+                    this.theme = newValue;
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.SHAPE:
+                    this.shape = newValue;
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.DENSITY:
+                    this.density = newValue;
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.DENSE:
+                    this.dense = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.POPOVER_ICON:
+                    this.popoverIcon = coerceBoolean(newValue);
+                    return;
+                case BASE_FIELD_CONSTANTS.observedAttributes.SUPPORT_TEXT_INSET:
+                    this.supportTextInset = newValue;
+                    return;
+            }
+            (_a = super.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.call(this, name, oldValue, newValue);
+        }
+        get labelPosition() {
+            return this._fieldElement.labelPosition;
+        }
+        set labelPosition(value) {
+            if (this._fieldElement.labelPosition !== value) {
+                this._fieldElement.labelPosition = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.LABEL_POSITION, value);
+            }
+        }
+        get labelAlignment() {
+            return this._fieldElement.labelAlignment;
+        }
+        set labelAlignment(value) {
+            if (this._fieldElement.labelAlignment !== value) {
+                this._fieldElement.labelAlignment = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.LABEL_ALIGNMENT, value);
+            }
+        }
+        get invalid() {
+            return this._fieldElement.invalid;
+        }
+        set invalid(value) {
+            if (this._fieldElement.invalid !== value) {
+                this._fieldElement.invalid = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.INVALID, value);
+            }
+        }
+        get required() {
+            return this._fieldElement.required;
+        }
+        set required(value) {
+            if (this._fieldElement.required !== value) {
+                this._fieldElement.required = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.REQUIRED, value);
+            }
+        }
+        get optional() {
+            return this._fieldElement.optional;
+        }
+        set optional(value) {
+            if (this._fieldElement.optional !== value) {
+                this._fieldElement.optional = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.OPTIONAL, value);
+            }
+        }
+        get disabled() {
+            return this._fieldElement.disabled;
+        }
+        set disabled(value) {
+            if (this._fieldElement.disabled !== value) {
+                this._fieldElement.disabled = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.DISABLED, value);
+            }
+        }
+        get floatLabel() {
+            return this._fieldElement.floatLabel;
+        }
+        set floatLabel(value) {
+            if (this._fieldElement.floatLabel !== value) {
+                this._fieldElement.floatLabel = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.FLOAT_LABEL, value);
+            }
+        }
+        get variant() {
+            return this._fieldElement.variant;
+        }
+        set variant(value) {
+            if (this._fieldElement.variant !== value) {
+                this._fieldElement.variant = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.VARIANT, value);
+            }
+        }
+        get theme() {
+            return this._fieldElement.theme;
+        }
+        set theme(value) {
+            if (this._fieldElement.theme !== value) {
+                this._fieldElement.theme = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.THEME, value);
+            }
+        }
+        get shape() {
+            return this._fieldElement.shape;
+        }
+        set shape(value) {
+            if (this._fieldElement.shape !== value) {
+                this._fieldElement.shape = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.SHAPE, value);
+            }
+        }
+        get density() {
+            return this._fieldElement.density;
+        }
+        set density(value) {
+            if (this._fieldElement.density !== value) {
+                this._fieldElement.density = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.DENSITY, value);
+            }
+        }
+        get dense() {
+            return this._fieldElement.dense;
+        }
+        set dense(value) {
+            if (this._fieldElement.dense !== value) {
+                this._fieldElement.dense = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.DENSE, value);
+            }
+        }
+        get popoverIcon() {
+            return this._fieldElement.popoverIcon;
+        }
+        set popoverIcon(value) {
+            if (this._fieldElement.popoverIcon !== value) {
+                this._fieldElement.popoverIcon = value;
+                this.toggleAttribute(FIELD_CONSTANTS.attributes.POPOVER_ICON, value);
+            }
+        }
+        get supportTextInset() {
+            return this._fieldElement.supportTextInset;
+        }
+        set supportTextInset(value) {
+            if (this._fieldElement.supportTextInset !== value) {
+                this._fieldElement.supportTextInset = value;
+                this.setAttribute(FIELD_CONSTANTS.attributes.SUPPORT_TEXT_INSET, value);
+            }
+        }
+        floatLabelWithoutAnimation(value) {
+            this._fieldElement.floatLabelWithoutAnimation(value);
+        }
+    }
+    return BaseFieldComponent;
+}