@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
275 lines (265 loc) • 29.3 kB
JavaScript
import * as i0 from '@angular/core';
import { input, output, viewChild, signal, effect, Component, inject, ElementRef, Directive, Injectable, booleanAttribute, computed, model } from '@angular/core';
import { Tooltip, Button } from '@koalarx/ui/shared/directives';
import { AppConfig } from '@koalarx/ui/core/config';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { SideWindow } from '@koalarx/ui/shared/components/side-window';
class OrderedColumnState {
static current;
}
class SortHeaderColumn {
orderBy = input.required();
style = input('');
defaultDirection = input();
sortable = output();
elOrderedColumn = viewChild('orderedColumn');
direction = signal(null);
constructor() {
effect(() => {
const defaultDirection = this.defaultDirection();
if (defaultDirection) {
this.direction.set(defaultDirection);
OrderedColumnState.current = this;
this.toogleColumnStateOrder('set');
}
});
}
sort() {
this.direction.update((current) => {
if (OrderedColumnState.current &&
OrderedColumnState.current.orderBy !== this.orderBy) {
OrderedColumnState.current.direction.set(null);
OrderedColumnState.current.toogleColumnStateOrder('unset');
}
OrderedColumnState.current = this;
let direction;
switch (current) {
case 'asc':
direction = 'desc';
break;
case 'desc':
default:
direction = 'asc';
}
this.toogleColumnStateOrder('set');
this.sortable.emit({
orderBy: this.orderBy(),
direction,
});
return direction;
});
}
async toogleColumnStateOrder(state) {
const columnElement = this.elOrderedColumn()?.nativeElement.parentElement;
if (!columnElement) {
return;
}
if (state === 'set') {
columnElement.classList.add('ordered-column');
}
else {
columnElement.classList.remove('ordered-column');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortHeaderColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SortHeaderColumn, isStandalone: true, selector: "kl-sort-header-column", inputs: { orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: true, isRequired: true, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, defaultDirection: { classPropertyName: "defaultDirection", publicName: "defaultDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortable: "sortable" }, viewQueries: [{ propertyName: "elOrderedColumn", first: true, predicate: ["orderedColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n [class.not-ordered]=\"direction() === null\"\n [class.asc]=\"direction() === 'asc'\"\n [class.desc]=\"direction() === 'desc'\"\n (click)=\"sort()\">\n\n @switch (direction()) {\n @case ('asc') {\n <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n }\n @case ('desc') {\n <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n }\n @default {\n <i class=\"fa-solid fa-sort\"></i>\n }\n }\n\n <ng-content />\n</div>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortHeaderColumn, decorators: [{
type: Component,
args: [{ selector: 'kl-sort-header-column', template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n [class.not-ordered]=\"direction() === null\"\n [class.asc]=\"direction() === 'asc'\"\n [class.desc]=\"direction() === 'desc'\"\n (click)=\"sort()\">\n\n @switch (direction()) {\n @case ('asc') {\n <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n }\n @case ('desc') {\n <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n }\n @default {\n <i class=\"fa-solid fa-sort\"></i>\n }\n }\n\n <ng-content />\n</div>\n" }]
}], ctorParameters: () => [] });
class SortedItem {
elementRef = inject((ElementRef));
klSortedItem = input.required();
sortedPropName = input.required();
constructor() {
effect(() => {
const isSorted = this.klSortedItem()?.orderBy === this.sortedPropName();
this.elementRef.nativeElement.classList.toggle('sorted', isSorted);
if (isSorted) {
this.elementRef.nativeElement.setAttribute('aria-sort', 'ascending');
}
else {
this.elementRef.nativeElement.setAttribute('aria-sort', 'descending');
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortedItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SortedItem, isStandalone: true, selector: "td[klSortedItem]", inputs: { klSortedItem: { classPropertyName: "klSortedItem", publicName: "klSortedItem", isSignal: true, isRequired: true, transformFunction: null }, sortedPropName: { classPropertyName: "sortedPropName", publicName: "sortedPropName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortedItem, decorators: [{
type: Directive,
args: [{ selector: 'td[klSortedItem]' }]
}], ctorParameters: () => [] });
class DatatableFilter {
_payload = signal({});
_filters = signal([]);
_clearFilter = signal(false);
constructor() {
effect(() => {
const filters = this._filters();
filters.forEach((filter) => {
this._payload.update((current) => {
return {
...current,
[filter.propName]: filter.value,
};
});
});
});
}
get payload() {
return this._payload.asReadonly();
}
get filters() {
return this._filters.asReadonly();
}
get clearFilter() {
return this._clearFilter.asReadonly();
}
setFilters(filters) {
this._filters.set(filters);
}
removeFilter(propName) {
this._filters.update((current) => {
return current.filter((filter) => filter.propName !== propName);
});
}
clearFilters() {
this._filters.set([]);
this._payload.set({});
this._clearFilter.set(true);
setTimeout(() => this._clearFilter.set(false));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class FilterFactory {
_filter = [];
get filter() {
return [...this._filter];
}
setFilters(filter, templateNameFn) {
const filterData = filter;
Object.keys(filterData).forEach((propName) => {
const value = filterData[propName];
if (value === null || value === undefined || value === '') {
return;
}
const templateValue = templateNameFn(propName, value);
this.addFilter({ templateValue, propName, value });
});
return this._filter;
}
addFilter(filter) {
this._filter.push(filter);
}
toPayload(data) {
return data.reduce((acc, curr) => {
acc[curr.propName] = curr.value;
return acc;
}, {});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FilterFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FilterFactory });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FilterFactory, decorators: [{
type: Injectable
}] });
class Filter {
translations = inject(AppConfig).translation.datatable;
datatableFilter = inject(DatatableFilter);
filter = input([]);
payload = output();
addFilter = output();
clearFilter = output();
constructor() {
effect(() => this.datatableFilter.setFilters(this.filter()));
effect(() => this.payload.emit(this.datatableFilter.payload()));
effect(() => {
if (this.datatableFilter.clearFilter()) {
this.clearFilter.emit();
}
});
}
add() {
this.addFilter.emit(this.datatableFilter.filters());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Filter, isStandalone: true, selector: "kl-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { payload: "payload", addFilter: "addFilter", clearFilter: "clearFilter" }, providers: [DatatableFilter], ngImport: i0, template: "@if (datatableFilter.filters().length > 0) {\n <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-300\">\n\n <button class=\"hover:cursor-pointer\"\n [tooltip]=\"translations.clearFilterTooltip\"\n tooltipPosition=\"right\"\n (click)=\"datatableFilter.clearFilters()\">\n <i class=\"fa-solid fa-filter-circle-xmark text-sm\"></i>\n </button>\n\n <div class=\"flex items-center flex-wrap gap-1\">\n @for (item of datatableFilter.filters(); track $index) {\n <div class=\"badge badge-ghost text-xs\">\n <span>{{item.templateValue}}</span>\n <button class=\"hover:cursor-pointer\" (click)=\"datatableFilter.removeFilter(item.propName)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n }\n </div>\n\n <button class=\"hover:cursor-pointer\"\n [tooltip]=\"translations.addFilterTooltip\"\n tooltipPosition=\"right\"\n (click)=\"add()\">\n <i class=\"fa-solid fa-circle-plus text-sm\"></i>\n </button>\n </div>\n}\n", dependencies: [{ kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Filter, decorators: [{
type: Component,
args: [{ selector: 'kl-filter', providers: [DatatableFilter], imports: [Tooltip], template: "@if (datatableFilter.filters().length > 0) {\n <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-300\">\n\n <button class=\"hover:cursor-pointer\"\n [tooltip]=\"translations.clearFilterTooltip\"\n tooltipPosition=\"right\"\n (click)=\"datatableFilter.clearFilters()\">\n <i class=\"fa-solid fa-filter-circle-xmark text-sm\"></i>\n </button>\n\n <div class=\"flex items-center flex-wrap gap-1\">\n @for (item of datatableFilter.filters(); track $index) {\n <div class=\"badge badge-ghost text-xs\">\n <span>{{item.templateValue}}</span>\n <button class=\"hover:cursor-pointer\" (click)=\"datatableFilter.removeFilter(item.propName)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n }\n </div>\n\n <button class=\"hover:cursor-pointer\"\n [tooltip]=\"translations.addFilterTooltip\"\n tooltipPosition=\"right\"\n (click)=\"add()\">\n <i class=\"fa-solid fa-circle-plus text-sm\"></i>\n </button>\n </div>\n}\n" }]
}], ctorParameters: () => [] });
class Datatable {
sideWindow = inject(SideWindow);
translations = inject(AppConfig).translation.datatable;
config = input.required();
colspan = input.required();
loadMoreBtnColor = input('accent');
filterBtnColor = input('primary');
componentFilter = input();
withPaginator = input(false, { transform: booleanAttribute });
currentPage = computed(() => this.config().currentPage);
totalItems = computed(() => this.config().totalItems);
totalItemsOnPage = computed(() => this.config().totalItemsOnPage);
currentPageSize = computed(() => this.config().currentPageSize);
isLoading = computed(() => this.config().isLoading);
hasError = computed(() => this.config().hasError);
filter = signal([]);
hasFilter = computed(() => {
return this.filter().length > 0;
});
pageSize = model(0);
pageSizes = [10, 20, 30, 50, 100];
skeletonRows = computed(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
skeletonCols = computed(() => {
return Array.from({ length: this.colspan() }, (_, i) => i);
});
lastPage = computed(() => {
const isLoading = this.isLoading();
if (!isLoading) {
return Math.ceil(this.totalItems() / this.currentPageSize());
}
return 1;
});
pageChange = output();
pageSizeChange = output();
filterChange = output();
reloadList = output();
loadMore = output();
constructor() {
effect(() => this.pageSize.set(this.currentPageSize()));
effect(() => this.pageSizeChange.emit(this.pageSize()));
effect(() => this.pageChange.emit(this.currentPage()));
}
openFilter(data) {
const component = this.componentFilter();
if (!component) {
return;
}
this.sideWindow.open(component, {
data,
afterClosed: {
trigger: [],
callback: (filters) => this.filter.set(filters),
},
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Datatable, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Datatable, isStandalone: true, selector: "kl-datatable", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: true, transformFunction: null }, loadMoreBtnColor: { classPropertyName: "loadMoreBtnColor", publicName: "loadMoreBtnColor", isSignal: true, isRequired: false, transformFunction: null }, filterBtnColor: { classPropertyName: "filterBtnColor", publicName: "filterBtnColor", isSignal: true, isRequired: false, transformFunction: null }, componentFilter: { classPropertyName: "componentFilter", publicName: "componentFilter", isSignal: true, isRequired: false, transformFunction: null }, withPaginator: { classPropertyName: "withPaginator", publicName: "withPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", filterChange: "filterChange", reloadList: "reloadList", loadMore: "loadMore" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n <div class=\"addicional-options-menu flex items-center opacity-80\">\n <ng-content select=\"[menu]\" />\n </div>\n\n <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n @if (componentFilter()) {\n @if (hasFilter()) {\n <kl-filter\n [filter]=\"filter()\"\n (addFilter)=\"openFilter($event)\"\n (payload)=\"filterChange.emit($event)\"\n (clearFilter)=\"filter.set([])\"\n />\n\n <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n } @else {\n <button klButton\n size=\"extraSmall\"\n class=\"text-sm font-light\"\n [color]=\"filterBtnColor()\"\n (click)=\"openFilter()\">\n <i class=\"fa-solid fa-filter text-xs\"></i>\n {{translations.btnFilterLabel}}\n </button>\n }\n }\n\n <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n (click)=\"reloadList.emit()\">\n <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n {{translations.reloadListTooltip}}\n </button>\n </div>\n\n @if (!withPaginator()) {\n <div class=\"flex items-center justify-end gap-3 text-sm\">\n <span class=\"flex items-center justify-end gap-1 opacity-60\">\n <span class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n <select class=\"select select-md p-0 pl-2 pr-8 h-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n @for (item of pageSizes; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </span>\n <span class=\"opacity-60\">|</span>\n <span class=\"opacity-60 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n </div>\n }\n </div>\n\n <div class=\"datatable-table overflow-x-auto h-full bg-base-200\">\n <table class=\"table table-sm table-pin-rows\">\n <thead>\n <tr class=\"text-xs overflow-hidden bg-base-200\">\n <ng-content select=\"[head]\" />\n </tr>\n </thead>\n <tbody>\n @if (hasError()) {\n <tr>\n <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n {{translations.errorLoadDataLabel}}\n </td>\n </tr>\n } @else {\n <ng-content select=\"[body]\" />\n\n @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n <tr>\n <td [attr.colspan]=\"colspan()\">\n <button\n klButton\n outline\n [color]=\"loadMoreBtnColor()\"\n class=\"w-full\"\n (click)=\"loadMore.emit()\">\n {{translations.loadMoreBtnLabel}}\n </button>\n </td>\n </tr>\n }\n\n @if (isLoading()) {\n @for (row of skeletonRows(); track $index) {\n <tr>\n @for (col of skeletonCols(); track $index) {\n <td><span class=\"block skeleton w-full h-4\"></span></td>\n }\n </tr>\n }\n }\n }\n </tbody>\n </table>\n </div>\n\n @if (withPaginator()) {\n <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-700 w-full flex items-center justify-between\">\n <div class=\"flex items-center justify-end gap-3 text-xs\">\n <span class=\"flex items-center justify-end gap-1 opacity-60\">\n <span>{{translations.labelItemsPerPage}}:</span>\n\n <select class=\"select select-sm p-0 pl-2 pr-0 w-15 h-[1.5rem]\" [(ngModel)]=\"pageSize\">\n @for (item of pageSizes; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </span>\n <span class=\"opacity-60\">|</span>\n <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n </div>\n\n <div class=\"flex items-center gap-8\">\n <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n <div class=\"join flex items-center\">\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === 1\"\n (click)=\"pageChange.emit(1)\">\n <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n </button>\n\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === 1\"\n (click)=\"pageChange.emit(currentPage() - 1)\">\n <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n </button>\n\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === lastPage()\"\n (click)=\"pageChange.emit(currentPage() + 1)\">\n <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n </button>\n\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === lastPage()\"\n (click)=\"pageChange.emit(lastPage())\">\n <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Filter, selector: "kl-filter", inputs: ["filter"], outputs: ["payload", "addFilter", "clearFilter"] }, { kind: "directive", type: Button, selector: "button[klButton], a[klButton]", inputs: ["color", "type", "circle", "outline", "soft", "showLoader", "disabled", "size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Datatable, decorators: [{
type: Component,
args: [{ selector: 'kl-datatable', imports: [FormsModule, Filter, Button], template: "<div class=\"flex flex-col h-full\">\n <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n <div class=\"addicional-options-menu flex items-center opacity-80\">\n <ng-content select=\"[menu]\" />\n </div>\n\n <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n @if (componentFilter()) {\n @if (hasFilter()) {\n <kl-filter\n [filter]=\"filter()\"\n (addFilter)=\"openFilter($event)\"\n (payload)=\"filterChange.emit($event)\"\n (clearFilter)=\"filter.set([])\"\n />\n\n <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n } @else {\n <button klButton\n size=\"extraSmall\"\n class=\"text-sm font-light\"\n [color]=\"filterBtnColor()\"\n (click)=\"openFilter()\">\n <i class=\"fa-solid fa-filter text-xs\"></i>\n {{translations.btnFilterLabel}}\n </button>\n }\n }\n\n <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n (click)=\"reloadList.emit()\">\n <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n {{translations.reloadListTooltip}}\n </button>\n </div>\n\n @if (!withPaginator()) {\n <div class=\"flex items-center justify-end gap-3 text-sm\">\n <span class=\"flex items-center justify-end gap-1 opacity-60\">\n <span class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n <select class=\"select select-md p-0 pl-2 pr-8 h-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n @for (item of pageSizes; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </span>\n <span class=\"opacity-60\">|</span>\n <span class=\"opacity-60 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n </div>\n }\n </div>\n\n <div class=\"datatable-table overflow-x-auto h-full bg-base-200\">\n <table class=\"table table-sm table-pin-rows\">\n <thead>\n <tr class=\"text-xs overflow-hidden bg-base-200\">\n <ng-content select=\"[head]\" />\n </tr>\n </thead>\n <tbody>\n @if (hasError()) {\n <tr>\n <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n {{translations.errorLoadDataLabel}}\n </td>\n </tr>\n } @else {\n <ng-content select=\"[body]\" />\n\n @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n <tr>\n <td [attr.colspan]=\"colspan()\">\n <button\n klButton\n outline\n [color]=\"loadMoreBtnColor()\"\n class=\"w-full\"\n (click)=\"loadMore.emit()\">\n {{translations.loadMoreBtnLabel}}\n </button>\n </td>\n </tr>\n }\n\n @if (isLoading()) {\n @for (row of skeletonRows(); track $index) {\n <tr>\n @for (col of skeletonCols(); track $index) {\n <td><span class=\"block skeleton w-full h-4\"></span></td>\n }\n </tr>\n }\n }\n }\n </tbody>\n </table>\n </div>\n\n @if (withPaginator()) {\n <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-700 w-full flex items-center justify-between\">\n <div class=\"flex items-center justify-end gap-3 text-xs\">\n <span class=\"flex items-center justify-end gap-1 opacity-60\">\n <span>{{translations.labelItemsPerPage}}:</span>\n\n <select class=\"select select-sm p-0 pl-2 pr-0 w-15 h-[1.5rem]\" [(ngModel)]=\"pageSize\">\n @for (item of pageSizes; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </span>\n <span class=\"opacity-60\">|</span>\n <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n </div>\n\n <div class=\"flex items-center gap-8\">\n <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n <div class=\"join flex items-center\">\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === 1\"\n (click)=\"pageChange.emit(1)\">\n <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n </button>\n\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === 1\"\n (click)=\"pageChange.emit(currentPage() - 1)\">\n <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n </button>\n\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === lastPage()\"\n (click)=\"pageChange.emit(currentPage() + 1)\">\n <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n </button>\n\n <button class=\"join-item btn btn-sm\"\n [disabled]=\"currentPage() === lastPage()\"\n (click)=\"pageChange.emit(lastPage())\">\n <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n</div>\n" }]
}], ctorParameters: () => [] });
/**
* Generated bundle index. Do not edit.
*/
export { Datatable, DatatableFilter, Filter, FilterFactory, OrderedColumnState, SortHeaderColumn, SortedItem };
//# sourceMappingURL=koalarx-ui-shared-components-datatable.mjs.map