npm - @masterteam/forms - Versions diffs - 0.0.68 → 0.0.69 - Mend

@masterteam/forms 0.0.68 → 0.0.69

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.

Files changed (7) hide show

package/assets/forms.css +1 -1
package/fesm2022/masterteam-forms-client-form.mjs +48 -7
package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
package/fesm2022/masterteam-forms-dynamic-field.mjs +1 -1
package/fesm2022/masterteam-forms-dynamic-field.mjs.map +1 -1
package/package.json +2 -2
package/types/masterteam-forms-client-form.d.ts +22 -2

package/assets/forms.css CHANGED Viewed

@@ -1,2 +1,2 @@
-/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-500:oklch(55.4% .046 257.417);--color-gray-200:oklch(92.8% .006 264.531);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.absolute{position:absolute}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-5{top:calc(var(--spacing) * 5)}.right-0{right:calc(var(--spacing) * 0)}.right-1\/2{right:50%}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-10{z-index:10}.col-span-6{grid-column:span 6/span 6}.col-span-12{grid-column:span 12/span 12}.m-0{margin:calc(var(--spacing) * 0)}.ms-6{margin-inline-start:calc(var(--spacing) * 6)}.mt-auto{margin-top:auto}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-0\.5{height:calc(var(--spacing) * .5)}.h-5{height:calc(var(--spacing) * 5)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-0\.5{width:calc(var(--spacing) * .5)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-\[30\%\]{width:30%}.w-full{width:100%}.max-w-\[8rem\]{max-width:8rem}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[8rem\]{min-width:8rem}.min-w-\[36rem\]{min-width:36rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.scroll-mt-4{scroll-margin-top:calc(var(--spacing) * 4)}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0{gap:calc(var(--spacing) * 0)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-gray-200{border-color:var(--color-gray-200)}.border-primary{border-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.border-primary{border-color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.border-surface-200{border-color:var(--p-surface-200)}@supports (color:color-mix(in lab, red, red)){.border-surface-200{border-color:color-mix(in srgb, var(--p-surface-200) calc(100% * 1), transparent)}}.border-surface-300{border-color:var(--p-surface-300)}@supports (color:color-mix(in lab, red, red)){.border-surface-300{border-color:color-mix(in srgb, var(--p-surface-300) calc(100% * 1), transparent)}}.bg-primary{background-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.bg-primary{background-color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.bg-primary-100{background-color:var(--p-primary-100)}@supports (color:color-mix(in lab, red, red)){.bg-primary-100{background-color:color-mix(in srgb, var(--p-primary-100) calc(100% * 1), transparent)}}.bg-surface-50{background-color:var(--p-surface-50)}@supports (color:color-mix(in lab, red, red)){.bg-surface-50{background-color:color-mix(in srgb, var(--p-surface-50) calc(100% * 1), transparent)}}.bg-surface-300{background-color:var(--p-surface-300)}@supports (color:color-mix(in lab, red, red)){.bg-surface-300{background-color:color-mix(in srgb, var(--p-surface-300) calc(100% * 1), transparent)}}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-4{padding-block:calc(var(--spacing) * 4)}.ps-6{padding-inline-start:calc(var(--spacing) * 6)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.text-color{color:var(--p-text-color)}.text-muted-color{color:var(--p-text-muted-color)}.text-primary{color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.text-primary{color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.text-slate-500{color:var(--color-slate-500)}.text-surface-0{color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.text-surface-0{color:color-mix(in srgb, var(--p-surface-0) calc(100% * 1), transparent)}}.text-surface-400{color:var(--p-surface-400)}@supports (color:color-mix(in lab, red, red)){.text-surface-400{color:color-mix(in srgb, var(--p-surface-400) calc(100% * 1), transparent)}}.text-surface-500{color:var(--p-surface-500)}@supports (color:color-mix(in lab, red, red)){.text-surface-500{color:color-mix(in srgb, var(--p-surface-500) calc(100% * 1), transparent)}}.text-surface-700{color:var(--p-surface-700)}@supports (color:color-mix(in lab, red, red)){.text-surface-700{color:color-mix(in srgb, var(--p-surface-700) calc(100% * 1), transparent)}}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-4{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/10{--tw-ring-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/10{--tw-ring-color:color-mix(in oklab, color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent) 10%, transparent)}}.ring-primary\/20{--tw-ring-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/20{--tw-ring-color:color-mix(in oklab, color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent) 20%, transparent)}}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}}@keyframes enter{0%{opacity:var(--p-enter-opacity,1);transform:translate3d(var(--p-enter-translate-x,0), var(--p-enter-translate-y,0), 0) scale3d(var(--p-enter-scale,1), var(--p-enter-scale,1), var(--p-enter-scale,1)) rotate(var(--p-enter-rotate,0))}}@keyframes leave{to{opacity:var(--p-leave-opacity,1);transform:translate3d(var(--p-leave-translate-x,0), var(--p-leave-translate-y,0), 0) scale3d(var(--p-leave-scale,1), var(--p-leave-scale,1), var(--p-leave-scale,1)) rotate(var(--p-leave-rotate,0))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}

package/fesm2022/masterteam-forms-client-form.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { Message } from 'primeng/message';
 import { Skeleton } from 'primeng/skeleton';
 import { Button } from '@masterteam/components/button';
+import { Card } from '@masterteam/components/card';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { EntitiesPreview } from '@masterteam/components/entities';
 import { Tabs } from '@masterteam/components/tabs';
@@ -44,6 +45,13 @@ class ClientFormApiService {
     validate(request) {
         return this.http.post('process-submit/validate', request);
     }
+    /**
+     * Fetch team members for a given level data entry.
+     * Used when a User-type property has justTeamMembers configuration enabled.
+     */
+    getTeamMembers(levelDataId) {
+        return this.http.get(`LevelData/${levelDataId}/team-members`);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
 }
@@ -158,8 +166,9 @@ const WIDTH_TO_ENTITY_SIZE = {
  * @param lang     Current UI language ('en' | 'ar')
  * @param mode     'create' or 'edit' — filters hidden fields accordingly
  * @param lookups  Available lookup definitions for resolving Lookup/LookupMultiSelect options
+ * @param teamMemberOptions  Pre-fetched team member options (used when property configuration has justTeamMembers=true)
  */
-function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false) {
+function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false, teamMemberOptions = []) {
     return {
         sections: config.sections
             .slice()
@@ -182,7 +191,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
                 type: 'header',
                 columns: 12,
                 order: section.order,
-                fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly)),
+                fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly, teamMemberOptions)),
             };
         })
             .filter((section) => section.fields.length > 0),
@@ -321,7 +330,7 @@ function resolveFieldMeta(field) {
         viewType: property?.viewType ?? 'Text',
     };
 }
-function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
+function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamMemberOptions = []) {
     const { property: prop, viewType } = resolveFieldMeta(field);
     const label = prop?.name?.display ??
         field.propertyKey;
@@ -382,7 +391,18 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
             });
         }
         // ── User Search ───────────────────────────────────────────
-        case 'User':
+        case 'User': {
+            const justTeamMembers = !!prop?.configuration?.['justTeamMembers'];
+            if (justTeamMembers) {
+                return new SelectFieldConfig({
+                    ...base,
+                    options: teamMemberOptions,
+                    optionLabel: 'label',
+                    optionValue: 'value',
+                    filter: teamMemberOptions.length > 10,
+                    showClear: !(field.isRequired ?? false),
+                });
+            }
             return new UserSearchFieldConfig({
                 ...base,
                 apiUrl: 'Identity/users',
@@ -390,6 +410,7 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
                     useBaseUrl: false,
                 }),
             });
+        }
         case 'MultiUser':
             return new UserSearchFieldConfig({
                 ...base,
@@ -726,6 +747,7 @@ function stripTemplatePrefix(value) {
  */
 class ClientForm {
     api = inject(ClientFormApiService);
+    teamMemberOptions = signal([], ...(ngDevMode ? [{ debugName: "teamMemberOptions" }] : /* istanbul ignore next */ []));
     confirmationService = inject(ConfirmationService);
     state = inject(ClientFormStateService);
     validationSummary = viewChild('validationSummary', ...(ngDevMode ? [{ debugName: "validationSummary" }] : /* istanbul ignore next */ []));
@@ -808,7 +830,7 @@ class ClientForm {
         const config = this.state.formConfiguration();
         if (!config)
             return null;
-        return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly());
+        return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly(), this.teamMemberOptions());
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     initialValues = computed(() => {
         const mappedValues = mapValuesToFormValue(this.state.formValues(), this.state.formConfiguration());
@@ -1052,6 +1074,7 @@ class ClientForm {
             return;
         this.loadSub?.unsubscribe();
         this.hasStartedLoad.set(true);
+        this.teamMemberOptions.set([]);
         this.stepValidationPending.set(false);
         this.formRuntimeMessages.set([]);
         this.submitValidationMessages.set([]);
@@ -1071,6 +1094,23 @@ class ClientForm {
                     if (response.data.formSource) {
                         this.formSourceDetected.emit(response.data.formSource);
                     }
+                    // Fetch team members if any User field has justTeamMembers=true
+                    const hasJustTeamMembers = response.data.formConfiguration?.sections
+                        .flatMap((s) => s.fields ?? [])
+                        .some((f) => f.propertyMetadata?.viewType === 'User' &&
+                        !!f.propertyMetadata?.configuration?.['justTeamMembers']) ?? false;
+                    const levelDataId = this.levelDataId() ?? response.data.context?.levelDataId;
+                    if (hasJustTeamMembers && levelDataId != null) {
+                        this.api.getTeamMembers(levelDataId).subscribe({
+                            next: (res) => {
+                                const options = (res.data ?? []).map((m) => ({
+                                    label: m.user?.displayName ?? m.user?.fullName ?? m.userId,
+                                    value: m.userId,
+                                }));
+                                this.teamMemberOptions.set(options);
+                            },
+                        });
+                    }
                 }
                 else {
                     const msg = response.message ?? 'Failed to load form';
@@ -1489,7 +1529,7 @@ class ClientForm {
         return 'upcoming';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 } }, 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 }], 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-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <div class=\"flex flex-col gap-3\">\r\n            @if (section.label) {\r\n              <h3\r\n                class=\"text-lg font-semibold text-color border-b-2 border-gray-200 pb-2 mb-3\"\r\n              >\r\n                {{ section.label }}\r\n              </h3>\r\n            }\r\n            <mt-entities-preview [entities]=\"section.entities\" />\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 cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  [disabled]=\"stepNavigationValidating()\"\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 text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? '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                          [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]=\"stepNavigationValidating()\"\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                    <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          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: 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"] }, { 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", "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" }] });
+    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 } }, 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 }], 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-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <mt-card [title]=\"section.label\">\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </mt-card>\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 cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  [disabled]=\"stepNavigationValidating()\"\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 text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? '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                          [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]=\"stepNavigationValidating()\"\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                    <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          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: 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { 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", "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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
             type: Component,
@@ -1497,6 +1537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         Button,
+                        Card,
                         EntitiesPreview,
                         DynamicForm,
                         Tabs,
@@ -1505,7 +1546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Message,
                         TranslocoDirective,
                         TranslocoPipe,
-                    ], 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\" *transloco=\"let t; prefix: 'clientForm'\">\r\n    @if (previewEntitySections().length > 0) {\r\n      <div class=\"flex flex-col gap-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <div class=\"flex flex-col gap-3\">\r\n            @if (section.label) {\r\n              <h3\r\n                class=\"text-lg font-semibold text-color border-b-2 border-gray-200 pb-2 mb-3\"\r\n              >\r\n                {{ section.label }}\r\n              </h3>\r\n            }\r\n            <mt-entities-preview [entities]=\"section.entities\" />\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 cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  [disabled]=\"stepNavigationValidating()\"\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 text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? '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                          [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]=\"stepNavigationValidating()\"\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                    <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          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"] }]
+                    ], 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\" *transloco=\"let t; prefix: 'clientForm'\">\r\n    @if (previewEntitySections().length > 0) {\r\n      <div class=\"flex flex-col gap-3\">\r\n        @for (section of previewEntitySections(); track section.key) {\r\n          <mt-card [title]=\"section.label\">\r\n            <mt-entities-preview [entities]=\"section.entities\" />\r\n          </mt-card>\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 cursor-pointer gap-3 text-left focus-visible:outline-none\"\r\n                  [attr.aria-pressed]=\"step.selected\"\r\n                  [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n                  [disabled]=\"stepNavigationValidating()\"\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 text-base font-semibold transition-all duration-200\"\r\n                    [class]=\"\r\n                      step.state === 'current'\r\n                        ? 'ring-2 ring-primary/20 bg-primary text-white '\r\n                        : step.state === 'completed'\r\n                          ? 'text-primary bg-primary-100 '\r\n                          : step.state === 'upcoming'\r\n                            ? '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                          [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]=\"stepNavigationValidating()\"\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                    <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          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"] }]
         }], ctorParameters: () => [], propDecorators: { validationSummary: [{ type: i0.ViewChild, args: ['validationSummary', { isSignal: true }] }], 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 }] }], defaultValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValues", 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 }] }], confirmWarningsOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmWarningsOnSubmit", required: false }] }], confirmWarningsOnStepChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmWarningsOnStepChange", 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"] }] } });
 // ============================================================================