@praxisui/crud 9.0.0-beta.4 → 9.0.0-beta.40

package/fesm2022/praxisui-crud.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, ChangeDetectorRef, Injector, ViewChild, Output, Input, Inject, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Injectable, InjectionToken, inject, input, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, ChangeDetectorRef, Injector, ViewChild, Output, Input, Inject, ViewEncapsulation, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
@@ -10,6 +10,7 @@ import { ASYNC_CONFIG_STORAGE, GlobalConfigService, CrudOperationResolutionServi
 import { SettingsPanelService } from '@praxisui/settings-panel';
 import { PraxisTableInlineAuthoringEditorComponent, PraxisTable } from '@praxisui/table';
 import { ConfirmDialogComponent } from '@praxisui/dynamic-fields';
+import { take, filter } from 'rxjs/operators';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 export { MAT_DIALOG_DATA as DIALOG_DATA } from '@angular/material/dialog';
@@ -34,7 +35,6 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { PraxisDynamicForm } from '@praxisui/dynamic-form';
-import { filter, take } from 'rxjs/operators';
 
 class DialogService {
     matDialog;
@@ -95,22 +95,6 @@ class CrudLauncherService {
             await this.router.navigateByUrl(url);
             return { mode };
         }
-        if (mode === 'drawer' && this.drawerAdapter) {
-            const actionForLaunch = this.resolveActionForLaunch(merged.action, merged.metadata);
-            const inputs = this.mapInputs(actionForLaunch, row, merged.metadata, runtime);
-            const idField = merged.metadata.resource?.idField ?? 'id';
-            if (row && inputs[idField] === undefined && row[idField] !== undefined) {
-                inputs[idField] = row[idField];
-            }
-            await Promise.resolve(this.drawerAdapter.open({
-                action: actionForLaunch,
-                metadata: merged.metadata,
-                inputs,
-                onClose: drawerCallbacks?.onClose,
-                onResult: drawerCallbacks?.onResult,
-            }));
-            return { mode };
-        }
         const actionForLaunch = this.resolveActionForLaunch(merged.action, merged.metadata);
         if (!actionForLaunch.formId) {
             throw new Error(`formId not provided for action ${actionForLaunch.action}`);
@@ -123,6 +107,16 @@ class CrudLauncherService {
             row[idField] !== undefined) {
             inputs[idField] = row[idField];
         }
+        if (mode === 'drawer' && this.drawerAdapter) {
+            await Promise.resolve(this.drawerAdapter.open({
+                action: actionForLaunch,
+                metadata: merged.metadata,
+                inputs,
+                onClose: drawerCallbacks?.onClose,
+                onResult: drawerCallbacks?.onResult,
+            }));
+            return { mode };
+        }
         const modalCfg = { ...(merged.metadata.defaults?.modal || {}) };
         console.debug('[CRUD:Launcher] opening dialog with:', {
             action: merged.action.action,
@@ -131,10 +125,8 @@ class CrudLauncherService {
             modalCfg,
             resourcePath: merged.metadata.resource?.path ?? merged.metadata.table?.resourcePath,
         });
-        const panelClasses = ['pfx-dialog-pane', 'pfx-dialog-frosted'];
-        if (modalCfg.panelClass) {
-            panelClasses.push(modalCfg.panelClass);
-        }
+        const drawerMode = mode === 'drawer';
+        const panelClasses = mergeClassList(['pfx-dialog-pane', drawerMode ? 'pfx-drawer-pane' : 'pfx-dialog-frosted'], modalCfg.panelClass);
         // Backdrop style presets
         const backdropClasses = [];
         const style = modalCfg.backdropStyle;
@@ -147,20 +139,44 @@ class CrudLauncherService {
         else if (style === 'transparent') {
             backdropClasses.push('pfx-transparent-backdrop');
         }
-        if (modalCfg.backdropClass) {
-            backdropClasses.push(modalCfg.backdropClass);
-        }
+        const mergedBackdropClasses = mergeClassList(backdropClasses, modalCfg.backdropClass);
         const ref = await this.dialog.openAsync(() => Promise.resolve().then(function () { return dynamicFormDialogHost_component; }).then((m) => m.DynamicFormDialogHostComponent), {
             ...modalCfg,
             panelClass: panelClasses,
-            backdropClass: backdropClasses,
+            backdropClass: mergedBackdropClasses,
             autoFocus: modalCfg.autoFocus ?? true,
             restoreFocus: modalCfg.restoreFocus ?? true,
-            minWidth: '360px',
-            maxWidth: '95vw',
+            minWidth: drawerMode ? (modalCfg.minWidth ?? '0') : '360px',
+            width: drawerMode ? (modalCfg.width ?? 'min(560px, 100vw)') : modalCfg.width,
+            height: drawerMode ? (modalCfg.height ?? '100dvh') : modalCfg.height,
+            maxWidth: drawerMode ? (modalCfg.maxWidth ?? '100vw') : '95vw',
+            maxHeight: drawerMode ? (modalCfg.maxHeight ?? '100dvh') : modalCfg.maxHeight,
+            position: drawerMode ? (modalCfg.position ?? { right: '0', top: '0' }) : modalCfg.position,
             ariaLabelledBy: 'crudDialogTitle',
-            data: { action: actionForLaunch, row, metadata: merged.metadata, inputs },
+            data: {
+                action: actionForLaunch,
+                row,
+                metadata: merged.metadata,
+                inputs,
+                presentation: drawerMode ? 'drawer' : 'modal',
+            },
         });
+        if (drawerMode) {
+            ref
+                .afterClosed()
+                .pipe(take(1))
+                .subscribe((closedValue) => {
+                const result = toCrudDrawerResult(closedValue);
+                drawerCallbacks?.onClose?.();
+                if (result?.type) {
+                    drawerCallbacks?.onResult?.(result);
+                }
+                else {
+                    drawerCallbacks?.onResult?.({ type: 'close' });
+                }
+            });
+            return { mode, ref };
+        }
         return { mode, ref };
     }
     resolveOpenMode(action, metadata) {
@@ -248,6 +264,9 @@ class CrudLauncherService {
         if (resolved.apiUrlEntry != null) {
             inputs['apiUrlEntry'] = resolved.apiUrlEntry;
         }
+        if (resolved.layoutPolicy != null) {
+            inputs['layoutPolicy'] = resolved.layoutPolicy;
+        }
         if (action.form?.initialValue != null) {
             inputs['initialValue'] = action.form.initialValue;
         }
@@ -274,12 +293,14 @@ class CrudLauncherService {
                 submitMethod: action.form?.submitMethod ?? null,
                 apiEndpointKey: action.form?.apiEndpointKey ?? null,
                 apiUrlEntry: action.form?.apiUrlEntry ?? null,
+                layoutPolicy: action.form?.layoutPolicy ?? null,
             };
         }
         if (!this.isCanonicalCrudAction(action.action)) {
             return {
                 apiEndpointKey: action.form?.apiEndpointKey ?? null,
                 apiUrlEntry: action.form?.apiUrlEntry ?? null,
+                layoutPolicy: action.form?.layoutPolicy ?? null,
             };
         }
         const resourcePath = String(metadata.resource?.path ?? metadata.table?.resourcePath ?? '').trim();
@@ -309,6 +330,7 @@ class CrudLauncherService {
             submitMethod: resolved?.submitMethod ?? null,
             apiEndpointKey: action.form?.apiEndpointKey ?? metadata.resource?.endpointKey ?? null,
             apiUrlEntry: action.form?.apiUrlEntry ?? null,
+            layoutPolicy: action.form?.layoutPolicy ?? null,
         };
     }
     resolveRuntimeContract(action, row, metadata, runtime) {
@@ -392,6 +414,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+function mergeClassList(base, extra) {
+    if (!extra) {
+        return base;
+    }
+    if (typeof extra === 'string') {
+        return [...base, extra];
+    }
+    if (Array.isArray(extra)) {
+        return [...base, ...extra];
+    }
+    return [
+        ...base,
+        ...Object.keys(extra).filter((className) => !!extra[className]),
+    ];
+}
+function toCrudDrawerResult(value) {
+    if (!value || typeof value !== 'object') {
+        return undefined;
+    }
+    const result = value;
+    return result.type === 'save' || result.type === 'delete' || result.type === 'close'
+        ? result
+        : undefined;
+}
 
 const DOCUMENT_KIND = 'praxis.crud.editor';
 const DOCUMENT_VERSION = 1;
@@ -3656,6 +3702,9 @@ class PraxisCrudComponent {
                 links: this.resolveCrudRuntimeLinks(effectiveAction.action, row),
             });
             this.afterOpen.emit({ mode, action: effectiveAction.action });
+            if (mode === 'drawer') {
+                return;
+            }
             if (!ref) {
                 return;
             }
@@ -3999,7 +4048,7 @@ class PraxisCrudComponent {
         const providedAction = this.resolveProvidedWorkflowAction(normalizedAction, runtimeEvent?.actionConfig);
         const catalog = providedAction ? null : await this.resolveDiscoveredActionCatalog(row);
         const discoveredAction = providedAction || this.selectDiscoveredWorkflowAction(normalizedAction, catalog?.actions || []);
-        const resourcePath = String(this.resolveResourcePath(this.resolvedMetadata) || catalog?.resourcePath || '').trim();
+        const resourcePath = String(catalog?.resourcePath || this.resolveResourcePath(this.resolvedMetadata) || '').trim();
         if (!discoveredAction || !resourcePath) {
             return false;
         }
@@ -4657,7 +4706,7 @@ class PraxisCrudComponent {
         />
       }
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;max-width:100%}\n"], dependencies: [{ kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "dense"], outputs: ["rowClick", "widgetEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;max-width:100%}\n"], dependencies: [{ kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "dense"], outputs: ["rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisCrudComponent, decorators: [{
             type: Component,
@@ -4742,6 +4791,7 @@ class DynamicFormDialogHostComponent {
     configStorage;
     formComp;
     modal = {};
+    presentation = 'modal';
     maximized = false;
     initialSize = {};
     rememberState = false;
@@ -4756,6 +4806,7 @@ class DynamicFormDialogHostComponent {
     submitMethod;
     apiEndpointKey;
     apiUrlEntry;
+    layoutPolicy;
     formActions;
     mode = 'create';
     backConfig;
@@ -4778,6 +4829,7 @@ class DynamicFormDialogHostComponent {
         this.crud = crud;
         this.configStorage = configStorage;
         this.dialogRef.disableClose = true;
+        this.presentation = this.data.presentation === 'drawer' ? 'drawer' : 'modal';
         // i18n
         this.texts = {
             ...this.texts,
@@ -4812,6 +4864,7 @@ class DynamicFormDialogHostComponent {
         this.apiUrlEntry = this.data.inputs?.['apiUrlEntry'] ?? null;
         const act = this.data.action?.action;
         this.mode = act === 'edit' ? 'edit' : act === 'view' ? 'view' : 'create';
+        this.layoutPolicy = this.resolveLayoutPolicy();
         this.formActions = this.resolveFormActions();
         // Back config: defaults from metadata/action, overridden by saved per-form config
         const defaults = (this.data.action?.back || this.data.metadata?.defaults?.back) || {};
@@ -4857,6 +4910,7 @@ class DynamicFormDialogHostComponent {
             'apiEndpointKey',
             'apiUrlEntry',
             'initialValue',
+            'layoutPolicy',
         ]);
         const explicit = inputs['initialValue'] && typeof inputs['initialValue'] === 'object'
             ? { ...inputs['initialValue'] }
@@ -4890,6 +4944,15 @@ class DynamicFormDialogHostComponent {
             },
         };
     }
+    resolveLayoutPolicy() {
+        const explicit = this.data.inputs?.['layoutPolicy'] ??
+            this.data.action?.form?.layoutPolicy ??
+            this.data.action?.layoutPolicy;
+        if (explicit && typeof explicit === 'object') {
+            return explicit;
+        }
+        return null;
+    }
     resolveSubmitLabel() {
         const action = this.data.action ?? {};
         const explicit = stringOrUndefined(action.form?.submitLabel ??
@@ -4962,10 +5025,10 @@ class DynamicFormDialogHostComponent {
             ref
                 .afterClosed()
                 .pipe(filter((confirmed) => !!confirmed), takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.dialogRef.close());
+                .subscribe(() => this.dialogRef.close({ type: 'close' }));
         }
         else {
-            this.dialogRef.close();
+            this.dialogRef.close({ type: 'close' });
         }
     }
     toggleMaximize(initial = false) {
@@ -5032,7 +5095,7 @@ class DynamicFormDialogHostComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicFormDialogHostComponent, deps: [{ token: MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: DialogService }, { token: i2$1.GenericCrudService }, { token: ASYNC_CONFIG_STORAGE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicFormDialogHostComponent, isStandalone: true, selector: "praxis-dynamic-form-dialog-host", host: { properties: { "attr.data-density": "modal.density || \"default\"" }, classAttribute: "praxis-dialog" }, providers: [GenericCrudService], viewQueries: [{ propertyName: "formComp", first: true, predicate: PraxisDynamicForm, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicFormDialogHostComponent, isStandalone: true, selector: "praxis-dynamic-form-dialog-host", host: { properties: { "attr.data-density": "modal.density || \"default\"", "attr.data-presentation": "presentation", "class.praxis-drawer": "presentation === \"drawer\"" }, classAttribute: "praxis-dialog" }, providers: [GenericCrudService], viewQueries: [{ propertyName: "formComp", first: true, predicate: PraxisDynamicForm, descendants: true }], ngImport: i0, template: `
     <div mat-dialog-title class="dialog-header">
       <h2 id="crudDialogTitle" class="dialog-title">
         {{ data.action?.label || texts.title }}
@@ -5074,6 +5137,7 @@ class DynamicFormDialogHostComponent {
         [submitMethod]="submitMethod"
         [apiEndpointKey]="apiEndpointKey"
         [apiUrlEntry]="apiUrlEntry"
+        [layoutPolicy]="layoutPolicy"
         [presentationModeGlobal]="mode === 'view' ? true : null"
         [backConfig]="backConfig"
         [actions]="formActions"
@@ -5081,7 +5145,7 @@ class DynamicFormDialogHostComponent {
         (formCancel)="onCancel()"
       ></praxis-dynamic-form>
     </mat-dialog-content>
-  `, isInline: true, styles: [":host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}:host([data-density=\"compact\"]){--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}.dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);padding:0 var(--dlg-pad);height:var(--dlg-header-h);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}.dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}.spacer{flex:1}.dialog-content{overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}.dialog-header button.mat-icon-button{color:var(--md-sys-color-on-surface-variant)}.dialog-header button.mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}.dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "editorialContext", "mode", "config", "actions", "schemaSource", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange"] }] });
+  `, isInline: true, styles: ["praxis-dynamic-form-dialog-host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}praxis-dynamic-form-dialog-host[data-density=compact]{--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}praxis-dynamic-form-dialog-host .dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);padding:0 var(--dlg-pad);height:var(--dlg-header-h);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .spacer{flex:1}praxis-dynamic-form-dialog-host .dialog-content{flex:1 1 auto;overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}praxis-dynamic-form-dialog-host.praxis-drawer{--dlg-header-h: 64px;width:100%;min-width:0;max-width:100vw;height:100dvh;background:var(--pfx-form-surface, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-header{background:color-mix(in srgb,var(--md-sys-color-surface-container-high, var(--md-sys-color-surface)),transparent 4%)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host .dialog-header button.mat-icon-button{color:var(--md-sys-color-on-surface-variant)}praxis-dynamic-form-dialog-host .dialog-header button.mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}praxis-dynamic-form-dialog-host .dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}.pfx-blur-backdrop{background-color:var(--pfx-backdrop, rgba(15, 23, 42, .42))!important;backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%)}.pfx-transparent-backdrop{background-color:transparent!important}.cdk-overlay-pane.pfx-dialog-pane{overflow:hidden;transition:width .2s ease,height .2s ease,margin .2s ease}.cdk-overlay-pane.pfx-dialog-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane .mdc-dialog__surface{display:flex;flex-direction:column;width:100%;height:100%;max-height:inherit;overflow:hidden;background:var(--pfx-form-surface, var(--md-sys-color-surface))!important;border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant))!important}.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mdc-dialog__surface{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cdk-overlay-pane.pfx-drawer-pane{margin:0!important;border-radius:0!important;box-shadow:var(--md-sys-elevation-level3, 0 24px 80px rgba(15, 23, 42, .28)),0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline, #64748b) 24%,transparent)}.cdk-overlay-pane.pfx-drawer-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-drawer-pane .mdc-dialog__surface{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "editorialContext", "mode", "config", "actions", "schemaSource", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicFormDialogHostComponent, decorators: [{
             type: Component,
@@ -5091,9 +5155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatIconModule,
                         PraxisIconDirective,
                         PraxisDynamicForm
-                    ], providers: [GenericCrudService], host: {
+                    ], encapsulation: ViewEncapsulation.None, providers: [GenericCrudService], host: {
                         class: 'praxis-dialog',
                         '[attr.data-density]': 'modal.density || "default"',
+                        '[attr.data-presentation]': 'presentation',
+                        '[class.praxis-drawer]': 'presentation === "drawer"',
                     }, template: `
     <div mat-dialog-title class="dialog-header">
       <h2 id="crudDialogTitle" class="dialog-title">
@@ -5136,6 +5202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [submitMethod]="submitMethod"
         [apiEndpointKey]="apiEndpointKey"
         [apiUrlEntry]="apiUrlEntry"
+        [layoutPolicy]="layoutPolicy"
         [presentationModeGlobal]="mode === 'view' ? true : null"
         [backConfig]="backConfig"
         [actions]="formActions"
@@ -5143,7 +5210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         (formCancel)="onCancel()"
       ></praxis-dynamic-form>
     </mat-dialog-content>
-  `, styles: [":host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}:host([data-density=\"compact\"]){--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}.dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);padding:0 var(--dlg-pad);height:var(--dlg-header-h);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}.dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}.spacer{flex:1}.dialog-content{overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}.dialog-header button.mat-icon-button{color:var(--md-sys-color-on-surface-variant)}.dialog-header button.mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}.dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}\n"] }]
+  `, styles: ["praxis-dynamic-form-dialog-host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}praxis-dynamic-form-dialog-host[data-density=compact]{--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}praxis-dynamic-form-dialog-host .dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);padding:0 var(--dlg-pad);height:var(--dlg-header-h);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .spacer{flex:1}praxis-dynamic-form-dialog-host .dialog-content{flex:1 1 auto;overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}praxis-dynamic-form-dialog-host.praxis-drawer{--dlg-header-h: 64px;width:100%;min-width:0;max-width:100vw;height:100dvh;background:var(--pfx-form-surface, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-header{background:color-mix(in srgb,var(--md-sys-color-surface-container-high, var(--md-sys-color-surface)),transparent 4%)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host .dialog-header button.mat-icon-button{color:var(--md-sys-color-on-surface-variant)}praxis-dynamic-form-dialog-host .dialog-header button.mat-icon-button:hover{color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container)}praxis-dynamic-form-dialog-host .dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}.pfx-blur-backdrop{background-color:var(--pfx-backdrop, rgba(15, 23, 42, .42))!important;backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%)}.pfx-transparent-backdrop{background-color:transparent!important}.cdk-overlay-pane.pfx-dialog-pane{overflow:hidden;transition:width .2s ease,height .2s ease,margin .2s ease}.cdk-overlay-pane.pfx-dialog-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane .mdc-dialog__surface{display:flex;flex-direction:column;width:100%;height:100%;max-height:inherit;overflow:hidden;background:var(--pfx-form-surface, var(--md-sys-color-surface))!important;border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant))!important}.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mdc-dialog__surface{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cdk-overlay-pane.pfx-drawer-pane{margin:0!important;border-radius:0!important;box-shadow:var(--md-sys-elevation-level3, 0 24px 80px rgba(15, 23, 42, .28)),0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline, #64748b) 24%,transparent)}.cdk-overlay-pane.pfx-drawer-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-drawer-pane .mdc-dialog__surface{border-radius:0!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MatDialogRef]
@@ -5699,6 +5766,7 @@ const CRUD_AI_CAPABILITIES = {
         { path: 'actions[].params[].to', category: 'actions', valueKind: 'enum', allowedValues: ENUMS.paramTarget, description: 'Destino do parametro.' },
         { path: 'actions[].params[].name', category: 'actions', valueKind: 'string', description: 'Nome do parametro no destino.' },
         { path: 'actions[].form.initialValue', category: 'actions', valueKind: 'object', description: 'Seed fixo do formulario injetado em inputs.initialValue antes da abertura.' },
+        { path: 'actions[].form.layoutPolicy', category: 'actions', valueKind: 'object', description: 'Politica schema-driven opt-in encaminhada ao Dynamic Form para materializar detalhe ou command form sem FormConfig.sections local; deve acompanhar schemaUrl compativel, especialmente schemaType=request para comandos.' },
         { path: 'actions[].back', category: 'navigation', valueKind: 'object', description: 'BackConfig por acao.' },
         { path: 'actions[].back.strategy', category: 'navigation', valueKind: 'enum', allowedValues: ENUMS.backStrategy, description: 'Estrategia de retorno da acao (auto, close, navigate).' },
         { path: 'actions[].back.returnTo', category: 'navigation', valueKind: 'string', description: 'Rota ou destino usado quando a estrategia de retorno for navigate.' },
@@ -5736,6 +5804,7 @@ const surfaceConfigureSchema = {
                 submitMethod: { enum: ['post', 'put', 'patch', 'delete'] },
                 apiEndpointKey: { type: 'string' },
                 initialValue: { type: 'object' },
+                layoutPolicy: { type: 'object' },
             },
         },
         params: {
@@ -6017,14 +6086,14 @@ const PRAXIS_CRUD_AUTHORING_MANIFEST = {
             target: { kind: 'dialogHost', resolver: 'crud-dialog-host-defaults', ambiguityPolicy: 'fail', required: true },
             inputSchema: dialogHostSchema,
             effects: [{ kind: 'compile-domain-patch', handler: 'crud-dialog-host-set', handlerContract: {
-                        reads: ['CrudMetadata.defaults', 'CrudLauncherService.resolveOpenMode', 'DialogService', 'CRUD_DRAWER_ADAPTER'],
+                        reads: ['CrudMetadata.defaults', 'CrudLauncherService.resolveOpenMode', 'DialogService', 'DynamicFormDialogHostComponent', 'CRUD_DRAWER_ADAPTER'],
                         writes: ['CrudMetadata.defaults.openMode', 'CrudMetadata.defaults.modal', 'CrudMetadata.defaults.back'],
                         identityKeys: ['crudId'],
                         inputSchema: dialogHostSchema,
-                        failureModes: ['open-mode-unsupported', 'drawer-adapter-missing', 'modal-size-invalid', 'back-policy-invalid'],
-                        description: 'Configures CRUD-owned route/modal/drawer defaults consumed by the launcher and dialog host.',
+                        failureModes: ['open-mode-unsupported', 'drawer-runtime-unavailable', 'modal-size-invalid', 'back-policy-invalid'],
+                        description: 'Configures CRUD-owned route/modal/drawer defaults consumed by the launcher, default dialog-backed drawer runtime and optional host drawer adapter.',
                     } }],
-            validators: ['open-mode-supported', 'modal-size-valid', 'drawer-adapter-available-when-needed', 'back-policy-valid', 'settings-panel-shell-compatible'],
+            validators: ['open-mode-supported', 'modal-size-valid', 'drawer-runtime-available', 'back-policy-valid', 'settings-panel-shell-compatible'],
             affectedPaths: ['defaults.openMode', 'defaults.modal', 'defaults.back'],
             submissionImpact: 'config-only',
             preconditions: ['crud-metadata-loaded'],
@@ -6100,7 +6169,7 @@ const PRAXIS_CRUD_AUTHORING_MANIFEST = {
         { validatorId: 'permissions-delete-valid', level: 'error', code: 'CRUD_DELETE_PERMISSION_VALID', description: 'Delete permission cannot bypass resource capabilities or confirmation policy.' },
         { validatorId: 'open-mode-supported', level: 'error', code: 'CRUD_OPEN_MODE_SUPPORTED', description: 'Open mode must be route, modal or drawer.' },
         { validatorId: 'modal-size-valid', level: 'error', code: 'CRUD_MODAL_SIZE_VALID', description: 'Modal sizing defaults must be valid DialogConfig values.' },
-        { validatorId: 'drawer-adapter-available-when-needed', level: 'error', code: 'CRUD_DRAWER_ADAPTER_AVAILABLE', description: 'Drawer open mode requires a host-provided drawer adapter.' },
+        { validatorId: 'drawer-runtime-available', level: 'error', code: 'CRUD_DRAWER_RUNTIME_AVAILABLE', description: 'Drawer open mode uses the default dialog-backed drawer runtime with CRUD-owned chrome, responsive right-panel sizing, Escape/backdrop handling and semantic close/save results; a host drawer adapter is optional only for shell-specific presentation.' },
         { validatorId: 'back-policy-valid', level: 'error', code: 'CRUD_BACK_POLICY_VALID', description: 'Back policy must be valid for route/modal/drawer behavior.' },
         { validatorId: 'settings-panel-shell-compatible', level: 'warning', code: 'CRUD_SETTINGS_PANEL_COMPATIBLE', description: 'Authoring shell must preserve apply/save/reset semantics.' },
         { validatorId: 'action-permission-supported', level: 'error', code: 'CRUD_ACTION_PERMISSION_SUPPORTED', description: 'Action permissions must map to supported resource capabilities.' },

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@praxisui/crud",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0-beta.40",
   "description": "CRUD building blocks for Praxis UI: integrates dynamic forms and tables with unified configuration and services.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/dynamic-form": "^9.0.0-beta.4",
-    "@praxisui/table": "^9.0.0-beta.4",
-    "@praxisui/core": "^9.0.0-beta.4",
-    "@praxisui/dynamic-fields": "^9.0.0-beta.4",
-    "@praxisui/settings-panel": "^9.0.0-beta.4",
+    "@praxisui/dynamic-form": "^9.0.0-beta.40",
+    "@praxisui/table": "^9.0.0-beta.40",
+    "@praxisui/core": "^9.0.0-beta.40",
+    "@praxisui/dynamic-fields": "^9.0.0-beta.40",
+    "@praxisui/settings-panel": "^9.0.0-beta.40",
     "@angular/cdk": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.0-beta.4",
+    "@praxisui/ai": "^9.0.0-beta.40",
     "rxjs": "~7.8.0"
   },
   "dependencies": {
@@ -28,6 +28,7 @@
   "keywords": [
     "angular",
     "praxisui",
+    "praxis",
     "crud",
     "admin",
     "backoffice",
@@ -48,7 +49,10 @@
     "./drawer-adapter": {
       "types": "./types/praxisui-crud-drawer-adapter.d.ts",
       "default": "./fesm2022/praxisui-crud-drawer-adapter.mjs"
+    },
+    "./ai/component-registry.json": {
+      "default": "./ai/component-registry.json"
     }
   },
   "type": "module"
-}
+}

package/types/praxisui-crud.d.ts

@@ -1,5 +1,5 @@
 import * as _praxisui_core from '@praxisui/core';
-import { RowAction, ToolbarAction, ApiEndpoint, ApiUrlEntry, BackConfig, TableConfig, PraxisDataQueryContext, FormConfig, ResourceActionCatalogItem, ResourceSurfaceCatalogItem, LoadingState, RestApiLinks, ResourceCapabilitySnapshot, GenericCrudService, AsyncConfigStorage, ComponentDocMeta, AiCapabilityCatalog, AiCapability, AiCapabilityCategory, AiValueKind, ComponentAuthoringManifest, SettingsValueProvider } from '@praxisui/core';
+import { RowAction, ToolbarAction, ApiEndpoint, ApiUrlEntry, DynamicFormLayoutPolicy, BackConfig, TableConfig, PraxisDataQueryContext, FormConfig, ResourceActionCatalogItem, ResourceSurfaceCatalogItem, LoadingState, RestApiLinks, ResourceCapabilitySnapshot, GenericCrudService, AsyncConfigStorage, ComponentDocMeta, AiCapabilityCatalog, AiCapability, AiCapabilityCategory, AiValueKind, ComponentAuthoringManifest, SettingsValueProvider } from '@praxisui/core';
 export { BackConfig } from '@praxisui/core';
 import * as _angular_core from '@angular/core';
 import { NgZone, OnChanges, EventEmitter, SimpleChanges, OnInit, Provider, AfterViewInit, OnDestroy } from '@angular/core';
@@ -53,6 +53,7 @@ interface CrudActionFormContract {
     apiEndpointKey?: ApiEndpoint | string | null;
     apiUrlEntry?: ApiUrlEntry | null;
     initialValue?: Record<string, unknown> | null;
+    layoutPolicy?: DynamicFormLayoutPolicy | null;
 }
 type CrudActionResolutionMode = 'inferred' | 'explicit';
 type CrudAction = (RowAction | ToolbarAction) & {
@@ -316,6 +317,7 @@ declare class CrudLauncherService {
         submitMethod?: string | null;
         apiEndpointKey?: unknown;
         apiUrlEntry?: unknown;
+        layoutPolicy?: unknown;
     };
     private buildInferredFormId;
     private isCanonicalCrudAction;
@@ -333,6 +335,7 @@ declare class DynamicFormDialogHostComponent implements OnInit {
     private configStorage;
     formComp?: PraxisDynamicForm;
     modal: any;
+    presentation: 'modal' | 'drawer';
     maximized: boolean;
     private initialSize;
     private rememberState;
@@ -347,6 +350,7 @@ declare class DynamicFormDialogHostComponent implements OnInit {
     submitMethod?: string | null;
     apiEndpointKey?: ApiEndpoint | string | null;
     apiUrlEntry?: ApiUrlEntry | null;
+    layoutPolicy?: DynamicFormLayoutPolicy | null;
     formActions?: FormConfig['actions'];
     mode: 'create' | 'edit' | 'view';
     backConfig?: BackConfig;
@@ -355,6 +359,7 @@ declare class DynamicFormDialogHostComponent implements OnInit {
     constructor(dialogRef: DialogRef<DynamicFormDialogHostComponent>, data: any, dialogService: DialogService, crud: GenericCrudService<any>, configStorage: AsyncConfigStorage);
     private extractInitialValue;
     private resolveFormActions;
+    private resolveLayoutPolicy;
     private resolveSubmitLabel;
     ngOnInit(): void;
     onSave(result: unknown): void;