ngx-numaric-keypad
Version:
This is a two in one features keypad, you can use this as calculator also by just enabling that feature.
89 lines • 13.4 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
let KeypadComponent = class KeypadComponent {
constructor() {
this.calc = false;
this.getVal = new EventEmitter();
this.currentNumber = '0';
this.firstOperand = null;
this.operator = null;
this.waitForSecondNumber = false;
this.equalSign = false;
}
ngOnInit() {
}
getNumber(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);
}
backSpace() {
if (this.currentNumber.length > 0) {
this.currentNumber = this.currentNumber.slice(0, -1);
this.getVal.emit(this.currentNumber);
}
}
getDecimal() {
if (!this.currentNumber.includes('.')) {
this.currentNumber += '.';
}
}
doCalculation(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;
}
}
getOperation(op) {
if (this.firstOperand === null) {
this.firstOperand = Number(this.currentNumber);
}
else if (this.operator) {
const 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);
}
clear() {
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 ×\r\n </button>\r\n <button type=\"button\" (click)=\"getOperation('/')\" class=\"operator\" value=\"/\">\r\n ÷\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);
export { KeypadComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5cGFkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1udW1hcmljLWtleXBhZC8iLCJzb3VyY2VzIjpbImxpYi9rZXlwYWQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBTy9FLElBQWEsZUFBZSxHQUE1QixNQUFhLGVBQWU7SUFVMUI7UUFUUyxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBRVosV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdEMsa0JBQWEsR0FBRyxHQUFHLENBQUM7UUFDcEIsaUJBQVksR0FBUSxJQUFJLENBQUM7UUFDekIsYUFBUSxHQUFRLElBQUksQ0FBQztRQUNyQix3QkFBbUIsR0FBRyxLQUFLLENBQUM7UUFDNUIsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUlsQixDQUFDO0lBRUQsUUFBUTtJQUVSLENBQUM7SUFFTSxTQUFTLENBQUMsQ0FBUztRQUN4QixJQUFJLElBQUksQ0FBQyxtQkFBbUIsRUFBRTtZQUM1QixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQztZQUN2QixJQUFJLENBQUMsbUJBQW1CLEdBQUcsS0FBSyxDQUFDO1NBQ2xDO2FBQU07WUFDTCxJQUFJLENBQUMsYUFBYSxLQUFLLEdBQUc7Z0JBQ3hCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDO2dCQUMxQixDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxJQUFJLENBQUMsQ0FBQyxDQUFDO1NBQy9CO1FBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFTSxTQUFTO1FBQ2QsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDakMsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNyRCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDdEM7SUFDSCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUNyQyxJQUFJLENBQUMsYUFBYSxJQUFJLEdBQUcsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFFTyxhQUFhLENBQUMsRUFBTyxFQUFFLFFBQWE7UUFDMUMsUUFBUSxFQUFFLEVBQUU7WUFDVixLQUFLLEdBQUc7Z0JBQ04sT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLElBQUksUUFBUSxDQUFDLENBQUM7WUFDekMsS0FBSyxHQUFHO2dCQUNOLE9BQU8sQ0FBQyxJQUFJLENBQUMsWUFBWSxJQUFJLFFBQVEsQ0FBQyxDQUFDO1lBQ3pDLEtBQUssR0FBRztnQkFDTixPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksSUFBSSxRQUFRLENBQUMsQ0FBQztZQUN6QyxLQUFLLEdBQUc7Z0JBQ04sT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLElBQUksUUFBUSxDQUFDLENBQUM7WUFDekMsS0FBSyxHQUFHO2dCQUNOLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsR0FBRyxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUM7WUFDaEQsS0FBSyxHQUFHO2dCQUNOLE9BQU8sUUFBUSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUNNLFlBQVksQ0FBQyxFQUFVO1FBQzVCLElBQUksSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ2hEO2FBQU0sSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ3hCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQy9CLElBQUksQ0FBQyxRQUFRLEVBQ2IsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FDM0IsQ0FBQztZQUNGLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ3BDLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDO1NBQzVCO1FBQ0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQztRQUNoQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDdEMsQ0FBQztJQUVNLEtBQUs7UUFDVixJQUFJLENBQUMsYUFBYSxHQUFHLEdBQUcsQ0FBQztRQUN6QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUNyQixJQUFJLENBQUMsbUJBQW1CLEdBQUcsS0FBSyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUN2QyxDQUFDO0NBR0YsQ0FBQTtBQW5GVTtJQUFSLEtBQUssRUFBRTs2Q0FBYztBQUVaO0lBQVQsTUFBTSxFQUFFOytDQUE2QjtBQUgzQixlQUFlO0lBTDNCLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxvQkFBb0I7UUFDOUIseW1GQUFzQzs7S0FFdkMsQ0FBQztHQUNXLGVBQWUsQ0FvRjNCO1NBcEZZLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1udW1hcmljLWtleXBhZCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2tleXBhZC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4va2V5cGFkLmNvbXBvbmVudC5jc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgS2V5cGFkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBjYWxjID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKSBnZXRWYWwgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgY3VycmVudE51bWJlciA9ICcwJztcclxuICBmaXJzdE9wZXJhbmQ6IGFueSA9IG51bGw7XHJcbiAgb3BlcmF0b3I6IGFueSA9IG51bGw7XHJcbiAgd2FpdEZvclNlY29uZE51bWJlciA9IGZhbHNlO1xyXG4gIGVxdWFsU2lnbiA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuXHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuXHJcbiAgfVxyXG5cclxuICBwdWJsaWMgZ2V0TnVtYmVyKHY6IHN0cmluZykge1xyXG4gICAgaWYgKHRoaXMud2FpdEZvclNlY29uZE51bWJlcikge1xyXG4gICAgICB0aGlzLmN1cnJlbnROdW1iZXIgPSB2O1xyXG4gICAgICB0aGlzLndhaXRGb3JTZWNvbmROdW1iZXIgPSBmYWxzZTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuY3VycmVudE51bWJlciA9PT0gJzAnXHJcbiAgICAgICAgPyAodGhpcy5jdXJyZW50TnVtYmVyID0gdilcclxuICAgICAgICA6ICh0aGlzLmN1cnJlbnROdW1iZXIgKz0gdik7XHJcbiAgICB9XHJcbiAgICB0aGlzLmdldFZhbC5lbWl0KHRoaXMuY3VycmVudE51bWJlcik7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgYmFja1NwYWNlKCkge1xyXG4gICAgaWYgKHRoaXMuY3VycmVudE51bWJlci5sZW5ndGggPiAwKSB7XHJcbiAgICAgIHRoaXMuY3VycmVudE51bWJlciA9IHRoaXMuY3VycmVudE51bWJlci5zbGljZSgwLCAtMSk7XHJcbiAgICAgIHRoaXMuZ2V0VmFsLmVtaXQodGhpcy5jdXJyZW50TnVtYmVyKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGdldERlY2ltYWwoKSB7XHJcbiAgICBpZiAoIXRoaXMuY3VycmVudE51bWJlci5pbmNsdWRlcygnLicpKSB7XHJcbiAgICAgIHRoaXMuY3VycmVudE51bWJlciArPSAnLic7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGRvQ2FsY3VsYXRpb24ob3A6IGFueSwgc2Vjb25kT3A6IGFueSkge1xyXG4gICAgc3dpdGNoIChvcCkge1xyXG4gICAgICBjYXNlICcrJzpcclxuICAgICAgICByZXR1cm4gKHRoaXMuZmlyc3RPcGVyYW5kICs9IHNlY29uZE9wKTtcclxuICAgICAgY2FzZSAnLSc6XHJcbiAgICAgICAgcmV0dXJuICh0aGlzLmZpcnN0T3BlcmFuZCAtPSBzZWNvbmRPcCk7XHJcbiAgICAgIGNhc2UgJyonOlxyXG4gICAgICAgIHJldHVybiAodGhpcy5maXJzdE9wZXJhbmQgKj0gc2Vjb25kT3ApO1xyXG4gICAgICBjYXNlICcvJzpcclxuICAgICAgICByZXR1cm4gKHRoaXMuZmlyc3RPcGVyYW5kIC89IHNlY29uZE9wKTtcclxuICAgICAgY2FzZSAnJSc6XHJcbiAgICAgICAgcmV0dXJuICgodGhpcy5maXJzdE9wZXJhbmQgLyAxMDApICogc2Vjb25kT3ApO1xyXG4gICAgICBjYXNlICc9JzpcclxuICAgICAgICByZXR1cm4gc2Vjb25kT3A7XHJcbiAgICB9XHJcbiAgfVxyXG4gIHB1YmxpYyBnZXRPcGVyYXRpb24ob3A6IHN0cmluZykge1xyXG4gICAgaWYgKHRoaXMuZmlyc3RPcGVyYW5kID09PSBudWxsKSB7XHJcbiAgICAgIHRoaXMuZmlyc3RPcGVyYW5kID0gTnVtYmVyKHRoaXMuY3VycmVudE51bWJlcik7XHJcbiAgICB9IGVsc2UgaWYgKHRoaXMub3BlcmF0b3IpIHtcclxuICAgICAgY29uc3QgcmVzdWx0ID0gdGhpcy5kb0NhbGN1bGF0aW9uKFxyXG4gICAgICAgIHRoaXMub3BlcmF0b3IsXHJcbiAgICAgICAgTnVtYmVyKHRoaXMuY3VycmVudE51bWJlcilcclxuICAgICAgKTtcclxuICAgICAgdGhpcy5jdXJyZW50TnVtYmVyID0gU3RyaW5nKHJlc3VsdCk7XHJcbiAgICAgIHRoaXMuZmlyc3RPcGVyYW5kID0gcmVzdWx0O1xyXG4gICAgfVxyXG4gICAgdGhpcy5vcGVyYXRvciA9IG9wO1xyXG4gICAgdGhpcy53YWl0Rm9yU2Vjb25kTnVtYmVyID0gdHJ1ZTtcclxuICAgIHRoaXMuZ2V0VmFsLmVtaXQodGhpcy5maXJzdE9wZXJhbmQpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGNsZWFyKCkge1xyXG4gICAgdGhpcy5jdXJyZW50TnVtYmVyID0gJzAnO1xyXG4gICAgdGhpcy5maXJzdE9wZXJhbmQgPSBudWxsO1xyXG4gICAgdGhpcy5vcGVyYXRvciA9IG51bGw7XHJcbiAgICB0aGlzLndhaXRGb3JTZWNvbmROdW1iZXIgPSBmYWxzZTtcclxuICAgIHRoaXMuZ2V0VmFsLmVtaXQodGhpcy5jdXJyZW50TnVtYmVyKTtcclxuICB9XHJcblxyXG5cclxufVxyXG4iXX0=