@angular-material-extensions/input-counter/fesm2020/angular-material-extensions-input-counter.mjs

Modern number input component built with angular and material design

import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, Output, NgModule } from '@angular/core';
import * as i6 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i5 from '@angular/flex-layout';
import { FlexModule } from '@angular/flex-layout';

class InputCounterComponent {
    constructor() {
        this.step = 1;
        this.appearance = 'standard';
        this.label = 'Number';
        this.change = new EventEmitter();
        this.propagateChange = (_) => {
        };
    }
    get value() {
        return this._value;
    }
    set value(val) {
        this._value = val;
        this.propagateChange(this._value);
        this.change.emit(this._value);
    }
    ngOnInit() {
    }
    increment() {
        if (!this.value) {
            this.value = 0;
        }
        this.value += this.step;
    }
    decrement() {
        if (!this.value) {
            this.value = 0;
        }
        this.value -= this.step;
    }
    writeValue(obj) {
        if (obj) {
            this.value = obj;
        }
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
    }
    setDisabledState(isDisabled) {
    }
}
InputCounterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InputCounterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: InputCounterComponent, selector: "mat-input-counter", inputs: { _value: "_value", max: "max", min: "min", step: "step", appearance: "appearance", placeholder: "placeholder", label: "label" }, outputs: { change: "change" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputCounterComponent),
            multi: true
        }
    ], ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutGap=\"5px\" fxLayoutAlign=\"center center\">\n  <button mat-mini-fab (click)=\"decrement()\" [disabled]=\"value - step < min\">\n    <mat-icon>remove</mat-icon>\n  </button>\n  <mat-form-field [appearance]=\"appearance\">\n    <mat-label>\n      {{label}}\n    </mat-label>\n    <input #input matInput [placeholder]=\"placeholder\" type=\"number\" [(ngModel)]=\"value\">\n  </mat-form-field>\n  <button mat-mini-fab (click)=\"increment()\" [disabled]=\"value + step > max\">\n    <mat-icon>add</mat-icon>\n  </button>\n</div>\n", styles: ["input{text-align:center}\n"], dependencies: [{ kind: "component", type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: InputCounterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mat-input-counter', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => InputCounterComponent),
                            multi: true
                        }
                    ], template: "<div fxLayout=\"row\" fxLayoutGap=\"5px\" fxLayoutAlign=\"center center\">\n  <button mat-mini-fab (click)=\"decrement()\" [disabled]=\"value - step < min\">\n    <mat-icon>remove</mat-icon>\n  </button>\n  <mat-form-field [appearance]=\"appearance\">\n    <mat-label>\n      {{label}}\n    </mat-label>\n    <input #input matInput [placeholder]=\"placeholder\" type=\"number\" [(ngModel)]=\"value\">\n  </mat-form-field>\n  <button mat-mini-fab (click)=\"increment()\" [disabled]=\"value + step > max\">\n    <mat-icon>add</mat-icon>\n  </button>\n</div>\n", styles: ["input{text-align:center}\n"] }]
        }], propDecorators: { _value: [{
                type: Input
            }], max: [{
                type: Input
            }], min: [{
                type: Input
            }], step: [{
                type: Input
            }], appearance: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], label: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

class MatInputCounterModule {
}
MatInputCounterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: MatInputCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MatInputCounterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.5", ngImport: i0, type: MatInputCounterModule, declarations: [InputCounterComponent], imports: [MatButtonModule,
        MatIconModule,
        MatInputModule,
        FlexModule,
        FormsModule], exports: [InputCounterComponent] });
MatInputCounterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: MatInputCounterModule, imports: [MatButtonModule,
        MatIconModule,
        MatInputModule,
        FlexModule,
        FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: MatInputCounterModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [InputCounterComponent],
                    imports: [
                        MatButtonModule,
                        MatIconModule,
                        MatInputModule,
                        FlexModule,
                        FormsModule
                    ],
                    exports: [InputCounterComponent]
                }]
        }] });

/*
 * Public API Surface of input-counter
 */

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

export { InputCounterComponent, MatInputCounterModule };
//# sourceMappingURL=angular-material-extensions-input-counter.mjs.map