@masterteam/forms 0.0.77 → 0.0.79
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 +46 -14
- package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-field.mjs +8 -3
- package/fesm2022/masterteam-forms-dynamic-field.mjs.map +1 -1
- package/fesm2022/masterteam-forms-runtime-action-dialog.mjs +26 -5
- package/fesm2022/masterteam-forms-runtime-action-dialog.mjs.map +1 -1
- package/package.json +2 -2
- package/types/masterteam-forms-client-form.d.ts +2 -2
- package/types/masterteam-forms-runtime-action-dialog.d.ts +6 -2
|
@@ -13,7 +13,8 @@ import { Tabs } from '@masterteam/components/tabs';
|
|
|
13
13
|
import { DynamicForm } from '@masterteam/forms/dynamic-form';
|
|
14
14
|
import { Icon } from '@masterteam/icons';
|
|
15
15
|
import { HttpClient, HttpContext } from '@angular/common/http';
|
|
16
|
-
import { ValidatorConfig, TextFieldConfig, EntityListFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig, LookupMatrixFieldConfig } from '@masterteam/components';
|
|
16
|
+
import { ValidatorConfig, TextFieldConfig, EntityListFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, LocationFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig, LookupMatrixFieldConfig } from '@masterteam/components';
|
|
17
|
+
import { normalizeLocationValue } from '@masterteam/components/location-field';
|
|
17
18
|
import { TranslocoService, TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';
|
|
18
19
|
|
|
19
20
|
/**
|
|
@@ -174,6 +175,7 @@ const SECTION_MODE_BODY_CLASS = '@container grid grid-cols-12 gap-4 items-start
|
|
|
174
175
|
*/
|
|
175
176
|
function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false, teamMemberOptions = []) {
|
|
176
177
|
const useSectionModeStyles = config.renderMode === 'sections' || config.renderMode == null;
|
|
178
|
+
const fieldLabelByKey = buildFieldLabelByKey(config, lang);
|
|
177
179
|
return {
|
|
178
180
|
...(useSectionModeStyles ? { layout: SECTION_MODE_LAYOUT } : {}),
|
|
179
181
|
sections: config.sections
|
|
@@ -203,7 +205,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
|
|
|
203
205
|
bodyClass: SECTION_MODE_BODY_CLASS,
|
|
204
206
|
}
|
|
205
207
|
: {}),
|
|
206
|
-
fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly, teamMemberOptions)),
|
|
208
|
+
fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly, teamMemberOptions, fieldLabelByKey)),
|
|
207
209
|
};
|
|
208
210
|
})
|
|
209
211
|
.filter((section) => section.fields.length > 0),
|
|
@@ -347,10 +349,9 @@ function resolveFieldMeta(field) {
|
|
|
347
349
|
viewType: property?.viewType ?? 'Text',
|
|
348
350
|
};
|
|
349
351
|
}
|
|
350
|
-
function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamMemberOptions = []) {
|
|
352
|
+
function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamMemberOptions = [], fieldLabelByKey = new Map()) {
|
|
351
353
|
const { property: prop, viewType } = resolveFieldMeta(field);
|
|
352
|
-
const label = prop
|
|
353
|
-
field.propertyKey;
|
|
354
|
+
const label = resolvePropertyLabel(prop, lang, field.propertyKey);
|
|
354
355
|
const colSpan = WIDTH_TO_COLSPAN[field.width] ?? 12;
|
|
355
356
|
const base = {
|
|
356
357
|
key: field.propertyKey,
|
|
@@ -465,8 +466,7 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamM
|
|
|
465
466
|
case 'Status':
|
|
466
467
|
case 'InternalModule':
|
|
467
468
|
case 'DynamicList':
|
|
468
|
-
case 'API':
|
|
469
|
-
case 'Location': {
|
|
469
|
+
case 'API': {
|
|
470
470
|
const options = extractOptionsFromProperty(prop);
|
|
471
471
|
return new SelectFieldConfig({
|
|
472
472
|
...base,
|
|
@@ -475,8 +475,13 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamM
|
|
|
475
475
|
optionValue: 'value',
|
|
476
476
|
});
|
|
477
477
|
}
|
|
478
|
+
case 'Location':
|
|
479
|
+
return new LocationFieldConfig({
|
|
480
|
+
...base,
|
|
481
|
+
configuration: prop?.configuration ?? null,
|
|
482
|
+
});
|
|
478
483
|
case 'LookupMatrix':
|
|
479
|
-
return buildLookupMatrixFieldConfig(base, prop, lookups);
|
|
484
|
+
return buildLookupMatrixFieldConfig(base, prop, lookups, fieldLabelByKey);
|
|
480
485
|
// ── Connection (level-to-level) ─────────────────────────
|
|
481
486
|
case 'Connection': {
|
|
482
487
|
const connectionConfig = prop?.configuration ?? {};
|
|
@@ -582,8 +587,29 @@ function resolveLookupNameById(lookupId, lookups) {
|
|
|
582
587
|
const lookup = lookups.find((item) => item.id === lookupId);
|
|
583
588
|
return lookup?.name?.display ?? lookup?.name?.en ?? lookup?.key ?? '';
|
|
584
589
|
}
|
|
585
|
-
function
|
|
590
|
+
function buildFieldLabelByKey(config, lang) {
|
|
591
|
+
const labels = new Map();
|
|
592
|
+
for (const section of config.sections ?? []) {
|
|
593
|
+
for (const field of section.fields ?? []) {
|
|
594
|
+
const key = field.propertyKey || field.propertyMetadata?.key;
|
|
595
|
+
if (!key)
|
|
596
|
+
continue;
|
|
597
|
+
labels.set(key, resolvePropertyLabel(field.propertyMetadata, lang, key));
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
return labels;
|
|
601
|
+
}
|
|
602
|
+
function resolvePropertyLabel(property, lang, fallback) {
|
|
603
|
+
const name = property?.name;
|
|
604
|
+
if (typeof name === 'string') {
|
|
605
|
+
return name || fallback;
|
|
606
|
+
}
|
|
607
|
+
return name?.display ?? name?.[lang] ?? name?.en ?? name?.ar ?? fallback;
|
|
608
|
+
}
|
|
609
|
+
function buildLookupMatrixFieldConfig(base, prop, lookups, fieldLabelByKey) {
|
|
586
610
|
const configuration = (prop?.configuration ?? {});
|
|
611
|
+
const xFieldKey = String(configuration['xPropertyLookupKey'] ?? '');
|
|
612
|
+
const yFieldKey = String(configuration['yPropertyLookupKey'] ?? '');
|
|
587
613
|
const xLookupId = coerceLookupId(configuration['xlookupSource']);
|
|
588
614
|
const yLookupId = coerceLookupId(configuration['ylookupSource']);
|
|
589
615
|
const zLookupId = coerceLookupId(configuration['zlookupId']);
|
|
@@ -599,10 +625,12 @@ function buildLookupMatrixFieldConfig(base, prop, lookups) {
|
|
|
599
625
|
return new LookupMatrixFieldConfig({
|
|
600
626
|
...base,
|
|
601
627
|
required: false,
|
|
602
|
-
xFieldKey
|
|
603
|
-
yFieldKey
|
|
604
|
-
xAxisLabel:
|
|
605
|
-
|
|
628
|
+
xFieldKey,
|
|
629
|
+
yFieldKey,
|
|
630
|
+
xAxisLabel: fieldLabelByKey.get(xFieldKey) ??
|
|
631
|
+
resolveLookupNameById(xLookupId, lookups),
|
|
632
|
+
yAxisLabel: fieldLabelByKey.get(yFieldKey) ??
|
|
633
|
+
resolveLookupNameById(yLookupId, lookups),
|
|
606
634
|
xOptions,
|
|
607
635
|
yOptions,
|
|
608
636
|
cells: rawCells.map((cell) => {
|
|
@@ -662,6 +690,8 @@ function normalizeSubmitValue(value, viewType) {
|
|
|
662
690
|
return value['id'] ?? value;
|
|
663
691
|
}
|
|
664
692
|
return value;
|
|
693
|
+
case 'Location':
|
|
694
|
+
return normalizeLocationValue(value);
|
|
665
695
|
default:
|
|
666
696
|
return value;
|
|
667
697
|
}
|
|
@@ -675,6 +705,8 @@ function resolveLoadedFieldValue(value) {
|
|
|
675
705
|
// case 'DateTime':
|
|
676
706
|
// case 'Time':
|
|
677
707
|
// return coerceToDate(resolvedValue);
|
|
708
|
+
case 'Location':
|
|
709
|
+
return normalizeLocationValue(resolvedValue);
|
|
678
710
|
default:
|
|
679
711
|
return resolvedValue;
|
|
680
712
|
}
|
|
@@ -1654,7 +1686,7 @@ class ClientForm {
|
|
|
1654
1686
|
return 'upcoming';
|
|
1655
1687
|
}
|
|
1656
1688
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", 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 }, confirmWarningsOnSubmit: { classPropertyName: "confirmWarningsOnSubmit", publicName: "confirmWarningsOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnStepChange: { classPropertyName: "confirmWarningsOnStepChange", publicName: "confirmWarningsOnStepChange", 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 }, allowedFieldKeys: { classPropertyName: "allowedFieldKeys", publicName: "allowedFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], viewQueries: [{ propertyName: "validationSummary", first: true, predicate: ["validationSummary"], descendants: true, isSignal: true }, { propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], 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\" *transloco=\"let t; prefix: 'clientForm'\">\r\n @if (previewEntitySections().length > 0) {\r\n <div class=\"flex flex-col gap-4\">\r\n @for (section of previewEntitySections(); track section.key) {\r\n <div\r\n class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n >\r\n @if (section.label) {\r\n <h3\r\n class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n >\r\n {{ section.label }}\r\n </h3>\r\n }\r\n <div class=\"p-4\">\r\n <mt-entities-preview [entities]=\"section.entities\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n @if (wizardEnabled()) {\r\n <!-- Wizard Mode: vertical stepper left + form right -->\r\n <div class=\"flex gap-0 min-h-0\">\r\n <!-- Vertical Stepper -->\r\n <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\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 @if (!first) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"flex items-center gap-3 text-left focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"!isStepButtonDisabled(step.value)\"\r\n [class.cursor-default]=\"isStepButtonDisabled(step.value)\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded border text-base font-semibold transition-all duration-200\"\r\n [class]=\"\r\n step.state === 'current'\r\n ? 'border-primary ring-2 ring-primary/20 bg-primary text-white '\r\n : step.state === 'completed'\r\n ? 'border-primary text-primary bg-primary-100 '\r\n : step.state === 'upcoming'\r\n ? 'border-transparent bg-primary-100 text-white'\r\n : ''\r\n \"\r\n >\r\n @if (step.state === \"completed\") {\r\n <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n } @else {\r\n {{ step.value }}\r\n }\r\n </span>\r\n <span\r\n class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary': step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed',\r\n 'font-medium text-surface-400': step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n @if (!last) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n <!-- Form Content + Buttons -->\r\n <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"wizardFormConfig() ?? 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 @if (showInternalStepActions()) {\r\n <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\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 [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\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 [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\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 <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\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 }\r\n } @else if (previewEntitySections().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 {{ t(\"no-form-required\") }}\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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { 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", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
1689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", 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 }, confirmWarningsOnSubmit: { classPropertyName: "confirmWarningsOnSubmit", publicName: "confirmWarningsOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnStepChange: { classPropertyName: "confirmWarningsOnStepChange", publicName: "confirmWarningsOnStepChange", 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 }, allowedFieldKeys: { classPropertyName: "allowedFieldKeys", publicName: "allowedFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], viewQueries: [{ propertyName: "validationSummary", first: true, predicate: ["validationSummary"], descendants: true, isSignal: true }, { propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], 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\" *transloco=\"let t; prefix: 'clientForm'\">\r\n @if (previewEntitySections().length > 0) {\r\n <div class=\"flex flex-col gap-4\">\r\n @for (section of previewEntitySections(); track section.key) {\r\n <div\r\n class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n >\r\n @if (section.label) {\r\n <h3\r\n class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n >\r\n {{ section.label }}\r\n </h3>\r\n }\r\n <div class=\"p-4\">\r\n <mt-entities-preview [entities]=\"section.entities\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n @if (wizardEnabled()) {\r\n <!-- Wizard Mode: vertical stepper left + form right -->\r\n <div class=\"flex gap-0 min-h-0\">\r\n <!-- Vertical Stepper -->\r\n <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\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 @if (!first) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"flex items-center gap-3 text-left focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"!isStepButtonDisabled(step.value)\"\r\n [class.cursor-default]=\"isStepButtonDisabled(step.value)\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded border text-base font-semibold transition-all duration-200\"\r\n [class]=\"\r\n step.state === 'current'\r\n ? 'border-primary ring-2 ring-primary/20 bg-primary text-white '\r\n : step.state === 'completed'\r\n ? 'border-primary text-primary bg-primary-100 '\r\n : step.state === 'upcoming'\r\n ? 'border-transparent bg-primary-100 text-white'\r\n : ''\r\n \"\r\n >\r\n @if (step.state === \"completed\") {\r\n <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n } @else {\r\n {{ step.value }}\r\n }\r\n </span>\r\n <span\r\n class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary': step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed',\r\n 'font-medium text-surface-400': step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n @if (!last) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n <!-- Form Content + Buttons -->\r\n <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"wizardFormConfig() ?? 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 @if (showInternalStepActions()) {\r\n <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\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 [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\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 [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\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 <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\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 }\r\n } @else if (previewEntitySections().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 {{ t(\"no-form-required\") }}\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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { 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", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
1658
1690
|
}
|
|
1659
1691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
|
|
1660
1692
|
type: Component,
|