@masterteam/forms 0.0.46 → 0.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/masterteam-forms-client-form.mjs +25 -31
- package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-field.mjs +7 -2
- package/fesm2022/masterteam-forms-dynamic-field.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-form.mjs +2 -2
- package/fesm2022/masterteam-forms-dynamic-form.mjs.map +1 -1
- package/package.json +2 -2
- package/types/masterteam-forms-client-form.d.ts +8 -6
- package/types/masterteam-forms-dynamic-field.d.ts +1 -0
|
@@ -165,7 +165,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
|
|
|
165
165
|
const visibleFields = section.fields
|
|
166
166
|
.filter((field) => {
|
|
167
167
|
// isRead=false → completely hidden
|
|
168
|
-
if (field.isRead === false)
|
|
168
|
+
if (field.isWrite !== true && field.isRead === false)
|
|
169
169
|
return false;
|
|
170
170
|
if (mode === 'create')
|
|
171
171
|
return !field.hiddenInCreation;
|
|
@@ -254,9 +254,7 @@ function mapPreviewFieldsToEntities(config, values, mode = 'create') {
|
|
|
254
254
|
.filter((field) => isFieldVisible(field, mode) && isPreviewOnlyField(field))
|
|
255
255
|
.sort((a, b) => a.order - b.order)
|
|
256
256
|
.flatMap((field) => {
|
|
257
|
-
const property =
|
|
258
|
-
if (!property)
|
|
259
|
-
return [];
|
|
257
|
+
const property = field.propertyMetadata;
|
|
260
258
|
return [
|
|
261
259
|
{
|
|
262
260
|
...property,
|
|
@@ -275,25 +273,18 @@ function mapPreviewFieldsToEntities(config, values, mode = 'create') {
|
|
|
275
273
|
// ============================================================================
|
|
276
274
|
// Internal Helpers
|
|
277
275
|
// ============================================================================
|
|
278
|
-
/**
|
|
279
|
-
* Resolve the property item from either `property` or `propertyMetadata`.
|
|
280
|
-
* The API may return the data under either key.
|
|
281
|
-
*/
|
|
282
|
-
function resolveProperty(field) {
|
|
283
|
-
return field.property ?? field.propertyMetadata;
|
|
284
|
-
}
|
|
285
276
|
function isFieldVisible(field, mode) {
|
|
286
|
-
if (field.isRead === false)
|
|
277
|
+
if (field.isWrite !== true && field.isRead === false)
|
|
287
278
|
return false;
|
|
288
279
|
if (mode === 'create')
|
|
289
280
|
return !field.hiddenInCreation;
|
|
290
281
|
return !field.hiddenInEditForm;
|
|
291
282
|
}
|
|
292
283
|
function isPreviewOnlyField(field) {
|
|
293
|
-
return field.
|
|
284
|
+
return field.isWrite === false && field.isRead !== false;
|
|
294
285
|
}
|
|
295
286
|
function resolveFieldMeta(field) {
|
|
296
|
-
const property =
|
|
287
|
+
const property = field.propertyMetadata;
|
|
297
288
|
return {
|
|
298
289
|
property,
|
|
299
290
|
propertyId: property?.propertyId,
|
|
@@ -302,7 +293,8 @@ function resolveFieldMeta(field) {
|
|
|
302
293
|
}
|
|
303
294
|
function mapFieldToConfig(field, lang, lookups) {
|
|
304
295
|
const { property: prop, viewType } = resolveFieldMeta(field);
|
|
305
|
-
const label =
|
|
296
|
+
const label = prop?.name?.display ??
|
|
297
|
+
field.propertyKey;
|
|
306
298
|
const colSpan = WIDTH_TO_COLSPAN[field.width] ?? 12;
|
|
307
299
|
const base = {
|
|
308
300
|
key: field.propertyKey,
|
|
@@ -430,14 +422,6 @@ function mapValidationRules(config, lang) {
|
|
|
430
422
|
enabled: rule.enabled,
|
|
431
423
|
}));
|
|
432
424
|
}
|
|
433
|
-
function resolvePropertyName(property, lang) {
|
|
434
|
-
if (!property?.name)
|
|
435
|
-
return '';
|
|
436
|
-
if (typeof property.name === 'string')
|
|
437
|
-
return property.name;
|
|
438
|
-
// Prefer display name, then lang-specific, then English fallback
|
|
439
|
-
return (property.name['display'] ?? property.name[lang] ?? property.name['en'] ?? '');
|
|
440
|
-
}
|
|
441
425
|
/**
|
|
442
426
|
* Resolve lookup items for Lookup / LookupMultiSelect viewTypes.
|
|
443
427
|
*
|
|
@@ -513,7 +497,7 @@ function buildFieldValueMap(config) {
|
|
|
513
497
|
field.propertyKey,
|
|
514
498
|
stripTemplatePrefix(field.propertyKey),
|
|
515
499
|
]);
|
|
516
|
-
const property =
|
|
500
|
+
const property = field.propertyMetadata;
|
|
517
501
|
if (property?.key) {
|
|
518
502
|
aliases.add(property.key);
|
|
519
503
|
aliases.add(stripTemplatePrefix(property.key));
|
|
@@ -639,7 +623,7 @@ class ClientForm {
|
|
|
639
623
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
640
624
|
autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : []));
|
|
641
625
|
formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : []));
|
|
642
|
-
renderMode = input(
|
|
626
|
+
renderMode = input(...(ngDevMode ? [undefined, { debugName: "renderMode" }] : []));
|
|
643
627
|
showInternalStepActions = input(true, ...(ngDevMode ? [{ debugName: "showInternalStepActions" }] : []));
|
|
644
628
|
lang = input('en', ...(ngDevMode ? [{ debugName: "lang" }] : []));
|
|
645
629
|
lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : []));
|
|
@@ -698,8 +682,18 @@ class ClientForm {
|
|
|
698
682
|
}, ...(ngDevMode ? [{ debugName: "editableFormConfig" }] : []));
|
|
699
683
|
stepSections = computed(() => this.editableFormConfig()?.sections ?? [], ...(ngDevMode ? [{ debugName: "stepSections" }] : []));
|
|
700
684
|
hasEditableFormSections = computed(() => this.stepSections().length > 0, ...(ngDevMode ? [{ debugName: "hasEditableFormSections" }] : []));
|
|
701
|
-
|
|
702
|
-
|
|
685
|
+
effectiveRenderMode = computed(() => {
|
|
686
|
+
const explicitRenderMode = this.renderMode();
|
|
687
|
+
if (explicitRenderMode)
|
|
688
|
+
return explicitRenderMode;
|
|
689
|
+
const configRenderMode = this.state.formConfiguration()?.renderMode;
|
|
690
|
+
if (configRenderMode === 'steps' || configRenderMode === 'tabs') {
|
|
691
|
+
return configRenderMode;
|
|
692
|
+
}
|
|
693
|
+
return 'form';
|
|
694
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveRenderMode" }] : []));
|
|
695
|
+
stepsEnabled = computed(() => this.effectiveRenderMode() === 'steps' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "stepsEnabled" }] : []));
|
|
696
|
+
tabsEnabled = computed(() => this.effectiveRenderMode() === 'tabs' && this.stepSections().length > 1, ...(ngDevMode ? [{ debugName: "tabsEnabled" }] : []));
|
|
703
697
|
sectionNavigationEnabled = computed(() => this.stepsEnabled() || this.tabsEnabled(), ...(ngDevMode ? [{ debugName: "sectionNavigationEnabled" }] : []));
|
|
704
698
|
tabOptions = computed(() => this.stepSections().map((section, index) => ({
|
|
705
699
|
label: section.label || `Tab ${index + 1}`,
|
|
@@ -950,8 +944,8 @@ class ClientForm {
|
|
|
950
944
|
const formValue = this.getFormValue();
|
|
951
945
|
const values = mapFormValueToSubmitValues(formValue, loadResponse);
|
|
952
946
|
const req = {
|
|
953
|
-
moduleKey:
|
|
954
|
-
operationKey:
|
|
947
|
+
moduleKey: this.moduleKey() ?? context?.moduleKey,
|
|
948
|
+
operationKey: this.operationKey() ?? context?.operationKey,
|
|
955
949
|
values,
|
|
956
950
|
};
|
|
957
951
|
const moduleId = context?.moduleId ?? this.moduleId();
|
|
@@ -978,7 +972,7 @@ class ClientForm {
|
|
|
978
972
|
return req;
|
|
979
973
|
}
|
|
980
974
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n <div class=\"flex flex-col gap-6\">\r\n <!-- Section header skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Second section skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <p-stepper\r\n [value]=\"currentStep()\"\r\n (valueChange)=\"onStepChange($event)\"\r\n >\r\n <p-step-list>\r\n @for (section of stepSections(); track section.key || $index) {\r\n <p-step [value]=\"$index + 1\">\r\n {{ section.label || \"Step \" + ($index + 1) }}\r\n </p-step>\r\n }\r\n </p-step-list>\r\n </p-stepper>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === 1\"\r\n (click)=\"goToPreviousStep()\"\r\n >\r\n Previous\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === stepSections().length\"\r\n (click)=\"goToNextStep()\"\r\n >\r\n Next\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"forcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n } @else if (previewEntities().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n No form required for this operation.\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: StepperModule }, { kind: "component", type: i2.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2.StepList, selector: "p-step-list" }, { kind: "component", type: i2.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
|
|
975
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n <div class=\"flex flex-col gap-6\">\r\n <!-- Section header skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Second section skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <p-stepper\r\n [value]=\"currentStep()\"\r\n (valueChange)=\"onStepChange($event)\"\r\n >\r\n <p-step-list>\r\n @for (\r\n section of stepSections();\r\n track section.key || $index\r\n ) {\r\n <p-step [value]=\"$index + 1\">\r\n {{ section.label || \"Step \" + ($index + 1) }}\r\n </p-step>\r\n }\r\n </p-step-list>\r\n </p-stepper>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === 1\"\r\n (click)=\"goToPreviousStep()\"\r\n >\r\n Previous\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === stepSections().length\"\r\n (click)=\"goToNextStep()\"\r\n >\r\n Next\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"forcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n } @else if (previewEntities().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n No form required for this operation.\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: StepperModule }, { kind: "component", type: i2.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2.StepList, selector: "p-step-list" }, { kind: "component", type: i2.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
|
|
982
976
|
}
|
|
983
977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
|
|
984
978
|
type: Component,
|
|
@@ -990,7 +984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
990
984
|
Tabs,
|
|
991
985
|
Skeleton,
|
|
992
986
|
StepperModule,
|
|
993
|
-
], providers: [ClientFormStateService], template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n <div class=\"flex flex-col gap-6\">\r\n <!-- Section header skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Second section skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <p-stepper\r\n [value]=\"currentStep()\"\r\n (valueChange)=\"onStepChange($event)\"\r\n >\r\n <p-step-list>\r\n @for (section of stepSections()
|
|
987
|
+
], providers: [ClientFormStateService], template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n <div class=\"flex flex-col gap-6\">\r\n <!-- Section header skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Second section skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <p-stepper\r\n [value]=\"currentStep()\"\r\n (valueChange)=\"onStepChange($event)\"\r\n >\r\n <p-step-list>\r\n @for (\r\n section of stepSections();\r\n track section.key || $index\r\n ) {\r\n <p-step [value]=\"$index + 1\">\r\n {{ section.label || \"Step \" + ($index + 1) }}\r\n </p-step>\r\n }\r\n </p-step-list>\r\n </p-stepper>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === 1\"\r\n (click)=\"goToPreviousStep()\"\r\n >\r\n Previous\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === stepSections().length\"\r\n (click)=\"goToNextStep()\"\r\n >\r\n Next\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"forcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n } @else if (previewEntities().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n No form required for this operation.\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
|
|
994
988
|
}], ctorParameters: () => [], propDecorators: { moduleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleKey", required: true }] }], operationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationKey", required: true }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], moduleDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleDataId", required: false }] }], requestSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestSchemaId", required: false }] }], draftProcessId: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftProcessId", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLoad", required: false }] }], formMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formMode", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], showInternalStepActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInternalStepActions", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }] } });
|
|
995
989
|
|
|
996
990
|
// ============================================================================
|