@masterteam/forms 0.0.51 → 0.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/forms.css +1 -1
- package/fesm2022/masterteam-forms-client-form.mjs +128 -15
- package/fesm2022/masterteam-forms-client-form.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-field.mjs +8 -4
- package/fesm2022/masterteam-forms-dynamic-field.mjs.map +1 -1
- package/fesm2022/masterteam-forms-dynamic-form.mjs +2 -2
- package/fesm2022/masterteam-forms-dynamic-form.mjs.map +1 -1
- package/package.json +2 -2
- package/types/masterteam-forms-client-form.d.ts +69 -20
package/assets/forms.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.2.2 | 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-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--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}}}@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-red-600:oklch(57.7% .245 27.325);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-gray-200:oklch(92.8% .006 264.531);--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-semibold:600;--radius-lg:.5rem;--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}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.col-span-6{grid-column:span 6/span 6}.col-span-12{grid-column:span 12/span 12}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.list-disc{list-style-type:disc}.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}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-gray-200{border-color:var(--color-gray-200)}.border-surface-200{border-color:var(--p-surface-200)}@supports (color:color-mix(in lab, red, red)){.border-surface-200{border-color:color-mix(in srgb, var(--p-surface-200) calc(100% * 1), transparent)}}.border-surface-300{border-color:var(--p-surface-300)}@supports (color:color-mix(in lab, red, red)){.border-surface-300{border-color:color-mix(in srgb, var(--p-surface-300) calc(100% * 1), transparent)}}.bg-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)}}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-2{padding-block:calc(var(--spacing) * 2)}.ps-5{padding-inline-start:calc(var(--spacing) * 5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.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))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-color{color:var(--p-text-color)}.text-muted-color{color:var(--p-text-muted-color)}.text-red-600{color:var(--color-red-600)}.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,)}}@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-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@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}
|
|
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-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight: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-red-600:oklch(57.7% .245 27.325);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-gray-200:oklch(92.8% .006 264.531);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.absolute{position:absolute}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-5{top:calc(var(--spacing) * 5)}.right-0{right:calc(var(--spacing) * 0)}.right-1\/2{right:50%}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-10{z-index:10}.col-span-6{grid-column:span 6/span 6}.col-span-12{grid-column:span 12/span 12}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-0\.5{height:calc(var(--spacing) * .5)}.h-10{height:calc(var(--spacing) * 10)}.w-10{width:calc(var(--spacing) * 10)}.w-full{width:100%}.max-w-\[8rem\]{max-width:8rem}.min-w-\[8rem\]{min-width:8rem}.min-w-\[36rem\]{min-width:36rem}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.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}.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)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-gray-200{border-color:var(--color-gray-200)}.border-primary{border-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.border-primary{border-color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.border-surface-200{border-color:var(--p-surface-200)}@supports (color:color-mix(in lab, red, red)){.border-surface-200{border-color:color-mix(in srgb, var(--p-surface-200) calc(100% * 1), transparent)}}.border-surface-300{border-color:var(--p-surface-300)}@supports (color:color-mix(in lab, red, red)){.border-surface-300{border-color:color-mix(in srgb, var(--p-surface-300) calc(100% * 1), transparent)}}.bg-primary{background-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.bg-primary{background-color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.bg-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-3{padding-inline:calc(var(--spacing) * 3)}.py-2{padding-block:calc(var(--spacing) * 2)}.ps-5{padding-inline-start:calc(var(--spacing) * 5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.text-center{text-align:center}.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))}.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)}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.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-red-600{color:var(--color-red-600)}.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-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)}}.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)}}.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-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@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-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,16 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, Injectable, signal, computed, input, output, effect, untracked, Component } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i2 from '@angular/forms';
|
|
4
4
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
+
import * as i1 from '@angular/common';
|
|
5
6
|
import { CommonModule } from '@angular/common';
|
|
6
7
|
import { Skeleton } from 'primeng/skeleton';
|
|
7
|
-
import * as i2 from 'primeng/stepper';
|
|
8
|
-
import { StepperModule } from 'primeng/stepper';
|
|
9
8
|
import { EntitiesPreview } from '@masterteam/components/entities';
|
|
10
9
|
import { Tabs } from '@masterteam/components/tabs';
|
|
11
10
|
import { DynamicForm } from '@masterteam/forms/dynamic-form';
|
|
12
11
|
import { HttpClient, HttpContext } from '@angular/common/http';
|
|
13
|
-
import { ValidatorConfig, TextFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig } from '@masterteam/components';
|
|
12
|
+
import { ValidatorConfig, TextFieldConfig, SchedulePredecessorFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig } from '@masterteam/components';
|
|
13
|
+
import { TranslocoService } from '@jsverse/transloco';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* Stateless HTTP service for process-forms runtime APIs.
|
|
@@ -148,7 +148,7 @@ const WIDTH_TO_ENTITY_SIZE = {
|
|
|
148
148
|
* @param mode 'create' or 'edit' — filters hidden fields accordingly
|
|
149
149
|
* @param lookups Available lookup definitions for resolving Lookup/LookupMultiSelect options
|
|
150
150
|
*/
|
|
151
|
-
function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = []) {
|
|
151
|
+
function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null) {
|
|
152
152
|
const validationRules = mapValidationRules(config, lang);
|
|
153
153
|
return {
|
|
154
154
|
sections: config.sections
|
|
@@ -172,7 +172,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
|
|
|
172
172
|
type: 'header',
|
|
173
173
|
columns: 12,
|
|
174
174
|
order: section.order,
|
|
175
|
-
fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups)),
|
|
175
|
+
fields: visibleFields.map((field) => mapFieldToConfig(field, lang, lookups, context)),
|
|
176
176
|
};
|
|
177
177
|
})
|
|
178
178
|
.filter((section) => section.fields.length > 0),
|
|
@@ -277,6 +277,9 @@ function isFieldVisible(field, mode) {
|
|
|
277
277
|
function isPreviewOnlyField(field) {
|
|
278
278
|
return field.isWrite === false && field.isRead !== false;
|
|
279
279
|
}
|
|
280
|
+
function isCalculatedField(field) {
|
|
281
|
+
return field.propertyMetadata?.isCalculated === true;
|
|
282
|
+
}
|
|
280
283
|
function resolveFieldMeta(field) {
|
|
281
284
|
const property = field.propertyMetadata;
|
|
282
285
|
return {
|
|
@@ -285,7 +288,7 @@ function resolveFieldMeta(field) {
|
|
|
285
288
|
viewType: property?.viewType ?? 'Text',
|
|
286
289
|
};
|
|
287
290
|
}
|
|
288
|
-
function mapFieldToConfig(field, lang, lookups) {
|
|
291
|
+
function mapFieldToConfig(field, lang, lookups, context) {
|
|
289
292
|
const { property: prop, viewType } = resolveFieldMeta(field);
|
|
290
293
|
const label = prop?.name?.display ??
|
|
291
294
|
field.propertyKey;
|
|
@@ -297,6 +300,7 @@ function mapFieldToConfig(field, lang, lookups) {
|
|
|
297
300
|
order: field.order,
|
|
298
301
|
placeholder: label,
|
|
299
302
|
required: field.isRequired ?? false,
|
|
303
|
+
disabled: isCalculatedField(field),
|
|
300
304
|
readonly: field.isWrite === false,
|
|
301
305
|
validators: field.isRequired
|
|
302
306
|
? [ValidatorConfig.required(`${label} is required`)]
|
|
@@ -395,6 +399,18 @@ function mapFieldToConfig(field, lang, lookups) {
|
|
|
395
399
|
configuration: connectionConfig,
|
|
396
400
|
});
|
|
397
401
|
}
|
|
402
|
+
case 'Predecessor':
|
|
403
|
+
return new SchedulePredecessorFieldConfig({
|
|
404
|
+
...base,
|
|
405
|
+
configuration: prop?.configuration ?? null,
|
|
406
|
+
runtimeContext: context
|
|
407
|
+
? {
|
|
408
|
+
levelId: context.levelId,
|
|
409
|
+
levelDataId: context.levelDataId,
|
|
410
|
+
moduleDataId: context.moduleDataId,
|
|
411
|
+
}
|
|
412
|
+
: null,
|
|
413
|
+
});
|
|
398
414
|
// ── Fallback ──────────────────────────────────────────────
|
|
399
415
|
default:
|
|
400
416
|
return new TextFieldConfig(base);
|
|
@@ -593,7 +609,10 @@ function stripTemplatePrefix(value) {
|
|
|
593
609
|
* Self-contained, signal-based (no NGXS). Each instance manages its own state
|
|
594
610
|
* via a component-scoped `ClientFormStateService`.
|
|
595
611
|
*
|
|
596
|
-
*
|
|
612
|
+
* Submit and reset actions stay external. Step navigation buttons are optional
|
|
613
|
+
* and can be hidden with `showInternalStepActions`.
|
|
614
|
+
*
|
|
615
|
+
* Parent can control actions via `viewChild()`:
|
|
597
616
|
*
|
|
598
617
|
* ```html
|
|
599
618
|
* <mt-client-form #processForm [moduleKey]="'Risk'" [operationKey]="'CloseRisk'" />
|
|
@@ -613,7 +632,9 @@ class ClientForm {
|
|
|
613
632
|
state = inject(ClientFormStateService);
|
|
614
633
|
loadSub;
|
|
615
634
|
submitSub;
|
|
635
|
+
hasStartedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasStartedLoad" }] : []));
|
|
616
636
|
runtimeMessages = signal([], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : []));
|
|
637
|
+
translocoService = inject(TranslocoService);
|
|
617
638
|
// ============================================================================
|
|
618
639
|
// Public State Signals (for parent access via viewChild)
|
|
619
640
|
// ============================================================================
|
|
@@ -643,6 +664,7 @@ class ClientForm {
|
|
|
643
664
|
draftProcessId = input(...(ngDevMode ? [undefined, { debugName: "draftProcessId" }] : []));
|
|
644
665
|
preview = input(false, ...(ngDevMode ? [{ debugName: "preview" }] : []));
|
|
645
666
|
returnUrl = input(...(ngDevMode ? [undefined, { debugName: "returnUrl" }] : []));
|
|
667
|
+
submitRequestMapper = input(null, ...(ngDevMode ? [{ debugName: "submitRequestMapper" }] : []));
|
|
646
668
|
// ============================================================================
|
|
647
669
|
// Inputs — UI Configuration
|
|
648
670
|
// ============================================================================
|
|
@@ -650,10 +672,12 @@ class ClientForm {
|
|
|
650
672
|
autoLoad = input(true, ...(ngDevMode ? [{ debugName: "autoLoad" }] : []));
|
|
651
673
|
formMode = input('create', ...(ngDevMode ? [{ debugName: "formMode" }] : []));
|
|
652
674
|
renderMode = input(...(ngDevMode ? [undefined, { debugName: "renderMode" }] : []));
|
|
675
|
+
// Hide the built-in previous/next buttons when step actions are rendered by the parent.
|
|
653
676
|
showInternalStepActions = input(true, ...(ngDevMode ? [{ debugName: "showInternalStepActions" }] : []));
|
|
654
|
-
lang =
|
|
677
|
+
lang = signal(this.translocoService.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
|
|
655
678
|
lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : []));
|
|
656
679
|
ignoredFieldKeys = input([], ...(ngDevMode ? [{ debugName: "ignoredFieldKeys" }] : []));
|
|
680
|
+
rtl = computed(() => this.lang() === 'ar', ...(ngDevMode ? [{ debugName: "rtl" }] : []));
|
|
657
681
|
// ============================================================================
|
|
658
682
|
// Outputs
|
|
659
683
|
// ============================================================================
|
|
@@ -662,6 +686,7 @@ class ClientForm {
|
|
|
662
686
|
errored = output();
|
|
663
687
|
modeDetected = output();
|
|
664
688
|
formSourceDetected = output();
|
|
689
|
+
footerStateChanged = output();
|
|
665
690
|
// ============================================================================
|
|
666
691
|
// Internal Form Control
|
|
667
692
|
// ============================================================================
|
|
@@ -673,7 +698,7 @@ class ClientForm {
|
|
|
673
698
|
const config = this.state.formConfiguration();
|
|
674
699
|
if (!config)
|
|
675
700
|
return null;
|
|
676
|
-
return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups());
|
|
701
|
+
return mapToDynamicFormConfig(config, this.lang(), this.formMode(), this.lookups(), this.state.context());
|
|
677
702
|
}, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
|
|
678
703
|
initialValues = computed(() => {
|
|
679
704
|
return mapValuesToFormValue(this.state.formValues(), this.state.formConfiguration());
|
|
@@ -732,6 +757,23 @@ class ClientForm {
|
|
|
732
757
|
label: section.label || `Tab ${index + 1}`,
|
|
733
758
|
value: index + 1,
|
|
734
759
|
})), ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
|
|
760
|
+
stepTimeline = computed(() => {
|
|
761
|
+
const sections = this.stepSections();
|
|
762
|
+
const currentStep = this.currentStep();
|
|
763
|
+
return sections.map((section, index) => {
|
|
764
|
+
const value = index + 1;
|
|
765
|
+
const state = this.resolveStepTimelineState(value, currentStep);
|
|
766
|
+
return {
|
|
767
|
+
key: section.key || `section-${index}`,
|
|
768
|
+
label: section.label || `Step ${value}`,
|
|
769
|
+
value,
|
|
770
|
+
state,
|
|
771
|
+
selected: value === currentStep,
|
|
772
|
+
beforeLineActive: index > 0 && value <= currentStep,
|
|
773
|
+
afterLineActive: index < sections.length - 1 && value < currentStep,
|
|
774
|
+
};
|
|
775
|
+
});
|
|
776
|
+
}, ...(ngDevMode ? [{ debugName: "stepTimeline" }] : []));
|
|
735
777
|
visibleSectionKeys = computed(() => {
|
|
736
778
|
if (!this.sectionNavigationEnabled())
|
|
737
779
|
return null;
|
|
@@ -762,6 +804,43 @@ class ClientForm {
|
|
|
762
804
|
...new Set([...this.forcedHiddenFieldKeys(), ...this.ignoredFieldKeys()]),
|
|
763
805
|
];
|
|
764
806
|
}, ...(ngDevMode ? [{ debugName: "effectiveForcedHiddenFieldKeys" }] : []));
|
|
807
|
+
footerLoading = computed(() => {
|
|
808
|
+
return (this.state.loading() ||
|
|
809
|
+
(this.autoLoad() &&
|
|
810
|
+
!this.hasStartedLoad() &&
|
|
811
|
+
!this.state.isLoaded() &&
|
|
812
|
+
!this.state.error()));
|
|
813
|
+
}, ...(ngDevMode ? [{ debugName: "footerLoading" }] : []));
|
|
814
|
+
footerState = computed(() => {
|
|
815
|
+
const loading = this.footerLoading();
|
|
816
|
+
const isLoaded = this.state.isLoaded();
|
|
817
|
+
const renderMode = this.effectiveRenderMode();
|
|
818
|
+
const stepNavigationEnabled = this.stepsEnabled();
|
|
819
|
+
const sectionNavigationEnabled = this.sectionNavigationEnabled();
|
|
820
|
+
const currentStep = this.currentStep();
|
|
821
|
+
const stepCount = this.stepSections().length;
|
|
822
|
+
const canGoToPreviousStep = stepNavigationEnabled && currentStep > 1;
|
|
823
|
+
const canGoToNextStep = stepNavigationEnabled && currentStep < stepCount;
|
|
824
|
+
return {
|
|
825
|
+
loading,
|
|
826
|
+
isLoaded,
|
|
827
|
+
renderMode,
|
|
828
|
+
actionMode: loading
|
|
829
|
+
? 'loading'
|
|
830
|
+
: stepNavigationEnabled
|
|
831
|
+
? 'steps'
|
|
832
|
+
: 'submit',
|
|
833
|
+
stepNavigationEnabled,
|
|
834
|
+
sectionNavigationEnabled,
|
|
835
|
+
currentStep,
|
|
836
|
+
stepCount,
|
|
837
|
+
canGoToPreviousStep,
|
|
838
|
+
canGoToNextStep,
|
|
839
|
+
showPreviousStep: stepNavigationEnabled,
|
|
840
|
+
showNextStep: stepNavigationEnabled && canGoToNextStep,
|
|
841
|
+
showSubmit: isLoaded && !loading && (!stepNavigationEnabled || !canGoToNextStep),
|
|
842
|
+
};
|
|
843
|
+
}, ...(ngDevMode ? [{ debugName: "footerState" }] : []));
|
|
765
844
|
// ============================================================================
|
|
766
845
|
// Effects
|
|
767
846
|
// ============================================================================
|
|
@@ -797,6 +876,12 @@ class ClientForm {
|
|
|
797
876
|
this.currentStep.set(1);
|
|
798
877
|
}
|
|
799
878
|
});
|
|
879
|
+
effect(() => {
|
|
880
|
+
const footerState = this.footerState();
|
|
881
|
+
untracked(() => {
|
|
882
|
+
this.footerStateChanged.emit(footerState);
|
|
883
|
+
});
|
|
884
|
+
});
|
|
800
885
|
}
|
|
801
886
|
// ============================================================================
|
|
802
887
|
// Public API (accessed via viewChild)
|
|
@@ -809,6 +894,7 @@ class ClientForm {
|
|
|
809
894
|
if (this.state.loading())
|
|
810
895
|
return;
|
|
811
896
|
this.loadSub?.unsubscribe();
|
|
897
|
+
this.hasStartedLoad.set(true);
|
|
812
898
|
this.runtimeMessages.set([]);
|
|
813
899
|
this.state.loading.set(true);
|
|
814
900
|
this.state.error.set(null);
|
|
@@ -945,6 +1031,18 @@ class ClientForm {
|
|
|
945
1031
|
isStepNavigationEnabled() {
|
|
946
1032
|
return this.stepsEnabled();
|
|
947
1033
|
}
|
|
1034
|
+
isSectionNavigationEnabled() {
|
|
1035
|
+
return this.sectionNavigationEnabled();
|
|
1036
|
+
}
|
|
1037
|
+
isFooterLoading() {
|
|
1038
|
+
return this.footerState().loading;
|
|
1039
|
+
}
|
|
1040
|
+
getResolvedRenderMode() {
|
|
1041
|
+
return this.footerState().renderMode;
|
|
1042
|
+
}
|
|
1043
|
+
getFooterState() {
|
|
1044
|
+
return this.footerState();
|
|
1045
|
+
}
|
|
948
1046
|
// ============================================================================
|
|
949
1047
|
// Lifecycle
|
|
950
1048
|
// ============================================================================
|
|
@@ -1016,10 +1114,26 @@ class ClientForm {
|
|
|
1016
1114
|
req.requestSchemaId = requestSchemaId;
|
|
1017
1115
|
if (returnUrl)
|
|
1018
1116
|
req.returnUrl = returnUrl;
|
|
1019
|
-
|
|
1117
|
+
const submitRequestMapper = this.submitRequestMapper();
|
|
1118
|
+
if (!submitRequestMapper) {
|
|
1119
|
+
return req;
|
|
1120
|
+
}
|
|
1121
|
+
return submitRequestMapper(req, {
|
|
1122
|
+
formValue,
|
|
1123
|
+
loadResponse,
|
|
1124
|
+
});
|
|
1125
|
+
}
|
|
1126
|
+
resolveStepTimelineState(stepValue, currentStep) {
|
|
1127
|
+
if (stepValue < currentStep) {
|
|
1128
|
+
return 'completed';
|
|
1129
|
+
}
|
|
1130
|
+
if (stepValue === currentStep) {
|
|
1131
|
+
return 'current';
|
|
1132
|
+
}
|
|
1133
|
+
return 'upcoming';
|
|
1020
1134
|
}
|
|
1021
1135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1022
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 }, 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 }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template \u2014 Render only, NO action buttons -->\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\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <p-stepper\r\n [value]=\"currentStep()\"\r\n (valueChange)=\"onStepChange($event)\"\r\n >\r\n <p-step-list>\r\n @for (\r\n section of stepSections();\r\n track section.key || $index\r\n ) {\r\n <p-step [value]=\"$index + 1\">\r\n {{ section.label || \"Step \" + ($index + 1) }}\r\n </p-step>\r\n }\r\n </p-step-list>\r\n </p-stepper>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === 1\"\r\n (click)=\"goToPreviousStep()\"\r\n >\r\n Previous\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === stepSections().length\"\r\n (click)=\"goToNextStep()\"\r\n >\r\n Next\r\n </button>\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 } @else if (previewEntities().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n No form required for this operation.\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { 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", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: StepperModule }, { kind: "component", type: i2.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2.StepList, selector: "p-step-list" }, { kind: "component", type: i2.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
|
|
1136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 }, 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 }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, ignoredFieldKeys: { classPropertyName: "ignoredFieldKeys", publicName: "ignoredFieldKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", submitted: "submitted", errored: "errored", modeDetected: "modeDetected", formSourceDetected: "formSourceDetected", footerStateChanged: "footerStateChanged" }, providers: [ClientFormStateService], ngImport: i0, template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\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\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === 1\"\r\n (click)=\"goToPreviousStep()\"\r\n >\r\n Previous\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === stepSections().length\"\r\n (click)=\"goToNextStep()\"\r\n >\r\n Next\r\n </button>\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 } @else if (previewEntities().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n No form required for this operation.\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { 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", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1023
1137
|
}
|
|
1024
1138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
|
|
1025
1139
|
type: Component,
|
|
@@ -1030,9 +1144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1030
1144
|
DynamicForm,
|
|
1031
1145
|
Tabs,
|
|
1032
1146
|
Skeleton,
|
|
1033
|
-
StepperModule,
|
|
1034
|
-
|
|
1035
|
-
}], ctorParameters: () => [], propDecorators: { 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 }] }], 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 }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }] } });
|
|
1147
|
+
], providers: [ClientFormStateService], template: "<!-- Client Form Template - render only; step navigation buttons are optional -->\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\">\r\n @if (previewEntities().length > 0) {\r\n <mt-entities-preview [entities]=\"previewEntities()\" />\r\n }\r\n\r\n <!-- Dynamic Form -->\r\n @if (state.requiresForm() && editableFormConfig(); as config) {\r\n @if (hasEditableFormSections()) {\r\n <div class=\"flex flex-col gap-4\">\r\n @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\r\n <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\r\n @if (runtimeErrors().length > 0) {\r\n <div class=\"mb-3\">\r\n <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\r\n Validation Errors\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\r\n @for (\r\n msg of runtimeErrors();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n @if (runtimeWarnings().length > 0) {\r\n <div>\r\n <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\r\n Validation Warnings\r\n </h4>\r\n <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\r\n @for (\r\n msg of runtimeWarnings();\r\n track msg.ruleId || msg.fieldKey || msg.message\r\n ) {\r\n <li>{{ msg.message }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (stepsEnabled()) {\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"overflow-x-auto pb-2\">\r\n <div class=\"flex min-w-[36rem] items-start\">\r\n @for (\r\n step of stepTimeline();\r\n track step.key;\r\n let first = $first;\r\n let last = $last\r\n ) {\r\n <div\r\n class=\"relative flex min-w-[8rem] flex-1 justify-center\"\r\n >\r\n @if (!rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (!rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !last) {\r\n <span\r\n class=\"absolute top-5 left-0 right-1/2 h-0.5\"\r\n [ngClass]=\"\r\n step.afterLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n @if (rtl() && !first) {\r\n <span\r\n class=\"absolute top-5 left-1/2 right-0 h-0.5\"\r\n [ngClass]=\"\r\n step.beforeLineActive\r\n ? 'bg-primary'\r\n : 'bg-surface-300'\r\n \"\r\n ></span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"relative z-10 flex w-full flex-col items-center gap-3 px-2 text-center focus-visible:outline-none\"\r\n [attr.aria-pressed]=\"step.selected\"\r\n [attr.aria-current]=\"\r\n step.state === 'current' ? 'step' : null\r\n \"\r\n [attr.title]=\"step.label\"\r\n (click)=\"onStepChange(step.value)\"\r\n >\r\n <span\r\n class=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200\"\r\n [ngClass]=\"{\r\n 'border-primary bg-primary text-surface-0 ring-4 ring-primary/10':\r\n step.state === 'completed' ||\r\n step.state === 'current',\r\n\r\n 'border-surface-300 bg-white text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n >\r\n {{ step.value }}\r\n </span>\r\n <span\r\n class=\"max-w-[8rem] text-center text-sm leading-5 transition-colors duration-200\"\r\n [ngClass]=\"{\r\n 'font-semibold text-primary':\r\n step.selected || step.state === 'current',\r\n 'font-medium text-surface-700':\r\n step.state === 'completed' && !step.selected,\r\n 'font-medium text-surface-500':\r\n step.state === 'upcoming',\r\n }\"\r\n dir=\"auto\"\r\n >\r\n {{ step.label }}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showInternalStepActions()) {\r\n <div class=\"flex justify-between gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === 1\"\r\n (click)=\"goToPreviousStep()\"\r\n >\r\n Previous\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"px-3 py-2 rounded border border-surface-300 text-sm\"\r\n [disabled]=\"currentStep() === stepSections().length\"\r\n (click)=\"goToNextStep()\"\r\n >\r\n Next\r\n </button>\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 } @else if (previewEntities().length === 0) {\r\n <div\r\n class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\r\n >\r\n <p class=\"text-sm text-muted-color\">\r\n No form required for this operation.\r\n </p>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
|
|
1148
|
+
}], ctorParameters: () => [], propDecorators: { 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 }] }], 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 }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], ignoredFieldKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredFieldKeys", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], errored: [{ type: i0.Output, args: ["errored"] }], modeDetected: [{ type: i0.Output, args: ["modeDetected"] }], formSourceDetected: [{ type: i0.Output, args: ["formSourceDetected"] }], footerStateChanged: [{ type: i0.Output, args: ["footerStateChanged"] }] } });
|
|
1036
1149
|
|
|
1037
1150
|
// ============================================================================
|
|
1038
1151
|
// API Response Wrapper
|