{"version":3,"file":"sebgroup-green-angular-src-v-angular-pagination.mjs","sources":["../../../../libs/angular/src/v-angular/pagination/pagination.component.ts","../../../../libs/angular/src/v-angular/pagination/pagination.component.html","../../../../libs/angular/src/v-angular/pagination/pagination.module.ts","../../../../libs/angular/src/v-angular/pagination/sebgroup-green-angular-src-v-angular-pagination.ts"],"sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n} from '@angular/core'\n\nimport '@sebgroup/green-core/components/icon/icons/chevron-left.js'\nimport '@sebgroup/green-core/components/icon/icons/chevron-right.js'\nimport '@sebgroup/green-core/components/icon/icons/arrow-left.js'\n\n/** The Pagination component is used to separate long sets of data so that it is easier for a user to consume information. To change the current page simply click on the page number. */\n@Component({\n    selector: 'nggv-pagination',\n    templateUrl: './pagination.component.html',\n    styleUrls: ['./pagination.component.scss'],\n    standalone: false\n})\nexport class PaginationComponent implements OnChanges {\n  /** Total size of pagination */\n  @Input() size = 0\n  /** Selected page */\n  @Input() value = 1\n  /** First page text */\n  @Input() firstText?: string\n  /** Last page text */\n  @Input() lastText?: string\n  /** Next page text */\n  @Input() nextText?: string\n  /** Offset per page */\n  @Input() offset?: number\n  /** Number of pages to display*/\n  @Input() pagingLength?: number\n  /** Previous page text */\n  @Input() previousText?: string\n  /** Use first and last navigation buttons*/\n  @Input() useFirstAndLast?: boolean = true\n  /** Use text-based navigation buttons*/\n  @Input() useTextNav?: boolean\n  /** Use dot-navigation */\n  @Input() useDotNav?: boolean\n  /** Use 'Go to page' input field */\n  @Input() showGoToPage = true\n  /** Element class name */\n  @Input() className = ''\n  /** Element ID */\n  @Input() id?: string\n  /** Callback on page change */\n  @Output() pageNumberChange: EventEmitter<number> = new EventEmitter<number>()\n\n  /** @internal */\n  pageNumber = 0\n  /** @internal */\n  list: Array<number> = []\n  /** @internal */\n  dotnavList: Array<number> = []\n  /** @internal */\n  pagingSize = 0\n  /** @internal */\n  showEllipsisStart = false\n  /** @internal */\n  showEllipsisEnd = false\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes?.offset || changes?.size) {\n      this.setPagingSize()\n    }\n\n    if (changes?.pagingLength || changes?.value) {\n      this.generateList()\n    }\n  }\n\n  /** @internal */\n  setPagingSize() {\n    const initialOffset: number = this.offset ? this.offset : 10\n    this.pagingSize = Math.ceil(Number(this.size) / initialOffset)\n    this.generateList()\n  }\n\n  /** @internal */\n  handleOnChange(value: number): void {\n    if (value <= 0) {\n      this.pageNumberChange.emit(1)\n    } else if (value > this.pagingSize) {\n      this.pageNumberChange.emit(this.pagingSize)\n    } else {\n      this.pageNumberChange.emit(value)\n    }\n  }\n\n  /** @internal */\n  handlePageInput(pageInput: string) {\n    this.handleOnChange(Number(pageInput))\n  }\n\n  /**\n   * Generates an array of the pages that needs to be displayed\n   * It depends on the size, offset, and the current value\n   */\n  private generateList(): void {\n    const genList: Array<number> = []\n    const length: number = this.pagingLength ? this.pagingLength : 5\n\n    for (let i = 1; i <= this.pagingSize; i++) {\n      genList.push(i)\n    }\n\n    const medianValue: number = Math.ceil(length / 2)\n    let start = 0\n    let end = this.pagingSize\n\n    if (length < this.pagingSize) {\n      if (this.pagingSize - this.value < medianValue) {\n        start = this.pagingSize - length\n      } else if (this.value - medianValue > -1) {\n        start = this.value - medianValue\n      }\n      end = start + length\n    }\n    if (this.useFirstAndLast) {\n      if (start == 0) {\n        start = 1\n        end = start + length\n      }\n\n      if (end > this.pagingSize - 1) {\n        end = this.pagingSize - 1\n        start = Math.max(1, end - length)\n      }\n    }\n\n    this.dotnavList = genList\n    const pagingStart = genList[start]\n    const pagingEnd = genList[end - 1]\n    this.showEllipsisStart = pagingStart > 2\n    this.showEllipsisEnd = pagingEnd < this.pagingSize - 1\n    this.list = genList.slice(start, end)\n  }\n}\n","<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\n              class=\"page-dot-link\"\n              [ngClass]=\"{ active: value === num }\"\n            ></span>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-container>\n\n    <ng-template #numNav>\n      <ul class=\"pagination\">\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n            <button\n              class=\"page-link\"\n              [attr.title]=\"previousText\"\n              [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n            >\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n                  {{ previousText ? previousText : 'Previous' }}\n                </ng-container>\n                <ng-template #angleLeftIcon>\n                  <gds-icon-chevron-left\n                    *nggCoreElement\n                  ></gds-icon-chevron-left>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === 1 }\"\n              [attr.title]=\"firstText\"\n            >\n              <span class=\"nav-num\">{{ 1 }}</span>\n            </button>\n          </li>\n\n          <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n        </ng-container>\n\n        <ng-container *ngFor=\"let num of list\">\n          <li\n            class=\"page-item\"\n            [ngClass]=\"{ active: value === num }\"\n            (click)=\"handleOnChange(num)\"\n            value=\"num\"\n          >\n            <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n              <span class=\"nav-num\">{{ num }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n\n          <li\n            class=\"page-item\"\n            (click)=\"handleOnChange(pagingSize)\"\n            *ngIf=\"pagingSize > 1\"\n          >\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === pagingSize }\"\n              [attr.title]=\"lastText\"\n            >\n              <span class=\"nav-num\">{{ pagingSize }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container>\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\">\n                  {{ nextText ? nextText : 'Next' }}\n                </ng-container>\n                <ng-template #angleRightIcon>\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"showGoToPage\">\n          <li>\n            <div class=\"paging-input-wrapper\">\n              <div class=\"label-wrapper\">\n                <label for=\"pageInput\" *transloco=\"let t\">\n                  {{ t('label.gotopage') }}\n                </label>\n              </div>\n              <div class=\"input-wrapper\">\n                <input\n                  #pageInput\n                  data-thook=\"pagination-go-to-input\"\n                  min=\"1\"\n                  [max]=\"pagingSize\"\n                  id=\"pageInput\"\n                  class=\"gds-field\"\n                  type=\"number\"\n                  (keydown.enter)=\"handlePageInput(pageInput.value)\"\n                  [ngModel]=\"value\"\n                />\n                <button\n                  type=\"button\"\n                  data-thook=\"pagination-go-to-button\"\n                  (click)=\"handlePageInput(pageInput.value)\"\n                >\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </button>\n              </div>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-template>\n  </nav>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\nimport { FormsModule } from '@angular/forms'\nimport { TranslocoModule } from '@jsverse/transloco'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { PaginationComponent } from './pagination.component'\n\n@NgModule({\n  declarations: [PaginationComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    NggvI18nModule,\n    TranslocoModule,\n    NggCoreWrapperModule,\n  ],\n  exports: [PaginationComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvPaginationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}