UNPKG

@alyle/ui

Version:

Minimal Design, a set of components for Angular

899 lines 51.1 kB
import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { Directive, InjectionToken, Input, Inject, HostListener, ContentChildren, ContentChild, ViewChild, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, Self, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { StyleRenderer, st2c, keyframesUniqueId, LY_COMMON_STYLES, StyleCollection, Style, LyCommonModule } from '@alyle/ui';
import { Subject, merge } from 'rxjs';
import { takeUntil, take } from 'rxjs/operators';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/cdk/platform';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/cdk/observers';
import { ObserversModule } from '@angular/cdk/observers';
import * as i5 from '@angular/forms';
import * as i6 from '@angular/cdk/text-field';
import { TextFieldModule } from '@angular/cdk/text-field';

class LyLabel {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyLabel, isStandalone: false, selector: "ly-field > ly-label", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyLabel, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-field > ly-label',
                    standalone: false
                }]
        }] });

class LyPlaceholder {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyPlaceholder, isStandalone: false, selector: "ly-field > ly-placeholder", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyPlaceholder, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-field > ly-placeholder',
                    standalone: false
                }]
        }] });

/**
 * For internal use only.
 * @docs-private
 */
const LY_FIELD_STYLES_TOKEN = new InjectionToken('LY_FIELD_STYLES_TOKEN');

/** LyHint */
const STYLE_PRIORITY$2 = -2;
/** Hint text to be shown underneath the field. */
class LyHint {
    set align(val) {
        if (val) {
            if (val === 'after') {
                this._renderer.addClass(this._el.nativeElement, this.classes.hintAfter);
                this._alignClass = this.classes.hintAfter;
            }
            else {
                this._renderer.addClass(this._el.nativeElement, this.classes.hintBefore);
                this._alignClass = this.classes.hintBefore;
            }
        }
        else if (this._alignClass) {
            this._renderer.removeClass(this._el.nativeElement, this._alignClass);
            this._alignClass = undefined;
        }
        this._align = val;
    }
    get align() {
        return this._align;
    }
    constructor(_renderer, _el, _theme, styles) {
        this._renderer = _renderer;
        this._el = _el;
        this._theme = _theme;
        this.classes = this._theme.addStyleSheet(styles, STYLE_PRIORITY$2);
        _renderer.addClass(_el.nativeElement, this.classes.hint);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyHint, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LyTheme2 }, { token: LY_FIELD_STYLES_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyHint, isStandalone: false, selector: "ly-field > ly-hint", inputs: { align: "align" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyHint, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-field > ly-hint',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LyTheme2 }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [LY_FIELD_STYLES_TOKEN]
                }] }], propDecorators: { align: [{
                type: Input
            }] } });

/** Prefix to be placed the before of the field. */
class LyPrefix {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyPrefix, isStandalone: false, selector: "[lyPrefix]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyPrefix, decorators: [{
            type: Directive,
            args: [{
                    selector: '[lyPrefix]',
                    standalone: false
                }]
        }] });

/** Suffix to be placed the after of the field. */
class LySuffix {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LySuffix, isStandalone: false, selector: "[lySuffix]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySuffix, decorators: [{
            type: Directive,
            args: [{
                    selector: '[lySuffix]',
                    standalone: false
                }]
        }] });

const STYLE_PRIORITY$1 = -2;
class LyError {
    constructor(renderer, el, theme, styles) {
        const className = theme.addStyleSheet(styles, STYLE_PRIORITY$1).error;
        renderer.addClass(el.nativeElement, className);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyError, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LyTheme2 }, { token: LY_FIELD_STYLES_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyError, isStandalone: false, selector: "ly-error", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyError, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-error',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LyTheme2 }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [LY_FIELD_STYLES_TOKEN]
                }] }] });

/** An interface which allows a control to work inside of a `LyField`. */
class LyFieldControlBase {
}

/**
 * Only show when input is not focused, and hides input`.
 * You can use it to display formatted values.
 */
class LyDisplayWith {
    constructor(sRenderer, styles) {
        this.sRenderer = sRenderer;
        sRenderer.renderSheet(styles, 'displayWith');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyDisplayWith, deps: [{ token: i1.StyleRenderer }, { token: LY_FIELD_STYLES_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyDisplayWith, isStandalone: false, selector: "ly-display-with", providers: [
            StyleRenderer
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyDisplayWith, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-display-with',
                    providers: [
                        StyleRenderer
                    ],
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i1.StyleRenderer }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [LY_FIELD_STYLES_TOKEN]
                }] }] });

const LY_FIELD_DEFAULT_OPTIONS = new InjectionToken('LY_FIELD_DEFAULT_OPTIONS');
/** LyField */
const STYLE_PRIORITY = -2;
const DEFAULT_APPEARANCE = 'standard';
const DEFAULT_WITH_COLOR = 'primary';
const DEFAULT_FLOATING_LABEL_SIZE = 0.75;
const inputText = [
    'text',
    'number',
    'password',
    'search',
    'tel',
    'url'
];
const STYLE_SELECT_ARROW = (_className) => `${_className}::after{position:absolute;content:'';width:0;height:0;border-left:0.3125em solid transparent;border-right:0.3125em solid transparent;border-top:0.3125em solid;top:50%;{after}:0;margin-top:-0.15625em;pointer-events:none;}`;
const MIXIN_CDK_TEXTAREA_AUTOSIZE_MEASURING_BASE = (_className) => `${_className}{padding:2px 0 !important;box-sizing:content-box !important;}`;
const STYLE_AUTOSIZE = (_className) => `${_className} textarea.cdk-textarea-autosize{resize:none;}${st2c((MIXIN_CDK_TEXTAREA_AUTOSIZE_MEASURING_BASE), `${_className} textarea.cdk-textarea-autosize-measuring`)}${_className} textarea.cdk-textarea-autosize-measuring{height:auto !important;overflow:hidden !important;}${st2c((MIXIN_CDK_TEXTAREA_AUTOSIZE_MEASURING_BASE), `${_className} textarea.cdk-textarea-autosize-measuring-firefox`)}${_className} textarea.cdk-textarea-autosize-measuring-firefox{height:0 !important;}`;
/**
 * Core styles that enable monitoring autofill state of text fields from Angular CDK.
 */
const TEXT_FIELD_AUTOFILL = (_className) => `@keyframes cdk-text-field-autofill-start{@keyframes cdk-text-field-autofill-start{/*!*/;}}@keyframes cdk-text-field-autofill-end{@keyframes cdk-text-field-autofill-end{/*!*/;}}${_className} .cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms;}${_className} .cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms;}`;
const STYLES = (theme, ref) => {
    const classes = ref.selectorsOf(STYLES);
    const { before, after } = theme;
    const shake = keyframesUniqueId.next();
    return {
        $priority: STYLE_PRIORITY,
        $global: (_className) => `@keyframes ${shake}{0%{margin-${before}:0;}40%{margin-${before}:2px;}50%{margin-${before}:-2px;}70%{margin-${before}:2px;}100%{margin-${before}:0;}}${st2c((STYLE_AUTOSIZE), `${_className}`)}${st2c((TEXT_FIELD_AUTOFILL), `${_className}`)}`,
        root: () => (_className) => `${_className}{display:inline-block;position:relative;line-height:1.125;}${_className} ${classes.hint},${_className} ${classes.error}{display:block;}${_className} ${classes.label} ly-icon,${_className} ${classes.placeholder} ly-icon{font-size:inherit;}${_className} ${classes.prefix},${_className} ${classes.suffix}{position:relative;white-space:nowrap;flex:none;}${st2c(((theme.field
            && theme.field.root
            && (theme.field.root instanceof StyleCollection
                ? theme.field.root.setTransformer(fn => fn(classes))
                : theme.field.root(classes)))), `${_className}`)}`,
        animations: () => (_className) => `${_className} ${classes.labelSpan}{transition:${theme.animations.curves.deceleration} .${theme.animations.durations.complex}s;}${_className} ${classes.label}{transition:${theme.animations.curves.deceleration} .${theme.animations.durations.complex}s;}`,
        container: (_className) => `${_className}{height:100%;display:flex;align-items:baseline;position:relative;-webkit-tap-highlight-color:transparent;box-sizing:border-box;}${st2c((LY_COMMON_STYLES.fill), `${_className}:after`)}${_className}:after{content:'';pointer-events:none;}`,
        fieldset: (_className) => `${st2c((LY_COMMON_STYLES.fill), `${_className}`)}${_className}{margin:0;border-style:solid;border-width:0;}`,
        fieldsetSpan: (_className) => `${_className}{padding:0;height:2px;}`,
        prefix: (_className) => `${_className}{max-height:2em;}`,
        infix: (_className) => `${_className}{display:inline-flex;position:relative;min-width:0;width:180px;flex:auto;}`,
        suffix: (_className) => `${_className}{max-height:2em;}`,
        labelContainer: (_className) => `${st2c((LY_COMMON_STYLES.fill), `${_className}`)}${_className}{pointer-events:none;display:flex;width:100%;}`,
        labelSpacingStart: null,
        labelCenter: (_className) => `${_className}{display:flex;max-width:100%;}`,
        labelSpacingEnd: (_className) => `${_className}{flex:1;}`,
        label: (_className) => `${st2c((LY_COMMON_STYLES.fill), `${_className}`)}${_className}{margin:0;border:none;pointer-events:none;overflow:hidden;width:100%;height:100%;}`,
        labelSpan: (_className) => `${_className}{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;width:100%;height:100%;transform-origin:${before} 0;}`,
        isFloatingLabel: null,
        floatingLabel: null,
        placeholder: (_className) => `${st2c((LY_COMMON_STYLES.fill), `${_className}`)}${_className}{pointer-events:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}`,
        focused: () => (_className) => `${_className}:not(${classes.errorState}) ${classes.fieldRequiredMarker}{color:${theme.accent.default};}`,
        inputNative: (_className) => `${_className}{padding:0;outline:none;border:none;background-color:transparent;color:inherit;font:inherit;width:100%;}textarea${_className}{padding:2px 0;margin:-2px 0;resize:vertical;overflow:auto;}select${_className}{-moz-appearance:none;-webkit-appearance:none;position:relative;background-color:transparent;display:inline-flex;box-sizing:border-box;padding-${after}:1em;}select${_className} option:not([disabled]){color:initial;}select${_className} optgroup:not([disabled]){color:initial;}select${_className}::-ms-expand{display:none;}select${_className}::-moz-focus-inner{border:0;}select${_className}:not(:disabled){cursor:pointer;}select${_className}::-ms-value{color:inherit;background:0 0;}`,
        /** Is used to hide the input when `displayWith` is shown */
        _hiddenInput: (_className) => `${_className}{color:transparent;}`,
        displayWith: (_className) => `${st2c((LY_COMMON_STYLES.fill), `${_className}`)}${_className}{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;pointer-events:none;}`,
        hintContainer: (_className) => `${_className}{min-height:1.25em;font-size:0.75em;margin-top:.25em;}${_className} > div{display:flex;max-width:100%;overflow:hidden;justify-content:space-between;align-items:center;}`,
        disabled: () => (_className) => `${_className},${_className} ${classes.label},${_className} ${classes.container}:after{color:${theme.disabled.contrast};cursor:default;}`,
        hint: null,
        fieldRequiredMarker: null,
        error: null,
        errorState: () => (_className) => `${_className} ${classes.label},${_className} ${classes.hintContainer},${_className}${classes.selectArrow} ${classes.infix}:after{color:${theme.warn.default}!important;}${_className} ${classes.fieldset},${_className} ${classes.container}:after{border-color:${theme.warn.default}!important;}${_className} ${classes.inputNative}{caret-color:${theme.warn.default}!important;}${_className} ${classes.hintContainer} ly-hint:not(${classes.hintAfter}){display:none;}${_className} ${classes.labelSpan}{animation:${shake} ${theme.animations.durations.complex}ms ${theme.animations.curves.deceleration};}${_className} ${classes.inputNative}::selection,${_className} ${classes.inputNative}::-moz-selection{background-color:${theme.warn.default} !important;color:${theme.warn.contrast} !important;}`,
        hintAfter: (_className) => `${_className}{margin-${before}:auto;}`,
        hintBefore: (_className) => `${_className}{margin-${after}:auto;}`,
        selectArrow: () => (_className) => `${_className} ${classes.infix}::after{position:absolute;content:'';width:0;height:0;border-left:0.3125em solid transparent;border-right:0.3125em solid transparent;border-top:0.3125em solid;top:0;${after}:0;pointer-events:none;}`
    };
};
/**
 * @dynamic
 */
class LyField {
    get _control() {
        // Support both Ivy and ViewEngine.
        return this._controlNonStatic || this._controlStatic;
    }
    get errorState() {
        return this._control ? this._control.errorState : false;
    }
    get displayWithStatus() {
        return !!(this._displayWithChild
            && this._control
            && !this._control.empty
            && !this._control.focused
            && !this._control.errorState);
    }
    /** Whether the required marker should be hidden. */
    get hideRequiredMarker() {
        return this._hideRequiredMarker;
    }
    set hideRequiredMarker(value) {
        this._hideRequiredMarker = coerceBooleanProperty(value);
    }
    set fullWidth(val) {
        const newVal = coerceBooleanProperty(val);
        if (newVal) {
            this._fullWidthClass = this._theme.addStyle(`fullWidth`, {
                display: 'block',
                width: '100%'
            }, this._getHostElement(), this._fullWidthClass, STYLE_PRIORITY);
        }
        else if (this._fullWidthClass) {
            this._renderer.removeClass(this._getHostElement(), this._fullWidthClass);
            this._fullWidthClass = undefined;
        }
        this._fullWidth = newVal;
    }
    get fullWidth() {
        return this._fullWidth;
    }
    /** Whether the label is floating. */
    set floatingLabel(val) {
        this._floatingLabel = coerceBooleanProperty(val);
        this._updateFloatingLabel();
    }
    get floatingLabel() {
        return this._floatingLabel;
    }
    /** The field appearance style. */
    set appearance(val) {
        if (val === 'outlined') {
            this._updateFielsetSpanOnStable = true;
        }
    }
    onFocus() {
        this._el.nativeElement.focus();
    }
    constructor(_renderer, _el, _theme, _cd, _ngZone, sRenderer, _platform, _defaults) {
        this._renderer = _renderer;
        this._el = _el;
        this._theme = _theme;
        this._cd = _cd;
        this._ngZone = _ngZone;
        this.sRenderer = sRenderer;
        this._platform = _platform;
        this._defaults = _defaults;
        /**
         * styles
         * @docs-private
         */
        this.classes = this._theme.renderStyleSheet(STYLES);
        this._destroyed = new Subject();
        _renderer.addClass(_el.nativeElement, this.classes.root);
        this._hideRequiredMarker =
            _defaults?.hideRequiredMarker != null ? _defaults.hideRequiredMarker : false;
    }
    ngOnInit() {
        if (!this.color) {
            this.color = DEFAULT_WITH_COLOR;
        }
        if (this.floatingLabelSize == null) {
            this.floatingLabelSize = (this._defaults?.floatingLabelSize != null)
                ? this._defaults?.floatingLabelSize
                : DEFAULT_FLOATING_LABEL_SIZE;
        }
        if (!this.appearance) {
            this.appearance = this._defaults?.appearance ? this._defaults?.appearance : DEFAULT_APPEARANCE;
        }
        if (this.persistentHint == null) {
            this.persistentHint = (this._defaults?.persistentHint != null) ? this._defaults.persistentHint : false;
        }
        if (this.floatingLabel == null) {
            this.floatingLabel = (this._defaults?.floatingLabel != null) ? this._defaults.floatingLabel : false;
        }
    }
    ngAfterContentInit() {
        this._control.stateChanges.subscribe(() => {
            this._updateFloatingLabel();
            this._updateDisplayWith();
            this._markForCheck();
        });
        const ngControl = this._control.ngControl;
        // Run change detection if the value changes.
        if (ngControl && ngControl.valueChanges) {
            ngControl.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
                this._updateFloatingLabel();
                this._updateDisplayWith();
                this._markForCheck();
            });
        }
        this._ngZone.runOutsideAngular(() => {
            this._ngZone.onStable.pipe(takeUntil(this._destroyed)).subscribe(() => {
                if (this._updateFielsetSpanOnStable) {
                    this._updateFielsetSpan();
                }
            });
            this._ngZone.onStable.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
                this._updateDisplayWith();
                this._renderer.addClass(this._el.nativeElement, this.classes.animations);
            });
        });
        merge(this._prefixChildren.changes, this._suffixChildren.changes).subscribe(() => {
            this._updateFielsetSpanOnStable = true;
            this._markForCheck();
        });
    }
    ngAfterViewInit() {
        this._updateFielsetSpan();
        this._updateFloatingLabel();
    }
    ngOnDestroy() {
        this._destroyed.next();
        this._destroyed.complete();
    }
    _updateFielsetSpan() {
        if (!this._platform.isBrowser) {
            return;
        }
        if (this.floatingLabelSize == null) {
            return;
        }
        if (this.appearance !== 'outlined') {
            return;
        }
        const label = this._isLabel() ? this._labelSpan.nativeElement : null;
        const labelChildren = this._isLabel()
            ? this._labelSpan.nativeElement.children
            : null;
        if (!label) {
            return;
        }
        const before = this._theme.variables.before;
        const fieldsetLegend = this._getHostElement().querySelector('legend');
        if (!fieldsetLegend) {
            this._updateFielsetSpanOnStable = true;
            return;
        }
        const labelRect = label.getBoundingClientRect();
        const container = this._container.nativeElement;
        const containerRect = this._container.nativeElement.getBoundingClientRect();
        let width = 0;
        for (let index = 0; index < labelChildren.length; index++) {
            width += labelChildren[index].getBoundingClientRect().width;
        }
        const percent = containerRect.width / container.offsetWidth;
        const labelPercent = labelRect.width / label.offsetWidth;
        let beforeMargin = Math.abs((containerRect[before] - labelRect[before]) / percent) - 12;
        width /= labelPercent;
        width *= this.floatingLabelSize;
        // add 6px of space
        width += 6;
        width = width > (label.parentElement.offsetWidth)
            ? (label.parentElement.offsetWidth)
            : width;
        width = Math.round(width);
        beforeMargin = Math.round(beforeMargin);
        fieldsetLegend.style[`margin-right`] = ``;
        fieldsetLegend.style[`margin-left`] = ``;
        fieldsetLegend.style[`margin-${before}`] = `${beforeMargin}px`;
        this._updateFielsetSpanOnStable = false;
        this._fielsetSpanClass = this._theme.addStyle(`style.fieldsetSpanFocused:${width}`, {
            [`&.${this.classes.isFloatingLabel} .${this.classes.fieldsetSpan}`]: { width: `${width}px` }
        }, this._el.nativeElement, this._fielsetSpanClass, STYLE_PRIORITY);
    }
    /** @ignore */
    _isLabel() {
        if (this._control && this._control.placeholder && !this._labelChild) {
            return true;
        }
        else if (this._labelChild || this._placeholderChild) {
            return true;
        }
        return false;
    }
    /** @ignore */
    _isPlaceholder() {
        if ((this._labelChild && this._control && this._control.placeholder) || (this._labelChild && this._placeholderChild)) {
            return true;
        }
        return false;
    }
    /** @ignore */
    _isEmpty() {
        const val = this._control ? this._control.value : null;
        return val === '' || val === null || val === undefined;
    }
    _updateFloatingLabel() {
        if (this._labelContainer2) {
            const isFloating = this._control.floatingLabel || this.floatingLabel;
            if (this._isFloating !== isFloating) {
                this._isFloating = isFloating;
                if (isFloating) {
                    this._renderer.addClass(this._labelContainer2.nativeElement, this.classes.floatingLabel);
                    this._renderer.addClass(this._el.nativeElement, this.classes.isFloatingLabel);
                }
                else {
                    this._renderer.removeClass(this._labelContainer2.nativeElement, this.classes.floatingLabel);
                    this._renderer.removeClass(this._el.nativeElement, this.classes.isFloatingLabel);
                }
            }
        }
        if (this._control) {
            if (this._control.focused) {
                this._renderer.addClass(this._el.nativeElement, this.classes.focused);
            }
            else {
                this._renderer.removeClass(this._el.nativeElement, this.classes.focused);
            }
        }
    }
    _updateDisplayWith() {
        if (this._control) {
            this._control.sRenderer.toggleClass(this.classes._hiddenInput, this.displayWithStatus);
        }
    }
    _markForCheck() {
        this._cd.markForCheck();
    }
    _getHostElement() {
        return this._el.nativeElement;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LyTheme2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.StyleRenderer }, { token: i2.Platform }, { token: LY_FIELD_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LyField, isStandalone: false, selector: "ly-field", inputs: { hideRequiredMarker: "hideRequiredMarker", persistentHint: "persistentHint", floatingLabelSize: "floatingLabelSize", fullWidth: "fullWidth", floatingLabel: "floatingLabel", color: "color", appearance: "appearance" }, host: { listeners: { "focus": "onFocus()" } }, providers: [
            StyleRenderer,
        ], queries: [{ propertyName: "_controlNonStatic", first: true, predicate: LyFieldControlBase, descendants: true }, { propertyName: "_controlStatic", first: true, predicate: LyFieldControlBase, descendants: true, static: true }, { propertyName: "_placeholderChild", first: true, predicate: LyPlaceholder, descendants: true }, { propertyName: "_labelChild", first: true, predicate: LyLabel, descendants: true }, { propertyName: "_displayWithChild", first: true, predicate: LyDisplayWith, descendants: true }, { propertyName: "_hintChildren", predicate: LyHint }, { propertyName: "_prefixChildren", predicate: LyPrefix }, { propertyName: "_suffixChildren", predicate: LySuffix }, { propertyName: "_errorChildren", predicate: LyError }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["_container"], descendants: true, static: true }, { propertyName: "_labelContainer", first: true, predicate: ["_labelContainer"], descendants: true }, { propertyName: "_labelContainer2", first: true, predicate: ["_labelContainer2"], descendants: true }, { propertyName: "_labelSpan", first: true, predicate: ["_labelSpan"], descendants: true }, { propertyName: "_prefixContainer", first: true, predicate: ["_prefixContainer"], descendants: true }, { propertyName: "_suffixContainer", first: true, predicate: ["_suffixContainer"], descendants: true }], exportAs: ["lyFormField"], ngImport: i0, template: "<div #_container\n  [className]=\"classes.container\"\n  (click)=\"_control && _control.onContainerClick && _control.onContainerClick($event)\">\n  <fieldset\n    *ngIf=\"appearance === 'outlined'\"\n    [className]=\"classes.fieldset\"><legend [className]=\"classes.fieldsetSpan\"></legend></fieldset>\n  <div [className]=\"classes.prefix\" *ngIf=\"_prefixChildren.length\" #_prefixContainer>\n    <ng-content select=\"[lyPrefix]\"></ng-content>\n  </div>\n  <div [className]=\"classes.infix\">\n    <ng-container\n      *ngIf=\"displayWithStatus\"\n    >\n      <ng-content select=\"ly-display-with\"></ng-content>\n    </ng-container>\n    <ng-content></ng-content>\n    <span [className]=\"classes.label\" *ngIf=\"_isLabel()\" #_labelContainer2>\n      <span #_labelSpan [className]=\"classes.labelSpan\"\n        (cdkObserveContent)=\"_updateFielsetSpan()\"\n        [cdkObserveContentDisabled]=\"appearance != 'outlined'\"\n      >\n        <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n      </span>\n    </span>\n    <div [className]=\"classes.placeholder\"\n      *ngIf=\"_isPlaceholder() && _control?.empty && (_control?.floatingLabel || floatingLabel)\"\n    >\n      <ng-container *ngTemplateOutlet=\"_placeholderTemplate\"></ng-container>\n    </div>\n  </div>\n  <div [className]=\"classes.suffix\" *ngIf=\"_suffixChildren.length\" #_suffixContainer>\n    <ng-content select=\"[lySuffix]\"></ng-content>\n  </div>\n</div>\n\n<div [className]=\"classes.hintContainer\">\n  <div *ngIf=\"(_hintChildren.length || _errorChildren.length) && (persistentHint || _control?.errorState || _control?.focused)\">\n    <ng-container *ngIf=\"_control?.errorState\">\n      <ng-content select=\"ly-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"ly-hint\"></ng-content>\n  </div>\n</div>\n\n<ng-template #_labelTemplate>\n  <ng-content select=\"ly-label\"></ng-content>\n  <ng-container *ngIf=\"!_labelChild\">\n    <ng-template *ngTemplateOutlet=\"_placeholderTemplate\"></ng-template>\n  </ng-container>\n  <span\n    [className]=\"classes.fieldRequiredMarker\"\n    aria-hidden=\"true\"\n    *ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\">&#32;*</span>\n</ng-template>\n\n<ng-template #_placeholderTemplate>\n  <ng-content select=\"ly-placeholder\"></ng-content>\n  <span *ngIf=\"_control?.placeholder\">{{ _control.placeholder }}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
__decorate([
    Style((val, media) => ({ breakpoints }, ref) => {
        const classes = ref.selectorsOf(STYLES);
        return (_className) => `@media ${(media && breakpoints[media]) || 'all'}{${_className} ${classes.floatingLabel} ${classes.labelSpan}{transform:scale(${val});width:${Math.round(100 / 0.75)}%;}}`;
    })
], LyField.prototype, "floatingLabelSize", void 0);
__decorate([
    Style(val => (theme, ref) => {
        const classes = ref.selectorsOf(STYLES);
        const color = theme.colorOf(val);
        const contrast = theme.colorOf(`${val}:contrast`);
        return (_className) => `${_className}${classes.focused} ${classes.container}:after,${_className}${classes.focused}${classes.selectArrow} ${classes.infix}:after{color:${color};}${_className}${classes.focused} ${classes.fieldset}{border-color:${color};}${_className}${classes.focused} ${classes.label}{color:${color};}${_className} ${classes.inputNative}{caret-color:${color};}${_className} ${classes.inputNative}::selection{background-color:${color};color:${contrast};}${_className} ${classes.inputNative}::-moz-selection{background-color:${color};color:${contrast};}`;
    })
], LyField.prototype, "color", void 0);
__decorate([
    Style(val => (theme, ref) => {
        const classes = ref.selectorsOf(STYLES);
        if (theme.field?.appearance) {
            const appearance = theme.field.appearance[val];
            if (appearance) {
                return appearance instanceof StyleCollection
                    ? appearance.setTransformer((_) => _(classes)).css
                    : appearance(classes);
            }
        }
        throw new Error(`[${val}] not found in theme.field.appearance`);
    }, STYLE_PRIORITY)
], LyField.prototype, "appearance", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyField, decorators: [{
            type: Component,
            args: [{ selector: 'ly-field', exportAs: 'lyFormField', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        StyleRenderer,
                    ], standalone: false, template: "<div #_container\n  [className]=\"classes.container\"\n  (click)=\"_control && _control.onContainerClick && _control.onContainerClick($event)\">\n  <fieldset\n    *ngIf=\"appearance === 'outlined'\"\n    [className]=\"classes.fieldset\"><legend [className]=\"classes.fieldsetSpan\"></legend></fieldset>\n  <div [className]=\"classes.prefix\" *ngIf=\"_prefixChildren.length\" #_prefixContainer>\n    <ng-content select=\"[lyPrefix]\"></ng-content>\n  </div>\n  <div [className]=\"classes.infix\">\n    <ng-container\n      *ngIf=\"displayWithStatus\"\n    >\n      <ng-content select=\"ly-display-with\"></ng-content>\n    </ng-container>\n    <ng-content></ng-content>\n    <span [className]=\"classes.label\" *ngIf=\"_isLabel()\" #_labelContainer2>\n      <span #_labelSpan [className]=\"classes.labelSpan\"\n        (cdkObserveContent)=\"_updateFielsetSpan()\"\n        [cdkObserveContentDisabled]=\"appearance != 'outlined'\"\n      >\n        <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n      </span>\n    </span>\n    <div [className]=\"classes.placeholder\"\n      *ngIf=\"_isPlaceholder() && _control?.empty && (_control?.floatingLabel || floatingLabel)\"\n    >\n      <ng-container *ngTemplateOutlet=\"_placeholderTemplate\"></ng-container>\n    </div>\n  </div>\n  <div [className]=\"classes.suffix\" *ngIf=\"_suffixChildren.length\" #_suffixContainer>\n    <ng-content select=\"[lySuffix]\"></ng-content>\n  </div>\n</div>\n\n<div [className]=\"classes.hintContainer\">\n  <div *ngIf=\"(_hintChildren.length || _errorChildren.length) && (persistentHint || _control?.errorState || _control?.focused)\">\n    <ng-container *ngIf=\"_control?.errorState\">\n      <ng-content select=\"ly-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"ly-hint\"></ng-content>\n  </div>\n</div>\n\n<ng-template #_labelTemplate>\n  <ng-content select=\"ly-label\"></ng-content>\n  <ng-container *ngIf=\"!_labelChild\">\n    <ng-template *ngTemplateOutlet=\"_placeholderTemplate\"></ng-template>\n  </ng-container>\n  <span\n    [className]=\"classes.fieldRequiredMarker\"\n    aria-hidden=\"true\"\n    *ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\">&#32;*</span>\n</ng-template>\n\n<ng-template #_placeholderTemplate>\n  <ng-content select=\"ly-placeholder\"></ng-content>\n  <span *ngIf=\"_control?.placeholder\">{{ _control.placeholder }}</span>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LyTheme2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.StyleRenderer }, { type: i2.Platform }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [LY_FIELD_DEFAULT_OPTIONS]
                }] }], propDecorators: { _container: [{
                type: ViewChild,
                args: ['_container', { static: true }]
            }], _labelContainer: [{
                type: ViewChild,
                args: ['_labelContainer']
            }], _labelContainer2: [{
                type: ViewChild,
                args: ['_labelContainer2']
            }], _labelSpan: [{
                type: ViewChild,
                args: ['_labelSpan']
            }], _prefixContainer: [{
                type: ViewChild,
                args: ['_prefixContainer']
            }], _suffixContainer: [{
                type: ViewChild,
                args: ['_suffixContainer']
            }], _controlNonStatic: [{
                type: ContentChild,
                args: [LyFieldControlBase]
            }], _controlStatic: [{
                type: ContentChild,
                args: [LyFieldControlBase, { static: true }]
            }], _placeholderChild: [{
                type: ContentChild,
                args: [LyPlaceholder]
            }], _labelChild: [{
                type: ContentChild,
                args: [LyLabel]
            }], _displayWithChild: [{
                type: ContentChild,
                args: [LyDisplayWith]
            }], _hintChildren: [{
                type: ContentChildren,
                args: [LyHint]
            }], _prefixChildren: [{
                type: ContentChildren,
                args: [LyPrefix]
            }], _suffixChildren: [{
                type: ContentChildren,
                args: [LySuffix]
            }], _errorChildren: [{
                type: ContentChildren,
                args: [LyError]
            }], hideRequiredMarker: [{
                type: Input
            }], persistentHint: [{
                type: Input
            }], floatingLabelSize: [{
                type: Input
            }], fullWidth: [{
                type: Input
            }], floatingLabel: [{
                type: Input
            }], color: [{
                type: Input
            }], appearance: [{
                type: Input
            }], onFocus: [{
                type: HostListener,
                args: ['focus']
            }] } });
class LyNativeControl {
    _onInput() {
        this.stateChanges.next();
    }
    _onBlur() {
        if (this._focused !== false) {
            this._focused = false;
            this.stateChanges.next();
        }
    }
    _onFocus() {
        if (this._focused !== true) {
            this._focused = true;
            this.stateChanges.next();
        }
    }
    /** @ignore */
    set value(val) {
        if (val !== this.value) {
            this._getHostElement().value = val;
            this.stateChanges.next();
        }
    }
    get value() {
        return this._getHostElement().value;
    }
    /** Whether the input is disabled. */
    set disabled(val) {
        if (val !== this._disabled) {
            this._disabled = coerceBooleanProperty(val);
            if (this._field) {
                if (!val && this._hasDisabledClass) {
                    this._renderer.removeClass(this._field._getHostElement(), this._field.classes.disabled);
                    if (this._cursorClass) {
                        this._renderer.addClass(this._field._getHostElement(), this._cursorClass);
                    }
                    this._hasDisabledClass = undefined;
                }
                else if (val) {
                    this._renderer.addClass(this._field._getHostElement(), this._field.classes.disabled);
                    if (this._cursorClass) {
                        this._renderer.removeClass(this._field._getHostElement(), this._cursorClass);
                    }
                    this._hasDisabledClass = true;
                }
            }
        }
    }
    get disabled() {
        if (this.ngControl && this.ngControl.disabled !== null) {
            return this.ngControl.disabled;
        }
        return this._disabled;
    }
    set required(value) {
        this._required = coerceBooleanProperty(value);
    }
    get required() { return this._required; }
    set placeholder(val) {
        this._placeholder = val;
    }
    get placeholder() { return this._placeholder; }
    get focused() {
        return this._focused;
    }
    get empty() {
        const val = this._el.nativeElement.value;
        return (!val &&
            !this.autofilled);
    }
    get floatingLabel() {
        return this.focused || !this.empty || (this._isSelectInput ? this._hasLabelSelectionOption() : false);
    }
    constructor(_theme, sRenderer, _el, _renderer, _field, 
    /** @docs-private */
    ngControl, _parentForm, _parentFormGroup, _autofillMonitor, _platform) {
        this._theme = _theme;
        this.sRenderer = sRenderer;
        this._el = _el;
        this._renderer = _renderer;
        this._field = _field;
        this.ngControl = ngControl;
        this._parentForm = _parentForm;
        this._parentFormGroup = _parentFormGroup;
        this._autofillMonitor = _autofillMonitor;
        this._platform = _platform;
        this._disabled = false;
        this._required = false;
        this.stateChanges = new Subject();
        this._form = this._parentForm || this._parentFormGroup;
        this._focused = false;
        this.errorState = false;
        this.autofilled = false;
    }
    ngOnInit() {
        this._renderer.setAttribute(this._getHostElement(), 'placeholder', '­');
        const { nativeElement } = this._el;
        if (nativeElement.nodeName.toLowerCase() === 'select') {
            this._isSelectInput = true;
        }
        // apply class {selectArrow} to `<select> not multiple`
        if (this._field && nativeElement.type === 'select-one') {
            this._renderer.addClass(this._field._getHostElement(), this._field.classes.selectArrow);
        }
        // apply style cursor only for input of type text
        if (nativeElement instanceof HTMLTextAreaElement ||
            inputText.some(type => type === nativeElement.type)) {
            this._cursorClass = this._theme.addSimpleStyle('lyField.text', {
                '& {infix}': {
                    cursor: 'text'
                }
            }, STYLE_PRIORITY, STYLES);
        }
        if (this._isSelectInput) {
            this._cursorClass = this._theme.addSimpleStyle('lyField.select', {
                '& {infix}': {
                    cursor: 'pointer'
                }
            }, STYLE_PRIORITY, STYLES);
        }
        if (this._cursorClass) {
            this._renderer.addClass(this._field._getHostElement(), this._cursorClass);
        }
        // apply default styles
        this._renderer.addClass(nativeElement, this._field.classes.inputNative);
        const ngControl = this.ngControl;
        // update styles on disabled
        if (ngControl && ngControl.statusChanges) {
            ngControl.statusChanges.subscribe(() => {
                this.disabled = !!ngControl.disabled;
            });
        }
    }
    ngDoCheck() {
        if (this._field._control) {
            const oldVal = this.errorState;
            const newVal = !!(this.ngControl && this.ngControl.invalid && (this.ngControl.touched || (this._form && this._form.submitted)));
            if (newVal !== oldVal) {
                this.errorState = newVal;
                if (this._field) {
                    const errorClass = this._field.classes.errorState;
                    if (newVal) {
                        this._renderer.addClass(this._field._getHostElement(), errorClass);
                        this._errorClass = errorClass;
                    }
                    else if (this._errorClass) {
                        this._renderer.removeClass(this._field._getHostElement(), errorClass);
                        this._errorClass = undefined;
                    }
                    this.stateChanges.next();
                }
            }
        }
    }
    ngAfterViewInit() {
        if (this._platform.isBrowser) {
            this._autofillMonitor.monitor(this._el.nativeElement).subscribe(event => {
                this.autofilled = event.isAutofilled;
                this.stateChanges.next();
            });
        }
    }
    ngOnDestroy() {
        this.stateChanges.complete();
        if (this._platform.isBrowser) {
            this._autofillMonitor.stopMonitoring(this._el.nativeElement);
        }
    }
    /** @docs-private */
    onContainerClick(_e) {
        this._getHostElement().focus();
    }
    /** Focuses the input. */
    focus() { this._getHostElement().focus(); }
    _getHostElement() {
        return this._el.nativeElement;
    }
    _hasLabelSelectionOption() {
        const el = this._getHostElement();
        const option = el.selectedOptions ? el.selectedOptions.item(0) : null;
        return option ? !!option.label : false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyNativeControl, deps: [{ token: i1.LyTheme2 }, { token: i1.StyleRenderer }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LyField, optional: true }, { token: i5.NgControl, optional: true, self: true }, { token: i5.NgForm, optional: true }, { token: i5.FormGroupDirective, optional: true }, { token: i6.AutofillMonitor }, { token: i2.Platform }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyNativeControl, isStandalone: false, selector: "input[lyInput], textarea[lyInput], input[lyNativeControl], textarea[lyNativeControl], select[lyNativeControl]", inputs: { value: "value", disabled: "disabled", required: "required", placeholder: "placeholder" }, host: { listeners: { "input": "_onInput()", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "disabled": "this.disabled", "required": "this.required" } }, providers: [
            StyleRenderer,
            { provide: LyFieldControlBase, useExisting: LyNativeControl }
        ], exportAs: ["LyNativeControl"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyNativeControl, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[lyInput], textarea[lyInput], input[lyNativeControl], textarea[lyNativeControl], select[lyNativeControl]',
                    exportAs: 'LyNativeControl',
                    providers: [
                        StyleRenderer,
                        { provide: LyFieldControlBase, useExisting: LyNativeControl }
                    ],
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i1.StyleRenderer }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: LyField, decorators: [{
                    type: Optional
                }] }, { type: i5.NgControl, decorators: [{
                    type: Optional
                }, {
                    type: Self
                }] }, { type: i5.NgForm, decorators: [{
                    type: Optional
                }] }, { type: i5.FormGroupDirective, decorators: [{
                    type: Optional
                }] }, { type: i6.AutofillMonitor }, { type: i2.Platform }], propDecorators: { _onInput: [{
                type: HostListener,
                args: ['input']
            }], _onBlur: [{
                type: HostListener,
                args: ['blur']
            }], _onFocus: [{
                type: HostListener,
                args: ['focus']
            }], value: [{
                type: Input
            }], disabled: [{
                type: HostBinding
            }, {
                type: Input
            }], required: [{
                type: HostBinding
            }, {
                type: Input
            }], placeholder: [{
                type: Input
            }] } });

class LyFieldModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyFieldModule, declarations: [LyField,
            LyPlaceholder,
            LyLabel,
            LyNativeControl,
            LyPrefix,
            LySuffix,
            LyHint,
            LyError,
            LyDisplayWith], imports: [CommonModule,
            LyCommonModule,
            ObserversModule,
            TextFieldModule], exports: [LyField,
            LyPlaceholder,
            LyLabel,
            LyNativeControl,
            LyPrefix,
            LySuffix,
            LyHint,
            LyError,
            LyDisplayWith,
            LyCommonModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyFieldModule, providers: [
            {
                provide: LY_FIELD_STYLES_TOKEN,
                useValue: STYLES
            }
        ], imports: [CommonModule,
            LyCommonModule,
            ObserversModule,
            TextFieldModule, LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyFieldModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        LyCommonModule,
                        ObserversModule,
                        TextFieldModule
                    ],
                    exports: [
                        LyField,
                        LyPlaceholder,
                        LyLabel,
                        LyNativeControl,
                        LyPrefix,
                        LySuffix,
                        LyHint,
                        LyError,
                        LyDisplayWith,
                        LyCommonModule
                    ],
                    providers: [
                        {
                            provide: LY_FIELD_STYLES_TOKEN,
                            useValue: STYLES
                        }
                    ],
                    declarations: [
                        LyField,
                        LyPlaceholder,
                        LyLabel,
                        LyNativeControl,
                        LyPrefix,
                        LySuffix,
                        LyHint,
                        LyError,
                        LyDisplayWith
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { LY_FIELD_DEFAULT_OPTIONS, LyDisplayWith, LyError, LyField, LyFieldControlBase, LyFieldModule, LyHint, LyLabel, LyNativeControl, LyPlaceholder, LyPrefix, LySuffix, STYLES, STYLE_SELECT_ARROW };
//# sourceMappingURL=alyle-ui-field.mjs.map