@alyle/ui
Version:
Minimal Design, a set of components for Angular
899 lines • 51.1 kB
JavaScript
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\"> *</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\"> *</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