@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
82 lines (77 loc) • 12.1 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, computed, input, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
import { TUI_TABLE_PAGINATION_TEXTS } from '@taiga-ui/addon-table/tokens';
import { TuiButton } from '@taiga-ui/core/components/button';
import * as i1 from '@taiga-ui/core/components/data-list';
import { TuiDataList } from '@taiga-ui/core/components/data-list';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { TuiLink } from '@taiga-ui/core/components/link';
import * as i2 from '@taiga-ui/core/portals/dropdown';
import { TuiDropdown } from '@taiga-ui/core/portals/dropdown';
import { TUI_COMMON_ICONS, TUI_SPIN_TEXTS } from '@taiga-ui/core/tokens';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
function defaultSizeOptionContent({ $implicit }) {
return `${$implicit}`;
}
const TUI_TABLE_PAGINATION_DEFAULT_OPTIONS = {
sizeOptionContent: defaultSizeOptionContent,
showPages: true,
items: [10, 20, 50, 100],
size: 10,
};
/**
* Default parameters for TablePagination component
*/
const [TUI_TABLE_PAGINATION_OPTIONS, tuiTablePaginationOptionsProvider] = tuiCreateOptions(TUI_TABLE_PAGINATION_DEFAULT_OPTIONS);
class TuiTablePagination {
constructor() {
this.options = inject(TUI_TABLE_PAGINATION_OPTIONS);
this.icons = inject(TUI_COMMON_ICONS);
this.spinTexts = inject(TUI_SPIN_TEXTS);
this.texts = inject(TUI_TABLE_PAGINATION_TEXTS);
this.pages = computed(() => Math.ceil(this.total() / this.size()));
this.end = computed(() => Math.min(this.start + this.size(), this.total()));
this.rightDisabled = computed(() => this.end() === this.total());
this.pagination = computed(() => ({
page: this.page(),
size: this.size(),
}));
this.items = input(this.options.items);
this.total = input(0);
this.page = model(0);
this.size = model(this.options.size);
this.paginationChange = output();
}
onItem(size) {
const { start } = this;
this.size.set(size);
this.page.set(Math.floor(start / this.size()));
this.paginationChange.emit(this.pagination());
}
get sizeOptionContent() {
return this.options.sizeOptionContent;
}
get start() {
return (Math.min(this.page(), Math.floor(this.total() / this.size())) * this.size());
}
back() {
this.page.update((page) => page - 1);
this.paginationChange.emit(this.pagination());
}
forth() {
this.page.update((page) => page + 1);
this.paginationChange.emit(this.pagination());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiTablePagination, isStandalone: true, selector: "tui-table-pagination", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", size: "sizeChange", paginationChange: "paginationChange" }, ngImport: i0, template: "@if (texts(); as texts) {\n <span class=\"t-pages\">\n @if (options.showPages) {\n {{ texts.pages }}\n <strong class=\"t-strong\">{{ pages() }}</strong>\n }\n </span>\n <span automation-id=\"tui-table-pagination__lines-per-page-wrapper\">\n {{ texts.linesPerPage }}\n @if (total() !== 0) {\n <button\n tuiDropdown\n tuiDropdownAuto\n tuiLink\n type=\"button\"\n >\n <strong>{{ start + 1 }}\u2013{{ end() }}</strong>\n <tui-data-list\n *tuiDropdown=\"let close\"\n size=\"s\"\n >\n @for (item of items(); track item) {\n <button\n tuiOption\n type=\"button\"\n class=\"t-item\"\n (click)=\"close(); onItem(item)\"\n >\n <ng-container\n *polymorpheusOutlet=\"\n sizeOptionContent as text;\n context: {$implicit: item, total: total()}\n \"\n >\n {{ text }}\n </ng-container>\n @if (item === size()) {\n <tui-icon\n class=\"t-checkmark\"\n [icon]=\"icons.check\"\n />\n } @else {\n <span class=\"t-checkmark\"></span>\n }\n </button>\n }\n </tui-data-list>\n </button>\n } @else {\n <strong>0 - 0</strong>\n }\n {{ texts.of }}\n <strong class=\"t-strong\">{{ total() }}</strong>\n </span>\n @if (spinTexts(); as spinTexts) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button t-button_back\"\n [disabled]=\"!start\"\n [iconStart]=\"icons.decrement\"\n (click)=\"back()\"\n >\n {{ spinTexts[0] }}\n </button>\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [disabled]=\"rightDisabled()\"\n [iconStart]=\"icons.increment\"\n (click)=\"forth()\"\n >\n {{ spinTexts[1] }}\n </button>\n }\n}\n", styles: [":host{display:flex;font:var(--tui-typography-body-s);align-items:center;color:var(--tui-text-tertiary)}.t-strong{color:var(--tui-text-primary)}.t-pages{margin-inline-end:auto}.t-item{min-inline-size:5.5rem;box-sizing:border-box}.t-checkmark{min-inline-size:1rem;font-size:1rem;margin-inline-start:auto}.t-button{transform:scaleX(var(--tui-inline))}.t-button_back{margin-inline-end:.25rem;margin-inline-start:1.5rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i2.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i2.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTablePagination, decorators: [{
type: Component,
args: [{ selector: 'tui-table-pagination', imports: [PolymorpheusOutlet, TuiButton, TuiDataList, TuiDropdown, TuiIcon, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (texts(); as texts) {\n <span class=\"t-pages\">\n @if (options.showPages) {\n {{ texts.pages }}\n <strong class=\"t-strong\">{{ pages() }}</strong>\n }\n </span>\n <span automation-id=\"tui-table-pagination__lines-per-page-wrapper\">\n {{ texts.linesPerPage }}\n @if (total() !== 0) {\n <button\n tuiDropdown\n tuiDropdownAuto\n tuiLink\n type=\"button\"\n >\n <strong>{{ start + 1 }}\u2013{{ end() }}</strong>\n <tui-data-list\n *tuiDropdown=\"let close\"\n size=\"s\"\n >\n @for (item of items(); track item) {\n <button\n tuiOption\n type=\"button\"\n class=\"t-item\"\n (click)=\"close(); onItem(item)\"\n >\n <ng-container\n *polymorpheusOutlet=\"\n sizeOptionContent as text;\n context: {$implicit: item, total: total()}\n \"\n >\n {{ text }}\n </ng-container>\n @if (item === size()) {\n <tui-icon\n class=\"t-checkmark\"\n [icon]=\"icons.check\"\n />\n } @else {\n <span class=\"t-checkmark\"></span>\n }\n </button>\n }\n </tui-data-list>\n </button>\n } @else {\n <strong>0 - 0</strong>\n }\n {{ texts.of }}\n <strong class=\"t-strong\">{{ total() }}</strong>\n </span>\n @if (spinTexts(); as spinTexts) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button t-button_back\"\n [disabled]=\"!start\"\n [iconStart]=\"icons.decrement\"\n (click)=\"back()\"\n >\n {{ spinTexts[0] }}\n </button>\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [disabled]=\"rightDisabled()\"\n [iconStart]=\"icons.increment\"\n (click)=\"forth()\"\n >\n {{ spinTexts[1] }}\n </button>\n }\n}\n", styles: [":host{display:flex;font:var(--tui-typography-body-s);align-items:center;color:var(--tui-text-tertiary)}.t-strong{color:var(--tui-text-primary)}.t-pages{margin-inline-end:auto}.t-item{min-inline-size:5.5rem;box-sizing:border-box}.t-checkmark{min-inline-size:1rem;font-size:1rem;margin-inline-start:auto}.t-button{transform:scaleX(var(--tui-inline))}.t-button_back{margin-inline-end:.25rem;margin-inline-start:1.5rem}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_TABLE_PAGINATION_DEFAULT_OPTIONS, TUI_TABLE_PAGINATION_OPTIONS, TuiTablePagination, tuiTablePaginationOptionsProvider };
//# sourceMappingURL=taiga-ui-addon-table-components-table-pagination.mjs.map