i-tech-shared-components 1.4.40 → 1.4.42

package/fesm2022/i-tech-shared-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, inject, Injectable, HostListener, Input, Directive, EventEmitter, Output, Component, ViewChild } from '@angular/core';
+import { Pipe, inject, Injectable, HostListener, Input, Directive, EventEmitter, Output, Component, ViewChild, InjectionToken, Optional, Inject } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe, TranslateService } from '@ngx-translate/core';
 import * as i3 from '@angular/forms';
@@ -7,6 +7,7 @@ import { NgControl, FormControlName, ReactiveFormsModule, UntypedFormGroup, Unty
 import moment from 'moment';
 import * as momentTimezone from 'moment-timezone';
 import { MatIconButton, MatFabButton, MatButton } from '@angular/material/button';
+import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgOptimizedImage, NgFor, NgForOf, UpperCasePipe, SlicePipe, LowerCasePipe, CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
@@ -27,10 +28,14 @@ import { MatChip } from '@angular/material/chips';
 import * as i1$3 from '@angular/router';
 import { NavigationEnd, RouterLink } from '@angular/router';
 import * as i5$1 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
+import { MatRippleModule, MatRipple } from '@angular/material/core';
 import * as i2 from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
 import * as libphonenumber from 'google-libphonenumber';
 import { PhoneNumberUtil } from 'google-libphonenumber';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { of, BehaviorSubject, Subject, combineLatest, debounceTime, distinctUntilChanged, tap, filter, switchMap, takeUntil } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 class GenerateErrorMessagesPipe {
     constructor(translateService) {
@@ -2002,6 +2007,12 @@ var DriverStatus;
     DriverStatus["TERMINATED"] = "TERMINATED";
 })(DriverStatus || (DriverStatus = {}));
 
+/**
+ * Global Token for the project's API Gateway URL.
+ * Injected at the root level of each application (TMT, T3, etc.).
+ */
+const DATA_ENDPOINT = new InjectionToken('DATA_ENDPOINT');
+
 class AgGridFunctionsService {
     findSortQuery(sortModel) {
         if (!sortModel || sortModel.length === 0)
@@ -2333,6 +2344,353 @@ function internationalPhoneValidator() {
     };
 }
 
+class DateRangeSelectionComponent {
+    constructor(dateService) {
+        this.dateService = dateService;
+        this.form = new UntypedFormGroup({
+            range: new UntypedFormControl(null)
+        });
+        this.defaultValueForDates = [];
+    }
+    agInit(params) {
+        this.params = params;
+        this.config = params['customParams'];
+    }
+    /**
+     * Selection event from the Datepicker component
+     */
+    onDateChange(event) {
+        this.form.get('range').setValue(event);
+        // Notify AG Grid to trigger getModel()
+        this.params.filterChangedCallback();
+    }
+    /**
+     * AG Grid calls this to get the state of the filter
+     */
+    getModel() {
+        const value = this.form.get('range').value;
+        if (!value || (!value[0] && !value[1]))
+            return null;
+        const [start, end] = value;
+        const model = {};
+        // Start Date mapping: 00:00:00
+        if (start && this.config.returnValueByKey[0]) {
+            const date = typeof start === 'string' ? new Date(start) : start;
+            model[this.config.returnValueByKey[0]] =
+                this.dateService.changeFormat(date, 'YYYY-MM-DD') + 'T00:00:00';
+        }
+        // End Date mapping: 23:59:59
+        if (end && this.config.returnValueByKey[1]) {
+            const date = typeof end === 'string' ? new Date(end) : end;
+            model[this.config.returnValueByKey[1]] =
+                this.dateService.changeFormat(date, 'YYYY-MM-DD') + 'T23:59:59';
+        }
+        // Include targetFields if provided
+        if (this.config.targetFields?.length) {
+            model.targetFields = this.config.targetFields;
+        }
+        return model;
+    }
+    /**
+     * AG Grid calls this to restore the filter state
+     */
+    setModel(model) {
+        if (!model) {
+            this.form.get('range').setValue(null);
+            this.defaultValueForDates = [];
+            return;
+        }
+        const start = model[this.config.returnValueByKey[0]];
+        const end = model[this.config.returnValueByKey[1]];
+        this.defaultValueForDates = [start, end];
+        this.form.get('range').setValue([start, end]);
+    }
+    isFilterActive() {
+        const val = this.form.get('range').value;
+        return !!(val && (val[0] || val[1]));
+    }
+    // Not used for server-side filtering but required by interface
+    doesFilterPass(params) {
+        return true;
+    }
+    afterGuiDetached() {
+        this.rangePicker.picker.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeSelectionComponent, deps: [{ token: ParseDateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeSelectionComponent, isStandalone: true, selector: "i-tech-date-range-selection", providers: [ParseDateService], viewQueries: [{ propertyName: "rangePicker", first: true, predicate: DateRangeDatepickerComponent, descendants: true }], ngImport: i0, template: "<div class=\"ag-date-filter-wrapper\">\n    <i-tech-mat-range-datepicker\n        [label]=\"''\"\n        [panelClass]=\"'ag-filtration-date-range ag-custom-component-popup'\"\n        [placeholder]=\"config?.DATE_RANGE?.placeholder || ['From', 'To']\"\n        [defaultValue]=\"defaultValueForDates\"\n        (selectionChange)=\"onDateChange($event)\"\n    >\n    </i-tech-mat-range-datepicker>\n</div>\n", styles: [".ag-date-filter-wrapper{border-radius:0}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{display:none!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{display:flex;padding-top:0!important;padding-bottom:0!important;align-items:center}.ag-date-filter-wrapper::ng-deep .mdc-notched-outline>*{border-color:transparent!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field{width:296px!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{width:fit-content}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content{box-shadow:4px 6px 12px -4px #0000004d;border:unset!important;border-radius:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar{height:auto!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header{padding:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header .mat-calendar-controls{margin:5px 0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DateRangeDatepickerComponent, selector: "i-tech-mat-range-datepicker", inputs: ["label", "placeholder", "value", "defaultValue", "key", "submit", "clearValue", "errorMessage", "onePlaceholder", "hintText", "testId", "panelClass"], outputs: ["resetForm", "selectionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-date-range-selection', standalone: true, imports: [ReactiveFormsModule, DateRangeDatepickerComponent], providers: [ParseDateService], template: "<div class=\"ag-date-filter-wrapper\">\n    <i-tech-mat-range-datepicker\n        [label]=\"''\"\n        [panelClass]=\"'ag-filtration-date-range ag-custom-component-popup'\"\n        [placeholder]=\"config?.DATE_RANGE?.placeholder || ['From', 'To']\"\n        [defaultValue]=\"defaultValueForDates\"\n        (selectionChange)=\"onDateChange($event)\"\n    >\n    </i-tech-mat-range-datepicker>\n</div>\n", styles: [".ag-date-filter-wrapper{border-radius:0}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{display:none!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{display:flex;padding-top:0!important;padding-bottom:0!important;align-items:center}.ag-date-filter-wrapper::ng-deep .mdc-notched-outline>*{border-color:transparent!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field{width:296px!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{width:fit-content}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content{box-shadow:4px 6px 12px -4px #0000004d;border:unset!important;border-radius:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar{height:auto!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header{padding:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header .mat-calendar-controls{margin:5px 0!important}\n"] }]
+        }], ctorParameters: () => [{ type: ParseDateService }], propDecorators: { rangePicker: [{
+                type: ViewChild,
+                args: [DateRangeDatepickerComponent]
+            }] } });
+
+class FiltrationHelperService {
+    constructor(http, dataEndpoint) {
+        this.http = http;
+        this.dataEndpoint = dataEndpoint;
+    }
+    getData(config, page = 1, size = 20, search = '') {
+        // Safe check to prevent the destructuring error
+        if (!config || !config.source) {
+            return of(this.wrapInFakePagination([]));
+        }
+        const { source } = config;
+        const idPath = config.renderAndKeys.valueByKeys || 'id';
+        // 1. Handle Local Sources (FIXED / MAP)
+        if (source.type === 'FIXED' || source.type === 'MAP') {
+            const rawData = source.type === 'FIXED' ? source.data :
+                Object.entries(source.data).map(([key, value]) => (typeof value === 'object') ? { ...value, id: key } : { id: key, value });
+            const processed = this.filterLocal(rawData, search, config).map(item => ({
+                ...item,
+                __uniqueId: this.getValueByPath(item, idPath)
+            }));
+            return of(this.wrapInFakePagination(processed));
+        }
+        // 2. Handle Remote Source (HTTP)
+        const fullUrl = `${this.dataEndpoint}/${source.url.replace(/^\//, '')}`;
+        let params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        if (search)
+            params = params.set('search', search);
+        let filter = {};
+        if (source.method === 'POST') {
+            filter = source.payload || { filter: {} };
+            if (search) {
+                filter.searchBy = search;
+            }
+        }
+        const request$ = source.method === 'POST'
+            ? this.http.post(fullUrl, filter, { params })
+            : this.http.get(fullUrl, { params });
+        return request$.pipe(map(res => {
+            const isStandardResponse = res && res.content;
+            const rawContent = isStandardResponse ? res.content : (Array.isArray(res) ? res : []);
+            // SINGLE PASS: Wrap and Inject __uniqueId
+            const mappedContent = rawContent.map((item) => ({
+                ...item,
+                __uniqueId: this.getValueByPath(item, idPath)
+            }));
+            return isStandardResponse
+                ? { ...res, content: mappedContent }
+                : this.wrapInFakePagination(mappedContent);
+        }));
+    }
+    /**
+     * Universal path extractor for strings or hierarchical arrays ['user', 'role', 'id']
+     */
+    getValueByPath(item, path) {
+        if (!item || !path)
+            return null;
+        return Array.isArray(path)
+            ? path.reduce((obj, key) => (obj && obj[key] !== undefined ? obj[key] : null), item)
+            : item[path];
+    }
+    filterLocal(data, search, config) {
+        if (!search)
+            return data;
+        const s = search.toLowerCase();
+        return data.filter(item => config.renderAndKeys.labelKeys.some(key => String(this.getValueByPath(item, key)).toLowerCase().includes(s)));
+    }
+    wrapInFakePagination(data) {
+        return {
+            content: data,
+            last: true,
+            totalElements: data.length,
+            totalPages: 1,
+            size: data.length,
+            number: 1,
+            first: true,
+            empty: data.length === 0
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltrationHelperService, deps: [{ token: i2.HttpClient }, { token: DATA_ENDPOINT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltrationHelperService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltrationHelperService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i2.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DATA_ENDPOINT]
+                }] }] });
+
+class SelectWithSearchComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.items = [];
+        this.selectedIds = new Set(); // O(1) performance for large grids
+        this.allSelected = false;
+        this.partiallySelected = false;
+        this.currentPage = 1;
+        this.isLastPage = false;
+        this.loading = false;
+        this.searchForm = new UntypedFormGroup({
+            search: new UntypedFormControl('')
+        });
+        this.search$ = new BehaviorSubject('');
+        this.pageLoad$ = new BehaviorSubject(0);
+        this.destroy$ = new Subject();
+    }
+    agInit(params) {
+        this.params = params;
+        this.config = params.customParams;
+        if (this.config?.renderAndKeys) {
+            this.config.renderAndKeys.needTranslate = this.config.renderAndKeys.needTranslate !== false;
+        }
+        this.pageLoad$.next(1);
+    }
+    // AG GRID INTERFACE: Logic to hide/show rows
+    doesFilterPass(params) {
+        const valuePath = this.config.renderAndKeys.valueByKeys?.[0] || 'id';
+        const rowValue = this.dataService.getValueByPath(params.data, valuePath);
+        if (this.allSelected) {
+            return !this.selectedIds.has(rowValue);
+        }
+        if (this.selectedIds.size === 0)
+            return true;
+        return this.selectedIds.has(rowValue);
+    }
+    isFilterActive() {
+        return this.selectedIds.size > 0 || this.allSelected;
+    }
+    getModel() {
+        if (!this.isFilterActive())
+            return null;
+        const selections = Array.from(this.selectedIds);
+        const backKey = this.config.backEndKey;
+        // CASE 1: Simple but Named Model (returnFlatArray is true or undefined)
+        if (this.config.returnFlatArray !== false) {
+            let value = selections;
+            if (this.config.mode === 'SINGLE') {
+                value = selections.length ? selections[0] : null;
+            }
+            return { [backKey]: value };
+        }
+        // CASE 2: Hard Model (returnFlatArray is false)
+        return {
+            [backKey]: selections,
+            selectAll: this.config.selectAll ? this.allSelected : false
+        };
+    }
+    setModel(model) {
+        if (model && typeof model === 'object') {
+            const backKey = this.config.backEndKey;
+            // We can use the same extraction logic for both formats
+            const selections = model[backKey] || [];
+            this.selectedIds = new Set(selections);
+            // selectAll will be undefined in the "Simple" version, which evaluates to false
+            this.allSelected = model.selectAll || false;
+        }
+        else {
+            // Reset internal state if model is null
+            this.allSelected = false;
+            this.selectedIds.clear();
+        }
+        this.updateCheckboxState();
+    }
+    ngOnInit() {
+        this.initCombinedStream();
+    }
+    initCombinedStream() {
+        combineLatest([
+            this.search$.pipe(debounceTime(300), distinctUntilChanged(), tap(() => {
+                this.items = [];
+                this.currentPage = 1;
+            })),
+            this.pageLoad$
+        ]).pipe(filter(() => !!this.config), tap(() => this.loading = true), switchMap(([term, page]) => this.dataService.getData(this.config, page, 20, term)), takeUntil(this.destroy$)).subscribe(res => {
+            if (res.number <= 1)
+                this.items = res.content;
+            else
+                this.items = [...this.items, ...res.content];
+            this.isLastPage = res.last;
+            this.loading = false;
+            this.updateCheckboxState();
+        });
+    }
+    updateCheckboxState() {
+        if (this.config?.mode !== 'MULTI' || !this.config?.selectAll || this.items.length === 0) {
+            this.allSelected = false;
+            this.partiallySelected = false;
+            return;
+        }
+        const selectedInView = this.items.filter(item => this.selectedIds.has(item.__uniqueId)).length;
+        this.allSelected = selectedInView === this.items.length;
+        this.partiallySelected = selectedInView > 0 && selectedInView < this.items.length;
+    }
+    toggleAll(checked) {
+        this.items.forEach(item => checked ? this.selectedIds.add(item.__uniqueId) : this.selectedIds.delete(item.__uniqueId));
+        this.updateCheckboxState();
+        this.params.filterChangedCallback(); // Tell AG Grid to re-run doesFilterPass
+    }
+    onSearchChange(value) {
+        this.search$.next(value || '');
+    }
+    handleScroll(e) {
+        const t = e.target;
+        // Standard infinite scroll threshold
+        if (t.scrollHeight - t.scrollTop <= t.clientHeight + 15 && !this.loading && !this.isLastPage) {
+            this.currentPage++; // Moves to 2, 3, etc.
+            this.pageLoad$.next(this.currentPage);
+        }
+    }
+    resetFilter() {
+        // 1. Clear Selections
+        this.selectedIds.clear();
+        this.allSelected = false;
+        this.partiallySelected = false;
+        // 2. Clear Search Input (This triggers the debounceTime/switchMap stream)
+        this.searchForm.reset();
+        this.search$.next('');
+        // 3. Notify AG Grid to refresh the table rows
+        this.params.filterChangedCallback();
+    }
+    /**
+     * Handles selection logic for the custom list.
+     * Supports SINGLE (radio-like) and MULTI (checkbox) modes.
+     */
+    onItemClick(item) {
+        const id = item.__uniqueId;
+        if (this.config.mode === 'SINGLE') {
+            // Single mode: Clear others and set this one
+            this.selectedIds.clear();
+            this.selectedIds.add(id);
+        }
+        else {
+            // Multi mode: Toggle selection
+            if (this.selectedIds.has(id)) {
+                this.selectedIds.delete(id);
+            }
+            else {
+                this.selectedIds.add(id);
+            }
+        }
+        this.updateCheckboxState();
+        this.params.filterChangedCallback(); // Notify AG Grid to filter rows
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.search$.complete();
+        this.pageLoad$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectWithSearchComponent, deps: [{ token: FiltrationHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SelectWithSearchComponent, isStandalone: true, selector: "i-tech-select-with-search", ngImport: i0, template: "@if (config) {\n  <div class=\"universal-selector-container\">\n\n    @if (config.search) {\n      <div class=\"search-wrapper\" [formGroup]=\"searchForm\">\n        <i-tech-text-input\n          formControlName=\"search\"\n          [inputData]=\"{\n              type: 'text',\n              placeholder: config.search.placeholder || 'Search...',\n              submit: false,\n              hideLabel: true,\n              iconPrefix: 'search',\n              emitValueChanges: true,\n              clearable: true\n          }\"\n          (valueChangeEmitter)=\"onSearchChange($event)\">\n        </i-tech-text-input>\n      </div>\n    }\n\n    <div class=\"header-section flex_between_align_center\"\n      *ngIf=\"(config.mode === 'MULTI' && config.selectAll) || (selectedIds.size > 0 || allSelected)\"\n    >\n      <div class=\"header-left w-100\">\n        @if (config.mode === 'MULTI' && config.selectAll) {\n\n          <div class=\"custom-list-item select_all\"\n               matRipple\n          >\n            <mat-checkbox\n                          color=\"primary\"\n                          [checked]=\"allSelected\"\n                          [indeterminate]=\"partiallySelected\"\n                          (change)=\"toggleAll($event.checked)\"\n            >\n              <span class=\"item-label\">{{ '(Select All)' | translate }}</span>\n            </mat-checkbox>\n          </div>\n        } @else {\n          <span class=\"header-text\">{{ 'Options' | translate }}</span>\n        }\n      </div>\n\n      @if (selectedIds.size > 0 || allSelected) {\n        <i-tech-icon-button\n          [iconName]=\"'refresh'\"\n          [matTooltip]=\"'Reset Filter' | translate\"\n          (click)=\"resetFilter()\"\n        ></i-tech-icon-button>\n      }\n    </div>\n\n    <div class=\"scroll-viewport\" (scroll)=\"handleScroll($event)\">\n      <div class=\"custom-list\">\n        @for (item of items; track item.__uniqueId) {\n          <div class=\"custom-list-item\"\n               matRipple\n               [class.selected]=\"selectedIds.has(item.__uniqueId)\"\n               (click)=\"onItemClick(item)\"\n          >\n            <mat-checkbox\n              color=\"primary\"\n              [checked]=\"selectedIds.has(item.__uniqueId)\"\n            >\n              <span class=\"item-label\">\n                @let label = (config.renderAndKeys.labelKeys | getValueByKeyFromObject: item : null : config.renderAndKeys.separator);\n                {{ config.renderAndKeys.needTranslate ? (label | translate) : label }}\n              </span>\n            </mat-checkbox>\n          </div>\n        }\n      </div>\n\n      @if (loading) {\n        <div class=\"loader-container\">\n          <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".universal-selector-container{display:flex;flex-direction:column;min-width:280px;background:#fff}.universal-selector-container .search-wrapper::ng-deep .mat-mdc-form-field:not(.mat-focused) .mdc-notched-outline *{outline:unset!important;border:unset!important}.universal-selector-container .header-section{height:40px;border-bottom:1px solid rgba(0,0,0,.12);background:#fafafa}.universal-selector-container .header-section .header-text{font-size:16px;font-weight:500;line-height:24px;padding-left:12px;color:var(--mat-option-selected-state-label-text-color)}.universal-selector-container .custom-list-item{display:flex;align-items:center;cursor:pointer;padding:10px 12px}.universal-selector-container .custom-list-item::ng-deep .mat-mdc-checkbox{--mdc-checkbox-state-layer-size: 16px !important}.universal-selector-container .custom-list-item::ng-deep .mat-mdc-checkbox .mdc-label{font-size:13px;font-weight:500;line-height:20px;padding-left:16px;color:var(--mat-option-selected-state-label-text-color)}.universal-selector-container .custom-list-item:not(.select_all).selected,.universal-selector-container .custom-list-item:not(.select_all):hover{background-color:var(--mat-option-selected-state-layer-color)}.universal-selector-container .scroll-viewport{flex:1;overflow-y:auto;max-height:350px}.universal-selector-container .scroll-viewport::-webkit-scrollbar{width:5px}.universal-selector-container .scroll-viewport::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: TextInputComponent, selector: "i-tech-text-input", inputs: ["inputData"], outputs: ["focusOutEmitter", "valueChangeEmitter"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled", "testId"], outputs: ["buttonClick"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectWithSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-select-with-search', standalone: true, imports: [
+                        CommonModule, MatProgressSpinner, GetValueByKeyFromObjectPipe, TranslateModule, MatCheckbox,
+                        TextInputComponent, ReactiveFormsModule, IconButtonComponent, MatTooltip, MatRipple
+                    ], template: "@if (config) {\n  <div class=\"universal-selector-container\">\n\n    @if (config.search) {\n      <div class=\"search-wrapper\" [formGroup]=\"searchForm\">\n        <i-tech-text-input\n          formControlName=\"search\"\n          [inputData]=\"{\n              type: 'text',\n              placeholder: config.search.placeholder || 'Search...',\n              submit: false,\n              hideLabel: true,\n              iconPrefix: 'search',\n              emitValueChanges: true,\n              clearable: true\n          }\"\n          (valueChangeEmitter)=\"onSearchChange($event)\">\n        </i-tech-text-input>\n      </div>\n    }\n\n    <div class=\"header-section flex_between_align_center\"\n      *ngIf=\"(config.mode === 'MULTI' && config.selectAll) || (selectedIds.size > 0 || allSelected)\"\n    >\n      <div class=\"header-left w-100\">\n        @if (config.mode === 'MULTI' && config.selectAll) {\n\n          <div class=\"custom-list-item select_all\"\n               matRipple\n          >\n            <mat-checkbox\n                          color=\"primary\"\n                          [checked]=\"allSelected\"\n                          [indeterminate]=\"partiallySelected\"\n                          (change)=\"toggleAll($event.checked)\"\n            >\n              <span class=\"item-label\">{{ '(Select All)' | translate }}</span>\n            </mat-checkbox>\n          </div>\n        } @else {\n          <span class=\"header-text\">{{ 'Options' | translate }}</span>\n        }\n      </div>\n\n      @if (selectedIds.size > 0 || allSelected) {\n        <i-tech-icon-button\n          [iconName]=\"'refresh'\"\n          [matTooltip]=\"'Reset Filter' | translate\"\n          (click)=\"resetFilter()\"\n        ></i-tech-icon-button>\n      }\n    </div>\n\n    <div class=\"scroll-viewport\" (scroll)=\"handleScroll($event)\">\n      <div class=\"custom-list\">\n        @for (item of items; track item.__uniqueId) {\n          <div class=\"custom-list-item\"\n               matRipple\n               [class.selected]=\"selectedIds.has(item.__uniqueId)\"\n               (click)=\"onItemClick(item)\"\n          >\n            <mat-checkbox\n              color=\"primary\"\n              [checked]=\"selectedIds.has(item.__uniqueId)\"\n            >\n              <span class=\"item-label\">\n                @let label = (config.renderAndKeys.labelKeys | getValueByKeyFromObject: item : null : config.renderAndKeys.separator);\n                {{ config.renderAndKeys.needTranslate ? (label | translate) : label }}\n              </span>\n            </mat-checkbox>\n          </div>\n        }\n      </div>\n\n      @if (loading) {\n        <div class=\"loader-container\">\n          <mat-progress-spinner diameter=\"24\" mode=\"indeterminate\"></mat-progress-spinner>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".universal-selector-container{display:flex;flex-direction:column;min-width:280px;background:#fff}.universal-selector-container .search-wrapper::ng-deep .mat-mdc-form-field:not(.mat-focused) .mdc-notched-outline *{outline:unset!important;border:unset!important}.universal-selector-container .header-section{height:40px;border-bottom:1px solid rgba(0,0,0,.12);background:#fafafa}.universal-selector-container .header-section .header-text{font-size:16px;font-weight:500;line-height:24px;padding-left:12px;color:var(--mat-option-selected-state-label-text-color)}.universal-selector-container .custom-list-item{display:flex;align-items:center;cursor:pointer;padding:10px 12px}.universal-selector-container .custom-list-item::ng-deep .mat-mdc-checkbox{--mdc-checkbox-state-layer-size: 16px !important}.universal-selector-container .custom-list-item::ng-deep .mat-mdc-checkbox .mdc-label{font-size:13px;font-weight:500;line-height:20px;padding-left:16px;color:var(--mat-option-selected-state-label-text-color)}.universal-selector-container .custom-list-item:not(.select_all).selected,.universal-selector-container .custom-list-item:not(.select_all):hover{background-color:var(--mat-option-selected-state-layer-color)}.universal-selector-container .scroll-viewport{flex:1;overflow-y:auto;max-height:350px}.universal-selector-container .scroll-viewport::-webkit-scrollbar{width:5px}.universal-selector-container .scroll-viewport::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:10px}\n"] }]
+        }], ctorParameters: () => [{ type: FiltrationHelperService }] });
+
 /*
  * Public API Surface of shared-components
  */
@@ -2341,5 +2699,5 @@ function internationalPhoneValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DatePickerComponent, DateRangeDatepickerComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
+export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DATA_ENDPOINT, DatePickerComponent, DateRangeDatepickerComponent, DateRangeSelectionComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, SelectWithSearchComponent, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
 //# sourceMappingURL=i-tech-shared-components.mjs.map