@anglr/grid
Version:
Angular module displaying grid
84 lines • 4.23 kB
JavaScript
import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LocalizePipe } from '@anglr/common';
import { PagingAbstractComponent } from '../pagingAbstract.component';
import { DEFAULT_OPTIONS } from '../../../misc/tokens';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Default options for paging
*/
const defaultOptions = {
initialItemsPerPage: 10,
initialPage: 1,
cssClasses: {
containerElement: 'grid-text-center',
loadMoreBtn: 'btn btn-primary btn-sm'
},
texts: {
loadMoreBtn: 'load more'
}
};
/**
* Paging that uses simple button to load more content
*/
export class LoadMorePagingComponent extends PagingAbstractComponent {
constructor() {
super(...arguments);
//######################### protected fields #########################
/**
* Currently displayed pages
*/
this.displayedPages = 1;
//######################### protected properties - template bindings #########################
/**
* Indication that more items are available
*/
this.moreAvailable = signal(true).asReadonly();
}
//######################### public properties #########################
/**
* @inheritdoc
*/
get firstItemIndex() {
return 0;
}
// this.moreAvailable = (this.displayedPages * this.itemsPerPage) < this.ɵtotalCount;
//######################### public methods - overrides #########################
/**
* @inheritdoc
*/
async initialize(force) {
await super.initialize(force);
this.moreAvailable = computed(() => (this.displayedPages * (this.itemsPerPageValue() ?? 0)) < this.totalCount());
this.changeDetector.detectChanges();
}
//######################### protected methods - template bindings #########################
/**
* Loads more data
*/
loadMore() {
this.displayedPages++;
this.setPage(this.displayedPages);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: LoadMorePagingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0", type: LoadMorePagingComponent, isStandalone: true, selector: "load-more-paging", providers: [
{
provide: DEFAULT_OPTIONS,
useValue: defaultOptions,
},
], usesInheritance: true, ngImport: i0, template: "@if(moreAvailable())\r\n{\r\n <div [ngClass]=\"optionsValue().cssClasses.containerElement\">\r\n <button type=\"button\" [ngClass]=\"optionsValue().cssClasses.loadMoreBtn\" (click)=\"loadMore()\">\r\n <span>{{optionsValue().texts.loadMoreBtn | localize}}</span>\r\n </button>\r\n </div>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: LoadMorePagingComponent, decorators: [{
type: Component,
args: [{ selector: 'load-more-paging', imports: [
CommonModule,
LocalizePipe,
], providers: [
{
provide: DEFAULT_OPTIONS,
useValue: defaultOptions,
},
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(moreAvailable())\r\n{\r\n <div [ngClass]=\"optionsValue().cssClasses.containerElement\">\r\n <button type=\"button\" [ngClass]=\"optionsValue().cssClasses.loadMoreBtn\" (click)=\"loadMore()\">\r\n <span>{{optionsValue().texts.loadMoreBtn | localize}}</span>\r\n </button>\r\n </div>\r\n}" }]
}] });
//# sourceMappingURL=loadMorePaging.component.js.map