@masterteam/forms 0.0.37 → 0.0.39

package/assets/forms.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-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-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-700:oklch(50.5% .213 27.518);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-800:oklch(47.3% .137 46.201);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-800:oklch(43.2% .095 166.913);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-800:oklch(44.3% .11 240.79);--color-gray-200:oklch(92.8% .006 264.531);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--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-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--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-4{margin-bottom:calc(var(--spacing) * 4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-10{height:calc(var(--spacing) * 10)}.w-1\/3{width:33.3333%}.w-5{width:calc(var(--spacing) * 5)}.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,)}.animate-pulse{animation:var(--animate-pulse)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.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-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.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)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.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-red-200{border-color:var(--color-red-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)}}.bg-amber-100{background-color:var(--color-amber-100)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-sky-100{background-color:var(--color-sky-100)}.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-200{background-color:var(--p-surface-200)}@supports (color:color-mix(in lab, red, red)){.bg-surface-200{background-color:color-mix(in srgb, var(--p-surface-200) calc(100% * 1), transparent)}}.p-3{padding:calc(var(--spacing) * 3)}.p-6{padding:calc(var(--spacing) * 6)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.py-0\.5{padding-block: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))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.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-800{color:var(--color-amber-800)}.text-color{color:var(--p-text-color)}.text-emerald-800{color:var(--color-emerald-800)}.text-muted-color{color:var(--p-text-muted-color)}.text-red-700{color:var(--color-red-700)}.text-sky-800{color:var(--color-sky-800)}.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-surface-800{color:var(--p-surface-800)}@supports (color:color-mix(in lab, red, red)){.text-surface-800{color:color-mix(in srgb, var(--p-surface-800) calc(100% * 1), 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,)}@media (min-width:40rem){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:64rem){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}}@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-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}@keyframes pulse{50%{opacity:.5}}
+@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-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-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)}}.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)}.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}

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

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { inject, Injectable, signal, computed, input, output, effect, untracked, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { Skeleton } from 'primeng/skeleton';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { HttpClient, HttpContext } from '@angular/common/http';
-import { ValidatorConfig, TextFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig } from '@masterteam/components';
+import { ValidatorConfig, TextFieldConfig, SchemaConnectionFieldConfig, SelectFieldConfig, MultiSelectFieldConfig, UserSearchFieldConfig, REQUEST_CONTEXT, UploadFileFieldConfig, ToggleFieldConfig, DateFieldConfig, SliderFieldConfig, NumberFieldConfig, EditorFieldConfig } from '@masterteam/components';
 
 /**
  * Stateless HTTP service for process-forms runtime APIs.
@@ -146,6 +146,7 @@ const WIDTH_TO_COLSPAN = {
  * @param lookups  Available lookup definitions for resolving Lookup/LookupMultiSelect options
  */
 function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = []) {
+    const validationRules = mapValidationRules(config, lang);
     return {
         sections: config.sections
             .slice()
@@ -172,6 +173,7 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
             };
         })
             .filter((section) => section.fields.length > 0),
+        validationRules,
     };
 }
 /**
@@ -241,6 +243,7 @@ function mapFieldToConfig(field, lang, lookups) {
         validators: field.isRequired
             ? [ValidatorConfig.required(`${label} is required`)]
             : [],
+        formulaCondition: buildFormulaCondition(field),
     };
     switch (viewType) {
         // ── Text-like ──────────────────────────────────────────────
@@ -317,18 +320,51 @@ function mapFieldToConfig(field, lang, lookups) {
                 optionValue: 'value',
             });
         }
+        // ── Connection (level-to-level) ─────────────────────────
+        case 'Connection': {
+            const connectionConfig = prop?.configuration ?? {};
+            return new SchemaConnectionFieldConfig({
+                ...base,
+                configuration: connectionConfig,
+            });
+        }
         // ── Fallback ──────────────────────────────────────────────
         default:
             return new TextFieldConfig(base);
     }
 }
+function buildFormulaCondition(field) {
+    if (!field.showConditionalDisplayFormula)
+        return undefined;
+    const formulaTokens = (field.conditionalDisplayFormula ?? '').trim();
+    if (!formulaTokens)
+        return undefined;
+    return {
+        formulaTokens,
+        formulaText: field.conditionalDisplayFormula ?? '',
+        mode: 'auto',
+    };
+}
+function mapValidationRules(config, lang) {
+    return (config.validations ?? []).map((rule) => ({
+        id: rule.id,
+        formulaTokens: rule.formulaTokens,
+        formulaText: rule.formulaText,
+        message: rule.message?.[lang] ??
+            rule.message?.en ??
+            rule.message?.ar ??
+            'Validation rule failed',
+        severity: rule.severity,
+        enabled: rule.enabled,
+    }));
+}
 function resolvePropertyName(property, lang) {
     if (!property?.name)
         return '';
     if (typeof property.name === 'string')
         return property.name;
     // Prefer display name, then lang-specific, then English fallback
-    return property.name['display'] ?? property.name[lang] ?? property.name['en'] ?? '';
+    return (property.name['display'] ?? property.name[lang] ?? property.name['en'] ?? '');
 }
 /**
  * Resolve lookup items for Lookup / LookupMultiSelect viewTypes.
@@ -399,6 +435,7 @@ class ClientForm {
     state = inject(ClientFormStateService);
     loadSub;
     submitSub;
+    runtimeMessages = signal([], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : []));
     // ============================================================================
     // Public State Signals (for parent access via viewChild)
     // ============================================================================
@@ -409,6 +446,8 @@ class ClientForm {
     isExecuted = computed(() => this.state.isExecuted(), ...(ngDevMode ? [{ debugName: "isExecuted" }] : []));
     isLoaded = computed(() => this.state.isLoaded(), ...(ngDevMode ? [{ debugName: "isLoaded" }] : []));
     loading = computed(() => this.state.loading(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    runtimeErrors = computed(() => this.runtimeMessages().filter((msg) => msg.severity === 'error'), ...(ngDevMode ? [{ debugName: "runtimeErrors" }] : []));
+    runtimeWarnings = computed(() => this.runtimeMessages().filter((msg) => msg.severity === 'warning'), ...(ngDevMode ? [{ debugName: "runtimeWarnings" }] : []));
     // ============================================================================
     // Inputs — Required Context
     // ============================================================================
@@ -494,6 +533,7 @@ class ClientForm {
         if (this.state.loading())
             return;
         this.loadSub?.unsubscribe();
+        this.runtimeMessages.set([]);
         this.state.loading.set(true);
         this.state.error.set(null);
         this.state.submitResponse.set(null);
@@ -583,8 +623,12 @@ class ClientForm {
         this.loadSub?.unsubscribe();
         this.submitSub?.unsubscribe();
         this.formControl.reset({});
+        this.runtimeMessages.set([]);
         this.state.reset();
     }
+    onRuntimeMessagesChange(messages) {
+        this.runtimeMessages.set(messages ?? []);
+    }
     // ============================================================================
     // Lifecycle
     // ============================================================================
@@ -661,11 +705,11 @@ class ClientForm {
         return req;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", 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-4 animate-pulse\">\r\n    <div class=\"h-6 bg-surface-200 rounded w-1/3\"></div>\r\n    <div class=\"grid grid-cols-12 gap-4\">\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-12 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Error State -->\r\n@if (state.error(); as error) {\r\n  <div\r\n    class=\"flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 border border-red-200\"\r\n    role=\"alert\"\r\n  >\r\n    <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n    <span class=\"text-sm font-medium\">{{ error }}</span>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <!-- Step Info Bar -->\r\n  @if (state.stepName() || state.mode()) {\r\n    <div\r\n      class=\"flex items-center gap-3 mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\"\r\n    >\r\n      @if (state.stepName()) {\r\n        <span class=\"text-sm font-semibold text-surface-700\">\r\n          {{ state.stepName() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.mode()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\r\n          [class]=\"\r\n            state.isApproval()\r\n              ? 'bg-amber-100 text-amber-800'\r\n              : 'bg-emerald-100 text-emerald-800'\r\n          \"\r\n        >\r\n          {{ state.mode() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.isFallbackForm()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-800\"\r\n        >\r\n          {{ state.formSource() }}\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Virtual Fields (read-only process context) -->\r\n  @if (hasVirtualFields()) {\r\n    <div class=\"mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\">\r\n      <div\r\n        class=\"grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3 lg:grid-cols-4\"\r\n      >\r\n        @for (field of virtualFields(); track field.propertyKey) {\r\n          <div class=\"flex flex-col gap-0.5\">\r\n            <span class=\"text-xs text-muted-color font-medium\">\r\n              {{ field.propertyKey | titlecase }}\r\n            </span>\r\n            <span class=\"text-sm text-surface-800 font-medium\">\r\n              {{ field.value ?? \"\u2014\" }}\r\n            </span>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Dynamic Form -->\r\n  @if (state.requiresForm() && formConfig(); as config) {\r\n    <mt-dynamic-form [formConfig]=\"config\" [formControl]=\"formControl\" />\r\n  } @else if (!state.requiresForm()) {\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}\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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+    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 }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", 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()) {\n  <!-- Dynamic Form -->\n  @if (state.requiresForm() && formConfig(); as config) {\n    <div class=\"flex flex-col gap-4\">\n      @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n        <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\n          @if (runtimeErrors().length > 0) {\n            <div class=\"mb-3\">\n              <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\n                Validation Errors\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\n                @for (msg of runtimeErrors(); track msg.ruleId || msg.fieldKey || msg.message) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (runtimeWarnings().length > 0) {\n            <div>\n              <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\n                Validation Warnings\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\n                @for (msg of runtimeWarnings(); track msg.ruleId || msg.fieldKey || msg.message) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n      }\n\n      <mt-dynamic-form\n        [formConfig]=\"config\"\n        [formControl]=\"formControl\"\n        (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\n      />\n    </div>\n  } @else if (!state.requiresForm()) {\n    <div\n      class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\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}\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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientForm, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicForm], providers: [ClientFormStateService], 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-4 animate-pulse\">\r\n    <div class=\"h-6 bg-surface-200 rounded w-1/3\"></div>\r\n    <div class=\"grid grid-cols-12 gap-4\">\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-12 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n      <div class=\"col-span-6 h-10 bg-surface-200 rounded\"></div>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<!-- Error State -->\r\n@if (state.error(); as error) {\r\n  <div\r\n    class=\"flex items-center gap-2 p-3 rounded-lg bg-red-50 text-red-700 border border-red-200\"\r\n    role=\"alert\"\r\n  >\r\n    <svg class=\"w-5 h-5 shrink-0\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n    <span class=\"text-sm font-medium\">{{ error }}</span>\r\n  </div>\r\n}\r\n\r\n<!-- Loaded State -->\r\n@if (state.isLoaded() && !state.loading()) {\r\n  <!-- Step Info Bar -->\r\n  @if (state.stepName() || state.mode()) {\r\n    <div\r\n      class=\"flex items-center gap-3 mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\"\r\n    >\r\n      @if (state.stepName()) {\r\n        <span class=\"text-sm font-semibold text-surface-700\">\r\n          {{ state.stepName() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.mode()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\r\n          [class]=\"\r\n            state.isApproval()\r\n              ? 'bg-amber-100 text-amber-800'\r\n              : 'bg-emerald-100 text-emerald-800'\r\n          \"\r\n        >\r\n          {{ state.mode() }}\r\n        </span>\r\n      }\r\n\r\n      @if (state.isFallbackForm()) {\r\n        <span\r\n          class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-800\"\r\n        >\r\n          {{ state.formSource() }}\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Virtual Fields (read-only process context) -->\r\n  @if (hasVirtualFields()) {\r\n    <div class=\"mb-4 p-3 rounded-lg bg-surface-50 border border-surface-200\">\r\n      <div\r\n        class=\"grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3 lg:grid-cols-4\"\r\n      >\r\n        @for (field of virtualFields(); track field.propertyKey) {\r\n          <div class=\"flex flex-col gap-0.5\">\r\n            <span class=\"text-xs text-muted-color font-medium\">\r\n              {{ field.propertyKey | titlecase }}\r\n            </span>\r\n            <span class=\"text-sm text-surface-800 font-medium\">\r\n              {{ field.value ?? \"\u2014\" }}\r\n            </span>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Dynamic Form -->\r\n  @if (state.requiresForm() && formConfig(); as config) {\r\n    <mt-dynamic-form [formConfig]=\"config\" [formControl]=\"formControl\" />\r\n  } @else if (!state.requiresForm()) {\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}\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'mt-client-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicForm, Skeleton], providers: [ClientFormStateService], 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()) {\n  <!-- Dynamic Form -->\n  @if (state.requiresForm() && formConfig(); as config) {\n    <div class=\"flex flex-col gap-4\">\n      @if (runtimeErrors().length > 0 || runtimeWarnings().length > 0) {\n        <div class=\"rounded-lg border border-surface-200 p-4 bg-surface-50\">\n          @if (runtimeErrors().length > 0) {\n            <div class=\"mb-3\">\n              <h4 class=\"text-sm font-semibold text-red-600 mb-2\">\n                Validation Errors\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-red-600 space-y-1\">\n                @for (msg of runtimeErrors(); track msg.ruleId || msg.fieldKey || msg.message) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n\n          @if (runtimeWarnings().length > 0) {\n            <div>\n              <h4 class=\"text-sm font-semibold text-amber-600 mb-2\">\n                Validation Warnings\n              </h4>\n              <ul class=\"list-disc ps-5 text-sm text-amber-700 space-y-1\">\n                @for (msg of runtimeWarnings(); track msg.ruleId || msg.fieldKey || msg.message) {\n                  <li>{{ msg.message }}</li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n      }\n\n      <mt-dynamic-form\n        [formConfig]=\"config\"\n        [formControl]=\"formControl\"\n        (runtimeMessagesChange)=\"onRuntimeMessagesChange($event)\"\n      />\n    </div>\n  } @else if (!state.requiresForm()) {\n    <div\n      class=\"flex items-center justify-center p-6 rounded-lg bg-surface-50 border border-surface-200 border-dashed\"\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}\r\n", styles: [":host{display:block}\n"] }]
         }], 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 }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", 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"] }] } });
 
 // ============================================================================