@maro-tech/form 0.0.4 → 0.0.5

package/fesm2022/maro-tech-form.mjs

@@ -2609,6 +2609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class UiActionFormModalComponent {
     formId = input('', ...(ngDevMode ? [{ debugName: "formId" }] : /* istanbul ignore next */ []));
     recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     initialValue = input({}, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
     uploadPhoto = input(null, ...(ngDevMode ? [{ debugName: "uploadPhoto" }] : /* istanbul ignore next */ []));
@@ -2616,11 +2617,17 @@ class UiActionFormModalComponent {
     completed = output();
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
+    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
     formConfig = signal(null, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     formValue = signal({}, ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
     fields = computed(() => this.formConfig()?.fields ?? [], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     submitAction = computed(() => this.formConfig()?.actions?.find((action) => String(action.type).toUpperCase() === 'ACTION_SUBMIT' || String(action.type).toUpperCase() === 'ACTION_API'), ...(ngDevMode ? [{ debugName: "submitAction" }] : /* istanbul ignore next */ []));
     submitLabel = computed(() => this.submitAction()?.submit || this.submitAction()?.label || 'Save', ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => ({
+        'max-w-xl': this.size() === 'sm',
+        'max-w-3xl': this.size() === 'md',
+        'max-w-6xl': this.size() === 'lg',
+    }), ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     http = inject(HttpClient);
     router = inject(Router);
     ngOnChanges(changes) {
@@ -2634,6 +2641,12 @@ class UiActionFormModalComponent {
     onValueChange(value) {
         this.formValue.set(value);
     }
+    onLookupCompleted(_event) {
+        // Lookup results are already applied by the dynamic form and emitted via valueChange.
+    }
+    onUploadingChange(uploading) {
+        this.isUploading.set(uploading);
+    }
     onFieldActionTriggered(event) {
         const endpoint = this.resolveEndpoint(event.action.api);
         if (!endpoint)
@@ -2718,12 +2731,12 @@ class UiActionFormModalComponent {
             void this.router.navigateByUrl(target.startsWith('/') ? target : `/${target}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiActionFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, uploadPhoto: { classPropertyName: "uploadPhoto", publicName: "uploadPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-slate-950/40 p-4\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-slate-50 shadow-2xl\">\n      <div class=\"flex items-center justify-between border-b border-slate-200 bg-white px-6 py-4\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"flex justify-end gap-3 border-t border-slate-200 bg-white px-6 py-4\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent, selector: "forms-dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled", "uploadPhoto"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, uploadPhoto: { classPropertyName: "uploadPhoto", publicName: "uploadPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"flex max-h-[92vh] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent, selector: "forms-dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled", "uploadPhoto"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UiActionFormModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-slate-950/40 p-4\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl bg-slate-50 shadow-2xl\">\n      <div class=\"flex items-center justify-between border-b border-slate-200 bg-white px-6 py-4\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"flex justify-end gap-3 border-t border-slate-200 bg-white px-6 py-4\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n" }]
-        }], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], uploadPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhoto", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
+            args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent], template: "@if (isOpen()) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"flex max-h-[92vh] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl\" [ngClass]=\"panelClass()\">\n      <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n        <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n      </div>\n      <div class=\"min-h-0 overflow-y-auto p-4 sm:p-6\">\n        @if (isLoading()) {\n          <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n        } @else {\n          <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n        }\n      </div>\n      <div class=\"flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n        <ui-button variant=\"ghost\" (click)=\"close()\">Cancel</ui-button>\n        @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n      </div>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], uploadPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhoto", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
 
 class UiInputComponent {
     cdr = inject(ChangeDetectorRef);