imng-kendo-schematics 8.115.1 → 19.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imng-kendo-schematics",
-  "version": "8.115.1",
+  "version": "19.12.2",
   "description": "Angular Schematics facilitating Angular, Kendo, NGRX and imng package integration",
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -22,7 +22,7 @@
     "pluralize": "^8.x",
     "@nx/angular": ">=19.x",
     "@angular/core": ">=18.x",
-    "jest": ">=29.x"
+    "jest": "*"
   },
   "dependencies": {
     "@angular-devkit/core": ">=18.x",

package/schematics/imng-crud/files/add-edit.component.html.template

@@ -15,9 +15,13 @@
         [filterable]="true"
         (filterChange)="handle<%= classify(swaggerProperty.name) %>Filter($event)">
       </kendo-combobox><% if(swaggerProperty.required) { %>
-      <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]"><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
-      </div><% } %>
+      @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)) {
+        <div class="invalid-feedback d-block">
+          @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]) {
+            <div><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
+          }
+        </div>
+      }<% } %>
     </div><%} else if (swaggerProperty.htmlInputType === 'object' && swaggerProperty.properties.length <= 2){ %>
       <kendo-combobox
         id="<%= underscore(swaggerProperty.name) %>"
@@ -30,9 +34,13 @@
         [filterable]="true"
         (filterChange)="handle<%= classify(swaggerProperty.name) %>Filter($event)">
       </kendo-combobox><% if(swaggerProperty.required) { %>
-      <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]"><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
-      </div><% } %>
+      @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)){
+        <div class="invalid-feedback d-block">
+        @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]) {
+          <div><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
+        }
+        </div>
+      }<% } %>
     </div><%} else if (swaggerProperty.htmlInputType === 'object'){ %>
       <kendo-multicolumncombobox
         id="<%= underscore(swaggerProperty.name) %>"
@@ -46,41 +54,62 @@
         (filterChange)="handle<%= classify(swaggerProperty.name) %>Filter($event)"><% swaggerProperty.properties.filter(t=> t.name !== 'id' && !t.hidden).forEach(swaggerSubProperty => { %>
           <kendo-combobox-column field="<%= camelize(swaggerSubProperty.name) %>" title="<%= swaggerSubProperty.startCaseName %>" [width]="100"></kendo-combobox-column><% }); %>
       </kendo-multicolumncombobox><% if(swaggerProperty.required) { %>
-      <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]"><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
-      </div><% } %>
+      @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)) {
+        <div class="invalid-feedback d-block">
+        @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]) {
+          <div><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
+        }
+        </div>
+      }<% } %>
     </div><%} else if (swaggerProperty.htmlInputType === 'date' && swaggerProperty.required) { %>
-      <kendo-datepicker id="<%= underscore(swaggerProperty.name) %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>">
-      </kendo-datepicker>
-      <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]"><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
-      </div>
+      <kendo-datepicker id="<%= underscore(swaggerProperty.name) %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" />
+      @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)) {
+        <div class="invalid-feedback d-block">
+        @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]) {
+          <div><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
+        }
+        </div>
+      }
     </div><%} else if (swaggerProperty.htmlInputType === 'date'){ %>
       <kendo-datepicker id="<%= underscore(swaggerProperty.name) %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>"></kendo-datepicker>
     </div><%} else if (swaggerProperty.required && swaggerProperty.minLength) { %>
       <input id="<%= underscore(swaggerProperty.name) %>" type="<%= swaggerProperty.htmlInputType %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" />
-      <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]"><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[MinLengthError]">
-          <%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> requires a min length of
-          {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.requiredLength}}, currently only
-          {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.actualLength}}.
+      @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)) {
+        <div class="invalid-feedback d-block">
+        @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]) {
+          <div><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
+        }
+        @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[MinLengthError]) {
+          <div>
+            <%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> requires a min length of
+            {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.requiredLength}}, currently only
+            {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.actualLength}}.
+          </div>
+        }
         </div>
-      </div>
+      }
     </div><% } else if (swaggerProperty.required) { %>
       <input id="<%= underscore(swaggerProperty.name) %>" type="<%= swaggerProperty.htmlInputType %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" />
-      <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-        <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]"><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
-      </div>
+      @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)) {
+        <div class="invalid-feedback d-block">
+        @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[RequiredError]) {
+          <div><%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> is required</div>
+        }
+        </div>
+      }
     </div><% } else if (swaggerProperty.minLength) { %>
       <input id="<%= underscore(swaggerProperty.name) %>" type="<%= swaggerProperty.htmlInputType %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" />
-        <div *ngIf="(submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)" class="invalid-feedback d-block">
-          <div *ngIf="formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[MinLengthError]">
-            <%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> requires a min length of
-            {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.requiredLength}}, currently only
-            {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.actualLength}}.
+        @if ((submitted$ | async) && formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)) {
+          <div class="invalid-feedback d-block">
+          @if (formControlErrors(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.[MinLengthError]) {
+            <div>
+              <%= capitalize(decamelize(name)) %> <%= (swaggerProperty.startCaseName).toLowerCase() %> requires a min length of
+              {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.requiredLength}}, currently only
+              {{formMinLengthError(props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>)?.actualLength}}.
+            </div>
+          }
           </div>
-        </div>
+        }
       </div><% } else{ %>
       <input id="<%= underscore(swaggerProperty.name) %>" type="<%= swaggerProperty.htmlInputType %>" class="form-control" [formControlName]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" />
     </div><% } %><% }) %>

package/schematics/imng-crud/files/add.component.spec.ts.template

@@ -9,7 +9,8 @@ import { mockConsoleError<% if (hasDates || hasObjects) { %>, mockConsoleGroup,
 import { of } from 'rxjs';<% } %>
 
 import { <%= classify(name) %>AddComponent } from './add.component';
-import { <%= classify(name) %>CrudFacade } from './crud.facade';
+import { <%= classify(name) %>CrudFacade } from './crud.facade';<% if (modelFolderLocation) { %>
+import { I<%= classify(singularizedName) %>, createTest<%= classify(singularizedName) %>, <% swaggerObjectProperties.forEach(function(swaggerProperty, i, arr){ %>createTest<%= classify(swaggerProperty.propertyTypeName) %><% if(arr.length != i + 1) {%>, <%} }); %> } from '<%= modelFolderLocation %>';<% } %>
 
 <% if (hasObjects) { %>export function createMock<%= classify(name) %>Facade() {
   return {

package/schematics/imng-crud/files/add.component.ts.template

@@ -1,5 +1,4 @@
 import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
-import { <%= classify(name) %>CrudFacade } from './crud.facade';
 import { <%= classify(name) %>BaseEntryComponent } from './base-entry.component';
 
 @Component({
@@ -7,14 +6,11 @@ import { <%= classify(name) %>BaseEntryComponent } from './base-entry.component'
   templateUrl: './add-edit.component.html',
   styleUrls: ['./add-edit.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class <%= classify(name) %>AddComponent extends <%= classify(name) %>BaseEntryComponent implements OnInit, OnDestroy {
   public dialogTitle = 'Add <%= classify(name) %>';
-  public active$ = this.facade.isNewActive$;
 
-  constructor(facade: <%= classify(name) %>CrudFacade) {
-    super(facade);
-  }
   public override initForm(): void {
     super.initForm();
     this.addEditForm.patchValue({});

package/schematics/imng-crud/files/api.service.ts.template

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { NrsrxBaseApiClientService } from 'imng-nrsrx-client-utils';
-import { HttpClient } from '@angular/common/http';
 import { environment } from '@env';
+<% if (modelFolderLocation) { %>
+import { I<%= classify(name) %>, <%= classify(name) %>Properties } from '<%= modelFolderLocation %>';<% } %>
 
 @Injectable({
   providedIn: 'root',
@@ -12,7 +13,4 @@ export class <%= classify(name) %>ApiService extends NrsrxBaseApiClientService<I
   public override dateOnlyPropertyNames = [<% swaggerProperties.filter(t => t.format === 'date').forEach(function (swaggerProperty, index, dateProperties) {  %>
     <%= classify(singularizedName) %>Properties.<%= swaggerProperty.snakeCaseName.toUpperCase() %><% if (index + 1 < dateProperties.length) { %>,<% }}) %>];
 <% } %>
-  constructor(http: HttpClient) {
-    super(http);
-  }
 }

package/schematics/imng-crud/files/base-entry.component.ts.template

@@ -1,11 +1,16 @@
-import { OnInit, Component } from '@angular/core';
+/* eslint-disable @angular-eslint/prefer-inject */
+import { OnInit, Component, inject } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { BaseDataEntryComponent } from 'imng-kendo-data-entry';<% if (hasObjects) { %>
 import { BehaviorSubject, map, Observable, switchMap } from 'rxjs';<% } %>
 
-import { <%= classify(name) %>CrudFacade } from './crud.facade';
+import { <%= classify(name) %>CrudFacade } from './crud.facade';<% if (modelFolderLocation) { %>
+import { <%= classify(singularizedName) %>Properties, I<%= classify(singularizedName) %>Form, <%= classify(singularizedName) %>FormGroupFac, <% swaggerObjectProperties.forEach(function(swaggerProperty, i, arr){ %>I<%= classify(swaggerProperty.propertyTypeName) %>, <%= classify(swaggerProperty.propertyTypeName) %>Properties<% if(arr.length != i + 1) {%>, <%} }); %> } from '<%= modelFolderLocation %>';<% } %>
 
-@Component({ template: '' })
+@Component({
+  template: '',
+  standalone: false,
+})
 export abstract class <%= classify(name) %>BaseEntryComponent extends BaseDataEntryComponent<<%= classify(name) %>CrudFacade>
   implements OnInit {
   public readonly props = <%= classify(name) %>Properties;<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
@@ -15,12 +20,12 @@ export abstract class <%= classify(name) %>BaseEntryComponent extends BaseDataEn
   public readonly <%= camelize(swaggerProperty.pluralizedName) %>$ = new BehaviorSubject(<%= camelize(swaggerProperty.singularizedPropertyTypeName) %>Values);<% }) %>
   public addEditForm: FormGroup<I<%= classify(name) %>Form>;
 
-  constructor(facade: <%= classify(name) %>CrudFacade) {
-    super(facade);<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
-    this.<%= camelize(swaggerProperty.pluralizedName) %>$ = facade.<%= camelize(swaggerProperty.pluralizedName) %>$.pipe(
+  constructor() {
+    super(inject(<%= classify(name) %>CrudFacade));<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
+    this.<%= camelize(swaggerProperty.pluralizedName) %>$ = this.facade.<%= camelize(swaggerProperty.pluralizedName) %>$.pipe(
       switchMap(<%= camelize(swaggerProperty.pluralizedName) %> => this.<%= camelize(swaggerProperty.name) %>Filter$.pipe(
         map(<%= camelize(swaggerProperty.name) %>Filter => <%= camelize(swaggerProperty.name) %>Filter ? <%= camelize(swaggerProperty.pluralizedName) %>
-          .filter(<%= camelize(swaggerProperty.name) %> => (<% swaggerProperty.properties.filter(f => f.name !== 'id' && f.htmlInputType !== 'object' && !f.hidden).forEach(function(swaggerSubProperty, i, arr){%>
+          .filter(<%= camelize(swaggerProperty.name) %> => (<% swaggerProperty.properties.filter(f => f.name !== 'id' && f.htmlInputType !== 'object' && f.htmlInputType !== 'checkbox' && !f.hidden).forEach(function(swaggerSubProperty, i, arr){%>
             (<%= camelize(swaggerProperty.name) %>.<%= camelize(swaggerSubProperty.name) %> && <%= camelize(swaggerProperty.name) %>.<%= camelize(swaggerSubProperty.name) %><% if(swaggerSubProperty.format){ %>.toString()<% } %>.toLowerCase().indexOf(<%= camelize(swaggerProperty.name) %>Filter) >= 0)<% if (i + 1 != arr.length) { %> ||<% } }) %>
           )) : <%= camelize(swaggerProperty.pluralizedName) %>
     ))));<% }) %>

package/schematics/imng-crud/files/crud.facade.spec.ts.template

@@ -5,8 +5,9 @@ import { EffectsModule } from '@ngrx/effects';
 import { StoreModule, Store } from '@ngrx/store';
 import { readFirst } from 'imng-ngrx-utils/testing';
 import {
-  testAddSetAndClearCurrentEntity,
-  testEditSetAndClearCurrentEntity,
+  testDeleteCurrentEntity,
+  testModalStateAddAndClearCurrentEntity,
+  testModalStateEditAndClearCurrentEntity,
   testSaveCurrentEntity,
   testUpdateCurrentEntity,
 } from 'imng-kendo-data-entry/testing';
@@ -15,7 +16,8 @@ import { of } from 'rxjs';
 
 import { <%= camelize(pluralizedStoreName) %>Feature, <%= classify(singularizedStoreName) %>ListEffects, <%= classify(singularizedStoreName) %>CrudEffects } from '../+state';
 import { <%= classify(name) %>CrudFacade } from './crud.facade';
-import { <%= classify(name) %>ApiService } from './api.service';
+import { <%= classify(name) %>ApiService } from './api.service';<% if (modelFolderLocation) { %>
+import { createTest<%= classify(singularizedName) %> } from '<%= modelFolderLocation %>';<% } %>
 import { environment } from '@env';
 
 describe('<%= classify(name) %>CrudFacade', () => {
@@ -58,24 +60,27 @@ describe('<%= classify(name) %>CrudFacade', () => {
     });
 
     test('clearCurrentEntity() should set current<%= classify(name) %> to null', async () => {
-      let isNewActive = await readFirst(facade.isNewActive$);
-      expect(isNewActive).toBeFalsy();
+      let currentModalState = await readFirst(facade.currentModalState$);
+      expect(currentModalState).toBeUndefined();
 
       facade.clearCurrentEntity();
-      isNewActive = await readFirst(facade.isNewActive$);
+      currentModalState = await readFirst(facade.currentModalState$);
 
-      expect(isNewActive).toBeFalsy();
+      expect(currentModalState).toBeUndefined();
       expect(await readFirst(store)).toMatchSnapshot();
     });
 
-    test('New Entity Set And Clear CurrentEntity', async () =>
-      testAddSetAndClearCurrentEntity<<%= classify(name) %>CrudFacade>(facade));
-    test('Existing Entity Set And Clear CurrentEntity', async () =>
-      testEditSetAndClearCurrentEntity<<%= classify(name) %>CrudFacade>(facade));
+    test('Add Modal State And Clear CurrentEntity', async () =>
+      testModalStateAddAndClearCurrentEntity<<%= classify(name) %>CrudFacade>(facade));
+    test('Edit Modal state And Clear CurrentEntity', async () =>
+      testModalStateEditAndClearCurrentEntity<<%= classify(name) %>CrudFacade>(facade));
     test('Save CurrentEntity', async () =>
       testSaveCurrentEntity<<%= classify(name) %>CrudFacade>(facade, httpClient));
     test('Update CurrentEntity', async () =>
-      testUpdateCurrentEntity<<%= classify(name) %>CrudFacade>(facade, httpClient));<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
+      testUpdateCurrentEntity<<%= classify(name) %>CrudFacade>(facade, httpClient));
+    test('it should handle DeleteItem', async () => {
+      await testDeleteCurrentEntity(facade, httpClient);
+    });<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
 
     test('should load <%= classify(swaggerProperty.pluralizedName) %>', async () => {
       facade.load<%= classify(swaggerProperty.pluralizedName) %>({});

package/schematics/imng-crud/files/crud.facade.ts.template

@@ -1,21 +1,27 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { IDataEntryFacade } from 'imng-kendo-data-entry';<% if (hasObjects) { %>
+import { IDataDeleteFacade, IDataEntryFacade } from 'imng-kendo-data-entry';<% if (hasObjects) { %>
 import { ODataState } from 'imng-kendo-odata';<% } %>
-import { <%= camelize(pluralizedStoreName) %>Feature, <%= camelize(singularizedStoreName) %>Selectors, <%= camelize(singularizedStoreName) %>ActionTypes } from '../+state';
+
+import { <%= camelize(pluralizedStoreName) %>Feature, <%= camelize(singularizedStoreName) %>ActionTypes } from '../+state';<% if (modelFolderLocation) { %>
+import { I<%= classify(singularizedName) %>, <% swaggerObjectProperties.forEach(function(swaggerProperty, i, arr){ %>I<%= classify(swaggerProperty.name) %><% if(arr.length != i + 1) {%>, <%} }); %> } from '<%= modelFolderLocation %>';<% } %>
 
 @Injectable()
-export class <%= classify(name) %>CrudFacade implements IDataEntryFacade<I<%= classify(name) %>> {
+export class <%= classify(name) %>CrudFacade implements IDataEntryFacade<I<%= classify(name) %>>, IDataDeleteFacade<I<%= classify(name) %>> {
+  private readonly store = inject(Store);
+
   loading$ = this.store.select(<%= camelize(pluralizedStoreName) %>Feature.selectLoading);
   currentEntity$ = this.store.select(<%= camelize(pluralizedStoreName) %>Feature.selectCurrent<%= classify(name) %>);
-  isEditActive$ = this.store.select(<%= camelize(singularizedStoreName) %>Selectors.selectIsEdit<%= classify(name) %>Active);
-  isNewActive$ = this.store.select(<%= camelize(singularizedStoreName) %>Selectors.selectIsNew<%= classify(name) %>Active);<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
+  currentModalState$ = this.store.select(<%= camelize(pluralizedStoreName) %>Feature.selectCurrent<%= classify(singularizedName) %>ModalState);<% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
   <%= camelize(swaggerProperty.pluralizedName) %>$ = this.store.select(<%= camelize(pluralizedStoreName) %>Feature.select<%= classify(swaggerProperty.pluralizedName) %>);<% }); %>
 
-  constructor(private readonly store: Store) {}
-
-  public setCurrentEntity(item: I<%= classify(name) %>): void {
-    this.store.dispatch(<%= camelize(singularizedStoreName) %>ActionTypes.setCurrent<%= classify(name) %>(item));
+  public setCurrentEntity(item: I<%= classify(name) %>, modalState: string): void {
+    this.store.dispatch(
+      <%= camelize(singularizedStoreName) %>ActionTypes.setCurrent<%= classify(name) %>({
+        modalState,
+        entity: item,
+      }),
+    );
   }
 
   public clearCurrentEntity(): void {
@@ -29,6 +35,10 @@ export class <%= classify(name) %>CrudFacade implements IDataEntryFacade<I<%= cl
   public updateExistingEntity(item: I<%= classify(name) %>): void {
     this.store.dispatch(<%= camelize(singularizedStoreName) %>ActionTypes.update<%= classify(name) %>Request(item));
   }
+
+  public deleteExistingEntity(item: I<%= classify(name) %>): void {
+    this.store.dispatch(<%= camelize(singularizedStoreName) %>ActionTypes.delete<%= classify(name) %>Request(item));
+  }
 <% swaggerObjectProperties.filter(t=> !t.enum).forEach(function(swaggerProperty){ %>
   public load<%= classify(swaggerProperty.pluralizedName) %>(state: ODataState): void {
     this.store.dispatch(<%= camelize(singularizedStoreName) %>ActionTypes.load<%= classify(swaggerProperty.pluralizedName) %>Request(state));

package/schematics/imng-crud/files/edit.component.spec.ts.template

@@ -9,7 +9,8 @@ import { of } from 'rxjs';<% } %>
 import { mockConsoleError<% if (hasDates || hasObjects) { %>, mockConsoleGroup, mockConsoleWarn<% } %>, readFirst } from 'imng-ngrx-utils/testing';
 <% if (hasObjects) { %>import { createMock<%= classify(name) %>Facade } from './add.component.spec';<% } %>
 import { <%= classify(name) %>EditComponent } from './edit.component';
-import { <%= classify(name) %>CrudFacade } from './crud.facade';
+import { <%= classify(name) %>CrudFacade } from './crud.facade';<% if (modelFolderLocation) { %>
+import { I<%= classify(singularizedName) %>, createTest<%= classify(singularizedName) %> } from '<%= modelFolderLocation %>';<% } %>
 
 describe('<%= classify(name) %>EditComponent', () => {
   let component: <%= classify(name) %>EditComponent;

package/schematics/imng-crud/files/edit.component.ts.template

@@ -2,26 +2,20 @@ import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/
 import { formGroupPatcher } from 'imng-kendo-data-entry';
 
 import { <%= classify(name) %>BaseEntryComponent } from './base-entry.component';
-import { <%= classify(name) %>CrudFacade } from './crud.facade';
 
 @Component({
   selector: '<%= appPrefix %>-<%= dasherize(name) %>-edit',
   templateUrl: './add-edit.component.html',
   styleUrls: ['./add-edit.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class <%= classify(name) %>EditComponent extends <%= classify(name) %>BaseEntryComponent implements OnInit, OnDestroy {
   public dialogTitle = 'Edit <%= classify(name) %>';
-  public active$ = this.facade.isEditActive$;
 
-  constructor(facade: <%= classify(name) %>CrudFacade) {
-    super(facade);
-  }
   public override initForm(): void {
     super.initForm();
-    if (this.addEditForm) {
-      this.allSubscriptions.push(this.facade.currentEntity$.pipe(formGroupPatcher(this.addEditForm)).subscribe());
-    }
+    this.allSubscriptions.push(this.facade.currentEntity$.pipe(formGroupPatcher(this.addEditForm)).subscribe());
   }
 
   public save(): void {

package/schematics/imng-crud/schema.json

@@ -1,38 +1,41 @@
 {
-    "$schema": "http://json-schema.org/schema",
-    "$id": "imng-crud",
-    "type": "object",
-    "properties": {
-      "name": {
-        "type": "string",
-        "description": "Entity name",
-        "$default": {
-          "$source": "argv",
-          "index": 0
-        }
-      },
-      "storeName": {
-        "type": "string",
-        "description": "NGRX Feature Store name"
-      },
-      "path": {
-        "type": "string",
-        "description": "Directory where you would like the output to go"
-      },
-      "openApiJsonUrl": {
-        "type": "string",
-        "description": "URL of swagger page"
-      },
-      "openApiJsonFileName": {
-        "type": "string",
-        "description": "Relative file name and path"
-      },
-      "appPrefix": {
-        "type": "string",
-        "default": "imng",
-        "description": "Application selector prefix for components and directives."
+  "$schema": "http://json-schema.org/schema",
+  "$id": "imng-crud",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Entity name",
+      "$default": {
+        "$source": "argv",
+        "index": 0
       }
     },
-    "required": ["name", "path"]
-  }
-  
+    "storeName": {
+      "type": "string",
+      "description": "NGRX Feature Store name"
+    },
+    "path": {
+      "type": "string",
+      "description": "Directory where you would like the output to go"
+    },
+    "openApiJsonUrl": {
+      "type": "string",
+      "description": "URL of OpenApi Json document"
+    },
+    "openApiJsonFileName": {
+      "type": "string",
+      "description": "Relative file name and path of OpenApi json document"
+    },
+    "appPrefix": {
+      "type": "string",
+      "default": "imng",
+      "description": "Application selector prefix for components and directives."
+    },
+    "modelFolderLocation": {
+      "type": "string",
+      "description": "Location of the model folder (relative to the generated component root)"
+    }
+  },
+  "required": ["name", "path"]
+}

package/schematics/imng-list/files/list.component.html.template

@@ -7,14 +7,13 @@
         (addItemClicked)="addItem()"
         (reloadEntitiesClicked)="reloadEntities()"
         (resetFiltersClicked)="resetFilters()"
-        [hasHiddenColumns$]="hasHiddenColumns$">
-      </imng-kendo-odata-grid-header>
+        [hasHiddenColumns$]="hasHiddenColumns$" />
     </div>
   </ng-template>
   <kendo-grid-column [width]="75">
     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
       <kendo-menu title="Actions">
-        <kendo-menu-item icon="menu">
+        <kendo-menu-item [svgIcon]="icons.menu">
           <kendo-menu-item>
             <ng-template kendoMenuItemLinkTemplate>
               <button
@@ -23,7 +22,7 @@
                 (click)="editItem(dataItem)"
                 placement="left"
                 tooltip="Edit">
-                <span class="k-icon k-i-edit"></span>
+                <kendo-svgicon [icon]="icons.menu" size="xlarge"></kendo-svgicon>
                 Edit
               </button>
             </ng-template>
@@ -36,7 +35,7 @@
                 (click)="deleteItem(dataItem)"
                 placement="left"
                 tooltip="Delete">
-                <span class="k-icon k-i-delete"></span>
+                <kendo-svgicon [icon]="icons.trash" size="xlarge"></kendo-svgicon>
                 Delete
               </button>
             </ng-template>
@@ -52,22 +51,21 @@
 <%} else if (swaggerProperty.type === 'boolean') { %>
   <kendo-grid-column [field]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" [width]="100" title="<%= swaggerProperty.startCaseName %>" filter="<%= swaggerProperty.filterExpression %>" [hidden]="<%= swaggerProperty.hidden %>">
     <ng-template kendoGridCellTemplate let-dataItem>
-      <div *ngIf="dataItem[props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>]">
-        <span class="text-success font-weight-bolder h2" tooltip="<%= swaggerProperty.startCaseName %>">
-          <span class="k-icon k-i-check-circle start-50"></span>
-        </span>
-      </div>
+     @if (dataItem[props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>]) {
+        <kendo-svgicon class="text-success font-weight-bolder h2" [icon]="icons.check" size="xlarge"></kendo-svgicon>
+      } @else {
+        <kendo-svgicon class="text-danger font-weight-bolder h2" [icon]="icons.cancel" size="xlarge"></kendo-svgicon>
+      }
     </ng-template>
 <%} else if (swaggerProperty.format === 'uuid') { %>
   <kendo-grid-column [field]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" [width]="100" title="<%= swaggerProperty.startCaseName %>" filter="<%= swaggerProperty.filterExpression %>" [hidden]="<%= swaggerProperty.hidden %>">
     <ng-template kendoGridCellTemplate let-dataItem>
       <imng-kendo-copy
-        [displayValue]="dataItem[props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>] | slice:0:5"
-        [copyValue]="dataItem[props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>]">
-      </imng-kendo-copy>
+        [displayValue]="`${(dataItem[props.ID] | slice: 0 : 4)}.-.${(dataItem[props.ID] | slice: -4)}`"
+        [copyValue]="dataItem[props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>]" />
     </ng-template>
     <ng-template kendoGridFilterMenuTemplate let-filter>
-      <imng-uuid-filter [filter]="filter"></imng-uuid-filter>
+      <imng-uuid-filter [filter]="filter" />
     </ng-template>
 <%} else if (swaggerProperty.enum) { %>
   <kendo-grid-column
@@ -82,7 +80,7 @@
         [textField]="EnumProperties.DISPLAY_TEXT"
         [valueField]="EnumProperties.NAME"
         [data]="<%= camelize(swaggerProperty.pluralizedPropertyTypeName) %>"
-        [field]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>"></imng-multi-select-filter>
+        [field]="props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>" />
     </ng-template>
     <ng-template kendoGridCellTemplate let-dataItem>
       {{ getEnumText(<%= camelize(swaggerProperty.pluralizedPropertyTypeName) %>, dataItem[props.<%= swaggerProperty.snakeCaseName.toUpperCase() %>]) }}
@@ -99,9 +97,23 @@
   </kendo-grid-column><% }) %>
 
   <kendo-grid-pdf [fileName]="getExportFileName('<%= classify(pluralizedName) %>')" [allPages]="false">
-    <kendo-grid-pdf-margin top="1cm" left="1cm" right="1cm" bottom="1cm"></kendo-grid-pdf-margin>
+    <kendo-grid-pdf-margin top="1cm" left="1cm" right="1cm" bottom="1cm" />
   </kendo-grid-pdf>
-  <kendo-grid-excel [fileName]="getExportFileName('<%= classify(pluralizedName) %>')" [fetchData]="excelData"></kendo-grid-excel>
+  <kendo-grid-excel [fileName]="getExportFileName('<%= classify(pluralizedName) %>')" [fetchData]="excelData" />
 </kendo-grid>
-<<%= appPrefix %>-<%= dasherize(name) %>-add *ngIf="crudFacade.isNewActive$ | async"></<%= appPrefix %>-<%= dasherize(name) %>-add>
-<<%= appPrefix %>-<%= dasherize(name) %>-edit *ngIf="crudFacade.isEditActive$ | async"></<%= appPrefix %>-<%= dasherize(name) %>-edit>
+
+@switch (crudFacade.currentModalState$ | async) {
+  @case (modalStates.ADD) {
+    <<%= appPrefix %>-<%= dasherize(name) %>-add />
+  }
+  @case (modalStates.EDIT) {
+    <<%= appPrefix %>-<%= dasherize(name) %>-edit />
+  }
+  @case (modalStates.DELETE) {
+    <imng-data-delete-dialog
+      [facade]="crudFacade"
+      [dataItem]="crudFacade.currentEntity$ | async">
+      <div class="text-center">Are you sure you want to delete this record?</div>
+    </imng-data-delete-dialog>
+  }
+}

package/schematics/imng-list/files/list.component.spec.ts.template

@@ -1,14 +1,16 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
-import { createDataEntryMockFacade, createDataDeleteMockFacade } from 'imng-kendo-data-entry/testing';
+import { createDataEntryMockFacade } from 'imng-kendo-data-entry/testing';
 import { createODataGridMockFacade } from 'imng-kendo-grid-odata/testing';
 import { provideOidcMockFacade } from 'imng-oidc-client/testing';
+import { ModalStates } from 'imng-kendo-data-entry';
 
 import { <%= classify(singularizedName) %>ListComponent } from './list.component';
 import { <%= classify(singularizedName) %>ListFacade } from './list.facade';
 import { <%= classify(singularizedName) %>CrudFacade } from '../<%= dasherize(pluralizedName) %>-crud';
-import { <%= camelize(singularizedName) %>Routes } from '../<%= dasherize(pluralizedName) %>.routing';
+import { <%= camelize(singularizedName) %>Routes } from '../<%= dasherize(pluralizedName) %>.routing';<% if (modelFolderLocation) { %>
+import { createTest<%= classify(name) %> } from '<%= modelFolderLocation %>';<% } %>
 
 describe('<%= classify(singularizedName) %>ListComponent', () => {
   let component: <%= classify(singularizedName) %>ListComponent;
@@ -21,7 +23,7 @@ describe('<%= classify(singularizedName) %>ListComponent', () => {
       declarations: [<%= classify(singularizedName) %>ListComponent],
       imports: [],
       providers: [
-        { provide: <%= classify(singularizedName) %>ListFacade, useValue: createODataGridMockFacade(createDataDeleteMockFacade()) },
+        { provide: <%= classify(singularizedName) %>ListFacade, useValue: createODataGridMockFacade() },
         { provide: <%= classify(singularizedName) %>CrudFacade, useValue: createDataEntryMockFacade() },
         provideRouter(<%= camelize(singularizedName) %>Routes),
         provideOidcMockFacade(),
@@ -60,20 +62,23 @@ describe('<%= classify(singularizedName) %>ListComponent', () => {
   test('it should handle AddItem', () => {
     component.addItem();
     expect(crudFacade.setCurrentEntity).toHaveBeenCalledTimes(1);
-    expect(crudFacade.setCurrentEntity).toHaveBeenCalledWith({});
+    expect(crudFacade.setCurrentEntity).toHaveBeenCalledWith({}, ModalStates.ADD);
   });
 
   test('it should handle EditItem', () => {
     const item = createTest<%= classify(singularizedName) %>();
     component.editItem(item);
     expect(crudFacade.setCurrentEntity).toHaveBeenCalledTimes(1);
-    expect(crudFacade.setCurrentEntity).toHaveBeenCalledWith(item);
+    expect(crudFacade.setCurrentEntity).toHaveBeenCalledWith(item, ModalStates.EDIT);
   });
 
   test('it should handle DeleteItem', () => {
     const item = createTest<%= classify(singularizedName) %>();
     component.deleteItem(item);
-    expect(listFacade.deleteExistingEntity).toHaveBeenCalledTimes(1);
-    expect(listFacade.deleteExistingEntity).toHaveBeenCalledWith(item);
+    expect(crudFacade.setCurrentEntity).toHaveBeenCalledTimes(1);
+    expect(crudFacade.setCurrentEntity).toHaveBeenCalledWith(
+      item,
+      ModalStates.DELETE,
+    );
   });
 });