@masterteam/forms 0.0.68 → 0.0.70

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
  1. package/assets/forms.css +1 -1
  2. package/fesm2022/masterteam-forms-client-form.mjs +72 -16
  3. package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
  4. package/fesm2022/masterteam-forms-dynamic-field.mjs +1 -1
  5. package/fesm2022/masterteam-forms-dynamic-field.mjs.map +1 -1
  6. package/package.json +2 -2
  7. package/types/masterteam-forms-client-form.d.ts +27 -3
package/assets/forms.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
2
2
  @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
@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
7
7
  import { Message } from 'primeng/message';
8
8
  import { Skeleton } from 'primeng/skeleton';
9
9
  import { Button } from '@masterteam/components/button';
10
+ import { Card } from '@masterteam/components/card';
10
11
  import { ConfirmationService } from '@masterteam/components/confirmation';
11
12
  import { EntitiesPreview } from '@masterteam/components/entities';
12
13
  import { Tabs } from '@masterteam/components/tabs';
@@ -44,6 +45,13 @@ class ClientFormApiService {
44
45
  validate(request) {
45
46
  return this.http.post('process-submit/validate', request);
46
47
  }
48
+ /**
49
+ * Fetch team members for a given level data entry.
50
+ * Used when a User-type property has justTeamMembers configuration enabled.
51
+ */
52
+ getTeamMembers(levelDataId) {
53
+ return this.http.get(`LevelData/${levelDataId}/team-members`);
54
+ }
47
55
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
48
56
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
49
57
  }
@@ -158,8 +166,9 @@ const WIDTH_TO_ENTITY_SIZE = {
158
166
  * @param lang Current UI language ('en' | 'ar')
159
167
  * @param mode 'create' or 'edit' — filters hidden fields accordingly
160
168
  * @param lookups Available lookup definitions for resolving Lookup/LookupMultiSelect options
169
+ * @param teamMemberOptions Pre-fetched team member options (used when property configuration has justTeamMembers=true)
161
170
  */
162
- function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false) {
171
+ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false, teamMemberOptions = []) {
163
172
  return {
164
173
  sections: config.sections
165
174
  .slice()
@@ -182,7 +191,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
182
191
  type: 'header',
183
192
  columns: 12,
184
193
  order: section.order,
185
- fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly)),
194
+ fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context, readonly, teamMemberOptions)),
186
195
  };
187
196
  })
188
197
  .filter((section) => section.fields.length > 0),
@@ -258,6 +267,7 @@ function mapPreviewFieldsToEntities(config, values, mode = 'create', readonly =
258
267
  function mapPreviewSectionsToEntities(config, values, lang = 'en', mode = 'create', readonly = false) {
259
268
  const fieldMap = buildFieldValueMap(config);
260
269
  const previewValueByKey = new Map();
270
+ const comparisonByKey = new Map();
261
271
  for (const value of values) {
262
272
  if (value.metadata?.source === 'ProcessVirtual')
263
273
  continue;
@@ -265,6 +275,9 @@ function mapPreviewSectionsToEntities(config, values, lang = 'en', mode = 'creat
265
275
  if (!targetFieldKey)
266
276
  continue;
267
277
  previewValueByKey.set(targetFieldKey, value.value);
278
+ if (value.comparison) {
279
+ comparisonByKey.set(targetFieldKey, value.comparison);
280
+ }
268
281
  }
269
282
  return config.sections
270
283
  .slice()
@@ -289,6 +302,7 @@ function mapPreviewSectionsToEntities(config, values, lang = 'en', mode = 'creat
289
302
  size: WIDTH_TO_ENTITY_SIZE[field.width] ?? 24,
290
303
  labelPosition: 'top',
291
304
  },
305
+ comparison: comparisonByKey.get(field.propertyKey),
292
306
  };
293
307
  }),
294
308
  }))
@@ -321,7 +335,7 @@ function resolveFieldMeta(field) {
321
335
  viewType: property?.viewType ?? 'Text',
322
336
  };
323
337
  }
324
- function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
338
+ function mapFieldToConfig(field, lang, lookups, context, readonly = false, teamMemberOptions = []) {
325
339
  const { property: prop, viewType } = resolveFieldMeta(field);
326
340
  const label = prop?.name?.display ??
327
341
  field.propertyKey;
@@ -382,7 +396,18 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
382
396
  });
383
397
  }
384
398
  // ── User Search ───────────────────────────────────────────
385
- case 'User':
399
+ case 'User': {
400
+ const justTeamMembers = !!prop?.configuration?.['justTeamMembers'];
401
+ if (justTeamMembers) {
402
+ return new SelectFieldConfig({
403
+ ...base,
404
+ options: teamMemberOptions,
405
+ optionLabel: 'label',
406
+ optionValue: 'value',
407
+ filter: teamMemberOptions.length > 10,
408
+ showClear: !(field.isRequired ?? false),
409
+ });
410
+ }
386
411
  return new UserSearchFieldConfig({
387
412
  ...base,
388
413
  apiUrl: 'Identity/users',
@@ -390,6 +415,7 @@ function mapFieldToConfig(field, lang, lookups, context, readonly = false) {
390
415
  useBaseUrl: false,
391
416
  }),
392
417
  });
418
+ }
393
419
  case 'MultiUser':
394
420
  return new UserSearchFieldConfig({
395
421
  ...base,
@@ -726,6 +752,7 @@ function stripTemplatePrefix(value) {
726
752
  */
727
753
  class ClientForm {
728
754
  api = inject(ClientFormApiService);
755
+ teamMemberOptions = signal([], ...(ngDevMode ? [{ debugName: "teamMemberOptions" }] : /* istanbul ignore next */ []));
729
756
  confirmationService = inject(ConfirmationService);
730
757
  state = inject(ClientFormStateService);
731
758
  validationSummary = viewChild('validationSummary', ...(ngDevMode ? [{ debugName: "validationSummary" }] : /* istanbul ignore next */ []));
@@ -808,7 +835,7 @@ class ClientForm {
808
835
  const config = this.state.formConfiguration();
809
836
  if (!config)
810
837
  return null;
811
- return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly());
838
+ return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context(), this.readonly(), this.teamMemberOptions());
812
839
  }, ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
813
840
  initialValues = computed(() => {
814
841
  const mappedValues = mapValuesToFormValue(this.state.formValues(), this.state.formConfiguration());
@@ -1052,6 +1079,7 @@ class ClientForm {
1052
1079
  return;
1053
1080
  this.loadSub?.unsubscribe();
1054
1081
  this.hasStartedLoad.set(true);
1082
+ this.teamMemberOptions.set([]);
1055
1083
  this.stepValidationPending.set(false);
1056
1084
  this.formRuntimeMessages.set([]);
1057
1085
  this.submitValidationMessages.set([]);
@@ -1071,6 +1099,23 @@ class ClientForm {
1071
1099
  if (response.data.formSource) {
1072
1100
  this.formSourceDetected.emit(response.data.formSource);
1073
1101
  }
1102
+ // Fetch team members if any User field has justTeamMembers=true
1103
+ const hasJustTeamMembers = response.data.formConfiguration?.sections
1104
+ .flatMap((s) => s.fields ?? [])
1105
+ .some((f) => f.propertyMetadata?.viewType === 'User' &&
1106
+ !!f.propertyMetadata?.configuration?.['justTeamMembers']) ?? false;
1107
+ const levelDataId = this.levelDataId() ?? response.data.context?.levelDataId;
1108
+ if (hasJustTeamMembers && levelDataId != null) {
1109
+ this.api.getTeamMembers(levelDataId).subscribe({
1110
+ next: (res) => {
1111
+ const options = (res.data ?? []).map((m) => ({
1112
+ label: m.user?.displayName ?? m.user?.fullName ?? m.userId,
1113
+ value: m.userId,
1114
+ }));
1115
+ this.teamMemberOptions.set(options);
1116
+ },
1117
+ });
1118
+ }
1074
1119
  }
1075
1120
  else {
1076
1121
  const msg = response.message ?? 'Failed to load form';
@@ -1102,9 +1147,12 @@ class ClientForm {
1102
1147
  this.submitSub?.unsubscribe();
1103
1148
  this.state.submitting.set(true);
1104
1149
  this.state.submitError.set(null);
1105
- const request = this.buildSubmitRequest(loadResponse);
1150
+ const submitRequest = this.buildSubmitRequest(loadResponse);
1151
+ const validationRequest = this.buildSubmitRequest(loadResponse, {
1152
+ IsSteps: this.resolveValidateIsSteps(false),
1153
+ });
1106
1154
  this.submitValidationMessages.set([]);
1107
- this.submitSub = this.api.validate(request).subscribe({
1155
+ this.submitSub = this.api.validate(validationRequest).subscribe({
1108
1156
  next: (validationResponse) => {
1109
1157
  const validation = validationResponse.data;
1110
1158
  if (!validation) {
@@ -1125,11 +1173,11 @@ class ClientForm {
1125
1173
  this.confirmValidationWarnings(warnings, 'clientForm.warning-confirmation-question', this.translocoService.translate('clientForm.continue-submit'), () => {
1126
1174
  this.state.submitting.set(true);
1127
1175
  this.submitValidationMessages.set([]);
1128
- this.executeSubmit(request);
1176
+ this.executeSubmit(submitRequest);
1129
1177
  });
1130
1178
  return;
1131
1179
  }
1132
- this.executeSubmit(request);
1180
+ this.executeSubmit(submitRequest);
1133
1181
  },
1134
1182
  error: (err) => {
1135
1183
  this.state.submitting.set(false);
@@ -1273,7 +1321,7 @@ class ClientForm {
1273
1321
  req.preview = preview;
1274
1322
  return req;
1275
1323
  }
1276
- buildSubmitRequest(loadResponse) {
1324
+ buildSubmitRequest(loadResponse, options) {
1277
1325
  const context = this.state.context();
1278
1326
  const formValue = this.getFormValue();
1279
1327
  const fields = mapFormValueToSubmitFields(formValue, loadResponse);
@@ -1306,6 +1354,8 @@ class ClientForm {
1306
1354
  req.requestSchemaId = requestSchemaId;
1307
1355
  if (returnUrl)
1308
1356
  req.returnUrl = returnUrl;
1357
+ if (options?.IsSteps != null)
1358
+ req.IsSteps = options.IsSteps;
1309
1359
  const submitRequestMapper = this.submitRequestMapper();
1310
1360
  if (!submitRequestMapper) {
1311
1361
  return req;
@@ -1333,7 +1383,9 @@ class ClientForm {
1333
1383
  this.stepValidationPending.set(true);
1334
1384
  this.state.submitError.set(null);
1335
1385
  this.submitValidationMessages.set([]);
1336
- const request = this.buildSubmitRequest(loadResponse);
1386
+ const request = this.buildSubmitRequest(loadResponse, {
1387
+ IsSteps: this.resolveValidateIsSteps(true),
1388
+ });
1337
1389
  this.submitSub = this.api.validate(request).subscribe({
1338
1390
  next: (validationResponse) => {
1339
1391
  this.stepValidationPending.set(false);
@@ -1377,6 +1429,12 @@ class ClientForm {
1377
1429
  requiresForwardStepValidation(targetStep, currentStep) {
1378
1430
  return (targetStep > currentStep && (this.stepsEnabled() || this.wizardEnabled()));
1379
1431
  }
1432
+ resolveValidateIsSteps(isIntermediateStepValidation) {
1433
+ if (!(this.stepsEnabled() || this.wizardEnabled())) {
1434
+ return undefined;
1435
+ }
1436
+ return isIntermediateStepValidation;
1437
+ }
1380
1438
  hasLocalBlockingValidationIssues() {
1381
1439
  return (this.formControl.invalid ||
1382
1440
  this.formRuntimeMessages().some((msg) => msg.severity === 'error'));
@@ -1489,7 +1547,7 @@ class ClientForm {
1489
1547
  return 'upcoming';
1490
1548
  }
1491
1549
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
1492
- 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" }] });
1550
+ 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", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
1493
1551
  }
1494
1552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
1495
1553
  type: Component,
@@ -1497,6 +1555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
1497
1555
  CommonModule,
1498
1556
  ReactiveFormsModule,
1499
1557
  Button,
1558
+ Card,
1500
1559
  EntitiesPreview,
1501
1560
  DynamicForm,
1502
1561
  Tabs,
@@ -1505,12 +1564,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
1505
1564
  Message,
1506
1565
  TranslocoDirective,
1507
1566
  TranslocoPipe,
1508
- ], 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"] }]
1567
+ ], 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"] }]
1509
1568
  }], 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"] }] } });
1510
1569
 
1511
- // ============================================================================
1512
- // API Response Wrapper
1513
- // ============================================================================
1514
1570
  /**
1515
1571
  * Type guard to detect a FormRequired interception response from legacy commands.
1516
1572
  * Use in HTTP interceptors to redirect to process-form runtime flow.