ngx-numaric-keypad/fesm5/ngx-numaric-keypad.js

This is a two in one features keypad, you can use this as calculator also by just enabling that feature.

import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, EventEmitter, Input, Output, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

var KeypadService = /** @class */ (function () {
    function KeypadService() {
    }
    KeypadService.ɵprov = ɵɵdefineInjectable({ factory: function KeypadService_Factory() { return new KeypadService(); }, token: KeypadService, providedIn: "root" });
    KeypadService = __decorate([
        Injectable({
            providedIn: 'root'
        })
    ], KeypadService);
    return KeypadService;
}());

var KeypadComponent = /** @class */ (function () {
    function KeypadComponent() {
        this.calc = false;
        this.getVal = new EventEmitter();
        this.currentNumber = '0';
        this.firstOperand = null;
        this.operator = null;
        this.waitForSecondNumber = false;
        this.equalSign = false;
    }
    KeypadComponent.prototype.ngOnInit = function () {
    };
    KeypadComponent.prototype.getNumber = function (v) {
        if (this.waitForSecondNumber) {
            this.currentNumber = v;
            this.waitForSecondNumber = false;
        }
        else {
            this.currentNumber === '0'
                ? (this.currentNumber = v)
                : (this.currentNumber += v);
        }
        this.getVal.emit(this.currentNumber);
    };
    KeypadComponent.prototype.backSpace = function () {
        if (this.currentNumber.length > 0) {
            this.currentNumber = this.currentNumber.slice(0, -1);
            this.getVal.emit(this.currentNumber);
        }
    };
    KeypadComponent.prototype.getDecimal = function () {
        if (!this.currentNumber.includes('.')) {
            this.currentNumber += '.';
        }
    };
    KeypadComponent.prototype.doCalculation = function (op, secondOp) {
        switch (op) {
            case '+':
                return (this.firstOperand += secondOp);
            case '-':
                return (this.firstOperand -= secondOp);
            case '*':
                return (this.firstOperand *= secondOp);
            case '/':
                return (this.firstOperand /= secondOp);
            case '%':
                return ((this.firstOperand / 100) * secondOp);
            case '=':
                return secondOp;
        }
    };
    KeypadComponent.prototype.getOperation = function (op) {
        if (this.firstOperand === null) {
            this.firstOperand = Number(this.currentNumber);
        }
        else if (this.operator) {
            var result = this.doCalculation(this.operator, Number(this.currentNumber));
            this.currentNumber = String(result);
            this.firstOperand = result;
        }
        this.operator = op;
        this.waitForSecondNumber = true;
        this.getVal.emit(this.firstOperand);
    };
    KeypadComponent.prototype.clear = function () {
        this.currentNumber = '0';
        this.firstOperand = null;
        this.operator = null;
        this.waitForSecondNumber = false;
        this.getVal.emit(this.currentNumber);
    };
    __decorate([
        Input()
    ], KeypadComponent.prototype, "calc", void 0);
    __decorate([
        Output()
    ], KeypadComponent.prototype, "getVal", void 0);
    KeypadComponent = __decorate([
        Component({
            selector: 'ngx-numaric-keypad',
            template: "<div class='keypad-container'>\r\n    <div class=\"keypad\">\r\n      <div class=\"keypad-screen\">\r\n        <input type=\"text\"  [value]=\"currentNumber\" disabled />\r\n      </div>\r\n    \r\n      <div class=\"keypad-keys\">\r\n        <div class=\"keypad-btns\">\r\n          <button type=\"button\" (click)=\"getNumber('7')\" value=\"7\">7</button>\r\n          <button type=\"button\" (click)=\"getNumber('8')\" value=\"8\">8</button>\r\n          <button type=\"button\" (click)=\"getNumber('9')\" value=\"9\">9</button>\r\n      \r\n          <button type=\"button\" (click)=\"getNumber('4')\" value=\"4\">4</button>\r\n          <button type=\"button\" (click)=\"getNumber('5')\" value=\"5\">5</button>\r\n          <button type=\"button\" (click)=\"getNumber('6')\" value=\"6\">6</button>\r\n      \r\n          <button type=\"button\" (click)=\"getNumber('1')\" value=\"1\">1</button>\r\n          <button type=\"button\" (click)=\"getNumber('2')\" value=\"2\">2</button>\r\n          <button type=\"button\" (click)=\"getNumber('3')\" value=\"3\">3</button>\r\n      \r\n      \r\n          <button type=\"button\" (click)=\"getDecimal()\" class=\"decimal\" value=\".\">\r\n            .\r\n          </button>\r\n          <button type=\"button\" (click)=\"getNumber('0')\" value=\"0\">0</button>\r\n          <button type=\"button\" (click)=\"backSpace()\" class=\"decimal back-btn\">\r\n            <span class=\"material-icons\">\r\n              backspace\r\n            </span>\r\n          </button>\r\n        </div>\r\n        <div class=\"op-btn\" *ngIf=\"calc\">\r\n    \r\n          <button type=\"button\" (click)=\"clear()\" class=\"all-clear\" value=\"all-clear\">\r\n            AC\r\n          </button>\r\n          <button type=\"button\" (click)=\"getOperation('%')\" class=\"operator\" value=\"%\">\r\n            %\r\n          </button>\r\n          <button type=\"button\" (click)=\"getOperation('+')\" class=\"operator\" value=\"+\">\r\n            +\r\n          </button>\r\n          <button type=\"button\" (click)=\"getOperation('-')\" class=\"operator\" value=\"-\">\r\n            -\r\n          </button>\r\n          <button type=\"button\" (click)=\"getOperation('*')\" class=\"operator\" value=\"*\">\r\n            &times;\r\n          </button>\r\n          <button type=\"button\" (click)=\"getOperation('/')\" class=\"operator\" value=\"/\">\r\n            &divide;\r\n          </button>\r\n    \r\n          <button type=\"button\" (click)=\"getOperation('=')\" class=\"equal-sign\" value=\"=\">\r\n            =\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>",
            styles: [".keypad-container{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.keypad{border:1px solid #ccc;border-radius:5px;width:400px}.keypad-screen{padding:10px}.keypad-screen input{width:100%;font-size:4rem;height:80px;border:none;background-color:#fff;color:#000;text-align:right}.keypad-keys{display:flex;justify-content:space-between;padding:10px;border-top:1px solid #ccc;cursor:pointer}.keypad-keys .keypad-btns{flex:1;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;cursor:pointer}.keypad-keys .keypad-btns button{flex:0 0 27%;width:27%;margin:5px;cursor:pointer}button{height:60px;border-radius:3px;border:1px solid #c4c4c4;background-color:transparent;font-size:2rem;color:#333;background-image:linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 0 rgba(255,255,255,.45),inset 0 -1px 0 0 rgba(255,255,255,.15),0 1px 0 0 rgba(255,255,255,.15);text-shadow:0 1px rgba(255,255,255,.4)}button.back-btn{font-size:1.5rem}.keypad-keys .op-btn{flex:0 0 100px;margin-left:10px;display:flex;flex-direction:column;cursor:pointer}.keypad-keys .op-btn button{flex:0 0 50px;margin:5px;cursor:pointer}"]
        })
    ], KeypadComponent);
    return KeypadComponent;
}());

// import { BrowserModule } from '@angular/platform-browser';
var KeypadModule = /** @class */ (function () {
    function KeypadModule() {
    }
    KeypadModule = __decorate([
        NgModule({
            declarations: [KeypadComponent],
            imports: [
                CommonModule
            ],
            exports: [KeypadComponent]
        })
    ], KeypadModule);
    return KeypadModule;
}());

/*
 * Public API Surface of keypad
 */

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

export { KeypadComponent, KeypadModule, KeypadService };
//# sourceMappingURL=ngx-numaric-keypad.js.map