stepper-control - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

bundles/stepper-control.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('stepper-control', ['exports', '@angular/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["stepper-control"] = {}, global.ng.core));
-})(this, (function (exports, i0) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/flex-layout/flex'), require('@angular/flex-layout')) :
+    typeof define === 'function' && define.amd ? define('stepper-control', ['exports', '@angular/core', '@angular/forms', '@angular/material/button', '@angular/material/icon', '@angular/flex-layout/flex', '@angular/flex-layout'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["stepper-control"] = {}, global.ng.core, global.ng.forms, global.ng.material.button, global.ng.material.icon, global.ng.flexLayout.flex, global.ng.flexLayout));
+})(this, (function (exports, i0, forms, i1, i2, i3, flexLayout) { 'use strict';
 
@@ -26,34 +26,108 @@ function _interopNamespace(e) {
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
 
-    var StepperControlService = /** @class */ (function () {
-        function StepperControlService() {
-        }
-        return StepperControlService;
-    }());
-    StepperControlService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    StepperControlService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
-            }], ctorParameters: function () { return []; } });
-
     var StepperControlComponent = /** @class */ (function () {
         function StepperControlComponent() {
+            this.min = 0;
+            this.max = 100;
+            this.padding = 0;
+            this.incrementBy = 1;
+            this.vertical = false;
+            this.disabled = false;
+            this.change = new i0.EventEmitter();
+            this.value = 0;
+            this.valueFormat = '';
+            this.onChange = function (value) { };
+            this.onTouch = function () { };
         }
+        Object.defineProperty(StepperControlComponent.prototype, "layout", {
+            get: function () {
+                return (this.vertical) ? 'column' : 'ro';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(StepperControlComponent.prototype, "isRow", {
+            get: function () {
+                return (!this.vertical) ? true : false;
+            },
+            enumerable: false,
+            configurable: true
+        });
         StepperControlComponent.prototype.ngOnInit = function () {
         };
+        StepperControlComponent.prototype.isString = function (value) {
+            return (typeof value === 'string' || value instanceof String);
+        };
+        StepperControlComponent.prototype.writeValue = function (value) {
+            this.value = isNaN(Number(value)) ? this.min : Number(value);
+            this.updateValue();
+        };
+        StepperControlComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        StepperControlComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouch = fn;
+        };
+        StepperControlComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        StepperControlComponent.prototype.onIncrease = function () {
+            this.value += this.incrementBy;
+            this.updateValue();
+        };
+        StepperControlComponent.prototype.onDecrease = function () {
+            this.value -= this.incrementBy;
+            this.updateValue();
+        };
+        StepperControlComponent.prototype.updateValue = function () {
+            if (this.value > this.max)
+                this.value = this.max;
+            if (this.value < this.min)
+                this.value = this.min;
+            this.valueFormat = this.value.toString().padStart(this.padding, '0');
+            this.onChange(this.valueFormat);
+            this.change.emit(this.valueFormat);
+        };
         return StepperControlComponent;
     }());
     StepperControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    StepperControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperControlComponent, selector: "lib-stepper-control", ngImport: i0__namespace, template: "\n    <p>\n      stepper-control works!\n    </p>\n  ", isInline: true });
+    StepperControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperControlComponent, selector: "wav-stepper-control", inputs: { min: "min", max: "max", padding: "padding", incrementBy: "incrementBy", vertical: "vertical", disabled: "disabled" }, outputs: { change: "change" }, providers: [
+            {
+                provide: forms.NG_VALUE_ACCESSOR,
+                useExisting: StepperControlComponent,
+                multi: true,
+            }
+        ], ngImport: i0__namespace, template: "<div style=\"width: 44px; text-align: center;\" [fxLayout]=\"layout\">\n\n  <div *ngIf=\"!isRow\">\n    <button mat-icon-button (click)=\"onIncrease()\" disabled=\"disabled\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n\n  <div>\n    <button mat-icon-button (click)=\"onDecrease()\" disabled=\"disabled\">\n      <mat-icon>horizontal_rule</mat-icon>\n    </button>\n  </div>\n\n  <div *ngIf=\"isRow\">\n    <button mat-icon-button (click)=\"onIncrease()\" disabled=\"disabled\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n\n</div>\n\n", styles: [""], components: [{ type: i1__namespace.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"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-stepper-control',
-                        template: "\n    <p>\n      stepper-control works!\n    </p>\n  ",
-                        styles: []
+                        selector: 'wav-stepper-control',
+                        templateUrl: './stepper.component.html',
+                        styleUrls: ['./stepper.component.scss'],
+                        providers: [
+                            {
+                                provide: forms.NG_VALUE_ACCESSOR,
+                                useExisting: StepperControlComponent,
+                                multi: true,
+                            }
+                        ]
                     }]
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return []; }, propDecorators: { min: [{
+                    type: i0.Input
+                }], max: [{
+                    type: i0.Input
+                }], padding: [{
+                    type: i0.Input
+                }], incrementBy: [{
+                    type: i0.Input
+                }], vertical: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], change: [{
+                    type: i0.Output
+                }] } });
 
@@ -66,4 +140,12 @@ var StepperControlModule = /** @class */ (function () {
     StepperControlModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    StepperControlModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlModule, declarations: [StepperControlComponent], exports: [StepperControlComponent] });
-    StepperControlModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlModule, imports: [[]] });
+    StepperControlModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlModule, declarations: [StepperControlComponent], imports: [i1.MatButtonModule,
+            i2.MatIconModule,
+            forms.ReactiveFormsModule,
+            flexLayout.FlexLayoutModule], exports: [StepperControlComponent] });
+    StepperControlModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlModule, imports: [[
+                i1.MatButtonModule,
+                i2.MatIconModule,
+                forms.ReactiveFormsModule,
+                flexLayout.FlexLayoutModule,
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: StepperControlModule, decorators: [{
@@ -73,5 +155,10 @@ type: i0.NgModule,
                         declarations: [
-                            StepperControlComponent
+                            StepperControlComponent,
                         ],
-                        imports: [],
+                        imports: [
+                            i1.MatButtonModule,
+                            i2.MatIconModule,
+                            forms.ReactiveFormsModule,
+                            flexLayout.FlexLayoutModule,
+                        ],
                         exports: [
@@ -93,3 +180,2 @@ StepperControlComponent
     exports.StepperControlModule = StepperControlModule;
-    exports.StepperControlService = StepperControlService;
 
@@ -96,0 +182,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

esm2015/lib/stepper-control.component.js

@@ -1,26 +0,100 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/flex-layout/flex";
 export class StepperControlComponent {
-    constructor() { }
+    constructor() {
+        this.min = 0;
+        this.max = 100;
+        this.padding = 0;
+        this.incrementBy = 1;
+        this.vertical = false;
+        this.disabled = false;
+        this.change = new EventEmitter();
+        this.value = 0;
+        this.valueFormat = '';
+        this.onChange = (value) => { };
+        this.onTouch = () => { };
+    }
+    get layout() {
+        return (this.vertical) ? 'column' : 'ro';
+    }
+    get isRow() {
+        return (!this.vertical) ? true : false;
+    }
     ngOnInit() {
     }
+    isString(value) {
+        return (typeof value === 'string' || value instanceof String);
+    }
+    writeValue(value) {
+        this.value = isNaN(Number(value)) ? this.min : Number(value);
+        this.updateValue();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onIncrease() {
+        this.value += this.incrementBy;
+        this.updateValue();
+    }
+    onDecrease() {
+        this.value -= this.incrementBy;
+        this.updateValue();
+    }
+    updateValue() {
+        if (this.value > this.max)
+            this.value = this.max;
+        if (this.value < this.min)
+            this.value = this.min;
+        this.valueFormat = this.value.toString().padStart(this.padding, '0');
+        this.onChange(this.valueFormat);
+        this.change.emit(this.valueFormat);
+    }
 }
 StepperControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepperControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperControlComponent, selector: "lib-stepper-control", ngImport: i0, template: `
-    <p>
-      stepper-control works!
-    </p>
-  `, isInline: true });
+StepperControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperControlComponent, selector: "wav-stepper-control", inputs: { min: "min", max: "max", padding: "padding", incrementBy: "incrementBy", vertical: "vertical", disabled: "disabled" }, outputs: { change: "change" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: StepperControlComponent,
+            multi: true,
+        }
+    ], ngImport: i0, template: "<div style=\"width: 44px; text-align: center;\" [fxLayout]=\"layout\">\n\n  <div *ngIf=\"!isRow\">\n    <button mat-icon-button (click)=\"onIncrease()\" disabled=\"disabled\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n\n  <div>\n    <button mat-icon-button (click)=\"onDecrease()\" disabled=\"disabled\">\n      <mat-icon>horizontal_rule</mat-icon>\n    </button>\n  </div>\n\n  <div *ngIf=\"isRow\">\n    <button mat-icon-button (click)=\"onIncrease()\" disabled=\"disabled\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n\n</div>\n\n", styles: [""], components: [{ 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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-stepper-control',
-                    template: `
-    <p>
-      stepper-control works!
-    </p>
-  `,
-                    styles: []
+                    selector: 'wav-stepper-control',
+                    templateUrl: './stepper.component.html',
+                    styleUrls: ['./stepper.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: StepperControlComponent,
+                            multi: true,
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci1jb250cm9sLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0ZXBwZXItY29udHJvbC9zcmMvbGliL3N0ZXBwZXItY29udHJvbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQzs7QUFZbEQsTUFBTSxPQUFPLHVCQUF1QjtJQUVsQyxnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQzs7cUhBTFUsdUJBQXVCO3lHQUF2Qix1QkFBdUIsMkRBUnhCOzs7O0dBSVQ7NEZBSVUsdUJBQXVCO2tCQVZuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFFBQVEsRUFBRTs7OztHQUlUO29CQUNELE1BQU0sRUFBRSxFQUNQO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLXN0ZXBwZXItY29udHJvbCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPHA+XG4gICAgICBzdGVwcGVyLWNvbnRyb2wgd29ya3MhXG4gICAgPC9wPlxuICBgLFxuICBzdHlsZXM6IFtcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTdGVwcGVyQ29udHJvbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG59XG4iXX0=
+        }], ctorParameters: function () { return []; }, propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], incrementBy: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci1jb250cm9sLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0ZXBwZXItY29udHJvbC9zcmMvbGliL3N0ZXBwZXItY29udHJvbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zdGVwcGVyLWNvbnRyb2wvc3JjL2xpYi9zdGVwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQWN6RSxNQUFNLE9BQU8sdUJBQXVCO0lBd0JsQztRQXRCUyxRQUFHLEdBQUcsQ0FBQyxDQUFBO1FBQ1AsUUFBRyxHQUFHLEdBQUcsQ0FBQTtRQUNULFlBQU8sR0FBRyxDQUFDLENBQUE7UUFDWCxnQkFBVyxHQUFHLENBQUMsQ0FBQTtRQUVmLGFBQVEsR0FBRyxLQUFLLENBQUE7UUFDaEIsYUFBUSxHQUFHLEtBQUssQ0FBQTtRQUVmLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFBO1FBRTdDLFVBQUssR0FBRyxDQUFDLENBQUE7UUFFVCxnQkFBVyxHQUFHLEVBQUUsQ0FBQTtRQWdCaEIsYUFBUSxHQUFHLENBQUMsS0FBYSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUE7UUFDaEMsWUFBTyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQTtJQVBGLENBQUM7SUFSakIsSUFBSSxNQUFNO1FBQ1IsT0FBTyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUE7SUFDMUMsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUE7SUFDeEMsQ0FBQztJQUlELFFBQVE7SUFFUixDQUFDO0lBS0QsUUFBUSxDQUFDLEtBQVU7UUFDakIsT0FBTyxDQUFDLE9BQU8sS0FBSyxLQUFLLFFBQVEsSUFBSSxLQUFLLFlBQVksTUFBTSxDQUFDLENBQUE7SUFDL0QsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFzQjtRQUMvQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQzVELElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUNwQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBMkI7UUFDMUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUE7SUFDcEIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQWM7UUFDOUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUE7SUFDbkIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CO1FBQ25DLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFBO0lBQzVCLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFBO1FBQzlCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUNwQixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQTtRQUM5QixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUE7SUFDcEIsQ0FBQztJQUVELFdBQVc7UUFFVCxJQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUc7WUFBRSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUE7UUFDL0MsSUFBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHO1lBQUUsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFBO1FBRS9DLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQTtRQUVwRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQTtRQUMvQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUE7SUFFcEMsQ0FBQzs7cUhBMUVVLHVCQUF1Qjt5R0FBdkIsdUJBQXVCLDZNQVJ2QjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsdUJBQXVCO1lBQ3BDLEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkNiSCxzakJBc0JBOzRGRFBhLHVCQUF1QjtrQkFabkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixXQUFXLEVBQUUsMEJBQTBCO29CQUN2QyxTQUFTLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztvQkFDdkMsU0FBUyxFQUFFO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcseUJBQXlCOzRCQUNwQyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjtpQkFDRjswRUFHVSxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YXYtc3RlcHBlci1jb250cm9sJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N0ZXBwZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdGVwcGVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IFN0ZXBwZXJDb250cm9sQ29tcG9uZW50LFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFN0ZXBwZXJDb250cm9sQ29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gIEBJbnB1dCgpIG1pbiA9IDBcbiAgQElucHV0KCkgbWF4ID0gMTAwXG4gIEBJbnB1dCgpIHBhZGRpbmcgPSAwXG4gIEBJbnB1dCgpIGluY3JlbWVudEJ5ID0gMVxuXG4gIEBJbnB1dCgpIHZlcnRpY2FsID0gZmFsc2VcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZVxuXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKVxuXG4gIHZhbHVlID0gMFxuXG4gIHZhbHVlRm9ybWF0ID0gJydcblxuICBnZXQgbGF5b3V0KCkgIHtcbiAgICByZXR1cm4gKHRoaXMudmVydGljYWwpID8gJ2NvbHVtbicgOiAncm8nXG4gIH1cblxuICBnZXQgaXNSb3coKSB7XG4gICAgcmV0dXJuICghdGhpcy52ZXJ0aWNhbCkgPyB0cnVlIDogZmFsc2VcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG5cbiAgfVxuXG4gIG9uQ2hhbmdlID0gKHZhbHVlOiBzdHJpbmcpID0+IHt9XG4gIG9uVG91Y2ggPSAoKSA9PiB7fVxuXG4gIGlzU3RyaW5nKHZhbHVlOiBhbnkpIHtcbiAgICByZXR1cm4gKHR5cGVvZiB2YWx1ZSA9PT0gJ3N0cmluZycgfHwgdmFsdWUgaW5zdGFuY2VvZiBTdHJpbmcpXG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBudW1iZXIgfCBzdHJpbmcpIHtcbiAgICB0aGlzLnZhbHVlID0gaXNOYU4oTnVtYmVyKHZhbHVlKSkgPyB0aGlzLm1pbiA6IE51bWJlcih2YWx1ZSlcbiAgICB0aGlzLnVwZGF0ZVZhbHVlKClcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuXG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCkge1xuICAgIHRoaXMub25Ub3VjaCA9IGZuXG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWRcbiAgfVxuXG4gIG9uSW5jcmVhc2UoKSB7XG4gICAgdGhpcy52YWx1ZSArPSB0aGlzLmluY3JlbWVudEJ5XG4gICAgdGhpcy51cGRhdGVWYWx1ZSgpXG4gIH1cblxuICBvbkRlY3JlYXNlKCkge1xuICAgIHRoaXMudmFsdWUgLT0gdGhpcy5pbmNyZW1lbnRCeVxuICAgIHRoaXMudXBkYXRlVmFsdWUoKVxuICB9XG5cbiAgdXBkYXRlVmFsdWUoKSB7XG5cbiAgICBpZih0aGlzLnZhbHVlID4gdGhpcy5tYXgpIHRoaXMudmFsdWUgPSB0aGlzLm1heFxuICAgIGlmKHRoaXMudmFsdWUgPCB0aGlzLm1pbikgdGhpcy52YWx1ZSA9IHRoaXMubWluXG5cbiAgICB0aGlzLnZhbHVlRm9ybWF0ID0gdGhpcy52YWx1ZS50b1N0cmluZygpLnBhZFN0YXJ0KHRoaXMucGFkZGluZywgJzAnKVxuXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlRm9ybWF0KVxuICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy52YWx1ZUZvcm1hdClcblxuICB9XG5cbn1cbiIsIjxkaXYgc3R5bGU9XCJ3aWR0aDogNDRweDsgdGV4dC1hbGlnbjogY2VudGVyO1wiIFtmeExheW91dF09XCJsYXlvdXRcIj5cblxuICA8ZGl2ICpuZ0lmPVwiIWlzUm93XCI+XG4gICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cIm9uSW5jcmVhc2UoKVwiIGRpc2FibGVkPVwiZGlzYWJsZWRcIj5cbiAgICAgIDxtYXQtaWNvbj5hZGQ8L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cblxuICA8ZGl2PlxuICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIChjbGljayk9XCJvbkRlY3JlYXNlKClcIiBkaXNhYmxlZD1cImRpc2FibGVkXCI+XG4gICAgICA8bWF0LWljb24+aG9yaXpvbnRhbF9ydWxlPC9tYXQtaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImlzUm93XCI+XG4gICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cIm9uSW5jcmVhc2UoKVwiIGRpc2FibGVkPVwiZGlzYWJsZWRcIj5cbiAgICAgIDxtYXQtaWNvbj5hZGQ8L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cblxuPC9kaXY+XG5cbiJdfQ==

esm2015/lib/stepper-control.module.js

 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { StepperControlComponent } from './stepper-control.component';
@@ -7,4 +11,12 @@ import * as i0 from "@angular/core";
 StepperControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StepperControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, declarations: [StepperControlComponent], exports: [StepperControlComponent] });
-StepperControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, imports: [[]] });
+StepperControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, declarations: [StepperControlComponent], imports: [MatButtonModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        FlexLayoutModule], exports: [StepperControlComponent] });
+StepperControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, imports: [[
+            MatButtonModule,
+            MatIconModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, decorators: [{
@@ -14,5 +26,10 @@ type: NgModule,
                     declarations: [
-                        StepperControlComponent
+                        StepperControlComponent,
                     ],
-                    imports: [],
+                    imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                    ],
                     exports: [
@@ -23,2 +40,2 @@ StepperControlComponent
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci1jb250cm9sLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0ZXBwZXItY29udHJvbC9zcmMvbGliL3N0ZXBwZXItY29udHJvbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7QUFjdEUsTUFBTSxPQUFPLG9CQUFvQjs7a0hBQXBCLG9CQUFvQjttSEFBcEIsb0JBQW9CLGlCQVI3Qix1QkFBdUIsYUFLdkIsdUJBQXVCO21IQUdkLG9CQUFvQixZQU50QixFQUNSOzRGQUtVLG9CQUFvQjtrQkFWaEMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osdUJBQXVCO3FCQUN4QjtvQkFDRCxPQUFPLEVBQUUsRUFDUjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsdUJBQXVCO3FCQUN4QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdGVwcGVyQ29udHJvbENvbXBvbmVudCB9IGZyb20gJy4vc3RlcHBlci1jb250cm9sLmNvbXBvbmVudCc7XG5cblxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBTdGVwcGVyQ29udHJvbENvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBTdGVwcGVyQ29udHJvbENvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFN0ZXBwZXJDb250cm9sTW9kdWxlIHsgfVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci1jb250cm9sLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0ZXBwZXItY29udHJvbC9zcmMvbGliL3N0ZXBwZXItY29udHJvbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVyRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQWdCdEUsTUFBTSxPQUFPLG9CQUFvQjs7a0hBQXBCLG9CQUFvQjttSEFBcEIsb0JBQW9CLGlCQVo3Qix1QkFBdUIsYUFHdkIsZUFBZTtRQUNmLGFBQWE7UUFDYixtQkFBbUI7UUFDbkIsZ0JBQWdCLGFBR2hCLHVCQUF1QjttSEFHZCxvQkFBb0IsWUFWdEI7WUFDUCxlQUFlO1lBQ2YsYUFBYTtZQUNiLG1CQUFtQjtZQUNuQixnQkFBZ0I7U0FDakI7NEZBS1Usb0JBQW9CO2tCQWRoQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWix1QkFBdUI7cUJBQ3hCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsbUJBQW1CO3dCQUNuQixnQkFBZ0I7cUJBQ2pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCx1QkFBdUI7cUJBQ3hCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZsZXhMYXlvdXRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mbGV4LWxheW91dCc7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgU3RlcHBlckNvbnRyb2xDb21wb25lbnQgfSBmcm9tICcuL3N0ZXBwZXItY29udHJvbC5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBTdGVwcGVyQ29udHJvbENvbXBvbmVudCxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIE1hdEJ1dHRvbk1vZHVsZSxcbiAgICBNYXRJY29uTW9kdWxlLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgRmxleExheW91dE1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIFN0ZXBwZXJDb250cm9sQ29tcG9uZW50XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgU3RlcHBlckNvbnRyb2xNb2R1bGUgeyB9XG4iXX0=

esm2015/public-api.js

 /*
  * Public API Surface of stepper-control
  */
-export * from './lib/stepper-control.service';
 export * from './lib/stepper-control.component';
 export * from './lib/stepper-control.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3N0ZXBwZXItY29udHJvbC9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxpQ0FBaUMsQ0FBQztBQUNoRCxjQUFjLDhCQUE4QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBzdGVwcGVyLWNvbnRyb2xcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdGVwcGVyLWNvbnRyb2wuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdGVwcGVyLWNvbnRyb2wuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3N0ZXBwZXItY29udHJvbC5tb2R1bGUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3N0ZXBwZXItY29udHJvbC9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyw4QkFBOEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygc3RlcHBlci1jb250cm9sXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RlcHBlci1jb250cm9sLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdGVwcGVyLWNvbnRyb2wubW9kdWxlJztcbiJdfQ==

fesm2015/stepper-control.js

 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } 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/flex-layout/flex';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
-class StepperControlService {
-    constructor() { }
-}
-StepperControlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-StepperControlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class StepperControlComponent {
-    constructor() { }
+    constructor() {
+        this.min = 0;
+        this.max = 100;
+        this.padding = 0;
+        this.incrementBy = 1;
+        this.vertical = false;
+        this.disabled = false;
+        this.change = new EventEmitter();
+        this.value = 0;
+        this.valueFormat = '';
+        this.onChange = (value) => { };
+        this.onTouch = () => { };
+    }
+    get layout() {
+        return (this.vertical) ? 'column' : 'ro';
+    }
+    get isRow() {
+        return (!this.vertical) ? true : false;
+    }
     ngOnInit() {
     }
+    isString(value) {
+        return (typeof value === 'string' || value instanceof String);
+    }
+    writeValue(value) {
+        this.value = isNaN(Number(value)) ? this.min : Number(value);
+        this.updateValue();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onIncrease() {
+        this.value += this.incrementBy;
+        this.updateValue();
+    }
+    onDecrease() {
+        this.value -= this.incrementBy;
+        this.updateValue();
+    }
+    updateValue() {
+        if (this.value > this.max)
+            this.value = this.max;
+        if (this.value < this.min)
+            this.value = this.min;
+        this.valueFormat = this.value.toString().padStart(this.padding, '0');
+        this.onChange(this.valueFormat);
+        this.change.emit(this.valueFormat);
+    }
 }
 StepperControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepperControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperControlComponent, selector: "lib-stepper-control", ngImport: i0, template: `
-    <p>
-      stepper-control works!
-    </p>
-  `, isInline: true });
+StepperControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperControlComponent, selector: "wav-stepper-control", inputs: { min: "min", max: "max", padding: "padding", incrementBy: "incrementBy", vertical: "vertical", disabled: "disabled" }, outputs: { change: "change" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: StepperControlComponent,
+            multi: true,
+        }
+    ], ngImport: i0, template: "<div style=\"width: 44px; text-align: center;\" [fxLayout]=\"layout\">\n\n  <div *ngIf=\"!isRow\">\n    <button mat-icon-button (click)=\"onIncrease()\" disabled=\"disabled\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n\n  <div>\n    <button mat-icon-button (click)=\"onDecrease()\" disabled=\"disabled\">\n      <mat-icon>horizontal_rule</mat-icon>\n    </button>\n  </div>\n\n  <div *ngIf=\"isRow\">\n    <button mat-icon-button (click)=\"onIncrease()\" disabled=\"disabled\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n\n</div>\n\n", styles: [""], components: [{ 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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-stepper-control',
-                    template: `
-    <p>
-      stepper-control works!
-    </p>
-  `,
-                    styles: []
+                    selector: 'wav-stepper-control',
+                    templateUrl: './stepper.component.html',
+                    styleUrls: ['./stepper.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: StepperControlComponent,
+                            multi: true,
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return []; }, propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], incrementBy: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
 
@@ -43,4 +108,12 @@ class StepperControlModule {
 StepperControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StepperControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, declarations: [StepperControlComponent], exports: [StepperControlComponent] });
-StepperControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, imports: [[]] });
+StepperControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, declarations: [StepperControlComponent], imports: [MatButtonModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        FlexLayoutModule], exports: [StepperControlComponent] });
+StepperControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, imports: [[
+            MatButtonModule,
+            MatIconModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperControlModule, decorators: [{
@@ -50,5 +123,10 @@ type: NgModule,
                     declarations: [
-                        StepperControlComponent
+                        StepperControlComponent,
                     ],
-                    imports: [],
+                    imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                    ],
                     exports: [
@@ -68,3 +146,3 @@ StepperControlComponent
 
-export { StepperControlComponent, StepperControlModule, StepperControlService };
+export { StepperControlComponent, StepperControlModule };
 //# sourceMappingURL=stepper-control.js.map

lib/stepper-control.component.d.ts

@@ -1,8 +0,30 @@
-import { OnInit } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
-export declare class StepperControlComponent implements OnInit {
+export declare class StepperControlComponent implements ControlValueAccessor {
+    min: number;
+    max: number;
+    padding: number;
+    incrementBy: number;
+    vertical: boolean;
+    disabled: boolean;
+    change: EventEmitter<string>;
+    value: number;
+    valueFormat: string;
+    get layout(): "column" | "ro";
+    get isRow(): boolean;
     constructor();
     ngOnInit(): void;
+    onChange: (value: string) => void;
+    onTouch: () => void;
+    isString(value: any): boolean;
+    writeValue(value: number | string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    onIncrease(): void;
+    onDecrease(): void;
+    updateValue(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepperControlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepperControlComponent, "lib-stepper-control", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepperControlComponent, "wav-stepper-control", never, { "min": "min"; "max": "max"; "padding": "padding"; "incrementBy": "incrementBy"; "vertical": "vertical"; "disabled": "disabled"; }, { "change": "change"; }, never, never>;
 }

lib/stepper-control.module.d.ts

 import * as i0 from "@angular/core";
 import * as i1 from "./stepper-control.component";
+import * as i2 from "@angular/material/button";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/forms";
+import * as i5 from "@angular/flex-layout";
 export declare class StepperControlModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StepperControlModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StepperControlModule, [typeof i1.StepperControlComponent], never, [typeof i1.StepperControlComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StepperControlModule, [typeof i1.StepperControlComponent], [typeof i2.MatButtonModule, typeof i3.MatIconModule, typeof i4.ReactiveFormsModule, typeof i5.FlexLayoutModule], [typeof i1.StepperControlComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StepperControlModule>;
 }

package.json

 {
   "name": "stepper-control",
-  "version": "0.0.1",
+  "version": "0.1.0",
+  "description": "This Angular Module is a stepper controller",
+  "author": "Mike Boni <[e-mail]> (http://wavecoders.ca)",
+  "license": "ISC",
+  "keywords": [
+    "angular",
+    "stepper",
+    "increase",
+    "decrease",
+    "formControl",
+    "UUID",
+    "CRC",
+    "Pattern"
+  ],
   "peerDependencies": {
     "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0"
+    "@angular/core": "^12.2.0",
+    "@angular/flex-layout": "^12.0.0-beta.34"
   },
@@ -8,0 +22,0 @@ "dependencies": {

public-api.d.ts

@@ -1,3 +0,2 @@
-export * from './lib/stepper-control.service';
 export * from './lib/stepper-control.component';
 export * from './lib/stepper-control.module';

README.md

 # StepperControl
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
+This Angular Module (Component) allows you to have a control (+ -) for incresing or decreasing value control.
 
-## Code scaffolding
+You can use the component as a formControl or respond to change event
 
-Run `ng generate component component-name --project stepper-control` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project stepper-control`.
-> Note: Don't forget to add `--project stepper-control` or else it will be added to the default project in your `angular.json` file. 
+## Installation
+```
+npm install stepper-control
+```
 
-## Build
+## Scaffolding
 
-Run `ng build stepper-control` to build the project. The build artifacts will be stored in the `dist/` directory.
+Import the module into your project under imports
 
-## Publishing
+```
+imports: [
+    BrowserModule,
+    AppRoutingModule,
+    StepperModule
+  ],
+```
 
-After building your library with `ng build stepper-control`, go to the dist folder `cd dist/stepper-control` and run `npm publish`.
+## Use
 
-## Running unit tests
+To use in your component, use the following tag for a basic setup
 
-Run `ng test stepper-control` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
+<wav-stepper-control></wav-stepper-control>
+```
 
-## Further help
+Here is the component with all input controls
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+```
+<wav-stepper-control 
+  formControlName="account" 
+  [vertical]="true" 
+  [padding]="3" 
+  [incrementBy]=".5"
+  [min]="10" 
+  [max]="20" 
+  (change)="onStepChange($event)"
+></wav-stepper-control>
+```
+
+## Inputs
+
+The following Inputs are available
+
+| Input | Type | Defaut | Description |
+| ----- | ---- | ------ | ----------- |
+| vertical   | BOOLEN   | FALSE   | controls the display type (vertical | horizontal) |
+| padding   | NUMBER   | 0   | pads the resulting value |
+| incrementBy   | NUMBER | 1   | increment value by |
+| min   | NUMBER   | NULL   | min value |
+| max   | NUMBER   | NULL   | max value |
+
+## Outputs
+
+The following Inputs are available
+
+| Event | Type | Description |
+| ----- | ---- | ------ | ----------- |
+| change   | STRING | current value padded |
+
+## Form Control setup
+
+define a formGroup control
+
+```
+stepper = this.fb.group({
+  value: [10]
+})
+```
+
+then onInit() specify the form change event
+
+```
+this.stepper.get('value')?.valueChanges.subscribe(data => {
+  console.log('VALUE:', data)
+})
+```
+
+Then implement the component
+
+```
+<div [formGroup]="privateForm">
+  <wav-stepper-control 
+    formControlName="value" 
+    [min]="10" 
+    [max]="20" 
+  ></wav-stepper-control>
+</div>
+```
+
+## Change Event setup
+
+Then implement the component
+
+```
+<div [formGroup]="privateForm">
+  <wav-stepper-control 
+    [min]="10" 
+    [max]="20" 
+    (change)="onStepChange($event)"
+  ></wav-stepper-control>
+</div>
+```
+
+then create the function to catch the reponse to the change
+
+```
+ onStepChange(data: string) {
+    console.log(data)
+  }
+```
+
+
+ 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52352

increased by132.79%

Number of low license alerts

0

decreased by-100%

Lines of code

524

increased by115.64%

Number of low maintenance alerts

1

decreased by-50%

Number of lines in readme file

119

increased by376%

Worsened metrics

Dependency count

4

increased by33.33%

Number of package files

14

decreased by-12.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes