ngx-numeric-range-form-field
Version:
Angular material numeric range form field
470 lines (460 loc) • 28.1 kB
JavaScript
import * as i3$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Self, SkipSelf, Input, Output, HostBinding, Host, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import * as i4 from '@angular/material/form-field';
import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
import * as i5 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ErrorStateMatcher } from '@angular/material/core';
const numericRangeValues = (group) => {
const max = group.get('maximum').value
? Number(group.get('maximum').value)
: null;
const min = group.get('minimum').value
? Number(group.get('minimum').value)
: null;
if (max !== null && min !== null) {
if (max < min) {
return { notValidRange: true };
}
}
return null;
};
class NumericRangeFormService {
constructor() {
this.form = new FormGroup({
minimum: new FormControl(null, { updateOn: 'blur' }),
maximum: new FormControl(null, { updateOn: 'blur' })
}, { validators: numericRangeValues });
}
get minimumControl() {
return this.form.get('minimum');
}
get maximumControl() {
return this.form.get('maximum');
}
get formGroup() {
return this.form;
}
setDynamicValidators(validators) {
if (!validators) {
return;
}
this.minimumControl.setErrors(null);
this.maximumControl.setErrors(null);
this.minimumControl.setValidators(validators); // sets the validators on child control
this.maximumControl.setValidators(validators); // sets the validators on child control
this.minimumControl.updateValueAndValidity({ emitEvent: false });
this.maximumControl.updateValueAndValidity({ emitEvent: false });
}
setSyncValidators(validator) {
if (!validator) {
return;
}
this.minimumControl.addValidators(validator); // sets the validators on child control
this.maximumControl.addValidators(validator); // sets the validators on child control
this.formGroup.updateValueAndValidity();
}
setAsyncValidators(asyncValidator) {
if (!asyncValidator) {
return;
}
this.minimumControl.addAsyncValidators(asyncValidator);
this.maximumControl.addAsyncValidators(asyncValidator);
this.formGroup.updateValueAndValidity();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormService, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class NumericRangeStateMatcher {
isErrorState(control, form) {
if (!control.parent && form instanceof FormGroup) {
const minimumControl = form.get('minimum');
const maximumControl = form.get('maximum');
const isFormInvalid = form.touched && form.invalid;
const areFormControlsInvalid = this.isControlTouchedInvalid(minimumControl) ||
this.isControlTouchedInvalid(maximumControl);
return isFormInvalid || areFormControlsInvalid;
}
return control.touched && control.invalid;
}
isControlTouchedInvalid(control) {
return control.touched && control.invalid;
}
}
class NumericRangeFormFieldControlComponent {
static { this.nextId = 0; }
get value() {
return this.formGroup.getRawValue();
}
set value(value) {
this.formGroup.patchValue(value);
this.stateChanges.next();
}
get placeholder() {
return this._placeholder;
}
set placeholder(value) {
this._placeholder = value;
this.stateChanges.next();
}
get shouldLabelFloat() {
return true;
}
get empty() {
return !this.value.minimum && !this.value.maximum;
}
get errorState() {
return this.numericRangeErrorMatcher.isErrorState(this.ngControl.control, this.formGroup);
}
get minimumControl() {
return this.formService.minimumControl;
}
get maximumControl() {
return this.formService.maximumControl;
}
constructor(ngControl, formService) {
this.ngControl = ngControl;
this.formService = formService;
this.readonly = false;
this.minReadonly = false;
this.maxReadonly = false;
this.blurred = new EventEmitter();
this.enterPressed = new EventEmitter();
this.numericRangeChanged = new EventEmitter();
this.userAriaDescribedBy = '';
this.id = `numeric-range-form-control-id-${NumericRangeFormFieldControlComponent.nextId++}`;
this.formGroup = this.formService.formGroup;
this.stateChanges = new Subject();
this.focused = false;
this.controlType = 'numeric-range-form-control';
this.numericRangeErrorMatcher = new NumericRangeStateMatcher();
this.unsubscribe$ = new Subject();
this.onTouched = () => { };
this.ngControl.valueAccessor = this;
}
ngOnChanges(changes) {
if (changes.dynamicSyncValidators) {
this.formService.setDynamicValidators(this.dynamicSyncValidators);
}
}
ngOnInit() {
this.formService.setSyncValidators(this.ngControl.control.validator);
this.formService.setAsyncValidators(this.ngControl.control.asyncValidator);
this.ngControl.control.setValidators([this.validate.bind(this)]);
this.ngControl.control.updateValueAndValidity({ emitEvent: false });
}
ngDoCheck() {
this.formGroup.markAllAsTouched();
}
ngOnDestroy() {
this.stateChanges.complete();
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
writeValue(value) {
value === null
? this.formGroup.reset()
: this.formGroup.setValue(value, { emitEvent: false });
}
registerOnChange(fn) {
this.formGroup.valueChanges
.pipe(takeUntil(this.unsubscribe$))
.subscribe(fn);
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
isDisabled ? this.formGroup.disable() : this.formGroup.enable();
this.stateChanges.next();
}
setDescribedByIds(ids) {
this.userAriaDescribedBy = ids.join(' ');
}
onContainerClick(event) { }
validate(control) {
return control.errors;
}
onEnterPressed() {
if (!this.formGroup.errors &&
!this.minimumControl.errors &&
!this.maximumControl.errors) {
this.enterPressed.emit();
}
}
onBlur() {
this.onTouched();
this.blurred.emit();
}
onRangeValuesChanged() {
this.formGroup.errors ||
this.minimumControl.errors ||
this.maximumControl.errors
? this.numericRangeChanged.emit(null)
: this.numericRangeChanged.emit(this.formGroup.getRawValue());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormFieldControlComponent, deps: [{ token: i1.NgControl, self: true }, { token: NumericRangeFormService, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericRangeFormFieldControlComponent, selector: "ngx-numeric-range-form-field-control", inputs: { value: "value", placeholder: "placeholder", minPlaceholder: "minPlaceholder", maxPlaceholder: "maxPlaceholder", readonly: "readonly", minReadonly: "minReadonly", maxReadonly: "maxReadonly", required: "required", disabled: "disabled", errorStateMatcher: "errorStateMatcher", autofilled: "autofilled", dynamicSyncValidators: "dynamicSyncValidators" }, outputs: { blurred: "blurred", enterPressed: "enterPressed", numericRangeChanged: "numericRangeChanged" }, host: { properties: { "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.userAriaDescribedBy", "id": "this.id" } }, providers: [
{
provide: MatFormFieldControl,
useExisting: NumericRangeFormFieldControlComponent
},
{
provide: ErrorStateMatcher,
useClass: NumericRangeStateMatcher
}
], usesOnChanges: true, ngImport: i0, template: "<input\n\t(blur)=\"onBlur()\"\n\t(change)=\"onRangeValuesChanged()\"\n\t(keyup.enter)=\"onEnterPressed()\"\n\t[readonly]=\"readonly || minReadonly\"\n\t[formControl]=\"minimumControl\"\n\tmatInput\n\t[placeholder]=\"minPlaceholder\"\n\ttype=\"number\"\n/>\n<span class=\"spacer\">–</span>\n<input\n\t(blur)=\"onBlur()\"\n\t(change)=\"onRangeValuesChanged()\"\n\t(keyup.enter)=\"onEnterPressed()\"\n\t[formControl]=\"maximumControl\"\n\t[readonly]=\"readonly || maxReadonly\"\n\tmatInput\n\t[placeholder]=\"maxPlaceholder\"\n\ttype=\"number\"\n/>\n", styles: [":host{display:flex;align-items:center}:host .spacer{padding:0 10px 0 0;cursor:context-menu}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input:read-only{color:#00000080;cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormFieldControlComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-numeric-range-form-field-control', providers: [
{
provide: MatFormFieldControl,
useExisting: NumericRangeFormFieldControlComponent
},
{
provide: ErrorStateMatcher,
useClass: NumericRangeStateMatcher
}
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n\t(blur)=\"onBlur()\"\n\t(change)=\"onRangeValuesChanged()\"\n\t(keyup.enter)=\"onEnterPressed()\"\n\t[readonly]=\"readonly || minReadonly\"\n\t[formControl]=\"minimumControl\"\n\tmatInput\n\t[placeholder]=\"minPlaceholder\"\n\ttype=\"number\"\n/>\n<span class=\"spacer\">–</span>\n<input\n\t(blur)=\"onBlur()\"\n\t(change)=\"onRangeValuesChanged()\"\n\t(keyup.enter)=\"onEnterPressed()\"\n\t[formControl]=\"maximumControl\"\n\t[readonly]=\"readonly || maxReadonly\"\n\tmatInput\n\t[placeholder]=\"maxPlaceholder\"\n\ttype=\"number\"\n/>\n", styles: [":host{display:flex;align-items:center}:host .spacer{padding:0 10px 0 0;cursor:context-menu}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input:read-only{color:#00000080;cursor:initial}\n"] }]
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
type: Self
}] }, { type: NumericRangeFormService, decorators: [{
type: SkipSelf
}] }], propDecorators: { value: [{
type: Input
}], placeholder: [{
type: Input
}], minPlaceholder: [{
type: Input
}], maxPlaceholder: [{
type: Input
}], readonly: [{
type: Input
}], minReadonly: [{
type: Input
}], maxReadonly: [{
type: Input
}], required: [{
type: Input
}], disabled: [{
type: Input
}], errorStateMatcher: [{
type: Input
}], autofilled: [{
type: Input
}], dynamicSyncValidators: [{
type: Input
}], blurred: [{
type: Output
}], enterPressed: [{
type: Output
}], numericRangeChanged: [{
type: Output
}], shouldLabelFloat: [{
type: HostBinding,
args: ['class.floated']
}], userAriaDescribedBy: [{
type: HostBinding,
args: ['attr.aria-describedby']
}], id: [{
type: HostBinding
}] } });
class NumericRangeFormFieldContainerComponent {
get minimumControl() {
return this.formService.minimumControl;
}
get maximumControl() {
return this.formService.maximumControl;
}
constructor(controlDirective, formService, changeDetectorRef) {
this.controlDirective = controlDirective;
this.formService = formService;
this.changeDetectorRef = changeDetectorRef;
this.appearance = 'outline';
this.floatLabel = 'always';
this.minPlaceholder = 'From';
this.maxPlaceholder = 'To';
this.readonly = false;
this.minReadonly = false;
this.maxReadonly = false;
this.resettable = true;
this.requiredErrorMessage = 'Field is required!';
this.minimumErrorMessage = 'Minimum has been reached!';
this.maximumErrorMessage = 'Maximum has exceeded!';
this.invalidRangeErrorMessage = 'Inserted range is not valid!';
this.blurred = new EventEmitter();
this.enterPressed = new EventEmitter();
this.numericRangeChanged = new EventEmitter();
this.formGroup = this.formService.formGroup;
this.control = new FormControl();
this.unsubscribe$ = new Subject();
this.onTouched = () => { };
this.controlDirective.valueAccessor = this;
}
ngOnChanges(changes) {
if (changes.dynamicSyncValidators) {
this.control.setErrors(null);
this.control.setValidators(this.dynamicSyncValidators);
this.control.updateValueAndValidity({ emitEvent: false });
}
}
ngOnInit() {
this.setSyncValidator(this.controlDirective.control.validator);
this.setAsyncValidator(this.controlDirective.control.asyncValidator);
this.controlDirective.control.setValidators([this.validate.bind(this)]); // overrides the parent control validators by sending out errors from validate()
this.controlDirective.control.updateValueAndValidity({ emitEvent: false });
this.changeDetectorRef.detectChanges();
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
writeValue(value) {
value === null
? this.control.reset()
: this.control.setValue(value, {
emitEvent: false
});
}
registerOnChange(fn) {
this.control.valueChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(fn);
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
isDisabled ? this.control.disable() : this.control.enable();
}
validate(control) {
const errors = {
...this.minimumControl.errors,
...this.maximumControl.errors
};
return Object.keys(errors).length ? errors : null;
}
onEnterPressed() {
this.enterPressed.emit();
}
onBlur() {
this.onTouched();
this.blurred.emit();
}
onRangeValuesChanged(value) {
this.numericRangeChanged.emit(value);
}
onReset() {
this.formGroup.reset();
}
setSyncValidator(validator) {
if (!validator) {
return;
}
this.control.addValidators(validator); // sets the validators from parent control
this.control.updateValueAndValidity();
}
setAsyncValidator(asyncValidator) {
if (!asyncValidator) {
return;
}
this.control.addAsyncValidators(asyncValidator);
this.control.updateValueAndValidity();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormFieldContainerComponent, deps: [{ token: i1.NgControl, self: true }, { token: NumericRangeFormService, host: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericRangeFormFieldContainerComponent, selector: "ngx-numeric-range-form-field", inputs: { label: "label", appearance: "appearance", floatLabel: "floatLabel", minPlaceholder: "minPlaceholder", maxPlaceholder: "maxPlaceholder", readonly: "readonly", minReadonly: "minReadonly", maxReadonly: "maxReadonly", resettable: "resettable", required: "required", requiredErrorMessage: "requiredErrorMessage", minimumErrorMessage: "minimumErrorMessage", maximumErrorMessage: "maximumErrorMessage", invalidRangeErrorMessage: "invalidRangeErrorMessage", dynamicSyncValidators: "dynamicSyncValidators" }, outputs: { blurred: "blurred", enterPressed: "enterPressed", numericRangeChanged: "numericRangeChanged" }, providers: [NumericRangeFormService], usesOnChanges: true, ngImport: i0, template: "<mat-form-field\n\t[appearance]=\"appearance\"\n\t[floatLabel]=\"floatLabel\"\n\tclass=\"numeric-range-field\"\n>\n\t<mat-label>{{ label }}</mat-label>\n\t<ngx-numeric-range-form-field-control\n\t\tid=\"numeric-range-form-control\"\n\t\t[formControl]=\"control\"\n\t\t[minPlaceholder]=\"minPlaceholder\"\n\t\t[maxPlaceholder]=\"maxPlaceholder\"\n\t\t[readonly]=\"readonly\"\n\t\t[minReadonly]=\"minReadonly\"\n\t\t[maxReadonly]=\"maxReadonly\"\n\t\t[required]=\"required\"\n\t\t(blurred)=\"onBlur()\"\n\t\t(enterPressed)=\"onEnterPressed()\"\n\t\t(numericRangeChanged)=\"onRangeValuesChanged($event)\"\n\t\t[dynamicSyncValidators]=\"dynamicSyncValidators\"\n\t></ngx-numeric-range-form-field-control>\n\n\t<mat-icon\n\t\t(click)=\"onReset()\"\n\t\t*ngIf=\"\n\t\t\tresettable &&\n\t\t\t!readonly &&\n\t\t\t!minReadonly &&\n\t\t\t!maxReadonly &&\n\t\t\t(minimumControl.value !== null || maximumControl.value !== null) &&\n\t\t\t!formGroup.disabled\n\t\t\"\n\t\tcolor=\"primary\"\n\t\tclass=\"pointer\"\n\t\tmatSuffix\n\t\t>close\n\t</mat-icon>\n\n\t<mat-error\n\t\t*ngIf=\"\n\t\t\tminimumControl.hasError('required') || maximumControl.hasError('required')\n\t\t\"\n\t>\n\t\t{{ requiredErrorMessage }}\n\t</mat-error>\n\n\t<mat-error\n\t\t*ngIf=\"minimumControl.hasError('min') || maximumControl.hasError('min')\"\n\t>\n\t\t{{ minimumErrorMessage }}\n\t</mat-error>\n\n\t<mat-error\n\t\t*ngIf=\"minimumControl.hasError('max') || maximumControl.hasError('max')\"\n\t>\n\t\t{{ maximumErrorMessage }}\n\t</mat-error>\n\n\t<mat-error\n\t\t*ngIf=\"\n\t\t\tformGroup.hasError('notValidRange') &&\n\t\t\t!minimumControl.errors &&\n\t\t\t!maximumControl.errors\n\t\t\"\n\t>\n\t\t{{ invalidRangeErrorMessage }}\n\t</mat-error>\n</mat-form-field>\n", styles: [":host .numeric-range-field{width:100%}:host mat-icon{cursor:context-menu}:host .pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NumericRangeFormFieldControlComponent, selector: "ngx-numeric-range-form-field-control", inputs: ["value", "placeholder", "minPlaceholder", "maxPlaceholder", "readonly", "minReadonly", "maxReadonly", "required", "disabled", "errorStateMatcher", "autofilled", "dynamicSyncValidators"], outputs: ["blurred", "enterPressed", "numericRangeChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericRangeFormFieldContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-numeric-range-form-field', changeDetection: ChangeDetectionStrategy.OnPush, providers: [NumericRangeFormService], template: "<mat-form-field\n\t[appearance]=\"appearance\"\n\t[floatLabel]=\"floatLabel\"\n\tclass=\"numeric-range-field\"\n>\n\t<mat-label>{{ label }}</mat-label>\n\t<ngx-numeric-range-form-field-control\n\t\tid=\"numeric-range-form-control\"\n\t\t[formControl]=\"control\"\n\t\t[minPlaceholder]=\"minPlaceholder\"\n\t\t[maxPlaceholder]=\"maxPlaceholder\"\n\t\t[readonly]=\"readonly\"\n\t\t[minReadonly]=\"minReadonly\"\n\t\t[maxReadonly]=\"maxReadonly\"\n\t\t[required]=\"required\"\n\t\t(blurred)=\"onBlur()\"\n\t\t(enterPressed)=\"onEnterPressed()\"\n\t\t(numericRangeChanged)=\"onRangeValuesChanged($event)\"\n\t\t[dynamicSyncValidators]=\"dynamicSyncValidators\"\n\t></ngx-numeric-range-form-field-control>\n\n\t<mat-icon\n\t\t(click)=\"onReset()\"\n\t\t*ngIf=\"\n\t\t\tresettable &&\n\t\t\t!readonly &&\n\t\t\t!minReadonly &&\n\t\t\t!maxReadonly &&\n\t\t\t(minimumControl.value !== null || maximumControl.value !== null) &&\n\t\t\t!formGroup.disabled\n\t\t\"\n\t\tcolor=\"primary\"\n\t\tclass=\"pointer\"\n\t\tmatSuffix\n\t\t>close\n\t</mat-icon>\n\n\t<mat-error\n\t\t*ngIf=\"\n\t\t\tminimumControl.hasError('required') || maximumControl.hasError('required')\n\t\t\"\n\t>\n\t\t{{ requiredErrorMessage }}\n\t</mat-error>\n\n\t<mat-error\n\t\t*ngIf=\"minimumControl.hasError('min') || maximumControl.hasError('min')\"\n\t>\n\t\t{{ minimumErrorMessage }}\n\t</mat-error>\n\n\t<mat-error\n\t\t*ngIf=\"minimumControl.hasError('max') || maximumControl.hasError('max')\"\n\t>\n\t\t{{ maximumErrorMessage }}\n\t</mat-error>\n\n\t<mat-error\n\t\t*ngIf=\"\n\t\t\tformGroup.hasError('notValidRange') &&\n\t\t\t!minimumControl.errors &&\n\t\t\t!maximumControl.errors\n\t\t\"\n\t>\n\t\t{{ invalidRangeErrorMessage }}\n\t</mat-error>\n</mat-form-field>\n", styles: [":host .numeric-range-field{width:100%}:host mat-icon{cursor:context-menu}:host .pointer{cursor:pointer}\n"] }]
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
type: Self
}] }, { type: NumericRangeFormService, decorators: [{
type: Host
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
type: Input
}], appearance: [{
type: Input
}], floatLabel: [{
type: Input
}], minPlaceholder: [{
type: Input
}], maxPlaceholder: [{
type: Input
}], readonly: [{
type: Input
}], minReadonly: [{
type: Input
}], maxReadonly: [{
type: Input
}], resettable: [{
type: Input
}], required: [{
type: Input
}], requiredErrorMessage: [{
type: Input
}], minimumErrorMessage: [{
type: Input
}], maximumErrorMessage: [{
type: Input
}], invalidRangeErrorMessage: [{
type: Input
}], dynamicSyncValidators: [{
type: Input
}], blurred: [{
type: Output
}], enterPressed: [{
type: Output
}], numericRangeChanged: [{
type: Output
}] } });
class NgxNumericRangeFormFieldModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, declarations: [NumericRangeFormFieldContainerComponent,
NumericRangeFormFieldControlComponent], imports: [CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule], exports: [NumericRangeFormFieldContainerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, imports: [CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NumericRangeFormFieldContainerComponent,
NumericRangeFormFieldControlComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule
],
exports: [NumericRangeFormFieldContainerComponent]
}]
}] });
/*
* Public API Surface of ngx-numeric-range-form-field
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxNumericRangeFormFieldModule, NumericRangeFormFieldContainerComponent };
//# sourceMappingURL=ngx-numeric-range-form-field.mjs.map