ngx-custom-numeric-range-form-field
Version:
Angular material numeric range form field
475 lines (465 loc) • 29.6 kB
JavaScript
import * as i6 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 i3$1 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 = (minimumControlName = 'minimum', maximumControlName = 'maximum') => (group) => {
const max = group.get(maximumControlName).value
? Number(group.get(maximumControlName).value)
: null;
const min = group.get(minimumControlName).value
? Number(group.get(minimumControlName).value)
: null;
if (max !== null && min !== null) {
if (max < min) {
return { notValidRange: true };
}
}
return null;
};
class NumericRangeFormService {
constructor() {
this.minimumControlName = 'minimum';
this.maximumControlName = 'maximum';
this.form = new FormGroup({});
}
get minimumControl() {
return this.form.get(this.minimumControlName);
}
get maximumControl() {
return this.form.get(this.maximumControlName);
}
get formGroup() {
return this.form;
}
init(minimumControlName = 'minimum', maximumControlName = 'maximum', updateOn = 'change') {
this.minimumControlName = minimumControlName;
this.maximumControlName = maximumControlName;
this.form.addControl(this.minimumControlName, new FormControl(null, { updateOn }));
this.form.addControl(this.maximumControlName, new FormControl(null, { updateOn }));
this.form.setValidators(numericRangeValues(this.minimumControlName, this.maximumControlName));
return this.form;
}
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();
}
}
NumericRangeFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumericRangeFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NumericRangeFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumericRangeFormService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumericRangeFormService, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
class NumericRangeStateMatcher {
isErrorState(control, form, minimumControlName = 'minimum', maximumControlName = 'maximum') {
if (!control.parent && form instanceof FormGroup) {
const minimumControl = form.get(minimumControlName);
const maximumControl = form.get(maximumControlName);
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 {
constructor(ngControl, formService) {
this.ngControl = ngControl;
this.formService = formService;
this.readonly = false;
this.minReadonly = false;
this.maxReadonly = false;
this.minimumControlName = 'minimum';
this.maximumControlName = 'maximum';
this.updateOn = 'change';
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;
}
get value() {
return this.formGroup.value;
}
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[this.minimumControlName] && !this.value[this.maximumControlName];
}
get errorState() {
return this.numericRangeErrorMatcher.isErrorState(this.ngControl.control, this.formGroup, this.minimumControlName, this.maximumControlName);
}
get minimumControl() {
return this.formService.minimumControl;
}
get maximumControl() {
return this.formService.maximumControl;
}
ngOnInit() {
this.formService.init(this.minimumControlName, this.maximumControlName, this.updateOn);
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.value);
}
}
NumericRangeFormFieldControlComponent.nextId = 0;
NumericRangeFormFieldControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumericRangeFormFieldControlComponent, deps: [{ token: i1.NgControl, self: true }, { token: NumericRangeFormService, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
NumericRangeFormFieldControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.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", minimumControlName: "minimumControlName", maximumControlName: "maximumControlName", updateOn: "updateOn" }, 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
}
], ngImport: i0, template: "<input\r\n\t(blur)=\"onBlur()\"\r\n\t(input)=\"onRangeValuesChanged()\"\r\n\t(keyup.enter)=\"onEnterPressed()\"\r\n\t[readonly]=\"readonly || minReadonly\"\r\n\t[formControl]=\"minimumControl\"\r\n\tmatInput\r\n\t[placeholder]=\"minPlaceholder\"\r\n\ttype=\"number\"\r\n/>\r\n<span class=\"spacer\">–</span>\r\n<input\r\n\t(blur)=\"onBlur()\"\r\n\t(input)=\"onRangeValuesChanged()\"\r\n\t(keyup.enter)=\"onEnterPressed()\"\r\n\t[formControl]=\"maximumControl\"\r\n\t[readonly]=\"readonly || maxReadonly\"\r\n\tmatInput\r\n\t[placeholder]=\"maxPlaceholder\"\r\n\ttype=\"number\"\r\n/>\r\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"], directives: [{ 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"] }, { type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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\r\n\t(blur)=\"onBlur()\"\r\n\t(input)=\"onRangeValuesChanged()\"\r\n\t(keyup.enter)=\"onEnterPressed()\"\r\n\t[readonly]=\"readonly || minReadonly\"\r\n\t[formControl]=\"minimumControl\"\r\n\tmatInput\r\n\t[placeholder]=\"minPlaceholder\"\r\n\ttype=\"number\"\r\n/>\r\n<span class=\"spacer\">–</span>\r\n<input\r\n\t(blur)=\"onBlur()\"\r\n\t(input)=\"onRangeValuesChanged()\"\r\n\t(keyup.enter)=\"onEnterPressed()\"\r\n\t[formControl]=\"maximumControl\"\r\n\t[readonly]=\"readonly || maxReadonly\"\r\n\tmatInput\r\n\t[placeholder]=\"maxPlaceholder\"\r\n\ttype=\"number\"\r\n/>\r\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: function () { return [{ 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
}], minimumControlName: [{
type: Input
}], maximumControlName: [{
type: Input
}], updateOn: [{
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 {
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.minimumControlName = 'minimum';
this.maximumControlName = 'maximum';
this.updateOn = 'change';
this.controlStyle = '';
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;
}
get minimumControl() {
return this.formService.minimumControl;
}
get maximumControl() {
return this.formService.maximumControl;
}
ngOnInit() {
this.formService.init(this.minimumControlName, this.maximumControlName, this.updateOn);
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();
}
}
NumericRangeFormFieldContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumericRangeFormFieldContainerComponent, deps: [{ token: i1.NgControl, self: true }, { token: NumericRangeFormService, host: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NumericRangeFormFieldContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.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", minimumControlName: "minimumControlName", maximumControlName: "maximumControlName", updateOn: "updateOn", controlStyle: "controlStyle" }, outputs: { blurred: "blurred", enterPressed: "enterPressed", numericRangeChanged: "numericRangeChanged" }, providers: [NumericRangeFormService], ngImport: i0, template: "<mat-form-field\r\n\t[appearance]=\"appearance\"\r\n\t[floatLabel]=\"floatLabel\"\r\n\tclass=\"numeric-range-field\"\r\n>\r\n\t<mat-label>{{ label }}</mat-label>\r\n\t<ngx-numeric-range-form-field-control\r\n\t\tid=\"numeric-range-form-control\"\r\n\t\t[style]=\"controlStyle\"\r\n\t\t[formControl]=\"control\"\r\n\t\t[minPlaceholder]=\"minPlaceholder\"\r\n\t\t[maxPlaceholder]=\"maxPlaceholder\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[minReadonly]=\"minReadonly\"\r\n\t\t[maxReadonly]=\"maxReadonly\"\r\n\t\t[required]=\"required\"\r\n\t\t[minimumControlName]=\"minimumControlName\"\r\n\t\t[maximumControlName]=\"maximumControlName\"\r\n\t\t(blurred)=\"onBlur()\"\r\n\t\t(enterPressed)=\"onEnterPressed()\"\r\n\t\t(numericRangeChanged)=\"onRangeValuesChanged($event)\"\r\n\t></ngx-numeric-range-form-field-control>\r\n\r\n\t<mat-icon\r\n\t\t(click)=\"onReset()\"\r\n\t\t*ngIf=\"\r\n\t\t\tresettable &&\r\n\t\t\t!readonly &&\r\n\t\t\t!minReadonly &&\r\n\t\t\t!maxReadonly &&\r\n\t\t\t(minimumControl.value !== null || maximumControl.value !== null) &&\r\n\t\t\t!formGroup.disabled\r\n\t\t\"\r\n\t\tcolor=\"primary\"\r\n\t\tclass=\"pointer\"\r\n\t\tmatSuffix\r\n\t\t>close\r\n\t</mat-icon>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"\r\n\t\t\tminimumControl.hasError('required') || maximumControl.hasError('required')\r\n\t\t\"\r\n\t>\r\n\t\t{{ requiredErrorMessage }}\r\n\t</mat-error>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"minimumControl.hasError('min') || maximumControl.hasError('min')\"\r\n\t>\r\n\t\t{{ minimumErrorMessage }}\r\n\t</mat-error>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"minimumControl.hasError('max') || maximumControl.hasError('max')\"\r\n\t>\r\n\t\t{{ maximumErrorMessage }}\r\n\t</mat-error>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"\r\n\t\t\tformGroup.hasError('notValidRange') &&\r\n\t\t\t!minimumControl.errors &&\r\n\t\t\t!maximumControl.errors\r\n\t\t\"\r\n\t>\r\n\t\t{{ invalidRangeErrorMessage }}\r\n\t</mat-error>\r\n</mat-form-field>\r\n", styles: [":host .numeric-range-field{width:100%}:host mat-icon{cursor:context-menu}:host .pointer{cursor:pointer}\n"], components: [{ type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: NumericRangeFormFieldControlComponent, selector: "ngx-numeric-range-form-field-control", inputs: ["value", "placeholder", "minPlaceholder", "maxPlaceholder", "readonly", "minReadonly", "maxReadonly", "required", "disabled", "errorStateMatcher", "autofilled", "minimumControlName", "maximumControlName", "updateOn"], outputs: ["blurred", "enterPressed", "numericRangeChanged"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.MatLabel, selector: "mat-label" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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\r\n\t[appearance]=\"appearance\"\r\n\t[floatLabel]=\"floatLabel\"\r\n\tclass=\"numeric-range-field\"\r\n>\r\n\t<mat-label>{{ label }}</mat-label>\r\n\t<ngx-numeric-range-form-field-control\r\n\t\tid=\"numeric-range-form-control\"\r\n\t\t[style]=\"controlStyle\"\r\n\t\t[formControl]=\"control\"\r\n\t\t[minPlaceholder]=\"minPlaceholder\"\r\n\t\t[maxPlaceholder]=\"maxPlaceholder\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[minReadonly]=\"minReadonly\"\r\n\t\t[maxReadonly]=\"maxReadonly\"\r\n\t\t[required]=\"required\"\r\n\t\t[minimumControlName]=\"minimumControlName\"\r\n\t\t[maximumControlName]=\"maximumControlName\"\r\n\t\t(blurred)=\"onBlur()\"\r\n\t\t(enterPressed)=\"onEnterPressed()\"\r\n\t\t(numericRangeChanged)=\"onRangeValuesChanged($event)\"\r\n\t></ngx-numeric-range-form-field-control>\r\n\r\n\t<mat-icon\r\n\t\t(click)=\"onReset()\"\r\n\t\t*ngIf=\"\r\n\t\t\tresettable &&\r\n\t\t\t!readonly &&\r\n\t\t\t!minReadonly &&\r\n\t\t\t!maxReadonly &&\r\n\t\t\t(minimumControl.value !== null || maximumControl.value !== null) &&\r\n\t\t\t!formGroup.disabled\r\n\t\t\"\r\n\t\tcolor=\"primary\"\r\n\t\tclass=\"pointer\"\r\n\t\tmatSuffix\r\n\t\t>close\r\n\t</mat-icon>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"\r\n\t\t\tminimumControl.hasError('required') || maximumControl.hasError('required')\r\n\t\t\"\r\n\t>\r\n\t\t{{ requiredErrorMessage }}\r\n\t</mat-error>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"minimumControl.hasError('min') || maximumControl.hasError('min')\"\r\n\t>\r\n\t\t{{ minimumErrorMessage }}\r\n\t</mat-error>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"minimumControl.hasError('max') || maximumControl.hasError('max')\"\r\n\t>\r\n\t\t{{ maximumErrorMessage }}\r\n\t</mat-error>\r\n\r\n\t<mat-error\r\n\t\t*ngIf=\"\r\n\t\t\tformGroup.hasError('notValidRange') &&\r\n\t\t\t!minimumControl.errors &&\r\n\t\t\t!maximumControl.errors\r\n\t\t\"\r\n\t>\r\n\t\t{{ invalidRangeErrorMessage }}\r\n\t</mat-error>\r\n</mat-form-field>\r\n", styles: [":host .numeric-range-field{width:100%}:host mat-icon{cursor:context-menu}:host .pointer{cursor:pointer}\n"] }]
}], ctorParameters: function () { return [{ 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
}], minimumControlName: [{
type: Input
}], maximumControlName: [{
type: Input
}], updateOn: [{
type: Input
}], controlStyle: [{
type: Input
}], blurred: [{
type: Output
}], enterPressed: [{
type: Output
}], numericRangeChanged: [{
type: Output
}] } });
class NgxNumericRangeFormFieldModule {
}
NgxNumericRangeFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxNumericRangeFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, declarations: [NumericRangeFormFieldContainerComponent,
NumericRangeFormFieldControlComponent], imports: [CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule], exports: [NumericRangeFormFieldContainerComponent] });
NgxNumericRangeFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NgxNumericRangeFormFieldModule, imports: [[
CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.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-custom-numeric-range-form-field.mjs.map