@smartbit4all/ng-client 7.0.9 → 7.1.0

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, signal, Injector, ViewChild, ViewChildren, effect, afterNextRender, NgZone, forwardRef, Pipe, ChangeDetectionStrategy, ViewEncapsulation, EnvironmentInjector, EventEmitter, Output, ApplicationRef, viewChild, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, signal, Injector, ViewChild, ViewChildren, effect, afterNextRender, NgZone, forwardRef, Pipe, ChangeDetectionStrategy, ViewEncapsulation, SkipSelf, NgModule, EnvironmentInjector, EventEmitter, Output, ApplicationRef, viewChild, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -10,6 +10,7 @@ import { enUS, hu } from 'date-fns/locale';
 import { isPlatformBrowser, NgClass, NgTemplateOutlet, NgStyle, AsyncPipe, KeyValuePipe, DatePipe, Location, NgIf, NgForOf } from '@angular/common';
 import { Subject, lastValueFrom, tap, takeUntil, throwError, from, interval, startWith, map, distinctUntilChanged, catchError as catchError$1 } from 'rxjs';
 import { catchError, switchMap, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { deepEqual } from 'fast-equals';
 import { MatButton, MatIconButton, MatMiniFabButton } from '@angular/material/button';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIconRegistry, MatIcon } from '@angular/material/icon';
@@ -22,7 +23,6 @@ import { Validators, UntypedFormGroup, UntypedFormControl, NG_VALUE_ACCESSOR, Fo
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip } from '@angular/material/chips';
-import { deepEqual } from 'fast-equals';
 import { set } from 'date-fns';
 import { Overlay, OverlayPositionBuilder, ScrollDispatcher } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -43,7 +43,6 @@ import { MatMenuTrigger, MatContextMenuTrigger, MatMenu, MatMenuItem } from '@an
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatDivider } from '@angular/material/divider';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
 import { NestedTreeControl, FlatTreeControl } from '@angular/cdk/tree';
 import { MatTreeNestedDataSource, MatTree, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeOutlet, MatTreeFlattener, MatTreeFlatDataSource, MatTreeNode, MatTreeNodePadding } from '@angular/material/tree';
@@ -2725,6 +2724,18 @@ var MessageType;
  * Do not edit the class manually.
  */
 
+/**
+ * View API
+ * View API
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
 /**
  * View API
  * View API
@@ -2916,18 +2927,6 @@ var UiActionInputType;
  * Do not edit the class manually.
  */
 
-/**
- * View API
- * View API
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
 /**
  * View API
  * View API
@@ -3935,6 +3934,15 @@ class SmartViewContextService {
         this.openSmartLink = new Subject();
         this.isOpeningSmartLink = false;
         this.dialogRefs = [];
+        this.modelSyncParticipants = new Map();
+        /**
+         * Each view's data as last synced with the backend, a copy. A view whose data is deep-equal
+         * to its copy is left out of the next call; a view without a copy is always sent.
+         */
+        this.syncedModels = new Map();
+        /** The seq of the envelope (or push) each copy came from, so a late completion cannot roll it back. */
+        this.syncedSeq = new Map();
+        this.modelSyncSeq = 0;
         this.embeddedContainers = new Map();
         this.embeddedViewRefs = [];
         this.pendingEmbeddedViews = [];
@@ -4035,33 +4043,138 @@ class SmartViewContextService {
         }
         this.embeddedViewRefs = this.embeddedViewRefs.filter((ref) => !orphaned.includes(ref));
     }
-    getCompositeModel(containerUuid) {
-        const result = {};
-        const children = this.embeddedViewRefs.filter((ref) => ref.containerUuid === containerUuid);
-        for (const child of children) {
-            result[child.uuid] = child.componentRef.instance.getModel();
-            Object.assign(result, this.getCompositeModel(child.uuid));
-        }
-        return result;
-    }
-    submitEmbeddedForms(containerUuid, validate) {
+    /**
+     * Validates the forms of the views embedded under the container, transitively, and collects
+     * their invalid fields into one list for the container's snackbar.
+     */
+    validateEmbeddedForms(containerUuid) {
         const allInvalidKeys = [];
         const allInvalidNames = [];
         const children = this.embeddedViewRefs.filter((ref) => ref.containerUuid === containerUuid);
         for (const child of children) {
             const instance = child.componentRef.instance;
-            instance.submitForm(validate);
-            if (validate) {
-                const invalid = instance.getInvalidFields();
-                allInvalidKeys.push(...invalid.invalidFieldKeys);
-                allInvalidNames.push(...invalid.invalidFieldNames);
-            }
-            const nested = this.submitEmbeddedForms(child.uuid, validate);
+            instance.submitForm(true);
+            const invalid = instance.getInvalidFields();
+            allInvalidKeys.push(...invalid.invalidFieldKeys);
+            allInvalidNames.push(...invalid.invalidFieldNames);
+            const nested = this.validateEmbeddedForms(child.uuid);
             allInvalidKeys.push(...nested.invalidFieldKeys);
             allInvalidNames.push(...nested.invalidFieldNames);
         }
         return { invalidFieldKeys: allInvalidKeys, invalidFieldNames: allInvalidNames };
     }
+    // #region model sync
+    joinModelSync(uuid, participant) {
+        this.modelSyncParticipants.set(uuid, participant);
+    }
+    /**
+     * Only the participant that is registered under the uuid leaves: a component destroyed after
+     * its successor joined under the same uuid must not take the successor with it.
+     */
+    leaveModelSync(uuid, participant) {
+        if (this.modelSyncParticipants.get(uuid) !== participant) {
+            return;
+        }
+        this.modelSyncParticipants.delete(uuid);
+        this.syncedModels.delete(uuid);
+        this.syncedSeq.delete(uuid);
+    }
+    /**
+     * Records what the backend's model just told the view as in sync. Without keys the view's
+     * whole data is the backend's (initial load, a whole-model push) and becomes the copy. With
+     * keys only those paths of the data were pushed: they are written into the copy, and whatever
+     * else the view holds keeps its standing — an edit written into the data outside the form
+     * while a call was in flight stays unsynced. A view without a copy has nothing to update.
+     */
+    markModelSynced(uuid, keys) {
+        const participant = this.modelSyncParticipants.get(uuid);
+        if (!participant) {
+            return;
+        }
+        if (!keys) {
+            this.syncedModels.set(uuid, this.cloneModel(uuid, participant.getModel()));
+        }
+        else {
+            const copy = this.syncedModels.get(uuid);
+            const model = participant.getModel();
+            if (copy === undefined || copy === null || model === undefined || model === null) {
+                return;
+            }
+            for (const key of keys) {
+                setDeep(copy, key, this.cloneModel(uuid, getDeep(model, key)));
+            }
+        }
+        this.syncedSeq.set(uuid, this.modelSyncSeq);
+    }
+    cloneModel(uuid, model) {
+        try {
+            return structuredClone(model);
+        }
+        catch (err) {
+            const path = uncloneablePath(model);
+            throw new Error(`Model sync: the data of view ${uuid} cannot be cloned` +
+                (path ? ` (at ${path})` : '') +
+                `: ${err.message}`);
+        }
+    }
+    /**
+     * The envelope of the next backend call: the data of every open view that differs from its
+     * last synced copy. Forms are flushed into their data first, so an unsaved field value is
+     * part of what is compared and sent. The envelope is always present, that is what tells the
+     * backend it talks to a client that syncs; a view absent from it means "unchanged".
+     *
+     * The copies taken here become the synced copies when the call succeeds
+     * ({@link completeModelSync}), not the data at response time: what the user types while the
+     * call is in flight must count as unsynced.
+     */
+    beginModelSync() {
+        const models = {};
+        const snapshots = new Map();
+        for (const [uuid, participant] of this.modelSyncParticipants) {
+            participant.submitForm(false);
+            const model = participant.getModel();
+            if (model === undefined || model === null) {
+                continue;
+            }
+            if (this.syncedModels.has(uuid) && deepEqual(model, this.syncedModels.get(uuid))) {
+                continue;
+            }
+            const snapshot = this.cloneModel(uuid, model);
+            models[uuid] = snapshot;
+            snapshots.set(uuid, snapshot);
+        }
+        return { modelSync: { models }, snapshots, seq: ++this.modelSyncSeq };
+    }
+    /**
+     * Calls run concurrently, so an envelope built earlier may complete later: its copies are
+     * older than what a later envelope or push already settled, and are not written back.
+     */
+    completeModelSync(pending) {
+        for (const [uuid, snapshot] of pending.snapshots) {
+            if (!this.modelSyncParticipants.has(uuid)) {
+                continue;
+            }
+            if ((this.syncedSeq.get(uuid) ?? -1) > pending.seq) {
+                continue;
+            }
+            this.syncedModels.set(uuid, snapshot);
+            this.syncedSeq.set(uuid, pending.seq);
+        }
+    }
+    /**
+     * Runs a backend call on a model sync carrier: a request that can bring the models (a
+     * `UiActionRequest`, a `GridSelectionChange`). The envelope goes onto the carrier, the call
+     * runs with it, and a successful call settles the copies the envelope was built from. What
+     * happens to the response is the caller's business.
+     */
+    async withModelSync(carrier, call) {
+        const pending = this.beginModelSync();
+        carrier.modelSync = pending.modelSync;
+        const viewContextChange = await call(carrier);
+        this.completeModelSync(pending);
+        return viewContextChange;
+    }
+    // #endregion
     unregisterEmbeddedSlot(containerUuid, containerId) {
         const innerMap = this.embeddedContainers.get(containerUuid);
         if (innerMap) {
@@ -4355,7 +4468,11 @@ class SmartViewContextService {
                             .afterClosed()
                             .pipe(takeUntil(this._destroy$))
                             .subscribe(() => {
-                            this.performAction(view.uuid, { code: DefaultUiActionCode_CLOSE, params: {} });
+                            // A close the backend ordered (closeView) has already left dialogRefs; only the
+                            // user's own close is an action the backend has yet to hear about.
+                            if (this.dialogRefs.some((ref) => ref.uuid === view.uuid)) {
+                                this.performAction(view.uuid, { code: DefaultUiActionCode_CLOSE, params: {} });
+                            }
                         });
                     }
                 }
@@ -4424,9 +4541,9 @@ class SmartViewContextService {
         if (view.type === ViewType.DIALOG) {
             let dialogRef = this.dialogRefs.find((dialogRef) => dialogRef.uuid === view.uuid);
             if (dialogRef) {
-                dialogRef.dialogRef.close();
                 let index = this.dialogRefs.indexOf(dialogRef);
                 this.dialogRefs.splice(index, 1);
+                dialogRef.dialogRef.close();
             }
             else {
                 // console.log('DialogRef is not found by uuid.');
@@ -4801,47 +4918,28 @@ class SmartViewContextService {
             content,
         });
     }
-    async dataChanged(uuid, dataChange) {
-        return await this._dataChanged({ uuid, dataChange });
-        // const isCompleted = new Subject<void>();
-        // this.apiQueueService.addToQueue(
-        //   {
-        //     callback: this._dataChanged.bind(this),
-        //     config: {
-        //       uuid,
-        //       dataChange,
-        //     },
-        //     isCompleted,
-        //   },
-        //   true
-        // );
-        // return await isCompleted.toPromise();
-    }
     async _performAction(config) {
-        return await this.handlePerformActionResponse(await this.view.performAction(config.uuid, config.uiActionRequest).toPromise());
+        return await this.handlePerformActionResponse(await this.withModelSync(config.uiActionRequest, () => this.view.performAction(config.uuid, config.uiActionRequest).toPromise()));
     }
     async _performWidgetAction(config) {
-        return await this.handlePerformActionResponse(await this.view
+        return await this.handlePerformActionResponse(await this.withModelSync(config.uiActionRequest, () => this.view
             .performWidgetAction(config.uuid, config.widgetId, config.nodeId, config.uiActionRequest)
-            .toPromise());
+            .toPromise()));
     }
     async _performWidgetMainAction(config) {
-        return await this.handlePerformActionResponse(await this.view
+        return await this.handlePerformActionResponse(await this.withModelSync(config.uiActionRequest, () => this.view
             .performWidgetMainAction(config.uuid, config.widgetId, config.uiActionRequest)
-            .toPromise());
+            .toPromise()));
     }
     async _performUploadAction(config) {
-        return await this.handlePerformActionResponse(await this.view
+        return await this.handlePerformActionResponse(await this.withModelSync(config.uiActionRequest, () => this.view
             .uploadAction(config.uuid, JSON.stringify(config.uiActionRequest), config.param, config.content)
-            .toPromise());
+            .toPromise()));
     }
     async _performUploadMultipleAction(config) {
-        return await this.handlePerformActionResponse(await this.view
+        return await this.handlePerformActionResponse(await this.withModelSync(config.uiActionRequest, () => this.view
             .uploadMultipleAction(config.uuid, JSON.stringify(config.uiActionRequest), config.param, config.content)
-            .toPromise());
-    }
-    async _dataChanged(config) {
-        return await this.handlePerformActionResponse(await this.view.dataChanged(config.uuid, config.dataChange).toPromise());
+            .toPromise()));
     }
     async handlePerformActionResponse(viewContextChange) {
         this.viewContext = viewContextChange?.viewContext;
@@ -4881,6 +4979,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
+/** Reads the value at a dotted path; a missing segment yields undefined. */
+function getDeep(model, key) {
+    let value = model;
+    for (const segment of key.split('.')) {
+        if (value === undefined || value === null) {
+            return undefined;
+        }
+        value = value[segment];
+    }
+    return value;
+}
+/** Writes the value at a dotted path, creating the objects on the way. */
+function setDeep(model, key, value) {
+    const segments = key.split('.');
+    let target = model;
+    for (const segment of segments.slice(0, -1)) {
+        if (target[segment] === undefined || target[segment] === null) {
+            target[segment] = {};
+        }
+        target = target[segment];
+    }
+    target[segments[segments.length - 1]] = value;
+}
+/** The first path in the value that structuredClone refuses (a function, a DOM node), if any. */
+function uncloneablePath(value, path = '') {
+    if (typeof value === 'function' || typeof value === 'symbol') {
+        return path || '<root>';
+    }
+    if (typeof Node !== 'undefined' && value instanceof Node) {
+        return path || '<root>';
+    }
+    if (value !== null && typeof value === 'object' && !(value instanceof Date)) {
+        for (const [k, v] of Object.entries(value)) {
+            const found = uncloneablePath(v, path ? `${path}.${k}` : k);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+}
 const IS_ASYNC_PARAM_NAME = 'isAsync';
 class ApiQueueService {
     constructor() {
@@ -5133,6 +5272,10 @@ const UI_ACTION_CONFIRM_DIALOG_SERVICE = new InjectionToken('UI_ACTION_CONFIRM_D
 const UI_ACTION_INPUT_DIALOG_SERVICE = new InjectionToken('UI_ACTION_INPUT_DIALOG_SERVICE');
 const UI_ACTION_FILE_UPLOAD_DIALOG_SERVICE = new InjectionToken('UI_ACTION_FILE_UPLOAD_DIALOG_SERVICE');
 
+/** A view's own client, as opposed to an executor standing in for another API. */
+function isViewClient(executor) {
+    return typeof executor.uuid === 'string';
+}
 class UiActionService {
     constructor() {
         this.confirmDialogService = inject(UI_ACTION_CONFIRM_DIALOG_SERVICE);
@@ -5168,14 +5311,14 @@ class UiActionService {
             identifier: uiAction.identifier,
             params: uiAction.params ?? {},
         };
-        if (uiAction.submit || uiAction.model) {
-            // submit: with validation, model: without validation. both can be undefined
-            const validate = uiAction.submit || !uiAction.model;
-            executor.submitForm(validate);
+        // submit: validate before sending, the embedded views' forms included. The model itself
+        // travels by model sync whatever the flags say; the deprecated `model` flag only keeps
+        // flushing the form of an executor that is not a view.
+        if (uiAction.submit) {
+            executor.submitForm(true);
             let invalidFields = executor.getInvalidFields();
-            const containerUuid = executor.uuid;
-            if (uiAction.composite && containerUuid) {
-                const embeddedInvalid = this.viewContext.submitEmbeddedForms(containerUuid, validate);
+            if (isViewClient(executor)) {
+                const embeddedInvalid = this.viewContext.validateEmbeddedForms(executor.uuid);
                 invalidFields = {
                     invalidFieldKeys: [...invalidFields.invalidFieldKeys, ...embeddedInvalid.invalidFieldKeys],
                     invalidFieldNames: [
@@ -5184,11 +5327,14 @@ class UiActionService {
                     ],
                 };
             }
-            if (validate && invalidFields.invalidFieldKeys.length) {
+            if (invalidFields.invalidFieldKeys.length) {
                 this.showInvalidFieldsSnackbar(invalidFields);
                 return;
             }
         }
+        else if (uiAction.model && !isViewClient(executor)) {
+            executor.submitForm(false);
+        }
         if (uiAction.confirm) {
             this.confirmDialogService.action = uiAction;
             this.confirmDialogService.openDialog();
@@ -5293,26 +5439,10 @@ class UiActionService {
         return uiActionRequest;
     }
     async performAction(uiAction, uiActionRequest, uiActionModel, executor, options) {
-        if (!uiActionRequest.params ||
-            (uiActionRequest.params && !Object.keys(uiActionRequest.params).length)) {
-            uiActionRequest.params = {
-                model: executor.getModel(),
-            };
-        }
-        else if (uiAction.submit || uiAction.model) {
-            if (options?.widgetId && options?.nodeId) {
-                uiActionRequest.params['clientPageModel'] = { data: executor.getModel() };
-            }
-            else {
-                uiActionRequest.params['model'] = executor.getModel();
-            }
-        }
-        if (uiAction.composite) {
-            const containerUuid = executor.uuid;
-            if (containerUuid) {
-                uiActionRequest.params['compositeModel'] =
-                    this.viewContext.getCompositeModel(containerUuid);
-            }
+        // A view's model goes by model sync (SmartViewContextService). An executor that is not a
+        // view (tree, filter editor) has no view to sync, so its model still rides on the request.
+        if (!isViewClient(executor) && (uiAction.submit || uiAction.model)) {
+            uiActionRequest.params['model'] = executor.getModel();
         }
         try {
             await executor.performUiActionRequest(uiActionRequest, options?.widgetId, options?.nodeId);
@@ -6418,6 +6548,14 @@ class SmartFormService {
         this.revision = this.revisionState.asReadonly();
         this.emptyKey = 'e#m%p@t*y';
         this.group = {};
+        /**
+         * The model value each control last agreed with, by control key: what the control was built
+         * or refreshed from, or what it last wrote into the data. A control whose value still equals
+         * it holds no edit of the user's, and a data value that no longer equals it was changed by
+         * the backend. The form's own dirty flag is not this: it lives until the form is rebuilt and
+         * says nothing about what the data holds.
+         */
+        this.exchanged = new Map();
         this.regexRegexChars = new RegExp(/[\.\-\[\]\/\{\}\(\)\+\^\$\\\|]/g);
         this.regexAsteriskInTheMiddle = new RegExp(/([^\*])\*([^\*])/g);
         this.regexAsteriskInTheEnd = new RegExp(/([^\*])\*$/g);
@@ -6432,6 +6570,10 @@ class SmartFormService {
     widgetsChanged() {
         this.revisionState.update((revision) => revision + 1);
     }
+    /** Forgets the agreed values; the form is being rebuilt from the model. */
+    resetExchangedValues() {
+        this.exchanged.clear();
+    }
     getSmartFormWidgetByKey(key) {
         return this.findSmartFormWidgetByKey(this.smartForm?.widgets, key);
     }
@@ -6556,6 +6698,12 @@ class SmartFormService {
                 widget = this.findSmartFormWidgetByKey(widgets, key);
                 if (widget) {
                     let value = this.getValueDeeply(data, key);
+                    // A data value the control already agreed with was not pushed: the control keeps
+                    // what it shows, which may be the user's edit.
+                    if (this.exchanged.has(key) && deepEqual(value, this.exchanged.get(key))) {
+                        continue;
+                    }
+                    this.exchanged.set(key, structuredClone(value));
                     if (widget.type === SmartFormWidgetType.CHECK_BOX && typeof value !== 'boolean') {
                         value = value === 'true';
                     }
@@ -6575,6 +6723,8 @@ class SmartFormService {
                         if (widget.showLabel === undefined && smartForm.showLabel) {
                             widget.showLabel = true;
                         }
+                        // The backend changed this field: its value reaches the control even over an edit.
+                        this.group[key]?.setValue(value ?? '', { emitEvent: false });
                     }
                     this.copyFromValueSetToValuesList(widget, smartForm.componentModel.valueSets);
                 }
@@ -6734,7 +6884,7 @@ class SmartFormService {
             formControl = new UntypedFormControl();
             this.group[key] = formControl;
         }
-        formControl.setValue(value || '', { emitEvent: false });
+        formControl.setValue(value ?? '', { emitEvent: false });
         formControl.clearValidators();
         validators?.map((validator) => {
             formControl.addValidators(validator.validator);
@@ -6800,15 +6950,29 @@ class SmartFormService {
             }
         });
     }
+    /**
+     * Copies the user's edits from the controls into the data: only a control whose value differs
+     * from what it last agreed with writes, typed as the data holds the field. Nothing is
+     * submitted; a control the user never touched leaves its field as the backend sent it.
+     */
     toSmartForm(group) {
         if (this.smartForm) {
             this.copyValueFromFormToWidgetBeans(this.smartForm.widgets, group);
             const data = this.smartForm.componentModel?.data;
             if (data) {
                 for (const key of this.getPropertyNamesDeeply(data)) {
-                    if (group.controls[key]) {
-                        this.setValueDeeply(data, key, group.controls[key].value);
+                    if (!group.controls[key]) {
+                        continue;
+                    }
+                    const agreed = this.exchanged.has(key)
+                        ? this.exchanged.get(key)
+                        : this.getValueDeeply(data, key);
+                    const value = coerceToTypeOf(agreed, group.controls[key].value);
+                    if (this.exchanged.has(key) && deepEqual(value, agreed)) {
+                        continue;
                     }
+                    this.setValueDeeply(data, key, value);
+                    this.exchanged.set(key, structuredClone(this.getValueDeeply(data, key)));
                 }
             }
         }
@@ -6820,12 +6984,14 @@ class SmartFormService {
         }
         let originalModel = this.smartForm.componentModel.data;
         let copyOfModel = { ...originalModel };
+        const exchangedBefore = new Map(this.exchanged);
         // copyOfModel should be the current model
         this.smartForm.componentModel.data = copyOfModel;
         // copy value from FormGroup into model
         this.toSmartForm(group);
         let newModel = this.smartForm.componentModel.data;
         this.smartForm.componentModel.data = originalModel;
+        this.exchanged = exchangedBefore;
         return newModel;
     }
     applyComponentConstraints(widgets, constraints) {
@@ -7002,6 +7168,32 @@ function extractTime(widgetInstance) {
     }
     return time;
 }
+/**
+ * A control's value in the type its field has in the data. The controls of a boolean or a
+ * number shown as text hold strings; the data keeps the field's type across a round trip.
+ */
+function coerceToTypeOf(reference, value) {
+    if (typeof reference === 'boolean') {
+        if (value === 'true') {
+            return true;
+        }
+        if (value === 'false') {
+            return false;
+        }
+        if (value === '') {
+            return null;
+        }
+    }
+    else if (typeof reference === 'number') {
+        if (value === '') {
+            return null;
+        }
+        if (typeof value === 'string' && value.trim() !== '' && !isNaN(Number(value))) {
+            return Number(value);
+        }
+    }
+    return value;
+}
 
 /*
  * Public API Surface of component-factory-service
@@ -10761,6 +10953,7 @@ class SmartformComponent {
         if (!this.originalWidgets || this.originalWidgets.length === 0) {
             this.originalWidgets = this.smartForm.widgets;
         }
+        this.service.resetExchangedValues();
         this.service.setValuesFromModel(this.originalWidgets);
         this.service.applyConstraints(this.originalWidgets);
         this.smartForm.widgets = this.service.filterWidgetsByVisibility(this.originalWidgets);
@@ -11243,6 +11436,8 @@ class SmartGridToolbarActionsUtil {
     }
 }
 
+/** Id of the detail row's collapse animation, so a second leave call can find the running one. */
+const DETAIL_COLLAPSE = 'smart-table-detail-collapse';
 class Table {
     constructor() {
         this.cfService = inject(ComponentFactoryService);
@@ -11252,6 +11447,8 @@ class Table {
         this.smartTableButtonType = SmartTableButtonType;
         this.highlightedRows = [];
         this.sortEvent = new Subject();
+        /** The `when` predicate of the detail row definition. */
+        this.isExpandedRow = (_index, row) => row === this.expandedElement;
         // Cells to UiAction models, used for toolbars in cells
         this.cellToActionMap = {};
         this.onSelectionChanged = new Subject();
@@ -11260,15 +11457,45 @@ class Table {
         // ---- Toolbar ----
         this.defaultActionToolbarId = SmartGridToolbarActionsUtil.defaultActionToolbarId;
         this.rowMenuActionModelArrayCache = new Map();
+        // -------------  TREE_GRID -------------
+        this.expandedRowIds = new Set();
+        this.visibleRows = [];
+        this.rowsById = new Map();
+        this.isTreeGrid = false;
+        this.treeInitialized = false;
     }
     /** The address of the toolbar in this grid's header; `undefined` while it has no id. */
     get headerToolbarId() {
         return headerToolbarAddress(this.smartTable?.getGridId());
     }
+    /**
+     * `animate.leave` of the detail row: collapses the detail the way it expanded, then lets
+     * the row go. A class on the detail itself would not do — the row is what leaves, and
+     * Angular does not look for leave animations behind the `mat-row` component boundary.
+     * Angular calls this once for detaching and once for destroying the row; both wait for
+     * the one animation.
+     */
+    onDetailRowLeave(event) {
+        const detail = event.target.querySelector('.smart-table-detail');
+        if (!detail) {
+            event.animationComplete();
+            return;
+        }
+        const collapse = detail.getAnimations().find((animation) => animation.id === DETAIL_COLLAPSE) ??
+            detail.animate([{ gridTemplateRows: '1fr' }, { gridTemplateRows: '0fr' }], {
+                id: DETAIL_COLLAPSE,
+                duration: 225,
+                easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                fill: 'forwards',
+            });
+        const done = () => event.animationComplete();
+        collapse.finished.then(done, done);
+    }
     ngOnInit() {
         if (this.smartTable.sortable)
             this.sortEvent = new Subject();
         this.createCellToActionMap();
+        this.calcTree();
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -11298,6 +11525,7 @@ class Table {
         this.smartTable = smartTable;
         // Pushed in by the grid rather than read from it, so nothing else marks this view. The
         // pull the rest of the library moved to (ADR-0005) is the 7.1 grid/table merge.
+        this.calcTree();
         this.changeDetector.markForCheck();
         this.renderRows();
     }
@@ -11621,24 +11849,27 @@ class Table {
         if (event) {
             event?.stopPropagation();
         }
-        let oldIndex = this.smartTable.tableRows.findIndex((element) => element === this.expandedElement);
-        if (oldIndex !== -1) {
-            let ref = this.vcRef.filter((element, index) => index === oldIndex);
-            ref[0].clear();
-        }
         this.expandedElement = this.expandedElement === element ? null : element;
-        let newIndex = this.smartTable.tableRows.findIndex((element) => element === this.expandedElement);
+        // The row definitions are re-evaluated on render only: this drops the old detail row
+        // (and the component in it) and creates the new one, then the query picks it up.
+        this.myTableChild.renderRows();
+        this.changeDetector.detectChanges();
+        if (!this.expandedElement) {
+            return;
+        }
+        const container = this.vcRef.first;
         let rowDataResponse;
-        if (newIndex !== -1) {
-            if (this.smartTable.asyncOnExpand) {
-                this.componentRef = this.cfService.createComponent(this.vcRef?.filter((element, index) => index === newIndex)[0], LoadingComponent, new Map());
-                rowDataResponse = await this.smartTable.rowExpander?.expandAsync(newIndex);
-                let ref = this.vcRef.filter((element, index) => index === newIndex)[0];
-                ref.clear();
+        if (this.smartTable.asyncOnExpand) {
+            this.componentRef = this.cfService.createComponent(container, LoadingComponent, new Map());
+            rowDataResponse = await this.smartTable.rowExpander?.expandAsync(this.smartTable.tableRows.indexOf(element));
+            // Another toggle while loading has already replaced this row's detail row.
+            if (this.expandedElement !== element) {
+                return;
             }
-            this.componentRef = this.cfService.createComponent(this.vcRef?.filter((element, index) => index === newIndex)[0], this.smartTable.expandedComponent, new Map([['rowData', rowDataResponse]]));
-            this.element = undefined;
+            container.clear();
         }
+        this.componentRef = this.cfService.createComponent(container, this.smartTable.expandedComponent, new Map([['rowData', rowDataResponse]]));
+        this.element = undefined;
     }
     setSelection(element) {
         if (this.smartTable.maxNumOfSelectableRows &&
@@ -11785,6 +12016,143 @@ class Table {
     shouldShowMenuButton(row) {
         return SmartGridToolbarActionsUtil.showMenu(row, this.smartTable.tableHeaders);
     }
+    initializeExpandedRows(rows) {
+        if (this.treeInitialized) {
+            return;
+        }
+        rows.forEach(row => {
+            if (row.id && row.children?.length) {
+                this.expandedRowIds.add(row.id);
+            }
+        });
+        this.treeInitialized = true;
+    }
+    calcTree() {
+        const rows = this.smartTable.tableRows ?? [];
+        this.isTreeGrid = rows.some(row => !!row?.children?.length || !!row?.parent);
+        if (!this.isTreeGrid) {
+            this.visibleRows = rows;
+            return;
+        }
+        // Open all rows on first tree initialization.
+        this.initializeExpandedRows(rows);
+        this.rowsById.clear();
+        rows.forEach(row => {
+            if (row.id) {
+                this.rowsById.set(row.id, row);
+            }
+        });
+        const roots = rows.filter(row => !row.parent);
+        const result = [];
+        const walk = (row) => {
+            result.push(row);
+            if (row.id &&
+                row.children?.length &&
+                this.expandedRowIds.has(row.id)) {
+                row.children
+                    .map(childId => this.rowsById.get(childId))
+                    .filter((child) => !!child)
+                    .forEach(child => walk(child));
+            }
+        };
+        roots.forEach(root => walk(root));
+        this.visibleRows = result;
+    }
+    hasChildren(row) {
+        return !!row?.children?.length;
+    }
+    isRowExpanded(row) {
+        return !!row?.id && this.expandedRowIds.has(row.id);
+    }
+    toggleRowExpansion(row, event) {
+        event?.stopPropagation();
+        if (!row?.id) {
+            return;
+        }
+        if (this.expandedRowIds.has(row.id)) {
+            this.expandedRowIds.delete(row.id);
+        }
+        else {
+            this.expandedRowIds.add(row.id);
+        }
+        this.calcTree();
+    }
+    canExpand() {
+        return this.visibleRows.some(row => this.hasChildren(row) && !this.isRowExpanded(row));
+    }
+    canCollapse() {
+        return this.expandedRowIds.size > 0;
+    }
+    expandOneLevel() {
+        let changed = false;
+        for (const row of this.visibleRows) {
+            if (row.id && this.hasChildren(row) && !this.expandedRowIds.has(row.id)) {
+                this.expandedRowIds.add(row.id);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.calcTree();
+        }
+    }
+    collapseOneLevel() {
+        let maxLevel = -1;
+        for (const row of this.visibleRows) {
+            if (row.id && this.expandedRowIds.has(row.id)) {
+                maxLevel = Math.max(maxLevel, row.level ?? 0);
+            }
+        }
+        if (maxLevel < 0) {
+            return;
+        }
+        let changed = false;
+        for (const row of this.visibleRows) {
+            if (row.id && this.expandedRowIds.has(row.id) && (row.level ?? 0) === maxLevel) {
+                this.expandedRowIds.delete(row.id);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.calcTree();
+        }
+    }
+    expandAll() {
+        let changed = false;
+        (this.smartTable.tableRows ?? []).forEach(row => {
+            if (row.id && this.hasChildren(row) && !this.expandedRowIds.has(row.id)) {
+                this.expandedRowIds.add(row.id);
+                changed = true;
+            }
+        });
+        if (changed) {
+            this.calcTree();
+        }
+    }
+    collapseAll() {
+        if (this.expandedRowIds.size === 0) {
+            return;
+        }
+        this.expandedRowIds.clear();
+        this.calcTree();
+    }
+    get expandTreeGridLevel() {
+        return {
+            title: '',
+            color: 'primary',
+            type: UiActionButtonType.MINI_FAB,
+            icon: 'add',
+            iconPosition: IconPosition.PRE,
+        };
+    }
+    get closeTreeGridLevel() {
+        return {
+            title: '',
+            color: 'primary',
+            type: UiActionButtonType.MINI_FAB,
+            icon: 'remove',
+            iconPosition: IconPosition.PRE,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Table, isStandalone: true, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultActionMenuComponents", predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
@@ -11845,23 +12213,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class MaterialTableComponent extends Table {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n  >\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n    <ng-container\n      matColumnDef=\"{{ header }}\"\n      >\n      <!-- my_menu is the implicit action column present on all tables: -->\n      @if ('my_menu' === header) {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n        </th>\n      } @else {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          @if (\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n            ) {\n            <div\n            ></div>\n          }\n          @if (header === 'select') {\n            <div>\n              @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <mat-checkbox\n                  (change)=\"$event ? toggleAllRows() : null\"\n                  [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n                  [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n                  [aria-label]=\"checkboxLabel()\"\n                  >\n                </mat-checkbox>\n              }\n              @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <div>\n                  {{ smartTable.customTableHeaders[i] }}\n                </div>\n              }\n            </div>\n          }\n          @if (\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n            ) {\n            <div\n              >\n              @if (smartTable.sortable) {\n                @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n                  <button\n                    (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n                    mat-button\n                    class=\"sortableHeaderButton\"\n                    >\n                    {{ smartTable.customTableHeaders[i] }}\n                    @if (getSortIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortIcon(header)!\"\n                      ></smart-icon>\n                    }\n                    @if (hasSortNumIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortNumIcon(header)\"\n                      ></smart-icon>\n                    }\n                  </button>\n                }\n              } @else {\n                {{ smartTable.customTableHeaders[i] }}\n              }\n            </div>\n          }\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n          ) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n            [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n            >\n          </mat-checkbox>\n        }\n        @if (\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n          ) {\n          <div\n            >\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n              <div>\n                <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n              </div>\n            }\n            @if (\n              smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n              smartTable.customSmartTableHeaders[i].properties?.icons?.length\n              ) {\n              <div\n                >\n                <smart-icon\n                  [smartTooltip]=\"getToolTip(element, i)\"\n                  [icon]=\"getIcon(getValue(element, header), i)!\"\n                  [color]=\"getColor(getValue(element, header), i)\"\n                  >\n                </smart-icon>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n            <div>\n              <smart-icon [imageResource]=\"ir\"> </smart-icon>\n            </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n          <div\n            class=\"smart-table-buttons-col\"\n            >\n            @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n              <div>\n                @if (showButton(button, element)) {\n                  <div>\n                    @switch (button.type) {\n                      @case (smartTableButtonType.ICON) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-icon-button\n                          color=\"{{ button.color }}\"\n                          >\n                          <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                        </button>\n                      }\n                      @case (smartTableButtonType.NORMAL) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      @case (smartTableButtonType.RAISED) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-raised-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      <!------ MENU ------>\n                      @case (smartTableButtonType.MENU) {\n                        <div class=\"menu-button\">\n                          <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                          <smart-ui-action-toolbar\n                            [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                            [widgetId]=\"smartTable.getGridId()\"\n                            [nodeId]=\"element.id\"\n                            [actionParams]=\"{ model: element }\"\n                          ></smart-ui-action-toolbar>\n                          <!------ GENERIC HAMBURGER ------>\n                          <!------ TOOLBAR ------>\n                          @if (shouldShowMenuButton(element)) {\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getMenuActions(element)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                          }\n                        </div>\n                      }\n                      <!------ MENU ------>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n          <div>\n            @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n              <smart-icon\n                [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                >\n              </smart-icon>\n            }\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n          ) {\n          <div\n            >\n            {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n          ) {\n          <button\n            mat-icon-button\n            aria-label=\"expand row\"\n            (click)=\"onToggle(element, $event)\"\n            >\n            @if (expandedElement !== element) {\n              <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n            }\n            @if (expandedElement === element) {\n              <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n            }\n          </button>\n        }\n        @if (\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n          !smartTable.customSmartTableHeaders[i].properties &&\n          !smartTable.customSmartTableHeaders[i].icon &&\n          !smartTable.customSmartTableHeaders[i].buttons &&\n          !smartTable.customSmartTableHeaders[i].translator &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n          ) {\n          <div\n            >\n            @if (header === 'icon') {\n              <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n            }\n            @if (header === 'img') {\n              <img\n                [src]=\"getValue(element, header)\"\n                alt=\"\"\n                class=\"smarttableImg\"\n                />\n            }\n            <!------ TOOLBAR ------>\n            @if (showCellToolbar(element, header)) {\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, header)\"\n                [widgetId]=\"smartTable.getGridId()\"\n                [nodeId]=\"element.id\"\n                [actionParams]=\"{ model: element }\"\n              ></smart-ui-action-toolbar>\n            }\n            <!------ TOOLBAR ------>\n            @if (\n              header !== 'icon' &&\n              header !== 'img' &&\n              header !== 'option' &&\n              header !== 'button' &&\n              !isImageResource(element, header)\n              ) {\n              <div\n                [innerHtml]=\"getValue(element, header)\"\n              ></div>\n            }\n          </div>\n        }\n      </td>\n    </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n        >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n      <lib-default-actions-popup\n        #defaultActionMenu\n        [buttons]=\"getDefaultActionsForRow(element)!\"\n        [row]=\"element\"\n      ></lib-default-actions-popup>\n    }\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
-            trigger('detailExpand', [
-                state('collapsed', style({ height: '0px', minHeight: '0' })),
-                state('expanded', style({ height: '*' })),
-                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n\n        <ui-action-button (actionClick)=\"expandOneLevel()\" [descriptor]=\"expandTreeGridLevel\">\n        </ui-action-button>\n\n\n        <ui-action-button (actionClick)=\"collapseOneLevel()\" [descriptor]=\"closeTreeGridLevel\">\n        </ui-action-button>\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n        }\n        @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <div>\n          {{ smartTable.customTableHeaders[i] }}\n        </div>\n        }\n      </div>\n      }\n      @if (\n      header !== 'icon' &&\n      header !== 'img' &&\n      header !== 'options' &&\n      header !== 'button' &&\n      header !== 'select' &&\n      header !== 'expand' &&\n      header !== 'actions'\n      ) {\n      <div>\n        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n          <div>\n            <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n          </div>\n          }\n          @if (\n          smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n          smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          ) {\n          <div>\n            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\n            </smart-icon>\n          </div>\n          }\n        </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n          <div>\n            <smart-icon [imageResource]=\"ir\"> </smart-icon>\n          </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n        <div class=\"smart-table-buttons-col\">\n          @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n          <div>\n            @if (showButton(button, element)) {\n            <div>\n              @switch (button.type) {\n              @case (smartTableButtonType.ICON) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              @case (smartTableButtonType.RAISED) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              <!------ MENU ------>\n              @case (smartTableButtonType.MENU) {\n              <div class=\"menu-button\">\n                <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                }\n              </div>\n              }\n              <!------ MENU ------>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n          <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div>\n          {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        ) {\n        <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n          @if (expandedElement !== element) {\n          <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n          }\n          @if (expandedElement === element) {\n          <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n          }\n        </button>\n        }\n        @if (\n        !smartTable.customSmartTableHeaders ||\n        (smartTable.customSmartTableHeaders &&\n        !smartTable.customSmartTableHeaders[i].properties &&\n        !smartTable.customSmartTableHeaders[i].icon &&\n        !smartTable.customSmartTableHeaders[i].buttons &&\n        !smartTable.customSmartTableHeaders[i].translator &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        ) {\n        <div>\n          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          <div [innerHtml]=\"getValue(element, header)\"></div>\n          }\n        </div>\n        }\n\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n        <div class=\"smart-table-detail-content\">\n          <ng-template #expandedArea></ng-template>\n        </div>\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.mat-column-my_menu,.tree-grid-column{width:0}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-material-table', animations: [
-                        trigger('detailExpand', [
-                            state('collapsed', style({ height: '0px', minHeight: '0' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-                        ]),
-                    ], imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatIconButton, MatMenuTrigger, MatMenu, MatMenuItem, MatDivider, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n  >\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n    <ng-container\n      matColumnDef=\"{{ header }}\"\n      >\n      <!-- my_menu is the implicit action column present on all tables: -->\n      @if ('my_menu' === header) {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n        </th>\n      } @else {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          @if (\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n            ) {\n            <div\n            ></div>\n          }\n          @if (header === 'select') {\n            <div>\n              @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <mat-checkbox\n                  (change)=\"$event ? toggleAllRows() : null\"\n                  [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n                  [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n                  [aria-label]=\"checkboxLabel()\"\n                  >\n                </mat-checkbox>\n              }\n              @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <div>\n                  {{ smartTable.customTableHeaders[i] }}\n                </div>\n              }\n            </div>\n          }\n          @if (\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n            ) {\n            <div\n              >\n              @if (smartTable.sortable) {\n                @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n                  <button\n                    (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n                    mat-button\n                    class=\"sortableHeaderButton\"\n                    >\n                    {{ smartTable.customTableHeaders[i] }}\n                    @if (getSortIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortIcon(header)!\"\n                      ></smart-icon>\n                    }\n                    @if (hasSortNumIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortNumIcon(header)\"\n                      ></smart-icon>\n                    }\n                  </button>\n                }\n              } @else {\n                {{ smartTable.customTableHeaders[i] }}\n              }\n            </div>\n          }\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n          ) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n            [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n            >\n          </mat-checkbox>\n        }\n        @if (\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n          ) {\n          <div\n            >\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n              <div>\n                <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n              </div>\n            }\n            @if (\n              smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n              smartTable.customSmartTableHeaders[i].properties?.icons?.length\n              ) {\n              <div\n                >\n                <smart-icon\n                  [smartTooltip]=\"getToolTip(element, i)\"\n                  [icon]=\"getIcon(getValue(element, header), i)!\"\n                  [color]=\"getColor(getValue(element, header), i)\"\n                  >\n                </smart-icon>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n            <div>\n              <smart-icon [imageResource]=\"ir\"> </smart-icon>\n            </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n          <div\n            class=\"smart-table-buttons-col\"\n            >\n            @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n              <div>\n                @if (showButton(button, element)) {\n                  <div>\n                    @switch (button.type) {\n                      @case (smartTableButtonType.ICON) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-icon-button\n                          color=\"{{ button.color }}\"\n                          >\n                          <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                        </button>\n                      }\n                      @case (smartTableButtonType.NORMAL) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      @case (smartTableButtonType.RAISED) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-raised-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      <!------ MENU ------>\n                      @case (smartTableButtonType.MENU) {\n                        <div class=\"menu-button\">\n                          <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                          <smart-ui-action-toolbar\n                            [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                            [widgetId]=\"smartTable.getGridId()\"\n                            [nodeId]=\"element.id\"\n                            [actionParams]=\"{ model: element }\"\n                          ></smart-ui-action-toolbar>\n                          <!------ GENERIC HAMBURGER ------>\n                          <!------ TOOLBAR ------>\n                          @if (shouldShowMenuButton(element)) {\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getMenuActions(element)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                          }\n                        </div>\n                      }\n                      <!------ MENU ------>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n          <div>\n            @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n              <smart-icon\n                [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                >\n              </smart-icon>\n            }\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n          ) {\n          <div\n            >\n            {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n          ) {\n          <button\n            mat-icon-button\n            aria-label=\"expand row\"\n            (click)=\"onToggle(element, $event)\"\n            >\n            @if (expandedElement !== element) {\n              <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n            }\n            @if (expandedElement === element) {\n              <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n            }\n          </button>\n        }\n        @if (\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n          !smartTable.customSmartTableHeaders[i].properties &&\n          !smartTable.customSmartTableHeaders[i].icon &&\n          !smartTable.customSmartTableHeaders[i].buttons &&\n          !smartTable.customSmartTableHeaders[i].translator &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n          ) {\n          <div\n            >\n            @if (header === 'icon') {\n              <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n            }\n            @if (header === 'img') {\n              <img\n                [src]=\"getValue(element, header)\"\n                alt=\"\"\n                class=\"smarttableImg\"\n                />\n            }\n            <!------ TOOLBAR ------>\n            @if (showCellToolbar(element, header)) {\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, header)\"\n                [widgetId]=\"smartTable.getGridId()\"\n                [nodeId]=\"element.id\"\n                [actionParams]=\"{ model: element }\"\n              ></smart-ui-action-toolbar>\n            }\n            <!------ TOOLBAR ------>\n            @if (\n              header !== 'icon' &&\n              header !== 'img' &&\n              header !== 'option' &&\n              header !== 'button' &&\n              !isImageResource(element, header)\n              ) {\n              <div\n                [innerHtml]=\"getValue(element, header)\"\n              ></div>\n            }\n          </div>\n        }\n      </td>\n    </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n        >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n      <lib-default-actions-popup\n        #defaultActionMenu\n        [buttons]=\"getDefaultActionsForRow(element)!\"\n        [row]=\"element\"\n      ></lib-default-actions-popup>\n    }\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
+            args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatIconButton, MatMenuTrigger, MatMenu, MatMenuItem, MatDivider, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n\n        <ui-action-button (actionClick)=\"expandOneLevel()\" [descriptor]=\"expandTreeGridLevel\">\n        </ui-action-button>\n\n\n        <ui-action-button (actionClick)=\"collapseOneLevel()\" [descriptor]=\"closeTreeGridLevel\">\n        </ui-action-button>\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n        }\n        @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <div>\n          {{ smartTable.customTableHeaders[i] }}\n        </div>\n        }\n      </div>\n      }\n      @if (\n      header !== 'icon' &&\n      header !== 'img' &&\n      header !== 'options' &&\n      header !== 'button' &&\n      header !== 'select' &&\n      header !== 'expand' &&\n      header !== 'actions'\n      ) {\n      <div>\n        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n          <div>\n            <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n          </div>\n          }\n          @if (\n          smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n          smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          ) {\n          <div>\n            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\n            </smart-icon>\n          </div>\n          }\n        </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n          <div>\n            <smart-icon [imageResource]=\"ir\"> </smart-icon>\n          </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n        <div class=\"smart-table-buttons-col\">\n          @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n          <div>\n            @if (showButton(button, element)) {\n            <div>\n              @switch (button.type) {\n              @case (smartTableButtonType.ICON) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              @case (smartTableButtonType.RAISED) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              <!------ MENU ------>\n              @case (smartTableButtonType.MENU) {\n              <div class=\"menu-button\">\n                <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                }\n              </div>\n              }\n              <!------ MENU ------>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n          <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div>\n          {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        ) {\n        <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n          @if (expandedElement !== element) {\n          <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n          }\n          @if (expandedElement === element) {\n          <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n          }\n        </button>\n        }\n        @if (\n        !smartTable.customSmartTableHeaders ||\n        (smartTable.customSmartTableHeaders &&\n        !smartTable.customSmartTableHeaders[i].properties &&\n        !smartTable.customSmartTableHeaders[i].icon &&\n        !smartTable.customSmartTableHeaders[i].buttons &&\n        !smartTable.customSmartTableHeaders[i].translator &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        ) {\n        <div>\n          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          <div [innerHtml]=\"getValue(element, header)\"></div>\n          }\n        </div>\n        }\n\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n        <div class=\"smart-table-detail-content\">\n          <ng-template #expandedArea></ng-template>\n        </div>\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.mat-column-my_menu,.tree-grid-column{width:0}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
         }] });
 
 class MobileTableComponent extends Table {
@@ -15589,11 +15945,11 @@ class SmarttreeGenericService extends SmarttreeService {
         let nodeId = uiActionRequest.params['nodeUuid'];
         delete uiActionRequest.params['nodeUuid'];
         let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performAction2(viewUuid, this.treeId, nodeId, uiActionRequest).toPromise());
+        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.viewContext.withModelSync(uiActionRequest, (request) => this.service.performAction2(viewUuid, this.treeId, nodeId, request).toPromise()));
     }
     async performMainUiActionRequest(uiActionRequest) {
         let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performMainAction2(viewUuid, this.treeId, uiActionRequest).toPromise());
+        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.viewContext.withModelSync(uiActionRequest, (request) => this.service.performMainAction2(viewUuid, this.treeId, request).toPromise()));
     }
     handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
         throw new Error('Method not implemented.');
@@ -15635,11 +15991,13 @@ class SmartComponentApiClient {
         }
         if (this.uuid) {
             this.viewContext.unfollow(this.uuid);
+            this.viewContext.leaveModelSync(this.uuid, this);
         }
         this.uuidState.set(uuid);
         // Widgets read `widgetUuid` themselves; nothing is pushed into them from here. (ADR-0005)
         if (uuid) {
             this.viewContext.follow(this.uuid, this.detectChange);
+            this.viewContext.joinModelSync(this.uuid, this);
             this.onUuidResolved(uuid);
         }
     }
@@ -15729,7 +16087,6 @@ class SmartComponentApiClient {
          */
         this.commands = new Subject();
         this.dataChanged = new Subject();
-        this.sendModelOnWidgetAction = false;
         this.inmediateDataChangeKeys = [];
         this.blurDataChangeKeys = [];
         // check and calculate pageName
@@ -15766,6 +16123,7 @@ class SmartComponentApiClient {
     }
     _ngOnDestroy() {
         this.viewContext.unfollow(this.uuid);
+        this.viewContext.leaveModelSync(this.uuid, this);
         this._destroy$.next();
         this._destroy$.complete();
     }
@@ -15851,6 +16209,7 @@ class SmartComponentApiClient {
             // grids are already loaded in setUuid()
             this.handleChangeWidgets(this.model.widgets, true);
         }
+        this.viewContext.markModelSynced(uuid);
     }
     async executeUiAction(uiAction, options) {
         const uiActionModel = {
@@ -15877,7 +16236,7 @@ class SmartComponentApiClient {
         }
         let blurIdx = this.blurDataChangeKeys.indexOf(key);
         if (blurIdx >= 0) {
-            this.inmediateDataChangeKeys.splice(blurIdx, 1);
+            this.blurDataChangeKeys.splice(blurIdx, 1);
         }
     }
     /**
@@ -15889,7 +16248,6 @@ class SmartComponentApiClient {
         if (changeKeys.includes(event.key)) {
             this.executeUiAction({
                 code: event.key,
-                model: true,
                 params: {
                     item: event.value,
                 },
@@ -15935,7 +16293,6 @@ class SmartComponentApiClient {
             delete uiActionRequest.params['_files'];
             delete uiActionRequest.params['_uploadDescriptor'];
             delete uiActionRequest.params['isMultiple'];
-            // await this.sendModelToServer();
             if (!isMultiple) {
                 await this.viewContext.performUploadAction(this.uuid, uiActionRequest, param, files[0]);
             }
@@ -15975,38 +16332,15 @@ class SmartComponentApiClient {
             }
         }
         else if (widgetId && nodeId) {
-            // await this.sendModelToServer();
-            this.addModelToWidgetAction(uiActionRequest);
             await this.viewContext.performWidgetAction(this.uuid, widgetId, nodeId, uiActionRequest);
         }
         else if (widgetId) {
-            // await this.sendModelToServer();
-            this.addModelToWidgetAction(uiActionRequest);
             await this.viewContext.performWidgetMainAction(this.uuid, widgetId, uiActionRequest);
         }
         else {
             await this.viewContext.performAction(this.uuid, uiActionRequest);
         }
     }
-    addModelToWidgetAction(uiActionRequest) {
-        this.addModelToWidgetParams(uiActionRequest.params);
-    }
-    addModelToWidgetParams(params) {
-        if (this.sendModelOnWidgetAction) {
-            this.submitForm(false);
-            // mimic ComponentModel
-            params['clientPageModel'] = { data: this.getModel() };
-        }
-    }
-    // private async sendModelToServer() {
-    //   this.submitForms(false);
-    //   let dataChange = {
-    //     kind: DataChangeKind.Widget,
-    //     source: '',
-    //     values: [['', this.getModel()]],
-    //   };
-    //   await this.viewContext.dataChanged(this.uuid!, dataChange);
-    // }
     handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
         throw new Error('handleSpecificDemandsAsynchronously method not implemented.');
     }
@@ -16056,27 +16390,10 @@ class SmartComponentApiClient {
         return matData?.uuid;
     }
     // #region handle changes
-    handleValueChanges(valueChange) {
-        let dataChange;
-        if (valueChange.key.includes('.')) {
-            const source = valueChange.key.split('.')[0];
-            const valueKey = valueChange.key.split('.')[1];
-            dataChange = {
-                kind: valueChange.kind === 'basic' ? DataChangeKind.WIDGET : DataChangeKind.SELECTION,
-                source,
-                values: [[valueKey, valueChange.value]],
-            };
-        }
-        else {
-            dataChange = {
-                kind: valueChange.kind === 'basic' ? DataChangeKind.WIDGET : DataChangeKind.SELECTION,
-                source: valueChange.key,
-                values: [[valueChange.key, valueChange.value]],
-            };
-        }
-        this.viewContext.dataChanged(this.uuid, dataChange);
-    }
     handleChanges(change) {
+        // What of the data the push wrote: the paths under `data`, or everything on a whole-model
+        // replacement. Tells the view context how much of the data to take as the backend's.
+        let pushedKeys = [];
         try {
             if (!this.componentModelLoaded) {
                 // initial load
@@ -16091,6 +16408,7 @@ class SmartComponentApiClient {
                 Object.keys(changes).map((changeKey) => {
                     if (changeKey.startsWith('data.')) {
                         this.handleDataChange(changes, changeKey);
+                        pushedKeys?.push(changeKey.substring('data.'.length));
                     }
                     else if (changeKey.startsWith('layouts.') && this.model?.layouts) {
                         this.handleLayoutChange(changes, changeKey);
@@ -16110,6 +16428,7 @@ class SmartComponentApiClient {
                     else if (changeKey === '') {
                         this.model = changes[''];
                         dataChangeHasBeenNexted = true;
+                        pushedKeys = undefined;
                     }
                 });
                 if (!dataChangeHasBeenNexted) {
@@ -16120,9 +16439,14 @@ class SmartComponentApiClient {
         catch (error) {
             console.error(error);
             this.model = change.value;
+            pushedKeys = undefined;
         }
         if (!change.changedWidgets && !change.changes && change.value) {
             this.model = change.value;
+            pushedKeys = undefined;
+        }
+        if (pushedKeys === undefined || pushedKeys.length) {
+            this.viewContext.markModelSynced(this.uuid, pushedKeys);
         }
     }
     /**
@@ -16276,6 +16600,7 @@ var SmartLayoutDef;
     SmartLayoutDef["EXPANDABLE"] = "EXPANDABLE";
     SmartLayoutDef["CARD"] = "CARD";
     SmartLayoutDef["TREE"] = "TREE";
+    SmartLayoutDef["TREE_GRID"] = "TREE_GRID";
 })(SmartLayoutDef || (SmartLayoutDef = {}));
 var SmartGridButtonType;
 (function (SmartGridButtonType) {
@@ -16979,18 +17304,6 @@ var GridDataAccessConfigKindEnum;
 })(GridDataAccessConfigKindEnum || (GridDataAccessConfigKindEnum = {}));
 ;
 
-/**
- * Grid api
- * The grid api is resposible for the grid components that shows a list of item.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
 /**
  * Grid api
  * The grid api is resposible for the grid components that shows a list of item.
@@ -17031,9 +17344,46 @@ var GridViewDescriptorKindEnum;
     GridViewDescriptorKindEnum["TABLE"] = "TABLE";
     GridViewDescriptorKindEnum["CARDS"] = "CARDS";
     GridViewDescriptorKindEnum["TREE"] = "TREE";
+    GridViewDescriptorKindEnum["TREE_GRID"] = "TREE_GRID";
 })(GridViewDescriptorKindEnum || (GridViewDescriptorKindEnum = {}));
 ;
 
+class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration$2, useFactory: configurationFactory }]
+        };
+    }
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
 class TableLayoutDefinerComponent {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
@@ -17219,6 +17569,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['forms']
             }] } });
 
+/** The model sync carrier of a selection call; the view context puts the envelope on it. */
+function selection(selected, unselected) {
+    return { selected, unselected, params: {} };
+}
 class SmartGridService {
     constructor() {
         this.api = inject(GridService);
@@ -17256,27 +17610,19 @@ class SmartGridService {
     }
     async select(smartGrid, gridRow) {
         gridRow.selected = !gridRow.selected;
-        const gridSelectionChange = this.buildGridSelectionChange(smartGrid, [], []);
-        return await this.api
+        return await smartGrid.viewContextService.withModelSync(selection([], []), (gridSelectionChange) => this.api
             .select(smartGrid.gridModel.viewUuid, smartGrid.gridIdentifier, gridRow.id, gridRow.selected, gridSelectionChange)
-            .toPromise();
+            .toPromise());
     }
     async selectRows(smartGrid, selected, unselected) {
-        const gridSelectionChange = this.buildGridSelectionChange(smartGrid, selected, unselected);
-        return await this.api
+        return await smartGrid.viewContextService.withModelSync(selection(selected, unselected), (gridSelectionChange) => this.api
             .selectRows(smartGrid.gridModel.viewUuid, smartGrid.gridIdentifier, gridSelectionChange)
-            .toPromise();
+            .toPromise());
     }
     async selectAll(smartGrid, selected) {
-        const gridSelectionChange = this.buildGridSelectionChange(smartGrid, [], []);
-        return await this.api
+        return await smartGrid.viewContextService.withModelSync(selection([], []), (gridSelectionChange) => this.api
             .selectAll(smartGrid.gridModel.viewUuid, smartGrid.gridIdentifier, selected, gridSelectionChange)
-            .toPromise();
-    }
-    buildGridSelectionChange(smartGrid, selected, unselected) {
-        const gridSelectionChange = { selected, unselected, params: {} };
-        smartGrid.serviceToUse?.addModelToWidgetParams?.(gridSelectionChange.params);
-        return gridSelectionChange;
+            .toPromise());
     }
     async update(uuid, identifier, updateData) {
         if (!updateData.pageSize) {
@@ -17821,6 +18167,9 @@ class SmartGridComponent {
                 if (kind === GridViewDescriptorKindEnum.TABLE) {
                     layoutDef = SmartLayoutDef.TABLE;
                 }
+                else if (kind === GridViewDescriptorKindEnum.TREE_GRID) {
+                    layoutDef = SmartLayoutDef.TREE_GRID;
+                }
                 else if (kind === GridViewDescriptorKindEnum.TREE) {
                     layoutDef = SmartLayoutDef.TREE;
                 }
@@ -17846,6 +18195,9 @@ class SmartGridComponent {
         if (this.smartGrid.layoutDef === SmartLayoutDef.TABLE) {
             this.renderTable();
         }
+        else if (this.smartGrid.layoutDef === SmartLayoutDef.TREE_GRID) {
+            this.renderTable();
+        }
         else if (this.smartGrid.layoutDef === SmartLayoutDef.EXPANDABLE) {
             this.renderExpandableSections();
         }
@@ -17883,7 +18235,7 @@ class SmartGridComponent {
         else {
             this.tableType = SmartTableType.INHERITED;
         }
-        if (this.smartGrid.layoutDef === SmartLayoutDef.TABLE) {
+        if (this.smartGrid.layoutDef === SmartLayoutDef.TABLE || this.smartGrid.layoutDef === SmartLayoutDef.TREE_GRID) {
             let tableConfig = {
                 ...this.smartGrid.tableConfig,
                 title: this.smartGrid?.gridModel.title,
@@ -18413,12 +18765,21 @@ class SmartGridComponent {
         };
         this.dialog.open(TableLayoutDefinerComponent, { data: dialogData });
     }
+    get showEditColumns() {
+        return {
+            title: '',
+            color: 'primary',
+            type: UiActionButtonType.MINI_FAB,
+            icon: 'view_columns',
+            iconPosition: IconPosition.PRE,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <button\n          (click)=\"editColumns()\"\n          mat-mini-fab\n          color=\"text-primary\"\n          >\n          <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\n            >view_columns</mat-icon\n            >\n          </button>\n        }\n      </div>\n      <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n      <div class=\"smartGridContent\">\n        <div>\n          @if (smartGrid.showResultCount) {\n            <div>\n              <div class=\"smartGrid-data-number\">\n                {{ smartGrid.gridModel.totalRowCount }}\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"smart-grid-table-container\">\n          <ng-template #table></ng-template>\n        </div>\n        @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n          <div>\n            @for (expandableSection of expandableSections; track expandableSection) {\n              <smart-expandable-section\n                #gridExpandableSection\n                [data]=\"expandableSection\"\n              ></smart-expandable-section>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n          <div\n            class=\"cards-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            @for (row of smartGrid.gridModel.page.rows; track row.id) {\n              <app-smart-grid-card\n                class=\"smartGrid-card-container\"\n                [class.clickable-row]=\"row.layoutDescriptor\"\n                (click)=\"row.layoutDescriptor && onClick(row)\"\n                [item]=\"row\"\n                [smartGrid]=\"smartGrid\"\n                [parentLayoutComponent]=\"parentLayoutComponent()\"\n              ></app-smart-grid-card>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n          <div\n            class=\"tree-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n              <mat-tree-node\n                *matTreeNodeDef=\"let node\"\n                matTreeNodeToggle\n                matTreeNodePadding\n                matTreeNodePaddingIndent=\"24\"\n                >\n                <button mat-icon-button disabled class=\"tree-button\"></button>\n                <mat-checkbox\n                  class=\"checklist-leaf-node\"\n                  [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                  (change)=\"treeNodeSelectionToggle(node)\"\n                  >{{ getTreeItem(node) }}</mat-checkbox\n                  >\n                </mat-tree-node>\n                <mat-tree-node\n                  *matTreeNodeDef=\"let node; when: hasChild\"\n                  matTreeNodePadding\n                  matTreeNodePaddingIndent=\"24\"\n                  >\n                  <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    class=\"tree-button\"\n                    [attr.aria-label]=\"'Toggle ' + node.item\"\n                    >\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                      {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                    </mat-icon>\n                  </button>\n                  <mat-checkbox\n                    [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                    [indeterminate]=\"descendantsPartiallySelected(node)\"\n                    (change)=\"treeNodeSelectionToggle(node)\"\n                    >{{ getTreeItem(node) }}</mat-checkbox\n                    >\n                  </mat-tree-node>\n                </mat-tree>\n              </div>\n            }\n          </div>\n          @if (smartGrid.paginator) {\n            <div class=\"paginator-row-material\">\n              @if (smartGrid.gridModel.refreshEnabled) {\n                <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n                  <mat-icon>refresh</mat-icon>\n                </button>\n              }\n              @if (smartGrid.paginator && !treeControl) {\n                <mat-paginator\n                  #paginator\n                  [length]=\"length\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  (page)=\"onChangePage($event)\"\n                ></mat-paginator>\n              }\n            </div>\n          }\n        </div>\n      }\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n<div class=\"smartGrid-container\">\n  <div class=\"smart-grid-toolbar\">\n    <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n    @if (smartGrid.showEditColumns) {\n    <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n    </ui-action-button>\n    }\n  </div>\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n  <div class=\"smartGridContent\">\n    <div>\n      @if (smartGrid.showResultCount) {\n      <div>\n        <div class=\"smartGrid-data-number\">\n          {{ smartGrid.gridModel.totalRowCount }}\n        </div>\n      </div>\n      }\n    </div>\n    <div class=\"smart-grid-table-container\">\n      <ng-template #table></ng-template>\n    </div>\n    @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n    <div>\n      @for (expandableSection of expandableSections; track expandableSection) {\n      <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n    <div class=\"cards-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      @for (row of smartGrid.gridModel.page.rows; track row.id) {\n      <app-smart-grid-card class=\"smartGrid-card-container\" [class.clickable-row]=\"row.layoutDescriptor\"\n        (click)=\"row.layoutDescriptor && onClick(row)\" [item]=\"row\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n    <div class=\"tree-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button disabled class=\"tree-button\"></button>\n          <mat-checkbox class=\"checklist-leaf-node\"\n            [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\n            getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n    }\n  </div>\n  @if (smartGrid.paginator) {\n  <div class=\"paginator-row-material\">\n    @if (smartGrid.gridModel.refreshEnabled) {\n    <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    }\n    @if (smartGrid.paginator && !treeControl) {\n    <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\n    }\n  </div>\n  }\n</div>\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], imports: [UiActionToolbarComponent, MatMiniFabButton, MatIcon, ExpandableSectionComponent, NgStyle, SmartGridCardComponent, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatIconButton, MatCheckbox, MatTooltip, MatPaginator], template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <button\n          (click)=\"editColumns()\"\n          mat-mini-fab\n          color=\"text-primary\"\n          >\n          <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\n            >view_columns</mat-icon\n            >\n          </button>\n        }\n      </div>\n      <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n      <div class=\"smartGridContent\">\n        <div>\n          @if (smartGrid.showResultCount) {\n            <div>\n              <div class=\"smartGrid-data-number\">\n                {{ smartGrid.gridModel.totalRowCount }}\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"smart-grid-table-container\">\n          <ng-template #table></ng-template>\n        </div>\n        @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n          <div>\n            @for (expandableSection of expandableSections; track expandableSection) {\n              <smart-expandable-section\n                #gridExpandableSection\n                [data]=\"expandableSection\"\n              ></smart-expandable-section>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n          <div\n            class=\"cards-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            @for (row of smartGrid.gridModel.page.rows; track row.id) {\n              <app-smart-grid-card\n                class=\"smartGrid-card-container\"\n                [class.clickable-row]=\"row.layoutDescriptor\"\n                (click)=\"row.layoutDescriptor && onClick(row)\"\n                [item]=\"row\"\n                [smartGrid]=\"smartGrid\"\n                [parentLayoutComponent]=\"parentLayoutComponent()\"\n              ></app-smart-grid-card>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n          <div\n            class=\"tree-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n              <mat-tree-node\n                *matTreeNodeDef=\"let node\"\n                matTreeNodeToggle\n                matTreeNodePadding\n                matTreeNodePaddingIndent=\"24\"\n                >\n                <button mat-icon-button disabled class=\"tree-button\"></button>\n                <mat-checkbox\n                  class=\"checklist-leaf-node\"\n                  [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                  (change)=\"treeNodeSelectionToggle(node)\"\n                  >{{ getTreeItem(node) }}</mat-checkbox\n                  >\n                </mat-tree-node>\n                <mat-tree-node\n                  *matTreeNodeDef=\"let node; when: hasChild\"\n                  matTreeNodePadding\n                  matTreeNodePaddingIndent=\"24\"\n                  >\n                  <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    class=\"tree-button\"\n                    [attr.aria-label]=\"'Toggle ' + node.item\"\n                    >\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                      {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                    </mat-icon>\n                  </button>\n                  <mat-checkbox\n                    [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                    [indeterminate]=\"descendantsPartiallySelected(node)\"\n                    (change)=\"treeNodeSelectionToggle(node)\"\n                    >{{ getTreeItem(node) }}</mat-checkbox\n                    >\n                  </mat-tree-node>\n                </mat-tree>\n              </div>\n            }\n          </div>\n          @if (smartGrid.paginator) {\n            <div class=\"paginator-row-material\">\n              @if (smartGrid.gridModel.refreshEnabled) {\n                <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n                  <mat-icon>refresh</mat-icon>\n                </button>\n              }\n              @if (smartGrid.paginator && !treeControl) {\n                <mat-paginator\n                  #paginator\n                  [length]=\"length\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  (page)=\"onChangePage($event)\"\n                ></mat-paginator>\n              }\n            </div>\n          }\n        </div>\n      }\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], imports: [UiActionToolbarComponent, UiActionButtonComponent, MatMiniFabButton, MatIcon, ExpandableSectionComponent, NgStyle, SmartGridCardComponent, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatIconButton, MatCheckbox, MatTooltip, MatPaginator], template: "@if (smartGrid) {\n<div class=\"smartGrid-container\">\n  <div class=\"smart-grid-toolbar\">\n    <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n    @if (smartGrid.showEditColumns) {\n    <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n    </ui-action-button>\n    }\n  </div>\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n  <div class=\"smartGridContent\">\n    <div>\n      @if (smartGrid.showResultCount) {\n      <div>\n        <div class=\"smartGrid-data-number\">\n          {{ smartGrid.gridModel.totalRowCount }}\n        </div>\n      </div>\n      }\n    </div>\n    <div class=\"smart-grid-table-container\">\n      <ng-template #table></ng-template>\n    </div>\n    @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n    <div>\n      @for (expandableSection of expandableSections; track expandableSection) {\n      <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n    <div class=\"cards-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      @for (row of smartGrid.gridModel.page.rows; track row.id) {\n      <app-smart-grid-card class=\"smartGrid-card-container\" [class.clickable-row]=\"row.layoutDescriptor\"\n        (click)=\"row.layoutDescriptor && onClick(row)\" [item]=\"row\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n    <div class=\"tree-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button disabled class=\"tree-button\"></button>\n          <mat-checkbox class=\"checklist-leaf-node\"\n            [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\n            getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n    }\n  </div>\n  @if (smartGrid.paginator) {\n  <div class=\"paginator-row-material\">\n    @if (smartGrid.gridModel.refreshEnabled) {\n    <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    }\n    @if (smartGrid.paginator && !treeControl) {\n    <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\n    }\n  </div>\n  }\n</div>\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{
@@ -22374,7 +22735,6 @@ class GenericPageComponent extends SmartComponent {
         /** Written from `dataChanged`, so a signal — the page has no template event that would. */
         this.componentLayoutState = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "componentLayoutState" }] : /* istanbul ignore next */ []));
-        this.sendModelOnWidgetAction = true;
         this.dataChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
             if (this.model?.componentLayouts) {
                 this.setUpComponentLayout();
@@ -22436,7 +22796,6 @@ class SearchPageComponent extends SmartComponent {
         this.layoutComponent = viewChild(SmartComponentLayoutComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layoutComponent" }] : /* istanbul ignore next */ []));
         this.setupGrid();
-        this.sendModelOnWidgetAction = true;
         // uuid is set in onUuidResolved — it is not known at construction for
         // dynamic default-component views. (#28870)
         this.filterService.config = {
@@ -23357,7 +23716,6 @@ class NoPermissionPageComponent extends SmartComponent {
         /** Written from `dataChanged`, so a signal. */
         this.componentLayoutState = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "componentLayoutState" }] : /* istanbul ignore next */ []));
-        this.sendModelOnWidgetAction = true;
         this.dataChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
             if (this.model?.componentLayouts) {
                 this.setUpComponentLayout();
@@ -23399,7 +23757,6 @@ class InvalidSmartlinkComponent extends SmartComponent {
         /** Written from `dataChanged`, so a signal. */
         this.componentLayoutState = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "componentLayoutState" }] : /* istanbul ignore next */ []));
-        this.sendModelOnWidgetAction = true;
         this.dataChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
             if (this.model?.componentLayouts) {
                 this.setUpComponentLayout();