@smallpearl/ngx-helper 0.33.28 → 0.33.30

package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs

@@ -1,7 +1,12 @@
 import * as i1 from '@angular/common/http';
-import { HttpContextToken, HttpContext, HttpParams, HttpClient } from '@angular/common/http';
+import { HttpContext, HttpClient, HttpParams, HttpContextToken } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, signal, viewChild, ViewContainerRef, Component, ChangeDetectionStrategy, viewChildren, EventEmitter, effect, ContentChildren, Output, ChangeDetectorRef } from '@angular/core';
+import { input, signal, computed, inject, ChangeDetectorRef, Component, InjectionToken, viewChild, ViewContainerRef, ChangeDetectionStrategy, viewChildren, EventEmitter, effect, ContentChildren, Output } from '@angular/core';
+import * as i4$1 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule, provideTranslocoScope } from '@jsverse/transloco';
+import { setServerErrorsAsFormErrors } from '@smallpearl/ngx-helper/forms';
+import { Subscription, Observable, map, tap, of, switchMap, firstValueFrom, catchError, EMPTY, throwError } from 'rxjs';
+import { sideloadToComposite } from '@smallpearl/ngx-helper/sideload';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/button';
@@ -21,26 +26,12 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3$1 from '@angular/platform-browser';
-import * as i4$1 from '@jsverse/transloco';
-import { TranslocoService, TranslocoModule, provideTranslocoScope } from '@jsverse/transloco';
 import * as i11 from 'angular-split';
 import { AngularSplitModule } from 'angular-split';
 import { startCase, clone } from 'lodash';
 import { plural } from 'pluralize';
-import { Observable, of, Subscription, tap, switchMap, firstValueFrom, map, catchError, EMPTY, throwError } from 'rxjs';
 import * as i1$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { setServerErrorsAsFormErrors } from '@smallpearl/ngx-helper/forms';
-import { sideloadToComposite } from '@smallpearl/ngx-helper/sideload';
-
-const SP_MAT_ENTITY_CRUD_HTTP_CONTEXT = new HttpContextToken(() => ({
-    entityName: '',
-    entityNamePlural: '',
-    endpoint: '',
-    op: undefined,
-}));
-
-const SP_MAT_ENTITY_CRUD_CONFIG = new InjectionToken('SPMatEntityCrudConfig');
 
 /**
  * Converts array of HttpContextToken key, value pairs to HttpContext
@@ -67,80 +58,480 @@ function convertHttpContextInputToHttpContext(context, reqContext) {
     return context;
 }
 
-function defaultCrudResponseParser(entityName, idKey, method, // 'create' | 'retrieve' | 'update' | 'delete',
-resp) {
-    // If the response is an object with a property '<idKey>', return it as
-    // TEntity.
-    if (resp.hasOwnProperty(idKey)) {
-        return resp;
-    }
-    // If the response has an object indexed at '<entityName>' and it has
-    // the property '<idKey>', return it as TEntity.
-    if (resp.hasOwnProperty(entityName)) {
-        const obj = resp[entityName];
-        if (obj.hasOwnProperty(idKey)) {
-            return obj;
-        }
-    }
-    // Return undefined, indicating that we could't parse the response.
-    return undefined;
-}
-const DefaultSPMatEntityCrudConfig = {
-    crudOpResponseParser: defaultCrudResponseParser
-};
 /**
- * To be called from an object constructor as it internally calls Angular's
- * inject() API.
- * @param userConfig
- * @returns
+ * This is a convenience base class that clients can derive from to implement
+ * their CRUD form component. Particularly this class registers the change
+ * detection hook which will be called when the user attempts to close the
+ * form's parent container pane via the Close button on the top right.
+ *
+ * This button behaves like a Cancel button in a desktop app and therefore if
+ * the user has entered any data in the form's controls, (determined by
+ * checking form.touched), then a 'Lose Changes' prompt is displayed allowing
+ * the user to cancel the closure.
+ *
+ * The `@Component` decorator is fake to keep the VSCode angular linter quiet.
+ *
+ * This class can be used in two modes:
+ *
+ *  I. SPMatEntityCrudComponent mode
+ *     This mode relies on a bridge interface that implements the
+ *     SPMatEntityCrudCreateEditBridge interface to perform the entity
+ *     load/create/update operations. This is the intended mode when the
+ *     component is used as a part of the SPMatEntityCrudComponent to
+ *     create/update an entity. This mode requires the following properties
+ *     to be set:
+ *       - entity: TEntity | TEntity[IdKey] | undefined (for create)
+ *       - bridge: SPMatEntityCrudCreateEditBridge
+ *
+ *  II. Standalone mode
+ *     This mode does not rely on the bridge interface and the component
+ *     itself performs the entity load/create/update operations.
+ *     This mode requires the following properties to be set:
+ *      - entity: TEntity | TEntity[IdKey] | undefined (for create)
+ *      - baseUrl: string - Base URL for CRUD operations. This URL does not
+ *        include the entity id. The entity id will be appended to this URL
+ *        for entity load and update operations. For create operation, this
+ *        URL is used as is.
+ *      - entityName: string - Name of the entity, used to parse sideloaded
+ *        entity responses.
+ *      - httpReqContext?: HttpContextInput - Optional HTTP context to be
+ *        passed to the HTTP requests. For instance, if your app has a HTTP
+ *        interceptor that adds authentication tokens to the requests based
+ *        on a HttpContextToken, then you can pass that token here.
+ *
+ * I. SPMatEntityCrudComponent mode:
+ *
+ *  1. Declare a FormGroup<> type as
+ *
+ *      ```
+ *      type MyForm = FormGroup<{
+ *        name: FormControl<string>;
+ *        type: FormControl<string>;
+ *        notes: FormControl<string>;
+ *      }>;
+ *      ```
+ *
+ *  2. Derive your form's component class from this and implement the
+ *    createForm() method returing the FormGroup<> instance that matches
+ *    the FormGroup concrete type above.
+ *
+ *      ```
+ *      class MyFormComponent extends SPMatEntityCrudFormBase<MyForm, MyEntity> {
+ *        constructor() {
+ *          super()
+ *        }
+ *        createForm() {
+ *          return new FormGroup([...])
+ *        }
+ *      }
+ *      ```
+ *
+ *  3. If your form's value requires manipulation before being sent to the
+ *    server, override `getFormValue()` method and do it there before returning
+ *    the modified values.
+ *
+ *  4. Wire up the form in the template as below
+ *
+ *      ```html
+ *      @if (loadEntity$ | async) {
+ *      <form [formGroup]='form'.. (ngSubmit)="onSubmit()">
+ *        <button type="submit">Submit</button>
+ *      </form>
+ *      } @else {
+ *        <div>Loading...</div>
+ *      }
+ *      ```
+ *
+ *     Here `loadEntity$` is an Observable<boolean> that upon emission of `true`
+ *     indicates that the entity has been loaded from server (in case of edit)
+ *     and the form is ready to be displayed. Note that if the full entity was
+ *     passed in the `entity` input property, then no server load is necessary
+ *     and the form will be created immediately.
+ *
+ *  5. In the parent component that hosts the SPMatEntityCrudComponent, set
+ *     the `entity` and `bridge` input properties of this component to
+ *     appropriate values. For instance, if your form component has the
+ *     selector `app-my-entity-form`, then the parent component's template
+ *     will have:
+ *
+ *    ```html
+ *   <sp-mat-entity-crud
+ *    ...
+ *    createEditFormTemplate="entityFormTemplate"
+ *   ></sp-mat-entity-crud>
+ *   <ng-template #entityFormTemplate let-data="data">
+ *    <app-my-entity-form
+ *      [entity]="data.entity"
+ *      [bridge]="data.bridge"
+ *    ></app-my-entity-form>
+ *   </ng-template>
+ *  ```
+ *
+ *  II. Standalone mode
+ *
+ * 1..4. Same as above, except set the required `bridge` input to `undefined`.
+ * 5. Initialize the component's inputs `baseUrl` and `entityName` with the
+ *    appropriate values. If you would like to pass additional HTTP context to
+ *    the HTTP requests, then set the `httpReqContext` input as well.
+ *    If the entity uses an id key other than 'id', then set the `idKey` input
+ *    to the appropriate id key name.
+ * 6. If you want to retrieve the created/updated entity after the create/update
+ *    operation, override the `onPostCreate()` and/or `onPostUpdate()` methods
+ *    respectively.
  */
-function getEntityCrudConfig() {
-    const userCrudConfig = inject(SP_MAT_ENTITY_CRUD_CONFIG, {
-        optional: true,
-    });
-    return {
-        ...DefaultSPMatEntityCrudConfig,
-        ...(userCrudConfig ?? {}),
-    };
-}
-
-class FormViewHostComponent {
-    entityCrudComponentBase = input.required();
-    clientViewTemplate = input(null);
-    _itemLabel = computed(() => {
-        const label = this.entityCrudComponentBase().getItemLabel();
-        return label instanceof Observable ? label : of(label);
-    });
-    _itemLabelPlural = computed(() => {
-        const label = this.entityCrudComponentBase().getItemLabelPlural();
-        return label instanceof Observable ? label : of(label);
-    });
-    entity = signal(undefined);
-    title = signal(undefined);
-    params = signal(undefined);
-    clientFormView;
-    vc = viewChild('clientFormContainer', { read: ViewContainerRef });
-    config;
+class SPMatEntityCrudFormBase {
+    // bridge mode inputs
+    entity = input();
+    bridge = input();
+    params = input();
+    // END bridge mode inputs
+    // standalone mode inputs
+    // Entity name, which is used to parse sideloaded entity responses
+    entityName = input();
+    // Base CRUD URL, which is the GET-list-of-entities/POST-to-create
+    // URL. Update URL will be derived from this ias `baseUrl()/${TEntity[IdKey]}`
+    baseUrl = input();
+    // Additional request context to be passed to the request
+    httpReqContext = input();
+    // ID key, defaults to 'id'
+    idKey = input('id');
+    // END standalone mode inputs
+    // IMPLEMENTATION
+    loadEntity$;
+    _entity = signal(undefined);
     sub$ = new Subscription();
+    // Store for internal form signal. form() is computed from this.
+    _form = signal(undefined);
+    // Force typecast to TFormGroup so that we can use it in the template
+    // without having to use the non-nullable operator ! with every reference
+    // of form(). In any case the form() signal is always set in ngOnInit()
+    // method after the form is created. And if form() is not set, then there
+    // will be errors while loading the form in the template.
+    form = computed(() => this._form());
     transloco = inject(TranslocoService);
-    constructor() {
-        this.config = getEntityCrudConfig();
+    cdr = inject(ChangeDetectorRef);
+    http = inject(HttpClient);
+    // This is really not necessary. We can check for this.bridge() directly.
+    mode = computed(() => {
+        return this.bridge() ? 'bridge' : 'standalone';
+    });
+    canCancelEdit = () => {
+        return this._canCancelEdit();
+    };
+    _canCancelEdit() {
+        const form = this._form();
+        if (form && form.touched) {
+            return window.confirm(this.transloco.translate('spMatEntityCrud.loseChangesConfirm'));
+        }
+        return true;
+    }
+    ngOnInit() {
+        // Validate inputs. Either bridge or (baseUrl and entityName) must be
+        // defined.
+        if (this.mode() === 'standalone' &&
+            (!this.getBaseUrl() || !this.getEntityName())) {
+            throw new Error('SPMatEntityCrudFormBase: baseUrl and entityName inputs must be defined in standalone mode.');
+        }
+        this.loadEntity$ = (typeof this.entity() === 'object' || this.entity() === undefined
+            ? new Observable((subscriber) => {
+                subscriber.next(this.entity());
+                subscriber.complete();
+            })
+            : this.load(this.entity())).pipe(map((resp) => {
+            const compositeEntity = this.getEntityFromLoadResponse(resp);
+            this._entity.set(compositeEntity);
+            this._form.set(this.createForm(compositeEntity));
+            const bridge = this.bridge();
+            if (bridge && bridge.registerCanCancelEditCallback) {
+                bridge.registerCanCancelEditCallback(this.canCancelEdit);
+            }
+            return true;
+        }));
     }
-    ngOnInit() { }
     ngOnDestroy() {
         this.sub$.unsubscribe();
     }
-    show(entity, params) {
-        this.entity.set(entity);
-        if (params && params?.title) {
-            this.title.set(params.title instanceof Observable ? params.title : of(params.title));
-        }
-        else {
-            // this.title.set(entity ? this.config.i18n.editItemLabel(this.itemLabel()) : this.config.i18n.newItemLabel(this.itemLabel()));
-            // this.title.set(
-            //   this.transloco.translate(entity ? 'editItem' : 'newItem', {
-            //     item: this.itemLabel(),
-            //   })
+    /**
+     * Additional parameters for loading the entity, in case this.entity() value
+     * is of type TEntity[IdKey].
+     * @returns
+     */
+    getLoadEntityParams() {
+        return '';
+    }
+    /**
+     * Return the TEntity object from the response returned by the
+     * load() method. Typically entity load returns the actual
+     * entity object itself. In some cases, where response is sideloaded, the
+     * default implementation here uses the `sideloadToComposite()` utility to
+     * extract the entity from the response after merging (inplace) the
+     * sideloaded data into a composite.
+     *
+     * If you have a different response shape, or if your sideloaded object
+     * response requires custom custom `sideloadDataMap`, override this method
+     * and implement your custom logic to extract the TEntity object from the
+     * response.
+     * @param resp
+     * @returns
+     */
+    getEntityFromLoadResponse(resp) {
+        if (!resp || typeof resp !== 'object') {
+            return undefined;
+        }
+        const entityName = this.getEntityName();
+        if (resp.hasOwnProperty(this.getIdKey())) {
+            return resp;
+        }
+        else if (entityName && resp.hasOwnProperty(entityName)) {
+            // const sideloadDataMap = this.sideloadDataMap();
+            return sideloadToComposite(resp, entityName, this.getIdKey());
+        }
+        return undefined;
+    }
+    /**
+     * Override to customize the id key name if it's not 'id'
+     * @returns The name of the unique identifier key that will be used to
+     * extract the entity's id for UPDATE operation.
+     */
+    getIdKey() {
+        const bridge = this.bridge();
+        if (bridge) {
+            return bridge.getIdKey();
+        }
+        return this.idKey();
+    }
+    /**
+     * Return the form's value to be sent to server as Create/Update CRUD
+     * operation data.
+     * @returns
+     */
+    getFormValue() {
+        const form = this.form();
+        return form ? form.value : undefined;
+    }
+    onSubmit() {
+        const value = this.getFormValue();
+        const obs = !this._entity()
+            ? this.create(value)
+            : this.update(this._entity()[this.getIdKey()], value);
+        this.sub$.add(obs
+            ?.pipe(tap((entity) => this._entity()
+            ? this.onPostUpdate(entity)
+            : this.onPostCreate(entity)), setServerErrorsAsFormErrors(this._form(), this.cdr))
+            .subscribe());
+    }
+    onPostCreate(entity) {
+        /* empty */
+    }
+    onPostUpdate(entity) {
+        /* empty */
+    }
+    /**
+     * Loads the entity if `this.entity()` is of type TEntity[IdKey]. If `bridge`
+     * input is defined, then it's `loadEntity()` method is used to load the
+     * entity. Otherwise, then this method attempts to load the entity using
+     * HTTP GET from the URL derived from `baseUrl` input.
+     * @param entityId
+     * @param params
+     * @returns
+     */
+    load(entityId) {
+        const bridge = this.bridge();
+        const params = this.getLoadEntityParams();
+        if (bridge) {
+            return bridge.loadEntity(entityId, params);
+        }
+        // Try to load using baseUrl.
+        const url = this.getEntityUrl(entityId);
+        return this.http
+            .get(this.getEntityUrl(entityId), {
+            params: typeof params === 'string'
+                ? new HttpParams({ fromString: params })
+                : params,
+            context: this.getRequestContext(),
+        })
+            .pipe(map((resp) => this.getEntityFromLoadResponse(resp)));
+    }
+    /**
+     * Create a new entity using the bridge if defined, otherwise using HTTP
+     * POST to the `baseUrl`.
+     * @param values
+     * @returns
+     */
+    create(values) {
+        const bridge = this.bridge();
+        if (bridge) {
+            return bridge.create(values);
+        }
+        return this.http
+            .post(this.getBaseUrl(), values, {
+            context: this.getRequestContext(),
+        })
+            .pipe(map((resp) => this.getEntityFromLoadResponse(resp)));
+    }
+    /**
+     * Update an existing entity using the bridge if defined, otherwise using HTTP
+     * PATCH to the URL derived from `baseUrl` and the entity id.
+     * @param id
+     * @param values
+     * @returns
+     */
+    update(id, values) {
+        const bridge = this.bridge();
+        if (bridge) {
+            return bridge.update(id, values);
+        }
+        return this.http
+            .patch(this.getEntityUrl(id), values, {
+            context: this.getRequestContext(),
+        })
+            .pipe(map((resp) => this.getEntityFromLoadResponse(resp)));
+    }
+    /**
+     * Wrapper around entityName input to get the entity name. If `bridge` input
+     * is defined, then its `getEntityName()` method is used. This allows
+     * derived classes to override this method to provide custom logic to
+     * determine the entity name.
+     * @returns
+     */
+    getEntityName() {
+        const bridge = this.bridge();
+        if (bridge) {
+            return bridge.getEntityName();
+        }
+        return this.entityName();
+    }
+    /**
+     * Returns the baseUrl. Derived classes can override this to provide custom
+     * logic to determine the baseUrl.
+     * @returns
+     */
+    getBaseUrl() {
+        return this.baseUrl();
+    }
+    /**
+     * Returns the entity URL for the given entity id. If `bridge` input is
+     * defined, then its `getEntityUrl()` method is used. Otherwise, the URL is
+     * derived from `baseUrl` input.
+     * @param entityId
+     * @returns
+     */
+    getEntityUrl(entityId) {
+        const bridge = this.bridge();
+        if (bridge) {
+            return bridge.getEntityUrl(entityId);
+        }
+        const baseUrl = this.getBaseUrl();
+        if (baseUrl) {
+            const urlParts = baseUrl.split('?');
+            return `${urlParts[0]}${String(entityId)}/${urlParts[1] ? '?' + urlParts[1] : ''}`;
+        }
+        console.warn('SPMatEntityCrudFormBase.getEntityUrl: Cannot determine entity URL as neither baseUrl nor bridge inputs are provided.');
+        return '';
+    }
+    getRequestContext() {
+        let context = new HttpContext();
+        const httpReqContext = this.httpReqContext();
+        if (httpReqContext) {
+            context = convertHttpContextInputToHttpContext(context, httpReqContext);
+        }
+        return context;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: SPMatEntityCrudFormBase, isStandalone: false, selector: "_#_sp-mat-entity-crud-form-base_#_", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, bridge: { classPropertyName: "bridge", publicName: "bridge", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, httpReqContext: { classPropertyName: "httpReqContext", publicName: "httpReqContext", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '_#_sp-mat-entity-crud-form-base_#_',
+                    template: ``,
+                    standalone: false,
+                }]
+        }] });
+
+const SP_MAT_ENTITY_CRUD_HTTP_CONTEXT = new HttpContextToken(() => ({
+    entityName: '',
+    entityNamePlural: '',
+    endpoint: '',
+    op: undefined,
+}));
+
+const SP_MAT_ENTITY_CRUD_CONFIG = new InjectionToken('SPMatEntityCrudConfig');
+
+function defaultCrudResponseParser(entityName, idKey, method, // 'create' | 'retrieve' | 'update' | 'delete',
+resp) {
+    // If the response is an object with a property '<idKey>', return it as
+    // TEntity.
+    if (resp.hasOwnProperty(idKey)) {
+        return resp;
+    }
+    // If the response has an object indexed at '<entityName>' and it has
+    // the property '<idKey>', return it as TEntity.
+    if (resp.hasOwnProperty(entityName)) {
+        const obj = resp[entityName];
+        if (obj.hasOwnProperty(idKey)) {
+            return obj;
+        }
+    }
+    // Return undefined, indicating that we could't parse the response.
+    return undefined;
+}
+const DefaultSPMatEntityCrudConfig = {
+    crudOpResponseParser: defaultCrudResponseParser
+};
+/**
+ * To be called from an object constructor as it internally calls Angular's
+ * inject() API.
+ * @param userConfig
+ * @returns
+ */
+function getEntityCrudConfig() {
+    const userCrudConfig = inject(SP_MAT_ENTITY_CRUD_CONFIG, {
+        optional: true,
+    });
+    return {
+        ...DefaultSPMatEntityCrudConfig,
+        ...(userCrudConfig ?? {}),
+    };
+}
+
+class FormViewHostComponent {
+    entityCrudComponentBase = input.required();
+    clientViewTemplate = input(null);
+    _itemLabel = computed(() => {
+        const label = this.entityCrudComponentBase().getItemLabel();
+        return label instanceof Observable ? label : of(label);
+    });
+    _itemLabelPlural = computed(() => {
+        const label = this.entityCrudComponentBase().getItemLabelPlural();
+        return label instanceof Observable ? label : of(label);
+    });
+    entity = signal(undefined);
+    title = signal(undefined);
+    params = signal(undefined);
+    clientFormView;
+    vc = viewChild('clientFormContainer', { read: ViewContainerRef });
+    config;
+    sub$ = new Subscription();
+    transloco = inject(TranslocoService);
+    constructor() {
+        this.config = getEntityCrudConfig();
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.sub$.unsubscribe();
+    }
+    show(entity, params) {
+        this.entity.set(entity);
+        if (params && params?.title) {
+            this.title.set(params.title instanceof Observable ? params.title : of(params.title));
+        }
+        else {
+            // this.title.set(entity ? this.config.i18n.editItemLabel(this.itemLabel()) : this.config.i18n.newItemLabel(this.itemLabel()));
+            // this.title.set(
+            //   this.transloco.translate(entity ? 'editItem' : 'newItem', {
+            //     item: this.itemLabel(),
+            //   })
             // );
         }
         this.params.set(params);
@@ -1713,376 +2104,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".preview-wrapper{display:flex;flex-direction:column;height:100%!important;width:100%!important}mat-toolbar{background-color:var(--mat-sys-surface-variant)}.spacer{flex:1 1 auto}.preview-content{padding:.4em;flex-grow:1;overflow:scroll}\n"] }]
         }] });
 
-/**
- * This is a convenience base class that clients can derive from to implement
- * their CRUD form component. Particularly this class registers the change
- * detection hook which will be called when the user attempts to close the
- * form's parent container pane via the Close button on the top right.
- *
- * This button behaves like a Cancel button in a desktop app and therefore if
- * the user has entered any data in the form's controls, (determined by
- * checking form.touched), then a 'Lose Changes' prompt is displayed allowing
- * the user to cancel the closure.
- *
- * The `@Component` decorator is fake to keep the VSCode angular linter quiet.
- *
- * This class can be used in two modes:
- *
- *  I. SPMatEntityCrudComponent mode
- *     This mode relies on a bridge interface that implements the
- *     SPMatEntityCrudCreateEditBridge interface to perform the entity
- *     load/create/update operations. This is the intended mode when the
- *     component is used as a part of the SPMatEntityCrudComponent to
- *     create/update an entity. This mode requires the following properties
- *     to be set:
- *       - entity: TEntity | TEntity[IdKey] | undefined (for create)
- *       - bridge: SPMatEntityCrudCreateEditBridge
- *
- *  II. Standalone mode
- *     This mode does not rely on the bridge interface and the component
- *     itself performs the entity load/create/update operations.
- *     This mode requires the following properties to be set:
- *      - entity: TEntity | TEntity[IdKey] | undefined (for create)
- *      - baseUrl: string - Base URL for CRUD operations. This URL does not
- *        include the entity id. The entity id will be appended to this URL
- *        for entity load and update operations. For create operation, this
- *        URL is used as is.
- *      - entityName: string - Name of the entity, used to parse sideloaded
- *        entity responses.
- *      - httpReqContext?: HttpContextInput - Optional HTTP context to be
- *        passed to the HTTP requests. For instance, if your app has a HTTP
- *        interceptor that adds authentication tokens to the requests based
- *        on a HttpContextToken, then you can pass that token here.
- *
- * I. SPMatEntityCrudComponent mode:
- *
- *  1. Declare a FormGroup<> type as
- *
- *      ```
- *      type MyForm = FormGroup<{
- *        name: FormControl<string>;
- *        type: FormControl<string>;
- *        notes: FormControl<string>;
- *      }>;
- *      ```
- *
- *  2. Derive your form's component class from this and implement the
- *    createForm() method returing the FormGroup<> instance that matches
- *    the FormGroup concrete type above.
- *
- *      ```
- *      class MyFormComponent extends SPMatEntityCrudFormBase<MyForm, MyEntity> {
- *        constructor() {
- *          super()
- *        }
- *        createForm() {
- *          return new FormGroup([...])
- *        }
- *      }
- *      ```
- *
- *  3. If your form's value requires manipulation before being sent to the
- *    server, override `getFormValue()` method and do it there before returning
- *    the modified values.
- *
- *  4. Wire up the form in the template as below
- *
- *      ```html
- *      @if (loadEntity$ | async) {
- *      <form [formGroup]='form'.. (ngSubmit)="onSubmit()">
- *        <button type="submit">Submit</button>
- *      </form>
- *      } @else {
- *        <div>Loading...</div>
- *      }
- *      ```
- *
- *     Here `loadEntity$` is an Observable<boolean> that upon emission of `true`
- *     indicates that the entity has been loaded from server (in case of edit)
- *     and the form is ready to be displayed. Note that if the full entity was
- *     passed in the `entity` input property, then no server load is necessary
- *     and the form will be created immediately.
- *
- *  5. In the parent component that hosts the SPMatEntityCrudComponent, set
- *     the `entity` and `bridge` input properties of this component to
- *     appropriate values. For instance, if your form component has the
- *     selector `app-my-entity-form`, then the parent component's template
- *     will have:
- *
- *    ```html
- *   <sp-mat-entity-crud
- *    ...
- *    createEditFormTemplate="entityFormTemplate"
- *   ></sp-mat-entity-crud>
- *   <ng-template #entityFormTemplate let-data="data">
- *    <app-my-entity-form
- *      [entity]="data.entity"
- *      [bridge]="data.bridge"
- *    ></app-my-entity-form>
- *   </ng-template>
- *  ```
- *
- *  II. Standalone mode
- *
- * 1..4. Same as above, except set the required `bridge` input to `undefined`.
- * 5. Initialize the component's inputs `baseUrl` and `entityName` with the
- *    appropriate values. If you would like to pass additional HTTP context to
- *    the HTTP requests, then set the `httpReqContext` input as well.
- *    If the entity uses an id key other than 'id', then set the `idKey` input
- *    to the appropriate id key name.
- * 6. If you want to retrieve the created/updated entity after the create/update
- *    operation, override the `onPostCreate()` and/or `onPostUpdate()` methods
- *    respectively.
- */
-class SPMatEntityCrudFormBase {
-    entity = input.required();
-    bridge = input.required();
-    params = input();
-    // --- BEGIN inputs used when `bridge` input is undefined
-    // Entity name, which is used to parse sideloaded entity responses
-    entityName = input();
-    // Base CRUD URL, which is the GET-list-of-entities/POST-to-create
-    // URL. Update URL will be derived from this ias `baseUrl()/${TEntity[IdKey]}`
-    baseUrl = input();
-    // Additional request context to be passed to the request
-    httpReqContext = input();
-    // ID key, defaults to 'id'
-    idKey = input('id');
-    // -- END inputs used when `bridge` input is undefined
-    // IMPLEMENTATION
-    loadEntity$;
-    _entity = signal(undefined);
-    sub$ = new Subscription();
-    // Store for internal form signal. form() is computed from this.
-    _form = signal(undefined);
-    // Force typecast to TFormGroup so that we can use it in the template
-    // without having to use the non-nullable operator ! with every reference
-    // of form(). In any case the form() signal is always set in ngOnInit()
-    // method after the form is created. And if form() is not set, then there
-    // will be errors while loading the form in the template.
-    form = computed(() => this._form());
-    transloco = inject(TranslocoService);
-    cdr = inject(ChangeDetectorRef);
-    http = inject(HttpClient);
-    canCancelEdit = () => {
-        return this._canCancelEdit();
-    };
-    _canCancelEdit() {
-        const form = this._form();
-        if (form && form.touched) {
-            return window.confirm(this.transloco.translate('spMatEntityCrud.loseChangesConfirm'));
-        }
-        return true;
-    }
-    ngOnInit() {
-        // validate inputs. Either bridge or (baseUrl and entityName) must be
-        // defined.
-        if (!this.bridge() && (!this.baseUrl() || !this.entityName())) {
-            throw new Error('SPMatEntityCrudFormBase: baseUrl and entityName inputs must be defined in standalone mode.');
-        }
-        this.loadEntity$ = (typeof this.entity() === 'object' || this.entity() === undefined
-            ? new Observable((subscriber) => {
-                subscriber.next(this.entity());
-                subscriber.complete();
-            })
-            : this.load(this.entity())).pipe(map((resp) => {
-            const compositeEntity = this.getEntityFromLoadResponse(resp);
-            this._entity.set(compositeEntity);
-            this._form.set(this.createForm(compositeEntity));
-            const bridge = this.bridge();
-            if (bridge && bridge.registerCanCancelEditCallback) {
-                bridge.registerCanCancelEditCallback(this.canCancelEdit);
-            }
-            return true;
-        }));
-    }
-    ngOnDestroy() {
-        this.sub$.unsubscribe();
-    }
-    /**
-     * Additional parameters for loading the entity, in case this.entity() value
-     * is of type TEntity[IdKey].
-     * @returns
-     */
-    getLoadEntityParams() {
-        return '';
-    }
-    /**
-     * Return the TEntity object from the response returned by the
-     * load() method. Typically entity load returns the actual
-     * entity object itself. In some cases, where response is sideloaded, the
-     * default implementation here uses the `sideloadToComposite()` utility to
-     * extract the entity from the response after merging (inplace) the
-     * sideloaded data into a composite.
-     *
-     * If you have a different response shape, or if your sideloaded object
-     * response requires custom custom `sideloadDataMap`, override this method
-     * and implement your custom logic to extract the TEntity object from the
-     * response.
-     * @param resp
-     * @returns
-     */
-    getEntityFromLoadResponse(resp) {
-        if (!resp || typeof resp !== 'object') {
-            return undefined;
-        }
-        const entityName = this.entityName();
-        if (resp.hasOwnProperty(this.getIdKey())) {
-            return resp;
-        }
-        else if (entityName && resp.hasOwnProperty(entityName)) {
-            // const sideloadDataMap = this.sideloadDataMap();
-            return sideloadToComposite(resp, this.entityName(), this.getIdKey());
-        }
-        return undefined;
-    }
-    /**
-     * Override to customize the id key name if it's not 'id'
-     * @returns The name of the unique identifier key that will be used to
-     * extract the entity's id for UPDATE operation.
-     */
-    getIdKey() {
-        const bridge = this.bridge();
-        if (bridge) {
-            return bridge.getIdKey();
-        }
-        return this.idKey();
-    }
-    /**
-     * Return the form's value to be sent to server as Create/Update CRUD
-     * operation data.
-     * @returns
-     */
-    getFormValue() {
-        const form = this.form();
-        return form ? form.value : undefined;
-    }
-    onSubmit() {
-        const value = this.getFormValue();
-        const obs = !this._entity()
-            ? this.create(value)
-            : this.update(this._entity()[this.getIdKey()], value);
-        this.sub$.add(obs
-            ?.pipe(tap(entity => this._entity() ? this.onPostUpdate(entity) : this.onPostCreate(entity)), setServerErrorsAsFormErrors(this._form(), this.cdr))
-            .subscribe());
-    }
-    onPostCreate(entity) {
-        /* empty */
-    }
-    onPostUpdate(entity) {
-        /* empty */
-    }
-    /**
-     * Loads the entity if `this.entity()` is of type TEntity[IdKey]. If `bridge`
-     * input is defined, then it's `loadEntity()` method is used to load the
-     * entity. Otherwise, then this method attempts to load the entity using
-     * HTTP GET from the URL derived from `baseUrl` input.
-     * @param entityId
-     * @param params
-     * @returns
-     */
-    load(entityId) {
-        const bridge = this.bridge();
-        const params = this.getLoadEntityParams();
-        if (bridge) {
-            return bridge.loadEntity(entityId, params);
-        }
-        // Try to load using baseUrl.
-        if (!this.baseUrl()) {
-            console.warn(`SPMatEntityCrudFormBase.load: No bridge defined, baseUrl input is undefined. Returning undefined.`);
-            return new Observable((subscriber) => {
-                subscriber.next(undefined);
-                subscriber.complete();
-            });
-        }
-        let context = new HttpContext();
-        if (this.httpReqContext()) {
-            context = convertHttpContextInputToHttpContext(context, this.httpReqContext());
-        }
-        const url = this.getEntityUrl(entityId);
-        return this.http
-            .get(this.getEntityUrl(entityId), {
-            params: typeof params === 'string'
-                ? new HttpParams({ fromString: params })
-                : params,
-            context: context,
-        })
-            .pipe(map((resp) => this.getEntityFromLoadResponse(resp)));
-    }
-    /**
-     * Create a new entity using the bridge if defined, otherwise using HTTP
-     * POST to the `baseUrl`.
-     * @param values
-     * @returns
-     */
-    create(values) {
-        const bridge = this.bridge();
-        if (bridge) {
-            return bridge.create(values);
-        }
-        const url = this.baseUrl();
-        if (!url) {
-            console.warn('SPMatEntityCrudFormBase.create: Cannot create entity as neither bridge nor baseUrl inputs are provided.');
-            return of(undefined);
-        }
-        const httpReqContext = this.httpReqContext();
-        let context = new HttpContext();
-        if (httpReqContext) {
-            context = convertHttpContextInputToHttpContext(context, httpReqContext);
-        }
-        return this.http
-            .post(url, values, { context: context })
-            .pipe(map((resp) => this.getEntityFromLoadResponse(resp)));
-    }
-    /**
-     * Update an existing entity using the bridge if defined, otherwise using HTTP
-     * PATCH to the URL derived from `baseUrl` and the entity id.
-     * @param id
-     * @param values
-     * @returns
-     */
-    update(id, values) {
-        const bridge = this.bridge();
-        if (bridge) {
-            return bridge.update(id, values);
-        }
-        const url = this.baseUrl();
-        if (!url) {
-            console.warn('SPMatEntityCrudFormBase.update: Cannot update entity as neither bridge nor baseUrl inputs are provided.');
-            return of(undefined);
-        }
-        return this.http
-            .patch(this.getEntityUrl(id), values)
-            .pipe(map((resp) => this.getEntityFromLoadResponse(resp)));
-    }
-    getEntityUrl(entityId) {
-        const bridge = this.bridge();
-        if (bridge) {
-            return bridge.getEntityUrl(entityId);
-        }
-        const baseUrl = this.baseUrl();
-        if (baseUrl) {
-            const urlParts = baseUrl.split('?');
-            return `${urlParts[0]}${String(entityId)}/${urlParts[1] ? '?' + urlParts[1] : ''}`;
-        }
-        console.warn('SPMatEntityCrudFormBase.getEntityUrl: Cannot determine entity URL as neither baseUrl nor bridge inputs are provided.');
-        return '';
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.6", type: SPMatEntityCrudFormBase, isStandalone: false, selector: "_#_sp-mat-entity-crud-form-base_#_", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, bridge: { classPropertyName: "bridge", publicName: "bridge", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null }, httpReqContext: { classPropertyName: "httpReqContext", publicName: "httpReqContext", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '_#_sp-mat-entity-crud-form-base_#_',
-                    template: ``,
-                    standalone: false,
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SPMatEntityCrudComponent, SPMatEntityCrudFormBase, SPMatEntityCrudPreviewPaneComponent, SP_MAT_ENTITY_CRUD_CONFIG, SP_MAT_ENTITY_CRUD_HTTP_CONTEXT };
+export { SPMatEntityCrudComponent, SPMatEntityCrudFormBase, SPMatEntityCrudPreviewPaneComponent, SP_MAT_ENTITY_CRUD_CONFIG, SP_MAT_ENTITY_CRUD_HTTP_CONTEXT, convertHttpContextInputToHttpContext };
 //# sourceMappingURL=smallpearl-ngx-helper-mat-entity-crud.mjs.map