@vallift/ngl 0.0.3 → 0.0.5

package/components/listview/listview.component.d.ts

@@ -0,0 +1,21 @@
+import { AfterViewInit, Type } from '@angular/core';
+import { PaginationState } from '../../base/base-pagination-state';
+import { TableActionEvent, TableStateEvent } from '../data-table/data-table.component';
+import * as i0 from "@angular/core";
+export declare class ListviewComponent implements AfterViewInit {
+    state: import("@angular/core").InputSignal<PaginationState<any>>;
+    data: import("@angular/core").InputSignal<any>;
+    pageSize: import("@angular/core").InputSignal<number>;
+    component: import("@angular/core").InputSignal<Type<any>>;
+    enableSearch: import("@angular/core").InputSignal<boolean>;
+    enableSearchFullWidth: import("@angular/core").InputSignal<boolean>;
+    onStateChanged: import("@angular/core").OutputEmitterRef<TableStateEvent>;
+    onActionPerformed: import("@angular/core").OutputEmitterRef<TableActionEvent>;
+    private searchText;
+    ngAfterViewInit(): void;
+    onSearchTextChanged($event: string): void;
+    onScroll(): void;
+    onRowAction($event: TableActionEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListviewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListviewComponent, "app-listview", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "component": { "alias": "component"; "required": true; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "enableSearchFullWidth": { "alias": "enableSearchFullWidth"; "required": false; "isSignal": true; }; }, { "onStateChanged": "onStateChanged"; "onActionPerformed": "onActionPerformed"; }, never, never, true, never>;
+}

package/fesm2022/vallift-ngl.mjs

@@ -14,6 +14,7 @@ import { NgClass, DOCUMENT, CommonModule, DatePipe, NgStyle } from '@angular/com
 import { SvgIconComponent } from 'angular-svg-icon';
 import { CdkPortal } from '@angular/cdk/portal';
 import { NgxMaskDirective } from 'ngx-mask';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import * as i2 from '@angular/platform-browser';
 import { isValidDate } from 'rxjs/internal/util/isDate';
 
@@ -540,8 +541,8 @@ class PaginationState {
     error = this.errorSignal.asReadonly();
     state = this.stateSignal.asReadonly();
     items = signal([]);
-    pageNumber = signal(1);
-    pageSize = signal(1);
+    pageNumber = signal(0);
+    pageSize = signal(25);
     totalRecords = signal(0);
     totalPages = signal(0);
     constructor() {
@@ -596,8 +597,8 @@ class PaginationState {
         this.errorSignal.set(null);
         this.stateSignal.set(RequestState.idle);
         this.items.set([]);
-        this.pageNumber.set(1);
-        this.pageSize.set(0);
+        this.pageNumber.set(0);
+        this.pageSize.set(25);
         this.totalRecords.set(0);
         this.totalPages.set(0);
     }
@@ -2228,6 +2229,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 'app-env-banner', standalone: true, imports: [], template: "@if(config.enableDevTools) {\n  <div\n    class=\"banner fixed top-6 left-0 bg-black bg-opacity-80 text-xs text-white transform -rotate-45 translate-y-1/4 -translate-x-1/4 w-36 text-center px-1 py-1\">\n    DEV\n  </div>\n}\n", styles: [".banner{z-index:10000}\n"] }]
         }] });
 
+class ListviewComponent {
+    state = input.required();
+    data = input();
+    pageSize = input(20);
+    component = input.required();
+    enableSearch = input(true);
+    enableSearchFullWidth = input(true);
+    onStateChanged = output();
+    onActionPerformed = output();
+    searchText = '';
+    ngAfterViewInit() {
+        let paginationEvent = {
+            pageNumber: 1, pageSize: this.pageSize()
+        };
+        let state = {
+            searchText: '',
+            paginationEvent: paginationEvent,
+        };
+        console.log('update state');
+        this.onStateChanged.emit(state);
+    }
+    onSearchTextChanged($event) {
+        this.state().clearState();
+        this.searchText = $event;
+        let paginationEvent = {
+            pageNumber: 1, pageSize: this.pageSize()
+        };
+        let tableStateEvent = {
+            searchText: this.searchText,
+            paginationEvent: paginationEvent,
+        };
+        this.onStateChanged.emit(tableStateEvent);
+    }
+    onScroll() {
+        let nextPage = this.state().pageNumber() + 1;
+        let paginationEvent = {
+            pageNumber: nextPage, pageSize: this.pageSize()
+        };
+        let tableStateEvent = {
+            searchText: this.searchText,
+            paginationEvent: paginationEvent,
+        };
+        this.onStateChanged.emit(tableStateEvent);
+    }
+    onRowAction($event) {
+        this.onActionPerformed.emit($event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ListviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-listview', imports: [
+                        InfiniteScrollDirective,
+                        TextInputComponent,
+                        DynamicRendererComponent,
+                        ShimmerComponent,
+                        NoDataTableComponent,
+                    ], standalone: true, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n" }]
+        }] });
+
 class LoaderService {
     loadingCount = signal(0);
     show() {
@@ -5499,5 +5561,5 @@ function provideNglConfig(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
 //# sourceMappingURL=vallift-ngl.mjs.map