i-tech-shared-components 1.4.40 → 1.4.41

package/lib/components/ag-grid/date-range-selection/date-range-selection.component.d.ts

@@ -0,0 +1,34 @@
+import { UntypedFormGroup } from '@angular/forms';
+import { IFilterAngularComp } from 'ag-grid-angular';
+import { IDoesFilterPassParams, IFilterParams } from 'ag-grid-community';
+import { DateRangeDatepickerComponent } from '../../date-range-datepicker/date-range-datepicker.component';
+import { ParseDateService } from "../../../services/parse-date.service";
+import { AgGridDateRangeConfig } from "../../../interfaces/date-range-filtration.interface";
+import * as i0 from "@angular/core";
+export declare class DateRangeSelectionComponent implements IFilterAngularComp {
+    private dateService;
+    rangePicker: DateRangeDatepickerComponent;
+    params: IFilterParams;
+    config: AgGridDateRangeConfig;
+    form: UntypedFormGroup;
+    defaultValueForDates: any[];
+    constructor(dateService: ParseDateService);
+    agInit(params: any): void;
+    /**
+     * Selection event from the Datepicker component
+     */
+    onDateChange(event: Array<string>): void;
+    /**
+     * AG Grid calls this to get the state of the filter
+     */
+    getModel(): any;
+    /**
+     * AG Grid calls this to restore the filter state
+     */
+    setModel(model: any): void;
+    isFilterActive(): boolean;
+    doesFilterPass(params: IDoesFilterPassParams): boolean;
+    afterGuiDetached(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangeSelectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangeSelectionComponent, "i-tech-date-range-selection", never, {}, {}, never, never, true, never>;
+}

package/lib/components/ag-grid/select-with-search/select-with-search.component.d.ts

@@ -0,0 +1,44 @@
+import { OnDestroy, OnInit } from "@angular/core";
+import { UniversalSelectorConfig } from "../../../interfaces/selection-filtration-configuration.interface";
+import { IDoesFilterPassParams, IFilterParams } from "ag-grid-community";
+import { FiltrationHelperService } from "../../../services/filtration-helper.service";
+import { IFilterAngularComp } from "ag-grid-angular";
+import { UntypedFormGroup } from "@angular/forms";
+import * as i0 from "@angular/core";
+export declare class SelectWithSearchComponent implements OnInit, OnDestroy, IFilterAngularComp {
+    private dataService;
+    config: UniversalSelectorConfig;
+    params: IFilterParams;
+    items: any[];
+    selectedIds: Set<any>;
+    allSelected: boolean;
+    partiallySelected: boolean;
+    currentPage: number;
+    isLastPage: boolean;
+    loading: boolean;
+    searchForm: UntypedFormGroup;
+    private search$;
+    private pageLoad$;
+    private destroy$;
+    constructor(dataService: FiltrationHelperService);
+    agInit(params: IFilterParams): void;
+    doesFilterPass(params: IDoesFilterPassParams): boolean;
+    isFilterActive(): boolean;
+    getModel(): any;
+    setModel(model: any): void;
+    ngOnInit(): void;
+    private initCombinedStream;
+    private updateCheckboxState;
+    toggleAll(checked: boolean): void;
+    onSearchChange(value: string): void;
+    handleScroll(e: any): void;
+    resetFilter(): void;
+    /**
+     * Handles selection logic for the custom list.
+     * Supports SINGLE (radio-like) and MULTI (checkbox) modes.
+     */
+    onItemClick(item: any): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectWithSearchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectWithSearchComponent, "i-tech-select-with-search", never, {}, {}, never, never, true, never>;
+}

package/lib/interfaces/date-range-filtration.interface.d.ts

@@ -0,0 +1,7 @@
+export interface AgGridDateRangeConfig {
+    returnValueByKey: string[];
+    targetFields?: string[];
+    DATE_RANGE?: {
+        placeholder: string[];
+    };
+}

package/lib/interfaces/selection-filtration-configuration.interface.d.ts

@@ -0,0 +1,59 @@
+export interface PaginationResponse<T = any> {
+    content: T[];
+    totalPages: number;
+    totalElements: number;
+    size: number;
+    number: number;
+    first: boolean;
+    last: boolean;
+    empty: boolean;
+}
+export interface UniversalSelectorConfig {
+    /** Source of the data: Can be a remote Request, a Fixed array, or a Map/Object */
+    source: {
+        type: 'REQUEST';
+        url: string;
+        method: 'GET' | 'POST';
+        payload?: any;
+    } | {
+        type: 'FIXED';
+        data: any[];
+    } | {
+        type: 'MAP';
+        data: Record<string, any>;
+    };
+    /** SINGLE allows one selection; MULTI allows multiple via checkboxes */
+    mode: 'SINGLE' | 'MULTI';
+    /** If true, shows the '(Select All)' checkbox at the top of the list */
+    selectAll: boolean;
+    /** The key the backend expects for the ID array (e.g., 'statuses', 'driverIds') */
+    backEndKey: string;
+    /** * Default is true.
+     * true -> returns { [backEndKey]: string[] }
+     * false -> returns { [backEndKey]: string[], selectAll: boolean }
+     */
+    returnFlatArray?: boolean;
+    /** Configuration for rendering and extracting data from objects */
+    renderAndKeys: {
+        /** Keys to extract from the object to create the 'value' ID. Empty = whole object. */
+        valueByKeys?: string[];
+        /** Keys used to build the primary label displayed in the list. */
+        labelKeys: string[];
+        /** Optional keys for a secondary line of text in the list option. */
+        subValueKey?: string[];
+        /** String used to join multiple label keys (default is usually a space). */
+        separator?: string;
+        /** For complex parameter mapping. */
+        valueByParam?: string[][];
+        /** If true, labels will be passed through the TranslatePipe. */
+        needTranslate?: boolean;
+        /** Optional prefix for icons if rendered. */
+        iconPrefix?: string;
+    };
+    /** Optional search bar configuration */
+    search?: {
+        placeholder?: string;
+    };
+    /** If true, a clear button can be implemented to reset selection */
+    clearable?: boolean;
+}

package/lib/interfaces/selection-filtration.tokens.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+/**
+ * Global Token for the project's API Gateway URL.
+ * Injected at the root level of each application (TMT, T3, etc.).
+ */
+export declare const DATA_ENDPOINT: InjectionToken<string>;

package/lib/services/filtration-helper.service.d.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { PaginationResponse, UniversalSelectorConfig } from '../interfaces/selection-filtration-configuration.interface';
+import * as i0 from "@angular/core";
+export declare class FiltrationHelperService {
+    private http;
+    private dataEndpoint;
+    constructor(http: HttpClient, dataEndpoint: string);
+    getData(config: UniversalSelectorConfig, page?: number, size?: number, search?: string): Observable<PaginationResponse>;
+    /**
+     * Universal path extractor for strings or hierarchical arrays ['user', 'role', 'id']
+     */
+    getValueByPath(item: any, path: string | Array<string | number>): any;
+    private filterLocal;
+    private wrapInFakePagination;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FiltrationHelperService, [null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FiltrationHelperService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i-tech-shared-components",
-  "version": "1.4.40",
+  "version": "1.4.41",
   "peerDependencies": {
     "@angular/animations": "^19.0.0",
     "@angular/cdk": "^19.0.0",

package/public-api.d.ts

@@ -31,3 +31,5 @@ export * from './lib/components/ag-grid/tooltip-cell-renderer.component';
 export * from './lib/helper-functions/phone-number-formatter.function';
 export * from './lib/components/phone-number-input/phone-number-input.component';
 export * from './lib/components/phone-number-input/phone-number.validator';
+export * from './lib/components/ag-grid/date-range-selection/date-range-selection.component';
+export * from './lib/components/ag-grid/select-with-search/select-with-search.component';

package/theme/_ag-grid.scss

@@ -1,245 +1,245 @@
-@use '@angular/material' as mat;
-@use "./color_themes.scss" as color-themes;
-
-body {
-
-  .ag-theme-material {
-    --ag-header-column-separator-display: block;
-    --ag-header-column-separator-height: 50%;
-    --ag-header-column-separator-color: rgba(0, 0, 0, 0.12);
-    --ag-secondary-foreground-color: var(--neutral30);
-
-    // Success theme
-    .ag-row.success-row {
-      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
-    }
-    .ag-row.success-row:hover:before {
-      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
-    }
-
-    // Change theme
-    .ag-cell-changed {
-      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 99)};
-      &.ag-cell-focus,
-      &:hover {
-        background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 98)};
-      }
-    }
-
-    // Error theme
-    .ag-row.error-row {
-      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 99)};
-    }
-    .ag-row.error-row:hover:before {
-      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 98)};
-    }
-
-    .ag-row.not-found-row-even {
-      background: repeating-linear-gradient(45deg, #FAFAFC, #FAFAFC 10px, #F2F2F5 10px, #F2F2F5 20px) 0 0;
-
-      &:hover:before {
-        background: repeating-linear-gradient(45deg, #F8F8FA, #F8F8FA 10px, #E8E9ED 10px, #E8E9ED 20px) 0 0;
-      }
-
-      &.ag-row-selected:before {
-        background: repeating-linear-gradient(45deg, #E3F6E7, #E3F6E7 10px, white 10px, white 20px) -14px 0 !important;
-      }
-
-      &:not(.ag-row-selected):hover:before {
-        background: repeating-linear-gradient(45deg, #EFFAF1, #EFFAF1 10px, white 10px, white 20px) -14px 0 !important;
-      }
-    }
-    .ag-row.not-found-row-odd {
-      background: repeating-linear-gradient(45deg, #FAFAFC, #FAFAFC 10px, #F2F2F5 10px, #F2F2F5 20px) -13px 0;
-
-      &:hover:before {
-        background: repeating-linear-gradient(45deg, #F8F8FA, #F8F8FA 10px, #E8E9ED 10px, #E8E9ED 20px) -13px 0;
-      }
-
-      &.ag-row-selected:before {
-        background: repeating-linear-gradient(45deg, #E3F6E7, #E3F6E7 10px, white 10px, white 20px) 1px 0 !important;
-      }
-
-      &:not(.ag-row-selected):hover:before {
-        background: repeating-linear-gradient(45deg, #EFFAF1, #EFFAF1 10px, white 10px, white 20px) 1px 0 !important;
-      }
-    }
-
-    .ag-row-group {
-      color: var(--Text, var(--neutral30));
-      background-color: white;
-      font-size: 14px;
-      font-weight: 700;
-      line-height: 20px;
-      letter-spacing: 2.5px;
-      text-transform: uppercase;
-    }
-
-    .tooltip-cell-renderer {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .grid-with-toolbar {
-    $borderRadius: 6px;
-
-    .filtration {
-      padding: 8px;
-      border: 1px solid var(--neutral90);
-      border-bottom: unset;
-      border-top-left-radius: #{$borderRadius};
-      border-top-right-radius: #{$borderRadius};
-
-      .search {
-        width: 210px;
-      }
-
-      background-color: #fff
-    }
-
-    .ag-root-wrapper {
-      background-color: transparent;
-      border: unset;
-      border-radius: unset;
-      --ag-border-color: var(--neutral90);
-
-      .ag-root-wrapper-body {
-        border-bottom-left-radius: #{$borderRadius};
-        border-bottom-right-radius: #{$borderRadius};
-        border: 1px solid var(--neutral90);
-        background-color: var(--white-color);
-      }
-
-      .ag-picker-field-wrapper {
-        border-radius: 4px;
-        height: 40px;
-        border: 1px solid var(--neutral90);
-        box-shadow: unset;
-        .ag-picker-field-display {
-          color: #424954;
-          font-weight: 500;
-          font-size: 13px;
-        }
-      }
-
-      .ag-header, .ag-advanced-filter-header {
-        --ag-header-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 99)};
-      }
-    }
-
-    .ag-paging-panel {
-      border-top: unset;
-    }
-  }
-
-
-  .full-width-grid {
-    .ag-root-wrapper .ag-root-wrapper-body {
-      border-left: none !important;
-    }
-  }
-
-  .grid-with-selection {
-    --ag-selected-row-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
-    --ag-row-hover-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
-  }
-
-  // Overrides for master/detail grid row group for payments
-  .grid-with-master-detail.ag-theme-material {
-    .ag-row-group {
-      line-height: unset;
-      font-weight: unset;
-      letter-spacing: unset;
-      text-transform: unset;
-      background-color: unset;
-      font-size: unset;
-      align-items: center;
-      height: 100%;
-    }
-    .ag-row-group-leaf-indent {
-      height: 100%;
-      margin-left: 26px;
-    }
-  }
-
-  .grid-with-group-rows-and-master-detail.ag-theme-material {
-    .ag-center-cols-container {
-      min-width: 100%;
-      // Override for Master Detail for payments
-      .ag-row-group {
-        color: unset;
-        background-color: unset;
-        line-height: unset;
-        font-weight: unset;
-        letter-spacing: unset;
-        text-transform: unset;
-        font-size: unset;
-        align-items: center;
-        height: 100%;
-      }
-    }
-
-    .ag-row-group-leaf-indent {
-      height: 100%;
-      margin-left: 26px;
-    }
-
-    .ag-sticky-top-container {
-      .ag-row-group {
-        line-height: unset;
-        font-weight: unset;
-        letter-spacing: unset;
-        text-transform: unset;
-        background-color: unset;
-        font-size: unset;
-        align-items: center;
-        height: 100%;
-      }
-
-      .ag-row-group-leaf-indent {
-        height: 100%;
-        margin-left: 26px;
-      }
-    }
-  }
-
-  .side-pane-grouped-grid.ag-theme-material {
-    .ag-row-group {
-      color: unset;
-      background-color: unset;
-      font-weight: unset;
-      letter-spacing: unset;
-      text-transform: unset;
-      font-size: unset;
-      align-items: center;
-      .ag-column-first {
-        padding-left: 10px;
-      }
-    }
-
-
-    .ag-row {
-      .ag-column-first {
-        padding-left: 10px;
-        .ag-row-group-leaf-indent {
-          margin-left: 22px;
-        }
-      }
-    }
-
-    .ag-group-contracted {
-      margin-right: 4px;
-    }
-
-    .ag-group-expanded {
-      margin-right: 4px;
-    }
-
-    .ag-root-wrapper .ag-root-wrapper-body {
-      border-right: none;
-      border-left: none;
-    }
-  }
-
-}
+@use '@angular/material' as mat;
+@use "./color_themes.scss" as color-themes;
+
+body {
+
+  .ag-theme-material {
+    --ag-header-column-separator-display: block;
+    --ag-header-column-separator-height: 50%;
+    --ag-header-column-separator-color: rgba(0, 0, 0, 0.12);
+    --ag-secondary-foreground-color: var(--neutral30);
+
+    // Success theme
+    .ag-row.success-row {
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
+    }
+    .ag-row.success-row:hover:before {
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
+    }
+
+    // Change theme
+    .ag-cell-changed {
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 99)};
+      &.ag-cell-focus,
+      &:hover {
+        background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 98)};
+      }
+    }
+
+    // Error theme
+    .ag-row.error-row {
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 99)};
+    }
+    .ag-row.error-row:hover:before {
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 98)};
+    }
+
+    .ag-row.not-found-row-even {
+      background: repeating-linear-gradient(45deg, #FAFAFC, #FAFAFC 10px, #F2F2F5 10px, #F2F2F5 20px) 0 0;
+
+      &:hover:before {
+        background: repeating-linear-gradient(45deg, #F8F8FA, #F8F8FA 10px, #E8E9ED 10px, #E8E9ED 20px) 0 0;
+      }
+
+      &.ag-row-selected:before {
+        background: repeating-linear-gradient(45deg, #E3F6E7, #E3F6E7 10px, white 10px, white 20px) -14px 0 !important;
+      }
+
+      &:not(.ag-row-selected):hover:before {
+        background: repeating-linear-gradient(45deg, #EFFAF1, #EFFAF1 10px, white 10px, white 20px) -14px 0 !important;
+      }
+    }
+    .ag-row.not-found-row-odd {
+      background: repeating-linear-gradient(45deg, #FAFAFC, #FAFAFC 10px, #F2F2F5 10px, #F2F2F5 20px) -13px 0;
+
+      &:hover:before {
+        background: repeating-linear-gradient(45deg, #F8F8FA, #F8F8FA 10px, #E8E9ED 10px, #E8E9ED 20px) -13px 0;
+      }
+
+      &.ag-row-selected:before {
+        background: repeating-linear-gradient(45deg, #E3F6E7, #E3F6E7 10px, white 10px, white 20px) 1px 0 !important;
+      }
+
+      &:not(.ag-row-selected):hover:before {
+        background: repeating-linear-gradient(45deg, #EFFAF1, #EFFAF1 10px, white 10px, white 20px) 1px 0 !important;
+      }
+    }
+
+    .ag-row-group {
+      color: var(--Text, var(--neutral30));
+      background-color: white;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 20px;
+      letter-spacing: 2.5px;
+      text-transform: uppercase;
+    }
+
+    .tooltip-cell-renderer {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .grid-with-toolbar {
+    $borderRadius: 6px;
+
+    .filtration {
+      padding: 8px;
+      border: 1px solid var(--neutral90);
+      border-bottom: unset;
+      border-top-left-radius: #{$borderRadius};
+      border-top-right-radius: #{$borderRadius};
+
+      .search {
+        width: 210px;
+      }
+
+      background-color: #fff
+    }
+
+    .ag-root-wrapper {
+      background-color: transparent;
+      border: unset;
+      border-radius: unset;
+      --ag-border-color: var(--neutral90);
+
+      .ag-root-wrapper-body {
+        border-bottom-left-radius: #{$borderRadius};
+        border-bottom-right-radius: #{$borderRadius};
+        border: 1px solid var(--neutral90);
+        background-color: var(--white-color);
+      }
+
+      .ag-picker-field-wrapper {
+        border-radius: 4px;
+        height: 40px;
+        border: 1px solid var(--neutral90);
+        box-shadow: unset;
+        .ag-picker-field-display {
+          color: #424954;
+          font-weight: 500;
+          font-size: 13px;
+        }
+      }
+
+      .ag-header, .ag-advanced-filter-header {
+        --ag-header-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 99)};
+      }
+    }
+
+    .ag-paging-panel {
+      border-top: unset;
+    }
+  }
+
+
+  .full-width-grid {
+    .ag-root-wrapper .ag-root-wrapper-body {
+      border-left: none !important;
+    }
+  }
+
+  .grid-with-selection {
+    --ag-selected-row-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
+    --ag-row-hover-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
+  }
+
+  // Overrides for master/detail grid row group for payments
+  .grid-with-master-detail.ag-theme-material {
+    .ag-row-group {
+      line-height: unset;
+      font-weight: unset;
+      letter-spacing: unset;
+      text-transform: unset;
+      background-color: unset;
+      font-size: unset;
+      align-items: center;
+      height: 100%;
+    }
+    .ag-row-group-leaf-indent {
+      height: 100%;
+      margin-left: 26px;
+    }
+  }
+
+  .grid-with-group-rows-and-master-detail.ag-theme-material {
+    .ag-center-cols-container {
+      min-width: 100%;
+      // Override for Master Detail for payments
+      .ag-row-group {
+        color: unset;
+        background-color: unset;
+        line-height: unset;
+        font-weight: unset;
+        letter-spacing: unset;
+        text-transform: unset;
+        font-size: unset;
+        align-items: center;
+        height: 100%;
+      }
+    }
+
+    .ag-row-group-leaf-indent {
+      height: 100%;
+      margin-left: 26px;
+    }
+
+    .ag-sticky-top-container {
+      .ag-row-group {
+        line-height: unset;
+        font-weight: unset;
+        letter-spacing: unset;
+        text-transform: unset;
+        background-color: unset;
+        font-size: unset;
+        align-items: center;
+        height: 100%;
+      }
+
+      .ag-row-group-leaf-indent {
+        height: 100%;
+        margin-left: 26px;
+      }
+    }
+  }
+
+  .side-pane-grouped-grid.ag-theme-material {
+    .ag-row-group {
+      color: unset;
+      background-color: unset;
+      font-weight: unset;
+      letter-spacing: unset;
+      text-transform: unset;
+      font-size: unset;
+      align-items: center;
+      .ag-column-first {
+        padding-left: 10px;
+      }
+    }
+
+
+    .ag-row {
+      .ag-column-first {
+        padding-left: 10px;
+        .ag-row-group-leaf-indent {
+          margin-left: 22px;
+        }
+      }
+    }
+
+    .ag-group-contracted {
+      margin-right: 4px;
+    }
+
+    .ag-group-expanded {
+      margin-right: 4px;
+    }
+
+    .ag-root-wrapper .ag-root-wrapper-body {
+      border-right: none;
+      border-left: none;
+    }
+  }
+
+}