@seniorsistemas/components-ai 2.0.1 → 2.0.2-master-c019cc99

package/fesm2022/seniorsistemas-components-ai.mjs

@@ -4313,7 +4313,7 @@ class DynamicFieldLookupComponent {
             }
             else {
                 const upperTerm = term.toUpperCase();
-                filterConditions.push(`UPPER(${field}) like '%${upperTerm}%'`);
+                filterConditions.push(`containing(UPPER(${field}), '${upperTerm}')`);
             }
         });
         if (filterConditions.length > 0) {
@@ -4482,7 +4482,7 @@ class DynamicFieldLookupComponent {
                 }
                 else {
                     const upperTerm = term.toUpperCase();
-                    filterConditions.push(`UPPER(${field}) like '%${upperTerm}%'`);
+                    filterConditions.push(`containing(UPPER(${field}), '${upperTerm}')`);
                 }
             });
             if (filterConditions.length > 0) {
@@ -4559,12 +4559,21 @@ class DynamicFieldLookupComponent {
         this.loadData();
     }
     selectItem(item) {
-        // Always set the full object, not just the ID
-        this.setValue(item);
-        this.displayValue = this.formatDisplayValue(item);
+        // Close dialog first, then set value in next tick to prevent
+        // click event from propagating to elements behind the dialog
         this.showLookupDialog = false;
+        setTimeout(() => {
+            this.setValue(item);
+            this.displayValue = this.formatDisplayValue(item);
+        });
     }
     onRowSelect(event) {
+        // Prevent the click event from propagating after the dialog closes,
+        // which could trigger buttons behind the dialog (e.g. inline-edit save button)
+        if (event.originalEvent) {
+            event.originalEvent.stopPropagation();
+            event.originalEvent.preventDefault();
+        }
         this.selectItem(event.data);
     }
     clearValue() {
@@ -5616,7 +5625,7 @@ class DynamicFormComponent {
                 if (control) {
                     const shouldDisable = this.isFieldDisabled(field);
                     if (shouldDisable && control.enabled) {
-                        control.setValue(null);
+                        control.setValue(null, { emitEvent: false });
                         control.disable({ emitEvent: false });
                     }
                     else if (!shouldDisable && control.disabled && !field.disabled) {
@@ -5724,17 +5733,6 @@ class DynamicFormComponent {
             const el = document.querySelector(`.inline-edit-field input[id="${fieldName}"], .inline-edit-field textarea[id="${fieldName}"]`);
             el?.focus();
         });
-        // For lookup fields, auto-save when value changes (user selects from dialog)
-        const field = this.allFields.find(f => f.field === fieldName);
-        if (field?.type === 'lookup') {
-            const control = this.form.get(fieldName);
-            const sub = control?.valueChanges.subscribe(val => {
-                if (val && typeof val === 'object') {
-                    sub?.unsubscribe();
-                    this.saveInlineField(fieldName);
-                }
-            });
-        }
     }
     isFieldEditing(fieldName) { return this.editingField === fieldName; }
     saveInlineField(fieldName) {
@@ -5838,7 +5836,7 @@ class DynamicFormComponent {
         return String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i2$1.FormBuilder }, { token: TranslationService }, { token: MaskService }, { token: LocaleService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DynamicFormComponent, isStandalone: true, selector: "sia-dynamic-form", inputs: { sections: "sections", entityData: "entityData", mode: "mode", displayMode: "displayMode", visible: "visible", dialogConfig: "dialogConfig", drawerConfig: "drawerConfig", showSubmitButton: "showSubmitButton", showCancelButton: "showCancelButton", submitButtonLabel: "submitButtonLabel", cancelButtonLabel: "cancelButtonLabel", submitButtonIcon: "submitButtonIcon", cancelButtonIcon: "cancelButtonIcon" }, outputs: { formReady: "formReady", formSubmit: "formSubmit", visibleChange: "visibleChange", onCancel: "onCancel", fieldSave: "fieldSave" }, usesOnChanges: true, ngImport: i0, template: "<!-- Inline Mode (no displayMode set) -->\n<ng-container *ngIf=\"isInlineMode\">\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n</ng-container>\n\n<!-- Dialog Mode -->\n<p-dialog\n  *ngIf=\"isDialogMode\"\n  [(visible)]=\"visible\"\n  [header]=\"dialogHeader | translate\"\n  [modal]=\"true\"\n  [style]=\"{ width: dialogWidth }\"\n  [draggable]=\"dialogDraggable\"\n  [resizable]=\"dialogResizable\"\n  [maximizable]=\"dialogMaximizable\"\n  [closeOnEscape]=\"dialogCloseOnEscape\"\n  [dismissableMask]=\"dialogDismissableMask\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"dialog-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<!-- Drawer Mode -->\n<p-drawer\n  *ngIf=\"isDrawerMode\"\n  [(visible)]=\"visible\"\n  [header]=\"drawerHeader | translate\"\n  [position]=\"drawerPosition\"\n  [style]=\"drawerStyle\"\n  [showCloseIcon]=\"drawerShowCloseIcon\"\n  [closeOnEscape]=\"drawerCloseOnEscape\"\n  [modal]=\"drawerDismissable\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"drawer-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- Form Content Template -->\n<ng-template #formContent>\n  <form [formGroup]=\"form\" class=\"dynamic-form\" (keydown)=\"onFormKeydown($event)\">\n\n    <ng-container *ngFor=\"let section of sections\">\n      <!-- No title = bare fields -->\n      <ng-container *ngIf=\"!section.title\">\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Bordered section -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'bordered'\" class=\"bordered-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Panel section -->\n      <p-panel\n        *ngIf=\"section.title && getSectionStyle(section) === 'panel'\"\n        [toggleable]=\"true\"\n        [collapsed]=\"section.collapsed || false\"\n        styleClass=\"section-panel\">\n        <ng-template pTemplate=\"header\">\n          <div class=\"section-header\">\n            <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n            <span class=\"section-title\">{{ section.title }}</span>\n          </div>\n        </ng-template>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </p-panel>\n\n      <!-- Heading-only section (title present, style='none' or omitted) -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'none'\" class=\"heading-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Custom content projection -->\n    <ng-content></ng-content>\n  </form>\n</ng-template>\n\n<!-- Field Template -->\n<ng-template #fieldTemplate let-field=\"field\">\n  <sia-dynamic-field-text *ngIf=\"field.type === 'text'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-text>\n  <sia-dynamic-field-textarea *ngIf=\"field.type === 'textarea'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-textarea>\n  <sia-dynamic-field-number *ngIf=\"field.type === 'number' || field.type === 'currency'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-number>\n  <sia-dynamic-field-date *ngIf=\"field.type === 'date'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-date>\n  <sia-dynamic-field-datetime *ngIf=\"field.type === 'datetime'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-datetime>\n  <sia-dynamic-field-dropdown *ngIf=\"field.type === 'dropdown' || field.type === 'enum'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-dropdown>\n  <sia-dynamic-field-lookup *ngIf=\"field.type === 'lookup'\" [field]=\"field\" [form]=\"form\" [formGroup]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-lookup>\n  <sia-dynamic-field-time *ngIf=\"field.type === 'time'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-time>\n  <sia-dynamic-field-checkbox *ngIf=\"field.type === 'checkbox'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-checkbox>\n  <sia-dynamic-field-multiselect *ngIf=\"field.type === 'multiselect'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-multiselect>\n  <sia-dynamic-field-image *ngIf=\"field.type === 'image'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-image>\n</ng-template>\n\n<!-- Inline Edit Field Template -->\n<ng-template #inlineEditFieldTemplate let-field=\"field\">\n  <label class=\"field-label\">{{ field.label | translate }}</label>\n  <div class=\"field-display\" *ngIf=\"!isFieldEditing(field.field)\" (click)=\"startEditField(field.field)\" [class.disabled]=\"field.disabled\">\n    <span class=\"display-value\" [attr.data-placeholder]=\"field.placeholder || ('design.components_ai.not_informed' | translate)\">{{ getFieldDisplayValue(field.field) }}</span>\n    <i class=\"pi pi-pencil edit-icon\" *ngIf=\"!field.disabled\"></i>\n  </div>\n  <div class=\"field-edit\" *ngIf=\"isFieldEditing(field.field)\">\n    <div class=\"input-container\">\n      <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n    </div>\n    <div class=\"edit-actions\">\n      <p-button type=\"button\" icon=\"pi pi-check\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" (onClick)=\"saveInlineField(field.field)\" [loading]=\"savingField\" [disabled]=\"form.get(field.field)?.invalid\" size=\"small\"></p-button>\n      <p-button type=\"button\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" (onClick)=\"cancelInlineEdit()\" [disabled]=\"savingField\" size=\"small\"></p-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dynamic-form{width:100%;display:flex;flex-direction:column;gap:1.5rem}.dynamic-form .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.dynamic-form .grid>div.col-1{grid-column:span 1}.dynamic-form .grid>div.col-2{grid-column:span 2}.dynamic-form .grid>div.col-3{grid-column:span 3}.dynamic-form .grid>div.col-4{grid-column:span 4}.dynamic-form .grid>div.col-5{grid-column:span 5}.dynamic-form .grid>div.col-6{grid-column:span 6}.dynamic-form .grid>div.col-7{grid-column:span 7}.dynamic-form .grid>div.col-8{grid-column:span 8}.dynamic-form .grid>div.col-9{grid-column:span 9}.dynamic-form .grid>div.col-10{grid-column:span 10}.dynamic-form .grid>div.col-11{grid-column:span 11}.dynamic-form .grid>div.col-12{grid-column:span 12}@media (max-width: 575.98px){.dynamic-form .grid>div.col-xs-1{grid-column:span 1}.dynamic-form .grid>div.col-xs-2{grid-column:span 2}.dynamic-form .grid>div.col-xs-3{grid-column:span 3}.dynamic-form .grid>div.col-xs-4{grid-column:span 4}.dynamic-form .grid>div.col-xs-5{grid-column:span 5}.dynamic-form .grid>div.col-xs-6{grid-column:span 6}.dynamic-form .grid>div.col-xs-7{grid-column:span 7}.dynamic-form .grid>div.col-xs-8{grid-column:span 8}.dynamic-form .grid>div.col-xs-9{grid-column:span 9}.dynamic-form .grid>div.col-xs-10{grid-column:span 10}.dynamic-form .grid>div.col-xs-11{grid-column:span 11}.dynamic-form .grid>div.col-xs-12{grid-column:span 12}}@media (min-width: 576px){.dynamic-form .grid>div.col-sm-1{grid-column:span 1}.dynamic-form .grid>div.col-sm-2{grid-column:span 2}.dynamic-form .grid>div.col-sm-3{grid-column:span 3}.dynamic-form .grid>div.col-sm-4{grid-column:span 4}.dynamic-form .grid>div.col-sm-5{grid-column:span 5}.dynamic-form .grid>div.col-sm-6{grid-column:span 6}.dynamic-form .grid>div.col-sm-7{grid-column:span 7}.dynamic-form .grid>div.col-sm-8{grid-column:span 8}.dynamic-form .grid>div.col-sm-9{grid-column:span 9}.dynamic-form .grid>div.col-sm-10{grid-column:span 10}.dynamic-form .grid>div.col-sm-11{grid-column:span 11}.dynamic-form .grid>div.col-sm-12{grid-column:span 12}}@media (min-width: 768px){.dynamic-form .grid>div.col-md-1{grid-column:span 1}.dynamic-form .grid>div.col-md-2{grid-column:span 2}.dynamic-form .grid>div.col-md-3{grid-column:span 3}.dynamic-form .grid>div.col-md-4{grid-column:span 4}.dynamic-form .grid>div.col-md-5{grid-column:span 5}.dynamic-form .grid>div.col-md-6{grid-column:span 6}.dynamic-form .grid>div.col-md-7{grid-column:span 7}.dynamic-form .grid>div.col-md-8{grid-column:span 8}.dynamic-form .grid>div.col-md-9{grid-column:span 9}.dynamic-form .grid>div.col-md-10{grid-column:span 10}.dynamic-form .grid>div.col-md-11{grid-column:span 11}.dynamic-form .grid>div.col-md-12{grid-column:span 12}}@media (min-width: 992px){.dynamic-form .grid>div.col-lg-1{grid-column:span 1}.dynamic-form .grid>div.col-lg-2{grid-column:span 2}.dynamic-form .grid>div.col-lg-3{grid-column:span 3}.dynamic-form .grid>div.col-lg-4{grid-column:span 4}.dynamic-form .grid>div.col-lg-5{grid-column:span 5}.dynamic-form .grid>div.col-lg-6{grid-column:span 6}.dynamic-form .grid>div.col-lg-7{grid-column:span 7}.dynamic-form .grid>div.col-lg-8{grid-column:span 8}.dynamic-form .grid>div.col-lg-9{grid-column:span 9}.dynamic-form .grid>div.col-lg-10{grid-column:span 10}.dynamic-form .grid>div.col-lg-11{grid-column:span 11}.dynamic-form .grid>div.col-lg-12{grid-column:span 12}}@media (min-width: 1200px){.dynamic-form .grid>div.col-xl-1{grid-column:span 1}.dynamic-form .grid>div.col-xl-2{grid-column:span 2}.dynamic-form .grid>div.col-xl-3{grid-column:span 3}.dynamic-form .grid>div.col-xl-4{grid-column:span 4}.dynamic-form .grid>div.col-xl-5{grid-column:span 5}.dynamic-form .grid>div.col-xl-6{grid-column:span 6}.dynamic-form .grid>div.col-xl-7{grid-column:span 7}.dynamic-form .grid>div.col-xl-8{grid-column:span 8}.dynamic-form .grid>div.col-xl-9{grid-column:span 9}.dynamic-form .grid>div.col-xl-10{grid-column:span 10}.dynamic-form .grid>div.col-xl-11{grid-column:span 11}.dynamic-form .grid>div.col-xl-12{grid-column:span 12}}.dynamic-form .bordered-section{border:1px solid var(--p-surface-200, var(--surface-200, #e5e7eb));border-radius:var(--p-border-radius, var(--border-radius, 6px));padding:1.5rem}.dynamic-form .bordered-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .bordered-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form .heading-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .heading-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header{background-color:var(--surface-50)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header{display:flex;align-items:center;gap:.5rem;width:100%}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-icon{font-size:1.1rem;color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-title{font-weight:600;color:var(--text-color)}.dynamic-form ::ng-deep .section-panel .p-panel-content{padding:1.5rem}.dynamic-form .form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--surface-200)}.dialog-footer{display:flex;justify-content:flex-end;gap:.5rem}.drawer-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem;border-top:1px solid var(--surface-200)}.inline-edit-fields{display:flex;flex-direction:column;gap:1rem}.inline-edit-fields .inline-edit-field{display:flex;flex-direction:column;gap:.5rem}.inline-edit-fields .inline-edit-field .field-label{font-weight:500;font-size:.875rem;color:var(--text-color-secondary)}.inline-edit-fields .inline-edit-field .field-display{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background-color:transparent;border:1px solid var(--p-surface-300, var(--surface-300, #d1d5db));border-radius:var(--p-border-radius, var(--border-radius, 6px));cursor:pointer;transition:all .2s ease;min-height:42px}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled){border-color:var(--p-primary-color, var(--primary-color))}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled) .edit-icon{opacity:1}.inline-edit-fields .inline-edit-field .field-display.disabled{cursor:not-allowed;opacity:.6;background-color:var(--p-surface-50, var(--surface-50, #f9fafb))}.inline-edit-fields .inline-edit-field .field-display .display-value{flex:1;color:var(--text-color)}.inline-edit-fields .inline-edit-field .field-display .display-value:empty:before{content:attr(data-placeholder);color:var(--text-color-secondary);font-style:italic}.inline-edit-fields .inline-edit-field .field-display .edit-icon{color:var(--p-primary-color, var(--primary-color));font-size:.875rem;opacity:0;transition:opacity .2s ease}.inline-edit-fields .inline-edit-field .field-edit{display:flex;align-items:center;gap:.5rem}.inline-edit-fields .inline-edit-field .field-edit .input-container{flex:1}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field{gap:0}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field label{display:none}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field small.p-error{display:none}.inline-edit-fields .inline-edit-field .field-edit .edit-actions{display:flex;gap:0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i6$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i9$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: DynamicFieldTextComponent, selector: "sia-dynamic-field-text" }, { kind: "component", type: DynamicFieldNumberComponent, selector: "sia-dynamic-field-number" }, { kind: "component", type: DynamicFieldDateComponent, selector: "sia-dynamic-field-date" }, { kind: "component", type: DynamicFieldDatetimeComponent, selector: "sia-dynamic-field-datetime" }, { kind: "component", type: DynamicFieldDropdownComponent, selector: "sia-dynamic-field-dropdown" }, { kind: "component", type: DynamicFieldLookupComponent, selector: "sia-dynamic-field-lookup", inputs: ["field", "form", "formGroup", "mode"] }, { kind: "component", type: DynamicFieldTextareaComponent, selector: "sia-dynamic-field-textarea" }, { kind: "component", type: DynamicFieldTimeComponent, selector: "sia-dynamic-field-time" }, { kind: "component", type: DynamicFieldCheckboxComponent, selector: "sia-dynamic-field-checkbox" }, { kind: "component", type: DynamicFieldMultiselectComponent, selector: "sia-dynamic-field-multiselect" }, { kind: "component", type: DynamicFieldImageComponent, selector: "sia-dynamic-field-image" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DynamicFormComponent, isStandalone: true, selector: "sia-dynamic-form", inputs: { sections: "sections", entityData: "entityData", mode: "mode", displayMode: "displayMode", visible: "visible", dialogConfig: "dialogConfig", drawerConfig: "drawerConfig", showSubmitButton: "showSubmitButton", showCancelButton: "showCancelButton", submitButtonLabel: "submitButtonLabel", cancelButtonLabel: "cancelButtonLabel", submitButtonIcon: "submitButtonIcon", cancelButtonIcon: "cancelButtonIcon" }, outputs: { formReady: "formReady", formSubmit: "formSubmit", visibleChange: "visibleChange", onCancel: "onCancel", fieldSave: "fieldSave" }, usesOnChanges: true, ngImport: i0, template: "<!-- Inline Mode (no displayMode set) -->\n<ng-container *ngIf=\"isInlineMode\">\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n</ng-container>\n\n<!-- Dialog Mode -->\n<p-dialog\n  *ngIf=\"isDialogMode\"\n  [(visible)]=\"visible\"\n  [header]=\"dialogHeader | translate\"\n  [modal]=\"true\"\n  [style]=\"{ width: dialogWidth }\"\n  [draggable]=\"dialogDraggable\"\n  [resizable]=\"dialogResizable\"\n  [maximizable]=\"dialogMaximizable\"\n  [closeOnEscape]=\"dialogCloseOnEscape\"\n  [dismissableMask]=\"dialogDismissableMask\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"dialog-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<!-- Drawer Mode -->\n<p-drawer\n  *ngIf=\"isDrawerMode\"\n  [(visible)]=\"visible\"\n  [header]=\"drawerHeader | translate\"\n  [position]=\"drawerPosition\"\n  [style]=\"drawerStyle\"\n  [showCloseIcon]=\"drawerShowCloseIcon\"\n  [closeOnEscape]=\"drawerCloseOnEscape\"\n  [modal]=\"drawerDismissable\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"drawer-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- Form Content Template -->\n<ng-template #formContent>\n  <form [formGroup]=\"form\" class=\"dynamic-form\" (keydown)=\"onFormKeydown($event)\" (submit)=\"$event.preventDefault()\">\n\n    <ng-container *ngFor=\"let section of sections\">\n      <!-- No title = bare fields -->\n      <ng-container *ngIf=\"!section.title\">\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Bordered section -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'bordered'\" class=\"bordered-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Panel section -->\n      <p-panel\n        *ngIf=\"section.title && getSectionStyle(section) === 'panel'\"\n        [toggleable]=\"true\"\n        [collapsed]=\"section.collapsed || false\"\n        styleClass=\"section-panel\">\n        <ng-template pTemplate=\"header\">\n          <div class=\"section-header\">\n            <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n            <span class=\"section-title\">{{ section.title }}</span>\n          </div>\n        </ng-template>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </p-panel>\n\n      <!-- Heading-only section (title present, style='none' or omitted) -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'none'\" class=\"heading-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Custom content projection -->\n    <ng-content></ng-content>\n  </form>\n</ng-template>\n\n<!-- Field Template -->\n<ng-template #fieldTemplate let-field=\"field\">\n  <sia-dynamic-field-text *ngIf=\"field.type === 'text'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-text>\n  <sia-dynamic-field-textarea *ngIf=\"field.type === 'textarea'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-textarea>\n  <sia-dynamic-field-number *ngIf=\"field.type === 'number' || field.type === 'currency'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-number>\n  <sia-dynamic-field-date *ngIf=\"field.type === 'date'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-date>\n  <sia-dynamic-field-datetime *ngIf=\"field.type === 'datetime'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-datetime>\n  <sia-dynamic-field-dropdown *ngIf=\"field.type === 'dropdown' || field.type === 'enum'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-dropdown>\n  <sia-dynamic-field-lookup *ngIf=\"field.type === 'lookup'\" [field]=\"field\" [form]=\"form\" [formGroup]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-lookup>\n  <sia-dynamic-field-time *ngIf=\"field.type === 'time'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-time>\n  <sia-dynamic-field-checkbox *ngIf=\"field.type === 'checkbox'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-checkbox>\n  <sia-dynamic-field-multiselect *ngIf=\"field.type === 'multiselect'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-multiselect>\n  <sia-dynamic-field-image *ngIf=\"field.type === 'image'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-image>\n</ng-template>\n\n<!-- Inline Edit Field Template -->\n<ng-template #inlineEditFieldTemplate let-field=\"field\">\n  <label class=\"field-label\">{{ field.label | translate }}</label>\n  <div class=\"field-display\" *ngIf=\"!isFieldEditing(field.field)\" (click)=\"startEditField(field.field)\" [class.disabled]=\"field.disabled\">\n    <span class=\"display-value\" [attr.data-placeholder]=\"field.placeholder || ('design.components_ai.not_informed' | translate)\">{{ getFieldDisplayValue(field.field) }}</span>\n    <i class=\"pi pi-pencil edit-icon\" *ngIf=\"!field.disabled\"></i>\n  </div>\n  <div class=\"field-edit\" *ngIf=\"isFieldEditing(field.field)\">\n    <div class=\"input-container\">\n      <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n    </div>\n    <div class=\"edit-actions\">\n      <p-button type=\"button\" icon=\"pi pi-check\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" (onClick)=\"saveInlineField(field.field)\" [loading]=\"savingField\" [disabled]=\"form.get(field.field)?.invalid\" size=\"small\"></p-button>\n      <p-button type=\"button\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" (onClick)=\"cancelInlineEdit()\" [disabled]=\"savingField\" size=\"small\"></p-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dynamic-form{width:100%;display:flex;flex-direction:column;gap:1.5rem}.dynamic-form .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.dynamic-form .grid>div.col-1{grid-column:span 1}.dynamic-form .grid>div.col-2{grid-column:span 2}.dynamic-form .grid>div.col-3{grid-column:span 3}.dynamic-form .grid>div.col-4{grid-column:span 4}.dynamic-form .grid>div.col-5{grid-column:span 5}.dynamic-form .grid>div.col-6{grid-column:span 6}.dynamic-form .grid>div.col-7{grid-column:span 7}.dynamic-form .grid>div.col-8{grid-column:span 8}.dynamic-form .grid>div.col-9{grid-column:span 9}.dynamic-form .grid>div.col-10{grid-column:span 10}.dynamic-form .grid>div.col-11{grid-column:span 11}.dynamic-form .grid>div.col-12{grid-column:span 12}@media (max-width: 575.98px){.dynamic-form .grid>div.col-xs-1{grid-column:span 1}.dynamic-form .grid>div.col-xs-2{grid-column:span 2}.dynamic-form .grid>div.col-xs-3{grid-column:span 3}.dynamic-form .grid>div.col-xs-4{grid-column:span 4}.dynamic-form .grid>div.col-xs-5{grid-column:span 5}.dynamic-form .grid>div.col-xs-6{grid-column:span 6}.dynamic-form .grid>div.col-xs-7{grid-column:span 7}.dynamic-form .grid>div.col-xs-8{grid-column:span 8}.dynamic-form .grid>div.col-xs-9{grid-column:span 9}.dynamic-form .grid>div.col-xs-10{grid-column:span 10}.dynamic-form .grid>div.col-xs-11{grid-column:span 11}.dynamic-form .grid>div.col-xs-12{grid-column:span 12}}@media (min-width: 576px){.dynamic-form .grid>div.col-sm-1{grid-column:span 1}.dynamic-form .grid>div.col-sm-2{grid-column:span 2}.dynamic-form .grid>div.col-sm-3{grid-column:span 3}.dynamic-form .grid>div.col-sm-4{grid-column:span 4}.dynamic-form .grid>div.col-sm-5{grid-column:span 5}.dynamic-form .grid>div.col-sm-6{grid-column:span 6}.dynamic-form .grid>div.col-sm-7{grid-column:span 7}.dynamic-form .grid>div.col-sm-8{grid-column:span 8}.dynamic-form .grid>div.col-sm-9{grid-column:span 9}.dynamic-form .grid>div.col-sm-10{grid-column:span 10}.dynamic-form .grid>div.col-sm-11{grid-column:span 11}.dynamic-form .grid>div.col-sm-12{grid-column:span 12}}@media (min-width: 768px){.dynamic-form .grid>div.col-md-1{grid-column:span 1}.dynamic-form .grid>div.col-md-2{grid-column:span 2}.dynamic-form .grid>div.col-md-3{grid-column:span 3}.dynamic-form .grid>div.col-md-4{grid-column:span 4}.dynamic-form .grid>div.col-md-5{grid-column:span 5}.dynamic-form .grid>div.col-md-6{grid-column:span 6}.dynamic-form .grid>div.col-md-7{grid-column:span 7}.dynamic-form .grid>div.col-md-8{grid-column:span 8}.dynamic-form .grid>div.col-md-9{grid-column:span 9}.dynamic-form .grid>div.col-md-10{grid-column:span 10}.dynamic-form .grid>div.col-md-11{grid-column:span 11}.dynamic-form .grid>div.col-md-12{grid-column:span 12}}@media (min-width: 992px){.dynamic-form .grid>div.col-lg-1{grid-column:span 1}.dynamic-form .grid>div.col-lg-2{grid-column:span 2}.dynamic-form .grid>div.col-lg-3{grid-column:span 3}.dynamic-form .grid>div.col-lg-4{grid-column:span 4}.dynamic-form .grid>div.col-lg-5{grid-column:span 5}.dynamic-form .grid>div.col-lg-6{grid-column:span 6}.dynamic-form .grid>div.col-lg-7{grid-column:span 7}.dynamic-form .grid>div.col-lg-8{grid-column:span 8}.dynamic-form .grid>div.col-lg-9{grid-column:span 9}.dynamic-form .grid>div.col-lg-10{grid-column:span 10}.dynamic-form .grid>div.col-lg-11{grid-column:span 11}.dynamic-form .grid>div.col-lg-12{grid-column:span 12}}@media (min-width: 1200px){.dynamic-form .grid>div.col-xl-1{grid-column:span 1}.dynamic-form .grid>div.col-xl-2{grid-column:span 2}.dynamic-form .grid>div.col-xl-3{grid-column:span 3}.dynamic-form .grid>div.col-xl-4{grid-column:span 4}.dynamic-form .grid>div.col-xl-5{grid-column:span 5}.dynamic-form .grid>div.col-xl-6{grid-column:span 6}.dynamic-form .grid>div.col-xl-7{grid-column:span 7}.dynamic-form .grid>div.col-xl-8{grid-column:span 8}.dynamic-form .grid>div.col-xl-9{grid-column:span 9}.dynamic-form .grid>div.col-xl-10{grid-column:span 10}.dynamic-form .grid>div.col-xl-11{grid-column:span 11}.dynamic-form .grid>div.col-xl-12{grid-column:span 12}}.dynamic-form .bordered-section{border:1px solid var(--p-surface-200, var(--surface-200, #e5e7eb));border-radius:var(--p-border-radius, var(--border-radius, 6px));padding:1.5rem}.dynamic-form .bordered-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .bordered-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form .heading-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .heading-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header{background-color:var(--surface-50)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header{display:flex;align-items:center;gap:.5rem;width:100%}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-icon{font-size:1.1rem;color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-title{font-weight:600;color:var(--text-color)}.dynamic-form ::ng-deep .section-panel .p-panel-content{padding:1.5rem}.dynamic-form .form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--surface-200)}.dialog-footer{display:flex;justify-content:flex-end;gap:.5rem}.drawer-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem;border-top:1px solid var(--surface-200)}.inline-edit-fields{display:flex;flex-direction:column;gap:1rem}.inline-edit-fields .inline-edit-field{display:flex;flex-direction:column;gap:.5rem}.inline-edit-fields .inline-edit-field .field-label{font-weight:500;font-size:.875rem;color:var(--text-color-secondary)}.inline-edit-fields .inline-edit-field .field-display{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background-color:transparent;border:1px solid var(--p-surface-300, var(--surface-300, #d1d5db));border-radius:var(--p-border-radius, var(--border-radius, 6px));cursor:pointer;transition:all .2s ease;min-height:42px}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled){border-color:var(--p-primary-color, var(--primary-color))}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled) .edit-icon{opacity:1}.inline-edit-fields .inline-edit-field .field-display.disabled{cursor:not-allowed;opacity:.6;background-color:var(--p-surface-50, var(--surface-50, #f9fafb))}.inline-edit-fields .inline-edit-field .field-display .display-value{flex:1;color:var(--text-color)}.inline-edit-fields .inline-edit-field .field-display .display-value:empty:before{content:attr(data-placeholder);color:var(--text-color-secondary);font-style:italic}.inline-edit-fields .inline-edit-field .field-display .edit-icon{color:var(--p-primary-color, var(--primary-color));font-size:.875rem;opacity:0;transition:opacity .2s ease}.inline-edit-fields .inline-edit-field .field-edit{display:flex;align-items:center;gap:.5rem}.inline-edit-fields .inline-edit-field .field-edit .input-container{flex:1}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field{gap:0}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field label{display:none}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field small.p-error{display:none}.inline-edit-fields .inline-edit-field .field-edit .edit-actions{display:flex;gap:0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i6$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i9$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: DynamicFieldTextComponent, selector: "sia-dynamic-field-text" }, { kind: "component", type: DynamicFieldNumberComponent, selector: "sia-dynamic-field-number" }, { kind: "component", type: DynamicFieldDateComponent, selector: "sia-dynamic-field-date" }, { kind: "component", type: DynamicFieldDatetimeComponent, selector: "sia-dynamic-field-datetime" }, { kind: "component", type: DynamicFieldDropdownComponent, selector: "sia-dynamic-field-dropdown" }, { kind: "component", type: DynamicFieldLookupComponent, selector: "sia-dynamic-field-lookup", inputs: ["field", "form", "formGroup", "mode"] }, { kind: "component", type: DynamicFieldTextareaComponent, selector: "sia-dynamic-field-textarea" }, { kind: "component", type: DynamicFieldTimeComponent, selector: "sia-dynamic-field-time" }, { kind: "component", type: DynamicFieldCheckboxComponent, selector: "sia-dynamic-field-checkbox" }, { kind: "component", type: DynamicFieldMultiselectComponent, selector: "sia-dynamic-field-multiselect" }, { kind: "component", type: DynamicFieldImageComponent, selector: "sia-dynamic-field-image" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -5861,7 +5859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         DynamicFieldCheckboxComponent,
                         DynamicFieldMultiselectComponent,
                         DynamicFieldImageComponent
-                    ], template: "<!-- Inline Mode (no displayMode set) -->\n<ng-container *ngIf=\"isInlineMode\">\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n</ng-container>\n\n<!-- Dialog Mode -->\n<p-dialog\n  *ngIf=\"isDialogMode\"\n  [(visible)]=\"visible\"\n  [header]=\"dialogHeader | translate\"\n  [modal]=\"true\"\n  [style]=\"{ width: dialogWidth }\"\n  [draggable]=\"dialogDraggable\"\n  [resizable]=\"dialogResizable\"\n  [maximizable]=\"dialogMaximizable\"\n  [closeOnEscape]=\"dialogCloseOnEscape\"\n  [dismissableMask]=\"dialogDismissableMask\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"dialog-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<!-- Drawer Mode -->\n<p-drawer\n  *ngIf=\"isDrawerMode\"\n  [(visible)]=\"visible\"\n  [header]=\"drawerHeader | translate\"\n  [position]=\"drawerPosition\"\n  [style]=\"drawerStyle\"\n  [showCloseIcon]=\"drawerShowCloseIcon\"\n  [closeOnEscape]=\"drawerCloseOnEscape\"\n  [modal]=\"drawerDismissable\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"drawer-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- Form Content Template -->\n<ng-template #formContent>\n  <form [formGroup]=\"form\" class=\"dynamic-form\" (keydown)=\"onFormKeydown($event)\">\n\n    <ng-container *ngFor=\"let section of sections\">\n      <!-- No title = bare fields -->\n      <ng-container *ngIf=\"!section.title\">\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Bordered section -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'bordered'\" class=\"bordered-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Panel section -->\n      <p-panel\n        *ngIf=\"section.title && getSectionStyle(section) === 'panel'\"\n        [toggleable]=\"true\"\n        [collapsed]=\"section.collapsed || false\"\n        styleClass=\"section-panel\">\n        <ng-template pTemplate=\"header\">\n          <div class=\"section-header\">\n            <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n            <span class=\"section-title\">{{ section.title }}</span>\n          </div>\n        </ng-template>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </p-panel>\n\n      <!-- Heading-only section (title present, style='none' or omitted) -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'none'\" class=\"heading-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Custom content projection -->\n    <ng-content></ng-content>\n  </form>\n</ng-template>\n\n<!-- Field Template -->\n<ng-template #fieldTemplate let-field=\"field\">\n  <sia-dynamic-field-text *ngIf=\"field.type === 'text'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-text>\n  <sia-dynamic-field-textarea *ngIf=\"field.type === 'textarea'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-textarea>\n  <sia-dynamic-field-number *ngIf=\"field.type === 'number' || field.type === 'currency'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-number>\n  <sia-dynamic-field-date *ngIf=\"field.type === 'date'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-date>\n  <sia-dynamic-field-datetime *ngIf=\"field.type === 'datetime'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-datetime>\n  <sia-dynamic-field-dropdown *ngIf=\"field.type === 'dropdown' || field.type === 'enum'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-dropdown>\n  <sia-dynamic-field-lookup *ngIf=\"field.type === 'lookup'\" [field]=\"field\" [form]=\"form\" [formGroup]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-lookup>\n  <sia-dynamic-field-time *ngIf=\"field.type === 'time'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-time>\n  <sia-dynamic-field-checkbox *ngIf=\"field.type === 'checkbox'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-checkbox>\n  <sia-dynamic-field-multiselect *ngIf=\"field.type === 'multiselect'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-multiselect>\n  <sia-dynamic-field-image *ngIf=\"field.type === 'image'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-image>\n</ng-template>\n\n<!-- Inline Edit Field Template -->\n<ng-template #inlineEditFieldTemplate let-field=\"field\">\n  <label class=\"field-label\">{{ field.label | translate }}</label>\n  <div class=\"field-display\" *ngIf=\"!isFieldEditing(field.field)\" (click)=\"startEditField(field.field)\" [class.disabled]=\"field.disabled\">\n    <span class=\"display-value\" [attr.data-placeholder]=\"field.placeholder || ('design.components_ai.not_informed' | translate)\">{{ getFieldDisplayValue(field.field) }}</span>\n    <i class=\"pi pi-pencil edit-icon\" *ngIf=\"!field.disabled\"></i>\n  </div>\n  <div class=\"field-edit\" *ngIf=\"isFieldEditing(field.field)\">\n    <div class=\"input-container\">\n      <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n    </div>\n    <div class=\"edit-actions\">\n      <p-button type=\"button\" icon=\"pi pi-check\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" (onClick)=\"saveInlineField(field.field)\" [loading]=\"savingField\" [disabled]=\"form.get(field.field)?.invalid\" size=\"small\"></p-button>\n      <p-button type=\"button\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" (onClick)=\"cancelInlineEdit()\" [disabled]=\"savingField\" size=\"small\"></p-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dynamic-form{width:100%;display:flex;flex-direction:column;gap:1.5rem}.dynamic-form .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.dynamic-form .grid>div.col-1{grid-column:span 1}.dynamic-form .grid>div.col-2{grid-column:span 2}.dynamic-form .grid>div.col-3{grid-column:span 3}.dynamic-form .grid>div.col-4{grid-column:span 4}.dynamic-form .grid>div.col-5{grid-column:span 5}.dynamic-form .grid>div.col-6{grid-column:span 6}.dynamic-form .grid>div.col-7{grid-column:span 7}.dynamic-form .grid>div.col-8{grid-column:span 8}.dynamic-form .grid>div.col-9{grid-column:span 9}.dynamic-form .grid>div.col-10{grid-column:span 10}.dynamic-form .grid>div.col-11{grid-column:span 11}.dynamic-form .grid>div.col-12{grid-column:span 12}@media (max-width: 575.98px){.dynamic-form .grid>div.col-xs-1{grid-column:span 1}.dynamic-form .grid>div.col-xs-2{grid-column:span 2}.dynamic-form .grid>div.col-xs-3{grid-column:span 3}.dynamic-form .grid>div.col-xs-4{grid-column:span 4}.dynamic-form .grid>div.col-xs-5{grid-column:span 5}.dynamic-form .grid>div.col-xs-6{grid-column:span 6}.dynamic-form .grid>div.col-xs-7{grid-column:span 7}.dynamic-form .grid>div.col-xs-8{grid-column:span 8}.dynamic-form .grid>div.col-xs-9{grid-column:span 9}.dynamic-form .grid>div.col-xs-10{grid-column:span 10}.dynamic-form .grid>div.col-xs-11{grid-column:span 11}.dynamic-form .grid>div.col-xs-12{grid-column:span 12}}@media (min-width: 576px){.dynamic-form .grid>div.col-sm-1{grid-column:span 1}.dynamic-form .grid>div.col-sm-2{grid-column:span 2}.dynamic-form .grid>div.col-sm-3{grid-column:span 3}.dynamic-form .grid>div.col-sm-4{grid-column:span 4}.dynamic-form .grid>div.col-sm-5{grid-column:span 5}.dynamic-form .grid>div.col-sm-6{grid-column:span 6}.dynamic-form .grid>div.col-sm-7{grid-column:span 7}.dynamic-form .grid>div.col-sm-8{grid-column:span 8}.dynamic-form .grid>div.col-sm-9{grid-column:span 9}.dynamic-form .grid>div.col-sm-10{grid-column:span 10}.dynamic-form .grid>div.col-sm-11{grid-column:span 11}.dynamic-form .grid>div.col-sm-12{grid-column:span 12}}@media (min-width: 768px){.dynamic-form .grid>div.col-md-1{grid-column:span 1}.dynamic-form .grid>div.col-md-2{grid-column:span 2}.dynamic-form .grid>div.col-md-3{grid-column:span 3}.dynamic-form .grid>div.col-md-4{grid-column:span 4}.dynamic-form .grid>div.col-md-5{grid-column:span 5}.dynamic-form .grid>div.col-md-6{grid-column:span 6}.dynamic-form .grid>div.col-md-7{grid-column:span 7}.dynamic-form .grid>div.col-md-8{grid-column:span 8}.dynamic-form .grid>div.col-md-9{grid-column:span 9}.dynamic-form .grid>div.col-md-10{grid-column:span 10}.dynamic-form .grid>div.col-md-11{grid-column:span 11}.dynamic-form .grid>div.col-md-12{grid-column:span 12}}@media (min-width: 992px){.dynamic-form .grid>div.col-lg-1{grid-column:span 1}.dynamic-form .grid>div.col-lg-2{grid-column:span 2}.dynamic-form .grid>div.col-lg-3{grid-column:span 3}.dynamic-form .grid>div.col-lg-4{grid-column:span 4}.dynamic-form .grid>div.col-lg-5{grid-column:span 5}.dynamic-form .grid>div.col-lg-6{grid-column:span 6}.dynamic-form .grid>div.col-lg-7{grid-column:span 7}.dynamic-form .grid>div.col-lg-8{grid-column:span 8}.dynamic-form .grid>div.col-lg-9{grid-column:span 9}.dynamic-form .grid>div.col-lg-10{grid-column:span 10}.dynamic-form .grid>div.col-lg-11{grid-column:span 11}.dynamic-form .grid>div.col-lg-12{grid-column:span 12}}@media (min-width: 1200px){.dynamic-form .grid>div.col-xl-1{grid-column:span 1}.dynamic-form .grid>div.col-xl-2{grid-column:span 2}.dynamic-form .grid>div.col-xl-3{grid-column:span 3}.dynamic-form .grid>div.col-xl-4{grid-column:span 4}.dynamic-form .grid>div.col-xl-5{grid-column:span 5}.dynamic-form .grid>div.col-xl-6{grid-column:span 6}.dynamic-form .grid>div.col-xl-7{grid-column:span 7}.dynamic-form .grid>div.col-xl-8{grid-column:span 8}.dynamic-form .grid>div.col-xl-9{grid-column:span 9}.dynamic-form .grid>div.col-xl-10{grid-column:span 10}.dynamic-form .grid>div.col-xl-11{grid-column:span 11}.dynamic-form .grid>div.col-xl-12{grid-column:span 12}}.dynamic-form .bordered-section{border:1px solid var(--p-surface-200, var(--surface-200, #e5e7eb));border-radius:var(--p-border-radius, var(--border-radius, 6px));padding:1.5rem}.dynamic-form .bordered-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .bordered-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form .heading-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .heading-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header{background-color:var(--surface-50)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header{display:flex;align-items:center;gap:.5rem;width:100%}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-icon{font-size:1.1rem;color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-title{font-weight:600;color:var(--text-color)}.dynamic-form ::ng-deep .section-panel .p-panel-content{padding:1.5rem}.dynamic-form .form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--surface-200)}.dialog-footer{display:flex;justify-content:flex-end;gap:.5rem}.drawer-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem;border-top:1px solid var(--surface-200)}.inline-edit-fields{display:flex;flex-direction:column;gap:1rem}.inline-edit-fields .inline-edit-field{display:flex;flex-direction:column;gap:.5rem}.inline-edit-fields .inline-edit-field .field-label{font-weight:500;font-size:.875rem;color:var(--text-color-secondary)}.inline-edit-fields .inline-edit-field .field-display{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background-color:transparent;border:1px solid var(--p-surface-300, var(--surface-300, #d1d5db));border-radius:var(--p-border-radius, var(--border-radius, 6px));cursor:pointer;transition:all .2s ease;min-height:42px}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled){border-color:var(--p-primary-color, var(--primary-color))}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled) .edit-icon{opacity:1}.inline-edit-fields .inline-edit-field .field-display.disabled{cursor:not-allowed;opacity:.6;background-color:var(--p-surface-50, var(--surface-50, #f9fafb))}.inline-edit-fields .inline-edit-field .field-display .display-value{flex:1;color:var(--text-color)}.inline-edit-fields .inline-edit-field .field-display .display-value:empty:before{content:attr(data-placeholder);color:var(--text-color-secondary);font-style:italic}.inline-edit-fields .inline-edit-field .field-display .edit-icon{color:var(--p-primary-color, var(--primary-color));font-size:.875rem;opacity:0;transition:opacity .2s ease}.inline-edit-fields .inline-edit-field .field-edit{display:flex;align-items:center;gap:.5rem}.inline-edit-fields .inline-edit-field .field-edit .input-container{flex:1}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field{gap:0}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field label{display:none}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field small.p-error{display:none}.inline-edit-fields .inline-edit-field .field-edit .edit-actions{display:flex;gap:0;flex-shrink:0}\n"] }]
+                    ], template: "<!-- Inline Mode (no displayMode set) -->\n<ng-container *ngIf=\"isInlineMode\">\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n</ng-container>\n\n<!-- Dialog Mode -->\n<p-dialog\n  *ngIf=\"isDialogMode\"\n  [(visible)]=\"visible\"\n  [header]=\"dialogHeader | translate\"\n  [modal]=\"true\"\n  [style]=\"{ width: dialogWidth }\"\n  [draggable]=\"dialogDraggable\"\n  [resizable]=\"dialogResizable\"\n  [maximizable]=\"dialogMaximizable\"\n  [closeOnEscape]=\"dialogCloseOnEscape\"\n  [dismissableMask]=\"dialogDismissableMask\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"dialog-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<!-- Drawer Mode -->\n<p-drawer\n  *ngIf=\"isDrawerMode\"\n  [(visible)]=\"visible\"\n  [header]=\"drawerHeader | translate\"\n  [position]=\"drawerPosition\"\n  [style]=\"drawerStyle\"\n  [showCloseIcon]=\"drawerShowCloseIcon\"\n  [closeOnEscape]=\"drawerCloseOnEscape\"\n  [modal]=\"drawerDismissable\"\n  (onHide)=\"close()\">\n\n  <ng-container *ngTemplateOutlet=\"formContent\"></ng-container>\n\n  <ng-template pTemplate=\"footer\" *ngIf=\"showSubmitButton || showCancelButton\">\n    <div class=\"drawer-footer\">\n      <p-button *ngIf=\"showCancelButton\" [label]=\"cancelLabel | translate\" [icon]=\"cancelButtonIcon\" severity=\"secondary\" (onClick)=\"handleCancel()\" [disabled]=\"loading\"></p-button>\n      <p-button *ngIf=\"showSubmitButton\" [label]=\"submitLabel | translate\" [icon]=\"submitButtonIcon\" (onClick)=\"handleSubmit()\" [loading]=\"loading\" [disabled]=\"form.invalid\"></p-button>\n    </div>\n  </ng-template>\n</p-drawer>\n\n<!-- Form Content Template -->\n<ng-template #formContent>\n  <form [formGroup]=\"form\" class=\"dynamic-form\" (keydown)=\"onFormKeydown($event)\" (submit)=\"$event.preventDefault()\">\n\n    <ng-container *ngFor=\"let section of sections\">\n      <!-- No title = bare fields -->\n      <ng-container *ngIf=\"!section.title\">\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Bordered section -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'bordered'\" class=\"bordered-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n      <!-- Panel section -->\n      <p-panel\n        *ngIf=\"section.title && getSectionStyle(section) === 'panel'\"\n        [toggleable]=\"true\"\n        [collapsed]=\"section.collapsed || false\"\n        styleClass=\"section-panel\">\n        <ng-template pTemplate=\"header\">\n          <div class=\"section-header\">\n            <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n            <span class=\"section-title\">{{ section.title }}</span>\n          </div>\n        </ng-template>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </p-panel>\n\n      <!-- Heading-only section (title present, style='none' or omitted) -->\n      <div *ngIf=\"section.title && getSectionStyle(section) === 'none'\" class=\"heading-section\">\n        <h3 class=\"section-heading\">\n          <i *ngIf=\"section.icon\" [class]=\"section.icon + ' section-icon'\"></i>\n          {{ section.title }}\n        </h3>\n        <div *ngIf=\"!isInlineEditMode\" class=\"grid\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" [ngClass]=\"getFieldGridClass(field)\">\n              <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"isInlineEditMode\" class=\"inline-edit-fields\">\n          <ng-container *ngFor=\"let field of section.fields\">\n            <div *ngIf=\"isFieldVisible(field)\" class=\"inline-edit-field\">\n              <ng-container *ngTemplateOutlet=\"inlineEditFieldTemplate; context: { field: field }\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Custom content projection -->\n    <ng-content></ng-content>\n  </form>\n</ng-template>\n\n<!-- Field Template -->\n<ng-template #fieldTemplate let-field=\"field\">\n  <sia-dynamic-field-text *ngIf=\"field.type === 'text'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-text>\n  <sia-dynamic-field-textarea *ngIf=\"field.type === 'textarea'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-textarea>\n  <sia-dynamic-field-number *ngIf=\"field.type === 'number' || field.type === 'currency'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-number>\n  <sia-dynamic-field-date *ngIf=\"field.type === 'date'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-date>\n  <sia-dynamic-field-datetime *ngIf=\"field.type === 'datetime'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-datetime>\n  <sia-dynamic-field-dropdown *ngIf=\"field.type === 'dropdown' || field.type === 'enum'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-dropdown>\n  <sia-dynamic-field-lookup *ngIf=\"field.type === 'lookup'\" [field]=\"field\" [form]=\"form\" [formGroup]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-lookup>\n  <sia-dynamic-field-time *ngIf=\"field.type === 'time'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-time>\n  <sia-dynamic-field-checkbox *ngIf=\"field.type === 'checkbox'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-checkbox>\n  <sia-dynamic-field-multiselect *ngIf=\"field.type === 'multiselect'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-multiselect>\n  <sia-dynamic-field-image *ngIf=\"field.type === 'image'\" [field]=\"field\" [form]=\"form\" [mode]=\"'form'\"></sia-dynamic-field-image>\n</ng-template>\n\n<!-- Inline Edit Field Template -->\n<ng-template #inlineEditFieldTemplate let-field=\"field\">\n  <label class=\"field-label\">{{ field.label | translate }}</label>\n  <div class=\"field-display\" *ngIf=\"!isFieldEditing(field.field)\" (click)=\"startEditField(field.field)\" [class.disabled]=\"field.disabled\">\n    <span class=\"display-value\" [attr.data-placeholder]=\"field.placeholder || ('design.components_ai.not_informed' | translate)\">{{ getFieldDisplayValue(field.field) }}</span>\n    <i class=\"pi pi-pencil edit-icon\" *ngIf=\"!field.disabled\"></i>\n  </div>\n  <div class=\"field-edit\" *ngIf=\"isFieldEditing(field.field)\">\n    <div class=\"input-container\">\n      <ng-container *ngTemplateOutlet=\"fieldTemplate; context: { field: field }\"></ng-container>\n    </div>\n    <div class=\"edit-actions\">\n      <p-button type=\"button\" icon=\"pi pi-check\" [rounded]=\"true\" [text]=\"true\" severity=\"success\" (onClick)=\"saveInlineField(field.field)\" [loading]=\"savingField\" [disabled]=\"form.get(field.field)?.invalid\" size=\"small\"></p-button>\n      <p-button type=\"button\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" (onClick)=\"cancelInlineEdit()\" [disabled]=\"savingField\" size=\"small\"></p-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dynamic-form{width:100%;display:flex;flex-direction:column;gap:1.5rem}.dynamic-form .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.dynamic-form .grid>div.col-1{grid-column:span 1}.dynamic-form .grid>div.col-2{grid-column:span 2}.dynamic-form .grid>div.col-3{grid-column:span 3}.dynamic-form .grid>div.col-4{grid-column:span 4}.dynamic-form .grid>div.col-5{grid-column:span 5}.dynamic-form .grid>div.col-6{grid-column:span 6}.dynamic-form .grid>div.col-7{grid-column:span 7}.dynamic-form .grid>div.col-8{grid-column:span 8}.dynamic-form .grid>div.col-9{grid-column:span 9}.dynamic-form .grid>div.col-10{grid-column:span 10}.dynamic-form .grid>div.col-11{grid-column:span 11}.dynamic-form .grid>div.col-12{grid-column:span 12}@media (max-width: 575.98px){.dynamic-form .grid>div.col-xs-1{grid-column:span 1}.dynamic-form .grid>div.col-xs-2{grid-column:span 2}.dynamic-form .grid>div.col-xs-3{grid-column:span 3}.dynamic-form .grid>div.col-xs-4{grid-column:span 4}.dynamic-form .grid>div.col-xs-5{grid-column:span 5}.dynamic-form .grid>div.col-xs-6{grid-column:span 6}.dynamic-form .grid>div.col-xs-7{grid-column:span 7}.dynamic-form .grid>div.col-xs-8{grid-column:span 8}.dynamic-form .grid>div.col-xs-9{grid-column:span 9}.dynamic-form .grid>div.col-xs-10{grid-column:span 10}.dynamic-form .grid>div.col-xs-11{grid-column:span 11}.dynamic-form .grid>div.col-xs-12{grid-column:span 12}}@media (min-width: 576px){.dynamic-form .grid>div.col-sm-1{grid-column:span 1}.dynamic-form .grid>div.col-sm-2{grid-column:span 2}.dynamic-form .grid>div.col-sm-3{grid-column:span 3}.dynamic-form .grid>div.col-sm-4{grid-column:span 4}.dynamic-form .grid>div.col-sm-5{grid-column:span 5}.dynamic-form .grid>div.col-sm-6{grid-column:span 6}.dynamic-form .grid>div.col-sm-7{grid-column:span 7}.dynamic-form .grid>div.col-sm-8{grid-column:span 8}.dynamic-form .grid>div.col-sm-9{grid-column:span 9}.dynamic-form .grid>div.col-sm-10{grid-column:span 10}.dynamic-form .grid>div.col-sm-11{grid-column:span 11}.dynamic-form .grid>div.col-sm-12{grid-column:span 12}}@media (min-width: 768px){.dynamic-form .grid>div.col-md-1{grid-column:span 1}.dynamic-form .grid>div.col-md-2{grid-column:span 2}.dynamic-form .grid>div.col-md-3{grid-column:span 3}.dynamic-form .grid>div.col-md-4{grid-column:span 4}.dynamic-form .grid>div.col-md-5{grid-column:span 5}.dynamic-form .grid>div.col-md-6{grid-column:span 6}.dynamic-form .grid>div.col-md-7{grid-column:span 7}.dynamic-form .grid>div.col-md-8{grid-column:span 8}.dynamic-form .grid>div.col-md-9{grid-column:span 9}.dynamic-form .grid>div.col-md-10{grid-column:span 10}.dynamic-form .grid>div.col-md-11{grid-column:span 11}.dynamic-form .grid>div.col-md-12{grid-column:span 12}}@media (min-width: 992px){.dynamic-form .grid>div.col-lg-1{grid-column:span 1}.dynamic-form .grid>div.col-lg-2{grid-column:span 2}.dynamic-form .grid>div.col-lg-3{grid-column:span 3}.dynamic-form .grid>div.col-lg-4{grid-column:span 4}.dynamic-form .grid>div.col-lg-5{grid-column:span 5}.dynamic-form .grid>div.col-lg-6{grid-column:span 6}.dynamic-form .grid>div.col-lg-7{grid-column:span 7}.dynamic-form .grid>div.col-lg-8{grid-column:span 8}.dynamic-form .grid>div.col-lg-9{grid-column:span 9}.dynamic-form .grid>div.col-lg-10{grid-column:span 10}.dynamic-form .grid>div.col-lg-11{grid-column:span 11}.dynamic-form .grid>div.col-lg-12{grid-column:span 12}}@media (min-width: 1200px){.dynamic-form .grid>div.col-xl-1{grid-column:span 1}.dynamic-form .grid>div.col-xl-2{grid-column:span 2}.dynamic-form .grid>div.col-xl-3{grid-column:span 3}.dynamic-form .grid>div.col-xl-4{grid-column:span 4}.dynamic-form .grid>div.col-xl-5{grid-column:span 5}.dynamic-form .grid>div.col-xl-6{grid-column:span 6}.dynamic-form .grid>div.col-xl-7{grid-column:span 7}.dynamic-form .grid>div.col-xl-8{grid-column:span 8}.dynamic-form .grid>div.col-xl-9{grid-column:span 9}.dynamic-form .grid>div.col-xl-10{grid-column:span 10}.dynamic-form .grid>div.col-xl-11{grid-column:span 11}.dynamic-form .grid>div.col-xl-12{grid-column:span 12}}.dynamic-form .bordered-section{border:1px solid var(--p-surface-200, var(--surface-200, #e5e7eb));border-radius:var(--p-border-radius, var(--border-radius, 6px));padding:1.5rem}.dynamic-form .bordered-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .bordered-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form .heading-section .section-heading{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:.5rem}.dynamic-form .heading-section .section-heading .section-icon{color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header{background-color:var(--surface-50)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header{display:flex;align-items:center;gap:.5rem;width:100%}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-icon{font-size:1.1rem;color:var(--primary-color)}.dynamic-form ::ng-deep .section-panel .p-panel-header .section-header .section-title{font-weight:600;color:var(--text-color)}.dynamic-form ::ng-deep .section-panel .p-panel-content{padding:1.5rem}.dynamic-form .form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--surface-200)}.dialog-footer{display:flex;justify-content:flex-end;gap:.5rem}.drawer-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem;border-top:1px solid var(--surface-200)}.inline-edit-fields{display:flex;flex-direction:column;gap:1rem}.inline-edit-fields .inline-edit-field{display:flex;flex-direction:column;gap:.5rem}.inline-edit-fields .inline-edit-field .field-label{font-weight:500;font-size:.875rem;color:var(--text-color-secondary)}.inline-edit-fields .inline-edit-field .field-display{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background-color:transparent;border:1px solid var(--p-surface-300, var(--surface-300, #d1d5db));border-radius:var(--p-border-radius, var(--border-radius, 6px));cursor:pointer;transition:all .2s ease;min-height:42px}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled){border-color:var(--p-primary-color, var(--primary-color))}.inline-edit-fields .inline-edit-field .field-display:hover:not(.disabled) .edit-icon{opacity:1}.inline-edit-fields .inline-edit-field .field-display.disabled{cursor:not-allowed;opacity:.6;background-color:var(--p-surface-50, var(--surface-50, #f9fafb))}.inline-edit-fields .inline-edit-field .field-display .display-value{flex:1;color:var(--text-color)}.inline-edit-fields .inline-edit-field .field-display .display-value:empty:before{content:attr(data-placeholder);color:var(--text-color-secondary);font-style:italic}.inline-edit-fields .inline-edit-field .field-display .edit-icon{color:var(--p-primary-color, var(--primary-color));font-size:.875rem;opacity:0;transition:opacity .2s ease}.inline-edit-fields .inline-edit-field .field-edit{display:flex;align-items:center;gap:.5rem}.inline-edit-fields .inline-edit-field .field-edit .input-container{flex:1}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field{gap:0}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field label{display:none}.inline-edit-fields .inline-edit-field .field-edit .input-container ::ng-deep .field small.p-error{display:none}.inline-edit-fields .inline-edit-field .field-edit .edit-actions{display:flex;gap:0;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: TranslationService }, { type: MaskService }, { type: LocaleService }], propDecorators: { sections: [{
                 type: Input
             }], entityData: [{
@@ -6566,7 +6564,7 @@ const createFilterString = (formField, value) => {
             return getEnumQuery(name, value, multiple);
         case FieldType.String: {
             const escapedValue = escapeFilterValue(String(value));
-            return `upper(${name}) like upper('${escapedValue}%')`;
+            return `containing(upper(${name}), upper('${escapedValue}'))`;
         }
         case FieldType.Lookup: {
             const lookupId = typeof value === 'object' ? value.id : value;