@messaia/cdk 18.2.2 → 18.2.3-rc02

package/fesm2022/messaia-cdk.mjs

@@ -1409,9 +1409,21 @@ var Salutation;
     Salutation[Salutation["Male"] = 2] = "Male";
 })(Salutation || (Salutation = {}));
 
+/**
+ * Represents an application event with a specified type and associated payload.
+ * Used for event-driven communication within the application.
+ *
+ * @template T The type of the payload associated with the event.
+ */
 class AppEvent {
     type;
     payload;
+    /**
+     * Constructor to initialize the event type and payload.
+     *
+     * @param type The type of the event, represented by the `AppEventType` enum.
+     * @param payload The data or payload associated with the event.
+     */
     constructor(type, payload) {
         this.type = type;
         this.payload = payload;
@@ -1420,16 +1432,26 @@ class AppEvent {
 
 /**
  * Represents a common error with a code and description.
+ * Typically used to encapsulate error details for consistent error handling.
  */
 class CommonError {
-    /** Error code */
+    /**
+     * @property Code
+     * @description The unique code identifying the type of error.
+     * @type {string}
+     */
     code;
-    /** Error description */
+    /**
+     * @property Description
+     * @description A human-readable message providing details about the error.
+     * @type {string}
+     */
     description;
     /**
-     * Constructs a new instance of CommonError.
-     * @param code The error code.
-     * @param description The error description.
+     * Constructs a new instance of the `CommonError` class.
+     *
+     * @param code The unique error code.
+     * @param description A descriptive message explaining the error.
      */
     constructor(code, description) {
         this.code = code;
@@ -1438,33 +1460,42 @@ class CommonError {
 }
 
 /**
- * Represents the context of a handler operation, including results and errors.
- * @typeparam TResult The type of the result.
+ * Represents the context of a handler operation, including the operation result, success status, and associated errors.
+ *
+ * @typeparam TResult The type of the result encapsulated by the context.
  */
 class CommonHandlerContext {
     /**
-     * A list of errors that occurred during the operation.
+     * @property Errors
+     * @description A collection of errors that occurred during the operation. Empty if the operation succeeded.
+     * @type {CommonError[]}
      */
     errors = [];
     /**
-     * The result of the operation.
+     * @property Result
+     * @description The result of the operation. Its value depends on the success or failure of the operation.
+     * @type {TResult}
      */
     result;
     /**
-     * Indicates if the operation was successful.
+     * @property Has Succeeded
+     * @description Indicates whether the operation was successful. Defaults to `true`.
+     * @type {boolean}
      */
     hasSucceeded = true;
     /**
-     * Constructs a new instance of CommonHandlerContext.
-     * @param result The result of the operation.
+     * Constructs a new instance of the `CommonHandlerContext` class.
+     *
+     * @param result The initial result of the operation.
      */
     constructor(result) {
         this.result = result;
     }
     /**
-     * Marks the operation as failed and sets the provided errors.
-     * @param errors An optional array of CommonError instances indicating why the operation failed.
-     * @returns The current instance of CommonHandlerContext with errors set.
+     * Marks the operation as failed and appends the provided errors to the `errors` property.
+     *
+     * @param errors An optional array of `CommonError` instances that provide details about why the operation failed.
+     * @returns The current instance of `CommonHandlerContext` with the failure status and errors updated.
      */
     fail(...errors) {
         this.errors.push(...errors);
@@ -2100,17 +2131,29 @@ function Api(endpoint) {
     };
 }
 
+/**
+ * Represents a projection of an entity with display name, number, and ID properties.
+ * This class is typically used to define how these properties are displayed and filtered in a table/grid.
+ */
 class DisplayNameNumberProjection {
     /**
-     * @property
+     * @property Display Name
+     * @description The name to display in the grid or UI. It is optional and localized using `@Display`.
+     * @type {string}
      */
     displayName;
     /**
-     * @property
+     * @property Number
+     * @description A numeric value associated with the entity, displayed in the grid.
+     * Includes filtering options and a medium grid display configuration.
+     * @type {number}
      */
     number;
     /**
-     * @property
+     * @property ID
+     * @description The unique identifier for the entity. Configured for filtering and sorting.
+     * The arrowBefore property ensures proper column sorting behavior in grids.
+     * @type {number}
      */
     id;
 }
@@ -2120,23 +2163,41 @@ __decorate([
     __metadata("design:type", String)
 ], DisplayNameNumberProjection.prototype, "displayName", void 0);
 __decorate([
-    Column({ index: 10, filterOperator: FilterOperator.Contains, maxWidth: 90, display: Grid.Md }),
+    Column({
+        index: 10,
+        filterOperator: FilterOperator.Contains,
+        maxWidth: 90,
+        display: Grid.Md
+    }),
     Display($localize `:@@number:Number`),
     __metadata("design:type", Number)
 ], DisplayNameNumberProjection.prototype, "number", void 0);
 __decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Column({
+        filterOperator: FilterOperator.Contains,
+        index: 1100,
+        arrowBefore: true
+    }),
     Display($localize `:@@id:ID`),
     __metadata("design:type", Number)
 ], DisplayNameNumberProjection.prototype, "id", void 0);
 
+/**
+ * Represents a projection for displaying an entity's name and ID properties.
+ * This class is typically used in grid or table views to manage how these properties are displayed and filtered.
+ */
 class DisplayNameProjection {
     /**
-     * @property
+     * @property Display Name
+     * @description The name to display in the grid or UI. This property is localized using `@Display`.
+     * @type {string}
      */
     displayName;
     /**
-     * @property
+     * @property ID
+     * @description The unique identifier for the entity. Configured for filtering and sorting.
+     * The `arrowBefore` property ensures proper sorting behavior in grids.
+     * @type {number}
      */
     id;
 }
@@ -2146,38 +2207,53 @@ __decorate([
     __metadata("design:type", String)
 ], DisplayNameProjection.prototype, "displayName", void 0);
 __decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Column({
+        filterOperator: FilterOperator.Contains,
+        index: 1100,
+        arrowBefore: true
+    }),
     Display($localize `:@@id:ID`),
     __metadata("design:type", Number)
 ], DisplayNameProjection.prototype, "id", void 0);
 
 /**
- * Metadata class for enum values, containing display information and ordering.
+ * Metadata class for enum values, containing display information, ordering, and other optional properties.
+ * This class provides additional metadata for enum items, useful for customizing their presentation and behavior in the UI.
  */
 class EnumMetadata {
     /**
-     * Optional display string associated with the enum value.
+     * @property Display
+     * @description An optional display string associated with the enum value. This string can be used for user-friendly display in the UI.
+     * @type {string}
      */
     display;
     /**
-     * Optional icon associated with the enum value.
+     * @property Icon
+     * @description An optional icon associated with the enum value. This can be used to visually represent the enum value in the UI.
+     * @type {Icon<any, any>}
      */
     icon;
     /**
-     * Optional text color associated with the enum value.
+     * @property Text Color
+     * @description An optional text color associated with the enum value. This allows customization of the appearance of the value in the UI.
+     * @type {string}
      */
     textColor;
     /**
-     * Optional order number used for sorting enum values.
+     * @property Order
+     * @description An optional order number used for sorting enum values. This helps in controlling the order in which enum items are displayed.
+     * @type {number}
      */
     order;
     /**
-     * Flag indicating whether the enum value should be hidden from the UI.
+     * @property Hidden
+     * @description A flag indicating whether the enum value should be hidden from the UI. This can be useful for conditionally hiding enum items.
+     * @type {boolean}
      */
     hidden;
     /**
-     * Constructor to initialize the EnumMetadata class.
-     * @param init
+     * Constructor to initialize the EnumMetadata class with optional values.
+     * @param init An optional partial object to initialize the properties of EnumMetadata.
      */
     constructor(init) {
         Object.assign(this, init);
@@ -3776,18 +3852,25 @@ function prop(config) {
     };
 }
 
+/**
+ * Abstract class representing a base entity with common properties and functionality.
+ */
 class BaseEntity {
     /**
-     * @property
+     * @property ID
+     * @description Represents the unique identifier of the entity.
+     * @type {number}
      */
     id;
     /**
-     * @property
+     * @property Version
+     * @description Represents the version number of the entity for concurrency control.
+     * @type {number}
      */
     version;
     /**
-     * constructor
-     * @param init
+     * Constructor to initialize properties of the base entity.
+     * @param init Partial object containing initial property values.
      */
     constructor(init) {
         Object.assign(this, init);
@@ -3805,26 +3888,38 @@ __decorate([
     __metadata("design:type", Number)
 ], BaseEntity.prototype, "id", void 0);
 
+/**
+ * Abstract class extending the base entity with audit-related properties.
+ * Includes information about entity creation and updates.
+ */
 class AuditEntity extends BaseEntity {
     /**
-     * @property
+     * @property Created By
+     * @description Specifies the username or identifier of the user who created the entity.
+     * @type {string}
      */
     createdBy;
     /**
-     * @property
+     * @property Created Date
+     * @description Specifies the date and time when the entity was created.
+     * @type {Date}
      */
     createdDate;
     /**
-     * @property
+     * @property Updated By
+     * @description Specifies the username or identifier of the user who last updated the entity.
+     * @type {string}
      */
     updatedBy;
     /**
-     * @property
+     * @property Updated Date
+     * @description Specifies the date and time when the entity was last updated.
+     * @type {Date}
      */
     updatedDate;
     /**
-     * constructor
-     * @param init
+     * Constructor to initialize properties of the audit entity.
+     * @param init Partial object containing initial property values.
      */
     constructor(init) {
         super(init);
@@ -3836,22 +3931,32 @@ __decorate([
         index: 1000,
         columnSets: ['audit', 'common'],
         header: $localize `:@@createdDate:Created date`,
-        arrowBefore: true, display: Grid.Sm
+        arrowBefore: true,
+        display: Grid.Sm
     }),
     __metadata("design:type", Date)
 ], AuditEntity.prototype, "createdDate", void 0);
 
+/**
+ * Represents a user entity with audit-related information such as display name, email, and letter.
+ */
 class AuditUser {
     /**
-     * @property
+     * @property Display Name
+     * @description The full name or preferred display name of the user.
+     * @type {string}
      */
     displayName;
     /**
-     * @property
+     * @property Email
+     * @description The email address of the user.
+     * @type {string}
      */
     email;
     /**
-     * @property
+     * @property Letter
+     * @description The first letter or an abbreviation associated with the user.
+     * @type {string}
      */
     letter;
 }
@@ -3909,6 +4014,27 @@ class KeyValue {
     value;
 }
 
+/**
+ * Represents an entity that can be modified, extending from the AuditEntity class.
+ * This class adds additional properties to manage whether the entity is deletable or editable.
+ */
+class ModifiableEntity extends AuditEntity {
+    /**
+     * @property isDeletable
+     * @description A flag indicating whether the entity can be deleted.
+     * This property helps determine if the entity is deletable in the UI or business logic.
+     * @type {boolean}
+     */
+    isDeletable;
+    /**
+     * @property isEditable
+     * @description A flag indicating whether the entity can be edited.
+     * This property helps determine if the entity is editable in the UI or business logic.
+     * @type {boolean}
+     */
+    isEditable;
+}
+
 var SaveAction;
 (function (SaveAction) {
     SaveAction[SaveAction["SaveAndClose"] = 0] = "SaveAndClose";
@@ -19684,8 +19810,6 @@ class GenericFormBaseComponent extends BaseComponent {
         }
         /* Set panel ID from query */
         this.subtitle ||= this.route.snapshot?.data?.subtitle;
-        /* Add list menu items */
-        this.addToolbarMenuItems();
     }
     /**
      * Builds the form fields.
@@ -19702,8 +19826,15 @@ class GenericFormBaseComponent extends BaseComponent {
             this.toolbarMenuItems = this.toolbarMenuItems.concat(...this.formDefinition?.toolbarMenuItems);
             this.toolbarMenuItems.forEach((x, i) => x.index ??= i);
         }
+        /*
+        Assign a value to `this.deletable` only if it is currently falsy.
+        Use the `deletable` property from `formDefinition`, defaulting to `false` if undefined.
+         */
+        this.deletable &&= (this.formDefinition.deletable ?? false);
         /* Create the form fields using the entity type */
         this.fieldGroups = this.formDefinition?.fieldGroups?.filter(x => !x.hidden);
+        /* Add list menu items */
+        this.addToolbarMenuItems();
     }
     /**
      * Builds a new form.
@@ -20836,7 +20967,7 @@ class GenericListComponent extends BaseComponent {
             });
         }
         /* Add delete menu */
-        if (this.deletable) {
+        if (this.deletable && this.canDelete) {
             this.rowMenuItems.unshift({
                 title: $localize `:@@delete:Delete`,
                 icon: 'delete_forever',
@@ -20846,7 +20977,7 @@ class GenericListComponent extends BaseComponent {
             });
         }
         /* Add edit menu */
-        if (this.editable) {
+        if (this.editable && this.canUpdate) {
             this.rowMenuItems.unshift({
                 title: $localize `:@@edit:Edit`,
                 icon: 'edit_note',
@@ -25723,11 +25854,6 @@ class VdGenericFormComponent {
     log(message, ...optionalParams) {
         console.log(message, optionalParams);
     }
-    //---------------------------------------------------------------
-    //TODO delete:
-    myFunction(func, option) {
-        return func(option, this.formValue, this.formGroup, this.context);
-    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput\r\n                                   [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\"\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\r\n                                   [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   parseDecimal\r\n                                   [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput\r\n                                      [formControlName]=\"field.name!\"\r\n                                      rows=\"field.rows||2\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            </textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [enum]=\"field.enumType\"\r\n                                       [enumMetadata]=\"field.enumMetadata\"\r\n                                       [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                       [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n                                       [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n                                       [compareWith]=\"field.compareWith\"\r\n                                       [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [matIconKey]=\"field.optionMatIconProperty\"\r\n                                       [svgIconKey]=\"field.optionSvgIconProperty\"\r\n                                       [fontSet]=\"field.optionIconFontSet\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [selectFirst]=\"field.selectFirst\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                       (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <mat-chip-set>\r\n                                        <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                        </mat-chip>\r\n                                    </mat-chip-set>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\"\r\n                                     [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                     [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n                                     [projection]=\"field.projection\"\r\n                                     [mapper]=\"field.mapper\"\r\n                                     [compareWith]=\"field.compareWith\"\r\n                                     [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                     [optionValueProperty]=\"field.optionValueProperty\"\r\n                                     [optionTextProperty]=\"field.optionTextProperty\"\r\n                                     [multiple]=\"field.multiple\"\r\n                                     [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                     (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                     (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                     [style.max-width]=\"field.maxWidth\"\r\n                                     [style.max-height]=\"field.maxHeight\"\r\n                                     flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n                                              (removed)=\"removeChip(field, chip)\"\r\n                                              [color]=\"field.chipColor\"\r\n                                              selectable=\"true\"\r\n                                              highlighted\r\n                                              selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\"\r\n                                       #chipInput\r\n                                       [matChipInputFor]=\"chipList\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matAutocomplete]=\"chipAutocomplete\"\r\n                                       (input)=\"filterAutocomplete(field, chipInput)\"\r\n                                       (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n                                       autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip\r\n                                      [formControlName]=\"field.name!\"\r\n                                      [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                      [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n                                      [searchField]=\"field.searchField\"\r\n                                      [searchFields]=\"field.searchFields\"\r\n                                      [filters]=\"field.filters\"\r\n                                      [selectFirst]=\"field.selectFirst\"\r\n                                      [classType]=\"field.classType\"\r\n                                      [projection]=\"field.projection\"\r\n                                      [key]=\"field.optionValueProperty\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      [removable]=\"!field.clear\"\r\n                                      [context]=\"context\"\r\n                                      [suffixButtons]=\"field.suffixButtons\"\r\n                                      [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n                                      (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                      (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n                                      (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n                                      [customValue]=\"field.customValue\"\r\n                                      layout=\"row\"\r\n                                      flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\"\r\n                                        [multiple]=\"field.multiple\"\r\n                                        [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                        flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\"\r\n                                   matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\"\r\n                                   [max]=\"field.max\"\r\n                                   [matAutocomplete]=\"auto\"\r\n                                   (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n                                   autocomplete=\"off\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                   #autocompleteInput>\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\"\r\n                                   autocomplete=\"off\"\r\n                                   [matDatepicker]=\"datePicker\"\r\n                                   [matDatepickerFilter]=\"field.dateFilter\"\r\n                                   [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar\r\n                                          [selected]=\"formGroup.get(field.name!)?.value\"\r\n                                          (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n                                          (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n                                          [headerComponent]=\"datePickerHeaderComponent\"\r\n                                          (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                          style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\"\r\n                                      [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            {{field.label}}\r\n                        </mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input\r\n                                 [formControlName]=\"field.name!\"\r\n                                 (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n                                 [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                 flex>\r\n                            </div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i21.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i21.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i21.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i21.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i24.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i24.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i24.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i24.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i24.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i24.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i25.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i25.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
@@ -26665,5 +26791,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, JoinPipe, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MapPipe, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, ParseDecimalDirective, Permission, PlaceholderPipe, PrintService, PropertyJoinPipe, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, JoinPipe, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MapPipe, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, ParseDecimalDirective, Permission, PlaceholderPipe, PrintService, PropertyJoinPipe, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map