import { Component, HostBinding, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
export class InputCounterComponent {
    constructor() {
        this.step = 0.01;
        this.minQuantity = 0;
        this.showIcon = false;
        this.iconColor = 'var(--themePrimButtonsBg-color)';
        this.isMaterialIcon = true;
        this.showQuantityButton = true;
        this.placeholder = '';
        this.isReadOnly = false;
        this.iconPosition = 'left';
        this.isIconOperationSign = false;
    }
    get isInvalid() {
        return this.formControl.invalid;
    }
    get isDirty() {
        return this.formControl.dirty;
    }
    get value() {
        return Number(this.formControl.value);
    }
    increaseQuantity() {
        if (!this.maxQuantity || this.value < this.maxQuantity) {
            const value = Math.round((this.value + Number(this.step)) * 100) / 100;
            this.onQuantityChange(value);
        }
    }
    decreaseQuantity() {
        if (!this.minQuantity || this.value > this.minQuantity) {
            const value = Math.round((this.value - Number(this.step)) * 100) / 100;
            this.onQuantityChange(value);
        }
    }
    onQuantityChange(event) {
        if (event) {
            this.formControl.setValue(event);
        }
    }
}
InputCounterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InputCounterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputCounterComponent, selector: "epom-input-counter", inputs: { step: "step", minQuantity: "minQuantity", maxQuantity: "maxQuantity", icon: "icon", formControl: "formControl", showIcon: "showIcon", iconColor: "iconColor", isMaterialIcon: "isMaterialIcon", showQuantityButton: "showQuantityButton", placeholder: "placeholder", isReadOnly: "isReadOnly", iconPosition: "iconPosition", isIconOperationSign: "isIconOperationSign" }, host: { properties: { "class.ng-invalid": "this.isInvalid", "class.ng-dirty": "this.isDirty" } }, ngImport: i0, template: "<div class=\"input-container form-control-wrapper\" [ngClass]=\"{'input-with-buttons': showQuantityButton}\">\n  <div class=\"quantity\">\n    <span\n      *ngIf=\"showIcon\"\n      [ngStyle]=\"{color: iconColor}\"\n      [class]=\"'icon ' + iconPosition\"\n      [ngClass]=\"{\n        'material-icons material-icons-outlined arrow-up': isMaterialIcon,\n        'operation-sign': isIconOperationSign\n      }\"\n      >{{ icon }}\n    </span>\n    <input\n      class=\"form-control\"\n      type=\"number\"\n      [ngClass]=\"{\n        'input-with-icon': showIcon && iconPosition === 'left',\n        'input-with-operation-sign': showIcon && iconPosition === 'left' && isIconOperationSign\n      }\"\n      [min]=\"minQuantity\"\n      [max]=\"maxQuantity\"\n      [step]=\"step\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"isReadOnly\"\n    />\n    <div class=\"quantity-nav\" *ngIf=\"showQuantityButton\">\n      <div class=\"quantity-button quantity-up\" (click)=\"increaseQuantity()\">\n        <span class=\"material-icons material-icons-outlined arrow-up\">arrow_drop_up</span>\n      </div>\n      <div class=\"quantity-button quantity-down\" (click)=\"decreaseQuantity()\">\n        <span class=\"material-icons material-icons-outlined arrow-down\">arrow_drop_down</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".input-container{position:relative;max-width:720px}.input-container input{width:100%;padding-left:20px}.input-container .icon{position:absolute;left:12px;width:12px;font-size:20px;z-index:1}.input-container .icon.operation-sign{display:flex;justify-content:center;width:17px;font-size:14px;height:21px}.input-container .right{right:12px;left:auto}.input-container .icon.material-icons{width:20px;height:20px}.quantity{display:flex;align-items:center;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.quantity input{height:36px;float:left;display:block;margin:0;padding:7px 30px 8px 12px;border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity .input-with-icon{padding:7px 12px 8px 40px}.quantity .input-with-operation-sign{padding:7px 12px 8px 37px}.input-with-buttons .quantity .input-with-icon{padding:7px 30px 8px 28px}.quantity input:focus{outline:0}.quantity-nav{float:left;position:relative;height:36px}.quantity-button{position:relative;cursor:pointer;border:1px solid var(--neutral-outline-variant-color, #c4c6d0);width:20px;height:18px;text-align:center;color:var(--light-basic-outline, #74777f);transform:translate(-21px);-webkit-user-select:none;user-select:none}.quantity-button span{font-size:18px}.quantity-button:hover{background-color:var(--neutral-on-main-neutral-8-color, rgba(68, 71, 79, .08));border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity-button:active{background-color:var(--neutral-on-main-neutral-12-color, rgba(68, 71, 79, .08));border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity-button.quantity-up{position:absolute;height:calc(50% - 1px);top:1px;border-top:none;border-right:none;border-top-right-radius:3px;border-bottom:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity-button.quantity-down{position:absolute;bottom:1px;height:calc(50% - 1px);border-bottom:none;border-right:none;border-bottom-right-radius:3px;border-top:none}:host.form-control{padding:0;border:0;background:transparent!important}\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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputCounterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'epom-input-counter', template: "<div class=\"input-container form-control-wrapper\" [ngClass]=\"{'input-with-buttons': showQuantityButton}\">\n  <div class=\"quantity\">\n    <span\n      *ngIf=\"showIcon\"\n      [ngStyle]=\"{color: iconColor}\"\n      [class]=\"'icon ' + iconPosition\"\n      [ngClass]=\"{\n        'material-icons material-icons-outlined arrow-up': isMaterialIcon,\n        'operation-sign': isIconOperationSign\n      }\"\n      >{{ icon }}\n    </span>\n    <input\n      class=\"form-control\"\n      type=\"number\"\n      [ngClass]=\"{\n        'input-with-icon': showIcon && iconPosition === 'left',\n        'input-with-operation-sign': showIcon && iconPosition === 'left' && isIconOperationSign\n      }\"\n      [min]=\"minQuantity\"\n      [max]=\"maxQuantity\"\n      [step]=\"step\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"isReadOnly\"\n    />\n    <div class=\"quantity-nav\" *ngIf=\"showQuantityButton\">\n      <div class=\"quantity-button quantity-up\" (click)=\"increaseQuantity()\">\n        <span class=\"material-icons material-icons-outlined arrow-up\">arrow_drop_up</span>\n      </div>\n      <div class=\"quantity-button quantity-down\" (click)=\"decreaseQuantity()\">\n        <span class=\"material-icons material-icons-outlined arrow-down\">arrow_drop_down</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".input-container{position:relative;max-width:720px}.input-container input{width:100%;padding-left:20px}.input-container .icon{position:absolute;left:12px;width:12px;font-size:20px;z-index:1}.input-container .icon.operation-sign{display:flex;justify-content:center;width:17px;font-size:14px;height:21px}.input-container .right{right:12px;left:auto}.input-container .icon.material-icons{width:20px;height:20px}.quantity{display:flex;align-items:center;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.quantity input{height:36px;float:left;display:block;margin:0;padding:7px 30px 8px 12px;border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity .input-with-icon{padding:7px 12px 8px 40px}.quantity .input-with-operation-sign{padding:7px 12px 8px 37px}.input-with-buttons .quantity .input-with-icon{padding:7px 30px 8px 28px}.quantity input:focus{outline:0}.quantity-nav{float:left;position:relative;height:36px}.quantity-button{position:relative;cursor:pointer;border:1px solid var(--neutral-outline-variant-color, #c4c6d0);width:20px;height:18px;text-align:center;color:var(--light-basic-outline, #74777f);transform:translate(-21px);-webkit-user-select:none;user-select:none}.quantity-button span{font-size:18px}.quantity-button:hover{background-color:var(--neutral-on-main-neutral-8-color, rgba(68, 71, 79, .08));border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity-button:active{background-color:var(--neutral-on-main-neutral-12-color, rgba(68, 71, 79, .08));border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity-button.quantity-up{position:absolute;height:calc(50% - 1px);top:1px;border-top:none;border-right:none;border-top-right-radius:3px;border-bottom:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.quantity-button.quantity-down{position:absolute;bottom:1px;height:calc(50% - 1px);border-bottom:none;border-right:none;border-bottom-right-radius:3px;border-top:none}:host.form-control{padding:0;border:0;background:transparent!important}\n"] }]
        }], propDecorators: { step: [{
                type: Input
            }], minQuantity: [{
                type: Input
            }], maxQuantity: [{
                type: Input
            }], icon: [{
                type: Input
            }], formControl: [{
                type: Input
            }], showIcon: [{
                type: Input
            }], iconColor: [{
                type: Input
            }], isMaterialIcon: [{
                type: Input
            }], showQuantityButton: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], isReadOnly: [{
                type: Input
            }], iconPosition: [{
                type: Input,
                args: ['iconPosition']
            }], isIconOperationSign: [{
                type: Input,
                args: ['isIconOperationSign']
            }], isInvalid: [{
                type: HostBinding,
                args: ['class.ng-invalid']
            }], isDirty: [{
                type: HostBinding,
                args: ['class.ng-dirty']
            }] } });
//# sourceMappingURL=data:application/json;base64, 