@masterteam/workspace-builder 0.0.12 → 0.0.14
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! tailwindcss v4.
|
|
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-\[calc\(100svh-10rem\)\]{height:calc(100svh - 10rem)}.h-full{height:100%}.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}
|
|
@@ -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
|
-
|
|
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;
|
|
@@ -1014,10 +1012,9 @@ class WorkspaceBuilder {
|
|
|
1014
1012
|
executeDeleteGroup(groupId) {
|
|
1015
1013
|
this.facade.deleteGroup(groupId).subscribe({
|
|
1016
1014
|
next: () => {
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.DeleteGroup, 'workspace-builder.group-delete-error'));
|
|
1015
|
+
if (this.autoSave()) {
|
|
1016
|
+
this.triggerAutoSave();
|
|
1017
|
+
}
|
|
1021
1018
|
},
|
|
1022
1019
|
});
|
|
1023
1020
|
}
|
|
@@ -1139,48 +1136,97 @@ class WorkspaceBuilder {
|
|
|
1139
1136
|
this.isDragging.set(true);
|
|
1140
1137
|
this.activeDropSlotKey.set(null);
|
|
1141
1138
|
this.clearDragCleanupTimer();
|
|
1139
|
+
this.attachDocumentDragListeners();
|
|
1142
1140
|
}
|
|
1143
1141
|
onAreaBodyDragOver(event) {
|
|
1144
1142
|
this.allowNativeDrop(event);
|
|
1145
|
-
this.
|
|
1143
|
+
this.lastDragClientY = event.clientY;
|
|
1144
|
+
this.scrollContainer = event.currentTarget;
|
|
1145
|
+
this.evaluateEdgeScroll();
|
|
1146
1146
|
}
|
|
1147
1147
|
onAreaBodyDragLeave(event) {
|
|
1148
1148
|
const container = event.currentTarget;
|
|
1149
1149
|
const related = event.relatedTarget;
|
|
1150
1150
|
if (!related || !container?.contains(related)) {
|
|
1151
|
-
this.
|
|
1151
|
+
this.scrollVelocity = 0;
|
|
1152
1152
|
}
|
|
1153
1153
|
}
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1154
|
+
attachDocumentDragListeners() {
|
|
1155
|
+
if (this.documentDragOverHandler || typeof document === 'undefined') {
|
|
1156
|
+
return;
|
|
1157
|
+
}
|
|
1158
|
+
this.documentDragOverHandler = (event) => {
|
|
1159
|
+
this.lastDragClientY = event.clientY;
|
|
1160
|
+
this.evaluateEdgeScroll();
|
|
1161
|
+
};
|
|
1162
|
+
this.documentDragEndHandler = () => this.stopEdgeScroll();
|
|
1163
|
+
document.addEventListener('dragover', this.documentDragOverHandler, {
|
|
1164
|
+
passive: true,
|
|
1165
|
+
});
|
|
1166
|
+
document.addEventListener('dragend', this.documentDragEndHandler);
|
|
1167
|
+
document.addEventListener('drop', this.documentDragEndHandler);
|
|
1168
|
+
}
|
|
1169
|
+
detachDocumentDragListeners() {
|
|
1170
|
+
if (typeof document === 'undefined') {
|
|
1171
|
+
return;
|
|
1172
|
+
}
|
|
1173
|
+
if (this.documentDragOverHandler) {
|
|
1174
|
+
document.removeEventListener('dragover', this.documentDragOverHandler);
|
|
1175
|
+
this.documentDragOverHandler = null;
|
|
1176
|
+
}
|
|
1177
|
+
if (this.documentDragEndHandler) {
|
|
1178
|
+
document.removeEventListener('dragend', this.documentDragEndHandler);
|
|
1179
|
+
document.removeEventListener('drop', this.documentDragEndHandler);
|
|
1180
|
+
this.documentDragEndHandler = null;
|
|
1181
|
+
}
|
|
1182
|
+
}
|
|
1183
|
+
evaluateEdgeScroll() {
|
|
1184
|
+
const container = this.scrollContainer;
|
|
1185
|
+
if (!container) {
|
|
1186
|
+
this.scrollVelocity = 0;
|
|
1157
1187
|
return;
|
|
1188
|
+
}
|
|
1158
1189
|
const rect = container.getBoundingClientRect();
|
|
1159
|
-
const y =
|
|
1160
|
-
const zone =
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1190
|
+
const y = this.lastDragClientY;
|
|
1191
|
+
const zone = this.EDGE_SCROLL_ZONE;
|
|
1192
|
+
const max = this.EDGE_SCROLL_MAX_SPEED;
|
|
1193
|
+
const canScrollUp = container.scrollTop > 0;
|
|
1194
|
+
const canScrollDown = container.scrollTop < container.scrollHeight - container.clientHeight;
|
|
1195
|
+
let velocity = 0;
|
|
1196
|
+
const topDistance = y - rect.top;
|
|
1197
|
+
const bottomDistance = rect.bottom - y;
|
|
1198
|
+
if (topDistance >= 0 && topDistance < zone && canScrollUp) {
|
|
1199
|
+
const ratio = 1 - topDistance / zone;
|
|
1200
|
+
velocity = -Math.max(2, Math.round(ratio * max));
|
|
1201
|
+
}
|
|
1202
|
+
else if (bottomDistance >= 0 && bottomDistance < zone && canScrollDown) {
|
|
1203
|
+
const ratio = 1 - bottomDistance / zone;
|
|
1204
|
+
velocity = Math.max(2, Math.round(ratio * max));
|
|
1205
|
+
}
|
|
1206
|
+
if (velocity === 0) {
|
|
1207
|
+
this.scrollVelocity = 0;
|
|
1208
|
+
return;
|
|
1209
|
+
}
|
|
1210
|
+
this.scrollVelocity = velocity;
|
|
1211
|
+
if (this.scrollAnimFrame === null) {
|
|
1212
|
+
this.runEdgeScroll();
|
|
1177
1213
|
}
|
|
1178
1214
|
}
|
|
1179
1215
|
runEdgeScroll() {
|
|
1180
1216
|
const tick = () => {
|
|
1181
|
-
|
|
1217
|
+
const container = this.scrollContainer;
|
|
1218
|
+
if (!container || this.scrollVelocity === 0) {
|
|
1219
|
+
this.scrollAnimFrame = null;
|
|
1182
1220
|
return;
|
|
1183
|
-
|
|
1221
|
+
}
|
|
1222
|
+
const before = container.scrollTop;
|
|
1223
|
+
container.scrollTop += this.scrollVelocity;
|
|
1224
|
+
const moved = container.scrollTop !== before;
|
|
1225
|
+
if (!moved) {
|
|
1226
|
+
this.scrollVelocity = 0;
|
|
1227
|
+
this.scrollAnimFrame = null;
|
|
1228
|
+
return;
|
|
1229
|
+
}
|
|
1184
1230
|
this.scrollAnimFrame = requestAnimationFrame(tick);
|
|
1185
1231
|
};
|
|
1186
1232
|
this.scrollAnimFrame = requestAnimationFrame(tick);
|
|
@@ -1190,8 +1236,9 @@ class WorkspaceBuilder {
|
|
|
1190
1236
|
cancelAnimationFrame(this.scrollAnimFrame);
|
|
1191
1237
|
this.scrollAnimFrame = null;
|
|
1192
1238
|
}
|
|
1193
|
-
this.
|
|
1239
|
+
this.scrollVelocity = 0;
|
|
1194
1240
|
this.scrollContainer = null;
|
|
1241
|
+
this.detachDocumentDragListeners();
|
|
1195
1242
|
}
|
|
1196
1243
|
endDragSession() {
|
|
1197
1244
|
this.isDragging.set(false);
|
|
@@ -1422,22 +1469,8 @@ class WorkspaceBuilder {
|
|
|
1422
1469
|
order: item.order,
|
|
1423
1470
|
};
|
|
1424
1471
|
}
|
|
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
1472
|
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=\"grid gap-5 w-1/2 mx-auto\">\r\n <div class=\"grid gap-5\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"h-[calc(100svh-10rem)] 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=\"grid gap-5\">\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=\"grid gap-5 w-1/2 mx-auto\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"h-[calc(100svh-10rem)] 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 overflow-y-auto 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 });
|
|
1473
|
+
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 });
|
|
1441
1474
|
}
|
|
1442
1475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilder, decorators: [{
|
|
1443
1476
|
type: Component,
|
|
@@ -1450,7 +1483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1450
1483
|
Page,
|
|
1451
1484
|
Card,
|
|
1452
1485
|
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=\"grid gap-5 w-1/2 mx-auto\">\r\n <div class=\"grid gap-5\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"h-[calc(100svh-10rem)] 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=\"grid gap-5\">\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=\"grid gap-5 w-1/2 mx-auto\">\r\n @for (area of areas; track area) {\r\n <mt-card\r\n [title]=\"t(area)\"\r\n [paddingless]=\"true\"\r\n class=\"h-[calc(100svh-10rem)] 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 overflow-y-auto 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"] }]
|
|
1486
|
+
], 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"] }]
|
|
1454
1487
|
}], 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
1488
|
|
|
1456
1489
|
/**
|