ngx-number-spinner
Version:
2 lines • 4.22 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-number-spinner",["exports","@angular/core","@angular/forms","@angular/common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["ngx-number-spinner"]={},e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,r,n){"use strict";var i=function(){function e(){this.value=0,this.step=1,this.direction="horizontal",this.change=new t.EventEmitter,this._propagateChange=function(){}}return e.prototype.writeValue=function(e){this.value=e||0},e.prototype.registerOnChange=function(e){this._propagateChange=e},e.prototype.registerOnTouched=function(e){this._onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.inc=function(){this.value+=this.step,this._onChange()},e.prototype.dec=function(){this.value-=this.step,this._onChange()},e.prototype._onChange=function(){this._propagateChange(this.value),this.change.emit(this.value)},e}();i.decorators=[{type:t.Component,args:[{selector:"ngx-number-spinner",template:'<div class="wrapper"\n [ngClass]="{ \'horizontal-wrapper\': direction === \'horizontal\', \'vertical-wrapper\': direction === \'vertical\' }">\n <button type="button"\n [class.ripple]="!min || value > min"\n (click)="dec()"\n [disabled]="value <= min">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/>\n </svg>\n </button>\n\n <div>{{ value }}</div>\n\n <button type="button"\n [class.ripple]="!max || value < max"\n (click)="inc()"\n [disabled]="value >= max">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M0 0h24v24H0z" fill="none"/>\n </svg>\n </button>\n</div>\n',providers:[{provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return i})),multi:!0}],styles:["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.wrapper button{border:0;overflow:hidden;padding:.5rem}.wrapper button:focus{outline:none}.wrapper button:disabled{cursor:not-allowed}.wrapper button:disabled svg{fill:rgba(0,0,0,.26)}.wrapper div{align-items:center;flex:1;font-size:1rem;min-width:30px;padding:0 .5rem;text-align:center;vertical-align:unset}.horizontal-wrapper{border:1px solid rgba(0,0,0,.12);border-radius:8px;display:flex;justify-content:space-between}.horizontal-wrapper button:first-child{border-bottom-left-radius:7px;border-top-left-radius:7px}.horizontal-wrapper button:last-child{border-bottom-right-radius:7px;border-top-right-radius:7px}.horizontal-wrapper div{border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);display:flex;justify-content:center}.vertical-wrapper button:first-child{border:1px solid rgba(0,0,0,.12);border-radius:10px 10px 0 0;width:100%}.vertical-wrapper button:last-child{border:1px solid rgba(0,0,0,.12);border-radius:0 0 10px 10px;width:100%}.vertical-wrapper div{border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);padding:.5rem}.ripple{background-position:50%;transition:background .3s}.ripple:hover{background:rgba(0,0,0,.12) radial-gradient(circle,transparent 1%,rgba(0,0,0,.12) 0) 50%/15000%;cursor:pointer}.ripple:active{background-color:rgba(0,0,0,.12);background-size:100%;transition:background 0s}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={value:[{type:t.Input,args:["value"]}],step:[{type:t.Input,args:["step"]}],min:[{type:t.Input,args:["min"]}],max:[{type:t.Input,args:["max"]}],direction:[{type:t.Input,args:["direction"]}],change:[{type:t.Output,args:["change"]}]};var o=function(){};o.decorators=[{type:t.NgModule,args:[{declarations:[i],exports:[i],imports:[n.CommonModule]}]}],e.NgxNumberSpinnerComponent=i,e.NgxNumberSpinnerModule=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-number-spinner.umd.min.js.map