@vallift/ngl 22.0.41 → 22.0.43
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.
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -1341,11 +1341,12 @@ class PaginationComponent {
|
|
|
1341
1341
|
get endItem() {
|
|
1342
1342
|
return Math.min(this.currentPage * this.pageSize, this.totalItems());
|
|
1343
1343
|
}
|
|
1344
|
-
changePageSize(event) {
|
|
1344
|
+
changePageSize(event, selectEl) {
|
|
1345
1345
|
const newSize = +event;
|
|
1346
1346
|
this.pageSize = newSize;
|
|
1347
1347
|
this.currentPage = 1; // Reset to first page when page size changes
|
|
1348
1348
|
this.emitPageChange();
|
|
1349
|
+
selectEl?.blur();
|
|
1349
1350
|
}
|
|
1350
1351
|
goToPage(page) {
|
|
1351
1352
|
if (page >= 1 && page <= this.totalPages) {
|
|
@@ -1373,14 +1374,13 @@ class PaginationComponent {
|
|
|
1373
1374
|
this.pageChange.emit({ pageNumber: this.currentPage, pageSize: this.pageSize });
|
|
1374
1375
|
}
|
|
1375
1376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1376
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n <div>\n
|
|
1377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n <div>\n <p class=\"text-sm text-neutral-600 text-nowrap\">\n Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n </p>\n </div>\n\n <div class=\"flex items-center space-x-4\">\n\n <span class=\"text-body2\">Items per page:</span>\n\n <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n <select\n #pageSizeSelect\n [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n\n @if (currentPage > 1) {\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToFirstPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToPreviousPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n }\n\n @if (totalPages > 0 && currentPage < totalPages) {\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToNextPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToLastPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n }\n </div>\n</div>\n", styles: [""], 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]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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"] }] });
|
|
1377
1378
|
}
|
|
1378
1379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1379
1380
|
type: Component,
|
|
1380
1381
|
args: [{ selector: 'app-pagination', standalone: true, imports: [
|
|
1381
1382
|
FormsModule,
|
|
1382
|
-
|
|
1383
|
-
], template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n <div>\n <!-- Showing items text -->\n <p class=\"text-sm text-gray-700 text-nowrap\">\n Showing <span class=\"font-semibold\">{{ startItem }}</span> to <span class=\"font-semibold\">{{ endItem }}</span>\n of <span class=\"font-semibold\">{{ totalItems() }}</span> results\n </p>\n </div>\n\n <div class=\"flex items-center space-x-4\">\n\n <span class=\"text-body2\">Items per page:</span>\n\n <div class=\"relative inline-block border rounded p-2 text-caption\">\n <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\"\n class=\"\">\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n\n <span class=\"text-caption\">{{ startItem }} - {{ endItem }} of {{ totalItems() }}</span>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n [disabled]=\"currentPage === 1\"\n (click)=\"goToFirstPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n [disabled]=\"currentPage === 1\"\n (click)=\"goToPreviousPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"black\"/>\n </svg>\n </button>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n [disabled]=\"currentPage === totalPages\"\n (click)=\"goToNextPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"black\"/>\n </svg>\n </button>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n [disabled]=\"currentPage === totalPages\"\n (click)=\"goToLastPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"black\"/>\n </svg>\n </button>\n </div>\n</div>\n" }]
|
|
1383
|
+
], template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n <div>\n <p class=\"text-sm text-neutral-600 text-nowrap\">\n Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n </p>\n </div>\n\n <div class=\"flex items-center space-x-4\">\n\n <span class=\"text-body2\">Items per page:</span>\n\n <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n <select\n #pageSizeSelect\n [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n\n @if (currentPage > 1) {\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToFirstPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToPreviousPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n }\n\n @if (totalPages > 0 && currentPage < totalPages) {\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToNextPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900\"\n (click)=\"goToLastPage()\">\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n }\n </div>\n</div>\n" }]
|
|
1384
1384
|
}], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageSize: [{
|
|
1385
1385
|
type: Input
|
|
1386
1386
|
}], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|