@masterteam/workspace-builder 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/assets/workspace-builder.css +2 -2
  2. package/fesm2022/masterteam-workspace-builder.mjs +116 -56
  3. package/fesm2022/masterteam-workspace-builder.mjs.map +1 -1
  4. package/package.json +3 -3
  5. package/types/masterteam-workspace-builder.d.ts +11 -6
package/assets/workspace-builder.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.static{position:static}.start{inset-inline-start:var(--spacing)}.col-span-1{grid-column:span 1/span 1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-auto{margin-inline:auto}.ms-3{margin-inline-start:calc(var(--spacing) * 3)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.flex{display:flex}.grid{display:grid}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-32{min-height:calc(var(--spacing) * 32)}.min-h-full{min-height:100%}.\!w-\[28rem\]{width:28rem!important}.w-1\/2{width:50%}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-grab{cursor:grab}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.content-start{align-content:flex-start}.items-center{align-items:center}.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)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-red-200{border-color:var(--color-red-200)}.border-surface-200{border-color:var(--p-surface-200)}@supports (color:color-mix(in lab, red, red)){.border-surface-200{border-color:color-mix(in srgb, var(--p-surface-200) calc(100% * 1), transparent)}}.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-red-50{background-color:var(--color-red-50)}.bg-surface-0{background-color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.bg-surface-0{background-color:color-mix(in srgb, var(--p-surface-0) calc(100% * 1), transparent)}}.bg-surface-0\/80{background-color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.bg-surface-0\/80{background-color:color-mix(in oklab, color-mix(in srgb, var(--p-surface-0) calc(100% * 1), transparent) 80%, transparent)}}.bg-surface-50\/60{background-color:var(--p-surface-50)}@supports (color:color-mix(in lab, red, red)){.bg-surface-50\/60{background-color:color-mix(in oklab, color-mix(in srgb, var(--p-surface-50) calc(100% * 1), transparent) 60%, transparent)}}.bg-surface-50\/80{background-color:var(--p-surface-50)}@supports (color:color-mix(in lab, red, red)){.bg-surface-50\/80{background-color:color-mix(in oklab, color-mix(in srgb, var(--p-surface-50) calc(100% * 1), transparent) 80%, transparent)}}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.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\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-6{padding-block:calc(var(--spacing) * 6)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-primary{color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.text-primary{color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-surface-500{color:var(--p-surface-500)}@supports (color:color-mix(in lab, red, red)){.text-surface-500{color:color-mix(in srgb, var(--p-surface-500) calc(100% * 1), transparent)}}.text-surface-600{color:var(--p-surface-600)}@supports (color:color-mix(in lab, red, red)){.text-surface-600{color:color-mix(in srgb, var(--p-surface-600) calc(100% * 1), transparent)}}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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)}.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))}.duration-150{--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-surface-300:hover{border-color:var(--p-surface-300)}@supports (color:color-mix(in lab, red, red)){.hover\:border-surface-300:hover{border-color:color-mix(in srgb, var(--p-surface-300) calc(100% * 1), transparent)}}.hover\:shadow-sm:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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)}}.active\:cursor-grabbing:active{cursor:grabbing}}@keyframes enter{0%{opacity:var(--p-enter-opacity,1);transform:translate3d(var(--p-enter-translate-x,0), var(--p-enter-translate-y,0), 0) scale3d(var(--p-enter-scale,1), var(--p-enter-scale,1), var(--p-enter-scale,1)) rotate(var(--p-enter-rotate,0))}}@keyframes leave{to{opacity:var(--p-leave-opacity,1);transform:translate3d(var(--p-leave-translate-x,0), var(--p-leave-translate-y,0), 0) scale3d(var(--p-leave-scale,1), var(--p-leave-scale,1), var(--p-leave-scale,1)) rotate(var(--p-leave-rotate,0))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-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-duration{syntax:"*";inherits:false}@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}
1
+ /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.static{position:static}.col-span-1{grid-column:span 1/span 1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-auto{margin-inline:auto}.ms-3{margin-inline-start:calc(var(--spacing) * 3)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.flex{display:flex}.grid{display:grid}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-32{min-height:calc(var(--spacing) * 32)}.min-h-full{min-height:100%}.\!w-\[28rem\]{width:28rem!important}.w-1\/2{width:50%}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-grab{cursor:grab}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.content-start{align-content:flex-start}.items-center{align-items:center}.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)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-red-200{border-color:var(--color-red-200)}.border-surface-200{border-color:var(--p-surface-200)}@supports (color:color-mix(in lab, red, red)){.border-surface-200{border-color:color-mix(in srgb, var(--p-surface-200) calc(100% * 1), transparent)}}.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-red-50{background-color:var(--color-red-50)}.bg-surface-0{background-color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.bg-surface-0{background-color:color-mix(in srgb, var(--p-surface-0) calc(100% * 1), transparent)}}.bg-surface-0\/80{background-color:var(--p-surface-0)}@supports (color:color-mix(in lab, red, red)){.bg-surface-0\/80{background-color:color-mix(in oklab, color-mix(in srgb, var(--p-surface-0) calc(100% * 1), transparent) 80%, transparent)}}.bg-surface-50\/60{background-color:var(--p-surface-50)}@supports (color:color-mix(in lab, red, red)){.bg-surface-50\/60{background-color:color-mix(in oklab, color-mix(in srgb, var(--p-surface-50) calc(100% * 1), transparent) 60%, transparent)}}.bg-surface-50\/80{background-color:var(--p-surface-50)}@supports (color:color-mix(in lab, red, red)){.bg-surface-50\/80{background-color:color-mix(in oklab, color-mix(in srgb, var(--p-surface-50) calc(100% * 1), transparent) 80%, transparent)}}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.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\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-6{padding-block:calc(var(--spacing) * 6)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-primary{color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.text-primary{color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-surface-500{color:var(--p-surface-500)}@supports (color:color-mix(in lab, red, red)){.text-surface-500{color:color-mix(in srgb, var(--p-surface-500) calc(100% * 1), transparent)}}.text-surface-600{color:var(--p-surface-600)}@supports (color:color-mix(in lab, red, red)){.text-surface-600{color:color-mix(in srgb, var(--p-surface-600) calc(100% * 1), transparent)}}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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)}.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))}.duration-150{--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-surface-300:hover{border-color:var(--p-surface-300)}@supports (color:color-mix(in lab, red, red)){.hover\:border-surface-300:hover{border-color:color-mix(in srgb, var(--p-surface-300) calc(100% * 1), transparent)}}.hover\:shadow-sm:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px 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)}}.active\:cursor-grabbing:active{cursor:grabbing}}@keyframes enter{0%{opacity:var(--p-enter-opacity,1);transform:translate3d(var(--p-enter-translate-x,0), var(--p-enter-translate-y,0), 0) scale3d(var(--p-enter-scale,1), var(--p-enter-scale,1), var(--p-enter-scale,1)) rotate(var(--p-enter-rotate,0))}}@keyframes leave{to{opacity:var(--p-leave-opacity,1);transform:translate3d(var(--p-leave-translate-x,0), var(--p-leave-translate-y,0), 0) scale3d(var(--p-leave-scale,1), var(--p-leave-scale,1), var(--p-leave-scale,1)) rotate(var(--p-leave-rotate,0))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-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-duration{syntax:"*";inherits:false}@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}
package/fesm2022/masterteam-workspace-builder.mjs CHANGED
@@ -8,7 +8,6 @@ import { DynamicDialogConfig, ModalRef, DialogService } from '@masterteam/compon
8
8
  import { ModalService } from '@masterteam/components/modal';
9
9
  import { Page } from '@masterteam/components/page';
10
10
  import { Card } from '@masterteam/components/card';
11
- import { ToastService } from '@masterteam/components/toast';
12
11
  import * as i2 from 'primeng/dragdrop';
13
12
  import { DragDropModule } from 'primeng/dragdrop';
14
13
  import * as i3 from 'primeng/skeleton';
@@ -635,7 +634,6 @@ class WorkspaceBuilderCreateGroupDialog {
635
634
  config = inject(DynamicDialogConfig, { optional: true });
636
635
  ref = inject(ModalRef);
637
636
  facade = inject(WorkspaceBuilderFacade);
638
- ts = inject(ToastService);
639
637
  translocoService = inject(TranslocoService);
640
638
  isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
641
639
  formControl = new FormControl(null);
@@ -694,13 +692,11 @@ class WorkspaceBuilderCreateGroupDialog {
694
692
  if (this.isEditMode) {
695
693
  this.facade.renameGroup(this.dialogData.groupId, title).subscribe({
696
694
  next: () => {
697
- this.ts.success(this.translocoService.translate('workspace-builder.group-update-success'));
698
695
  this.facade.getLayout();
699
696
  this.ref.close(true);
700
697
  },
701
698
  error: () => {
702
699
  this.isSaving.set(false);
703
- this.ts.error(this.translocoService.translate('workspace-builder.group-update-error'));
704
700
  },
705
701
  });
706
702
  }
@@ -708,13 +704,11 @@ class WorkspaceBuilderCreateGroupDialog {
708
704
  const order = this.dialogData.order;
709
705
  this.facade.createGroup(title, order).subscribe({
710
706
  next: () => {
711
- this.ts.success(this.translocoService.translate('workspace-builder.group-create-success'));
712
707
  this.facade.getLayout();
713
708
  this.ref.close(true);
714
709
  },
715
710
  error: () => {
716
711
  this.isSaving.set(false);
717
- this.ts.error(this.translocoService.translate('workspace-builder.group-create-error'));
718
712
  },
719
713
  });
720
714
  }
@@ -751,7 +745,12 @@ class WorkspaceBuilder {
751
745
  dragCleanupTimer = null;
752
746
  scrollAnimFrame = null;
753
747
  scrollContainer = null;
754
- scrollDirection = 0;
748
+ scrollVelocity = 0;
749
+ lastDragClientY = 0;
750
+ documentDragOverHandler = null;
751
+ documentDragEndHandler = null;
752
+ EDGE_SCROLL_ZONE = 110;
753
+ EDGE_SCROLL_MAX_SPEED = 22;
755
754
  autoSaveInFlight = false;
756
755
  autoSaveQueued = false;
757
756
  autoSaveQueuedNotifySuccess = false;
@@ -759,7 +758,6 @@ class WorkspaceBuilder {
759
758
  confirmationService = inject(ConfirmationService);
760
759
  modal = inject(ModalService);
761
760
  transloco = inject(TranslocoService);
762
- ts = inject(ToastService);
763
761
  layout = this.facade.layout;
764
762
  validationErrors = this.facade.validationErrors;
765
763
  isLoadingLayout = this.facade.isLoadingLayout;
@@ -959,8 +957,15 @@ class WorkspaceBuilder {
959
957
  }
960
958
  onNativeGroupDrop(event, area, groupId) {
961
959
  this.stopDropEvent(event);
962
- const group = this.findGroup(this.layout(), area, groupId);
963
- const index = group?.modules.length ?? 0;
960
+ const index = this.resolveGroupModuleDropIndex(event, area, groupId);
961
+ this.handleDrop({ type: 'group', area, groupId }, index, event);
962
+ }
963
+ onGroupContainerDrop(event, area, groupId) {
964
+ this.stopDropEvent(event);
965
+ const nativeEvent = this.getNativeDragEvent(event);
966
+ const index = nativeEvent
967
+ ? this.resolveGroupModuleDropIndex(nativeEvent, area, groupId)
968
+ : (this.findGroup(this.layout(), area, groupId)?.modules.length ?? 0);
964
969
  this.handleDrop({ type: 'group', area, groupId }, index, event);
965
970
  }
966
971
  onNativeGroupModuleDrop(event, area, groupId, moduleIndex) {
@@ -1014,10 +1019,9 @@ class WorkspaceBuilder {
1014
1019
  executeDeleteGroup(groupId) {
1015
1020
  this.facade.deleteGroup(groupId).subscribe({
1016
1021
  next: () => {
1017
- this.ts.success(this.getSuccessMessage(WorkspaceBuilderActionKey.DeleteGroup, 'workspace-builder.group-delete-success'));
1018
- },
1019
- error: () => {
1020
- this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.DeleteGroup, 'workspace-builder.group-delete-error'));
1022
+ if (this.autoSave()) {
1023
+ this.triggerAutoSave();
1024
+ }
1021
1025
  },
1022
1026
  });
1023
1027
  }
@@ -1139,48 +1143,97 @@ class WorkspaceBuilder {
1139
1143
  this.isDragging.set(true);
1140
1144
  this.activeDropSlotKey.set(null);
1141
1145
  this.clearDragCleanupTimer();
1146
+ this.attachDocumentDragListeners();
1142
1147
  }
1143
1148
  onAreaBodyDragOver(event) {
1144
1149
  this.allowNativeDrop(event);
1145
- this.updateEdgeScroll(event);
1150
+ this.lastDragClientY = event.clientY;
1151
+ this.scrollContainer = event.currentTarget;
1152
+ this.evaluateEdgeScroll();
1146
1153
  }
1147
1154
  onAreaBodyDragLeave(event) {
1148
1155
  const container = event.currentTarget;
1149
1156
  const related = event.relatedTarget;
1150
1157
  if (!related || !container?.contains(related)) {
1151
- this.stopEdgeScroll();
1158
+ this.scrollVelocity = 0;
1152
1159
  }
1153
1160
  }
1154
- updateEdgeScroll(event) {
1155
- const container = event.currentTarget;
1156
- if (!container)
1161
+ attachDocumentDragListeners() {
1162
+ if (this.documentDragOverHandler || typeof document === 'undefined') {
1157
1163
  return;
1164
+ }
1165
+ this.documentDragOverHandler = (event) => {
1166
+ this.lastDragClientY = event.clientY;
1167
+ this.evaluateEdgeScroll();
1168
+ };
1169
+ this.documentDragEndHandler = () => this.stopEdgeScroll();
1170
+ document.addEventListener('dragover', this.documentDragOverHandler, {
1171
+ passive: true,
1172
+ });
1173
+ document.addEventListener('dragend', this.documentDragEndHandler);
1174
+ document.addEventListener('drop', this.documentDragEndHandler);
1175
+ }
1176
+ detachDocumentDragListeners() {
1177
+ if (typeof document === 'undefined') {
1178
+ return;
1179
+ }
1180
+ if (this.documentDragOverHandler) {
1181
+ document.removeEventListener('dragover', this.documentDragOverHandler);
1182
+ this.documentDragOverHandler = null;
1183
+ }
1184
+ if (this.documentDragEndHandler) {
1185
+ document.removeEventListener('dragend', this.documentDragEndHandler);
1186
+ document.removeEventListener('drop', this.documentDragEndHandler);
1187
+ this.documentDragEndHandler = null;
1188
+ }
1189
+ }
1190
+ evaluateEdgeScroll() {
1191
+ const container = this.scrollContainer;
1192
+ if (!container) {
1193
+ this.scrollVelocity = 0;
1194
+ return;
1195
+ }
1158
1196
  const rect = container.getBoundingClientRect();
1159
- const y = event.clientY;
1160
- const zone = 80;
1161
- let direction = 0;
1162
- if (y - rect.top < zone && container.scrollTop > 0) {
1163
- direction = -1;
1164
- }
1165
- else if (rect.bottom - y < zone &&
1166
- container.scrollTop < container.scrollHeight - container.clientHeight) {
1167
- direction = 1;
1168
- }
1169
- if (this.scrollContainer !== container ||
1170
- this.scrollDirection !== direction) {
1171
- this.scrollContainer = container;
1172
- this.scrollDirection = direction;
1173
- this.stopEdgeScroll();
1174
- if (direction !== 0) {
1175
- this.runEdgeScroll();
1176
- }
1197
+ const y = this.lastDragClientY;
1198
+ const zone = this.EDGE_SCROLL_ZONE;
1199
+ const max = this.EDGE_SCROLL_MAX_SPEED;
1200
+ const canScrollUp = container.scrollTop > 0;
1201
+ const canScrollDown = container.scrollTop < container.scrollHeight - container.clientHeight;
1202
+ let velocity = 0;
1203
+ const topDistance = y - rect.top;
1204
+ const bottomDistance = rect.bottom - y;
1205
+ if (topDistance >= 0 && topDistance < zone && canScrollUp) {
1206
+ const ratio = 1 - topDistance / zone;
1207
+ velocity = -Math.max(2, Math.round(ratio * max));
1208
+ }
1209
+ else if (bottomDistance >= 0 && bottomDistance < zone && canScrollDown) {
1210
+ const ratio = 1 - bottomDistance / zone;
1211
+ velocity = Math.max(2, Math.round(ratio * max));
1212
+ }
1213
+ if (velocity === 0) {
1214
+ this.scrollVelocity = 0;
1215
+ return;
1216
+ }
1217
+ this.scrollVelocity = velocity;
1218
+ if (this.scrollAnimFrame === null) {
1219
+ this.runEdgeScroll();
1177
1220
  }
1178
1221
  }
1179
1222
  runEdgeScroll() {
1180
1223
  const tick = () => {
1181
- if (!this.scrollContainer || this.scrollDirection === 0)
1224
+ const container = this.scrollContainer;
1225
+ if (!container || this.scrollVelocity === 0) {
1226
+ this.scrollAnimFrame = null;
1227
+ return;
1228
+ }
1229
+ const before = container.scrollTop;
1230
+ container.scrollTop += this.scrollVelocity;
1231
+ const moved = container.scrollTop !== before;
1232
+ if (!moved) {
1233
+ this.scrollVelocity = 0;
1234
+ this.scrollAnimFrame = null;
1182
1235
  return;
1183
- this.scrollContainer.scrollTop += this.scrollDirection * 14;
1236
+ }
1184
1237
  this.scrollAnimFrame = requestAnimationFrame(tick);
1185
1238
  };
1186
1239
  this.scrollAnimFrame = requestAnimationFrame(tick);
@@ -1190,8 +1243,9 @@ class WorkspaceBuilder {
1190
1243
  cancelAnimationFrame(this.scrollAnimFrame);
1191
1244
  this.scrollAnimFrame = null;
1192
1245
  }
1193
- this.scrollDirection = 0;
1246
+ this.scrollVelocity = 0;
1194
1247
  this.scrollContainer = null;
1248
+ this.detachDocumentDragListeners();
1195
1249
  }
1196
1250
  endDragSession() {
1197
1251
  this.isDragging.set(false);
@@ -1266,6 +1320,26 @@ class WorkspaceBuilder {
1266
1320
  const shouldInsertAfter = event.clientY >= rect.top + rect.height / 2;
1267
1321
  return shouldInsertAfter ? itemIndex + 1 : itemIndex;
1268
1322
  }
1323
+ resolveGroupModuleDropIndex(event, area, groupId) {
1324
+ const group = this.findGroup(this.layout(), area, groupId);
1325
+ const count = group?.modules.length ?? 0;
1326
+ if (count === 0 || typeof document === 'undefined') {
1327
+ return count;
1328
+ }
1329
+ const y = event.clientY;
1330
+ for (let index = 0; index < count; index += 1) {
1331
+ const selector = `[data-group-id="${groupId}"][data-module-index="${index}"]`;
1332
+ const element = document.querySelector(selector);
1333
+ if (!element) {
1334
+ continue;
1335
+ }
1336
+ const rect = element.getBoundingClientRect();
1337
+ if (y < rect.top + rect.height / 2) {
1338
+ return index;
1339
+ }
1340
+ }
1341
+ return count;
1342
+ }
1269
1343
  getTopLevelItemElement(event, area, itemIndex) {
1270
1344
  const root = event.currentTarget ?? null;
1271
1345
  if (!root) {
@@ -1422,22 +1496,8 @@ class WorkspaceBuilder {
1422
1496
  order: item.order,
1423
1497
  };
1424
1498
  }
1425
- getSuccessMessage(key, fallbackTranslationKey) {
1426
- const apiMessage = this.facade.getSuccessMessage(key)?.trim();
1427
- if (apiMessage) {
1428
- return apiMessage;
1429
- }
1430
- return this.transloco.translate(fallbackTranslationKey);
1431
- }
1432
- getErrorMessage(key, fallbackTranslationKey) {
1433
- const apiMessage = this.facade.getErrorMessage(key)?.trim();
1434
- if (apiMessage) {
1435
- return apiMessage;
1436
- }
1437
- return this.transloco.translate(fallbackTranslationKey);
1438
- }
1439
1499
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
1440
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkspaceBuilder, isStandalone: true, selector: "mt-workspace-builder", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, autoSave: { classPropertyName: "autoSave", publicName: "autoSave", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n <ng-template #builderContent>\r\n @if (isLoadingLayout()) {\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto h-full min-h-0\">\r\n <div class=\"flex flex-col gap-5 flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n >\r\n <div\r\n class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n >\r\n @for (row of loadingSkeletonRows; track row) {\r\n <div\r\n class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n >\r\n <div class=\"flex items-center gap-3\">\r\n <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n <div class=\"grid flex-1 gap-2\">\r\n <p-skeleton width=\"75%\" height=\"1rem\" />\r\n <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n } @else if (layoutError(); as error) {\r\n <div\r\n class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"grid gap-1\">\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"load-error-title\") }}\r\n </div>\r\n <p class=\"m-0 text-sm text-red-600\">\r\n {{ error || t(\"load-error-description\") }}\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <mt-button\r\n [label]=\"t('retry')\"\r\n icon=\"arrow.refresh-cw-01\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"reloadLayout()\"\r\n />\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-5 h-full min-h-0\">\r\n @if (validationErrors().length > 0) {\r\n <div\r\n class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"mb-2 text-sm font-semibold\">\r\n {{ t(\"validation-title\") }}\r\n </div>\r\n <ul class=\"m-0 list-disc ps-4\">\r\n @for (error of validationErrors(); track error) {\r\n <li>{{ error }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n >\r\n <ng-template #cardEnd>\r\n <mt-button\r\n [label]=\"t('add-group')\"\r\n icon=\"general.plus\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"openCreateGroupDialog(area)\"\r\n />\r\n </ng-template>\r\n\r\n <div\r\n class=\"workspace-area-body grid h-full overflow-y-auto content-start gap-1 bg-surface-50/60 p-5 pt-2\"\r\n [class.drag-active]=\"isDragging()\"\r\n (dragover)=\"onAreaBodyDragOver($event)\"\r\n (dragleave)=\"onAreaBodyDragLeave($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, 0),\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n 0,\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n item of areaItems(area);\r\n track trackItem(item);\r\n let i = $index\r\n ) {\r\n @if (item.type === \"module\") {\r\n <div\r\n class=\"workspace-draggable-item flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, item, {\r\n type: 'area',\r\n area: area,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n item.name\r\n }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n (onDragEnd)=\"onDragEnd()\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n >\r\n <div\r\n class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n item.modules.length\r\n )\r\n \"\r\n >\r\n <mt-button\r\n class=\"expand-btn\"\r\n [icon]=\"\r\n isGroupExpanded(item.id)\r\n ? 'arrow.chevron-up'\r\n : 'arrow.chevron-down'\r\n \"\r\n severity=\"secondary\"\r\n variant=\"text\"\r\n (onClick)=\"toggleGroup(item.id)\"\r\n />\r\n <span\r\n class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n\r\n <span\r\n class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n >{{ item.name }}</span\r\n >\r\n <mt-button\r\n icon=\"general.edit-05\"\r\n [tooltip]=\"t('rename-group')\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"startRenameGroup(item)\"\r\n />\r\n\r\n <mt-button\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"t('delete-group')\"\r\n severity=\"danger\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"deleteGroup(item.id, $event)\"\r\n />\r\n </div>\r\n\r\n @if (isGroupExpanded(item.id)) {\r\n <div\r\n class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n item.modules.length\r\n )\r\n \"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0),\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n 0,\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n module of item.modules;\r\n track module.id;\r\n let j = $index\r\n ) {\r\n <div\r\n class=\"workspace-draggable-item workspace-group-module-item ms-3 flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [pDraggable]=\"dropScope\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"\r\n onNativeGroupModuleDrop(\r\n $event,\r\n area,\r\n item.id,\r\n j\r\n )\r\n \"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, module, {\r\n type: 'group',\r\n area: area,\r\n groupId: item.id,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n module.name\r\n }}</span>\r\n <mt-button\r\n icon=\"general.minus\"\r\n [tooltip]=\"t('remove')\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"\r\n removeModuleFromGroup(\r\n area,\r\n item.id,\r\n module.id\r\n )\r\n \"\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, j + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1),\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n j + 1,\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isAreaDropSlotDisabled(area, i + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, i + 1),\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n i + 1,\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n\r\n @if (areaItems(area).length === 0) {\r\n <div\r\n class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, 0)\"\r\n >\r\n {{ t(\"empty-area\") }}\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n @if (showHeader()) {\r\n <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n <ng-template #headerEnd>\r\n @if (!autoSave()) {\r\n <div class=\"flex items-center\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </mt-page>\r\n } @else {\r\n <div class=\"w-full h-full flex flex-col overflow-hidden p-5\">\r\n @if (!autoSave()) {\r\n <div class=\"mb-4 flex justify-end\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </div>\r\n }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i2.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1500
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkspaceBuilder, isStandalone: true, selector: "mt-workspace-builder", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, autoSave: { classPropertyName: "autoSave", publicName: "autoSave", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n <ng-template #builderContent>\r\n @if (isLoadingLayout()) {\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto h-full min-h-0\">\r\n <div class=\"flex flex-col gap-5 flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n >\r\n <div\r\n class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n >\r\n @for (row of loadingSkeletonRows; track row) {\r\n <div\r\n class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n >\r\n <div class=\"flex items-center gap-3\">\r\n <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n <div class=\"grid flex-1 gap-2\">\r\n <p-skeleton width=\"75%\" height=\"1rem\" />\r\n <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n } @else if (layoutError(); as error) {\r\n <div\r\n class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"grid gap-1\">\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"load-error-title\") }}\r\n </div>\r\n <p class=\"m-0 text-sm text-red-600\">\r\n {{ error || t(\"load-error-description\") }}\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <mt-button\r\n [label]=\"t('retry')\"\r\n icon=\"arrow.refresh-cw-01\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"reloadLayout()\"\r\n />\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-5 h-full min-h-0\">\r\n @if (validationErrors().length > 0) {\r\n <div\r\n class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"mb-2 text-sm font-semibold\">\r\n {{ t(\"validation-title\") }}\r\n </div>\r\n <ul class=\"m-0 list-disc ps-4\">\r\n @for (error of validationErrors(); track error) {\r\n <li>{{ error }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n >\r\n <ng-template #cardEnd>\r\n <mt-button\r\n [label]=\"t('add-group')\"\r\n icon=\"general.plus\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"openCreateGroupDialog(area)\"\r\n />\r\n </ng-template>\r\n\r\n <div\r\n class=\"workspace-area-body grid h-full overflow-y-auto content-start gap-1 bg-surface-50/60 p-5 pt-2\"\r\n [class.drag-active]=\"isDragging()\"\r\n (dragover)=\"onAreaBodyDragOver($event)\"\r\n (dragleave)=\"onAreaBodyDragLeave($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, 0),\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n 0,\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n item of areaItems(area);\r\n track trackItem(item);\r\n let i = $index\r\n ) {\r\n @if (item.type === \"module\") {\r\n <div\r\n class=\"workspace-draggable-item flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, item, {\r\n type: 'area',\r\n area: area,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n item.name\r\n }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n (onDragEnd)=\"onDragEnd()\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n >\r\n <div\r\n class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n item.modules.length\r\n )\r\n \"\r\n >\r\n <mt-button\r\n class=\"expand-btn\"\r\n [icon]=\"\r\n isGroupExpanded(item.id)\r\n ? 'arrow.chevron-up'\r\n : 'arrow.chevron-down'\r\n \"\r\n severity=\"secondary\"\r\n variant=\"text\"\r\n (onClick)=\"toggleGroup(item.id)\"\r\n />\r\n <span\r\n class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n\r\n <span\r\n class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n >{{ item.name }}</span\r\n >\r\n <mt-button\r\n icon=\"general.edit-05\"\r\n [tooltip]=\"t('rename-group')\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"startRenameGroup(item)\"\r\n />\r\n\r\n <mt-button\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"t('delete-group')\"\r\n severity=\"danger\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"deleteGroup(item.id, $event)\"\r\n />\r\n </div>\r\n\r\n @if (isGroupExpanded(item.id)) {\r\n <div\r\n class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onGroupContainerDrop($event, area, item.id)\"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0),\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n 0,\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n module of item.modules;\r\n track module.id;\r\n let j = $index\r\n ) {\r\n <div\r\n class=\"workspace-draggable-item workspace-group-module-item ms-3 flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-group-id]=\"item.id\"\r\n [attr.data-module-index]=\"j\"\r\n [pDraggable]=\"dropScope\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"\r\n onNativeGroupModuleDrop(\r\n $event,\r\n area,\r\n item.id,\r\n j\r\n )\r\n \"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, module, {\r\n type: 'group',\r\n area: area,\r\n groupId: item.id,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n module.name\r\n }}</span>\r\n <mt-button\r\n icon=\"general.minus\"\r\n [tooltip]=\"t('remove')\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"\r\n removeModuleFromGroup(\r\n area,\r\n item.id,\r\n module.id\r\n )\r\n \"\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, j + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1),\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n j + 1,\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isAreaDropSlotDisabled(area, i + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, i + 1),\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n i + 1,\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n\r\n @if (areaItems(area).length === 0) {\r\n <div\r\n class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, 0)\"\r\n >\r\n {{ t(\"empty-area\") }}\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n @if (showHeader()) {\r\n <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n <ng-template #headerEnd>\r\n @if (!autoSave()) {\r\n <div class=\"flex items-center\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </mt-page>\r\n } @else {\r\n <div class=\"w-full h-full flex flex-col overflow-hidden p-5\">\r\n @if (!autoSave()) {\r\n <div class=\"mb-4 flex justify-end\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </div>\r\n }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i2.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1441
1501
  }
1442
1502
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilder, decorators: [{
1443
1503
  type: Component,
@@ -1450,7 +1510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
1450
1510
  Page,
1451
1511
  Card,
1452
1512
  SkeletonModule,
1453
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n <ng-template #builderContent>\r\n @if (isLoadingLayout()) {\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto h-full min-h-0\">\r\n <div class=\"flex flex-col gap-5 flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n >\r\n <div\r\n class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n >\r\n @for (row of loadingSkeletonRows; track row) {\r\n <div\r\n class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n >\r\n <div class=\"flex items-center gap-3\">\r\n <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n <div class=\"grid flex-1 gap-2\">\r\n <p-skeleton width=\"75%\" height=\"1rem\" />\r\n <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n } @else if (layoutError(); as error) {\r\n <div\r\n class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"grid gap-1\">\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"load-error-title\") }}\r\n </div>\r\n <p class=\"m-0 text-sm text-red-600\">\r\n {{ error || t(\"load-error-description\") }}\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <mt-button\r\n [label]=\"t('retry')\"\r\n icon=\"arrow.refresh-cw-01\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"reloadLayout()\"\r\n />\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-5 h-full min-h-0\">\r\n @if (validationErrors().length > 0) {\r\n <div\r\n class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"mb-2 text-sm font-semibold\">\r\n {{ t(\"validation-title\") }}\r\n </div>\r\n <ul class=\"m-0 list-disc ps-4\">\r\n @for (error of validationErrors(); track error) {\r\n <li>{{ error }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n >\r\n <ng-template #cardEnd>\r\n <mt-button\r\n [label]=\"t('add-group')\"\r\n icon=\"general.plus\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"openCreateGroupDialog(area)\"\r\n />\r\n </ng-template>\r\n\r\n <div\r\n class=\"workspace-area-body grid h-full overflow-y-auto content-start gap-1 bg-surface-50/60 p-5 pt-2\"\r\n [class.drag-active]=\"isDragging()\"\r\n (dragover)=\"onAreaBodyDragOver($event)\"\r\n (dragleave)=\"onAreaBodyDragLeave($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, 0),\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n 0,\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n item of areaItems(area);\r\n track trackItem(item);\r\n let i = $index\r\n ) {\r\n @if (item.type === \"module\") {\r\n <div\r\n class=\"workspace-draggable-item flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, item, {\r\n type: 'area',\r\n area: area,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n item.name\r\n }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n (onDragEnd)=\"onDragEnd()\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n >\r\n <div\r\n class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n item.modules.length\r\n )\r\n \"\r\n >\r\n <mt-button\r\n class=\"expand-btn\"\r\n [icon]=\"\r\n isGroupExpanded(item.id)\r\n ? 'arrow.chevron-up'\r\n : 'arrow.chevron-down'\r\n \"\r\n severity=\"secondary\"\r\n variant=\"text\"\r\n (onClick)=\"toggleGroup(item.id)\"\r\n />\r\n <span\r\n class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n\r\n <span\r\n class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n >{{ item.name }}</span\r\n >\r\n <mt-button\r\n icon=\"general.edit-05\"\r\n [tooltip]=\"t('rename-group')\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"startRenameGroup(item)\"\r\n />\r\n\r\n <mt-button\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"t('delete-group')\"\r\n severity=\"danger\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"deleteGroup(item.id, $event)\"\r\n />\r\n </div>\r\n\r\n @if (isGroupExpanded(item.id)) {\r\n <div\r\n class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n item.modules.length\r\n )\r\n \"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0),\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n 0,\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n module of item.modules;\r\n track module.id;\r\n let j = $index\r\n ) {\r\n <div\r\n class=\"workspace-draggable-item workspace-group-module-item ms-3 flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [pDraggable]=\"dropScope\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"\r\n onNativeGroupModuleDrop(\r\n $event,\r\n area,\r\n item.id,\r\n j\r\n )\r\n \"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, module, {\r\n type: 'group',\r\n area: area,\r\n groupId: item.id,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n module.name\r\n }}</span>\r\n <mt-button\r\n icon=\"general.minus\"\r\n [tooltip]=\"t('remove')\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"\r\n removeModuleFromGroup(\r\n area,\r\n item.id,\r\n module.id\r\n )\r\n \"\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, j + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1),\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n j + 1,\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isAreaDropSlotDisabled(area, i + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, i + 1),\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n i + 1,\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n\r\n @if (areaItems(area).length === 0) {\r\n <div\r\n class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, 0)\"\r\n >\r\n {{ t(\"empty-area\") }}\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n @if (showHeader()) {\r\n <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n <ng-template #headerEnd>\r\n @if (!autoSave()) {\r\n <div class=\"flex items-center\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </mt-page>\r\n } @else {\r\n <div class=\"w-full h-full flex flex-col overflow-hidden p-5\">\r\n @if (!autoSave()) {\r\n <div class=\"mb-4 flex justify-end\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </div>\r\n }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"] }]
1513
+ ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n <ng-template #builderContent>\r\n @if (isLoadingLayout()) {\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto h-full min-h-0\">\r\n <div class=\"flex flex-col gap-5 flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n >\r\n <div\r\n class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n >\r\n @for (row of loadingSkeletonRows; track row) {\r\n <div\r\n class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n >\r\n <div class=\"flex items-center gap-3\">\r\n <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n <div class=\"grid flex-1 gap-2\">\r\n <p-skeleton width=\"75%\" height=\"1rem\" />\r\n <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n } @else if (layoutError(); as error) {\r\n <div\r\n class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"grid gap-1\">\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"load-error-title\") }}\r\n </div>\r\n <p class=\"m-0 text-sm text-red-600\">\r\n {{ error || t(\"load-error-description\") }}\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <mt-button\r\n [label]=\"t('retry')\"\r\n icon=\"arrow.refresh-cw-01\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"reloadLayout()\"\r\n />\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col gap-5 h-full min-h-0\">\r\n @if (validationErrors().length > 0) {\r\n <div\r\n class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n >\r\n <div class=\"mb-2 text-sm font-semibold\">\r\n {{ t(\"validation-title\") }}\r\n </div>\r\n <ul class=\"m-0 list-disc ps-4\">\r\n @for (error of validationErrors(); track error) {\r\n <li>{{ error }}</li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <div class=\"flex flex-col gap-5 w-1/2 mx-auto flex-1 min-h-0\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"flex-1 min-h-0 overflow-hidden bg-surface-0\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n >\r\n <ng-template #cardEnd>\r\n <mt-button\r\n [label]=\"t('add-group')\"\r\n icon=\"general.plus\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"openCreateGroupDialog(area)\"\r\n />\r\n </ng-template>\r\n\r\n <div\r\n class=\"workspace-area-body grid h-full overflow-y-auto content-start gap-1 bg-surface-50/60 p-5 pt-2\"\r\n [class.drag-active]=\"isDragging()\"\r\n (dragover)=\"onAreaBodyDragOver($event)\"\r\n (dragleave)=\"onAreaBodyDragLeave($event)\"\r\n (drop)=\"onNativeAreaDrop($event, area)\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, 0),\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n 0,\r\n isAreaDropSlotDisabled(area, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n item of areaItems(area);\r\n track trackItem(item);\r\n let i = $index\r\n ) {\r\n @if (item.type === \"module\") {\r\n <div\r\n class=\"workspace-draggable-item flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, item, {\r\n type: 'area',\r\n area: area,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n item.name\r\n }}</span>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-area]=\"area\"\r\n [attr.data-item-index]=\"i\"\r\n [pDraggable]=\"dropScope\"\r\n (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n (onDragEnd)=\"onDragEnd()\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n >\r\n <div\r\n class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n item.modules.length\r\n )\r\n \"\r\n >\r\n <mt-button\r\n class=\"expand-btn\"\r\n [icon]=\"\r\n isGroupExpanded(item.id)\r\n ? 'arrow.chevron-up'\r\n : 'arrow.chevron-down'\r\n \"\r\n severity=\"secondary\"\r\n variant=\"text\"\r\n (onClick)=\"toggleGroup(item.id)\"\r\n />\r\n <span\r\n class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n\r\n <span\r\n class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n >{{ item.name }}</span\r\n >\r\n <mt-button\r\n icon=\"general.edit-05\"\r\n [tooltip]=\"t('rename-group')\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"startRenameGroup(item)\"\r\n />\r\n\r\n <mt-button\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"t('delete-group')\"\r\n severity=\"danger\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"deleteGroup(item.id, $event)\"\r\n />\r\n </div>\r\n\r\n @if (isGroupExpanded(item.id)) {\r\n <div\r\n class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onGroupContainerDrop($event, area, item.id)\"\r\n >\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, 0)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0),\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, 0)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n 0,\r\n isGroupDropSlotDisabled(area, item.id, 0)\r\n )\r\n \"\r\n ></div>\r\n\r\n @for (\r\n module of item.modules;\r\n track module.id;\r\n let j = $index\r\n ) {\r\n <div\r\n class=\"workspace-draggable-item workspace-group-module-item ms-3 flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n [attr.data-group-id]=\"item.id\"\r\n [attr.data-module-index]=\"j\"\r\n [pDraggable]=\"dropScope\"\r\n (dragover)=\"allowNativeDrop($event)\"\r\n (drop)=\"\r\n onNativeGroupModuleDrop(\r\n $event,\r\n area,\r\n item.id,\r\n j\r\n )\r\n \"\r\n (onDragStart)=\"\r\n onModuleDragStart($event, module, {\r\n type: 'group',\r\n area: area,\r\n groupId: item.id,\r\n })\r\n \"\r\n (onDragEnd)=\"onDragEnd()\"\r\n >\r\n <span\r\n class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n draggable=\"false\"\r\n >\r\n <mt-icon\r\n class=\"pointer-events-none text-xl text-primary\"\r\n icon=\"general.menu-05\"\r\n />\r\n </span>\r\n <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n module.name\r\n }}</span>\r\n <mt-button\r\n icon=\"general.minus\"\r\n [tooltip]=\"t('remove')\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n (onClick)=\"\r\n removeModuleFromGroup(\r\n area,\r\n item.id,\r\n module.id\r\n )\r\n \"\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() ===\r\n groupDropSlotKey(area, item.id, j + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1),\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave(\r\n $event,\r\n groupDropSlotKey(area, item.id, j + 1)\r\n )\r\n \"\r\n (onDrop)=\"\r\n onDropToGroup(\r\n $event,\r\n area,\r\n item.id,\r\n j + 1,\r\n isGroupDropSlotDisabled(area, item.id, j + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"drop-slot\"\r\n [class.drop-slot-active]=\"\r\n activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n \"\r\n [class.drop-slot-disabled]=\"\r\n isAreaDropSlotDisabled(area, i + 1)\r\n \"\r\n [pDroppable]=\"dropScope\"\r\n (dragover)=\"\r\n onDropSlotDragOver(\r\n $event,\r\n areaDropSlotKey(area, i + 1),\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n (dragleave)=\"\r\n onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n \"\r\n (onDrop)=\"\r\n onDropToArea(\r\n $event,\r\n area,\r\n i + 1,\r\n isAreaDropSlotDisabled(area, i + 1)\r\n )\r\n \"\r\n ></div>\r\n }\r\n\r\n @if (areaItems(area).length === 0) {\r\n <div\r\n class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n [pDroppable]=\"dropScope\"\r\n (onDrop)=\"onDropToArea($event, area, 0)\"\r\n >\r\n {{ t(\"empty-area\") }}\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n @if (showHeader()) {\r\n <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n <ng-template #headerEnd>\r\n @if (!autoSave()) {\r\n <div class=\"flex items-center\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </mt-page>\r\n } @else {\r\n <div class=\"w-full h-full flex flex-col overflow-hidden p-5\">\r\n @if (!autoSave()) {\r\n <div class=\"mb-4 flex justify-end\">\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.save-02\"\r\n severity=\"primary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [loading]=\"isSavingLayout()\"\r\n [disabled]=\"\r\n isLoadingLayout() ||\r\n !!layoutError() ||\r\n isSavingLayout() ||\r\n validationErrors().length > 0\r\n \"\r\n (onClick)=\"onSaveClick()\"\r\n />\r\n </div>\r\n }\r\n\r\n <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n </div>\r\n }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"] }]
1454
1514
  }], ctorParameters: () => [], propDecorators: { levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], autoSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSave", required: false }] }] } });
1455
1515
 
1456
1516
  /**