[{"__symbolic":"module","version":3,"metadata":{"PaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"adm-pagination","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"host":{"class":"adm-pagination","aria-label":"Page navigation","$quoted$":["class","aria-label"]},"styles":[".adm-pagination { display: inline-block; } .adm-pagination__dropdown { width: 100px !important; margin: 0 15px; } .adm-pagination__layout tr > * { vertical-align: middle; } .adm-pagination__layout.simple tr td { padding: 0 5px; } .adm-pagination__layout.simple .adm-pagination__list { padding: 0 !important; } .adm-pagination__layout.simple .adm-pagination__list li button { font-size: 20px; padding: 5px 12px 8px; display: inline-block; } .adm-pagination__layout.simple .adm-input__container { margin: 0 !important; display: inline-block; vertical-align: middle; } .adm-pagination__layout.simple .adm-input__container input { width: 100px; } .adm-pagination__list { background: #fff; border: 1px solid #cfd3d7; border-radius: 3px; list-style: none; margin: 0; padding: 0; display: inline-block; padding: 4px 8px; user-select: none; } .adm-pagination__list > * { display: inline-block; vertical-align: middle; } .adm-pagination__list > * button { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; display: inline-block; font-size: 14px; padding: 5px 8px; cursor: pointer; border: 1px solid transparent; background: #fff; border-radius: 2px; line-height: 1; color: #444; } .adm-pagination__list > * button:hover { background: #ececec; } .adm-pagination__list > * button.is__active { background: #46bb00; color: #fff; cursor: default; pointer-events: none; } "],"template":"\n        <ng-template [ngIf]=\"_totalBtns && _totalBtns > 1\">\n            <table *ngIf=\"_totalBtns< 500;else paginationForAlotEls\" class=\"adm-pagination__layout\">\n                <tr>\n                    <ng-template [ngIf]=\"!showFullPagination && showDropdown\">\n                        <td>\n                            Go to page:\n                        </td>\n                        <td>\n                            <adm-single-select [options]=\"_range\" (onSelected)=\"setCurrent($event.value)\"\n                                        [ngModel]=\"_current\"\n                                        class=\"adm-pagination__dropdown\"\n                                        placeholder=\"Page\">\n                            </adm-single-select>\n                        </td>\n                        <!--<td style=\"padding-right:15px;\">-->\n                        <!--of {{this._totalBtns}}-->\n                        <!--</td>-->\n                    </ng-template>\n                    <td>\n                        <ul class=\"adm-pagination__list\">\n                            <ng-template [ngIf]=\"showPrevDots && !showFullPagination\">\n                                <li>\n                                    <button (click)=\"setCurrent(1)\" [disabled]=\"_current == 1\">{{titles.first}}\n                                    </button>\n                                </li>\n                                <li>...</li>\n                            </ng-template>\n                            <ng-template ngFor let-num [ngForOf]=\"_range\" let-i=\"index\" [ngForTrackBy]=\"trackByFn\">\n                                <li *ngIf=\"isShowNum(num.value) || showFullPagination\">\n                                    <button [class.is__active]=\"num.value == _current\"\n                                            (click)=\"setCurrent(num.value)\">\n                                        {{num.label}}\n                                    </button>\n                                </li>\n                            </ng-template>\n                            <ng-template [ngIf]=\"showNextDots && !showFullPagination\">\n                                <li>...</li>\n                                <li>\n                                    <button (click)=\"setCurrent(_totalBtns)\" [disabled]=\"_current == _totalBtns\">\n                                        {{titles.last}}\n                                    </button>\n                                </li>\n                            </ng-template>\n                        </ul>\n                    </td>\n                </tr>\n            </table>\n        </ng-template>\n        <ng-template #paginationForAlotEls>\n            <table class=\"adm-pagination__layout simple\">\n                <tr>\n                    <td>\n                        Page:\n                    </td>\n                    <td>\n                        <ul class=\"adm-pagination__list\" *ngIf=\"_current > 1\">\n                            <li>\n                                <button (click)=\"setCurrent(_current + -1)\" [disabled]=\"_current == _totalBtns\">\n                                    {{titles.prev}}\n                                </button>\n                            </li>\n                        </ul>\n                        <adm-input-container>\n                            <input type=\"number\" (keyup.enter)=\"setCurrent($event.target.value)\" adm\n                                   [ngModel]=\"_current\" placeholder=\"Page\">\n                        </adm-input-container>\n                        <ul class=\"adm-pagination__list\" *ngIf=\"_current < _totalBtns\">\n                            <li>\n                                <button (click)=\"setCurrent(_current + 1)\" [disabled]=\"_current == _totalBtns\">\n                                    {{titles.next}}\n                                </button>\n                            </li>\n                        </ul>\n                    </td>\n                    <td>\n                        of {{this._totalBtns}}\n                    </td>\n                </tr>\n            </table>\n        </ng-template>\n    "}]}],"members":{"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemsPerPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"current":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"currentChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"titles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onPageChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRange":[{"__symbolic":"method"}],"isShowNum":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"adm-pagination","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"host":{"class":"adm-pagination","aria-label":"Page navigation"},"styles":[".adm-pagination { display: inline-block; } .adm-pagination__dropdown { width: 100px !important; margin: 0 15px; } .adm-pagination__layout tr > * { vertical-align: middle; } .adm-pagination__layout.simple tr td { padding: 0 5px; } .adm-pagination__layout.simple .adm-pagination__list { padding: 0 !important; } .adm-pagination__layout.simple .adm-pagination__list li button { font-size: 20px; padding: 5px 12px 8px; display: inline-block; } .adm-pagination__layout.simple .adm-input__container { margin: 0 !important; display: inline-block; vertical-align: middle; } .adm-pagination__layout.simple .adm-input__container input { width: 100px; } .adm-pagination__list { background: #fff; border: 1px solid #cfd3d7; border-radius: 3px; list-style: none; margin: 0; padding: 0; display: inline-block; padding: 4px 8px; user-select: none; } .adm-pagination__list > * { display: inline-block; vertical-align: middle; } .adm-pagination__list > * button { border: 0; padding: 0; box-shadow: none; outline: none !important; background: transparent; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; display: inline-block; font-size: 14px; padding: 5px 8px; cursor: pointer; border: 1px solid transparent; background: #fff; border-radius: 2px; line-height: 1; color: #444; } .adm-pagination__list > * button:hover { background: #ececec; } .adm-pagination__list > * button.is__active { background: #46bb00; color: #fff; cursor: default; pointer-events: none; } "],"template":"\n        <ng-template [ngIf]=\"_totalBtns && _totalBtns > 1\">\n            <table *ngIf=\"_totalBtns< 500;else paginationForAlotEls\" class=\"adm-pagination__layout\">\n                <tr>\n                    <ng-template [ngIf]=\"!showFullPagination && showDropdown\">\n                        <td>\n                            Go to page:\n                        </td>\n                        <td>\n                            <adm-single-select [options]=\"_range\" (onSelected)=\"setCurrent($event.value)\"\n                                        [ngModel]=\"_current\"\n                                        class=\"adm-pagination__dropdown\"\n                                        placeholder=\"Page\">\n                            </adm-single-select>\n                        </td>\n                        <!--<td style=\"padding-right:15px;\">-->\n                        <!--of {{this._totalBtns}}-->\n                        <!--</td>-->\n                    </ng-template>\n                    <td>\n                        <ul class=\"adm-pagination__list\">\n                            <ng-template [ngIf]=\"showPrevDots && !showFullPagination\">\n                                <li>\n                                    <button (click)=\"setCurrent(1)\" [disabled]=\"_current == 1\">{{titles.first}}\n                                    </button>\n                                </li>\n                                <li>...</li>\n                            </ng-template>\n                            <ng-template ngFor let-num [ngForOf]=\"_range\" let-i=\"index\" [ngForTrackBy]=\"trackByFn\">\n                                <li *ngIf=\"isShowNum(num.value) || showFullPagination\">\n                                    <button [class.is__active]=\"num.value == _current\"\n                                            (click)=\"setCurrent(num.value)\">\n                                        {{num.label}}\n                                    </button>\n                                </li>\n                            </ng-template>\n                            <ng-template [ngIf]=\"showNextDots && !showFullPagination\">\n                                <li>...</li>\n                                <li>\n                                    <button (click)=\"setCurrent(_totalBtns)\" [disabled]=\"_current == _totalBtns\">\n                                        {{titles.last}}\n                                    </button>\n                                </li>\n                            </ng-template>\n                        </ul>\n                    </td>\n                </tr>\n            </table>\n        </ng-template>\n        <ng-template #paginationForAlotEls>\n            <table class=\"adm-pagination__layout simple\">\n                <tr>\n                    <td>\n                        Page:\n                    </td>\n                    <td>\n                        <ul class=\"adm-pagination__list\" *ngIf=\"_current > 1\">\n                            <li>\n                                <button (click)=\"setCurrent(_current + -1)\" [disabled]=\"_current == _totalBtns\">\n                                    {{titles.prev}}\n                                </button>\n                            </li>\n                        </ul>\n                        <adm-input-container>\n                            <input type=\"number\" (keyup.enter)=\"setCurrent($event.target.value)\" adm\n                                   [ngModel]=\"_current\" placeholder=\"Page\">\n                        </adm-input-container>\n                        <ul class=\"adm-pagination__list\" *ngIf=\"_current < _totalBtns\">\n                            <li>\n                                <button (click)=\"setCurrent(_current + 1)\" [disabled]=\"_current == _totalBtns\">\n                                    {{titles.next}}\n                                </button>\n                            </li>\n                        </ul>\n                    </td>\n                    <td>\n                        of {{this._totalBtns}}\n                    </td>\n                </tr>\n            </table>\n        </ng-template>\n    "}]}],"members":{"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemsPerPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"current":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"currentChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"titles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onPageChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"getRange":[{"__symbolic":"method"}],"isShowNum":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}]}}}}]