@masterteam/components 0.0.30 → 0.0.31

package/assets/common.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.14 | 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--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;--tw-ease: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-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-50:oklch(98.2% .018 155.826);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--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}:-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{label.required:after{content:"*";color:var(--p-red-500);padding-inline-start:2px}.dark label.required:after{color:var(--p-red-600)}}@layer utilities{.\@container{container-type:inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.top-1\/2{top:50%}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-3{right:calc(var(--spacing)*3)}.z-10{z-index:10}.order-1{order:1}.col-span-6{grid-column:span 6/span 6}.m-0{margin:calc(var(--spacing)*0)}.ms-2{margin-inline-start:calc(var(--spacing)*2)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.size-full{width:100%;height:100%}.h-full{height:100%}.w-12{width:calc(var(--spacing)*12)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.min-w-full{min-width:100%}.flex-1{flex:1}.grow{flex-grow:1}.table-fixed{table-layout:fixed}.origin-top-right{transform-origin:100% 0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.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-5{gap:calc(var(--spacing)*5)}: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)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-b-md{border-bottom-right-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.border,.border-1{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\(--p-content-border-color\){border-color:var(--p-content-border-color)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-500{border-color:var(--color-gray-500)}.border-primary-400{border-color:var(--p-primary-400)}@supports (color:color-mix(in lab, red, red)){.border-primary-400{border-color:color-mix(in srgb,var(--p-primary-400)calc(100%*1),transparent)}}.border-surface{border-color:var(--p-content-border-color)}.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-white{background-color:var(--color-white)!important}.bg-content{background-color:var(--p-content-background)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-primary-50{background-color:var(--p-primary-50)}@supports (color:color-mix(in lab, red, red)){.bg-primary-50{background-color:color-mix(in srgb,var(--p-primary-50)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-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-3{padding-block:calc(var(--spacing)*3)}.py-5{padding-block:calc(var(--spacing)*5)}.text-center{text-align:center}.text-end{text-align:end}.text-right{text-align:right}.text-start{text-align:start}.align-middle{vertical-align:middle}.align-super\!{vertical-align:super!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[\.95rem\]{font-size:.95rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-blue-600{color:var(--color-blue-600)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-muted-color{color:var(--p-text-muted-color)}.text-primary-400{color:var(--p-primary-400)}@supports (color:color-mix(in lab, red, red)){.text-primary-400{color:color-mix(in srgb,var(--p-primary-400)calc(100%*1),transparent)}}.text-primary-700{color:var(--p-primary-700)}@supports (color:color-mix(in lab, red, red)){.text-primary-700{color:color-mix(in srgb,var(--p-primary-700)calc(100%*1),transparent)}}.text-purple-600{color:var(--color-purple-600)}.text-red-600{color:var(--color-red-600)}.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-yellow-600{color:var(--color-yellow-600)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + 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-black{--tw-ring-color:var(--color-black)}.ring-primary-200{--tw-ring-color:var(--p-primary-200)}@supports (color:color-mix(in lab, red, red)){.ring-primary-200{--tw-ring-color:color-mix(in srgb,var(--p-primary-200)calc(100%*1),transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-green-50:hover{background-color:var(--color-green-50)}.hover\:bg-purple-50:hover{background-color:var(--color-purple-50)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-yellow-50:hover{background-color:var(--color-yellow-50)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-green-700:hover{color:var(--color-green-700)}.hover\:text-purple-700:hover{color:var(--color-purple-700)}.hover\:text-red-700:hover{color:var(--color-red-700)}.hover\:text-yellow-700:hover{color:var(--color-yellow-700)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@container (min-width:28rem){.\@md\:col-span-3{grid-column:span 3/span 3}}@container (min-width:42rem){.\@2xl\:col-span-2{grid-column:span 2/span 2}}.dark\:border-surface-500:where(.dark,.dark *){border-color:var(--p-surface-500)}@supports (color:color-mix(in lab, red, red)){.dark\:border-surface-500:where(.dark,.dark *){border-color:color-mix(in srgb,var(--p-surface-500)calc(100%*1),transparent)}}.dark\:bg-primary-800:where(.dark,.dark *){background-color:var(--p-primary-800)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-primary-800:where(.dark,.dark *){background-color:color-mix(in srgb,var(--p-primary-800)calc(100%*1),transparent)}}.dark\:bg-primary-900\/20:where(.dark,.dark *){background-color:var(--p-primary-900)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-primary-900\/20:where(.dark,.dark *){background-color:color-mix(in oklab,color-mix(in srgb,var(--p-primary-900)calc(100%*1),transparent)20%,transparent)}}.dark\:bg-surface-950:where(.dark,.dark *){background-color:var(--p-surface-950)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-surface-950:where(.dark,.dark *){background-color:color-mix(in srgb,var(--p-surface-950)calc(100%*1),transparent)}}.dark\:text-gray-50:where(.dark,.dark *){color:var(--color-gray-50)}.dark\:text-gray-100:where(.dark,.dark *){color:var(--color-gray-100)}.dark\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\:text-primary-300:where(.dark,.dark *){color:var(--p-primary-300)}@supports (color:color-mix(in lab, red, red)){.dark\:text-primary-300:where(.dark,.dark *){color:color-mix(in srgb,var(--p-primary-300)calc(100%*1),transparent)}}@media (hover:hover){.dark\:hover\:bg-gray-800:where(.dark,.dark *):hover{background-color:var(--color-gray-800)}.dark\:hover\:bg-surface-950:where(.dark,.dark *):hover{background-color:var(--p-surface-950)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-surface-950:where(.dark,.dark *):hover{background-color:color-mix(in srgb,var(--p-surface-950)calc(100%*1),transparent)}}.dark\:hover\:text-gray-100:where(.dark,.dark *):hover{color:var(--color-gray-100)}}}:root{--app-background:var(--p-surface-100)}:root[class=dark]{--app-background:var(--p-surface-950)}body{background-color:var(--app-background)}.mt-dialog .p-dialog-header{background-color:var(--p-surface-100);border-radius:.75rem .75rem 0 0;padding:1rem 1.25rem}.mt-dialog .p-dialog-header .p-dialog-header-actions .p-dialog-close-button{background-color:#fff;border-radius:.3rem;justify-content:center;width:2rem;height:2rem}.mt-dialog .p-dialog-content{border-radius:.8rem;height:100%;overflow-y:hidden}.mt-dialog .p-dialog-content .mt-dialog-content{height:100%;padding-bottom:5rem;overflow:auto}.mt-dialog .p-dialog-content .mt-dialog-footer{background-color:var(--p-surface-100);justify-content:end;gap:10px;padding:.8rem 1.25rem;display:flex;position:sticky;bottom:0}.custom-drawer .p-drawer-header,.custom-drawer .p-drawer-content,.custom-drawer .p-drawer-footer{padding:0}@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-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value: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-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-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-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@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}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
+@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--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;--tw-ease: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-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-50:oklch(98.2% .018 155.826);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--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}:-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{label.required:after{content:"*";color:var(--p-red-500);padding-inline-start:2px}.dark label.required:after{color:var(--p-red-600)}}@layer utilities{.\@container{container-type:inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.top-1\/2{top:50%}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-3{right:calc(var(--spacing)*3)}.z-10{z-index:10}.order-1{order:1}.col-span-6{grid-column:span 6/span 6}.m-0{margin:calc(var(--spacing)*0)}.ms-2{margin-inline-start:calc(var(--spacing)*2)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.size-full{width:100%;height:100%}.h-full{height:100%}.w-12{width:calc(var(--spacing)*12)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.min-w-full{min-width:100%}.flex-1{flex:1}.grow{flex-grow:1}.table-fixed{table-layout:fixed}.origin-top-right{transform-origin:100% 0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.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-5{gap:calc(var(--spacing)*5)}: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)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-b-md{border-bottom-right-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.border,.border-1{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\(--p-content-border-color\){border-color:var(--p-content-border-color)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-500{border-color:var(--color-gray-500)}.border-primary-400{border-color:var(--p-primary-400)}@supports (color:color-mix(in lab, red, red)){.border-primary-400{border-color:color-mix(in srgb,var(--p-primary-400)calc(100%*1),transparent)}}.border-surface{border-color:var(--p-content-border-color)}.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-white{background-color:var(--color-white)!important}.bg-content{background-color:var(--p-content-background)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-primary-50{background-color:var(--p-primary-50)}@supports (color:color-mix(in lab, red, red)){.bg-primary-50{background-color:color-mix(in srgb,var(--p-primary-50)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-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-3{padding-block:calc(var(--spacing)*3)}.py-5{padding-block:calc(var(--spacing)*5)}.text-center{text-align:center}.text-end{text-align:end}.text-right{text-align:right}.text-start{text-align:start}.align-middle{vertical-align:middle}.align-super\!{vertical-align:super!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[\.95rem\]{font-size:.95rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-blue-600{color:var(--color-blue-600)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-muted-color{color:var(--p-text-muted-color)}.text-primary-400{color:var(--p-primary-400)}@supports (color:color-mix(in lab, red, red)){.text-primary-400{color:color-mix(in srgb,var(--p-primary-400)calc(100%*1),transparent)}}.text-primary-700{color:var(--p-primary-700)}@supports (color:color-mix(in lab, red, red)){.text-primary-700{color:color-mix(in srgb,var(--p-primary-700)calc(100%*1),transparent)}}.text-purple-600{color:var(--color-purple-600)}.text-red-600{color:var(--color-red-600)}.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-yellow-600{color:var(--color-yellow-600)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + 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-black{--tw-ring-color:var(--color-black)}.ring-primary-200{--tw-ring-color:var(--p-primary-200)}@supports (color:color-mix(in lab, red, red)){.ring-primary-200{--tw-ring-color:color-mix(in srgb,var(--p-primary-200)calc(100%*1),transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-green-50:hover{background-color:var(--color-green-50)}.hover\:bg-purple-50:hover{background-color:var(--color-purple-50)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-yellow-50:hover{background-color:var(--color-yellow-50)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-green-700:hover{color:var(--color-green-700)}.hover\:text-purple-700:hover{color:var(--color-purple-700)}.hover\:text-red-700:hover{color:var(--color-red-700)}.hover\:text-yellow-700:hover{color:var(--color-yellow-700)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@container (min-width:28rem){.\@md\:col-span-3{grid-column:span 3/span 3}}@container (min-width:42rem){.\@2xl\:col-span-2{grid-column:span 2/span 2}}.dark\:border-surface-500:where(.dark,.dark *){border-color:var(--p-surface-500)}@supports (color:color-mix(in lab, red, red)){.dark\:border-surface-500:where(.dark,.dark *){border-color:color-mix(in srgb,var(--p-surface-500)calc(100%*1),transparent)}}.dark\:bg-primary-800:where(.dark,.dark *){background-color:var(--p-primary-800)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-primary-800:where(.dark,.dark *){background-color:color-mix(in srgb,var(--p-primary-800)calc(100%*1),transparent)}}.dark\:bg-primary-900\/20:where(.dark,.dark *){background-color:var(--p-primary-900)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-primary-900\/20:where(.dark,.dark *){background-color:color-mix(in oklab,color-mix(in srgb,var(--p-primary-900)calc(100%*1),transparent)20%,transparent)}}.dark\:bg-surface-950:where(.dark,.dark *){background-color:var(--p-surface-950)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-surface-950:where(.dark,.dark *){background-color:color-mix(in srgb,var(--p-surface-950)calc(100%*1),transparent)}}.dark\:text-gray-50:where(.dark,.dark *){color:var(--color-gray-50)}.dark\:text-gray-100:where(.dark,.dark *){color:var(--color-gray-100)}.dark\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\:text-primary-300:where(.dark,.dark *){color:var(--p-primary-300)}@supports (color:color-mix(in lab, red, red)){.dark\:text-primary-300:where(.dark,.dark *){color:color-mix(in srgb,var(--p-primary-300)calc(100%*1),transparent)}}@media (hover:hover){.dark\:hover\:bg-gray-800:where(.dark,.dark *):hover{background-color:var(--color-gray-800)}.dark\:hover\:bg-surface-950:where(.dark,.dark *):hover{background-color:var(--p-surface-950)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-surface-950:where(.dark,.dark *):hover{background-color:color-mix(in srgb,var(--p-surface-950)calc(100%*1),transparent)}}.dark\:hover\:text-gray-100:where(.dark,.dark *):hover{color:var(--color-gray-100)}}}:root{--app-background:var(--p-surface-100)}:root[class=dark]{--app-background:var(--p-surface-950)}body{background-color:var(--app-background)}.mt-dialog .p-dialog-header{background-color:var(--p-surface-100);border-radius:.75rem .75rem 0 0;padding:1rem 1.25rem}.mt-dialog .p-dialog-header .p-dialog-header-actions .p-dialog-close-button{background-color:#fff;border-radius:.3rem;justify-content:center;width:2rem;height:2rem}.mt-dialog .p-dialog-content{border-radius:.8rem;height:100%;overflow-y:hidden}.mt-dialog .p-dialog-content .mt-modal-content{height:100%;padding-bottom:5rem;overflow:auto}.mt-dialog .p-dialog-content .mt-modal-footer{background-color:var(--p-surface-100);justify-content:end;gap:10px;padding:.8rem 1.25rem;display:flex;position:sticky;bottom:0}.mt-drawer .p-drawer-content .mt-modal-content{height:calc(100% - 60px);overflow:auto}.mt-drawer .p-drawer-content .mt-modal-footer{border-top:1px solid var(--p-surface-200);justify-content:flex-end;gap:.5rem;height:15rem;padding:.75rem;display:flex}.mt-custom-drawer .p-drawer-header,.mt-custom-drawer .p-drawer-content,.mt-custom-drawer .p-drawer-footer,.mt-drawer .p-drawer-header,.mt-drawer .p-drawer-content,.mt-drawer .p-drawer-footer{padding:0}.mt-drawer .p-drawer-content,body:has(:is(.p-dialog-mask.p-overlay-mask,.p-drawer-mask.p-overlay-mask)){overflow:hidden}@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-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value: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-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-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-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@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}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

package/dialog/index.d.ts

@@ -1,10 +1,8 @@
 import { DialogService as DialogService$1, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
-export { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+export { DynamicDialogConfig, DynamicDialogRef, DynamicDialogRef as ModalRef } from 'primeng/dynamicdialog';
 import * as i0 from '@angular/core';
 
 declare class DialogService extends DialogService$1 {
-    footerClass: string;
-    contentClass: string;
     ref: DynamicDialogRef | undefined;
     open(component: any, config?: DynamicDialogConfig): DynamicDialogRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogService, never>;

package/dynamic-drawer/index.d.ts

@@ -0,0 +1,52 @@
+import * as _angular_core from '@angular/core';
+import { Type, InjectionToken, Injector } from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+interface DynamicDrawerConfigInterface {
+    header?: string;
+    position?: string;
+    data?: any;
+    fullScreen?: boolean;
+    modal?: boolean;
+    closable?: boolean;
+    closeOnEscape?: boolean;
+    dismissible?: boolean;
+    appendTo?: any;
+    transitionOptions?: string;
+    styleClass?: string;
+    inputValues?: any;
+}
+declare class DrawerService {
+    private appRef;
+    private env;
+    private rootInjector;
+    private destroyRef;
+    private doc;
+    private hostRef?;
+    defauiltConfig: DynamicDrawerConfigInterface;
+    open<T>(component: Type<any>, config?: DynamicDrawerConfigInterface): DynamicDialogRef<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DrawerService>;
+}
+
+declare const DynamicDrawerConfig: InjectionToken<any>;
+declare class DynamicDrawerHost {
+    visible: _angular_core.ModelSignal<boolean>;
+    cmp: _angular_core.WritableSignal<any>;
+    cfg: _angular_core.WritableSignal<any>;
+    cmpInputs: _angular_core.WritableSignal<Record<string, unknown>>;
+    childInjector: Injector;
+    private ref?;
+    connect(opts: {
+        component: any;
+        config?: any;
+        parent: Injector;
+        ref: DynamicDialogRef;
+    }): void;
+    handleHide(data?: null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicDrawerHost, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicDrawerHost, "mt-dynamic-drawer-host", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "connect": { "alias": "connect"; "required": true; }; }, { "visible": "visibleChange"; }, never, never, true, never>;
+}
+
+export { DrawerService, DynamicDrawerConfig, DynamicDrawerHost };
+export type { DynamicDrawerConfigInterface };

package/fesm2022/masterteam-components-dialog.mjs

@@ -1,11 +1,9 @@
 import { DialogService as DialogService$1 } from 'primeng/dynamicdialog';
-export { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+export { DynamicDialogConfig, DynamicDialogRef, DynamicDialogRef as ModalRef } from 'primeng/dynamicdialog';
 import * as i0 from '@angular/core';
 import { Injectable } from '@angular/core';
 
 class DialogService extends DialogService$1 {
-    footerClass = 'mt-dialog-footer';
-    contentClass = 'mt-dialog-content';
     ref;
     open(component, config) {
         const defaultConfig = {
@@ -20,10 +18,11 @@ class DialogService extends DialogService$1 {
         return this.ref;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogService });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 /**

package/fesm2022/masterteam-components-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-dialog.mjs","sources":["../../../../packages/masterteam/components/dialog/dialog.ts","../../../../packages/masterteam/components/dialog/masterteam-components-dialog.ts"],"sourcesContent":["import {\n  DialogService as PrimeNGDialogService,\n  DynamicDialogConfig,\n  DynamicDialogRef,\n} from 'primeng/dynamicdialog';\nimport { Injectable } from '@angular/core';\nexport { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';\n\n@Injectable()\nexport class DialogService extends PrimeNGDialogService {\n  footerClass: string = 'mt-dialog-footer';\n  contentClass: string = 'mt-dialog-content';\n  ref: DynamicDialogRef | undefined;\n\n  override open(component: any, config?: DynamicDialogConfig) {\n    const defaultConfig = {\n      closable: true,\n      modal: true,\n    };\n    this.ref = super.open(component, {\n      ...defaultConfig,\n      ...config,\n      styleClass: 'mt-dialog ' + config?.styleClass,\n    });\n    return this.ref;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["PrimeNGDialogService"],"mappings":";;;;;AASM,MAAO,aAAc,SAAQA,eAAoB,CAAA;IACrD,WAAW,GAAW,kBAAkB;IACxC,YAAY,GAAW,mBAAmB;AAC1C,IAAA,GAAG;IAEM,IAAI,CAAC,SAAc,EAAE,MAA4B,EAAA;AACxD,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,KAAK,EAAE,IAAI;SACZ;QACD,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;AAC/B,YAAA,GAAG,aAAa;AAChB,YAAA,GAAG,MAAM;AACT,YAAA,UAAU,EAAE,YAAY,GAAG,MAAM,EAAE,UAAU;AAC9C,SAAA,CAAC;QACF,OAAO,IAAI,CAAC,GAAG;IACjB;uGAhBW,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAb,aAAa,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB;;;ACRD;;AAEG;;;;"}
+{"version":3,"file":"masterteam-components-dialog.mjs","sources":["../../../../packages/masterteam/components/dialog/dialog.ts","../../../../packages/masterteam/components/dialog/masterteam-components-dialog.ts"],"sourcesContent":["import {\n  DialogService as PrimeNGDialogService,\n  DynamicDialogConfig,\n  DynamicDialogRef,\n} from 'primeng/dynamicdialog';\nimport { Injectable } from '@angular/core';\nexport {\n  DynamicDialogConfig,\n  DynamicDialogRef as ModalRef,\n} from 'primeng/dynamicdialog';\nexport { DynamicDialogRef } from 'primeng/dynamicdialog';\n\n@Injectable({ providedIn: 'root' })\nexport class DialogService extends PrimeNGDialogService {\n  ref: DynamicDialogRef | undefined;\n\n  override open(component: any, config?: DynamicDialogConfig) {\n    const defaultConfig = {\n      closable: true,\n      modal: true,\n    };\n    this.ref = super.open(component, {\n      ...defaultConfig,\n      ...config,\n      styleClass: 'mt-dialog ' + config?.styleClass,\n    });\n    return this.ref;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["PrimeNGDialogService"],"mappings":";;;;;AAaM,MAAO,aAAc,SAAQA,eAAoB,CAAA;AACrD,IAAA,GAAG;IAEM,IAAI,CAAC,SAAc,EAAE,MAA4B,EAAA;AACxD,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,KAAK,EAAE,IAAI;SACZ;QACD,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;AAC/B,YAAA,GAAG,aAAa;AAChB,YAAA,GAAG,MAAM;AACT,YAAA,UAAU,EAAE,YAAY,GAAG,MAAM,EAAE,UAAU;AAC9C,SAAA,CAAC;QACF,OAAO,IAAI,CAAC,GAAG;IACjB;uGAdW,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAb,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cADA,MAAM,EAAA,CAAA;;2FACnB,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACZlC;;AAEG;;;;"}

package/fesm2022/masterteam-components-drawer.mjs

@@ -35,11 +35,11 @@ class Drawer {
         this.onHide.emit(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: Drawer, isStandalone: true, selector: "mt-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide" }, ngImport: i0, template: "<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"modal()\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"appendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"styleClass() + ' custom-drawer'\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      <h3 class=\"text-xl font-semibold\">{{ title() }}</h3>\n      <mt-button\n        (onClick)=\"onClose()\"\n        variant=\"outlined\"\n        styleClass=\"!bg-white\"\n        icon=\"general.x-close\"\n        severity=\"secondary\"\n      >\n      </mt-button>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: Drawer, isStandalone: true, selector: "mt-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide" }, ngImport: i0, template: "<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"modal()\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"appendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"styleClass() + ' mt-custom-drawer'\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      <h3 class=\"text-xl font-semibold\">{{ title() }}</h3>\n      <mt-button\n        (onClick)=\"onClose()\"\n        variant=\"outlined\"\n        styleClass=\"!bg-white\"\n        icon=\"general.x-close\"\n        severity=\"secondary\"\n      >\n      </mt-button>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Drawer, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-drawer', standalone: true, imports: [CommonModule, DrawerModule, Button], template: "<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"modal()\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"appendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"styleClass() + ' custom-drawer'\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      <h3 class=\"text-xl font-semibold\">{{ title() }}</h3>\n      <mt-button\n        (onClick)=\"onClose()\"\n        variant=\"outlined\"\n        styleClass=\"!bg-white\"\n        icon=\"general.x-close\"\n        severity=\"secondary\"\n      >\n      </mt-button>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n" }]
+            args: [{ selector: 'mt-drawer', standalone: true, imports: [CommonModule, DrawerModule, Button], template: "<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"modal()\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"appendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"styleClass() + ' mt-custom-drawer'\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      <h3 class=\"text-xl font-semibold\">{{ title() }}</h3>\n      <mt-button\n        (onClick)=\"onClose()\"\n        variant=\"outlined\"\n        styleClass=\"!bg-white\"\n        icon=\"general.x-close\"\n        severity=\"secondary\"\n      >\n      </mt-button>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n" }]
         }] });
 
 /**

package/fesm2022/masterteam-components-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-drawer.mjs","sources":["../../../../packages/masterteam/components/drawer/drawer.ts","../../../../packages/masterteam/components/drawer/drawer.html","../../../../packages/masterteam/components/drawer/masterteam-components-drawer.ts"],"sourcesContent":["import { Button } from '@masterteam/components/button';\nimport { Component, input, output, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DrawerModule } from 'primeng/drawer';\n\n@Component({\n  selector: 'mt-drawer',\n  standalone: true,\n  imports: [CommonModule, DrawerModule, Button],\n  templateUrl: './drawer.html',\n  styleUrls: ['./drawer.scss'],\n})\nexport class Drawer {\n  visible = model<boolean>(false);\n  visibleChange = output<boolean>();\n  onShow = output<boolean>();\n  onHide = output<boolean>();\n  position = input<'left' | 'right' | 'top' | 'bottom'>('right');\n  fullScreen = input<boolean>(false);\n  closeOnEscape = input<boolean>(false);\n  blockScroll = input<boolean>(true);\n  dismissible = input<boolean>(true);\n  title = input<string>('');\n  styleClass = input<string>('');\n  transitionOptions = input<string>('200ms cubic-bezier(0, 0, 1, 1)');\n  appendTo = input<string>('body');\n  modal = input<boolean>(true);\n\n  visibleChangeEvent(event: boolean) {\n    this.visibleChange.emit(event);\n  }\n\n  onClose() {\n    this.visible.set(false);\n    this.visibleChange.emit(false);\n    this.onHide.emit(true);\n  }\n  onShowEvent() {\n    this.onShow.emit(true);\n  }\n  onHideEvent() {\n    this.onHide.emit(true);\n  }\n}\n","<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"modal()\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"appendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"styleClass() + ' custom-drawer'\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      <h3 class=\"text-xl font-semibold\">{{ title() }}</h3>\n      <mt-button\n        (onClick)=\"onClose()\"\n        variant=\"outlined\"\n        styleClass=\"!bg-white\"\n        icon=\"general.x-close\"\n        severity=\"secondary\"\n      >\n      </mt-button>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAYa,MAAM,CAAA;AACjB,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC;IAC/B,aAAa,GAAG,MAAM,EAAW;IACjC,MAAM,GAAG,MAAM,EAAW;IAC1B,MAAM,GAAG,MAAM,EAAW;AAC1B,IAAA,QAAQ,GAAG,KAAK,CAAsC,OAAO,oDAAC;AAC9D,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,sDAAC;AAClC,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,yDAAC;AACrC,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC;AACzB,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;AAC9B,IAAA,iBAAiB,GAAG,KAAK,CAAS,gCAAgC,6DAAC;AACnE,IAAA,QAAQ,GAAG,KAAK,CAAS,MAAM,oDAAC;AAChC,IAAA,KAAK,GAAG,KAAK,CAAU,IAAI,iDAAC;AAE5B,IAAA,kBAAkB,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;IAChC;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB;IACA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB;IACA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB;uGA9BW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,0nDCZnB,kqCAwCA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhCY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,kaAAE,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIjC,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,kqCAAA,EAAA;;;AER/C;;AAEG;;;;"}
+{"version":3,"file":"masterteam-components-drawer.mjs","sources":["../../../../packages/masterteam/components/drawer/drawer.ts","../../../../packages/masterteam/components/drawer/drawer.html","../../../../packages/masterteam/components/drawer/masterteam-components-drawer.ts"],"sourcesContent":["import { Button } from '@masterteam/components/button';\nimport { Component, input, output, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DrawerModule } from 'primeng/drawer';\n\n@Component({\n  selector: 'mt-drawer',\n  standalone: true,\n  imports: [CommonModule, DrawerModule, Button],\n  templateUrl: './drawer.html',\n  styleUrls: ['./drawer.scss'],\n})\nexport class Drawer {\n  visible = model<boolean>(false);\n  visibleChange = output<boolean>();\n  onShow = output<boolean>();\n  onHide = output<boolean>();\n  position = input<'left' | 'right' | 'top' | 'bottom'>('right');\n  fullScreen = input<boolean>(false);\n  closeOnEscape = input<boolean>(false);\n  blockScroll = input<boolean>(true);\n  dismissible = input<boolean>(true);\n  title = input<string>('');\n  styleClass = input<string>('');\n  transitionOptions = input<string>('200ms cubic-bezier(0, 0, 1, 1)');\n  appendTo = input<string>('body');\n  modal = input<boolean>(true);\n\n  visibleChangeEvent(event: boolean) {\n    this.visibleChange.emit(event);\n  }\n\n  onClose() {\n    this.visible.set(false);\n    this.visibleChange.emit(false);\n    this.onHide.emit(true);\n  }\n  onShowEvent() {\n    this.onShow.emit(true);\n  }\n  onHideEvent() {\n    this.onHide.emit(true);\n  }\n}\n","<p-drawer\n  [(visible)]=\"visible\"\n  [position]=\"position()\"\n  [fullScreen]=\"fullScreen()\"\n  [modal]=\"modal()\"\n  [closable]=\"false\"\n  [closeOnEscape]=\"closeOnEscape()\"\n  [blockScroll]=\"blockScroll()\"\n  [dismissible]=\"dismissible()\"\n  [appendTo]=\"appendTo()\"\n  [transitionOptions]=\"transitionOptions()\"\n  [styleClass]=\"styleClass() + ' mt-custom-drawer'\"\n  (visibleChange)=\"visibleChangeEvent($event)\"\n  (onShow)=\"onShowEvent()\"\n  (onHide)=\"onHideEvent()\"\n>\n  <ng-template #header>\n    <div\n      class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n    >\n      <h3 class=\"text-xl font-semibold\">{{ title() }}</h3>\n      <mt-button\n        (onClick)=\"onClose()\"\n        variant=\"outlined\"\n        styleClass=\"!bg-white\"\n        icon=\"general.x-close\"\n        severity=\"secondary\"\n      >\n      </mt-button>\n    </div>\n  </ng-template>\n\n  <ng-content select=\"[content]\"></ng-content>\n\n  <ng-template #footer>\n    <div class=\"flex justify-end p-3 gap-2 border-t border-surface-200\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </ng-template>\n</p-drawer>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAYa,MAAM,CAAA;AACjB,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC;IAC/B,aAAa,GAAG,MAAM,EAAW;IACjC,MAAM,GAAG,MAAM,EAAW;IAC1B,MAAM,GAAG,MAAM,EAAW;AAC1B,IAAA,QAAQ,GAAG,KAAK,CAAsC,OAAO,oDAAC;AAC9D,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,sDAAC;AAClC,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,yDAAC;AACrC,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC;AACzB,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;AAC9B,IAAA,iBAAiB,GAAG,KAAK,CAAS,gCAAgC,6DAAC;AACnE,IAAA,QAAQ,GAAG,KAAK,CAAS,MAAM,oDAAC;AAChC,IAAA,KAAK,GAAG,KAAK,CAAU,IAAI,iDAAC;AAE5B,IAAA,kBAAkB,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;IAChC;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB;IACA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB;IACA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB;uGA9BW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,0nDCZnB,qqCAwCA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhCY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,kaAAE,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIjC,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,qqCAAA,EAAA;;;AER/C;;AAEG;;;;"}

package/fesm2022/masterteam-components-dynamic-drawer.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, model, signal, Injector, Input, Component, inject, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Injectable } from '@angular/core';
+import { NgComponentOutlet, DOCUMENT } from '@angular/common';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import * as i1 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import { Button } from '@masterteam/components/button';
+
+const DynamicDrawerConfig = new InjectionToken('DynamicDrawerConfig');
+class DynamicDrawerHost {
+    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    cmp = signal(null, ...(ngDevMode ? [{ debugName: "cmp" }] : []));
+    cfg = signal({}, ...(ngDevMode ? [{ debugName: "cfg" }] : []));
+    cmpInputs = signal({}, ...(ngDevMode ? [{ debugName: "cmpInputs" }] : []));
+    childInjector;
+    ref;
+    connect(opts) {
+        this.cmp.set(opts.component);
+        this.cfg.set(opts.config ?? {});
+        this.cmpInputs.set(opts.config?.inputValues ?? {});
+        this.ref = opts.ref;
+        this.childInjector = Injector.create({
+            parent: opts.parent,
+            providers: [
+                { provide: DynamicDrawerConfig, useValue: opts.config ?? {} },
+                { provide: DynamicDialogRef, useValue: opts.ref },
+            ],
+        });
+        opts.ref.onClose.subscribe(() => {
+            this.visible.set(false);
+        });
+        this.visible.set(true);
+    }
+    handleHide(data = null) {
+        this.visible.set(false);
+        this.ref?.close(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicDrawerHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: DynamicDrawerHost, isStandalone: true, selector: "mt-dynamic-drawer-host", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, connect: { classPropertyName: "connect", publicName: "connect", isSignal: false, isRequired: true, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: `
+    <p-drawer
+      [(visible)]="visible"
+      [closable]="cfg()?.closable"
+      [position]="cfg()?.position"
+      [fullScreen]="cfg()?.fullScreen"
+      [modal]="cfg()?.modal"
+      [closeOnEscape]="cfg()?.closeOnEscape"
+      [dismissible]="cfg()?.dismissible"
+      [appendTo]="cfg()?.appendTo"
+      [transitionOptions]="cfg()?.transitionOptions"
+      [styleClass]="cfg()?.styleClass + ' mt-drawer'"
+    >
+      <ng-template #header>
+        <div
+          class="flex items-center justify-between px-5 w-full py-3 border-b border-surface"
+        >
+          <h3 class="text-xl font-semibold">{{ cfg()?.header }}</h3>
+          <mt-button
+            (onClick)="handleHide()"
+            variant="outlined"
+            styleClass="!bg-white"
+            icon="general.x-close"
+            severity="secondary"
+          >
+          </mt-button>
+        </div>
+      </ng-template>
+
+      <ng-container
+        *ngComponentOutlet="cmp(); injector: childInjector; inputs: cmpInputs()"
+      >
+      </ng-container>
+    </p-drawer>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DynamicDrawerHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mt-dynamic-drawer-host',
+                    standalone: true,
+                    imports: [NgComponentOutlet, DrawerModule, Button],
+                    template: `
+    <p-drawer
+      [(visible)]="visible"
+      [closable]="cfg()?.closable"
+      [position]="cfg()?.position"
+      [fullScreen]="cfg()?.fullScreen"
+      [modal]="cfg()?.modal"
+      [closeOnEscape]="cfg()?.closeOnEscape"
+      [dismissible]="cfg()?.dismissible"
+      [appendTo]="cfg()?.appendTo"
+      [transitionOptions]="cfg()?.transitionOptions"
+      [styleClass]="cfg()?.styleClass + ' mt-drawer'"
+    >
+      <ng-template #header>
+        <div
+          class="flex items-center justify-between px-5 w-full py-3 border-b border-surface"
+        >
+          <h3 class="text-xl font-semibold">{{ cfg()?.header }}</h3>
+          <mt-button
+            (onClick)="handleHide()"
+            variant="outlined"
+            styleClass="!bg-white"
+            icon="general.x-close"
+            severity="secondary"
+          >
+          </mt-button>
+        </div>
+      </ng-template>
+
+      <ng-container
+        *ngComponentOutlet="cmp(); injector: childInjector; inputs: cmpInputs()"
+      >
+      </ng-container>
+    </p-drawer>
+  `,
+                }]
+        }], propDecorators: { connect: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+// dynamic-drawer.service.ts
+class DrawerService {
+    appRef = inject(ApplicationRef);
+    env = inject(EnvironmentInjector);
+    rootInjector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    doc = inject(DOCUMENT);
+    hostRef;
+    defauiltConfig = {
+        position: 'right',
+        modal: true,
+        closable: false,
+        transitionOptions: '200ms cubic-bezier(0, 0, 1, 1)',
+        inputValues: {},
+    };
+    open(component, config = {}) {
+        config = { ...this.defauiltConfig, ...config };
+        this.hostRef = createComponent(DynamicDrawerHost, {
+            environmentInjector: this.env,
+        });
+        this.appRef.attachView(this.hostRef.hostView);
+        this.doc.body.appendChild(this.hostRef.location.nativeElement);
+        // auto-clean if app destroyed (SSR/hot-reload safety)
+        this.destroyRef.onDestroy(() => {
+            this.appRef.detachView(this.hostRef.hostView);
+            this.hostRef.destroy();
+            this.hostRef = undefined;
+        });
+        const ref = new DynamicDialogRef();
+        this.hostRef.instance.connect({
+            component,
+            config,
+            parent: this.rootInjector,
+            ref,
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DrawerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DrawerService, DynamicDrawerConfig, DynamicDrawerHost };
+//# sourceMappingURL=masterteam-components-dynamic-drawer.mjs.map

package/fesm2022/masterteam-components-dynamic-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-dynamic-drawer.mjs","sources":["../../../../packages/masterteam/components/dynamic-drawer/dynamic-drawer-host.ts","../../../../packages/masterteam/components/dynamic-drawer/dynamic-drawer.ts","../../../../packages/masterteam/components/dynamic-drawer/masterteam-components-dynamic-drawer.ts"],"sourcesContent":["import { DynamicDialogRef } from 'primeng/dynamicdialog';\nimport { DrawerModule } from 'primeng/drawer';\nimport {\n  Component,\n  Injector,\n  Input,\n  signal,\n  InjectionToken,\n  model,\n} from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\n\nexport const DynamicDrawerConfig = new InjectionToken<any>(\n  'DynamicDrawerConfig',\n);\nimport { Button } from '@masterteam/components/button';\n\n@Component({\n  selector: 'mt-dynamic-drawer-host',\n  standalone: true,\n  imports: [NgComponentOutlet, DrawerModule, Button],\n  template: `\n    <p-drawer\n      [(visible)]=\"visible\"\n      [closable]=\"cfg()?.closable\"\n      [position]=\"cfg()?.position\"\n      [fullScreen]=\"cfg()?.fullScreen\"\n      [modal]=\"cfg()?.modal\"\n      [closeOnEscape]=\"cfg()?.closeOnEscape\"\n      [dismissible]=\"cfg()?.dismissible\"\n      [appendTo]=\"cfg()?.appendTo\"\n      [transitionOptions]=\"cfg()?.transitionOptions\"\n      [styleClass]=\"cfg()?.styleClass + ' mt-drawer'\"\n    >\n      <ng-template #header>\n        <div\n          class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\n        >\n          <h3 class=\"text-xl font-semibold\">{{ cfg()?.header }}</h3>\n          <mt-button\n            (onClick)=\"handleHide()\"\n            variant=\"outlined\"\n            styleClass=\"!bg-white\"\n            icon=\"general.x-close\"\n            severity=\"secondary\"\n          >\n          </mt-button>\n        </div>\n      </ng-template>\n\n      <ng-container\n        *ngComponentOutlet=\"cmp(); injector: childInjector; inputs: cmpInputs()\"\n      >\n      </ng-container>\n    </p-drawer>\n  `,\n})\nexport class DynamicDrawerHost {\n  public visible = model<boolean>(false);\n  cmp = signal<any>(null);\n  cfg = signal<any>({});\n  cmpInputs = signal<Record<string, unknown>>({});\n  childInjector!: Injector;\n  private ref?: DynamicDialogRef;\n\n  @Input({ required: true })\n  connect(opts: {\n    component: any;\n    config?: any;\n    parent: Injector;\n    ref: DynamicDialogRef;\n  }) {\n    this.cmp.set(opts.component);\n    this.cfg.set(opts.config ?? {});\n    this.cmpInputs.set(opts.config?.inputValues ?? {});\n    this.ref = opts.ref;\n    this.childInjector = Injector.create({\n      parent: opts.parent,\n      providers: [\n        { provide: DynamicDrawerConfig, useValue: opts.config ?? {} },\n        { provide: DynamicDialogRef, useValue: opts.ref },\n      ],\n    });\n    opts.ref.onClose.subscribe(() => {\n      this.visible.set(false);\n    });\n    this.visible.set(true);\n  }\n\n  handleHide(data = null) {\n    this.visible.set(false);\n    this.ref?.close(data);\n  }\n}\n","// dynamic-drawer.service.ts\nimport {\n  Injectable,\n  Type,\n  createComponent,\n  EnvironmentInjector,\n  ApplicationRef,\n  Injector,\n  DestroyRef,\n  inject,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { DynamicDrawerHost } from './dynamic-drawer-host';\nimport { DynamicDialogRef } from 'primeng/dynamicdialog';\n\nexport interface DynamicDrawerConfigInterface {\n  header?: string;\n  position?: string;\n  data?: any;\n  fullScreen?: boolean;\n  modal?: boolean;\n  closable?: boolean;\n  closeOnEscape?: boolean;\n  dismissible?: boolean;\n  appendTo?: any;\n  transitionOptions?: string;\n  styleClass?: string;\n  inputValues?: any;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class DrawerService {\n  private appRef = inject(ApplicationRef);\n  private env = inject(EnvironmentInjector);\n  private rootInjector = inject(Injector);\n  private destroyRef = inject(DestroyRef);\n  private doc = inject(DOCUMENT);\n  private hostRef?: ReturnType<typeof createComponent<DynamicDrawerHost>>;\n  defauiltConfig: DynamicDrawerConfigInterface = {\n    position: 'right',\n    modal: true,\n    closable: false,\n    transitionOptions: '200ms cubic-bezier(0, 0, 1, 1)',\n    inputValues: {},\n  };\n  open<T>(\n    component: Type<any>,\n    config: DynamicDrawerConfigInterface = {},\n  ): DynamicDialogRef<T> {\n    config = { ...this.defauiltConfig, ...config };\n    this.hostRef = createComponent(DynamicDrawerHost, {\n      environmentInjector: this.env,\n    });\n\n    this.appRef.attachView(this.hostRef.hostView);\n    this.doc.body.appendChild(this.hostRef.location.nativeElement);\n\n    // auto-clean if app destroyed (SSR/hot-reload safety)\n    this.destroyRef.onDestroy(() => {\n      this.appRef.detachView(this.hostRef!.hostView);\n      this.hostRef!.destroy();\n      this.hostRef = undefined;\n    });\n\n    const ref = new DynamicDialogRef<T>();\n    this.hostRef.instance.connect({\n      component,\n      config,\n      parent: this.rootInjector,\n      ref,\n    });\n\n    return ref;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-modal.mjs

@@ -0,0 +1,50 @@
+import { DrawerService } from '@masterteam/components/dynamic-drawer';
+import { DialogService } from '@masterteam/components/dialog';
+import * as i0 from '@angular/core';
+import { inject, Injectable } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+
+class ModalService {
+    drawerService = inject(DrawerService);
+    dialogService = inject(DialogService);
+    dir = inject(Directionality, { optional: true });
+    footerClass = 'mt-modal-footer';
+    contentClass = 'mt-modal-content';
+    modalConfig;
+    openModal(component, modalType, config) {
+        let ref;
+        if (modalType === 'drawer') {
+            config.position = this.handelStartEndPosition(config.position);
+            console.log('Opening drawer with config:', config);
+            ref = this.drawerService.open(component, config);
+        }
+        else {
+            ref = this.dialogService.open(component, config);
+        }
+        return ref;
+    }
+    handelStartEndPosition(position) {
+        if (position === 'start') {
+            return this.dir?.value === 'rtl' ? 'right' : 'left';
+        }
+        else if (position === 'end') {
+            return this.dir?.value === 'rtl' ? 'left' : 'right';
+        }
+        else {
+            return position || 'left';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ModalService };
+//# sourceMappingURL=masterteam-components-modal.mjs.map

package/fesm2022/masterteam-components-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-modal.mjs","sources":["../../../../packages/masterteam/components/modal/modal.ts","../../../../packages/masterteam/components/modal/masterteam-components-modal.ts"],"sourcesContent":["import {\n  DynamicDrawerConfigInterface,\n  DrawerService,\n} from '@masterteam/components/dynamic-drawer';\nimport {\n  DynamicDialogConfig,\n  DialogService,\n} from '@masterteam/components/dialog';\nimport { inject, Injectable } from '@angular/core';\nimport { Directionality } from '@angular/cdk/bidi'; // Import from Angular CDK\n\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  readonly drawerService: DrawerService = inject(DrawerService);\n  readonly dialogService: DialogService = inject(DialogService);\n  private dir = inject(Directionality, { optional: true });\n\n  footerClass: string = 'mt-modal-footer';\n  contentClass: string = 'mt-modal-content';\n  modalConfig: any;\n\n  openModal(\n    component: any,\n    modalType: 'drawer' | 'dialog',\n    config: DynamicDialogConfig | DynamicDrawerConfigInterface,\n  ) {\n    let ref: any;\n    if (modalType === 'drawer') {\n      config.position = this.handelStartEndPosition(config.position);\n      console.log('Opening drawer with config:', config);\n      ref = this.drawerService.open(component, config);\n    } else {\n      ref = this.dialogService.open(component, config);\n    }\n\n    return ref;\n  }\n\n  handelStartEndPosition(position: string | undefined) {\n    if (position === 'start') {\n      return this.dir?.value === 'rtl' ? 'right' : 'left';\n    } else if (position === 'end') {\n      return this.dir?.value === 'rtl' ? 'left' : 'right';\n    } else {\n      return position || 'left';\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAYa,YAAY,CAAA;AACd,IAAA,aAAa,GAAkB,MAAM,CAAC,aAAa,CAAC;AACpD,IAAA,aAAa,GAAkB,MAAM,CAAC,aAAa,CAAC;IACrD,GAAG,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAExD,WAAW,GAAW,iBAAiB;IACvC,YAAY,GAAW,kBAAkB;AACzC,IAAA,WAAW;AAEX,IAAA,SAAS,CACP,SAAc,EACd,SAA8B,EAC9B,MAA0D,EAAA;AAE1D,QAAA,IAAI,GAAQ;AACZ,QAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;YAC1B,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC9D,YAAA,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC;YAClD,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;QAClD;aAAO;YACL,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;QAClD;AAEA,QAAA,OAAO,GAAG;IACZ;AAEA,IAAA,sBAAsB,CAAC,QAA4B,EAAA;AACjD,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM;QACrD;AAAO,aAAA,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO;QACrD;aAAO;YACL,OAAO,QAAQ,IAAI,MAAM;QAC3B;IACF;uGAlCW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;2FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACXlC;;AAEG;;;;"}

package/modal/index.d.ts

@@ -0,0 +1,18 @@
+import { DrawerService, DynamicDrawerConfigInterface } from '@masterteam/components/dynamic-drawer';
+import { DialogService, DynamicDialogConfig } from '@masterteam/components/dialog';
+import * as i0 from '@angular/core';
+
+declare class ModalService {
+    readonly drawerService: DrawerService;
+    readonly dialogService: DialogService;
+    private dir;
+    footerClass: string;
+    contentClass: string;
+    modalConfig: any;
+    openModal(component: any, modalType: 'drawer' | 'dialog', config: DynamicDialogConfig | DynamicDrawerConfigInterface): any;
+    handelStartEndPosition(position: string | undefined): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
+}
+
+export { ModalService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masterteam/components",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "publishConfig": {
     "directory": ".",
     "linkDirectory": false,
@@ -43,22 +43,22 @@
       "types": "./breadcrumb/index.d.ts",
       "default": "./fesm2022/masterteam-components-breadcrumb.mjs"
     },
-    "./button": {
-      "types": "./button/index.d.ts",
-      "default": "./fesm2022/masterteam-components-button.mjs"
-    },
-    "./card": {
-      "types": "./card/index.d.ts",
-      "default": "./fesm2022/masterteam-components-card.mjs"
-    },
     "./button-group": {
       "types": "./button-group/index.d.ts",
       "default": "./fesm2022/masterteam-components-button-group.mjs"
     },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "default": "./fesm2022/masterteam-components-button.mjs"
+    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/masterteam-components-avatar.mjs"
     },
+    "./card": {
+      "types": "./card/index.d.ts",
+      "default": "./fesm2022/masterteam-components-card.mjs"
+    },
     "./avatar-text": {
       "types": "./avatar-text/index.d.ts",
       "default": "./fesm2022/masterteam-components-avatar-text.mjs"
@@ -67,10 +67,6 @@
       "types": "./checkbox-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-checkbox-field.mjs"
     },
-    "./chip": {
-      "types": "./chip/index.d.ts",
-      "default": "./fesm2022/masterteam-components-chip.mjs"
-    },
     "./color-picker-field": {
       "types": "./color-picker-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-color-picker-field.mjs"
@@ -83,6 +79,14 @@
       "types": "./date-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-date-field.mjs"
     },
+    "./chip": {
+      "types": "./chip/index.d.ts",
+      "default": "./fesm2022/masterteam-components-chip.mjs"
+    },
+    "./dynamic-drawer": {
+      "types": "./dynamic-drawer/index.d.ts",
+      "default": "./fesm2022/masterteam-components-dynamic-drawer.mjs"
+    },
     "./drawer": {
       "types": "./drawer/index.d.ts",
       "default": "./fesm2022/masterteam-components-drawer.mjs"
@@ -95,6 +99,10 @@
       "types": "./field-validation/index.d.ts",
       "default": "./fesm2022/masterteam-components-field-validation.mjs"
     },
+    "./list": {
+      "types": "./list/index.d.ts",
+      "default": "./fesm2022/masterteam-components-list.mjs"
+    },
     "./icon-field": {
       "types": "./icon-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-icon-field.mjs"
@@ -103,9 +111,9 @@
       "types": "./formula-builder/index.d.ts",
       "default": "./fesm2022/masterteam-components-formula-builder.mjs"
     },
-    "./list": {
-      "types": "./list/index.d.ts",
-      "default": "./fesm2022/masterteam-components-list.mjs"
+    "./modal": {
+      "types": "./modal/index.d.ts",
+      "default": "./fesm2022/masterteam-components-modal.mjs"
     },
     "./module-summary-card": {
       "types": "./module-summary-card/index.d.ts",
@@ -139,13 +147,17 @@
       "types": "./radio-cards-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-radio-cards-field.mjs"
     },
+    "./slider-field": {
+      "types": "./slider-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-slider-field.mjs"
+    },
     "./select-field": {
       "types": "./select-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-select-field.mjs"
     },
-    "./slider-field": {
-      "types": "./slider-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-slider-field.mjs"
+    "./text-field": {
+      "types": "./text-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-text-field.mjs"
     },
     "./table": {
       "types": "./table/index.d.ts",
@@ -159,21 +171,17 @@
       "types": "./textarea-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-textarea-field.mjs"
     },
-    "./text-field": {
-      "types": "./text-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-text-field.mjs"
-    },
-    "./toast": {
-      "types": "./toast/index.d.ts",
-      "default": "./fesm2022/masterteam-components-toast.mjs"
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "default": "./fesm2022/masterteam-components-tooltip.mjs"
     },
     "./toggle-field": {
       "types": "./toggle-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-toggle-field.mjs"
     },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "default": "./fesm2022/masterteam-components-tooltip.mjs"
+    "./toast": {
+      "types": "./toast/index.d.ts",
+      "default": "./fesm2022/masterteam-components-toast.mjs"
     },
     "./user-search-field": {
       "types": "./user-search-field/index.d.ts",