UNPKG

@cloukit/pagination

Version:

8 lines 8.56 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@cloukit/theme"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@cloukit/pagination",["exports","@cloukit/theme","@angular/core","@angular/common"],t):t((e.cloukit=e.cloukit||{},e.cloukit.pagination={}),e.theme,e.ng.core,e.ng.common)}(this,function(e,n,i,t){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(e,t)}; /*! * @license MIT * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io * https://github.com/cloukit/legal */ var r=function(e,t){this.type=e,this.page=t},s={normal:1,previous:2,next:3};s[s.normal]="normal",s[s.previous]="previous",s[s.next]="next";var l=function(e,t,i,n){this.page=e,this.isActive=t,this.isFiller=i,this.label=n},a=function(){function e(){}return e.elements={filler:"filler",button:"button",wrapper:"wrapper"},e.states={normal:"normal",active:"active",disabled:"disabled"},e.modifier={base:"base",hover:"hover"},e}(),u=function(t){function e(){var e=t.call(this)||this;return e.buildStyle(a.elements.wrapper,a.states.normal,a.modifier.base).withStyles({display:"flex"}),e.buildStyle(a.elements.button,a.states.normal,a.modifier.base).withStyles({alignSelf:"center",display:"inline-flex",flexWrap:"nowrap",maxWidth:"100%",color:"#0052cc",textDecoration:"none",fontStyle:"normal",fontSize:"inherit",margin:0,outline:"none",textAlign:"center",userSelect:"none",verticalAlign:"middle",whiteSpace:"nowrap",boxSizing:"border-box",padding:"2px 6px 3px",border:0,backgroundColor:"transparent",cursor:"pointer"}),e.buildStyle(a.elements.button,a.states.active,a.modifier.base).inheritFrom(a.elements.button,a.states.normal,a.modifier.base).withStyles({backgroundColor:"#0052cc",color:"#ffffff",cursor:"default"}),e.buildStyle(a.elements.button,a.states.normal,a.modifier.hover).inheritFrom(a.elements.button,a.states.normal,a.modifier.base).withStyles({textDecoration:"underline"}),e.buildStyle(a.elements.button,a.states.disabled,a.modifier.base).inheritFrom(a.elements.button,a.states.normal,a.modifier.base).withStyles({color:"#777",cursor:"not-allowed"}),e.buildStyle(a.elements.filler,a.states.normal,a.modifier.base).inheritFrom(a.elements.button,a.states.normal,a.modifier.base).withStyles({color:"#555",cursor:"default"}),e.buildStyle(a.elements.filler,a.states.disabled,a.modifier.base).inheritFrom(a.elements.filler,a.states.normal,a.modifier.base).withStyles({color:"#efefef",cursor:"not-allowed"}),e}return function(e,t){function i(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}(e,t),e}(n.CloukitComponentTheme),p=function(){return new l(-1,!1,!0,"...")},m=function(e,t){return new l(e,t,!1,""+e)},c=function(e,t){var i=[];if(e===undefined||null===e||t===undefined||null===t)return i;if(e<=7)for(var n=1;n<=e;n++)i.push(new l(n,t===n,!1,""+n));else if(7<e&&t<=4){for(n=1;n<=5;n++)i.push(m(n,t===n));i.push(p()),i.push(m(e,!1))}else if(7<e&&4<t&&e<=t+3){i.push(m(1,!1)),i.push(p());for(n=e-4;n<=e;n++)i.push(m(n,t===n))}else 7<e&&4<t&&(i.push(m(1,!1)),i.push(p()),i.push(m(t-1,!1)),i.push(m(t,!0)),i.push(m(t+1,!1)),i.push(p()),i.push(m(e,!1)));return i},h=function(){function e(e){this.themeService=e,this.disabled=!1,this.onPageSelect=new i.EventEmitter,this.PaginationButtonType=s,this.state={pages:[]},this.themeSelected=this.themeService.getComponentTheme("pagination")}return e.prototype.getStyle=function(e){var t=this.themeSelected.getStyle(e,"normal","base");return this.themeService.prefixStyle(t)},e.prototype.ngOnChanges=function(){this.theme!==undefined&&null!==this.theme&&(this.themeSelected=this.themeService.getComponentTheme(this.theme),null===this.themeSelected&&(console.log("WARN: requested theme "+this.theme+" does not exist. Falling back to default theme for pagination."),this.themeSelected=this.themeService.getComponentTheme("pagination"))),this.state.pages=c(this.total,this.current)},e.prototype.selectPage=function(e){e.type===s.previous&&this.isPreviousPossible()?this.onPageSelect.emit(this.current-1):e.type===s.next&&this.isNextPossible()?this.onPageSelect.emit(this.current+1):e.type===s.normal&&this.onPageSelect.emit(e.page)},e.prototype.previousDummyPaginationItem=function(){var e="Prev";return this.labelPrev!==undefined&&null!==this.labelPrev&&(e=this.labelPrev),new l(-1,!1,!1,e)},e.prototype.nextDummyPaginationItem=function(){var e="Next";return this.labelNext!==undefined&&null!==this.labelNext&&(e=this.labelNext),new l(-1,!1,!1,e)},e.prototype.isPreviousPossible=function(){return 1<this.current},e.prototype.isNextPossible=function(){return this.current<this.total},e.decorators=[{type:i.Component,args:[{selector:"cloukit-pagination",template:'\n <div [ngStyle]="getStyle(\'wrapper\').style">\n <cloukit-pagination-button\n [disabled]="!isPreviousPossible() || disabled"\n [paginationItem]="previousDummyPaginationItem()"\n [themeSelected]="themeSelected"\n [type]="PaginationButtonType[\'previous\']"\n (clicked)="selectPage($event)"\n ></cloukit-pagination-button>\n <cloukit-pagination-button\n *ngFor="let page of state.pages"\n [disabled]="disabled"\n [paginationItem]="page"\n [themeSelected]="themeSelected"\n [type]="PaginationButtonType[\'normal\']"\n (clicked)="selectPage($event)"\n ></cloukit-pagination-button>\n <cloukit-pagination-button\n [disabled]="!isNextPossible() || disabled"\n [paginationItem]="nextDummyPaginationItem()"\n [themeSelected]="themeSelected"\n [type]="PaginationButtonType[\'next\']"\n (clicked)="selectPage($event)"\n ></cloukit-pagination-button>\n </div>'}]}],e.ctorParameters=function(){return[{type:n.CloukitThemeService}]},e.propDecorators={theme:[{type:i.Input}],total:[{type:i.Input}],current:[{type:i.Input}],disabled:[{type:i.Input}],labelNext:[{type:i.Input}],labelPrev:[{type:i.Input}],onPageSelect:[{type:i.Output}]},e}(),d=function(){function t(e){this.themeService=e,this.clicked=new i.EventEmitter,this.isMouseStillOver=!1}return t.transform=function(e){if(e===undefined||null===e)return new n.UiElement(a.elements.filler,a.states.disabled,a.modifier.base);var t=e.isFiller?a.elements.filler:a.elements.button,i=e.isActive?a.states.active:a.states.normal;return new n.UiElement(t,i,a.modifier.base)},t.prototype.updateStyle=function(){var e=this.themeSelected.getUiStyle(this.ui);null!==e&&(this.style=this.themeService.prefixStyle(e))},t.prototype.ngOnChanges=function(){var e=null;null!==this.ui&&this.ui!==undefined&&(e=this.ui.modifier),this.ui=t.transform(this.paginationItem),null!==e&&this.isMouseStillOver&&(this.ui.modifier=e),!0===this.disabled&&(this.ui.state=a.states.disabled,this.ui.modifier=a.modifier.base),this.updateStyle()},t.prototype.mouseEnter=function(){this.ui.modifier=a.modifier.hover,this.isMouseStillOver=!0,this.updateStyle()},t.prototype.mouseLeave=function(){this.ui.modifier=a.modifier.base,this.isMouseStillOver=!1,this.updateStyle()},t.prototype.doClick=function(){this.paginationItem.isFiller||this.clicked.emit(new r(this.type,this.paginationItem.page))},t.decorators=[{type:i.Component,args:[{selector:"cloukit-pagination-button",template:'\n <button\n type="button"\n [disabled]="disabled"\n [ngStyle]="style?.style"\n (click)="doClick()"\n (mouseenter)="mouseEnter()"\n (mouseleave)="mouseLeave()"\n >\n {{paginationItem.label}}\n </button>'}]}],t.ctorParameters=function(){return[{type:n.CloukitThemeService}]},t.propDecorators={disabled:[{type:i.Input}],type:[{type:i.Input}],paginationItem:[{type:i.Input}],themeSelected:[{type:i.Input}],clicked:[{type:i.Output}]},t}(),f=function(){function e(e){this.themeService=e,null===this.themeService.getComponentTheme("pagination")&&this.themeService.registerComponentTheme("pagination",new u)}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule],exports:[h],declarations:[h,d]}]}],e.ctorParameters=function(){return[{type:n.CloukitThemeService}]},e}();e.CloukitPaginationComponentThemeDefault=u,e.CloukitPaginationComponent=h,e.CloukitPaginationModule=f,e.PaginationButtonClickEvent=r,e.PaginationButtonType=s,e.PaginationItem=l,e.Ui=a,e.CloukitPaginationButtonComponent=d,e.calculatePaginationItems=c,e.createFiller=p,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=cloukit-pagination.umd.min.js.map