ng-numeric-keyboard
Version:
Number keyboard for mobile browsers For Angular
1 lines • 16 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NumericKeyboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"ng-numeric-keyboard","template":"<table class=\"numeric-keyboard\">\n <tr *ngFor=\"let r of ks.resolvedLayout\">\n <td *ngFor=\"let c of r\"\n [attr.rowspan]=\"c.rowspan\"\n [attr.colspan]=\"c.colspan\"\n [attr.data-key]=\"c.key\"\n [attr.data-icon]=\"c.key === ENTER ? kp.entertext : c.key\"\n class=\"numeric-keyboard-key\"\n (touchend)=\"onTouchend(c.key)\"\n >\n <div *ngIf=\"c.key === DEL\" class=\"del-icon\" [ngClass]=\"c.rowspan === 2 ? 'half' : ''\"> </div>\n <div *ngIf=\"c.key === ESC\" class=\"down-icon\"> </div>\n </td>\n </tr>\n</table>\n","styles":[".del-icon{background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.1.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg version%3D%221.1%22 id%3D%22%EB%A0%88%EC%9D%B4%EC%96%B4_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22%09 y%3D%220px%22 viewBox%3D%220 0 96 96%22 style%3D%22enable-background%3Anew 0 0 96 96%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%235D5D5D%3B%7D%09.st1%7Bfill%3A%233F3A3B%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M77.2%2C28L77.2%2C28H38.1c-1.8%2C0-3.5%2C0.7-4.8%2C1.9L16.8%2C46c-1.1%2C1.1-1.1%2C2.8-0.1%2C4c0%2C0%2C0%2C0%2C0.1%2C0.1l16.3%2C16.1%09%09c1.3%2C1.2%2C3%2C1.9%2C4.8%2C1.9h39.1c1.6%2C0%2C2.9-1.3%2C2.9-2.8l0%2C0V31C80.1%2C29.3%2C78.8%2C28%2C77.2%2C28z M67.5%2C56.6c-0.3%2C0.3-0.8%2C0.5-1.2%2C0.5%09%09c0%2C0%2C0%2C0-0.1%2C0c-0.5%2C0-0.9-0.2-1.3-0.6l-6.2-6.2l-6.2%2C6.2c-0.7%2C0.7-1.8%2C0.7-2.5%2C0c-0.4-0.3-0.6-0.8-0.6-1.3c0-0.5%2C0.2-0.9%2C0.5-1.3%09%09l6.2-6.2l-6.2-6.2c-0.7-0.7-0.7-1.8%2C0-2.5c0.7-0.7%2C1.8-0.8%2C2.6-0.1l6.2%2C6.2l6.2-6.2c0.8-0.7%2C1.9-0.7%2C2.6%2C0l0%2C0l-0.4%2C0.4l0.4-0.3%09%09c0.7%2C0.7%2C0.7%2C1.9%2C0%2C2.5L61.4%2C48l6.2%2C6.2c0.4%2C0.4%2C0.6%2C0.9%2C0.6%2C1.4C68.1%2C55.8%2C67.9%2C56.3%2C67.5%2C56.6z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M67.2%2C39.6L67.2%2C39.6L67.2%2C39.6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");width:100%;height:100%;margin-left:-1px}.half{height:50%}.down-icon{background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.1.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg version%3D%221.1%22 id%3D%22%EB%A0%88%EC%9D%B4%EC%96%B4_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22%09 y%3D%220px%22 viewBox%3D%220 0 512 512%22 style%3D%22enable-background%3Anew 0 0 512 512%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%235D5D5D%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M255.9%2C468.6c-27.5-27.5-55.4-55.5-83.2-83.4c55.4%2C0%2C111.2%2C0%2C166.6%2C0C311.4%2C413%2C283.5%2C440.9%2C255.9%2C468.6z%22%2F%3E%09%3Cpath class%3D%22st0%22 d%3D%22M468.8%2C88.2c0-26.8-18-44.7-44.8-44.7c-55.9%2C0-111.8%2C0-167.7%2C0c-56.2%2C0-112.5%2C0-168.7%2C0%09%09c-26.2%2C0-44.3%2C18-44.3%2C44.3c-0.1%2C70-0.2%2C140-0.2%2C210.1c0%2C26.2%2C18.1%2C44.5%2C44.2%2C44.5c112.5%2C0.1%2C224.9%2C0.1%2C337.4%2C0%09%09c26.1%2C0%2C44.1-18.3%2C44.2-44.5C468.9%2C227.9%2C468.9%2C158%2C468.8%2C88.2z M362.9%2C107.8c13.8%2C0%2C27.6%2C0%2C41.8%2C0c0%2C14.3%2C0%2C28%2C0%2C42.1%09%09c-14%2C0-27.7%2C0-41.8%2C0C362.9%2C135.9%2C362.9%2C122%2C362.9%2C107.8z M299%2C107.7c13.8%2C0%2C27.5%2C0%2C41.8%2C0c0%2C14.2%2C0%2C28.1%2C0%2C42.2%09%09c-14%2C0-27.7%2C0-41.8%2C0C299%2C135.8%2C299%2C121.9%2C299%2C107.7z M235.1%2C107.7c14.1%2C0%2C27.8%2C0%2C41.8%2C0c0%2C14.1%2C0%2C28%2C0%2C42.2c-14%2C0-27.7%2C0-41.8%2C0%09%09C235.1%2C135.8%2C235.1%2C122%2C235.1%2C107.7z M235.1%2C171.7c14.1%2C0%2C27.8%2C0%2C41.8%2C0c0%2C14.1%2C0%2C28%2C0%2C42.2c-14%2C0-27.7%2C0-41.8%2C0%09%09C235.1%2C199.9%2C235.1%2C186%2C235.1%2C171.7z M107.4%2C107.7c14.1%2C0%2C27.8%2C0%2C41.8%2C0c0%2C14.1%2C0%2C28%2C0%2C42.2c-14%2C0-27.7%2C0-41.8%2C0%09%09C107.4%2C135.8%2C107.4%2C122%2C107.4%2C107.7z M149.1%2C213.9c-14%2C0-27.9%2C0-42%2C0c0-14.5%2C0-28.1%2C0-42c14%2C0%2C27.8%2C0%2C42%2C0%09%09C149.1%2C185.8%2C149.1%2C199.7%2C149.1%2C213.9z M171.1%2C107.8c13.9%2C0%2C27.7%2C0%2C41.9%2C0c0%2C13.9%2C0%2C27.8%2C0%2C42c-13.8%2C0-27.5%2C0-41.9%2C0%09%09C171.1%2C135.8%2C171.1%2C122%2C171.1%2C107.8z M171.3%2C171.8c13.7%2C0%2C27.6%2C0%2C41.8%2C0c0%2C14.2%2C0%2C28%2C0%2C42.1c-13.9%2C0-27.6%2C0-41.8%2C0%09%09C171.3%2C199.9%2C171.3%2C186.1%2C171.3%2C171.8z M340.7%2C299.3c-56.4%2C0-112.7%2C0-169.4%2C0c0-13.8%2C0-27.7%2C0-42.2c56.5%2C0%2C112.8%2C0%2C169.4%2C0%09%09C340.7%2C271.2%2C340.7%2C285.1%2C340.7%2C299.3z M340.9%2C213.8c-13.9%2C0-27.7%2C0-41.9%2C0c0-14%2C0-27.9%2C0-42c13.8%2C0%2C27.6%2C0%2C41.9%2C0%09%09C340.9%2C185.8%2C340.9%2C199.6%2C340.9%2C213.8z M404.8%2C213.8c-13.9%2C0-27.7%2C0-41.9%2C0c0-14%2C0-27.9%2C0-42c13.8%2C0%2C27.6%2C0%2C41.9%2C0%09%09C404.8%2C185.8%2C404.8%2C199.6%2C404.8%2C213.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");width:70%;height:70%;margin:auto}.numeric-keyboard{width:100%;height:100%;background:#e0e0e0;table-layout:fixed;border-collapse:separate;border-spacing:7px;font-size:2em;text-align:center}.numeric-keyboard-key{touch-action:manipulation;-webkit-transition:background .3s;transition:background .3s;color:#3b3b3b;background:#fafafa;padding:5px 0;border-radius:5px}.numeric-keyboard-key:active{background:#e1e1e1}.numeric-keyboard-key[data-key=\"\"]{pointer-events:none;background:#edeef1}.numeric-keyboard-key[data-key=esc]{background:#edeef1}.numeric-keyboard-key[data-key=enter]{color:#5695e8;background:#ededed;font-size:20px;letter-spacing:-.5px!important}.numeric-keyboard-key[data-key=\".\"],.numeric-keyboard-key[data-key=del]{background:#ededed;color:#4c4c4c}.numeric-keyboard-key[data-key=\".\"]:active,.numeric-keyboard-key[data-key=del]:active,.numeric-keyboard-key[data-key=enter]:active{background:#d5d5d5}.numeric-keyboard-key[data-icon]::before{content:attr(data-icon)}.numeric-keyboard-key[data-icon=del]::before,.numeric-keyboard-key[data-icon=esc]::before{display:block;content:\" \"}"]}]}],"members":{"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"entertext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"press":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":5}}]}],"enterpress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"dispatch":[{"__symbolic":"method"}],"onTouchend":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}]}},"NumericInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":52,"character":1},"arguments":[{"selector":"ng-numeric-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":58,"character":21},"useExisting":{"__symbolic":"reference","name":"NumericInputComponent"},"multi":true}],"template":"<div class=\"numeric-input-container\">\n <div class=\"numeric-input\" [class.readonly]=\"kp.readonly\" [class.disabled]=\"kp.disabled\" (touchend)=\"onFocus($event)\">\n <div>\n <div class=\"numeric-input-text\">\n <span class=\"input-text\" *ngFor=\"let value of ks.rawValue; let i = index; trackBy: trackByIndex\"\n [attr.data-index]=\"i\">\n {{ value }}\n </span>\n </div>\n <div *ngIf=\"ks.rawValue.length === 0\" class=\"numeric-input-placeholder\">\n <span class=\"typo-placeholder\">\n {{ kp.placeholder }}\n </span>\n </div>\n <div *ngIf=\"ks.cursorActive\" class=\"numeric-input-cursor blinking-cursor\"\n [style.background]=\"ks.cursorColor\">\n </div>\n </div>\n </div>\n</div>\n","styles":[".numeric-input-container{display:-webkit-box;display:flex;text-align:left}.numeric-input-container .numeric-input{display:block;background:0 0;width:100%;height:100%;padding:0;text-align:inherit}.numeric-input-container .numeric-input.disabled,.numeric-input-container .numeric-input.readonly{opacity:.5;pointer-events:none}.numeric-input-container .numeric-input>div{position:relative;overflow:hidden;height:100%}.numeric-input-container .numeric-input-placeholder{color:#757575}.numeric-input-container .numeric-input-text{width:10000%}.numeric-input-container .numeric-input-text .input-text{letter-spacing:-1.8px}.numeric-input-container .numeric-input-cursor{pointer-events:none;position:absolute;left:1px;top:1px;width:1px;height:90%;-webkit-animation:1s steps(1) infinite numeric-input-cursor;animation:1s steps(1) infinite numeric-input-cursor}.numeric-input-container .numeric-keyboard-actionsheet{position:fixed;bottom:0;left:0;width:100%;height:40%}.numeric-input-container .numeric-keyboard-actionsheet>div:first-child{height:100%}.numeric-input-container .numeric-keyboard-actionsheet>div:last-child{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translateY(100%);transform:translateY(100%);box-shadow:0 -2px 4px 0 #cfd4da}@-webkit-keyframes numeric-input-cursor{50%{background-color:transparent}}@keyframes numeric-input-cursor{50%{background-color:transparent}}"]}]}],"members":{"activeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"ngModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"entertext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":108,"character":5}}]}],"enterpress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"ngModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":117,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":118,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":119,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":120,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"trackByIndex":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"dispatch":[{"__symbolic":"method"}],"createKeyboard":[{"__symbolic":"method"}],"destroyKeyboard":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"onMounted":[{"__symbolic":"method"}],"onUpdated":[{"__symbolic":"method"}],"input":[{"__symbolic":"method"}],"moveCursor":[{"__symbolic":"method"}],"openKeyboard":[{"__symbolic":"method"}],"closeKeyboard":[{"__symbolic":"method"}]}},"NumericInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","name":"NumericInputComponent"},{"__symbolic":"reference","name":"NumericKeyboardComponent"}],"declarations":[{"__symbolic":"reference","name":"NumericInputComponent"},{"__symbolic":"reference","name":"NumericKeyboardComponent"}],"entryComponents":[{"__symbolic":"reference","name":"NumericKeyboardComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":21,"character":8}]}]}],"members":{}},"NgNumericKeyboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","name":"NumericInputModule"}]}]}],"members":{}}},"origins":{"NumericKeyboardComponent":"./lib/keyboard/keyboard.component","NumericInputComponent":"./lib/input/input.component","NumericInputModule":"./lib/numeric-input.module","NgNumericKeyboardModule":"./lib/ng-numeric-keyboard.module"},"importAs":"ng-numeric-keyboard"}