1import { 2 PaginationComponent, 3 PaginationModule 4} from "./chunk-F5B52QLV.js"; 5import { 6 CodeExampleComponent, 7 ComponentExampleComponent, 8 DescriptionComponent, 9 DocPageComponent, 10 DocsSectionTitleComponent, 11 HeaderComponent, 12 HeaderTabsComponent, 13 ImportComponent, 14 PlayGroundComponent, 15 SchemaFactoryService, 16 SegmentedButtonComponent, 17 SegmentedButtonModule, 18 SeparatorComponent, 19 getAssetFromModuleAssets 20} from "./chunk-K3LHL6EA.js"; 21import "./chunk-766TVXPR.js"; 22import { 23 FormsModule, 24 NgControlStatus, 25 NgModel, 26 ToolbarItemDirective 27} from "./chunk-NI7U2CKV.js"; 28import { 29 ButtonComponent, 30 ChangeDetectionStrategy, 31 ChangeDetectorRef, 32 Component, 33 ViewChild, 34 delay, 35 inject, 36 of, 37 setClassMetadata, 38 tap, 39 ɵsetClassDebugInfo, 40 ɵɵadvance, 41 ɵɵattribute, 42 ɵɵconditional, 43 ɵɵconditionalCreate, 44 ɵɵcontrol, 45 ɵɵcontrolCreate, 46 ɵɵdefineComponent, 47 ɵɵdirectiveInject, 48 ɵɵelement, 49 ɵɵelementEnd, 50 ɵɵelementStart, 51 ɵɵgetCurrentView, 52 ɵɵlistener, 53 ɵɵloadQuery, 54 ɵɵnextContext, 55 ɵɵproperty, 56 ɵɵpureFunction0, 57 ɵɵqueryRefresh, 58 ɵɵreference, 59 ɵɵrepeater, 60 ɵɵrepeaterCreate, 61 ɵɵrepeaterTrackByIdentity, 62 ɵɵresetView, 63 ɵɵrestoreView, 64 ɵɵtemplate, 65 ɵɵtemplateRefExtractor, 66 ɵɵtext, 67 ɵɵtextInterpolate, 68 ɵɵtextInterpolate3, 69 ɵɵviewQuery 70} from "./chunk-BYGBOVNF.js"; 71import "./chunk-5OPBC4KR.js"; 72
73// libs/docs/core/pagination/examples/pagination-example.component.ts 74function PaginationExampleComponent_Conditional_2_Template(rf, ctx) { 75 if (rf & 1) { 76 \u0275\u0275elementStart(0, "div"); 77 \u0275\u0275text(1); 78 \u0275\u0275elementEnd(); 79 } 80 if (rf & 2) { 81 const ctx_r0 = \u0275\u0275nextContext(); 82 \u0275\u0275advance(); 83 \u0275\u0275textInterpolate(ctx_r0.notification); 84 } 85} 86var PaginationExampleComponent = class _PaginationExampleComponent { 87 constructor() { 88 this.totalItems = 50; 89 this.itemsPerPage = 10; 90 this.currentPage = 5; 91 this.notification = ""; 92 this._cdr = inject(ChangeDetectorRef); 93 } 94 newPageClicked(event) { 95 of(1).pipe(tap(() => { 96 this.notification = "loading..."; 97 }), delay(1e3)).subscribe(() => { 98 this.currentPage = event; 99 this.notification = "page change success!"; 100 this._cdr.detectChanges(); 101 }, () => { 102 this.notification = "page change error!"; 103 this._cdr.detectChanges(); 104 }, () => { 105 this.notification = "New page selected: " + this.currentPage; 106 this._cdr.detectChanges(); 107 }); 108 } 109 goToPage(page) { 110 this.paginationComponent.goToPage(page); 111 } 112 static { 113 this.\u0275fac = function PaginationExampleComponent_Factory(__ngFactoryType__) { 114 return new (__ngFactoryType__ || _PaginationExampleComponent)(); 115 }; 116 } 117 static { 118 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _PaginationExampleComponent, selectors: [["fd-pagination-example"]], viewQuery: function PaginationExampleComponent_Query(rf, ctx) { 119 if (rf & 1) { 120 \u0275\u0275viewQuery(PaginationComponent, 5); 121 } 122 if (rf & 2) { 123 let _t; 124 \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.paginationComponent = _t.first); 125 } 126 }, decls: 3, vars: 4, consts: [["ariaLabel", "Basic pagination example", 3, "pageChangeStart", "displayTotalItems", "totalItems", "currentPage"], ["fd-button", "", "label", "Go to page 1", 3, "click"]], template: function PaginationExampleComponent_Template(rf, ctx) { 127 if (rf & 1) { 128 \u0275\u0275elementStart(0, "fd-pagination", 0); 129 \u0275\u0275listener("pageChangeStart", function PaginationExampleComponent_Template_fd_pagination_pageChangeStart_0_listener($event) { 130 return ctx.newPageClicked($event); 131 }); 132 \u0275\u0275elementEnd(); 133 \u0275\u0275elementStart(1, "button", 1); 134 \u0275\u0275listener("click", function PaginationExampleComponent_Template_button_click_1_listener() { 135 return ctx.goToPage(1); 136 }); 137 \u0275\u0275elementEnd(); 138 \u0275\u0275conditionalCreate(2, PaginationExampleComponent_Conditional_2_Template, 2, 1, "div"); 139 } 140 if (rf & 2) { 141 \u0275\u0275property("displayTotalItems", false)("totalItems", ctx.totalItems)("currentPage", ctx.currentPage); 142 \u0275\u0275advance(2); 143 \u0275\u0275conditional(ctx.notification ? 2 : -1); 144 } 145 }, dependencies: [PaginationModule, PaginationComponent, ButtonComponent], encapsulation: 2 }); 146 } 147}; 148(() => { 149 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PaginationExampleComponent, [{ 150 type: Component, 151 args: [{ 152 selector: "fd-pagination-example", 153 changeDetection: ChangeDetectionStrategy.OnPush, 154 template: ` 155 <fd-pagination 156 [displayTotalItems]="false" 157 [totalItems]="totalItems" 158 (pageChangeStart)="newPageClicked($event)" 159 [currentPage]="currentPage" 160 ariaLabel="Basic pagination example" 161 ></fd-pagination> 162 <button fd-button label="Go to page 1" (click)="goToPage(1)"></button> 163 @if (notification) { 164 <div>{{ notification }}</div> 165 } 166 `, 167 imports: [PaginationModule, ButtonComponent] 168 }] 169 }], null, { paginationComponent: [{ 170 type: ViewChild, 171 args: [PaginationComponent] 172 }] }); 173})(); 174(() => { 175 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(PaginationExampleComponent, { className: "PaginationExampleComponent", filePath: "libs/docs/core/pagination/examples/pagination-example.component.ts", lineNumber: 25 }); 176})(); 177
178// libs/docs/core/pagination/examples/pagination-mobile/pagination-mobile-example.component.ts 179var _c0 = () => [4, 8, 16]; 180var PaginationMobileExampleComponent = class _PaginationMobileExampleComponent { 181 constructor() { 182 this.totalItems = 50; 183 this.currentPage = 2; 184 } 185 onPageChange(page) { 186 this.currentPage = page; 187 } 188 static { 189 this.\u0275fac = function PaginationMobileExampleComponent_Factory(__ngFactoryType__) { 190 return new (__ngFactoryType__ || _PaginationMobileExampleComponent)(); 191 }; 192 } 193 static { 194 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _PaginationMobileExampleComponent, selectors: [["fd-pagination-mobile-example"]], decls: 1, vars: 6, consts: [["fd-toolbar-item", "", 3, "pageChangeStart", "mobile", "totalItems", "itemsPerPage", "currentPage", "itemsPerPageOptions"]], template: function PaginationMobileExampleComponent_Template(rf, ctx) { 195 if (rf & 1) { 196 \u0275\u0275elementStart(0, "fd-pagination", 0); 197 \u0275\u0275listener("pageChangeStart", function PaginationMobileExampleComponent_Template_fd_pagination_pageChangeStart_0_listener($event) { 198 return ctx.onPageChange($event); 199 }); 200 \u0275\u0275elementEnd(); 201 } 202 if (rf & 2) { 203 \u0275\u0275property("mobile", true)("totalItems", ctx.totalItems)("itemsPerPage", 4)("currentPage", ctx.currentPage)("itemsPerPageOptions", \u0275\u0275pureFunction0(5, _c0)); 204 } 205 }, dependencies: [PaginationModule, PaginationComponent, ToolbarItemDirective], encapsulation: 2 }); 206 } 207}; 208(() => { 209 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PaginationMobileExampleComponent, [{ 210 type: Component, 211 args: [{ selector: "fd-pagination-mobile-example", imports: [PaginationModule, ToolbarItemDirective], template: '<fd-pagination\n fd-toolbar-item\n [mobile]="true"\n [totalItems]="totalItems"\n [itemsPerPage]="4"\n [currentPage]="currentPage"\n [itemsPerPageOptions]="[4, 8, 16]"\n (pageChangeStart)="onPageChange($event)"\n></fd-pagination>\n' }] 212 }], null, null); 213})(); 214(() => { 215 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(PaginationMobileExampleComponent, { className: "PaginationMobileExampleComponent", filePath: "libs/docs/core/pagination/examples/pagination-mobile/pagination-mobile-example.component.ts", lineNumber: 10 }); 216})(); 217
218// libs/docs/core/pagination/examples/pagination-per-page/pagination-per-page-example.component.ts 219var _c02 = () => [4, 8, 16]; 220var _c1 = () => [2, 5, 100]; 221function PaginationPerPageExampleComponent_ng_template_27_For_2_Template(rf, ctx) { 222 if (rf & 1) { 223 \u0275\u0275element(0, "button", 6); 224 } 225 if (rf & 2) { 226 const count_r4 = ctx.$implicit; 227 \u0275\u0275property("label", count_r4 + ""); 228 \u0275\u0275attribute("aria-label", "Show " + count_r4 + " items per page")("value", count_r4); 229 } 230} 231function PaginationPerPageExampleComponent_ng_template_27_Template(rf, ctx) { 232 if (rf & 1) { 233 const _r1 = \u0275\u0275getCurrentView(); 234 \u0275\u0275elementStart(0, "fd-segmented-button", 5); 235 \u0275\u0275listener("ngModelChange", function PaginationPerPageExampleComponent_ng_template_27_Template_fd_segmented_button_ngModelChange_0_listener($event) { 236 const onSelect_r2 = \u0275\u0275restoreView(_r1).onSelect; 237 const ctx_r2 = \u0275\u0275nextContext(); 238 onSelect_r2($event); 239 return \u0275\u0275resetView(ctx_r2.customItemsPerPage = $event); 240 }); 241 \u0275\u0275repeaterCreate(1, PaginationPerPageExampleComponent_ng_template_27_For_2_Template, 1, 3, "button", 6, \u0275\u0275repeaterTrackByIdentity); 242 \u0275\u0275elementEnd(); 243 \u0275\u0275controlCreate(); 244 } 245 if (rf & 2) { 246 const pageOptions_r5 = ctx.pageOptions; 247 const ctx_r2 = \u0275\u0275nextContext(); 248 \u0275\u0275property("ngModel", ctx_r2.customItemsPerPage); 249 \u0275\u0275control(); 250 \u0275\u0275advance(); 251 \u0275\u0275repeater(pageOptions_r5); 252 } 253} 254var PaginationPerPageExampleComponent = class _PaginationPerPageExampleComponent { 255 constructor() { 256 this.totalItems = 150; 257 this.currentPage1 = 2; 258 this.currentPage2 = 2; 259 this.currentPage3 = 2; 260 this.customItemsPerPage = 5; 261 } 262 pageChanged1(event) { 263 this.currentPage1 = event; 264 } 265 pageChanged2(event) { 266 this.currentPage2 = event; 267 } 268 pageChanged3(event) { 269 this.currentPage3 = event; 270 } 271 static { 272 this.\u0275fac = function PaginationPerPageExampleComponent_Factory(__ngFactoryType__) { 273 return new (__ngFactoryType__ || _PaginationPerPageExampleComponent)(); 274 }; 275 } 276 static { 277 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _PaginationPerPageExampleComponent, selectors: [["fd-pagination-per-page-example"]], decls: 29, vars: 14, consts: [["pagination", ""], ["itemsPerPageCustom", ""], ["fd-toolbar-item", "", "ariaLabel", "Pagination with itemsPerPage property", 3, "pageChangeStart", "totalItems", "itemsPerPage", "currentPage"], ["fd-toolbar-item", "", "ariaLabel", "Pagination with itemsPerPageOptions property", 3, "pageChangeStart", "totalItems", "itemsPerPage", "itemsPerPageOptions", "currentPage"], ["fd-toolbar-item", "", "ariaLabel", "Pagination with custom items", 3, "pageChangeStart", "totalItems", "currentPage", "itemsPerPage", "itemsPerPageOptions", "itemsPerPageTemplate"], [3, "ngModelChange", "ngModel"], ["fd-button", "", 3, "label"]], template: function PaginationPerPageExampleComponent_Template(rf, ctx) { 278 if (rf & 1) { 279 \u0275\u0275elementStart(0, "div")(1, "h3")(2, "code"); 280 \u0275\u0275text(3, "[itemsPerPage]=15"); 281 \u0275\u0275elementEnd(); 282 \u0275\u0275text(4, " Default property for items per page"); 283 \u0275\u0275elementEnd(); 284 \u0275\u0275elementStart(5, "fd-pagination", 2); 285 \u0275\u0275listener("pageChangeStart", function PaginationPerPageExampleComponent_Template_fd_pagination_pageChangeStart_5_listener($event) { 286 return ctx.pageChanged1($event); 287 }); 288 \u0275\u0275elementEnd()(); 289 \u0275\u0275elementStart(6, "div")(7, "h3")(8, "code"); 290 \u0275\u0275text(9, '[itemsPerPageOptions]="[4,8,16]"'); 291 \u0275\u0275elementEnd(); 292 \u0275\u0275text(10, " - Default select template for items per page options"); 293 \u0275\u0275elementEnd(); 294 \u0275\u0275elementStart(11, "fd-pagination", 3); 295 \u0275\u0275listener("pageChangeStart", function PaginationPerPageExampleComponent_Template_fd_pagination_pageChangeStart_11_listener($event) { 296 return ctx.pageChanged2($event); 297 }); 298 \u0275\u0275elementEnd()(); 299 \u0275\u0275elementStart(12, "div")(13, "h3"); 300 \u0275\u0275text(14, "Custom items per page - list of buttons"); 301 \u0275\u0275elementEnd(); 302 \u0275\u0275elementStart(15, "p"); 303 \u0275\u0275text(16, "Use "); 304 \u0275\u0275elementStart(17, "code"); 305 \u0275\u0275text(18, 'let-pageOptions="pageOptions"'); 306 \u0275\u0275elementEnd(); 307 \u0275\u0275text(19, " on the template to get the list of options from component"); 308 \u0275\u0275elementEnd(); 309 \u0275\u0275elementStart(20, "p");
310 \u0275\u0275text(21, "Use "); 311 \u0275\u0275elementStart(22, "code"); 312 \u0275\u0275text(23, 'let-onSelect="onSelect"'); 313 \u0275\u0275elementEnd(); 314 \u0275\u0275text(24, " to pass the selection callback to the pagination component"); 315 \u0275\u0275elementEnd(); 316 \u0275\u0275elementStart(25, "fd-pagination", 4, 0); 317 \u0275\u0275listener("pageChangeStart", function PaginationPerPageExampleComponent_Template_fd_pagination_pageChangeStart_25_listener($event) { 318 return ctx.pageChanged3($event); 319 }); 320 \u0275\u0275elementEnd(); 321 \u0275\u0275template(27, PaginationPerPageExampleComponent_ng_template_27_Template, 3, 1, "ng-template", null, 1, \u0275\u0275templateRefExtractor); 322 \u0275\u0275elementEnd(); 323 } 324 if (rf & 2) { 325 const itemsPerPageCustom_r6 = \u0275\u0275reference(28); 326 \u0275\u0275advance(5); 327 \u0275\u0275property("totalItems", ctx.totalItems)("itemsPerPage", 15)("currentPage", ctx.currentPage1); 328 \u0275\u0275advance(6); 329 \u0275\u0275property("totalItems", ctx.totalItems)("itemsPerPage", 4)("itemsPerPageOptions", \u0275\u0275pureFunction0(12, _c02))("currentPage", ctx.currentPage2); 330 \u0275\u0275advance(14); 331 \u0275\u0275property("totalItems", ctx.totalItems)("currentPage", ctx.currentPage3)("itemsPerPage", 5)("itemsPerPageOptions", \u0275\u0275pureFunction0(13, _c1))("itemsPerPageTemplate", itemsPerPageCustom_r6); 332 } 333 }, dependencies: [PaginationModule, PaginationComponent, ToolbarItemDirective, SegmentedButtonModule, SegmentedButtonComponent, FormsModule, NgControlStatus, NgModel, ButtonComponent], encapsulation: 2 }); 334 } 335}; 336(() => { 337 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PaginationPerPageExampleComponent, [{ 338 type: Component, 339 args: [{ selector: "fd-pagination-per-page-example", imports: [PaginationModule, ToolbarItemDirective, SegmentedButtonModule, FormsModule, ButtonComponent], template: `<div> 340 <h3><code>[itemsPerPage]=15</code> Default property for items per page</h3> 341 <fd-pagination 342 fd-toolbar-item 343 [totalItems]="totalItems" 344 [itemsPerPage]="15" 345 [currentPage]="currentPage1" 346 (pageChangeStart)="pageChanged1($event)" 347 ariaLabel="Pagination with itemsPerPage property" 348 ></fd-pagination> 349</div> 350<div> 351 <h3><code>[itemsPerPageOptions]="[4,8,16]"</code> - Default select template for items per page options</h3> 352 <fd-pagination 353 fd-toolbar-item 354 [totalItems]="totalItems" 355 [itemsPerPage]="4" 356 [itemsPerPageOptions]="[4, 8, 16]" 357 [currentPage]="currentPage2" 358 (pageChangeStart)="pageChanged2($event)" 359 ariaLabel="Pagination with itemsPerPageOptions property" 360 ></fd-pagination> 361</div> 362<div> 363 <h3>Custom items per page - list of buttons</h3> 364 <p>Use <code>let-pageOptions="pageOptions"</code> on the template to get the list of options from component</p> 365 <p>Use <code>let-onSelect="onSelect"</code> to pass the selection callback to the pagination component</p> 366 <fd-pagination 367 fd-toolbar-item 368 [totalItems]="totalItems" 369 [currentPage]="currentPage3" 370 [itemsPerPage]="5" 371 [itemsPerPageOptions]="[2, 5, 100]" 372 [itemsPerPageTemplate]="itemsPerPageCustom" 373 (pageChangeStart)="pageChanged3($event)" 374 ariaLabel="Pagination with custom items" 375 #pagination 376 ></fd-pagination> 377 <ng-template #itemsPerPageCustom let-onSelect="onSelect" let-pageOptions="pageOptions"> 378 <fd-segmented-button 379 [ngModel]="customItemsPerPage" 380 (ngModelChange)="onSelect($event); customItemsPerPage = $event" 381 > 382 @for (count of pageOptions; track count) { 383 <button 384 fd-button 385 [label]="count + ''" 386 [attr.aria-label]="'Show ' + count + ' items per page'" 387 [attr.value]="count" 388 ></button> 389 } 390 </fd-segmented-button> 391 </ng-template> 392</div> 393` }] 394 }], null, null); 395})(); 396(() => { 397 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(PaginationPerPageExampleC
397omponent, { className: "PaginationPerPageExampleComponent", filePath: "libs/docs/core/pagination/examples/pagination-per-page/pagination-per-page-example.component.ts", lineNumber: 13 }); 398})(); 399
400// libs/docs/core/pagination/examples/pagination-showing-example.component.ts 401function PaginationShowingExampleComponent_ng_template_1_Template(rf, ctx) { 402 if (rf & 1) { 403 \u0275\u0275text(0); 404 } 405 if (rf & 2) { 406 const showing_r1 = ctx.showing; 407 \u0275\u0275textInterpolate3(" From ", showing_r1.from, " to ", showing_r1.to, ". Total items ", showing_r1.totalCount, " "); 408 } 409} 410var PaginationShowingExampleComponent = class _PaginationShowingExampleComponent { 411 constructor() { 412 this.totalItems = 50; 413 this.itemsPerPage = 10; 414 this.currentPage = 1; 415 } 416 pageChanged(event) { 417 this.currentPage = event; 418 } 419 static { 420 this.\u0275fac = function PaginationShowingExampleComponent_Factory(__ngFactoryType__) { 421 return new (__ngFactoryType__ || _PaginationShowingExampleComponent)(); 422 }; 423 } 424 static { 425 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _PaginationShowingExampleComponent, selectors: [["fd-pagination-showing-example"]], decls: 3, vars: 4, consts: [["customDisplayTextTemplate", ""], ["ariaLabel", "Pagination with displayTextTemplate property", 3, "pageChangeStart", "totalItems", "displayTextTemplate", "itemsPerPage", "currentPage"]], template: function PaginationShowingExampleComponent_Template(rf, ctx) { 426 if (rf & 1) { 427 \u0275\u0275elementStart(0, "fd-pagination", 1); 428 \u0275\u0275listener("pageChangeStart", function PaginationShowingExampleComponent_Template_fd_pagination_pageChangeStart_0_listener($event) { 429 return ctx.pageChanged($event); 430 }); 431 \u0275\u0275elementEnd(); 432 \u0275\u0275template(1, PaginationShowingExampleComponent_ng_template_1_Template, 1, 3, "ng-template", null, 0, \u0275\u0275templateRefExtractor); 433 } 434 if (rf & 2) { 435 const customDisplayTextTemplate_r2 = \u0275\u0275reference(2); 436 \u0275\u0275property("totalItems", ctx.totalItems)("displayTextTemplate", customDisplayTextTemplate_r2)("itemsPerPage", ctx.itemsPerPage)("currentPage", ctx.currentPage); 437 } 438 }, dependencies: [PaginationModule, PaginationComponent], encapsulation: 2 }); 439 } 440}; 441(() => { 442 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PaginationShowingExampleComponent, [{ 443 type: Component, 444 args: [{ 445 selector: "fd-pagination-showing-example", 446 template: ` 447 <fd-pagination 448 [totalItems]="totalItems" 449 [displayTextTemplate]="customDisplayTextTemplate" 450 [itemsPerPage]="itemsPerPage" 451 [currentPage]="currentPage" 452 (pageChangeStart)="pageChanged($event)" 453 ariaLabel="Pagination with displayTextTemplate property" 454 ></fd-pagination> 455 <ng-template #customDisplayTextTemplate let-showing="showing"> 456 From {{ showing.from }} to {{ showing.to }}. Total items {{ showing.totalCount }} 457 </ng-template> 458 `, 459 imports: [PaginationModule] 460 }] 461 }], null, null); 462})(); 463(() => { 464 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(PaginationShowingExampleComponent, { className: "PaginationShowingExampleComponent", filePath: "libs/docs/core/pagination/examples/pagination-showing-example.component.ts", lineNumber: 21 }); 465})(); 466
467// libs/docs/core/pagination/pagination-docs.component.ts 468var paginationSrc = "pagination-example.component.ts"; 469var paginationShowingSrc = "pagination-showing-example.component.ts"; 470var paginationPerPageHtml = "pagination-per-page/pagination-per-page-example.component.html"; 471var paginationPerPageTs = "pagination-per-page/pagination-per-page-example.component.ts"; 472var paginationMobileHtml = "pagination-mobile/pagination-mobile-example.component.html"; 473var paginationMobileTs = "pagination-mobile/pagination-mobile-example.component.ts"; 474var PaginationDocsComponent = class _PaginationDocsComponent { 475 constructor(schemaFactory) { 476 this.schemaFactory = schemaFactory; 477 this.data = { 478 properties: { 479 totalItems: 70, 480 itemsPerPage: 2, 481 currentPage: 5, 482 mobile: false 483 } 484 }; 485 this.paginationBasic = [ 486 { 487 language: "typescript", 488 code: getAssetFromModuleAssets(paginationSrc), 489 fileName: "pagination-example", 490 component: "PaginationExampleComponent" 491 } 492 ]; 493 this.paginationShowing = [ 494 { 495 language: "typescript", 496 code: getAssetFromModuleAssets(paginationShowingSrc), 497 fileName: "pagination-showing-example", 498 component: "PaginationShowingExampleComponent" 499 } 500 ]; 501 this.paginationPerPageSrc = [ 502 { 503 language: "html", 504 code: getAssetFromModuleAssets(paginationPerPageHtml), 505 fileName: "pagination-per-page-example" 506 }, 507 { 508 language: "typescript", 509 code: getAssetFromModuleAssets(paginationPerPageTs), 510 fileName: "pagination-per-page-example", 511 component: "PaginationPerPageExampleComponent" 512 } 513 ]; 514 this.paginationMobile = [ 515 { 516 language: "html", 517 code: getAssetFromModuleAssets(paginationMobileHtml), 518 fileName: "pagination-mobile-example" 519 }, 520 { 521 language: "typescript", 522 code: getAssetFromModuleAssets(paginationMobileTs), 523 fileName: "pagination-mobile-example", 524 component: "PaginationMobileExampleComponent" 525 } 526 ]; 527 this.schema = this.schemaFactory.getComponent("pagination"); 528 } 529 onSchemaValues(data) { 530 this.data = data; 531 } 532 static { 533 this.\u0275fac = function PaginationDocsComponent_Factory(__ngFactoryType__) { 534 return new (__ngFactoryType__ || _PaginationDocsComponent)(\u0275\u0275directiveInject(SchemaFactoryService)); 535 }; 536 } 537 static { 538 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _PaginationDocsComponent, selectors: [["app-pagination"]], decls: 80, vars: 10, consts: [["id", "basic", "componentName", "pagination"], [3, "exampleFiles"], ["id", "items", "componentName", "pagination"], ["id", "per-page", "componentName", "pagination"], ["id", "mobile", "componentName", "pagination"], ["id", "playground-pagination", "componentName", "pagination"], [3, "formChanges", "schema", "schemaInitialValues"], [3, "totalItems", "itemsPerPage", "currentPage", "mobile"]], template: function PaginationDocsComponent_Template(rf, ctx) { 539 if (rf & 1) { 540 \u0275\u0275elementStart(0, "fd-docs-section-title", 0); 541 \u0275\u0275text(1, " Basic Pagination "); 542 \u0275\u0275elementEnd(); 543 \u0275\u0275elementStart(2, "component-example"); 544 \u0275\u0275element(3, "fd-pagination-example"); 545 \u0275\u0275elementEnd(); 546 \u0275\u0275element(4, "code-example", 1)(5, "separator"); 547 \u0275\u0275elementStart(6, "fd-docs-section-title", 2); 548 \u0275\u0275text(7, " Pagination showing items "); 549 \u0275\u0275elementEnd(); 550 \u0275\u0275elementStart(8, "description"); 551 \u0275\u0275text(9, " Pagination with custom showing template "); 552 \u0275\u0275elementStart(10, "ul")(11, "li"); 553 \u0275\u0275text(12, "Set "); 554 \u0275\u0275elementStart(13, "code"); 555 \u0275\u0275text(14, "[displayTextTemplate]"); 556 \u0275\u0275elementEnd(); 557 \u0275\u0275text(15, " property to specify the display template for showing items."); 558 \u0275\u0275elementEnd()()(); 559 \u0275\u0275elementStart(16, "component-example"); 560 \u0275\u0275element(17, "fd-pagination-showing-example"); 561 \u0275\u0275elementEnd(); 562 \u0275\u0275element(18, "code-example", 1)(19, "separator"); 563 \u0275\u0275elementStart(20, "fd-docs-section-title", 3);
564 \u0275\u0275text(21, " Pagination with per page select.\n"); 565 \u0275\u0275elementEnd(); 566 \u0275\u0275elementStart(22, "description"); 567 \u0275\u0275text(23, " Pagination with custom showing template "); 568 \u0275\u0275elementStart(24, "ul")(25, "li"); 569 \u0275\u0275text(26, "Set "); 570 \u0275\u0275elementStart(27, "code"); 571 \u0275\u0275text(28, "[itemsPerPage]"); 572 \u0275\u0275elementEnd(); 573 \u0275\u0275text(29, " property to number of items per page. It's equal 10 by default."); 574 \u0275\u0275elementEnd(); 575 \u0275\u0275elementStart(30, "li"); 576 \u0275\u0275text(31, "Set "); 577 \u0275\u0275elementStart(32, "code"); 578 \u0275\u0275text(33, "[itemsPerPageOptions]"); 579 \u0275\u0275elementEnd(); 580 \u0275\u0275text(34, " property to array of numbers for items per page select."); 581 \u0275\u0275elementEnd(); 582 \u0275\u0275elementStart(35, "li"); 583 \u0275\u0275text(36, " Set "); 584 \u0275\u0275elementStart(37, "code"); 585 \u0275\u0275text(38, "[itemsPerPageTemplate]"); 586 \u0275\u0275elementEnd(); 587 \u0275\u0275text(39, " property to custom template. You will have "); 588 \u0275\u0275elementStart(40, "code"); 589 \u0275\u0275text(41, "onSelect"); 590 \u0275\u0275elementEnd(); 591 \u0275\u0275text(42, " property to interact with component. This property has higher priority than "); 592 \u0275\u0275elementStart(43, "code"); 593 \u0275\u0275text(44, "[itemsPerPageOptions]"); 594 \u0275\u0275elementEnd(); 595 \u0275\u0275text(45, ". "); 596 \u0275\u0275elementEnd()()(); 597 \u0275\u0275elementStart(46, "component-example"); 598 \u0275\u0275element(47, "fd-pagination-per-page-example"); 599 \u0275\u0275elementEnd(); 600 \u0275\u0275element(48, "code-example", 1)(49, "separator"); 601 \u0275\u0275elementStart(50, "fd-docs-section-title", 4); 602 \u0275\u0275text(51, " Mobile "); 603 \u0275\u0275elementEnd(); 604 \u0275\u0275elementStart(52, "description"); 605 \u0275\u0275text(53, " Pagination component switches to mobile mode automatically when screen's size is smaller than 1024px in width but can set "); 606 \u0275\u0275elementStart(54, "code"); 607 \u0275\u0275text(55, "mobile"); 608 \u0275\u0275elementEnd(); 609 \u0275\u0275text(56, " or "); 610 \u0275\u0275elementStart(57, "code"); 611 \u0275\u0275text(58, '[mobile]="true"'); 612 \u0275\u0275elementEnd(); 613 \u0275\u0275text(59, " to show it always in mobile mode. "); 614 \u0275\u0275element(60, "br")(61, "br"); 615 \u0275\u0275text(62, " Labels shown before and after current page input and can be changed using next input values: "); 616 \u0275\u0275elementStart(63, "ul")(64, "li")(65, "code"); 617 \u0275\u0275text(66, "pageLabelBeforeInputMobile"); 618 \u0275\u0275elementEnd(); 619 \u0275\u0275text(67, " (string) - label shown before input."); 620 \u0275\u0275elementEnd(); 621 \u0275\u0275elementStart(68, "li")(69, "code"); 622 \u0275\u0275text(70, "pageLabelAfterInputMobile"); 623 \u0275\u0275elementEnd(); 624 \u0275\u0275text(71, " (function) - label with total pages count, shown after input, total pages count passed as a parameter. "); 625 \u0275\u0275elementEnd()()(); 626 \u0275\u0275elementStart(72, "component-example"); 627 \u0275\u0275element(73, "fd-pagination-mobile-example"); 628 \u0275\u0275elementEnd(); 629 \u0275\u0275element(74, "code-example", 1)(75, "separator"); 630 \u0275\u0275elementStart(76, "fd-docs-section-title", 5); 631 \u0275\u0275text(77, " Playground Area "); 632 \u0275\u0275elementEnd(); 633 \u0275\u0275elementStart(78, "playground", 6); 634 \u0275\u0275listener("formChanges", function PaginationDocsComponent_Template_playground_formChanges_78_listener($event) { 635 return ctx.onSchemaValues($event); 636 }); 637 \u0275\u0275element(79, "fd-pagination", 7); 638 \u0275\u0275elementEnd(); 639 } 640 if (rf & 2) { 641 \u0275\u0275advance(4); 642 \u0275\u0275property("exampleFiles", ctx.paginationBasic); 643 \u0275\u0275advance(14); 644 \u0275\u0275property("exampleFiles", ctx.paginationShowing); 645 \u0275\u0275advance(30); 646 \u0275\u0275property("exampleFiles", ctx.paginationPerPageSrc); 647 \u0275\u0275advance(26); 648 \u0275\u0275property("exampleFiles", ctx.paginationMobile); 649 \u0275\u0275advance(4); 650 \u0275\u0275property("schema", ctx.schema)("schemaInitialValues", ctx.data); 651 \u0275\u0275advance(); 652 \u0275\u0275property("totalItems", ctx.data.properties.totalItems)("itemsPerPage", ctx.data.properties.itemsPerPage)("currentPage", ctx.data.properties.currentPage)("mobile", ctx.data.properties.mobile); 653 } 654 }, dependencies: [ 655 DocsSectionTitleComponent,
656 ComponentExampleComponent, 657 PaginationExampleComponent, 658 CodeExampleComponent, 659 SeparatorComponent, 660 DescriptionComponent, 661 PaginationShowingExampleComponent, 662 PaginationPerPageExampleComponent, 663 PaginationMobileExampleComponent, 664 PlayGroundComponent, 665 PaginationModule, 666 PaginationComponent 667 ], encapsulation: 2 }); 668 } 669}; 670(() => { 671 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PaginationDocsComponent, [{ 672 type: Component, 673 args: [{ selector: "app-pagination", imports: [ 674 DocsSectionTitleComponent, 675 ComponentExampleComponent, 676 PaginationExampleComponent, 677 CodeExampleComponent, 678 SeparatorComponent, 679 DescriptionComponent, 680 PaginationShowingExampleComponent, 681 PaginationPerPageExampleComponent, 682 PaginationMobileExampleComponent, 683 PlayGroundComponent, 684 PaginationModule 685 ], template: `<fd-docs-section-title id="basic" componentName="pagination"> Basic Pagination </fd-docs-section-title> 686<component-example> 687 <fd-pagination-example></fd-pagination-example> 688</component-example> 689<code-example [exampleFiles]="paginationBasic"></code-example> 690 691<separator></separator> 692 693<fd-docs-section-title id="items" componentName="pagination"> Pagination showing items </fd-docs-section-title> 694<description> 695 Pagination with custom showing template 696 <ul> 697 <li>Set <code>[displayTextTemplate]</code> property to specify the display template for showing items.</li> 698 </ul> 699</description> 700<component-example> 701 <fd-pagination-showing-example></fd-pagination-showing-example> 702</component-example> 703<code-example [exampleFiles]="paginationShowing"></code-example> 704 705<separator></separator> 706 707<fd-docs-section-title id="per-page" componentName="pagination"> 708 Pagination with per page select. 709</fd-docs-section-title> 710<description> 711 Pagination with custom showing template 712 <ul> 713 <li>Set <code>[itemsPerPage]</code> property to number of items per page. It's equal 10 by default.</li> 714 <li>Set <code>[itemsPerPageOptions]</code> property to array of numbers for items per page select.</li> 715 <li> 716 Set <code>[itemsPerPageTemplate]</code> property to custom template. You will have 717 <code>onSelect</code> property to interact with component. This property has higher priority than 718 <code>[itemsPerPageOptions]</code>. 719 </li> 720 </ul> 721</description> 722<component-example> 723 <fd-pagination-per-page-example></fd-pagination-per-page-example> 724</component-example> 725<code-example [exampleFiles]="paginationPerPageSrc"></code-example> 726 727<separator></separator> 728 729<fd-docs-section-title id="mobile" componentName="pagination"> Mobile </fd-docs-section-title> 730<description> 731 Pagination component switches to mobile mode automatically when screen's size is smaller than 1024px in width but 732 can set <code>mobile</code> or <code>[mobile]="true"</code> to show it always in mobile mode. 733 734 <br /><br /> 735 736 Labels shown before and after current page input and can be changed using next input values: 737 <ul> 738 <li><code>pageLabelBeforeInputMobile</code> (string) - label shown before input.</li> 739 <li> 740 <code>pageLabelAfterInputMobile</code> (function) - label with total pages count, shown after input, total 741 pages count passed as a parameter. 742 </li> 743 </ul> 744</description> 745<component-example> 746 <fd-pagination-mobile-example></fd-pagination-mobile-example> 747</component-example> 748<code-example [exampleFiles]="paginationMobile"></code-example> 749 750<separator></separator> 751 752<fd-docs-section-title id="playground-pagination" componentName="pagination"> Playground Area </fd-docs-section-title> 753<playground [schema]="schema" [schemaInitialValues]="data" (formChanges)="onSchemaValues($event)"> 754 <fd-pagination 755 [totalItems]="data.properties.totalItems" 756 [itemsPerPage]="data.properties.itemsPerPage" 757 [currentPage]="data.properties.currentPage" 758 [mobile]="data.properties.mobile" 759 ></fd-pagination> 760</playground> 761` }] 762 }], () => [{ type: SchemaFactoryService }], null); 763})(); 764(() => { 765 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(PaginationDocsComponent, { className: "PaginationDocsComponent", filePath: "libs/docs/core/pagination/pagination-docs.component.ts", lineNumber: 47 }); 766})(); 767
768// libs/docs/core/pagination/pagination-header/pagination-header.component.ts 769var PaginationHeaderComponent = class _PaginationHeaderComponent { 770 static { 771 this.\u0275fac = function PaginationHeaderComponent_Factory(__ngFactoryType__) { 772 return new (__ngFactoryType__ || _PaginationHeaderComponent)(); 773 }; 774 } 775 static { 776 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _PaginationHeaderComponent, selectors: [["app-pagination-header"]], decls: 28, vars: 0, consts: [["module", "PaginationModule", "subPackage", "pagination"]], template: function PaginationHeaderComponent_Template(rf, ctx) { 777 if (rf & 1) { 778 \u0275\u0275elementStart(0, "fd-doc-page")(1, "header"); 779 \u0275\u0275text(2, "Pagination"); 780 \u0275\u0275elementEnd(); 781 \u0275\u0275elementStart(3, "description"); 782 \u0275\u0275text(4, " Use pagination components in conjunction with Lists, Tables, and Trees to allow for more efficient performance and quick access to specific records in the overall data set."); 783 \u0275\u0275element(5, "br")(6, "br"); 784 \u0275\u0275text(7, " Pagination links are navigable via the tab key and selected with the space bar or enter key."); 785 \u0275\u0275element(8, "br")(9, "br"); 786 \u0275\u0275text(10, ' If <= 9 pages present - all pages shown, button in active state shown for the current page, otherwise "..." (more) elements shown, input with the current page value shown, can be used to navigate to certain page.'); 787 \u0275\u0275element(11, "br")(12, "br"); 788 \u0275\u0275text(13, " Pres Enter or Space after filling the input with page number to navigate to the certain page."); 789 \u0275\u0275element(14, "br")(15, "br"); 790 \u0275\u0275text(16, " The pagination component's "); 791 \u0275\u0275elementStart(17, "code"); 792 \u0275\u0275text(18, "currentPage"); 793 \u0275\u0275elementEnd(); 794 \u0275\u0275text(19, " value must be updated from your component for the component to work properly."); 795 \u0275\u0275element(20, "br")(21, "br"); 796 \u0275\u0275text(22, " Pages can be selected programmatically by calling the "); 797 \u0275\u0275elementStart(23, "code"); 798 \u0275\u0275text(24, "goToPage(pageNumber)"); 799 \u0275\u0275elementEnd(); 800 \u0275\u0275text(25, " method of the pagination component. "); 801 \u0275\u0275elementEnd(); 802 \u0275\u0275element(26, "import", 0)(27, "fd-header-tabs"); 803 \u0275\u0275elementEnd(); 804 } 805 }, dependencies: [DocPageComponent, HeaderComponent, DescriptionComponent, ImportComponent, HeaderTabsComponent], encapsulation: 2 }); 806 } 807}; 808(() => { 809 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(PaginationHeaderComponent, [{ 810 type: Component, 811 args: [{ selector: "app-pagination-header", imports: [DocPageComponent, HeaderComponent, DescriptionComponent, ImportComponent, HeaderTabsComponent], template: `<fd-doc-page> 812 <header>Pagination</header> 813 <description> 814 Use pagination components in conjunction with Lists, Tables, and Trees to allow for more efficient performance 815 and quick access to specific records in the overall data set.<br /><br /> 816 817 Pagination links are navigable via the tab key and selected with the space bar or enter key.<br /><br /> 818 819 If <= 9 pages present - all pages shown, button in active state shown for the current page, otherwise "..." 820 (more) elements shown, input with the current page value shown, can be used to navigate to certain page.<br /><br /> 821 822 Pres Enter or Space after filling the input with page number to navigate to the certain page.<br /><br /> 823 824 The pagination component's <code>currentPage</code> value must be updated from your component for the component 825 to work properly.<br /><br /> 826 827 Pages can be selected programmatically by calling the <code>goToPage(pageNumber)</code> method of the pagination 828 component. 829 </description> 830 <import module="PaginationModule" subPackage="pagination"></import> 831 832 <fd-header-tabs></fd-header-tabs> 833</fd-doc-page> 834` }] 835 }], null, null); 836})(); 837(() => { 838 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(PaginationHeaderComponent, { className: "PaginationHeaderComponent", filePath: "libs/docs/core/pagination/pagination-header/pagination-header.component.ts", lineNumber: 16 }); 839})(); 840
841// libs/docs/core/pagination/index.ts 842var ROUTES = [ 843 { 844 path: "", 845 component: PaginationHeaderComponent, 846 children: [ 847 { 848 path: "", 849 component: PaginationDocsComponent 850 } 851 ], 852 data: { 853 primary: true 854 } 855 } 856]; 857var LIBRARY_NAME = "pagination"; 858var API_FILE_KEY = "pagination"; 859var I18N_KEY = "corePagination"; 860export { 861 API_FILE_KEY, 862 I18N_KEY, 863 LIBRARY_NAME, 864 ROUTES 865};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.