@es.framework/ng.ui.core 2.0.58

package/fesm2022/es.framework-ng.ui.core-generic-selector.mjs

@@ -0,0 +1,684 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, ViewChild, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DialogService } from 'primeng/dynamicdialog';
+import { forkJoin } from 'rxjs';
+import { map, finalize } from 'rxjs/operators';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from 'primeng/autocomplete';
+import { AutoCompleteModule, AutoComplete } from 'primeng/autocomplete';
+import * as i5 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i6 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { TranslatePipe } from '@es.framework/ng.core/pipes';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i7 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i1 from '@es.framework/ng.core/services';
+import { LocalizationService, QueryParser, BaseService } from '@es.framework/ng.core/services';
+import { GenericDialogComponent } from '@es.framework/ng.ui.core/generic-dialog';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FieldType, FormlyAttributes } from '@ngx-formly/core';
+import * as i4 from 'primeng/api';
+
+class GenericSelectorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: GenericSelectorModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSelectorModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+class GenericSelectorTypeComponent extends FieldType {
+    svc;
+    injector;
+    cdr;
+    autoComp;
+    dialog;
+    options_ = [];
+    selectedItem;
+    loading = false;
+    _offlineList = [];
+    translateService = inject(LocalizationService);
+    api;
+    valueChangeSubscription; // Add a subscription to manage the observable
+    get optionLabel() {
+        if (this.to.useMultiLang == true) {
+            if (this.translateService.currentLang == 'en') {
+                return this.to?.labelFieldEn || 'name';
+            }
+            return this.to?.labelField || 'name';
+        }
+        return this.to?.labelField || 'name';
+    }
+    isNullOrEmpty(val) {
+        return val === null || val === undefined || val === '';
+    }
+    getFormattedLabel(item) {
+        if (!item)
+            return '';
+        let value;
+        // Use the formatter if provided
+        if (this.to?.formatter) {
+            value = this.to.formatter(item);
+        }
+        else {
+            value = this.getPrimaryLabel(item);
+        }
+        // Sanitize it for safe HTML
+        return this.sanitizer.bypassSecurityTrustHtml(value || '');
+    }
+    getPrimaryLabel(item) {
+        const fields = [
+            this.optionLabel, // resolved field name from getter
+            this.to.labelField || 'name',
+            this.to.labelFieldEn || 'name'
+        ];
+        for (const f of fields) {
+            const v = item[f];
+            if (!this.isNullOrEmpty(v)) {
+                return v;
+            }
+        }
+        return '';
+    }
+    sanitizer = inject(DomSanitizer);
+    constructor(svc, injector, cdr) {
+        super();
+        this.svc = svc;
+        this.injector = injector;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.api = this.svc;
+        const to = this.props;
+        this.api.apiName = to['serviceName'];
+        this.api.moduleName = to['moduleName'];
+        if (to['offline']) {
+            if (to['offlineDataFn']) {
+                this._offlineList = to['offlineDataFn']();
+                this.initOfflineSelection();
+            }
+            else if (to['offlineItems$']) {
+                to['offlineItems$'].subscribe((list) => {
+                    this._offlineList = list;
+                    this.initOfflineSelection();
+                });
+            }
+            else {
+                this._offlineList = to['offlineItems'] || [];
+                this.initOfflineSelection();
+            }
+        }
+        else {
+            if (this.props.loadSaved && !this.props.multiple && this.props.loadSavedField && this.props.valueField) {
+                const vf = this.to['valueField'] || 'id';
+                const lf = this.optionLabel;
+                this.selectedItem =
+                    {
+                        [vf]: this.formControl.value,
+                        [lf]: this.model[this.props.loadSavedField],
+                    };
+                if (this.props.change) {
+                    this.props.change(this.field, { item: this.selectedItem });
+                    this.cdr.detectChanges();
+                }
+            }
+            else {
+                this.initOnlineSelection();
+            }
+        }
+        // Subscribe to formControl value changes
+        this.valueChangeSubscription = this.formControl.valueChanges
+            .subscribe(() => {
+            // This tap operator is a good place to run side effects
+            // like calling your change handler after a value changes.
+            // this.selectedItem = this.formControl.value;
+            if (this.props.change) {
+                if (to['offline']) {
+                    if (to['offlineDataFn']) {
+                        this._offlineList = to['offlineDataFn']();
+                        this.initOfflineSelection(false);
+                    }
+                    else if (to['offlineItems$']) {
+                        to['offlineItems$'].subscribe((list) => {
+                            this._offlineList = list;
+                            this.initOfflineSelection(false);
+                        });
+                    }
+                    else {
+                        this._offlineList = to['offlineItems'] || [];
+                        this.initOfflineSelection(false);
+                    }
+                }
+                else {
+                    this.initOnlineSelection(false);
+                }
+            }
+        });
+    }
+    // Remember to unsubscribe to prevent memory leaks!
+    ngOnDestroy() {
+        if (this.valueChangeSubscription) {
+            this.valueChangeSubscription.unsubscribe();
+        }
+    }
+    loadDefaultValue() {
+        this.loading = true;
+        const vf = this.to['valueField'] || 'id';
+        const fixedFilters = this.getFixedFilters();
+        const lf = this.to['loadDefaultField'] || 'isDefault';
+        const lfValue = this.to['loadDefaultValue'] || true;
+        const searchParams = {
+            [lf]: lfValue,
+            ...fixedFilters,
+        };
+        this.api.getList(searchParams)
+            .subscribe({
+            next: (res) => {
+                // Assuming the API returns a list and you want to select the first one
+                if (res && res.items && res.items.length > 0) {
+                    if (this.to['multiple']) {
+                        this.formControl.setValue(res.items.map((c) => c[vf]));
+                    }
+                    else {
+                        const defaultValue = res.items[0];
+                        this.formControl.setValue(defaultValue?.[vf]);
+                    }
+                }
+                this.loading = false;
+                // this.initOnlineSelection(); // Proceed with online selection after setting the value
+            },
+            error: (err) => {
+                console.error("Failed to load default value from API:", err);
+                this.loading = false;
+                // this.initOnlineSelection(); // Fallback to local selection if API fails
+            }
+        });
+    }
+    // New method to handle loading the default value from the API
+    afterSave(event) {
+        this.onSelectionChange(event.record);
+        if (this.props.afterSave) {
+            this.props.afterSave(this.field, { item: event.response });
+            this.cdr.detectChanges();
+        }
+    }
+    onSelect(event) {
+        if (this.props.onSelect) {
+            this.props.onSelect(this.field, { item: event.value });
+            this.cdr.detectChanges();
+        }
+    }
+    onSelectionChange(val) {
+        const vf = this.to['valueField'] || 'id';
+        if (this.to['offline']) {
+            // this.selectedItem = val;
+            if (this.to['multiple'] && Array.isArray(val)) {
+                this.selectedItem = this._offlineList.filter(item => val.includes(item[vf]));
+                this.formControl.setValue(Array.isArray(this.selectedItem) ? this.selectedItem.map((c) => c[vf]) : []);
+            }
+            else {
+                this.selectedItem = this._offlineList.find(item => item[vf] === val);
+                this.formControl.setValue(this.selectedItem?.[vf] ?? null);
+            }
+        }
+        else {
+            this.selectedItem = val;
+            if (this.to['multiple']) {
+                this.formControl.setValue(Array.isArray(val) ? val.map((c) => c[vf]) : []);
+            }
+            else {
+                this.formControl.setValue(val?.[vf] ?? null);
+            }
+        }
+    }
+    initOfflineSelection(withSetValue = true) {
+        const val = this.formControl.value;
+        const vf = this.to['valueField'] || 'id';
+        if (val == null)
+            return;
+        if (this.to['multiple'] && Array.isArray(val)) {
+            this.selectedItem = this._offlineList.filter(item => val.includes(item[vf]));
+        }
+        else {
+            this.selectedItem = this._offlineList.find(item => item[vf] === val);
+        }
+        if (withSetValue == true) {
+            this.formControl.setValue(this.to['multiple']
+                ? this.selectedItem.map((c) => c[vf])
+                : this.selectedItem?.[vf]);
+        }
+        else {
+            if (this.props.change) {
+                this.props.change(this.field, { item: this.selectedItem });
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    initOnlineSelection(withSetValue = true) {
+        const val = this.formControl.value;
+        const vf = this.to['valueField'] || 'id';
+        if (val == null || (Array.isArray(val) && val.length === 0)) {
+            this.selectedItem = this.to['multiple'] ? [] : null;
+            if (this.props['loadDefault'] === true) {
+                this.loadDefaultValue();
+            }
+            return;
+        }
+        if (this.to['multiple'] && Array.isArray(val) && val.length) {
+            this.loading = true;
+            const fixedFilters = this.getFixedFilters();
+            // 🔑 one getList call per id, but include fixedFilters in each
+            const calls = val.map((id) => this.api.getList({ ...fixedFilters, [vf]: id }).pipe(map((res) => (res?.items?.length ? res.items[0] : null))));
+            forkJoin(calls)
+                .pipe(finalize(() => (this.loading = false)))
+                .subscribe({
+                next: (items) => {
+                    this.selectedItem = items.filter(i => i != null);
+                    if (withSetValue) {
+                        this.formControl.setValue(this.selectedItem.map((c) => c[vf]));
+                    }
+                    else if (this.props.change) {
+                        this.props.change(this.field, { item: this.selectedItem });
+                    }
+                    this.cdr.detectChanges();
+                },
+                error: (err) => {
+                    console.error('Failed to load multiple selections:', err);
+                    this.selectedItem = [];
+                    this.loading = false;
+                },
+            });
+        }
+        else {
+            this.loading = true;
+            const fixedFilters = this.getFixedFilters();
+            const searchParams = { ...fixedFilters, [vf]: val };
+            this.api
+                .getList(searchParams)
+                .pipe(finalize(() => (this.loading = false)))
+                .subscribe({
+                next: (res) => {
+                    const item = res?.items?.[0] || null;
+                    this.selectedItem = item;
+                    if (withSetValue) {
+                        this.formControl.setValue(item?.[vf]);
+                    }
+                    else if (this.props.change) {
+                        this.props.change(this.field, { item: this.selectedItem });
+                    }
+                    this.cdr.detectChanges();
+                },
+                error: (err) => {
+                    console.error('Failed to load selection:', err);
+                    this.selectedItem = null;
+                    this.loading = false;
+                },
+            });
+        }
+    }
+    getFixedFilters(query = '') {
+        const fixedFilters = this.to['fixedFilters'];
+        if (typeof fixedFilters === 'function') {
+            // Call with current model (and optionally field)
+            try {
+                return fixedFilters(query, this.field);
+            }
+            catch (error) {
+                return fixedFilters(this.model);
+            }
+        }
+        return fixedFilters || {};
+    }
+    onArrowDown(event) {
+        event.preventDefault();
+        // this.autoComp.show();
+        this.onDropdownButtonClick();
+    }
+    onEscape(event) {
+        this.autoComp.hide();
+    }
+    onAddNewClick() {
+        // your logic for adding a new item
+        // e.g. open dialog or emit event
+        console.log('Add new item clicked');
+        this.dialog.openForm("create");
+    }
+    onDropdownButtonClick() {
+        this.search({ query: '' }); // trigger your own search
+        setTimeout(() => this.autoComp.show(), 0); // force dropdown to open
+    }
+    // Called when dropdown button clicked
+    onDropdownClick(event) {
+        // 🚫 stop the default dropdown behavior
+        event.originalEvent.preventDefault();
+        event.originalEvent.stopPropagation();
+        console.log('Dropdown clicked!', event);
+        // ✅ your custom code here
+        // e.g., force trigger search for empty query
+        this.search({ query: '' });
+    }
+    search(event) {
+        const q = event.query?.toString() || '';
+        const lf = this.optionLabel;
+        const fixedFilters = this.getFixedFilters(q);
+        if (this.to['offline']) {
+            this.options_ = this.to['offlineDataFn']
+                ? this.to['offlineDataFn'](q)
+                : this._offlineList.filter(item => item[lf]?.toString().includes(q));
+            setTimeout(() => this.autoComp?.show(), 0);
+        }
+        else {
+            this.loading = true;
+            this.options_ = [];
+            // Build QueryParameters
+            const queryParams = {
+                filters: [],
+                orderBy: [],
+                groupBy: [],
+                expand: [],
+                select: [],
+                top: 10,
+                skip: 0,
+            };
+            // Handle main search and fixed filters
+            if (!this.to['query']) {
+                // Create a group for main search condition
+                const mainGroup = {
+                    logicalOperator: 'and',
+                    conditions: [
+                        {
+                            field: lf,
+                            operator: 'contains',
+                            value: q
+                        }
+                    ]
+                };
+                // Add fixed filters to the same group
+                Object.keys(fixedFilters || {}).forEach(key => {
+                    const value = fixedFilters[key];
+                    if (value !== null && value !== undefined) {
+                        mainGroup.conditions.push({
+                            field: key,
+                            operator: 'eq',
+                            value: value
+                        });
+                    }
+                });
+                if (mainGroup.conditions.length > 0) {
+                    queryParams.filters.push(mainGroup);
+                }
+            }
+            else {
+                queryParams.skip = this.to['query'].skip ?? 0;
+                queryParams.top = this.to['query'].top ?? 10;
+                queryParams.orderBy = this.to['query'].orderBy;
+                queryParams.groupBy = this.to['query'].groupBy;
+                queryParams.expand = this.to['query'].expand;
+                queryParams.select = this.to['query'].select;
+            }
+            // Merge dynamic filters (function or array)
+            let dynamicFilters = [];
+            if (this.to['query'] && this.to['query']['filters']) {
+                const filtersProp = this.to['query']['filters'];
+                if (typeof filtersProp === 'function') {
+                    dynamicFilters = filtersProp(q, this.field); // pass search text
+                }
+                else if (Array.isArray(filtersProp)) {
+                    dynamicFilters = filtersProp;
+                }
+            }
+            // Add dynamic filters with proper groupLogicalOperator
+            dynamicFilters.forEach((filterGroup, index) => {
+                if (index === 0 && queryParams.filters.length === 0) {
+                    // First filter group, no groupLogicalOperator needed
+                    queryParams.filters.push(filterGroup);
+                }
+                else {
+                    // Subsequent groups, ensure they have groupLogicalOperator
+                    const groupWithOperator = {
+                        ...filterGroup,
+                        groupLogicalOperator: filterGroup.groupLogicalOperator || 'and'
+                    };
+                    queryParams.filters.push(groupWithOperator);
+                }
+            });
+            // Use listEndpoint if available, otherwise use default
+            let listEndpoint = this.props.listEndpoint;
+            if (typeof listEndpoint === 'function') {
+                listEndpoint = listEndpoint(this.model);
+            }
+            const searchParams = {
+                'query': QueryParser.toString(queryParams)
+            };
+            this.api.getList(searchParams, listEndpoint)
+                .pipe(finalize(() => (this.loading = false)))
+                .subscribe({
+                next: (res) => {
+                    this.options_ = res.items ?? res ?? [];
+                    setTimeout(() => this.autoComp?.show(), 0);
+                },
+                error: () => {
+                    this.options_ = [];
+                },
+            });
+        }
+    }
+    openCrud(mode) {
+        const payload = mode === 'add' ? null : this.selectedItem;
+        // Example integration:
+        // const ref = this.dialog.open(CrudComponent, {
+        //   data: {
+        //     serviceName: this.to.serviceName,
+        //     mode,
+        //     record: payload
+        //   }
+        // });
+        // ref.onClose.subscribe((updated: any) => {
+        //   if (!this.to.multiple && updated?.[this.to.valueField]) {
+        //     this.api.get(updated[this.to.valueField])
+        //       .subscribe(item => {
+        //         this.selectedItem = item;
+        //         this.formControl.setValue(item?.[this.to.valueField]);
+        //       });
+        //   }
+        // });
+    }
+    getEmptyMessage() {
+        if (this.loading) {
+            return 'LOADING_DATA_MESSAGE'; // مفتاح ترجمة لـ "جاري تحميل البيانات..."
+        }
+        else if (this.options_.length === 0) {
+            return 'NO_RESULTS_FOUND'; // مفتاح ترجمة لـ "لا توجد نتائج مطابقة."
+        }
+        return ''; // لا تُعرض رسالة إذا كانت هناك نتائج
+    }
+    isItemSelected(item) {
+        const vf = this.to['valueField'] || 'id';
+        return Array.isArray(this.selectedItem) &&
+            this.selectedItem.some((sel) => sel[vf] === item[vf]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSelectorTypeComponent, deps: [{ token: i1.BaseService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericSelectorTypeComponent, isStandalone: true, selector: "formly-generic-selector", providers: [DialogService, BaseService], viewQueries: [{ propertyName: "autoComp", first: true, predicate: ["autoComp"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+  <!-- [ngStyle]="{'display': props.display ? 'block': 'none'}" -->
+ <p-inputGroup   class="w-full">
+  <p-autoComplete
+    #autoComp
+    [ngModel]="selectedItem"
+    (ngModelChange)="onSelectionChange($event)"
+    [formlyAttributes]="field"
+    [suggestions]="options_"
+    (completeMethod)="search($event)"
+    [multiple]="to['multiple']"
+    [optionLabel]="optionLabel"
+    [dropdown]="false"
+    [forceSelection]="true"
+    [placeholder]="(props['placeholder'] ?? '') | translate"
+    [disabled]="!!props.disabled"
+    dropdownMode="current"
+    appendTo="body"
+    class="w-full rounded-none"
+    [showEmptyMessage]="true"
+    (onSelect)="onSelect($event)"
+    emptyMessage="{{ getEmptyMessage() | translate }}"
+    [showTransitionOptions]="'0ms'"
+    [showClear]="!(props['required'] ?? false)"
+
+     (keydown.arrowdown)="onArrowDown($event)"
+  (keydown.escape)="onEscape($event)"
+    >
+      <ng-template let-item pTemplate="item">
+        <div class="flex flex-col">
+         <span [innerHTML]="getFormattedLabel(item)"></span>
+
+        </div>
+      </ng-template>
+  </p-autoComplete>
+
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled || loading"
+      [icon]="loading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'"
+      (click)="onDropdownButtonClick()"
+      severity="secondary" />
+  </p-inputGroupAddon>
+  <!-- Add new button -->
+   @if (props.canAdd && props.formFields) {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-plus"
+      (click)="onAddNewClick()"
+      severity="primary" />
+  </p-inputGroupAddon>
+   }
+</p-inputGroup>
+
+<!-- [model]="model" -->
+  <app-generic-dialog
+    #dialog
+    [formFields]="props.formFields ?? []"
+    [apiName]="props.serviceName"
+    [moduleName]="props.moduleName"
+    [idField]="props.idField ??'id'"
+    [displayMode]="props.dialogDisplayMode ?? 'dialog'"
+    (afterSave)="afterSave($event)"
+  >
+  </app-generic-dialog>
+
+
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i6.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: GenericDialogComponent, selector: "app-generic-dialog", inputs: ["form", "service", "formFields", "model", "apiName", "moduleName", "idField", "dialogMaxWidth", "displayMode", "mode", "forceState", "drawerVisible", "dialogVisible", "isViewMode", "isEditMode", "useConfirmOnSave", "loading", "errorMsg", "errorMessage", "beforeSaveTransform", "hideTable", "autoShowForm"], outputs: ["action", "afterSave", "afterDelete", "beforeSave", "beforeDelete", "formCancel", "formInit", "dataLoaded", "selectionChange", "error", "visibleChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericSelectorTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-generic-selector',
+                    template: `
+  <!-- [ngStyle]="{'display': props.display ? 'block': 'none'}" -->
+ <p-inputGroup   class="w-full">
+  <p-autoComplete
+    #autoComp
+    [ngModel]="selectedItem"
+    (ngModelChange)="onSelectionChange($event)"
+    [formlyAttributes]="field"
+    [suggestions]="options_"
+    (completeMethod)="search($event)"
+    [multiple]="to['multiple']"
+    [optionLabel]="optionLabel"
+    [dropdown]="false"
+    [forceSelection]="true"
+    [placeholder]="(props['placeholder'] ?? '') | translate"
+    [disabled]="!!props.disabled"
+    dropdownMode="current"
+    appendTo="body"
+    class="w-full rounded-none"
+    [showEmptyMessage]="true"
+    (onSelect)="onSelect($event)"
+    emptyMessage="{{ getEmptyMessage() | translate }}"
+    [showTransitionOptions]="'0ms'"
+    [showClear]="!(props['required'] ?? false)"
+
+     (keydown.arrowdown)="onArrowDown($event)"
+  (keydown.escape)="onEscape($event)"
+    >
+      <ng-template let-item pTemplate="item">
+        <div class="flex flex-col">
+         <span [innerHTML]="getFormattedLabel(item)"></span>
+
+        </div>
+      </ng-template>
+  </p-autoComplete>
+
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled || loading"
+      [icon]="loading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'"
+      (click)="onDropdownButtonClick()"
+      severity="secondary" />
+  </p-inputGroupAddon>
+  <!-- Add new button -->
+   @if (props.canAdd && props.formFields) {
+  <p-inputGroupAddon>
+    <p-button
+      tabindex="-1"
+      [disabled]="!!props.disabled"
+      icon="pi pi-plus"
+      (click)="onAddNewClick()"
+      severity="primary" />
+  </p-inputGroupAddon>
+   }
+</p-inputGroup>
+
+<!-- [model]="model" -->
+  <app-generic-dialog
+    #dialog
+    [formFields]="props.formFields ?? []"
+    [apiName]="props.serviceName"
+    [moduleName]="props.moduleName"
+    [idField]="props.idField ??'id'"
+    [displayMode]="props.dialogDisplayMode ?? 'dialog'"
+    (afterSave)="afterSave($event)"
+  >
+  </app-generic-dialog>
+
+
+  `,
+                    providers: [DialogService, BaseService],
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        AutoCompleteModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        FormlyAttributes,
+                        TranslatePipe,
+                        AutoComplete,
+                        CheckboxModule,
+                        ButtonModule,
+                        GenericDialogComponent
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i1.BaseService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { autoComp: [{
+                type: ViewChild,
+                args: ['autoComp']
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericSelectorModule, GenericSelectorTypeComponent };
+//# sourceMappingURL=es.framework-ng.ui.core-generic-selector.mjs.map