@masterteam/forms 0.0.76 → 0.0.78
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 +28 -6
- 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-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
|
/**
|
|
@@ -422,7 +423,7 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamM
|
|
|
422
423
|
}
|
|
423
424
|
return new UserSearchFieldConfig({
|
|
424
425
|
...base,
|
|
425
|
-
apiUrl:
|
|
426
|
+
apiUrl: resolveUserSearchApiUrl(prop),
|
|
426
427
|
context: new HttpContext().set(REQUEST_CONTEXT, {
|
|
427
428
|
useBaseUrl: false,
|
|
428
429
|
}),
|
|
@@ -431,7 +432,7 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamM
|
|
|
431
432
|
case 'MultiUser':
|
|
432
433
|
return new UserSearchFieldConfig({
|
|
433
434
|
...base,
|
|
434
|
-
apiUrl:
|
|
435
|
+
apiUrl: resolveUserSearchApiUrl(prop),
|
|
435
436
|
isMultiple: true,
|
|
436
437
|
context: new HttpContext().set(REQUEST_CONTEXT, {
|
|
437
438
|
useBaseUrl: false,
|
|
@@ -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,6 +475,11 @@ 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
484
|
return buildLookupMatrixFieldConfig(base, prop, lookups);
|
|
480
485
|
// ── Connection (level-to-level) ─────────────────────────
|
|
@@ -619,6 +624,19 @@ function buildLookupMatrixFieldConfig(base, prop, lookups) {
|
|
|
619
624
|
}),
|
|
620
625
|
});
|
|
621
626
|
}
|
|
627
|
+
function resolveUserSearchApiUrl(prop) {
|
|
628
|
+
const groupId = prop?.configuration?.['group'];
|
|
629
|
+
if (typeof groupId === 'number' && Number.isFinite(groupId) && groupId > 0) {
|
|
630
|
+
return `Identity/users/search/group/${groupId}`;
|
|
631
|
+
}
|
|
632
|
+
if (typeof groupId === 'string') {
|
|
633
|
+
const trimmed = groupId.trim();
|
|
634
|
+
if (trimmed) {
|
|
635
|
+
return `Identity/users/search/group/${trimmed}`;
|
|
636
|
+
}
|
|
637
|
+
}
|
|
638
|
+
return 'Identity/users/search';
|
|
639
|
+
}
|
|
622
640
|
function coerceLookupId(value) {
|
|
623
641
|
if (typeof value === 'number' && Number.isFinite(value)) {
|
|
624
642
|
return value;
|
|
@@ -649,6 +667,8 @@ function normalizeSubmitValue(value, viewType) {
|
|
|
649
667
|
return value['id'] ?? value;
|
|
650
668
|
}
|
|
651
669
|
return value;
|
|
670
|
+
case 'Location':
|
|
671
|
+
return normalizeLocationValue(value);
|
|
652
672
|
default:
|
|
653
673
|
return value;
|
|
654
674
|
}
|
|
@@ -662,6 +682,8 @@ function resolveLoadedFieldValue(value) {
|
|
|
662
682
|
// case 'DateTime':
|
|
663
683
|
// case 'Time':
|
|
664
684
|
// return coerceToDate(resolvedValue);
|
|
685
|
+
case 'Location':
|
|
686
|
+
return normalizeLocationValue(resolvedValue);
|
|
665
687
|
default:
|
|
666
688
|
return resolvedValue;
|
|
667
689
|
}
|
|
@@ -1641,7 +1663,7 @@ class ClientForm {
|
|
|
1641
1663
|
return 'upcoming';
|
|
1642
1664
|
}
|
|
1643
1665
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1644
|
-
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" }] });
|
|
1666
|
+
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" }] });
|
|
1645
1667
|
}
|
|
1646
1668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
|
|
1647
1669
|
type: Component,
|