@masterteam/document-library 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/document-library.css +1 -1
  2. package/fesm2022/masterteam-document-library.mjs +7 -5
  3. package/fesm2022/masterteam-document-library.mjs.map +1 -1
  4. package/package.json +3 -3
package/assets/document-library.css CHANGED
@@ -1,2 +1,2 @@
1
- /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
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-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-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);--color-emerald-600:oklch(59.6% .145 163.225);--color-slate-400:oklch(70.4% .04 256.788);--spacing:.25rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--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{.invisible{visibility:hidden}.visible{visibility:visible}.start{inset-inline-start:var(--spacing)}.col-span-full{grid-column:1/-1}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-px{margin-top:1px}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing) * 2)}.h-7{height:calc(var(--spacing) * 7)}.h-full{height:100%}.max-h-\[28rem\]{max-height:28rem}.min-h-\[16rem\]{min-height:16rem}.min-h-\[42rem\]{min-height:42rem}.\!w-\[28rem\]{width:28rem!important}.\!w-\[34rem\]{width:34rem!important}.\!w-\[60rem\]{width:60rem!important}.w-7{width:calc(var(--spacing) * 7)}.w-full{width:100%}.max-w-md{max-width:var(--container-md)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.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-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-red-200{border-color:var(--color-red-200)}.border-surface{border-color:var(--p-content-border-color)}.bg-\[color-mix\(in_srgb\,var\(--p-primary-color\)_14\%\,white\)\]{background-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--p-primary-color\)_14\%\,white\)\]{background-color:color-mix(in srgb,var(--p-primary-color) 14%,white)}}.bg-primary{background-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.bg-primary{background-color:color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-transparent{background-color:#0000}.p-0{padding:calc(var(--spacing) * 0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.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-5{padding-block:calc(var(--spacing) * 5)}.py-10{padding-block:calc(var(--spacing) * 10)}.pt-3{padding-top:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-left{text-align:left}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.85rem\]{font-size:.85rem}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-\[color-mix\(in_srgb\,var\(--p-primary-color\)_82\%\,black\)\]{color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.text-\[color-mix\(in_srgb\,var\(--p-primary-color\)_82\%\,black\)\]{color:color-mix(in srgb,var(--p-primary-color) 82%,black)}}.text-color{color:var(--p-text-color)}.text-emerald-600{color:var(--color-emerald-600)}.text-muted-color{color:var(--p-text-muted-color)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-slate-400{color:var(--color-slate-400)}.uppercase{text-transform:uppercase}.opacity-45{opacity:.45}.shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--p-primary-color\)_20\%\,transparent\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--p-primary-color))}@supports (color:color-mix(in lab, red, red)){.shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--p-primary-color\)_20\%\,transparent\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,color-mix(in srgb,var(--p-primary-color) 20%,transparent))}}.shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--p-primary-color\)_20\%\,transparent\)\]{box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background-color\,color\,box-shadow\]{transition-property:background-color,color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.hover\:bg-\[color-mix\(in_srgb\,var\(--p-primary-color\)_8\%\,transparent\)\]:hover{background-color:var(--p-primary-color)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[color-mix\(in_srgb\,var\(--p-primary-color\)_8\%\,transparent\)\]:hover{background-color:color-mix(in srgb,var(--p-primary-color) 8%,transparent)}}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-55:disabled{opacity:.55}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-\[19rem_minmax\(0\,1fr\)\]{grid-template-columns:19rem minmax(0,1fr)}.xl\:grid-cols-\[minmax\(0\,1fr\)_18rem\]{grid-template-columns:minmax(0,1fr) 18rem}}.\[\&_\.p-avatar\]\:h-8 .p-avatar{height:calc(var(--spacing) * 8)}.\[\&_\.p-avatar\]\:h-9 .p-avatar{height:calc(var(--spacing) * 9)}.\[\&_\.p-avatar\]\:w-8 .p-avatar{width:calc(var(--spacing) * 8)}.\[\&_\.p-avatar\]\:w-9 .p-avatar{width:calc(var(--spacing) * 9)}.\[\&_\.p-avatar\]\:text-sm .p-avatar{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\[\&_\.p-avatar\]\:text-xs .p-avatar{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@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-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
package/fesm2022/masterteam-document-library.mjs CHANGED
@@ -333,7 +333,9 @@ class DocumentLibraryUploadDialog {
333
333
  });
334
334
  selectedFolderName = computed(() => {
335
335
  const firstItem = this.folderItems()[0];
336
- return firstItem ? this.getRelativePathSegments(firstItem.relativePath)[0] ?? '' : '';
336
+ return firstItem
337
+ ? (this.getRelativePathSegments(firstItem.relativePath)[0] ?? '')
338
+ : '';
337
339
  }, ...(ngDevMode ? [{ debugName: "selectedFolderName" }] : []));
338
340
  hasTargetRootFolderName = computed(() => !!this.targetRootFolderName().trim(), ...(ngDevMode ? [{ debugName: "hasTargetRootFolderName" }] : []));
339
341
  selectedCount = computed(() => this.folderItems().filter((item) => item.enabled).length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
@@ -398,7 +400,7 @@ class DocumentLibraryUploadDialog {
398
400
  .sort((left, right) => left.relativePath.localeCompare(right.relativePath));
399
401
  this.folderItems.set(nextItems);
400
402
  this.targetRootFolderName.set(nextItems[0]
401
- ? this.getRelativePathSegments(nextItems[0].relativePath)[0] ?? ''
403
+ ? (this.getRelativePathSegments(nextItems[0].relativePath)[0] ?? '')
402
404
  : '');
403
405
  }
404
406
  toggleFolderItem(itemId, enabled) {
@@ -599,7 +601,7 @@ class DocumentLibraryUploadDialog {
599
601
  return this.transloco.translate(`document-library.modals.upload.${key}`, params);
600
602
  }
601
603
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryUploadDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
602
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibraryUploadDialog, isStandalone: true, selector: "mt-document-library-upload-dialog", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, folderLabel: { classPropertyName: "folderLabel", publicName: "folderLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadEndPoint: { classPropertyName: "uploadEndPoint", publicName: "uploadEndPoint", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library.modals.upload'\">\r\n <div [class]=\"[modal.contentClass, 'flex', 'flex-col', 'gap-4', 'p-4']\">\r\n @if (mode() === \"file\") {\r\n <div class=\"text-sm text-muted-color\">\r\n {{ t(\"fileIntro\") }}\r\n <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n >.\r\n </div>\r\n\r\n <mt-upload-field\r\n [ngModel]=\"uploadedFile()\"\r\n (ngModelChange)=\"uploadedFile.set($event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [shape]=\"'card'\"\r\n [title]=\"t('uploadFileTitle')\"\r\n [description]=\"t('uploadFileDescription')\"\r\n [endPoint]=\"uploadEndPoint()\"\r\n [context]=\"requestContext()\"\r\n />\r\n } @else {\r\n <input\r\n #folderInput\r\n type=\"file\"\r\n directory\r\n webkitdirectory\r\n multiple\r\n class=\"hidden\"\r\n (change)=\"onFolderSelect($event)\"\r\n />\r\n\r\n <div class=\"rounded-2xl border border-surface bg-surface/30 p-4\">\r\n <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n <div class=\"space-y-1\">\r\n <div class=\"text-sm font-semibold\">{{ t(\"folderTitle\") }}</div>\r\n <div class=\"text-sm text-muted-color\">\r\n {{ t(\"folderDescription\") }}\r\n <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n >.\r\n </div>\r\n @if (selectedFolderName()) {\r\n <div class=\"text-sm text-color\">\r\n {{ t(\"selectedFolder\") }}:\r\n <span class=\"font-medium\">{{ selectedFolderName() }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <mt-button\r\n [label]=\"t('selectFolder')\"\r\n icon=\"file.folder-plus\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"openFolderPicker(folderInput)\"\r\n />\r\n\r\n @if (folderItems().length > 0) {\r\n <mt-button\r\n [label]=\"t('selectAll')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"setAllFolderItems(true)\"\r\n />\r\n <mt-button\r\n [label]=\"t('clearAll')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"setAllFolderItems(false)\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (folderItems().length > 0) {\r\n <div\r\n class=\"grid max-h-[28rem] content-start grid-cols-1 gap-3 overflow-y-auto rounded-2xl border border-surface bg-content p-3 md:grid-cols-2 xl:grid-cols-4\"\r\n >\r\n <div\r\n class=\"col-span-full flex flex-wrap items-center justify-between gap-2 px-1\"\r\n >\r\n <div class=\"text-sm text-muted-color\">\r\n {{\r\n t(\"selectionSummary\", {\r\n selected: selectedCount(),\r\n total: folderItems().length,\r\n })\r\n }}\r\n </div>\r\n <div\r\n class=\"flex flex-wrap items-center gap-3 text-xs text-muted-color\"\r\n >\r\n <span>{{ t(\"uploadedCount\", { count: uploadedCount() }) }}</span>\r\n <span>{{ t(\"failedCount\", { count: failedCount() }) }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-span-full px-1\">\r\n <mt-text-field\r\n [ngModel]=\"targetRootFolderName()\"\r\n (ngModelChange)=\"targetRootFolderName.set($event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [label]=\"t('targetFolderName')\"\r\n [placeholder]=\"t('targetFolderPlaceholder')\"\r\n [disabled]=\"submitting()\"\r\n />\r\n </div>\r\n\r\n @for (item of folderItems(); track item.id) {\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n size=\"small\"\r\n [icon]=\"getFolderItemIcon(item)\"\r\n [label]=\"item.file.name\"\r\n [descriptionCard]=\"item.pathLabel\"\r\n [readonly]=\"item.uploading\"\r\n [ngModel]=\"item.enabled\"\r\n (ngModelChange)=\"toggleFolderItem(item.id, $event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n <div\r\n class=\"mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-surface pt-3 text-xs\"\r\n >\r\n <div class=\"text-muted-color\">\r\n {{ formatFileSize(item.file.size) }}\r\n </div>\r\n <div [class]=\"getFolderItemStatusClass(item)\">\r\n {{ getFolderItemStatus(item) }}\r\n </div>\r\n </div>\r\n\r\n @if (item.uploading) {\r\n <div class=\"mt-2 h-2 overflow-hidden rounded-full bg-surface\">\r\n <div\r\n class=\"h-full rounded-full bg-primary transition-all duration-200\"\r\n [style.width.%]=\"item.progress\"\r\n ></div>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n }\r\n </div>\r\n } @else {\r\n <div\r\n class=\"flex min-h-[16rem] items-center justify-center rounded-2xl border border-dashed border-surface bg-surface/20 p-6 text-center text-sm text-muted-color\"\r\n >\r\n {{ t(\"emptyFolderSelection\") }}\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div\r\n [class]=\"[\r\n modal.footerClass,\r\n 'flex',\r\n 'items-center',\r\n 'justify-end',\r\n 'gap-2',\r\n ]\"\r\n >\r\n <mt-button\r\n [label]=\"t('cancel')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"cancel()\"\r\n />\r\n\r\n <mt-button\r\n [label]=\"primaryActionLabel()\"\r\n icon=\"general.upload-01\"\r\n [loading]=\"submitting()\"\r\n [disabled]=\"\r\n mode() === 'file'\r\n ? !uploadedFile()?.id && !uploadedFile()?.name\r\n : !selectedCount() ||\r\n !hasTargetRootFolderName() ||\r\n (pendingCount() === 0 && !canCloseWithUploads())\r\n \"\r\n (onClick)=\"submit()\"\r\n />\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
604
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibraryUploadDialog, isStandalone: true, selector: "mt-document-library-upload-dialog", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, folderLabel: { classPropertyName: "folderLabel", publicName: "folderLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadEndPoint: { classPropertyName: "uploadEndPoint", publicName: "uploadEndPoint", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library.modals.upload'\">\r\n <div [class]=\"[modal.contentClass, 'flex', 'flex-col', 'gap-4', 'p-4']\">\r\n @if (mode() === \"file\") {\r\n <div class=\"text-sm text-muted-color\">\r\n {{ t(\"fileIntro\") }}\r\n <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n >.\r\n </div>\r\n\r\n <mt-upload-field\r\n [ngModel]=\"uploadedFile()\"\r\n (ngModelChange)=\"uploadedFile.set($event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [shape]=\"'card'\"\r\n [title]=\"t('uploadFileTitle')\"\r\n [description]=\"t('uploadFileDescription')\"\r\n [endPoint]=\"uploadEndPoint()\"\r\n [context]=\"requestContext()\"\r\n />\r\n } @else {\r\n <input\r\n #folderInput\r\n type=\"file\"\r\n directory\r\n webkitdirectory\r\n multiple\r\n class=\"hidden\"\r\n (change)=\"onFolderSelect($event)\"\r\n />\r\n\r\n <div class=\"rounded-2xl border border-surface bg-surface/30 p-4\">\r\n <div class=\"flex flex-wrap items-start justify-between gap-3\">\r\n <div class=\"space-y-1\">\r\n <div class=\"text-sm font-semibold\">{{ t(\"folderTitle\") }}</div>\r\n <div class=\"text-sm text-muted-color\">\r\n {{ t(\"folderDescription\") }}\r\n <span class=\"font-medium text-color\">{{ folderLabel() }}</span\r\n >.\r\n </div>\r\n @if (selectedFolderName()) {\r\n <div class=\"text-sm text-color\">\r\n {{ t(\"selectedFolder\") }}:\r\n <span class=\"font-medium\">{{ selectedFolderName() }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n <mt-button\r\n [label]=\"t('selectFolder')\"\r\n icon=\"file.folder-plus\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"openFolderPicker(folderInput)\"\r\n />\r\n\r\n @if (folderItems().length > 0) {\r\n <mt-button\r\n [label]=\"t('selectAll')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"setAllFolderItems(true)\"\r\n />\r\n <mt-button\r\n [label]=\"t('clearAll')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"setAllFolderItems(false)\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (folderItems().length > 0) {\r\n <div\r\n class=\"grid max-h-[28rem] content-start grid-cols-1 gap-3 overflow-y-auto rounded-2xl border border-surface bg-content p-3 md:grid-cols-2 xl:grid-cols-4\"\r\n >\r\n <div\r\n class=\"col-span-full flex flex-wrap items-center justify-between gap-2 px-1\"\r\n >\r\n <div class=\"text-sm text-muted-color\">\r\n {{\r\n t(\"selectionSummary\", {\r\n selected: selectedCount(),\r\n total: folderItems().length,\r\n })\r\n }}\r\n </div>\r\n <div\r\n class=\"flex flex-wrap items-center gap-3 text-xs text-muted-color\"\r\n >\r\n <span>{{ t(\"uploadedCount\", { count: uploadedCount() }) }}</span>\r\n <span>{{ t(\"failedCount\", { count: failedCount() }) }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-span-full px-1\">\r\n <mt-text-field\r\n [ngModel]=\"targetRootFolderName()\"\r\n (ngModelChange)=\"targetRootFolderName.set($event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [label]=\"t('targetFolderName')\"\r\n [placeholder]=\"t('targetFolderPlaceholder')\"\r\n [disabled]=\"submitting()\"\r\n />\r\n </div>\r\n\r\n @for (item of folderItems(); track item.id) {\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n size=\"small\"\r\n [icon]=\"getFolderItemIcon(item)\"\r\n [label]=\"item.file.name\"\r\n [descriptionCard]=\"item.pathLabel\"\r\n [readonly]=\"item.uploading\"\r\n [ngModel]=\"item.enabled\"\r\n (ngModelChange)=\"toggleFolderItem(item.id, $event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n <div\r\n class=\"mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-surface pt-3 text-xs\"\r\n >\r\n <div class=\"text-muted-color\">\r\n {{ formatFileSize(item.file.size) }}\r\n </div>\r\n <div [class]=\"getFolderItemStatusClass(item)\">\r\n {{ getFolderItemStatus(item) }}\r\n </div>\r\n </div>\r\n\r\n @if (item.uploading) {\r\n <div class=\"mt-2 h-2 overflow-hidden rounded-full bg-surface\">\r\n <div\r\n class=\"h-full rounded-full bg-primary transition-all duration-200\"\r\n [style.width.%]=\"item.progress\"\r\n ></div>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n }\r\n </div>\r\n } @else {\r\n <div\r\n class=\"flex min-h-[16rem] items-center justify-center rounded-2xl border border-dashed border-surface bg-surface/20 p-6 text-center text-sm text-muted-color\"\r\n >\r\n {{ t(\"emptyFolderSelection\") }}\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div\r\n [class]=\"[\r\n modal.footerClass,\r\n 'flex',\r\n 'items-center',\r\n 'justify-end',\r\n 'gap-2',\r\n ]\"\r\n >\r\n <mt-button\r\n [label]=\"t('cancel')\"\r\n variant=\"outlined\"\r\n [disabled]=\"submitting()\"\r\n (onClick)=\"cancel()\"\r\n />\r\n\r\n <mt-button\r\n [label]=\"primaryActionLabel()\"\r\n icon=\"general.upload-01\"\r\n [loading]=\"submitting()\"\r\n [disabled]=\"\r\n mode() === 'file'\r\n ? !uploadedFile()?.id && !uploadedFile()?.name\r\n : !selectedCount() ||\r\n !hasTargetRootFolderName() ||\r\n (pendingCount() === 0 && !canCloseWithUploads())\r\n \"\r\n (onClick)=\"submit()\"\r\n />\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
603
605
  }
604
606
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibraryUploadDialog, decorators: [{
605
607
  type: Component,
@@ -1828,7 +1830,7 @@ class DocumentLibrary {
1828
1830
  setTimeout(() => popover.show(event), 0);
1829
1831
  }
1830
1832
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibrary, deps: [], target: i0.ɵɵFactoryTarget.Component });
1831
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibrary, isStandalone: true, selector: "mt-document-library", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: true, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null }, uploadEndPoint: { classPropertyName: "uploadEndPoint", publicName: "uploadEndPoint", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", selectionChanged: "selectionChanged", actionExecuted: "actionExecuted" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "nameCellTpl", first: true, predicate: ["nameCellTpl"], descendants: true, isSignal: true }, { propertyName: "updatedCellTpl", first: true, predicate: ["updatedCellTpl"], descendants: true, isSignal: true }, { propertyName: "actionsCellTpl", first: true, predicate: ["actionsCellTpl"], descendants: true, isSignal: true }, { propertyName: "addPopover", first: true, predicate: ["addPopover"], descendants: true, isSignal: true }, { propertyName: "folderPopover", first: true, predicate: ["folderPopover"], descendants: true, isSignal: true }, { propertyName: "contextPopover", first: true, predicate: ["contextPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library'\">\r\n <div class=\"flex h-full min-h-[42rem] flex-col gap-4\">\r\n <div class=\"grid gap-4 xl:grid-cols-[19rem_minmax(0,1fr)]\">\r\n <mt-card class=\"h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full flex-col\">\r\n <div class=\"border-b border-surface px-5 py-5\">\r\n <div class=\"flex items-start justify-between gap-3\">\r\n <div>\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedTitle() }}\r\n </div>\r\n </div>\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"\r\n t('aria.refresh', { title: resolvedTitle() })\r\n \"\r\n [disabled]=\"isBusy('roots')\"\r\n (click)=\"reload()\"\r\n >\r\n <mt-avatar\r\n icon=\"arrow.refresh-cw-01\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n </div>\r\n <div class=\"mt-3\">\r\n <mt-text-field\r\n [ngModel]=\"railSearch()\"\r\n (ngModelChange)=\"railSearch.set($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"t('searchFolders')\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-1 overflow-y-auto px-2.5 py-2.5\">\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(selectedFolderId() === null) +\n ' mb-0.5 flex items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"goToRoot()\"\r\n >\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n icon=\"general.home-05\"\r\n size=\"small\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <span class=\"truncate\">{{ resolvedTitle() }}</span>\r\n </button>\r\n\r\n <ng-template #folderNodeTpl let-folder let-depth=\"depth\">\r\n <div class=\"mt-px\">\r\n <div\r\n class=\"flex items-center gap-1.5 rounded-lg\"\r\n [style.padding-inline-start.rem]=\"0.1 + depth * 0.72\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-color transition hover:bg-surface\"\r\n [class.invisible]=\"\r\n !folderHasChildFolders(folder.id) &&\r\n !hasLoadedChildren(folder.id)\r\n \"\r\n (click)=\"toggleExpanded(folder)\"\r\n >\r\n <mt-icon\r\n class=\"text-[0.85rem]\"\r\n [icon]=\"\r\n isExpanded(folder.id)\r\n ? 'arrow.chevron-down'\r\n : 'arrow.chevron-right'\r\n \"\r\n />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(isSelectedFolder(folder.id)) +\r\n ' flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"onRailFolderClick(folder)\"\r\n (contextmenu)=\"openContextMenu($event, folder)\"\r\n >\r\n <mt-avatar\r\n class=\"shrink-0 [&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n size=\"small\"\r\n [icon]=\"getFolderIcon(folder)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(folder)\"\r\n />\r\n <span class=\"min-w-0 flex-1 truncate\">\r\n {{ getFolderLabel(folder) }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n @if (isExpanded(folder.id)) {\r\n <div class=\"space-y-px\">\r\n @for (\r\n child of foldersForRail(folder.id);\r\n track child.id\r\n ) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: child, depth: depth + 1 }\r\n \"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @for (folder of visibleRoots(); track folder.id) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: folder, depth: 0 }\r\n \"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n\r\n <div class=\"flex min-w-0 flex-col gap-4\">\r\n <mt-card>\r\n <div class=\"flex flex-wrap items-center justify-between gap-3\">\r\n <div class=\"min-w-0 flex-1\">\r\n <mt-breadcrumb\r\n [items]=\"breadcrumbs()\"\r\n (onItemClick)=\"onBreadcrumbClick($event)\"\r\n />\r\n <div class=\"mt-2 flex items-start gap-3\">\r\n <mt-avatar\r\n [icon]=\"\r\n selectedFolder()\r\n ? getFolderIcon(selectedFolder()!)\r\n : 'general.home-05'\r\n \"\r\n size=\"normal\"\r\n [shape]=\"'square'\"\r\n [style]=\"\r\n selectedFolder()\r\n ? getFolderAvatarStyle(selectedFolder()!)\r\n : getHomeAvatarStyle()\r\n \"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-lg font-semibold\">\r\n {{ currentFolderTitle() }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{ currentFolderSubtitle() }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-2 self-start\">\r\n @if (hasVisibleActionItems(addMenuItems())) {\r\n <mt-button\r\n [label]=\"t('actions.add')\"\r\n icon=\"general.plus\"\r\n size=\"small\"\r\n (onClick)=\"openAddPopover($event)\"\r\n />\r\n <p-popover\r\n #addPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: addMenuItems(), popover: addPopover }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n\r\n @if (\r\n selectedFolder() &&\r\n hasVisibleActionItems(currentFolderMenuItems())\r\n ) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.folderActions')\"\r\n (click)=\"openFolderPopover($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-horizontal\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #folderPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: currentFolderMenuItems(),\r\n popover: folderPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (error()) {\r\n <div\r\n class=\"mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n >\r\n {{ error() }}\r\n </div>\r\n }\r\n </mt-card>\r\n\r\n <mt-card class=\"min-w-0\">\r\n <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]\">\r\n <div class=\"min-w-0\">\r\n <mt-table\r\n [columns]=\"columns()\"\r\n [data]=\"tableRows()\"\r\n [loading]=\"\r\n selectedFolderId() === null\n ? isBusy('roots')\r\n : isBusy(loadFolderBusyKey(selectedFolderId()!))\r\n \"\r\n [clickableRows]=\"true\"\r\n (rowClick)=\"onRowClick($event)\"\r\n >\r\n <ng-template #empty>\r\n <div class=\"flex flex-col items-center gap-3 py-10\">\r\n <mt-avatar\r\n icon=\"file.folder-question\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedEmptyTitle() }}\r\n </div>\r\n <div class=\"max-w-md text-center text-sm text-muted-color\">\r\n {{ resolvedEmptyDescription() }}\r\n </div>\r\n @if (\r\n canCreateFolderInSelection() || canUploadIntoCurrentFolder()\r\n ) {\r\n <div class=\"flex flex-wrap justify-center gap-2\">\r\n @if (canCreateFolderInSelection()) {\r\n <mt-button\r\n [label]=\"t('actions.newFolder')\"\r\n icon=\"file.folder-plus\"\r\n (onClick)=\"openCreateFolderDialog(selectedFolder())\"\r\n />\r\n }\r\n @if (canUploadIntoCurrentFolder()) {\r\n <mt-button\r\n [label]=\"t('actions.uploadFile')\"\r\n icon=\"general.upload-01\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('file')\"\r\n />\r\n <mt-button\r\n [label]=\"t('actions.uploadFolder')\"\r\n icon=\"file.folder\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('folder')\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </mt-table>\r\n </div>\r\n\r\n <div\r\n class=\"min-w-0 rounded-2xl border border-surface bg-surface/30 p-4\"\r\n >\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"selection.title\") }}\r\n </div>\r\n\r\n @if (selectedEntry(); as entry) {\r\n <div class=\"mt-4 space-y-4\">\r\n <div class=\"flex items-center gap-3\">\r\n @if (entry.isFolder) {\r\n <mt-avatar\r\n [icon]=\"getFolderIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n [icon]=\"getFileIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-base font-semibold\">\r\n {{ getEntryTitle(entry) }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{\r\n entry.isFolder\r\n ? t(\"selection.folder\")\r\n : t(\"selection.file\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (entry.isFolder) {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.permissions\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isEditableFolder\r\n ? t(\"selection.editableArea\")\r\n : t(\"selection.systemManaged\")\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.rename\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isNameEditable\r\n ? t(\"selection.allowed\")\r\n : t(\"selection.protected\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.type\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium uppercase\">\r\n {{ getFileExtension(entry) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.size\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ formatFileSize(entry.size) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.owner\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ entry.createdBy || t(\"owner.unknown\") }}\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mt-4 text-sm text-muted-color\">\r\n {{ t(\"selection.inspectHint\") }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n <ng-template #actionListTpl let-items=\"items\" let-popover=\"popover\">\r\n <div class=\"flex flex-col gap-0.5 p-0.5\">\r\n @for (item of getVisibleActionItems(items); track trackActionItem(item, $index)) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getActionItemButtonClass(item)\"\r\n (click)=\"executePopoverItem(item, popover)\"\r\n >\r\n @if (item.icon) {\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-8 [&_.p-avatar]:w-8 [&_.p-avatar]:text-xs\"\r\n [icon]=\"item.icon\"\r\n [shape]=\"'square'\"\r\n [style]=\"getActionItemAvatarStyle(item)\"\r\n />\r\n }\r\n <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #nameCellTpl let-row>\r\n <div\r\n class=\"flex min-w-0 items-center gap-3\"\r\n (contextmenu)=\"openContextMenu($event, row.entry)\"\r\n >\r\n @if (row.entry.isFolder) {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFolderIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(row.entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFileIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(row.entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-sm font-semibold\">\r\n {{ row.name }}\r\n </div>\r\n @if (row.entry.isFolder) {\r\n <div class=\"truncate text-xs text-muted-color\">\r\n {{\r\n row.entry.isEditableFolder\r\n ? t(\"selection.manualFolder\")\r\n : t(\"selection.protectedFolder\")\r\n }}\r\n </div>\r\n } @else {\r\n <div class=\"truncate text-xs text-muted-color uppercase\">\r\n {{ getFileExtension(row.entry) }} -\r\n {{ formatFileSize(row.entry.size) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #updatedCellTpl let-row>\r\n @if (row.entry.isFolder) {\r\n <span class=\"text-sm text-muted-color\">-</span>\r\n } @else {\r\n <div class=\"text-sm\">\r\n {{ row.updatedAt | date: \"dd MMM, y\" }}\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #actionsCellTpl let-row>\r\n @if (hasVisibleActionItems(getEntryMenuItems(row.entry))) {\r\n <div\r\n class=\"flex w-full items-center justify-center\"\r\n data-row-click-ignore=\"true\"\r\n >\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.rowActions')\"\r\n (click)=\"rowPopover.toggle($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-vertical\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #rowPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: getEntryMenuItems(row.entry),\r\n popover: rowPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <p-popover\r\n #contextPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: contextMenuItems(), popover: contextPopover }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
1833
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DocumentLibrary, isStandalone: true, selector: "mt-document-library", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: true, transformFunction: null }, levelDataId: { classPropertyName: "levelDataId", publicName: "levelDataId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, requestContext: { classPropertyName: "requestContext", publicName: "requestContext", isSignal: true, isRequired: false, transformFunction: null }, uploadEndPoint: { classPropertyName: "uploadEndPoint", publicName: "uploadEndPoint", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", selectionChanged: "selectionChanged", actionExecuted: "actionExecuted" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "nameCellTpl", first: true, predicate: ["nameCellTpl"], descendants: true, isSignal: true }, { propertyName: "updatedCellTpl", first: true, predicate: ["updatedCellTpl"], descendants: true, isSignal: true }, { propertyName: "actionsCellTpl", first: true, predicate: ["actionsCellTpl"], descendants: true, isSignal: true }, { propertyName: "addPopover", first: true, predicate: ["addPopover"], descendants: true, isSignal: true }, { propertyName: "folderPopover", first: true, predicate: ["folderPopover"], descendants: true, isSignal: true }, { propertyName: "contextPopover", first: true, predicate: ["contextPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'document-library'\">\r\n <div class=\"flex h-full min-h-[42rem] flex-col gap-4\">\r\n <div class=\"grid gap-4 xl:grid-cols-[19rem_minmax(0,1fr)]\">\r\n <mt-card class=\"h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full flex-col\">\r\n <div class=\"border-b border-surface px-5 py-5\">\r\n <div class=\"flex items-start justify-between gap-3\">\r\n <div>\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedTitle() }}\r\n </div>\r\n </div>\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"\r\n t('aria.refresh', { title: resolvedTitle() })\r\n \"\r\n [disabled]=\"isBusy('roots')\"\r\n (click)=\"reload()\"\r\n >\r\n <mt-avatar\r\n icon=\"arrow.refresh-cw-01\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n </div>\r\n <div class=\"mt-3\">\r\n <mt-text-field\r\n [ngModel]=\"railSearch()\"\r\n (ngModelChange)=\"railSearch.set($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"t('searchFolders')\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-1 overflow-y-auto px-2.5 py-2.5\">\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(selectedFolderId() === null) +\r\n ' mb-0.5 flex items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"goToRoot()\"\r\n >\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n icon=\"general.home-05\"\r\n size=\"small\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <span class=\"truncate\">{{ resolvedTitle() }}</span>\r\n </button>\r\n\r\n <ng-template #folderNodeTpl let-folder let-depth=\"depth\">\r\n <div class=\"mt-px\">\r\n <div\r\n class=\"flex items-center gap-1.5 rounded-lg\"\r\n [style.padding-inline-start.rem]=\"0.1 + depth * 0.72\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-color transition hover:bg-surface\"\r\n [class.invisible]=\"\r\n !folderHasChildFolders(folder.id) &&\r\n !hasLoadedChildren(folder.id)\r\n \"\r\n (click)=\"toggleExpanded(folder)\"\r\n >\r\n <mt-icon\r\n class=\"text-[0.85rem]\"\r\n [icon]=\"\r\n isExpanded(folder.id)\r\n ? 'arrow.chevron-down'\r\n : 'arrow.chevron-right'\r\n \"\r\n />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(isSelectedFolder(folder.id)) +\r\n ' flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"onRailFolderClick(folder)\"\r\n (contextmenu)=\"openContextMenu($event, folder)\"\r\n >\r\n <mt-avatar\r\n class=\"shrink-0 [&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n size=\"small\"\r\n [icon]=\"getFolderIcon(folder)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(folder)\"\r\n />\r\n <span class=\"min-w-0 flex-1 truncate\">\r\n {{ getFolderLabel(folder) }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n @if (isExpanded(folder.id)) {\r\n <div class=\"space-y-px\">\r\n @for (\r\n child of foldersForRail(folder.id);\r\n track child.id\r\n ) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: child, depth: depth + 1 }\r\n \"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @for (folder of visibleRoots(); track folder.id) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: folder, depth: 0 }\r\n \"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n\r\n <div class=\"flex min-w-0 flex-col gap-4\">\r\n <mt-card>\r\n <div class=\"flex flex-wrap items-center justify-between gap-3\">\r\n <div class=\"min-w-0 flex-1\">\r\n <mt-breadcrumb\r\n [items]=\"breadcrumbs()\"\r\n (onItemClick)=\"onBreadcrumbClick($event)\"\r\n />\r\n <div class=\"mt-2 flex items-start gap-3\">\r\n <mt-avatar\r\n [icon]=\"\r\n selectedFolder()\r\n ? getFolderIcon(selectedFolder()!)\r\n : 'general.home-05'\r\n \"\r\n size=\"normal\"\r\n [shape]=\"'square'\"\r\n [style]=\"\r\n selectedFolder()\r\n ? getFolderAvatarStyle(selectedFolder()!)\r\n : getHomeAvatarStyle()\r\n \"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-lg font-semibold\">\r\n {{ currentFolderTitle() }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{ currentFolderSubtitle() }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-2 self-start\">\r\n @if (hasVisibleActionItems(addMenuItems())) {\r\n <mt-button\r\n [label]=\"t('actions.add')\"\r\n icon=\"general.plus\"\r\n size=\"small\"\r\n (onClick)=\"openAddPopover($event)\"\r\n />\r\n <p-popover\r\n #addPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: addMenuItems(), popover: addPopover }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n\r\n @if (\r\n selectedFolder() &&\r\n hasVisibleActionItems(currentFolderMenuItems())\r\n ) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.folderActions')\"\r\n (click)=\"openFolderPopover($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-horizontal\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #folderPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: currentFolderMenuItems(),\r\n popover: folderPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (error()) {\r\n <div\r\n class=\"mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n >\r\n {{ error() }}\r\n </div>\r\n }\r\n </mt-card>\r\n\r\n <mt-card class=\"min-w-0\">\r\n <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]\">\r\n <div class=\"min-w-0\">\r\n <mt-table\r\n [columns]=\"columns()\"\r\n [data]=\"tableRows()\"\r\n [loading]=\"\r\n selectedFolderId() === null\r\n ? isBusy('roots')\r\n : isBusy(loadFolderBusyKey(selectedFolderId()!))\r\n \"\r\n [clickableRows]=\"true\"\r\n (rowClick)=\"onRowClick($event)\"\r\n >\r\n <ng-template #empty>\r\n <div class=\"flex flex-col items-center gap-3 py-10\">\r\n <mt-avatar\r\n icon=\"file.folder-question\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedEmptyTitle() }}\r\n </div>\r\n <div class=\"max-w-md text-center text-sm text-muted-color\">\r\n {{ resolvedEmptyDescription() }}\r\n </div>\r\n @if (\r\n canCreateFolderInSelection() ||\r\n canUploadIntoCurrentFolder()\r\n ) {\r\n <div class=\"flex flex-wrap justify-center gap-2\">\r\n @if (canCreateFolderInSelection()) {\r\n <mt-button\r\n [label]=\"t('actions.newFolder')\"\r\n icon=\"file.folder-plus\"\r\n (onClick)=\"openCreateFolderDialog(selectedFolder())\"\r\n />\r\n }\r\n @if (canUploadIntoCurrentFolder()) {\r\n <mt-button\r\n [label]=\"t('actions.uploadFile')\"\r\n icon=\"general.upload-01\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('file')\"\r\n />\r\n <mt-button\r\n [label]=\"t('actions.uploadFolder')\"\r\n icon=\"file.folder\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('folder')\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </mt-table>\r\n </div>\r\n\r\n <div\r\n class=\"min-w-0 rounded-2xl border border-surface bg-surface/30 p-4\"\r\n >\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"selection.title\") }}\r\n </div>\r\n\r\n @if (selectedEntry(); as entry) {\r\n <div class=\"mt-4 space-y-4\">\r\n <div class=\"flex items-center gap-3\">\r\n @if (entry.isFolder) {\r\n <mt-avatar\r\n [icon]=\"getFolderIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n [icon]=\"getFileIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-base font-semibold\">\r\n {{ getEntryTitle(entry) }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{\r\n entry.isFolder\r\n ? t(\"selection.folder\")\r\n : t(\"selection.file\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (entry.isFolder) {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.permissions\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isEditableFolder\r\n ? t(\"selection.editableArea\")\r\n : t(\"selection.systemManaged\")\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.rename\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isNameEditable\r\n ? t(\"selection.allowed\")\r\n : t(\"selection.protected\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.type\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium uppercase\">\r\n {{ getFileExtension(entry) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.size\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ formatFileSize(entry.size) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.owner\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ entry.createdBy || t(\"owner.unknown\") }}\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mt-4 text-sm text-muted-color\">\r\n {{ t(\"selection.inspectHint\") }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n <ng-template #actionListTpl let-items=\"items\" let-popover=\"popover\">\r\n <div class=\"flex flex-col gap-0.5 p-0.5\">\r\n @for (\r\n item of getVisibleActionItems(items);\r\n track trackActionItem(item, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getActionItemButtonClass(item)\"\r\n (click)=\"executePopoverItem(item, popover)\"\r\n >\r\n @if (item.icon) {\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-8 [&_.p-avatar]:w-8 [&_.p-avatar]:text-xs\"\r\n [icon]=\"item.icon\"\r\n [shape]=\"'square'\"\r\n [style]=\"getActionItemAvatarStyle(item)\"\r\n />\r\n }\r\n <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #nameCellTpl let-row>\r\n <div\r\n class=\"flex min-w-0 items-center gap-3\"\r\n (contextmenu)=\"openContextMenu($event, row.entry)\"\r\n >\r\n @if (row.entry.isFolder) {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFolderIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(row.entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFileIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(row.entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-sm font-semibold\">\r\n {{ row.name }}\r\n </div>\r\n @if (row.entry.isFolder) {\r\n <div class=\"truncate text-xs text-muted-color\">\r\n {{\r\n row.entry.isEditableFolder\r\n ? t(\"selection.manualFolder\")\r\n : t(\"selection.protectedFolder\")\r\n }}\r\n </div>\r\n } @else {\r\n <div class=\"truncate text-xs text-muted-color uppercase\">\r\n {{ getFileExtension(row.entry) }} -\r\n {{ formatFileSize(row.entry.size) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #updatedCellTpl let-row>\r\n @if (row.entry.isFolder) {\r\n <span class=\"text-sm text-muted-color\">-</span>\r\n } @else {\r\n <div class=\"text-sm\">\r\n {{ row.updatedAt | date: \"dd MMM, y\" }}\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #actionsCellTpl let-row>\r\n @if (hasVisibleActionItems(getEntryMenuItems(row.entry))) {\r\n <div\r\n class=\"flex w-full items-center justify-center\"\r\n data-row-click-ignore=\"true\"\r\n >\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.rowActions')\"\r\n (click)=\"rowPopover.toggle($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-vertical\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #rowPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: getEntryMenuItems(row.entry),\r\n popover: rowPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <p-popover\r\n #contextPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: contextMenuItems(), popover: contextPopover }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
1832
1834
  }
1833
1835
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DocumentLibrary, decorators: [{
1834
1836
  type: Component,
@@ -1847,7 +1849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
1847
1849
  Table,
1848
1850
  TextField,
1849
1851
  TranslocoDirective,
1850
- ], template: "<ng-container *transloco=\"let t; prefix: 'document-library'\">\r\n <div class=\"flex h-full min-h-[42rem] flex-col gap-4\">\r\n <div class=\"grid gap-4 xl:grid-cols-[19rem_minmax(0,1fr)]\">\r\n <mt-card class=\"h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full flex-col\">\r\n <div class=\"border-b border-surface px-5 py-5\">\r\n <div class=\"flex items-start justify-between gap-3\">\r\n <div>\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedTitle() }}\r\n </div>\r\n </div>\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"\r\n t('aria.refresh', { title: resolvedTitle() })\r\n \"\r\n [disabled]=\"isBusy('roots')\"\r\n (click)=\"reload()\"\r\n >\r\n <mt-avatar\r\n icon=\"arrow.refresh-cw-01\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n </div>\r\n <div class=\"mt-3\">\r\n <mt-text-field\r\n [ngModel]=\"railSearch()\"\r\n (ngModelChange)=\"railSearch.set($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"t('searchFolders')\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-1 overflow-y-auto px-2.5 py-2.5\">\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(selectedFolderId() === null) +\n ' mb-0.5 flex items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"goToRoot()\"\r\n >\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n icon=\"general.home-05\"\r\n size=\"small\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <span class=\"truncate\">{{ resolvedTitle() }}</span>\r\n </button>\r\n\r\n <ng-template #folderNodeTpl let-folder let-depth=\"depth\">\r\n <div class=\"mt-px\">\r\n <div\r\n class=\"flex items-center gap-1.5 rounded-lg\"\r\n [style.padding-inline-start.rem]=\"0.1 + depth * 0.72\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-color transition hover:bg-surface\"\r\n [class.invisible]=\"\r\n !folderHasChildFolders(folder.id) &&\r\n !hasLoadedChildren(folder.id)\r\n \"\r\n (click)=\"toggleExpanded(folder)\"\r\n >\r\n <mt-icon\r\n class=\"text-[0.85rem]\"\r\n [icon]=\"\r\n isExpanded(folder.id)\r\n ? 'arrow.chevron-down'\r\n : 'arrow.chevron-right'\r\n \"\r\n />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(isSelectedFolder(folder.id)) +\r\n ' flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"onRailFolderClick(folder)\"\r\n (contextmenu)=\"openContextMenu($event, folder)\"\r\n >\r\n <mt-avatar\r\n class=\"shrink-0 [&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n size=\"small\"\r\n [icon]=\"getFolderIcon(folder)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(folder)\"\r\n />\r\n <span class=\"min-w-0 flex-1 truncate\">\r\n {{ getFolderLabel(folder) }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n @if (isExpanded(folder.id)) {\r\n <div class=\"space-y-px\">\r\n @for (\r\n child of foldersForRail(folder.id);\r\n track child.id\r\n ) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: child, depth: depth + 1 }\r\n \"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @for (folder of visibleRoots(); track folder.id) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: folder, depth: 0 }\r\n \"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n\r\n <div class=\"flex min-w-0 flex-col gap-4\">\r\n <mt-card>\r\n <div class=\"flex flex-wrap items-center justify-between gap-3\">\r\n <div class=\"min-w-0 flex-1\">\r\n <mt-breadcrumb\r\n [items]=\"breadcrumbs()\"\r\n (onItemClick)=\"onBreadcrumbClick($event)\"\r\n />\r\n <div class=\"mt-2 flex items-start gap-3\">\r\n <mt-avatar\r\n [icon]=\"\r\n selectedFolder()\r\n ? getFolderIcon(selectedFolder()!)\r\n : 'general.home-05'\r\n \"\r\n size=\"normal\"\r\n [shape]=\"'square'\"\r\n [style]=\"\r\n selectedFolder()\r\n ? getFolderAvatarStyle(selectedFolder()!)\r\n : getHomeAvatarStyle()\r\n \"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-lg font-semibold\">\r\n {{ currentFolderTitle() }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{ currentFolderSubtitle() }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-2 self-start\">\r\n @if (hasVisibleActionItems(addMenuItems())) {\r\n <mt-button\r\n [label]=\"t('actions.add')\"\r\n icon=\"general.plus\"\r\n size=\"small\"\r\n (onClick)=\"openAddPopover($event)\"\r\n />\r\n <p-popover\r\n #addPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: addMenuItems(), popover: addPopover }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n\r\n @if (\r\n selectedFolder() &&\r\n hasVisibleActionItems(currentFolderMenuItems())\r\n ) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.folderActions')\"\r\n (click)=\"openFolderPopover($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-horizontal\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #folderPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: currentFolderMenuItems(),\r\n popover: folderPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (error()) {\r\n <div\r\n class=\"mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n >\r\n {{ error() }}\r\n </div>\r\n }\r\n </mt-card>\r\n\r\n <mt-card class=\"min-w-0\">\r\n <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]\">\r\n <div class=\"min-w-0\">\r\n <mt-table\r\n [columns]=\"columns()\"\r\n [data]=\"tableRows()\"\r\n [loading]=\"\r\n selectedFolderId() === null\n ? isBusy('roots')\r\n : isBusy(loadFolderBusyKey(selectedFolderId()!))\r\n \"\r\n [clickableRows]=\"true\"\r\n (rowClick)=\"onRowClick($event)\"\r\n >\r\n <ng-template #empty>\r\n <div class=\"flex flex-col items-center gap-3 py-10\">\r\n <mt-avatar\r\n icon=\"file.folder-question\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedEmptyTitle() }}\r\n </div>\r\n <div class=\"max-w-md text-center text-sm text-muted-color\">\r\n {{ resolvedEmptyDescription() }}\r\n </div>\r\n @if (\r\n canCreateFolderInSelection() || canUploadIntoCurrentFolder()\r\n ) {\r\n <div class=\"flex flex-wrap justify-center gap-2\">\r\n @if (canCreateFolderInSelection()) {\r\n <mt-button\r\n [label]=\"t('actions.newFolder')\"\r\n icon=\"file.folder-plus\"\r\n (onClick)=\"openCreateFolderDialog(selectedFolder())\"\r\n />\r\n }\r\n @if (canUploadIntoCurrentFolder()) {\r\n <mt-button\r\n [label]=\"t('actions.uploadFile')\"\r\n icon=\"general.upload-01\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('file')\"\r\n />\r\n <mt-button\r\n [label]=\"t('actions.uploadFolder')\"\r\n icon=\"file.folder\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('folder')\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </mt-table>\r\n </div>\r\n\r\n <div\r\n class=\"min-w-0 rounded-2xl border border-surface bg-surface/30 p-4\"\r\n >\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"selection.title\") }}\r\n </div>\r\n\r\n @if (selectedEntry(); as entry) {\r\n <div class=\"mt-4 space-y-4\">\r\n <div class=\"flex items-center gap-3\">\r\n @if (entry.isFolder) {\r\n <mt-avatar\r\n [icon]=\"getFolderIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n [icon]=\"getFileIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-base font-semibold\">\r\n {{ getEntryTitle(entry) }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{\r\n entry.isFolder\r\n ? t(\"selection.folder\")\r\n : t(\"selection.file\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (entry.isFolder) {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.permissions\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isEditableFolder\r\n ? t(\"selection.editableArea\")\r\n : t(\"selection.systemManaged\")\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.rename\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isNameEditable\r\n ? t(\"selection.allowed\")\r\n : t(\"selection.protected\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.type\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium uppercase\">\r\n {{ getFileExtension(entry) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.size\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ formatFileSize(entry.size) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.owner\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ entry.createdBy || t(\"owner.unknown\") }}\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mt-4 text-sm text-muted-color\">\r\n {{ t(\"selection.inspectHint\") }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n <ng-template #actionListTpl let-items=\"items\" let-popover=\"popover\">\r\n <div class=\"flex flex-col gap-0.5 p-0.5\">\r\n @for (item of getVisibleActionItems(items); track trackActionItem(item, $index)) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getActionItemButtonClass(item)\"\r\n (click)=\"executePopoverItem(item, popover)\"\r\n >\r\n @if (item.icon) {\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-8 [&_.p-avatar]:w-8 [&_.p-avatar]:text-xs\"\r\n [icon]=\"item.icon\"\r\n [shape]=\"'square'\"\r\n [style]=\"getActionItemAvatarStyle(item)\"\r\n />\r\n }\r\n <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #nameCellTpl let-row>\r\n <div\r\n class=\"flex min-w-0 items-center gap-3\"\r\n (contextmenu)=\"openContextMenu($event, row.entry)\"\r\n >\r\n @if (row.entry.isFolder) {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFolderIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(row.entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFileIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(row.entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-sm font-semibold\">\r\n {{ row.name }}\r\n </div>\r\n @if (row.entry.isFolder) {\r\n <div class=\"truncate text-xs text-muted-color\">\r\n {{\r\n row.entry.isEditableFolder\r\n ? t(\"selection.manualFolder\")\r\n : t(\"selection.protectedFolder\")\r\n }}\r\n </div>\r\n } @else {\r\n <div class=\"truncate text-xs text-muted-color uppercase\">\r\n {{ getFileExtension(row.entry) }} -\r\n {{ formatFileSize(row.entry.size) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #updatedCellTpl let-row>\r\n @if (row.entry.isFolder) {\r\n <span class=\"text-sm text-muted-color\">-</span>\r\n } @else {\r\n <div class=\"text-sm\">\r\n {{ row.updatedAt | date: \"dd MMM, y\" }}\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #actionsCellTpl let-row>\r\n @if (hasVisibleActionItems(getEntryMenuItems(row.entry))) {\r\n <div\r\n class=\"flex w-full items-center justify-center\"\r\n data-row-click-ignore=\"true\"\r\n >\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.rowActions')\"\r\n (click)=\"rowPopover.toggle($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-vertical\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #rowPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: getEntryMenuItems(row.entry),\r\n popover: rowPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <p-popover\r\n #contextPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: contextMenuItems(), popover: contextPopover }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n</ng-container>\r\n" }]
1852
+ ], template: "<ng-container *transloco=\"let t; prefix: 'document-library'\">\r\n <div class=\"flex h-full min-h-[42rem] flex-col gap-4\">\r\n <div class=\"grid gap-4 xl:grid-cols-[19rem_minmax(0,1fr)]\">\r\n <mt-card class=\"h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full flex-col\">\r\n <div class=\"border-b border-surface px-5 py-5\">\r\n <div class=\"flex items-start justify-between gap-3\">\r\n <div>\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedTitle() }}\r\n </div>\r\n </div>\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"\r\n t('aria.refresh', { title: resolvedTitle() })\r\n \"\r\n [disabled]=\"isBusy('roots')\"\r\n (click)=\"reload()\"\r\n >\r\n <mt-avatar\r\n icon=\"arrow.refresh-cw-01\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n </div>\r\n <div class=\"mt-3\">\r\n <mt-text-field\r\n [ngModel]=\"railSearch()\"\r\n (ngModelChange)=\"railSearch.set($event)\"\r\n icon=\"general.search-lg\"\r\n [placeholder]=\"t('searchFolders')\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-1 overflow-y-auto px-2.5 py-2.5\">\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(selectedFolderId() === null) +\r\n ' mb-0.5 flex items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"goToRoot()\"\r\n >\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n icon=\"general.home-05\"\r\n size=\"small\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <span class=\"truncate\">{{ resolvedTitle() }}</span>\r\n </button>\r\n\r\n <ng-template #folderNodeTpl let-folder let-depth=\"depth\">\r\n <div class=\"mt-px\">\r\n <div\r\n class=\"flex items-center gap-1.5 rounded-lg\"\r\n [style.padding-inline-start.rem]=\"0.1 + depth * 0.72\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-color transition hover:bg-surface\"\r\n [class.invisible]=\"\r\n !folderHasChildFolders(folder.id) &&\r\n !hasLoadedChildren(folder.id)\r\n \"\r\n (click)=\"toggleExpanded(folder)\"\r\n >\r\n <mt-icon\r\n class=\"text-[0.85rem]\"\r\n [icon]=\"\r\n isExpanded(folder.id)\r\n ? 'arrow.chevron-down'\r\n : 'arrow.chevron-right'\r\n \"\r\n />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n [class]=\"\r\n getRailItemClass(isSelectedFolder(folder.id)) +\r\n ' flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2'\r\n \"\r\n (click)=\"onRailFolderClick(folder)\"\r\n (contextmenu)=\"openContextMenu($event, folder)\"\r\n >\r\n <mt-avatar\r\n class=\"shrink-0 [&_.p-avatar]:h-9 [&_.p-avatar]:w-9 [&_.p-avatar]:text-sm\"\r\n size=\"small\"\r\n [icon]=\"getFolderIcon(folder)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(folder)\"\r\n />\r\n <span class=\"min-w-0 flex-1 truncate\">\r\n {{ getFolderLabel(folder) }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n @if (isExpanded(folder.id)) {\r\n <div class=\"space-y-px\">\r\n @for (\r\n child of foldersForRail(folder.id);\r\n track child.id\r\n ) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: child, depth: depth + 1 }\r\n \"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @for (folder of visibleRoots(); track folder.id) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n folderNodeTpl;\r\n context: { $implicit: folder, depth: 0 }\r\n \"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n\r\n <div class=\"flex min-w-0 flex-col gap-4\">\r\n <mt-card>\r\n <div class=\"flex flex-wrap items-center justify-between gap-3\">\r\n <div class=\"min-w-0 flex-1\">\r\n <mt-breadcrumb\r\n [items]=\"breadcrumbs()\"\r\n (onItemClick)=\"onBreadcrumbClick($event)\"\r\n />\r\n <div class=\"mt-2 flex items-start gap-3\">\r\n <mt-avatar\r\n [icon]=\"\r\n selectedFolder()\r\n ? getFolderIcon(selectedFolder()!)\r\n : 'general.home-05'\r\n \"\r\n size=\"normal\"\r\n [shape]=\"'square'\"\r\n [style]=\"\r\n selectedFolder()\r\n ? getFolderAvatarStyle(selectedFolder()!)\r\n : getHomeAvatarStyle()\r\n \"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-lg font-semibold\">\r\n {{ currentFolderTitle() }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{ currentFolderSubtitle() }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap items-center gap-2 self-start\">\r\n @if (hasVisibleActionItems(addMenuItems())) {\r\n <mt-button\r\n [label]=\"t('actions.add')\"\r\n icon=\"general.plus\"\r\n size=\"small\"\r\n (onClick)=\"openAddPopover($event)\"\r\n />\r\n <p-popover\r\n #addPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: addMenuItems(), popover: addPopover }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n\r\n @if (\r\n selectedFolder() &&\r\n hasVisibleActionItems(currentFolderMenuItems())\r\n ) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.folderActions')\"\r\n (click)=\"openFolderPopover($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-horizontal\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #folderPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: currentFolderMenuItems(),\r\n popover: folderPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (error()) {\r\n <div\r\n class=\"mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n >\r\n {{ error() }}\r\n </div>\r\n }\r\n </mt-card>\r\n\r\n <mt-card class=\"min-w-0\">\r\n <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]\">\r\n <div class=\"min-w-0\">\r\n <mt-table\r\n [columns]=\"columns()\"\r\n [data]=\"tableRows()\"\r\n [loading]=\"\r\n selectedFolderId() === null\r\n ? isBusy('roots')\r\n : isBusy(loadFolderBusyKey(selectedFolderId()!))\r\n \"\r\n [clickableRows]=\"true\"\r\n (rowClick)=\"onRowClick($event)\"\r\n >\r\n <ng-template #empty>\r\n <div class=\"flex flex-col items-center gap-3 py-10\">\r\n <mt-avatar\r\n icon=\"file.folder-question\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getHomeAvatarStyle()\"\r\n />\r\n <div class=\"text-base font-semibold\">\r\n {{ resolvedEmptyTitle() }}\r\n </div>\r\n <div class=\"max-w-md text-center text-sm text-muted-color\">\r\n {{ resolvedEmptyDescription() }}\r\n </div>\r\n @if (\r\n canCreateFolderInSelection() ||\r\n canUploadIntoCurrentFolder()\r\n ) {\r\n <div class=\"flex flex-wrap justify-center gap-2\">\r\n @if (canCreateFolderInSelection()) {\r\n <mt-button\r\n [label]=\"t('actions.newFolder')\"\r\n icon=\"file.folder-plus\"\r\n (onClick)=\"openCreateFolderDialog(selectedFolder())\"\r\n />\r\n }\r\n @if (canUploadIntoCurrentFolder()) {\r\n <mt-button\r\n [label]=\"t('actions.uploadFile')\"\r\n icon=\"general.upload-01\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('file')\"\r\n />\r\n <mt-button\r\n [label]=\"t('actions.uploadFolder')\"\r\n icon=\"file.folder\"\r\n [outlined]=\"true\"\r\n (onClick)=\"openUploadDialog('folder')\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </mt-table>\r\n </div>\r\n\r\n <div\r\n class=\"min-w-0 rounded-2xl border border-surface bg-surface/30 p-4\"\r\n >\r\n <div class=\"text-sm font-semibold\">\r\n {{ t(\"selection.title\") }}\r\n </div>\r\n\r\n @if (selectedEntry(); as entry) {\r\n <div class=\"mt-4 space-y-4\">\r\n <div class=\"flex items-center gap-3\">\r\n @if (entry.isFolder) {\r\n <mt-avatar\r\n [icon]=\"getFolderIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n [icon]=\"getFileIcon(entry)\"\r\n size=\"large\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-base font-semibold\">\r\n {{ getEntryTitle(entry) }}\r\n </div>\r\n <div class=\"truncate text-sm text-muted-color\">\r\n {{\r\n entry.isFolder\r\n ? t(\"selection.folder\")\r\n : t(\"selection.file\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n @if (entry.isFolder) {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.permissions\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isEditableFolder\r\n ? t(\"selection.editableArea\")\r\n : t(\"selection.systemManaged\")\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.rename\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{\r\n entry.isNameEditable\r\n ? t(\"selection.allowed\")\r\n : t(\"selection.protected\")\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"grid gap-3 text-sm\">\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.type\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium uppercase\">\r\n {{ getFileExtension(entry) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.size\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ formatFileSize(entry.size) }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"rounded-2xl border border-surface bg-content px-3 py-3\"\r\n >\r\n <div\r\n class=\"text-xs uppercase tracking-wide text-muted-color\"\r\n >\r\n {{ t(\"selection.owner\") }}\r\n </div>\r\n <div class=\"mt-1 font-medium\">\r\n {{ entry.createdBy || t(\"owner.unknown\") }}\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mt-4 text-sm text-muted-color\">\r\n {{ t(\"selection.inspectHint\") }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n <ng-template #actionListTpl let-items=\"items\" let-popover=\"popover\">\r\n <div class=\"flex flex-col gap-0.5 p-0.5\">\r\n @for (\r\n item of getVisibleActionItems(items);\r\n track trackActionItem(item, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n [class]=\"getActionItemButtonClass(item)\"\r\n (click)=\"executePopoverItem(item, popover)\"\r\n >\r\n @if (item.icon) {\r\n <mt-avatar\r\n class=\"[&_.p-avatar]:h-8 [&_.p-avatar]:w-8 [&_.p-avatar]:text-xs\"\r\n [icon]=\"item.icon\"\r\n [shape]=\"'square'\"\r\n [style]=\"getActionItemAvatarStyle(item)\"\r\n />\r\n }\r\n <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #nameCellTpl let-row>\r\n <div\r\n class=\"flex min-w-0 items-center gap-3\"\r\n (contextmenu)=\"openContextMenu($event, row.entry)\"\r\n >\r\n @if (row.entry.isFolder) {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFolderIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFolderAvatarStyle(row.entry)\"\r\n />\r\n } @else {\r\n <mt-avatar\r\n class=\"shrink-0\"\r\n [icon]=\"getFileIcon(row.entry)\"\r\n [shape]=\"'square'\"\r\n [style]=\"getFileAvatarStyle(row.entry)\"\r\n />\r\n }\r\n\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-sm font-semibold\">\r\n {{ row.name }}\r\n </div>\r\n @if (row.entry.isFolder) {\r\n <div class=\"truncate text-xs text-muted-color\">\r\n {{\r\n row.entry.isEditableFolder\r\n ? t(\"selection.manualFolder\")\r\n : t(\"selection.protectedFolder\")\r\n }}\r\n </div>\r\n } @else {\r\n <div class=\"truncate text-xs text-muted-color uppercase\">\r\n {{ getFileExtension(row.entry) }} -\r\n {{ formatFileSize(row.entry.size) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #updatedCellTpl let-row>\r\n @if (row.entry.isFolder) {\r\n <span class=\"text-sm text-muted-color\">-</span>\r\n } @else {\r\n <div class=\"text-sm\">\r\n {{ row.updatedAt | date: \"dd MMM, y\" }}\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #actionsCellTpl let-row>\r\n @if (hasVisibleActionItems(getEntryMenuItems(row.entry))) {\r\n <div\r\n class=\"flex w-full items-center justify-center\"\r\n data-row-click-ignore=\"true\"\r\n >\r\n <button\r\n type=\"button\"\r\n [class]=\"getIconButtonClass()\"\r\n [attr.aria-label]=\"t('aria.rowActions')\"\r\n (click)=\"rowPopover.toggle($event)\"\r\n >\r\n <mt-avatar\r\n icon=\"general.dots-vertical\"\r\n [shape]=\"'circle'\"\r\n [style]=\"getActionAvatarStyle()\"\r\n />\r\n </button>\r\n <p-popover\r\n #rowPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: {\r\n items: getEntryMenuItems(row.entry),\r\n popover: rowPopover,\r\n }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <p-popover\r\n #contextPopover\r\n [style]=\"getActionPopoverStyle()\"\r\n appendTo=\"body\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionListTpl;\r\n context: { items: contextMenuItems(), popover: contextPopover }\r\n \"\r\n />\r\n </p-popover>\r\n </div>\r\n</ng-container>\r\n" }]
1851
1853
  }], ctorParameters: () => [], propDecorators: { levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: true }] }], levelDataId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelDataId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], requestContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestContext", required: false }] }], uploadEndPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadEndPoint", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }], nameCellTpl: [{ type: i0.ViewChild, args: ['nameCellTpl', { isSignal: true }] }], updatedCellTpl: [{ type: i0.ViewChild, args: ['updatedCellTpl', { isSignal: true }] }], actionsCellTpl: [{ type: i0.ViewChild, args: ['actionsCellTpl', { isSignal: true }] }], addPopover: [{ type: i0.ViewChild, args: ['addPopover', { isSignal: true }] }], folderPopover: [{ type: i0.ViewChild, args: ['folderPopover', { isSignal: true }] }], contextPopover: [{ type: i0.ViewChild, args: ['contextPopover', { isSignal: true }] }] } });
1852
1854
 
1853
1855
  function isDocumentLibraryFolderEntry(entry) {