@masterteam/forms 0.0.53 → 0.0.54
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 +82 -18
- package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-field.mjs +8 -4
- package/fesm2022/masterteam-forms-dynamic-field.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-form.mjs +6 -3
- package/fesm2022/masterteam-forms-dynamic-form.mjs.map +1 -1
- package/package.json +2 -2
- package/types/masterteam-forms-dynamic-form.d.ts +1 -0
|
@@ -9,7 +9,7 @@ import { EntitiesPreview } from '@masterteam/components/entities';
|
|
|
9
9
|
import { Tabs } from '@masterteam/components/tabs';
|
|
10
10
|
import { DynamicForm } from '@masterteam/forms/dynamic-form';
|
|
11
11
|
import { HttpClient, HttpContext } from '@angular/common/http';
|
|
12
|
-
import { ValidatorConfig, TextFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig } from '@masterteam/components';
|
|
12
|
+
import { ValidatorConfig, TextFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig, LookupMatrixFieldConfig } from '@masterteam/components';
|
|
13
13
|
import { TranslocoService } from '@jsverse/transloco';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -216,7 +216,11 @@ function mapFormValueToSubmitFields(formValue, loadResponse) {
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
return Object.entries(formValue)
|
|
219
|
-
.filter(([, value]) =>
|
|
219
|
+
.filter(([propertyKey, value]) => {
|
|
220
|
+
if (value === undefined || value === null)
|
|
221
|
+
return false;
|
|
222
|
+
return metadataByKey.get(propertyKey)?.viewType !== 'LookupMatrix';
|
|
223
|
+
})
|
|
220
224
|
.map(([propertyKey, value]) => {
|
|
221
225
|
const meta = metadataByKey.get(propertyKey);
|
|
222
226
|
const normalizedValue = normalizeSubmitValue(value, meta?.viewType);
|
|
@@ -381,7 +385,6 @@ function mapFieldToConfig(field, lang, lookups, context) {
|
|
|
381
385
|
case 'InternalModule':
|
|
382
386
|
case 'DynamicList':
|
|
383
387
|
case 'API':
|
|
384
|
-
case 'LookupMatrix':
|
|
385
388
|
case 'Location': {
|
|
386
389
|
const options = extractOptionsFromProperty(prop);
|
|
387
390
|
return new SelectFieldConfig({
|
|
@@ -391,6 +394,8 @@ function mapFieldToConfig(field, lang, lookups, context) {
|
|
|
391
394
|
optionValue: 'value',
|
|
392
395
|
});
|
|
393
396
|
}
|
|
397
|
+
case 'LookupMatrix':
|
|
398
|
+
return buildLookupMatrixFieldConfig(base, prop, lookups);
|
|
394
399
|
// ── Connection (level-to-level) ─────────────────────────
|
|
395
400
|
case 'Connection': {
|
|
396
401
|
const connectionConfig = prop?.configuration ?? {};
|
|
@@ -448,19 +453,7 @@ function mapValidationRules(config, lang) {
|
|
|
448
453
|
* finds the matching lookup definition, and maps its items to select options.
|
|
449
454
|
*/
|
|
450
455
|
function resolveLookupOptions(prop, lookups) {
|
|
451
|
-
|
|
452
|
-
if (!lookupId || !lookups.length)
|
|
453
|
-
return [];
|
|
454
|
-
const lookup = lookups.find((l) => l.id === lookupId);
|
|
455
|
-
if (!lookup)
|
|
456
|
-
return [];
|
|
457
|
-
return lookup.items
|
|
458
|
-
.slice()
|
|
459
|
-
.sort((a, b) => a.order - b.order)
|
|
460
|
-
.map((item) => ({
|
|
461
|
-
label: item.name?.display ?? item.key,
|
|
462
|
-
value: item.key,
|
|
463
|
-
}));
|
|
456
|
+
return resolveLookupOptionsById(coerceLookupId(prop?.configuration?.['lookup']), lookups);
|
|
464
457
|
}
|
|
465
458
|
/**
|
|
466
459
|
* Fallback option extractor for non-lookup select types
|
|
@@ -483,6 +476,77 @@ function extractOptionsFromProperty(property) {
|
|
|
483
476
|
}
|
|
484
477
|
return null;
|
|
485
478
|
}
|
|
479
|
+
function resolveLookupOptionsById(lookupId, lookups) {
|
|
480
|
+
if (!lookupId || !lookups.length)
|
|
481
|
+
return [];
|
|
482
|
+
const lookup = lookups.find((item) => item.id === lookupId);
|
|
483
|
+
if (!lookup)
|
|
484
|
+
return [];
|
|
485
|
+
return lookup.items
|
|
486
|
+
.slice()
|
|
487
|
+
.sort((a, b) => a.order - b.order)
|
|
488
|
+
.map((item) => ({
|
|
489
|
+
id: item.id,
|
|
490
|
+
key: item.key,
|
|
491
|
+
label: item.name?.display ?? item.name?.en ?? item.key,
|
|
492
|
+
value: item.key,
|
|
493
|
+
color: item.color ?? null,
|
|
494
|
+
description: item.description?.display ?? item.description?.en ?? undefined,
|
|
495
|
+
}));
|
|
496
|
+
}
|
|
497
|
+
function resolveLookupNameById(lookupId, lookups) {
|
|
498
|
+
if (!lookupId)
|
|
499
|
+
return '';
|
|
500
|
+
const lookup = lookups.find((item) => item.id === lookupId);
|
|
501
|
+
return lookup?.name?.display ?? lookup?.name?.en ?? lookup?.key ?? '';
|
|
502
|
+
}
|
|
503
|
+
function buildLookupMatrixFieldConfig(base, prop, lookups) {
|
|
504
|
+
const configuration = (prop?.configuration ?? {});
|
|
505
|
+
const xLookupId = coerceLookupId(configuration['xlookupSource']);
|
|
506
|
+
const yLookupId = coerceLookupId(configuration['ylookupSource']);
|
|
507
|
+
const zLookupId = coerceLookupId(configuration['zlookupId']);
|
|
508
|
+
const xOptions = resolveLookupOptionsById(xLookupId, lookups);
|
|
509
|
+
const yOptions = resolveLookupOptionsById(yLookupId, lookups);
|
|
510
|
+
const zOptions = resolveLookupOptionsById(zLookupId, lookups);
|
|
511
|
+
const zOptionsById = new Map(zOptions
|
|
512
|
+
.filter((item) => item.id != null)
|
|
513
|
+
.map((item) => [String(item.id), item]));
|
|
514
|
+
const rawCells = Array.isArray(configuration['lookupsMatrix'])
|
|
515
|
+
? configuration['lookupsMatrix']
|
|
516
|
+
: [];
|
|
517
|
+
return new LookupMatrixFieldConfig({
|
|
518
|
+
...base,
|
|
519
|
+
required: false,
|
|
520
|
+
xFieldKey: String(configuration['xPropertyLookupKey'] ?? ''),
|
|
521
|
+
yFieldKey: String(configuration['yPropertyLookupKey'] ?? ''),
|
|
522
|
+
xAxisLabel: resolveLookupNameById(xLookupId, lookups),
|
|
523
|
+
yAxisLabel: resolveLookupNameById(yLookupId, lookups),
|
|
524
|
+
xOptions,
|
|
525
|
+
yOptions,
|
|
526
|
+
cells: rawCells.map((cell) => {
|
|
527
|
+
const zOption = zOptionsById.get(String(cell['value'] ?? ''));
|
|
528
|
+
return {
|
|
529
|
+
row: Number(cell['row'] ?? 0),
|
|
530
|
+
column: Number(cell['column'] ?? 0),
|
|
531
|
+
xLookupItemId: String(cell['xValue'] ?? ''),
|
|
532
|
+
yLookupItemId: String(cell['yValue'] ?? ''),
|
|
533
|
+
zLookupItemId: cell['value'] == null ? null : String(cell['value']),
|
|
534
|
+
label: zOption?.label ?? String(cell['value'] ?? ''),
|
|
535
|
+
color: zOption?.color ?? null,
|
|
536
|
+
};
|
|
537
|
+
}),
|
|
538
|
+
});
|
|
539
|
+
}
|
|
540
|
+
function coerceLookupId(value) {
|
|
541
|
+
if (typeof value === 'number' && Number.isFinite(value)) {
|
|
542
|
+
return value;
|
|
543
|
+
}
|
|
544
|
+
if (typeof value === 'string' && value.trim() !== '') {
|
|
545
|
+
const parsed = Number(value);
|
|
546
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
547
|
+
}
|
|
548
|
+
return null;
|
|
549
|
+
}
|
|
486
550
|
function normalizeSubmitValue(value, viewType) {
|
|
487
551
|
switch (viewType) {
|
|
488
552
|
case 'User':
|
|
@@ -1133,7 +1197,7 @@ class ClientForm {
|
|
|
1133
1197
|
return 'upcoming';
|
|
1134
1198
|
}
|
|
1135
1199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1136
|
-
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 }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", 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 }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\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 <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\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]=\"effectiveForcedHiddenFieldKeys()\"\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
|
|
1200
|
+
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 }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", 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 }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\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 <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\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]=\"effectiveForcedHiddenFieldKeys()\"\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
|
|
1137
1201
|
}
|
|
1138
1202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
|
|
1139
1203
|
type: Component,
|
|
@@ -1144,7 +1208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1144
1208
|
DynamicForm,
|
|
1145
1209
|
Tabs,
|
|
1146
1210
|
Skeleton,
|
|
1147
|
-
], providers: [ClientFormStateService], template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\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 <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\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]=\"effectiveForcedHiddenFieldKeys()\"\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"] }]
|
|
1211
|
+
], providers: [ClientFormStateService], template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\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 <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\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]=\"effectiveForcedHiddenFieldKeys()\"\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"] }]
|
|
1148
1212
|
}], 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 }] }], submitRequestMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitRequestMapper", 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 }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", 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"] }], footerStateChanged: [{ type: i0.Output, args: ["footerStateChanged"] }] } });
|
|
1149
1213
|
|
|
1150
1214
|
// ============================================================================
|