@elite.framework/ng.ui.core 1.0.59 → 1.0.60

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

@@ -20,6 +20,7 @@ import * as i6 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from '@elite.framework/ng.core/services';
 import { BaseService } from '@elite.framework/ng.core/services';
+import { GenericDialogComponent } from '@elite.framework/ng.ui.core/generic-dialog';
 
 class GenericSelectorModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -38,12 +39,12 @@ class GenericSelectorTypeComponent extends FieldType {
     injector;
     cdr;
     autoComp;
+    dialog;
     options_ = [];
     selectedItem;
     loading = false;
     _offlineList = [];
     api;
-    dialog;
     valueChangeSubscription; // Add a subscription to manage the observable
     constructor(svc, injector, cdr) {
         super();
@@ -53,7 +54,6 @@ class GenericSelectorTypeComponent extends FieldType {
     }
     ngOnInit() {
         this.api = this.svc;
-        this.dialog = this.injector.get(DialogService);
         const to = this.props;
         this.api.apiName = to['serviceName'];
         if (to['offline']) {
@@ -159,6 +159,13 @@ class GenericSelectorTypeComponent extends FieldType {
         });
     }
     // 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 });
@@ -268,8 +275,21 @@ class GenericSelectorTypeComponent extends FieldType {
         }
         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() {
-        console.log('Custom dropdown button clicked!');
         this.search({ query: '' }); // trigger your own search
         setTimeout(() => this.autoComp.show(), 0); // force dropdown to open
     }
@@ -353,9 +373,8 @@ class GenericSelectorTypeComponent extends FieldType {
             this.selectedItem.some((sel) => sel[vf] === item[vf]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSelectorTypeComponent, deps: [{ token: i1.BaseService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GenericSelectorTypeComponent, isStandalone: true, selector: "formly-generic-selector", providers: [DialogService, BaseService], viewQueries: [{ propertyName: "autoComp", first: true, predicate: ["autoComp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-  <!-- (ngModelChange)="onSelectionChange($event)" -->
-  <p-inputGroup class="w-full">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: `
+ <p-inputGroup class="w-full">
   <p-autoComplete
     #autoComp
     [ngModel]="selectedItem"
@@ -375,25 +394,55 @@ class GenericSelectorTypeComponent extends FieldType {
     [showEmptyMessage]="true"
     (onSelect)="onSelect($event)"
     emptyMessage="{{ getEmptyMessage() | translate }}"
-    [showTransitionOptions]="'0ms'">
+    [showTransitionOptions]="'0ms'"
+    [showClear]="false"
+
+     (keydown.arrowdown)="onArrowDown($event)"
+  (keydown.escape)="onEscape($event)"
+    >
   </p-autoComplete>
 
-  <!-- 🔘 Custom dropdown addon -->
   <p-inputGroupAddon>
-     <p-button [disabled]="!!props.disabled" icon="pi pi-chevron-down" (click)="onDropdownButtonClick()" severity="secondary" />
+    <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"
+    [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", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+
+  `, 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", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: GenericDialogComponent, selector: "app-generic-dialog", inputs: ["service", "formFields", "model", "apiName", "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: i7.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericSelectorTypeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-generic-selector',
                     template: `
-  <!-- (ngModelChange)="onSelectionChange($event)" -->
-  <p-inputGroup class="w-full">
+ <p-inputGroup class="w-full">
   <p-autoComplete
     #autoComp
     [ngModel]="selectedItem"
@@ -413,15 +462,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
     [showEmptyMessage]="true"
     (onSelect)="onSelect($event)"
     emptyMessage="{{ getEmptyMessage() | translate }}"
-    [showTransitionOptions]="'0ms'">
+    [showTransitionOptions]="'0ms'"
+    [showClear]="false"
+
+     (keydown.arrowdown)="onArrowDown($event)"
+  (keydown.escape)="onEscape($event)"
+    >
   </p-autoComplete>
 
-  <!-- 🔘 Custom dropdown addon -->
   <p-inputGroupAddon>
-     <p-button [disabled]="!!props.disabled" icon="pi pi-chevron-down" (click)="onDropdownButtonClick()" severity="secondary" />
+    <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"
+    [idField]="props.idField ??'id'"
+    [displayMode]="props.dialogDisplayMode ?? 'dialog'"
+    (afterSave)="afterSave($event)"
+  >
+  </app-generic-dialog>
+
 
   `,
                     providers: [DialogService, BaseService],
@@ -436,12 +516,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         TranslateModule,
                         AutoComplete,
                         CheckboxModule,
-                        ButtonModule
+                        ButtonModule,
+                        GenericDialogComponent
                     ]
                 }]
         }], ctorParameters: () => [{ type: i1.BaseService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { autoComp: [{
                 type: ViewChild,
                 args: ['autoComp']
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
             }] } });
 
 /**