{"__symbolic":"module","version":4,"metadata":{"PaginationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":5,"character":14}],"declarations":[{"__symbolic":"reference","name":"PaginationComponent"}],"exports":[{"__symbolic":"reference","name":"PaginationComponent"}]}]}],"members":{}},"PaginationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sebng-pagination","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":7,"character":19},"member":"None"},"template":"<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n    <nav class=\"custom-pagination\">\n        <ng-container *ngIf=\"useDotNav; else numNav\">\n            <ul class=\"pagination dotnav\">\n                <ng-container *ngFor=\"let num of dotnavList\">\n                    <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n                        <span class=\"page-dot-link\" [ngClass]=\"{ active: value === num }\"></span>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n        <ng-template #numNav>\n            <ul class=\"pagination\">\n                <ng-container *ngIf=\"value !== 1 && useFirstAndLast\">\n                    <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n                        <button class=\"page-link\" [attr.title]=\"firstText\">\n                            <span class=\"nav-action\">\n                                <ng-container *ngIf=\"useTextNav; else angleDoubleLeftIcon\">\n                                    {{ firstText ? firstText : \"First\" }}\n                                </ng-container>\n\n                                <ng-template #angleDoubleLeftIcon>\n                                    <svg name=\"angle-double-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                                        <path\n                                            d=\"M153.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L192.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L153 264.5c-4.6-4.7-4.6-12.3.1-17zm-128 17l117.8 116c4.7 4.7 12.3 4.7 17 0l7.1-7.1c4.7-4.7 4.7-12.3 0-17L64.7 256l102.2-100.4c4.7-4.7 4.7-12.3 0-17l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L25 247.5c-4.6 4.7-4.6 12.3.1 17z\"\n                                        />\n                                    </svg>\n                                </ng-template>\n                            </span>\n                            <span class=\"sr-only\">{{ firstText || \"First\" }}</span>\n                        </button>\n                    </li>\n                </ng-container>\n                <ng-container *ngIf=\"value !== 1\">\n                    <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n                        <button class=\"page-link\" [attr.title]=\"previousText\">\n                            <span class=\"nav-action\">\n                                <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n                                    {{ previousText ? previousText : \"Previous\" }}\n                                </ng-container>\n                                <ng-template #angleLeftIcon>\n                                    <svg name=\"angle-left\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 192 512\">\n                                        <path\n                                            d=\"M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z\"\n                                        />\n                                    </svg>\n                                </ng-template>\n                            </span>\n                            <span class=\"sr-only\">{{ previousText || \"Previous\" }}</span>\n                        </button>\n                    </li>\n                </ng-container>\n                <ng-container *ngFor=\"let num of list\">\n                    <li class=\"page-item\" [ngClass]=\"{ active: value === num }\" (click)=\"handleOnChange(num)\" value=\"num\">\n                        <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n                            <span class=\"nav-num\">{{ num }}</span>\n                            <span class=\"sr-only\">{{ num }}</span>\n                        </button>\n                    </li>\n                </ng-container>\n                <ng-container *ngIf=\"value !== pagingSize\">\n                    <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n                        <button class=\"page-link\" [attr.title]=\"nextText\">\n                            <span class=\"nav-action\">\n                                <ng-container *ngIf=\"useTextNav; else angleRightIcon\"> {{ nextText ? nextText : \"Next\" }} </ng-container>\n                                <ng-template #angleRightIcon>\n                                    <svg name=\"angle-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 192 512\">\n                                        <path\n                                            d=\"M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z\"\n                                        />\n                                    </svg>\n                                </ng-template>\n                            </span>\n\n                            <span class=\"sr-only\">{{ nextText || \"Next\" }}</span>\n                        </button>\n                    </li>\n                </ng-container>\n                <ng-container *ngIf=\"value !== pagingSize && useFirstAndLast\">\n                    <li class=\"page-item\" (click)=\"handleOnChange(pagingSize)\">\n                        <button class=\"page-link\" [attr.title]=\"lastText\">\n                            <span class=\"nav-action\">\n                                <ng-container *ngIf=\"useTextNav; else angleDoubleRightIcon\">\n                                    {{ lastText ? lastText : \"Last\" }}\n                                </ng-container>\n                                <ng-template #angleDoubleRightIcon class=\"na-action\">\n                                    <svg name=\"angle-double-right\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                                        <path\n                                            d=\"M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17zm128-17l-117.8-116c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17L255.3 256 153.1 356.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l117.8-116c4.6-4.7 4.6-12.3-.1-17z\"\n                                        />\n                                    </svg>\n                                </ng-template>\n                            </span>\n                            <span class=\"sr-only\">{{ lastText || \"Last\" }}</span>\n                        </button>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n    </nav>\n</div>\n","styles":[".pagination-wrapper>.custom-pagination>.pagination{margin:0}.pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center}.pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}.pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}.pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action>svg{width:16px;height:16px;fill:#007ac7}.pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover svg{fill:#fff}.pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}.pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all .2s;margin:0 auto;will-change:transform}.pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link.active{background-color:#007ac7;cursor:default;transform:scale(1.3)}.pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link:hover:not(.active){background-color:#41b0ee}\n"]}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"firstText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"lastText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"nextText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"pagingLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"previousText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"useDotNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"useFirstAndLast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"useTextNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":5}}]}],"setPagingSize":[{"__symbolic":"method"}],"generateList":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"handleOnChange":[{"__symbolic":"method"}]}}},"origins":{"PaginationModule":"./pagination.module","PaginationComponent":"./pagination.component"},"importAs":"@sebgroup/ng-components/lib/pagination"}