@masterteam/forms 0.0.75 → 0.0.76

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 (8) hide show
  1. package/assets/forms.css +2 -2
  2. package/fesm2022/masterteam-forms-client-form.mjs +36 -8
  3. package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
  4. package/fesm2022/masterteam-forms-dynamic-form.mjs +7 -0
  5. package/fesm2022/masterteam-forms-dynamic-form.mjs.map +1 -1
  6. package/package.json +2 -2
  7. package/types/masterteam-forms-client-form.d.ts +5 -2
  8. package/types/masterteam-forms-dynamic-form.d.ts +2 -0
package/assets/forms.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
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-md:.375rem;--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-default{cursor:default}.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-hidden{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)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-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)}}.border-transparent{border-color:#0000}.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-0{background-color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.bg-surface-0{background-color:color-mix(in srgb, var(--p-surface-0) 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-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-3{padding-block:calc(var(--spacing) * 3)}.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}
1
+ /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
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-md:.375rem;--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}.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-default{cursor:default}.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-hidden{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)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-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)}}.border-transparent{border-color:#0000}.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-0{background-color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.bg-surface-0{background-color:color-mix(in srgb, var(--p-surface-0) 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-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-3{padding-block:calc(var(--spacing) * 3)}.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,7 +7,6 @@ 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';
11
10
  import { ConfirmationService } from '@masterteam/components/confirmation';
12
11
  import { EntitiesPreview } from '@masterteam/components/entities';
13
12
  import { Tabs } from '@masterteam/components/tabs';
@@ -783,6 +782,7 @@ class ClientForm {
783
782
  confirmationService = inject(ConfirmationService);
784
783
  state = inject(ClientFormStateService);
785
784
  validationSummary = viewChild('validationSummary', ...(ngDevMode ? [{ debugName: "validationSummary" }] : /* istanbul ignore next */ []));
785
+ dynamicForm = viewChild(DynamicForm, ...(ngDevMode ? [{ debugName: "dynamicForm" }] : /* istanbul ignore next */ []));
786
786
  loadSub;
787
787
  submitSub;
788
788
  formValueSub;
@@ -990,7 +990,7 @@ class ClientForm {
990
990
  return [activeSection.key || `section-${currentIndex}`];
991
991
  }, ...(ngDevMode ? [{ debugName: "visibleSectionKeys" }] : /* istanbul ignore next */ []));
992
992
  forcedHiddenFieldKeys = computed(() => {
993
- if (!this.sectionNavigationEnabled())
993
+ if (!this.sectionNavigationEnabled() || this.tabsEnabled())
994
994
  return [];
995
995
  const sections = this.stepSections();
996
996
  const currentIndex = this.currentStep() - 1;
@@ -1197,13 +1197,16 @@ class ClientForm {
1197
1197
  return;
1198
1198
  }
1199
1199
  this.submitSub?.unsubscribe();
1200
- this.state.submitting.set(true);
1201
1200
  this.state.submitError.set(null);
1201
+ this.submitValidationMessages.set([]);
1202
+ if (!this.validateLocalFormForSubmit()) {
1203
+ return;
1204
+ }
1205
+ this.state.submitting.set(true);
1202
1206
  const submitRequest = this.buildSubmitRequest(loadResponse);
1203
1207
  const validationRequest = this.buildSubmitRequest(loadResponse, {
1204
1208
  IsSteps: this.resolveValidateIsSteps(false),
1205
1209
  });
1206
- this.submitValidationMessages.set([]);
1207
1210
  this.submitSub = this.api.validate(validationRequest).subscribe({
1208
1211
  next: (validationResponse) => {
1209
1212
  const validation = validationResponse.data;
@@ -1501,6 +1504,32 @@ class ClientForm {
1501
1504
  return (this.formControl.invalid ||
1502
1505
  this.formRuntimeMessages().some((msg) => msg.severity === 'error'));
1503
1506
  }
1507
+ validateLocalFormForSubmit() {
1508
+ this.dynamicForm()?.markAllAsTouched();
1509
+ this.formControl.markAllAsTouched();
1510
+ this.formControl.updateValueAndValidity({ emitEvent: false });
1511
+ if (!this.hasLocalBlockingValidationIssues()) {
1512
+ return true;
1513
+ }
1514
+ this.showFirstInvalidSection();
1515
+ this.submitValidationMessages.set([
1516
+ this.createValidationFeedbackMessage(this.translocoService.translate('clientForm.validation'), 'error'),
1517
+ ]);
1518
+ return false;
1519
+ }
1520
+ showFirstInvalidSection() {
1521
+ if (!this.sectionNavigationEnabled()) {
1522
+ return;
1523
+ }
1524
+ const dynamicForm = this.dynamicForm();
1525
+ if (!dynamicForm) {
1526
+ return;
1527
+ }
1528
+ const invalidSectionIndex = this.stepSections().findIndex((section) => section.fields.some((field) => !!field.key && dynamicForm.isControlInvalid(field.key)));
1529
+ if (invalidSectionIndex >= 0) {
1530
+ this.currentStep.set(invalidSectionIndex + 1);
1531
+ }
1532
+ }
1504
1533
  handleValidationRequestFailure(message) {
1505
1534
  this.state.setSubmitError(message);
1506
1535
  this.submitValidationMessages.set([
@@ -1612,7 +1641,7 @@ class ClientForm {
1612
1641
  return 'upcoming';
1613
1642
  }
1614
1643
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
1615
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnSubmit: { classPropertyName: "confirmWarningsOnSubmit", publicName: "confirmWarningsOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnStepChange: { classPropertyName: "confirmWarningsOnStepChange", publicName: "confirmWarningsOnStepChange", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null }, allowedFieldKeys: { classPropertyName: "allowedFieldKeys", publicName: "allowedFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], viewQueries: [{ propertyName: "validationSummary", first: true, predicate: ["validationSummary"], descendants: true, isSignal: true }], 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 gap-3 text-left focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"!isStepButtonDisabled(step.value)\"\r\n [class.cursor-default]=\"isStepButtonDisabled(step.value)\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded border text-base font-semibold transition-all duration-200\"\r\n [class]=\"\r\n step.state === 'current'\r\n ? 'border-primary ring-2 ring-primary/20 bg-primary text-white '\r\n : step.state === 'completed'\r\n ? 'border-primary text-primary bg-primary-100 '\r\n : step.state === 'upcoming'\r\n ? 'border-transparent bg-primary-100 text-white'\r\n : ''\r\n \"\r\n >\r\n @if (step.state === \"completed\") {\r\n <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n } @else {\r\n {{ step.value }}\r\n }\r\n </span>\r\n <span\r\n class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary': step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed',\r\n 'font-medium text-surface-400': step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n @if (!last) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n <!-- Form Content + Buttons -->\r\n <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"wizardFormConfig() ?? config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else if (previewEntitySections().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n {{ t(\"no-form-required\") }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
1644
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientForm, isStandalone: true, selector: "mt-client-form", inputs: { moduleKey: { classPropertyName: "moduleKey", publicName: "moduleKey", isSignal: true, isRequired: true, transformFunction: null }, operationKey: { classPropertyName: "operationKey", publicName: "operationKey", isSignal: true, isRequired: true, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, moduleDataId: { classPropertyName: "moduleDataId", publicName: "moduleDataId", isSignal: true, isRequired: false, transformFunction: null }, requestSchemaId: { classPropertyName: "requestSchemaId", publicName: "requestSchemaId", isSignal: true, isRequired: false, transformFunction: null }, draftProcessId: { classPropertyName: "draftProcessId", publicName: "draftProcessId", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, submitRequestMapper: { classPropertyName: "submitRequestMapper", publicName: "submitRequestMapper", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, formMode: { classPropertyName: "formMode", publicName: "formMode", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, showInternalStepActions: { classPropertyName: "showInternalStepActions", publicName: "showInternalStepActions", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnSubmit: { classPropertyName: "confirmWarningsOnSubmit", publicName: "confirmWarningsOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, confirmWarningsOnStepChange: { classPropertyName: "confirmWarningsOnStepChange", publicName: "confirmWarningsOnStepChange", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null }, allowedFieldKeys: { classPropertyName: "allowedFieldKeys", publicName: "allowedFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], viewQueries: [{ propertyName: "validationSummary", first: true, predicate: ["validationSummary"], descendants: true, isSignal: true }, { propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\r\n\r\n<!-- Loading State -->\r\n@if (state.loading()) {\r\n <div class=\"flex flex-col gap-6\">\r\n <!-- Section header skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"30%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"40%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"25%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"45%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Second section skeleton -->\r\n <div class=\"flex flex-col gap-4\">\r\n <p-skeleton width=\"25%\" height=\"1.5rem\" />\r\n <div class=\"grid grid-cols-12 gap-4\">\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"35%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-6 flex flex-col gap-2\">\r\n <p-skeleton width=\"50%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"2.5rem\" />\r\n </div>\r\n <div class=\"col-span-12 flex flex-col gap-2\">\r\n <p-skeleton width=\"30%\" height=\"0.875rem\" />\r\n <p-skeleton width=\"100%\" height=\"5rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n <div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'clientForm'\">\r\n @if (previewEntitySections().length > 0) {\r\n <div class=\"flex flex-col gap-4\">\r\n @for (section of previewEntitySections(); track section.key) {\r\n <div\r\n class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n >\r\n @if (section.label) {\r\n <h3\r\n class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n >\r\n {{ section.label }}\r\n </h3>\r\n }\r\n <div class=\"p-4\">\r\n <mt-entities-preview [entities]=\"section.entities\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n @if (wizardEnabled()) {\r\n <!-- Wizard Mode: vertical stepper left + form right -->\r\n <div class=\"flex gap-0 min-h-0\">\r\n <!-- Vertical Stepper -->\r\n <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n @if (!first) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"flex items-center gap-3 text-left focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"!isStepButtonDisabled(step.value)\"\r\n [class.cursor-default]=\"isStepButtonDisabled(step.value)\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded border text-base font-semibold transition-all duration-200\"\r\n [class]=\"\r\n step.state === 'current'\r\n ? 'border-primary ring-2 ring-primary/20 bg-primary text-white '\r\n : step.state === 'completed'\r\n ? 'border-primary text-primary bg-primary-100 '\r\n : step.state === 'upcoming'\r\n ? 'border-transparent bg-primary-100 text-white'\r\n : ''\r\n \"\r\n >\r\n @if (step.state === \"completed\") {\r\n <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n } @else {\r\n {{ step.value }}\r\n }\r\n </span>\r\n <span\r\n class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary': step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed',\r\n 'font-medium text-surface-400': step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n @if (!last) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n <!-- Form Content + Buttons -->\r\n <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"wizardFormConfig() ?? config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else if (previewEntitySections().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n {{ t(\"no-form-required\") }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
1616
1645
  }
1617
1646
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientForm, decorators: [{
1618
1647
  type: Component,
@@ -1620,7 +1649,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
1620
1649
  CommonModule,
1621
1650
  ReactiveFormsModule,
1622
1651
  Button,
1623
- Card,
1624
1652
  EntitiesPreview,
1625
1653
  DynamicForm,
1626
1654
  Tabs,
@@ -1629,8 +1657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
1629
1657
  Message,
1630
1658
  TranslocoDirective,
1631
1659
  TranslocoPipe,
1632
- ], 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 gap-3 text-left focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"!isStepButtonDisabled(step.value)\"\r\n [class.cursor-default]=\"isStepButtonDisabled(step.value)\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded border text-base font-semibold transition-all duration-200\"\r\n [class]=\"\r\n step.state === 'current'\r\n ? 'border-primary ring-2 ring-primary/20 bg-primary text-white '\r\n : step.state === 'completed'\r\n ? 'border-primary text-primary bg-primary-100 '\r\n : step.state === 'upcoming'\r\n ? 'border-transparent bg-primary-100 text-white'\r\n : ''\r\n \"\r\n >\r\n @if (step.state === \"completed\") {\r\n <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n } @else {\r\n {{ step.value }}\r\n }\r\n </span>\r\n <span\r\n class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary': step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed',\r\n 'font-medium text-surface-400': step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n @if (!last) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n <!-- Form Content + Buttons -->\r\n <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"wizardFormConfig() ?? config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else if (previewEntitySections().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n {{ t(\"no-form-required\") }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
1633
- }], 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 }] }], allowedFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedFieldKeys", 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"] }] } });
1660
+ ], 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-4\">\r\n @for (section of previewEntitySections(); track section.key) {\r\n <div\r\n class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n >\r\n @if (section.label) {\r\n <h3\r\n class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n >\r\n {{ section.label }}\r\n </h3>\r\n }\r\n <div class=\"p-4\">\r\n <mt-entities-preview [entities]=\"section.entities\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n @if (wizardEnabled()) {\r\n <!-- Wizard Mode: vertical stepper left + form right -->\r\n <div class=\"flex gap-0 min-h-0\">\r\n <!-- Vertical Stepper -->\r\n <div class=\"w-[30%] shrink-0 flex flex-col py-4 px-6\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n @if (!first) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.beforeLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"flex items-center gap-3 text-left focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"!isStepButtonDisabled(step.value)\"\r\n [class.cursor-default]=\"isStepButtonDisabled(step.value)\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"step.state === 'current' ? 'step' : null\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-12 w-12 shrink-0 items-center justify-center rounded border text-base font-semibold transition-all duration-200\"\r\n [class]=\"\r\n step.state === 'current'\r\n ? 'border-primary ring-2 ring-primary/20 bg-primary text-white '\r\n : step.state === 'completed'\r\n ? 'border-primary text-primary bg-primary-100 '\r\n : step.state === 'upcoming'\r\n ? 'border-transparent bg-primary-100 text-white'\r\n : ''\r\n \"\r\n >\r\n @if (step.state === \"completed\") {\r\n <mt-icon icon=\"general.check\" class=\"text-xl\" />\r\n } @else {\r\n {{ step.value }}\r\n }\r\n </span>\r\n <span\r\n class=\"text-sm leading-5 truncate transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary': step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed',\r\n 'font-medium text-surface-400': step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n @if (!last) {\r\n <div\r\n class=\"ms-6 w-0.5 h-5 shrink-0\"\r\n [ngClass]=\"\r\n step.afterLineActive ? 'bg-primary' : 'bg-surface-300'\r\n \"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n <!-- Form Content + Buttons -->\r\n <div class=\"flex-1 flex flex-col gap-4 min-w-0 ps-6\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"wizardFormConfig() ?? config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-end gap-2 pt-4 mt-auto\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div #validationSummary class=\"flex flex-col gap-3 scroll-mt-4\">\r\n @if (runtimeErrors().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-errors\") }}\r\n </p>\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"error\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <section class=\"flex flex-col gap-2\">\r\n <p\r\n class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500\"\r\n >\r\n {{ t(\"validation-warnings\") }}\r\n </p>\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <p-message\r\n severity=\"warn\"\r\n styleClass=\"w-full\"\r\n [text]=\"msg.message\"\r\n />\r\n }\r\n </section>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n [disabled]=\"isStepButtonDisabled(step.value)\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [class.cursor-pointer]=\"\r\n !isStepButtonDisabled(step.value)\r\n \"\r\n [class.cursor-default]=\"\r\n isStepButtonDisabled(step.value)\r\n \"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <mt-button\r\n [label]=\"'previous' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === 1 || stepNavigationValidating()\r\n \"\r\n (onClick)=\"goToPreviousStep()\"\r\n />\r\n <mt-button\r\n [label]=\"'next' | transloco\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n [disabled]=\"\r\n currentStep() === stepSections().length ||\r\n stepNavigationValidating()\r\n \"\r\n [loading]=\"stepNavigationValidating()\"\r\n (onClick)=\"goToNextStep()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (tabsEnabled()) {\r\n <mt-tabs\r\n [active]=\"currentStep()\"\r\n (activeChange)=\"onStepChange($event)\"\r\n [options]=\"tabOptions()\"\r\n size=\"small\"\r\n fluid\r\n />\r\n }\r\n <mt-dynamic-form\r\n [formConfig]=\"config\"\r\n [formControl]=\"formControl\"\r\n [visibleSectionKeys]=\"visibleSectionKeys()\"\r\n [forcedHiddenFieldKeys]=\"effectiveForcedHiddenFieldKeys()\"\r\n [preserveForcedHiddenValues]=\"true\"\r\n (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\r\n />\r\n </div>\r\n }\r\n }\r\n } @else if (previewEntitySections().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n {{ t(\"no-form-required\") }}\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
1661
+ }], ctorParameters: () => [], propDecorators: { validationSummary: [{ type: i0.ViewChild, args: ['validationSummary', { isSignal: true }] }], dynamicForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DynamicForm), { 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 }] }], allowedFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedFieldKeys", 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"] }] } });
1634
1662
 
1635
1663
  /**
1636
1664
  * Type guard to detect a FormRequired interception response from legacy commands.