ngx-numaric-keypad/ngx-numaric-keypad.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"KeypadService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"KeypadComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"calc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"getVal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getNumber":[{"__symbolic":"method"}],"backSpace":[{"__symbolic":"method"}],"getDecimal":[{"__symbolic":"method"}],"doCalculation":[{"__symbolic":"method"}],"getOperation":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}]}},"KeypadModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"KeypadComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4}],"exports":[{"__symbolic":"reference","name":"KeypadComponent"}]}]}],"members":{}}},"origins":{"KeypadService":"./lib/keypad.service","KeypadComponent":"./lib/keypad.component","KeypadModule":"./lib/keypad.module"},"importAs":"ngx-numaric-keypad"}