@koalarx/ui 20.0.45 → 20.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, viewChild, signal, effect, Component, inject, ElementRef, Directive, Injectable, booleanAttribute,
|
|
2
|
+
import { input, output, viewChild, signal, effect, Component, inject, ElementRef, Directive, Injectable, booleanAttribute, computed, model } from '@angular/core';
|
|
3
3
|
import { Tooltip, Button } from '@koalarx/ui/shared/directives';
|
|
4
4
|
import { AppConfig } from '@koalarx/ui/core/config';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
@@ -99,6 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
99
99
|
class DatatableFilter {
|
|
100
100
|
_payload = signal({});
|
|
101
101
|
_filters = signal([]);
|
|
102
|
+
_clearFilter = signal(false);
|
|
102
103
|
constructor() {
|
|
103
104
|
effect(() => {
|
|
104
105
|
const filters = this._filters();
|
|
@@ -118,6 +119,9 @@ class DatatableFilter {
|
|
|
118
119
|
get filters() {
|
|
119
120
|
return this._filters.asReadonly();
|
|
120
121
|
}
|
|
122
|
+
get clearFilter() {
|
|
123
|
+
return this._clearFilter.asReadonly();
|
|
124
|
+
}
|
|
121
125
|
setFilters(filters) {
|
|
122
126
|
this._filters.set(filters);
|
|
123
127
|
}
|
|
@@ -129,6 +133,8 @@ class DatatableFilter {
|
|
|
129
133
|
clearFilters() {
|
|
130
134
|
this._filters.set([]);
|
|
131
135
|
this._payload.set({});
|
|
136
|
+
this._clearFilter.set(true);
|
|
137
|
+
setTimeout(() => this._clearFilter.set(false));
|
|
132
138
|
}
|
|
133
139
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
134
140
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter });
|
|
@@ -176,19 +182,25 @@ class Filter {
|
|
|
176
182
|
filter = input([]);
|
|
177
183
|
payload = output();
|
|
178
184
|
addFilter = output();
|
|
185
|
+
clearFilter = output();
|
|
179
186
|
constructor() {
|
|
180
187
|
effect(() => this.datatableFilter.setFilters(this.filter()));
|
|
181
188
|
effect(() => this.payload.emit(this.datatableFilter.payload()));
|
|
189
|
+
effect(() => {
|
|
190
|
+
if (this.datatableFilter.clearFilter()) {
|
|
191
|
+
this.clearFilter.emit();
|
|
192
|
+
}
|
|
193
|
+
});
|
|
182
194
|
}
|
|
183
195
|
add() {
|
|
184
196
|
this.addFilter.emit(this.datatableFilter.filters());
|
|
185
197
|
}
|
|
186
198
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
-
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" }, providers: [DatatableFilter], ngImport: i0, template: "@if (datatableFilter.filters().length > 0) {\n <div class=\"datatable-filter-container
|
|
199
|
+
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"] }] });
|
|
188
200
|
}
|
|
189
201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Filter, decorators: [{
|
|
190
202
|
type: Component,
|
|
191
|
-
args: [{ selector: 'kl-filter', providers: [DatatableFilter], imports: [Tooltip], template: "@if (datatableFilter.filters().length > 0) {\n <div class=\"datatable-filter-container
|
|
203
|
+
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" }]
|
|
192
204
|
}], ctorParameters: () => [] });
|
|
193
205
|
|
|
194
206
|
class Datatable {
|
|
@@ -204,6 +216,9 @@ class Datatable {
|
|
|
204
216
|
componentFilter = input();
|
|
205
217
|
withPaginator = input(false, { transform: booleanAttribute });
|
|
206
218
|
filter = signal([]);
|
|
219
|
+
hasFilter = computed(() => {
|
|
220
|
+
return this.filter().length > 0;
|
|
221
|
+
});
|
|
207
222
|
pageSize = model(0);
|
|
208
223
|
pageSizes = [10, 20, 30, 50, 100];
|
|
209
224
|
skeletonRows = computed(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
|
|
@@ -241,11 +256,11 @@ class Datatable {
|
|
|
241
256
|
});
|
|
242
257
|
}
|
|
243
258
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Datatable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Datatable, isStandalone: true, selector: "kl-datatable", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, totalItemsOnPage: { classPropertyName: "totalItemsOnPage", publicName: "totalItemsOnPage", isSignal: true, isRequired: true, transformFunction: null }, currentPageSize: { classPropertyName: "currentPageSize", publicName: "currentPageSize", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", 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 }, 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 z-10\">\n <div class=\"datatable-menu flex items-center py-2 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 <button class=\"btn btn-neutral btn-xs text-sm font-light\"\n
|
|
259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Datatable, isStandalone: true, selector: "kl-datatable", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, totalItemsOnPage: { classPropertyName: "totalItemsOnPage", publicName: "totalItemsOnPage", isSignal: true, isRequired: true, transformFunction: null }, currentPageSize: { classPropertyName: "currentPageSize", publicName: "currentPageSize", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", 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 }, 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 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 class=\"btn btn-neutral btn-xs text-sm font-light\"\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 <ng-content select=\"[body]\" />\n\n @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n <tr>\n <td colspan=\"7\">\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 </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"] }] });
|
|
245
260
|
}
|
|
246
261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Datatable, decorators: [{
|
|
247
262
|
type: Component,
|
|
248
|
-
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 z-10\">\n <div class=\"datatable-menu flex items-center py-2 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 <button class=\"btn btn-neutral btn-xs text-sm font-light\"\n
|
|
263
|
+
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 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 class=\"btn btn-neutral btn-xs text-sm font-light\"\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 <ng-content select=\"[body]\" />\n\n @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n <tr>\n <td colspan=\"7\">\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 </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" }]
|
|
249
264
|
}], ctorParameters: () => [] });
|
|
250
265
|
|
|
251
266
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koalarx-ui-shared-components-datatable.mjs","sources":["../../projects/koala-ui/shared/components/datatable/sort-column/ordered-column.state.ts","../../projects/koala-ui/shared/components/datatable/sort-column/sort-header-column.ts","../../projects/koala-ui/shared/components/datatable/sort-column/sort-header-column.html","../../projects/koala-ui/shared/components/datatable/sort-column/sorted-item.ts","../../projects/koala-ui/shared/components/datatable/filter/datatable-filter.ts","../../projects/koala-ui/shared/components/datatable/filter/filter-factory.ts","../../projects/koala-ui/shared/components/datatable/filter/filter.ts","../../projects/koala-ui/shared/components/datatable/filter/filter.html","../../projects/koala-ui/shared/components/datatable/datatable.ts","../../projects/koala-ui/shared/components/datatable/datatable.html","../../projects/koala-ui/shared/components/datatable/koalarx-ui-shared-components-datatable.ts"],"sourcesContent":["import { SortHeaderColumn } from './sort-header-column';\r\n\r\nexport class OrderedColumnState {\r\n static current?: SortHeaderColumn;\r\n}\r\n","import {\n Component,\n effect,\n ElementRef,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport {\n QueryPaginationDirection,\n SortFilterType,\n} from '@koalarx/ui/core/models';\nimport { OrderedColumnState } from './ordered-column.state';\n\n@Component({\n selector: 'kl-sort-header-column',\n templateUrl: './sort-header-column.html',\n})\nexport class SortHeaderColumn {\n orderBy = input.required<string>();\n style = input('');\n defaultDirection = input<QueryPaginationDirection>();\n sortable = output<SortFilterType>();\n elOrderedColumn =\n viewChild<ElementRef<HTMLTableCellElement>>('orderedColumn');\n direction = signal<QueryPaginationDirection | null>(null);\n\n constructor() {\n effect(() => {\n const defaultDirection = this.defaultDirection();\n\n if (defaultDirection) {\n this.direction.set(defaultDirection);\n OrderedColumnState.current = this;\n this.toogleColumnStateOrder('set');\n }\n });\n }\n\n sort() {\n this.direction.update((current) => {\n if (\n OrderedColumnState.current &&\n OrderedColumnState.current.orderBy !== this.orderBy\n ) {\n OrderedColumnState.current.direction.set(null);\n OrderedColumnState.current.toogleColumnStateOrder('unset');\n }\n\n OrderedColumnState.current = this;\n\n let direction: QueryPaginationDirection;\n\n switch (current) {\n case 'asc':\n direction = 'desc';\n break;\n case 'desc':\n default:\n direction = 'asc';\n }\n\n this.toogleColumnStateOrder('set');\n\n this.sortable.emit({\n orderBy: this.orderBy(),\n direction,\n });\n\n return direction;\n });\n }\n\n async toogleColumnStateOrder(state: 'set' | 'unset') {\n const columnElement = this.elOrderedColumn()?.nativeElement.parentElement;\n\n if (!columnElement) {\n return;\n }\n\n if (state === 'set') {\n columnElement.classList.add('ordered-column');\n } else {\n columnElement.classList.remove('ordered-column');\n }\n }\n}\n","<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","import { Directive, effect, ElementRef, inject, input } from '@angular/core';\nimport { SortFilterType } from '@koalarx/ui/core/models';\n\n@Directive({ selector: 'td[klSortedItem]' })\nexport class SortedItem {\n private readonly elementRef = inject<ElementRef<HTMLTableCellElement>>(\n ElementRef<HTMLTableCellElement>\n );\n\n klSortedItem = input.required<SortFilterType | null>();\n sortedPropName = input.required<string>();\n\n constructor() {\n effect(() => {\n const isSorted = this.klSortedItem()?.orderBy === this.sortedPropName();\n\n this.elementRef.nativeElement.classList.toggle('sorted', isSorted);\n\n if (isSorted) {\n this.elementRef.nativeElement.setAttribute('aria-sort', 'ascending');\n } else {\n this.elementRef.nativeElement.setAttribute('aria-sort', 'descending');\n }\n });\n }\n}\n","import { effect, Injectable, signal } from '@angular/core';\n\nexport interface FilterData {\n templateValue: string;\n propName: string;\n value: any;\n}\n\n@Injectable()\nexport class DatatableFilter {\n private readonly _payload = signal<Record<string, any>>({});\n private readonly _filters = signal<FilterData[]>([]);\n\n constructor() {\n effect(() => {\n const filters = this._filters();\n\n filters.forEach((filter) => {\n this._payload.update((current) => {\n return {\n ...current,\n [filter.propName]: filter.value,\n };\n });\n });\n });\n }\n\n get payload() {\n return this._payload.asReadonly();\n }\n\n get filters() {\n return this._filters.asReadonly();\n }\n\n setFilters(filters: FilterData[]) {\n this._filters.set(filters);\n }\n\n removeFilter(propName: string) {\n this._filters.update((current) => {\n return current.filter((filter) => filter.propName !== propName);\n });\n }\n\n clearFilters() {\n this._filters.set([]);\n this._payload.set({});\n }\n}\n","import { Injectable } from '@angular/core';\nimport { FilterData } from './datatable-filter';\n\n@Injectable()\nexport class FilterFactory {\n private readonly _filter: FilterData[] = [];\n\n get filter() {\n return [...this._filter];\n }\n\n setFilters<T>(\n filter: T,\n templateNameFn: (propName: keyof typeof filter, value: any) => string\n ) {\n const filterData = filter as Record<string, any>;\n\n Object.keys(filterData).forEach((propName) => {\n const value = filterData[propName];\n\n if (value === null || value === undefined || value === '') {\n return;\n }\n\n const templateValue = templateNameFn(propName as any, value);\n this.addFilter({ templateValue, propName, value });\n });\n\n return this._filter;\n }\n\n addFilter(filter: FilterData) {\n this._filter.push(filter);\n }\n\n toPayload(data: FilterData[]): Record<string, any> {\n return data.reduce((acc, curr) => {\n acc[curr.propName] = curr.value;\n return acc;\n }, {} as Record<string, any>);\n }\n}\n","import { Component, effect, inject, input, output } from '@angular/core';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { DatatableFilter, FilterData } from './datatable-filter';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\n@Component({\n selector: 'kl-filter',\n templateUrl: './filter.html',\n providers: [DatatableFilter],\n imports: [Tooltip],\n})\nexport class Filter {\n readonly translations = inject(AppConfig).translation.datatable;\n\n datatableFilter = inject(DatatableFilter);\n filter = input<FilterData[]>([]);\n payload = output<Record<string, any>>();\n addFilter = output<FilterData[]>();\n\n constructor() {\n effect(() => this.datatableFilter.setFilters(this.filter()));\n effect(() => this.payload.emit(this.datatableFilter.payload()));\n }\n\n add() {\n this.addFilter.emit(this.datatableFilter.filters());\n }\n}\n","@if (datatableFilter.filters().length > 0) {\n <div class=\"datatable-filter-container py-2 px-3 border-t border-b border-neutral-200 dark:border-neutral-700 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 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","import {\n booleanAttribute,\n Component,\n computed,\n effect,\n inject,\n input,\n model,\n output,\n signal,\n Type,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { SideWindow } from '@koalarx/ui/shared/components/side-window';\nimport { Button, ButtonColor } from '@koalarx/ui/shared/directives';\nimport { FilterData } from './filter/datatable-filter';\nimport { Filter } from './filter/filter';\n\n@Component({\n selector: 'kl-datatable',\n templateUrl: './datatable.html',\n imports: [FormsModule, Filter, Button],\n})\nexport class Datatable {\n private readonly sideWindow = inject(SideWindow);\n\n readonly translations = inject(AppConfig).translation.datatable;\n\n currentPage = input.required<number>();\n totalItems = input.required<number>();\n totalItemsOnPage = input.required<number>();\n currentPageSize = input.required<number>();\n isLoading = input.required();\n colspan = input.required<number>();\n loadMoreBtnColor = input<ButtonColor>('accent');\n componentFilter = input<Type<any>>();\n withPaginator = input(false, { transform: booleanAttribute });\n filter = signal<FilterData[]>([]);\n pageSize = model<number>(0);\n pageSizes = [10, 20, 30, 50, 100];\n\n skeletonRows = computed(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n skeletonCols = computed(() => {\n return Array.from({ length: this.colspan() }, (_, i) => i);\n });\n\n lastPage = computed(() => {\n const isLoading = this.isLoading();\n\n if (!isLoading) {\n return Math.ceil(this.totalItems() / this.currentPageSize());\n }\n\n return 1;\n });\n\n pageChange = output<number>();\n pageSizeChange = output<number>();\n filterChange = output<Record<string, any>>();\n reloadList = output<void>();\n loadMore = output<void>();\n\n constructor() {\n effect(() => this.pageSize.set(this.currentPageSize()));\n effect(() => this.pageSizeChange.emit(this.pageSize()));\n effect(() => this.pageChange.emit(this.currentPage()));\n }\n\n openFilter(data?: FilterData[]) {\n const component = this.componentFilter();\n\n if (!component) {\n return;\n }\n\n this.sideWindow.open(component, {\n data,\n afterClosed: {\n trigger: [],\n callback: (filters: FilterData[]) => this.filter.set(filters),\n },\n });\n }\n}\n","<div class=\"flex flex-col h-full\">\n <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between z-10\">\n <div class=\"datatable-menu flex items-center py-2 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 <button class=\"btn btn-neutral btn-xs text-sm font-light\"\n (click)=\"openFilter()\">\n <i class=\"fa-solid fa-filter text-xs\"></i>\n {{translations.btnFilterLabel}}\n </button>\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>{{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\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n </div>\n }\n </div>\n\n <kl-filter\n [filter]=\"filter()\"\n (addFilter)=\"openFilter($event)\"\n (payload)=\"filterChange.emit($event)\"\n />\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 <ng-content select=\"[body]\" />\n\n @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n <tr>\n <td colspan=\"7\">\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 </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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"koalarx-ui-shared-components-datatable.mjs","sources":["../../projects/koala-ui/shared/components/datatable/sort-column/ordered-column.state.ts","../../projects/koala-ui/shared/components/datatable/sort-column/sort-header-column.ts","../../projects/koala-ui/shared/components/datatable/sort-column/sort-header-column.html","../../projects/koala-ui/shared/components/datatable/sort-column/sorted-item.ts","../../projects/koala-ui/shared/components/datatable/filter/datatable-filter.ts","../../projects/koala-ui/shared/components/datatable/filter/filter-factory.ts","../../projects/koala-ui/shared/components/datatable/filter/filter.ts","../../projects/koala-ui/shared/components/datatable/filter/filter.html","../../projects/koala-ui/shared/components/datatable/datatable.ts","../../projects/koala-ui/shared/components/datatable/datatable.html","../../projects/koala-ui/shared/components/datatable/koalarx-ui-shared-components-datatable.ts"],"sourcesContent":["import { SortHeaderColumn } from './sort-header-column';\r\n\r\nexport class OrderedColumnState {\r\n static current?: SortHeaderColumn;\r\n}\r\n","import {\n Component,\n effect,\n ElementRef,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport {\n QueryPaginationDirection,\n SortFilterType,\n} from '@koalarx/ui/core/models';\nimport { OrderedColumnState } from './ordered-column.state';\n\n@Component({\n selector: 'kl-sort-header-column',\n templateUrl: './sort-header-column.html',\n})\nexport class SortHeaderColumn {\n orderBy = input.required<string>();\n style = input('');\n defaultDirection = input<QueryPaginationDirection>();\n sortable = output<SortFilterType>();\n elOrderedColumn =\n viewChild<ElementRef<HTMLTableCellElement>>('orderedColumn');\n direction = signal<QueryPaginationDirection | null>(null);\n\n constructor() {\n effect(() => {\n const defaultDirection = this.defaultDirection();\n\n if (defaultDirection) {\n this.direction.set(defaultDirection);\n OrderedColumnState.current = this;\n this.toogleColumnStateOrder('set');\n }\n });\n }\n\n sort() {\n this.direction.update((current) => {\n if (\n OrderedColumnState.current &&\n OrderedColumnState.current.orderBy !== this.orderBy\n ) {\n OrderedColumnState.current.direction.set(null);\n OrderedColumnState.current.toogleColumnStateOrder('unset');\n }\n\n OrderedColumnState.current = this;\n\n let direction: QueryPaginationDirection;\n\n switch (current) {\n case 'asc':\n direction = 'desc';\n break;\n case 'desc':\n default:\n direction = 'asc';\n }\n\n this.toogleColumnStateOrder('set');\n\n this.sortable.emit({\n orderBy: this.orderBy(),\n direction,\n });\n\n return direction;\n });\n }\n\n async toogleColumnStateOrder(state: 'set' | 'unset') {\n const columnElement = this.elOrderedColumn()?.nativeElement.parentElement;\n\n if (!columnElement) {\n return;\n }\n\n if (state === 'set') {\n columnElement.classList.add('ordered-column');\n } else {\n columnElement.classList.remove('ordered-column');\n }\n }\n}\n","<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","import { Directive, effect, ElementRef, inject, input } from '@angular/core';\nimport { SortFilterType } from '@koalarx/ui/core/models';\n\n@Directive({ selector: 'td[klSortedItem]' })\nexport class SortedItem {\n private readonly elementRef = inject<ElementRef<HTMLTableCellElement>>(\n ElementRef<HTMLTableCellElement>\n );\n\n klSortedItem = input.required<SortFilterType | null>();\n sortedPropName = input.required<string>();\n\n constructor() {\n effect(() => {\n const isSorted = this.klSortedItem()?.orderBy === this.sortedPropName();\n\n this.elementRef.nativeElement.classList.toggle('sorted', isSorted);\n\n if (isSorted) {\n this.elementRef.nativeElement.setAttribute('aria-sort', 'ascending');\n } else {\n this.elementRef.nativeElement.setAttribute('aria-sort', 'descending');\n }\n });\n }\n}\n","import { effect, Injectable, signal } from '@angular/core';\n\nexport interface FilterData {\n templateValue: string;\n propName: string;\n value: any;\n}\n\n@Injectable()\nexport class DatatableFilter {\n private readonly _payload = signal<Record<string, any>>({});\n private readonly _filters = signal<FilterData[]>([]);\n private readonly _clearFilter = signal<boolean>(false);\n\n constructor() {\n effect(() => {\n const filters = this._filters();\n\n filters.forEach((filter) => {\n this._payload.update((current) => {\n return {\n ...current,\n [filter.propName]: filter.value,\n };\n });\n });\n });\n }\n\n get payload() {\n return this._payload.asReadonly();\n }\n\n get filters() {\n return this._filters.asReadonly();\n }\n\n get clearFilter() {\n return this._clearFilter.asReadonly();\n }\n\n setFilters(filters: FilterData[]) {\n this._filters.set(filters);\n }\n\n removeFilter(propName: string) {\n this._filters.update((current) => {\n return current.filter((filter) => filter.propName !== propName);\n });\n }\n\n clearFilters() {\n this._filters.set([]);\n this._payload.set({});\n\n this._clearFilter.set(true);\n setTimeout(() => this._clearFilter.set(false));\n }\n}\n","import { Injectable } from '@angular/core';\nimport { FilterData } from './datatable-filter';\n\n@Injectable()\nexport class FilterFactory {\n private readonly _filter: FilterData[] = [];\n\n get filter() {\n return [...this._filter];\n }\n\n setFilters<T>(\n filter: T,\n templateNameFn: (propName: keyof typeof filter, value: any) => string\n ) {\n const filterData = filter as Record<string, any>;\n\n Object.keys(filterData).forEach((propName) => {\n const value = filterData[propName];\n\n if (value === null || value === undefined || value === '') {\n return;\n }\n\n const templateValue = templateNameFn(propName as any, value);\n this.addFilter({ templateValue, propName, value });\n });\n\n return this._filter;\n }\n\n addFilter(filter: FilterData) {\n this._filter.push(filter);\n }\n\n toPayload(data: FilterData[]): Record<string, any> {\n return data.reduce((acc, curr) => {\n acc[curr.propName] = curr.value;\n return acc;\n }, {} as Record<string, any>);\n }\n}\n","import { Component, effect, inject, input, output } from '@angular/core';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { DatatableFilter, FilterData } from './datatable-filter';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\n@Component({\n selector: 'kl-filter',\n templateUrl: './filter.html',\n providers: [DatatableFilter],\n imports: [Tooltip],\n})\nexport class Filter {\n readonly translations = inject(AppConfig).translation.datatable;\n\n datatableFilter = inject(DatatableFilter);\n filter = input<FilterData[]>([]);\n payload = output<Record<string, any>>();\n addFilter = output<FilterData[]>();\n clearFilter = output<void>();\n\n constructor() {\n effect(() => this.datatableFilter.setFilters(this.filter()));\n effect(() => this.payload.emit(this.datatableFilter.payload()));\n effect(() => {\n if (this.datatableFilter.clearFilter()) {\n this.clearFilter.emit();\n }\n });\n }\n\n add() {\n this.addFilter.emit(this.datatableFilter.filters());\n }\n}\n","@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","import {\n booleanAttribute,\n Component,\n computed,\n effect,\n inject,\n input,\n model,\n output,\n signal,\n Type,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { SideWindow } from '@koalarx/ui/shared/components/side-window';\nimport { Button, ButtonColor } from '@koalarx/ui/shared/directives';\nimport { FilterData } from './filter/datatable-filter';\nimport { Filter } from './filter/filter';\n\n@Component({\n selector: 'kl-datatable',\n templateUrl: './datatable.html',\n imports: [FormsModule, Filter, Button],\n})\nexport class Datatable {\n private readonly sideWindow = inject(SideWindow);\n\n readonly translations = inject(AppConfig).translation.datatable;\n\n currentPage = input.required<number>();\n totalItems = input.required<number>();\n totalItemsOnPage = input.required<number>();\n currentPageSize = input.required<number>();\n isLoading = input.required();\n colspan = input.required<number>();\n loadMoreBtnColor = input<ButtonColor>('accent');\n componentFilter = input<Type<any>>();\n withPaginator = input(false, { transform: booleanAttribute });\n filter = signal<FilterData[]>([]);\n hasFilter = computed(() => {\n return this.filter().length > 0;\n });\n pageSize = model<number>(0);\n pageSizes = [10, 20, 30, 50, 100];\n\n skeletonRows = computed(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n skeletonCols = computed(() => {\n return Array.from({ length: this.colspan() }, (_, i) => i);\n });\n\n lastPage = computed(() => {\n const isLoading = this.isLoading();\n\n if (!isLoading) {\n return Math.ceil(this.totalItems() / this.currentPageSize());\n }\n\n return 1;\n });\n\n pageChange = output<number>();\n pageSizeChange = output<number>();\n filterChange = output<Record<string, any>>();\n reloadList = output<void>();\n loadMore = output<void>();\n\n constructor() {\n effect(() => this.pageSize.set(this.currentPageSize()));\n effect(() => this.pageSizeChange.emit(this.pageSize()));\n effect(() => this.pageChange.emit(this.currentPage()));\n }\n\n openFilter(data?: FilterData[]) {\n const component = this.componentFilter();\n\n if (!component) {\n return;\n }\n\n this.sideWindow.open(component, {\n data,\n afterClosed: {\n trigger: [],\n callback: (filters: FilterData[]) => this.filter.set(filters),\n },\n });\n }\n}\n","<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 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 class=\"btn btn-neutral btn-xs text-sm font-light\"\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 <ng-content select=\"[body]\" />\n\n @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n <tr>\n <td colspan=\"7\">\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 </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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@koalarx/ui",
|
|
3
|
-
"version": "20.0.
|
|
3
|
+
"version": "20.0.46",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=20.0.0",
|
|
6
6
|
"@angular/core": ">=20.0.0"
|
|
@@ -178,14 +178,14 @@
|
|
|
178
178
|
"types": "./shared/components/vertical-menu/index.d.ts",
|
|
179
179
|
"default": "./fesm2022/koalarx-ui-shared-components-vertical-menu.mjs"
|
|
180
180
|
},
|
|
181
|
-
"./shared/components/input-field/autocomplete": {
|
|
182
|
-
"types": "./shared/components/input-field/autocomplete/index.d.ts",
|
|
183
|
-
"default": "./fesm2022/koalarx-ui-shared-components-input-field-autocomplete.mjs"
|
|
184
|
-
},
|
|
185
181
|
"./shared/components/input-field/field-group": {
|
|
186
182
|
"types": "./shared/components/input-field/field-group/index.d.ts",
|
|
187
183
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-field-group.mjs"
|
|
188
184
|
},
|
|
185
|
+
"./shared/components/input-field/autocomplete": {
|
|
186
|
+
"types": "./shared/components/input-field/autocomplete/index.d.ts",
|
|
187
|
+
"default": "./fesm2022/koalarx-ui-shared-components-input-field-autocomplete.mjs"
|
|
188
|
+
},
|
|
189
189
|
"./shared/components/input-field/fieldset": {
|
|
190
190
|
"types": "./shared/components/input-field/fieldset/index.d.ts",
|
|
191
191
|
"default": "./fesm2022/koalarx-ui-shared-components-input-field-fieldset.mjs"
|
|
@@ -38,9 +38,11 @@ interface FilterData {
|
|
|
38
38
|
declare class DatatableFilter {
|
|
39
39
|
private readonly _payload;
|
|
40
40
|
private readonly _filters;
|
|
41
|
+
private readonly _clearFilter;
|
|
41
42
|
constructor();
|
|
42
43
|
get payload(): _angular_core.Signal<Record<string, any>>;
|
|
43
44
|
get filters(): _angular_core.Signal<FilterData[]>;
|
|
45
|
+
get clearFilter(): _angular_core.Signal<boolean>;
|
|
44
46
|
setFilters(filters: FilterData[]): void;
|
|
45
47
|
removeFilter(propName: string): void;
|
|
46
48
|
clearFilters(): void;
|
|
@@ -72,10 +74,11 @@ declare class Filter {
|
|
|
72
74
|
filter: _angular_core.InputSignal<FilterData[]>;
|
|
73
75
|
payload: _angular_core.OutputEmitterRef<Record<string, any>>;
|
|
74
76
|
addFilter: _angular_core.OutputEmitterRef<FilterData[]>;
|
|
77
|
+
clearFilter: _angular_core.OutputEmitterRef<void>;
|
|
75
78
|
constructor();
|
|
76
79
|
add(): void;
|
|
77
80
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Filter, never>;
|
|
78
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kl-filter", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; }, { "payload": "payload"; "addFilter": "addFilter"; }, never, never, true, never>;
|
|
81
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kl-filter", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; }, { "payload": "payload"; "addFilter": "addFilter"; "clearFilter": "clearFilter"; }, never, never, true, never>;
|
|
79
82
|
}
|
|
80
83
|
|
|
81
84
|
declare class Datatable {
|
|
@@ -99,6 +102,7 @@ declare class Datatable {
|
|
|
99
102
|
componentFilter: _angular_core.InputSignal<Type<any> | undefined>;
|
|
100
103
|
withPaginator: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
101
104
|
filter: _angular_core.WritableSignal<FilterData[]>;
|
|
105
|
+
hasFilter: _angular_core.Signal<boolean>;
|
|
102
106
|
pageSize: _angular_core.ModelSignal<number>;
|
|
103
107
|
pageSizes: number[];
|
|
104
108
|
skeletonRows: _angular_core.Signal<number[]>;
|