@memberjunction/ng-core-entity-forms 6.2.0-edge.2 → 6.2.0-edge.4

package/dist/lib/custom/Files/file-form.component.js

@@ -13,13 +13,23 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { GraphQLDataProvider, gql } from '@memberjunction/graphql-dataprovider';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { MJFileFormComponent } from '../../generated/Entities/MJFile/mjfile.form.component';
+import { ClassifyFileMediaType, DescribeFileSize, MediaLoadsByElement } from './file-form.logic';
 import { z } from 'zod';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-ui-components";
-import * as i2 from "@memberjunction/ng-base-forms";
-import * as i3 from "@memberjunction/ng-shared-generic";
-import * as i4 from "@angular/common";
-function MJFileFormComponentExtended_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+import * as i1 from "@memberjunction/ng-artifacts";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-base-forms";
+import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i5 from "@angular/common";
+function MJFileFormComponentExtended_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function MJFileFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -28,25 +38,25 @@ function MJFileFormComponentExtended_Conditional_0_Conditional_13_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Status);
 } }
-function MJFileFormComponentExtended_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenInExternalTab()); });
+    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenInExternalTab()); });
     i0.ɵɵelement(1, "i", 23);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Open in New Tab");
     i0.ɵɵelementEnd()();
 } }
-function MJFileFormComponentExtended_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 24);
-    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleViewMode()); });
+    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleViewMode()); });
     i0.ɵɵelement(1, "i", 25);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Edit Record");
     i0.ɵɵelementEnd()();
 } }
-function MJFileFormComponentExtended_Conditional_0_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18);
     i0.ɵɵelement(1, "mj-loading", 26);
     i0.ɵɵelementEnd();
@@ -55,10 +65,10 @@ function MJFileFormComponentExtended_Conditional_0_Conditional_23_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", "Loading " + (ctx_r1.record.Name || "file") + "...");
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_23_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "img", 29);
-    i0.ɵɵlistener("load", function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template_img_load_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("error", function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template_img_error_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
+    i0.ɵɵlistener("load", function MJFileFormComponentExtended_Conditional_0_Case_23_Conditional_0_Template_img_load_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("error", function MJFileFormComponentExtended_Conditional_0_Case_23_Conditional_0_Template_img_error_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -66,7 +76,7 @@ function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Templat
     i0.ɵɵadvance();
     i0.ɵɵproperty("src", ctx_r1.MediaUrl, i0.ɵɵsanitizeUrl)("alt", ctx_r1.record.Name);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i", 30);
     i0.ɵɵelementStart(2, "h3");
@@ -80,16 +90,16 @@ function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_1_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template, 2, 4, "div", 27)(1, MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_1_Template, 6, 1, "div", 20);
+function MJFileFormComponentExtended_Conditional_0_Case_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_23_Conditional_0_Template, 2, 4, "div", 27)(1, MJFileFormComponentExtended_Conditional_0_Case_23_Conditional_1_Template, 6, 1, "div", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.MediaUrl ? 0 : 1);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 32)(1, "iframe", 33);
-    i0.ɵɵlistener("load", function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template_iframe_load_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
+    i0.ɵɵlistener("load", function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template_iframe_load_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -97,7 +107,7 @@ function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Templat
     i0.ɵɵadvance();
     i0.ɵɵproperty("src", ctx_r1.SafeMediaUrl, i0.ɵɵsanitizeResourceUrl);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i", 34);
     i0.ɵɵelementStart(2, "h3");
@@ -111,16 +121,16 @@ function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_1_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template, 2, 3, "div", 31)(1, MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_1_Template, 6, 1, "div", 20);
+function MJFileFormComponentExtended_Conditional_0_Case_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_0_Template, 2, 3, "div", 31)(1, MJFileFormComponentExtended_Conditional_0_Case_24_Conditional_1_Template, 6, 1, "div", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.SafeMediaUrl ? 0 : 1);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 36)(1, "video", 37);
-    i0.ɵɵlistener("loadeddata", function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template_video_loadeddata_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("error", function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template_video_error_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
+    i0.ɵɵlistener("loadeddata", function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template_video_loadeddata_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("error", function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template_video_error_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -128,7 +138,7 @@ function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Templat
     i0.ɵɵadvance();
     i0.ɵɵproperty("src", ctx_r1.MediaUrl, i0.ɵɵsanitizeUrl);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i", 38);
     i0.ɵɵelementStart(2, "h3");
@@ -142,19 +152,19 @@ function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_1_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template, 2, 3, "div", 35)(1, MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_1_Template, 6, 1, "div", 20);
+function MJFileFormComponentExtended_Conditional_0_Case_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_0_Template, 2, 3, "div", 35)(1, MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_1_Template, 6, 1, "div", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.MediaUrl ? 0 : 1);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 40)(1, "div", 41);
     i0.ɵɵelement(2, "i", 42);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "audio", 43);
-    i0.ɵɵlistener("loadeddata", function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_0_Template_audio_loadeddata_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("error", function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_0_Template_audio_error_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
+    i0.ɵɵlistener("loadeddata", function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template_audio_loadeddata_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("error", function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template_audio_error_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -162,7 +172,7 @@ function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_0_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("src", ctx_r1.MediaUrl);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i", 44);
     i0.ɵɵelementStart(2, "h3");
@@ -176,13 +186,13 @@ function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_1_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_0_Template, 4, 3, "div", 39)(1, MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_1_Template, 6, 1, "div", 20);
+function MJFileFormComponentExtended_Conditional_0_Case_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_0_Template, 4, 3, "div", 39)(1, MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_1_Template, 6, 1, "div", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.MediaUrl ? 0 : 1);
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_28_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "pre")(2, "code");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()()();
@@ -191,47 +201,118 @@ function MJFileFormComponentExtended_Conditional_0_Case_28_Template(rf, ctx) { i
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.TextContent || "Loading text content...");
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_28_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
-    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenInExternalTab()); });
+    i0.ɵɵelementStart(0, "div", 46)(1, "mj-docx-preview", 47);
+    i0.ɵɵlistener("Loaded", function MJFileFormComponentExtended_Conditional_0_Case_28_Conditional_0_Template_mj_docx_preview_Loaded_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("Failed", function MJFileFormComponentExtended_Conditional_0_Case_28_Conditional_0_Template_mj_docx_preview_Failed_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-file-media--hidden", !ctx_r1.IsMediaLoaded);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Url", ctx_r1.MediaUrl);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Document preview could not be loaded.");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.record.Name);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_28_Conditional_0_Template, 2, 3, "div", 45)(1, MJFileFormComponentExtended_Conditional_0_Case_28_Conditional_1_Template, 6, 1, "div", 20);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.MediaUrl ? 0 : 1);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 46)(1, "mj-xlsx-preview", 47);
+    i0.ɵɵlistener("Loaded", function MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_0_Template_mj_xlsx_preview_Loaded_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); })("Failed", function MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_0_Template_mj_xlsx_preview_Failed_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMediaElementLoaded()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-file-media--hidden", !ctx_r1.IsMediaLoaded);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Url", ctx_r1.MediaUrl);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Workbook preview could not be loaded.");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.record.Name);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_0_Template, 2, 3, "div", 45)(1, MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_1_Template, 6, 1, "div", 20);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.MediaUrl ? 0 : 1);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_30_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    i0.ɵɵtextInterpolate1(" \u2022 ", ctx);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_30_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Case_30_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenInExternalTab()); });
     i0.ɵɵelement(1, "i", 23);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Open in Browser");
     i0.ɵɵelementEnd()();
 } }
-function MJFileFormComponentExtended_Conditional_0_Case_29_Template(rf, ctx) { if (rf & 1) {
+function MJFileFormComponentExtended_Conditional_0_Case_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 46);
+    i0.ɵɵelementStart(4, "p", 51);
     i0.ɵɵtext(5);
+    i0.ɵɵconditionalCreate(6, MJFileFormComponentExtended_Conditional_0_Case_30_Conditional_6_Template, 1, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 47);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(7, "p", 52);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_8_Template, 4, 0, "button", 48);
+    i0.ɵɵconditionalCreate(9, MJFileFormComponentExtended_Conditional_0_Case_30_Conditional_9_Template, 4, 0, "button", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_5_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.FileIconClass);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", ctx_r1.record.ContentType || "Document", " \u2022 ", ctx_r1.FormatFileSize(ctx_r1.record.ContentLength));
+    i0.ɵɵtextInterpolate(ctx_r1.record.ContentType || "Document");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_5_0 = ctx_r1.FileSizeLabel) ? 6 : -1, tmp_5_0);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.record.Description || "Preview is not available for this file type.");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.MediaUrl ? 8 : -1);
+    i0.ɵɵconditional(ctx_r1.MediaUrl ? 9 : -1);
 } }
-function MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function MJFileFormComponentExtended_Conditional_0_Conditional_31_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60)(1, "span", 61);
     i0.ɵɵtext(2, "Description:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 59);
+    i0.ɵɵelementStart(3, "span", 64);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -239,11 +320,22 @@ function MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_13
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.record.Description);
 } }
-function MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function MJFileFormComponentExtended_Conditional_0_Conditional_31_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60)(1, "span", 61);
+    i0.ɵɵtext(2, "Size:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 64);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function MJFileFormComponentExtended_Conditional_0_Conditional_31_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60)(1, "span", 61);
     i0.ɵɵtext(2, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 59);
+    i0.ɵɵelementStart(3, "span", 64);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -251,51 +343,47 @@ function MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_24
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.record.Status);
 } }
-function MJFileFormComponentExtended_Conditional_0_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "aside", 21)(1, "div", 50)(2, "h3");
+function MJFileFormComponentExtended_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "aside", 21)(1, "div", 55)(2, "h3");
     i0.ɵɵtext(3, "File Details & Links");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 51);
-    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Conditional_30_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleDetailsSidebar()); });
-    i0.ɵɵelement(5, "i", 52);
+    i0.ɵɵelementStart(4, "button", 56);
+    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Conditional_31_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleDetailsSidebar()); });
+    i0.ɵɵelement(5, "i", 57);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 53)(7, "div", 54)(8, "div", 55)(9, "span", 56);
+    i0.ɵɵelementStart(6, "div", 58)(7, "div", 59)(8, "div", 60)(9, "span", 61);
     i0.ɵɵtext(10, "File Name:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 57);
+    i0.ɵɵelementStart(11, "span", 62);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_13_Template, 5, 1, "div", 55);
-    i0.ɵɵelementStart(14, "div", 55)(15, "span", 56);
+    i0.ɵɵconditionalCreate(13, MJFileFormComponentExtended_Conditional_0_Conditional_31_Conditional_13_Template, 5, 1, "div", 60);
+    i0.ɵɵelementStart(14, "div", 60)(15, "span", 61);
     i0.ɵɵtext(16, "MIME Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 58);
+    i0.ɵɵelementStart(17, "span", 63);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 55)(20, "span", 56);
-    i0.ɵɵtext(21, "Size:");
+    i0.ɵɵconditionalCreate(19, MJFileFormComponentExtended_Conditional_0_Conditional_31_Conditional_19_Template, 5, 1, "div", 60);
+    i0.ɵɵconditionalCreate(20, MJFileFormComponentExtended_Conditional_0_Conditional_31_Conditional_20_Template, 5, 1, "div", 60);
+    i0.ɵɵelementStart(21, "div", 60)(22, "span", 61);
+    i0.ɵɵtext(23, "Created:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "span", 59);
-    i0.ɵɵtext(23);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(24, MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_24_Template, 5, 1, "div", 55);
-    i0.ɵɵelementStart(25, "div", 55)(26, "span", 56);
-    i0.ɵɵtext(27, "Created:");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "span", 59);
-    i0.ɵɵtext(29);
-    i0.ɵɵpipe(30, "date");
+    i0.ɵɵelementStart(24, "span", 64);
+    i0.ɵɵtext(25);
+    i0.ɵɵpipe(26, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 60)(32, "h4", 61);
-    i0.ɵɵelement(33, "i", 62);
-    i0.ɵɵelementStart(34, "span");
-    i0.ɵɵtext(35, "Linked Records");
+    i0.ɵɵelementStart(27, "div", 65)(28, "h4", 66);
+    i0.ɵɵelement(29, "i", 67);
+    i0.ɵɵelementStart(30, "span");
+    i0.ɵɵtext(31, "Linked Records");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "div", 63);
-    i0.ɵɵelement(37, "mj-relationship-view", 64);
+    i0.ɵɵelementStart(32, "div", 68);
+    i0.ɵɵelement(33, "mj-relationship-view", 69);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
+    let tmp_5_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(12);
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
@@ -303,12 +391,12 @@ function MJFileFormComponentExtended_Conditional_0_Conditional_30_Template(rf, c
     i0.ɵɵconditional(ctx_r1.record.Description ? 13 : -1);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.record.ContentType || "Unknown");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatFileSize(ctx_r1.record.ContentLength));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.Status ? 24 : -1);
+    i0.ɵɵconditional((tmp_5_0 = ctx_r1.FileSizeLabel) ? 19 : -1, tmp_5_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.record.Status ? 20 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(30, 8, ctx_r1.record.CreatedAt, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(26, 8, ctx_r1.record.__mj_CreatedAt, "short"));
     i0.ɵɵadvance(8);
     i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: File Entity Record Links", "FileID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: File Entity Record Links", "FileID"));
 } }
@@ -323,28 +411,27 @@ function MJFileFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(8, "div", 7)(9, "span", 8);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 9);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, MJFileFormComponentExtended_Conditional_0_Conditional_13_Template, 2, 1, "span", 10);
+    i0.ɵɵconditionalCreate(11, MJFileFormComponentExtended_Conditional_0_Conditional_11_Template, 2, 1, "span", 9);
+    i0.ɵɵconditionalCreate(12, MJFileFormComponentExtended_Conditional_0_Conditional_12_Template, 2, 1, "span", 10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 11);
-    i0.ɵɵconditionalCreate(15, MJFileFormComponentExtended_Conditional_0_Conditional_15_Template, 4, 0, "button", 12);
-    i0.ɵɵelementStart(16, "button", 13);
-    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleDetailsSidebar()); });
-    i0.ɵɵelement(17, "i", 14);
-    i0.ɵɵelementStart(18, "span");
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(13, "div", 11);
+    i0.ɵɵconditionalCreate(14, MJFileFormComponentExtended_Conditional_0_Conditional_14_Template, 4, 0, "button", 12);
+    i0.ɵɵelementStart(15, "button", 13);
+    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_0_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleDetailsSidebar()); });
+    i0.ɵɵelement(16, "i", 14);
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, MJFileFormComponentExtended_Conditional_0_Conditional_20_Template, 4, 0, "button", 15);
+    i0.ɵɵconditionalCreate(19, MJFileFormComponentExtended_Conditional_0_Conditional_19_Template, 4, 0, "button", 15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 16)(22, "main", 17);
-    i0.ɵɵconditionalCreate(23, MJFileFormComponentExtended_Conditional_0_Conditional_23_Template, 2, 1, "div", 18);
-    i0.ɵɵconditionalCreate(24, MJFileFormComponentExtended_Conditional_0_Case_24_Template, 2, 1)(25, MJFileFormComponentExtended_Conditional_0_Case_25_Template, 2, 1)(26, MJFileFormComponentExtended_Conditional_0_Case_26_Template, 2, 1)(27, MJFileFormComponentExtended_Conditional_0_Case_27_Template, 2, 1)(28, MJFileFormComponentExtended_Conditional_0_Case_28_Template, 4, 1, "div", 19)(29, MJFileFormComponentExtended_Conditional_0_Case_29_Template, 9, 7, "div", 20);
+    i0.ɵɵelementStart(20, "div", 16)(21, "main", 17);
+    i0.ɵɵconditionalCreate(22, MJFileFormComponentExtended_Conditional_0_Conditional_22_Template, 2, 1, "div", 18);
+    i0.ɵɵconditionalCreate(23, MJFileFormComponentExtended_Conditional_0_Case_23_Template, 2, 1)(24, MJFileFormComponentExtended_Conditional_0_Case_24_Template, 2, 1)(25, MJFileFormComponentExtended_Conditional_0_Case_25_Template, 2, 1)(26, MJFileFormComponentExtended_Conditional_0_Case_26_Template, 2, 1)(27, MJFileFormComponentExtended_Conditional_0_Case_27_Template, 4, 1, "div", 19)(28, MJFileFormComponentExtended_Conditional_0_Case_28_Template, 2, 1)(29, MJFileFormComponentExtended_Conditional_0_Case_29_Template, 2, 1)(30, MJFileFormComponentExtended_Conditional_0_Case_30_Template, 10, 7, "div", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(30, MJFileFormComponentExtended_Conditional_0_Conditional_30_Template, 38, 11, "aside", 21);
+    i0.ɵɵconditionalCreate(31, MJFileFormComponentExtended_Conditional_0_Conditional_31_Template, 34, 11, "aside", 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    let tmp_5_0;
     let tmp_12_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
@@ -355,49 +442,49 @@ function MJFileFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(ctx_r1.record.Name);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.record.ContentType || "Document");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatFileSize(ctx_r1.record.ContentLength));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.Status ? 13 : -1);
+    i0.ɵɵconditional((tmp_5_0 = ctx_r1.FileSizeLabel) ? 11 : -1, tmp_5_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.record.Status ? 12 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.MediaUrl ? 15 : -1);
+    i0.ɵɵconditional(ctx_r1.MediaUrl ? 14 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("title", ctx_r1.ShowDetailsSidebar ? "Hide Details" : "Show Details");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.ShowDetailsSidebar ? "Hide Details" : "Details");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.UserCanEdit ? 20 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanEdit ? 19 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.IsLoadingMedia || !ctx_r1.IsMediaLoaded ? 23 : -1);
+    i0.ɵɵconditional(ctx_r1.IsLoadingMedia || !ctx_r1.IsMediaLoaded ? 22 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_12_0 = ctx_r1.MediaType) === "image" ? 24 : tmp_12_0 === "pdf" ? 25 : tmp_12_0 === "video" ? 26 : tmp_12_0 === "audio" ? 27 : tmp_12_0 === "text" ? 28 : 29);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.ShowDetailsSidebar ? 30 : -1);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r1.MediaType) === "image" ? 23 : tmp_12_0 === "pdf" ? 24 : tmp_12_0 === "video" ? 25 : tmp_12_0 === "audio" ? 26 : tmp_12_0 === "text" ? 27 : tmp_12_0 === "docx" ? 28 : tmp_12_0 === "xlsx" ? 29 : 30);
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(ctx_r1.ShowDetailsSidebar ? 31 : -1);
 } }
 function MJFileFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 65)(2, "button", 66);
-    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleViewMode()); });
-    i0.ɵɵelement(3, "i", 67);
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 70)(2, "button", 71);
+    i0.ɵɵlistener("click", function MJFileFormComponentExtended_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleViewMode()); });
+    i0.ɵɵelement(3, "i", 72);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Return to File Preview");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(6, "mj-record-form-container", 68);
-    i0.ɵɵlistener("Navigate", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_Navigate_6_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormNavigate($event)); })("DeleteRequested", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_DeleteRequested_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteRequested()); })("FavoriteToggled", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_FavoriteToggled_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFavoriteToggled()); })("HistoryRequested", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_HistoryRequested_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnHistoryRequested()); })("ListManagementRequested", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_ListManagementRequested_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementRequested()); });
-    i0.ɵɵelement(7, "mj-form-panel-slot", 69);
-    i0.ɵɵelementStart(8, "mj-collapsible-panel", 70);
-    i0.ɵɵelement(9, "mj-form-field", 71)(10, "mj-form-field", 72);
+    i0.ɵɵelementStart(6, "mj-record-form-container", 73);
+    i0.ɵɵlistener("Navigate", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_Navigate_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormNavigate($event)); })("DeleteRequested", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_DeleteRequested_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteRequested()); })("FavoriteToggled", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_FavoriteToggled_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFavoriteToggled()); })("HistoryRequested", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_HistoryRequested_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnHistoryRequested()); })("ListManagementRequested", function MJFileFormComponentExtended_Conditional_1_Template_mj_record_form_container_ListManagementRequested_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementRequested()); });
+    i0.ɵɵelement(7, "mj-form-panel-slot", 74);
+    i0.ɵɵelementStart(8, "mj-collapsible-panel", 75);
+    i0.ɵɵelement(9, "mj-form-field", 76)(10, "mj-form-field", 77);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "mj-collapsible-panel", 73);
-    i0.ɵɵelement(12, "mj-form-field", 74)(13, "mj-form-field", 75);
+    i0.ɵɵelementStart(11, "mj-collapsible-panel", 78);
+    i0.ɵɵelement(12, "mj-form-field", 79)(13, "mj-form-field", 80);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "mj-collapsible-panel", 76);
-    i0.ɵɵelement(15, "mj-form-field", 77)(16, "mj-form-field", 78)(17, "mj-form-field", 79)(18, "mj-form-field", 80);
+    i0.ɵɵelementStart(14, "mj-collapsible-panel", 81);
+    i0.ɵɵelement(15, "mj-form-field", 82)(16, "mj-form-field", 83)(17, "mj-form-field", 84);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "mj-collapsible-panel", 81);
-    i0.ɵɵelement(20, "mj-relationship-view", 64);
+    i0.ɵɵelementStart(18, "mj-collapsible-panel", 85);
+    i0.ɵɵelement(19, "mj-relationship-view", 69);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(21, "mj-form-panel-slot", 82);
+    i0.ɵɵelement(20, "mj-form-panel-slot", 86);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -426,8 +513,6 @@ function MJFileFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("Record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode)("FormContext", ctx_r1.formContext);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode)("FormContext", ctx_r1.formContext);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("Form", ctx_r1)("FormContext", ctx_r1.formContext);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: File Entity Record Links", "FileID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: File Entity Record Links", "FileID"));
@@ -557,6 +642,11 @@ let MJFileFormComponentExtended = class MJFileFormComponentExtended extends MJFi
                     }
                     this.IsMediaLoaded = true;
                 }
+                else if (!MediaLoadsByElement(mediaType)) {
+                    // No element will fire `load` for this type: the fallback card is the view, so it is loaded now.
+                    // Without this the overlay stayed on "Loading…" for every .zip and the like (MJ#4947).
+                    this.IsMediaLoaded = true;
+                }
             }
             else {
                 this.IsMediaLoaded = true;
@@ -579,28 +669,9 @@ let MJFileFormComponentExtended = class MJFileFormComponentExtended extends MJFi
             this.cdr.markForCheck();
         }, 350);
     }
-    /**
-     * Determines media type category based on MIME type or file extension.
-     */
+    /** The viewer's category for the file, from its MIME type or its name (`ClassifyFileMediaType`). */
     get MediaType() {
-        const mime = (this.record?.ContentType || '').toLowerCase();
-        const name = (this.record?.Name || '').toLowerCase();
-        if (mime.startsWith('image/') || /\.(png|jpe?g|gif|webp|svg|ico|bmp|avif)$/.test(name))
-            return 'image';
-        if (mime === 'application/pdf' || name.endsWith('.pdf'))
-            return 'pdf';
-        if (mime.startsWith('video/') || /\.(mp4|webm|ogg|mov|mkv|avi)$/.test(name))
-            return 'video';
-        if (mime.startsWith('audio/') || /\.(mp3|wav|ogg|aac|m4a|flac)$/.test(name))
-            return 'audio';
-        if (mime.startsWith('text/') ||
-            mime.includes('json') ||
-            mime.includes('xml') ||
-            mime.includes('javascript') ||
-            /\.(txt|md|csv|json|xml|yaml|yml|js|ts|html|css|sql|sh|log)$/.test(name)) {
-            return 'text';
-        }
-        return 'other';
+        return ClassifyFileMediaType(this.record?.ContentType, this.record?.Name);
     }
     get FileIconClass() {
         switch (this.MediaType) {
@@ -609,16 +680,15 @@ let MJFileFormComponentExtended = class MJFileFormComponentExtended extends MJFi
             case 'video': return 'fa-solid fa-file-video mj-file-color-video';
             case 'audio': return 'fa-solid fa-file-audio mj-file-color-audio';
             case 'text': return 'fa-solid fa-file-lines mj-file-color-text';
+            case 'docx': return 'fa-solid fa-file-word mj-file-color-word';
+            case 'xlsx': return 'fa-solid fa-file-excel mj-file-color-excel';
             default: return 'fa-solid fa-file mj-file-color-generic';
         }
     }
-    FormatFileSize(bytes) {
-        if (bytes == null || isNaN(bytes) || bytes <= 0)
-            return '0 B';
-        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-        const idx = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-        const val = bytes / Math.pow(1024, idx);
-        return `${val.toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
+    /** The size badge's text, or null when no size is recorded: `MJ: Files` has no length column today. */
+    get FileSizeLabel() {
+        const length = this.record.ContentLength;
+        return DescribeFileSize(length);
     }
     OpenInExternalTab() {
         if (this.MediaUrl) {
@@ -636,11 +706,11 @@ let MJFileFormComponentExtended = class MJFileFormComponentExtended extends MJFi
         this.ViewStandardForm = !this.ViewStandardForm;
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJFileFormComponentExtended_BaseFactory; return function MJFileFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJFileFormComponentExtended_BaseFactory || (ɵMJFileFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJFileFormComponentExtended)))(__ngFactoryType__ || MJFileFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFileFormComponentExtended, selectors: [["mj-file-form-extended"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [[1, "mj-file-viewer-container"], [1, "mj-file-standard-form-wrapper"], [1, "mj-file-viewer-header"], [1, "mj-file-viewer-header-left"], [1, "mj-file-viewer-icon-box"], [1, "mj-file-viewer-title-group"], [1, "mj-file-viewer-title", 3, "title"], [1, "mj-file-viewer-badges"], [1, "mj-file-badge", "mj-file-badge--type"], [1, "mj-file-badge", "mj-file-badge--size"], [1, "mj-file-badge", "mj-file-badge--status"], [1, "mj-file-viewer-header-right"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", "title", "Open file in new browser tab"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "title"], [1, "fa-solid", "fa-circle-info"], ["type", "button", "mjButton", "", "variant", "tertiary", "size", "sm", "title", "Switch to full record editor"], [1, "mj-file-viewer-body"], [1, "mj-file-viewer-stage"], [1, "mj-file-viewer-loading-overlay"], [1, "mj-file-media-text-box"], [1, "mj-file-viewer-fallback"], [1, "mj-file-viewer-sidebar"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", "title", "Open file in new browser tab", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], ["type", "button", "mjButton", "", "variant", "tertiary", "size", "sm", "title", "Switch to full record editor", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], [3, "text"], [1, "mj-file-media-image-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-image-box"], [3, "load", "error", "src", "alt"], [1, "fa-solid", "fa-file-image", "mj-file-fallback-icon"], [1, "mj-file-media-frame-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-frame-box"], ["title", "Document Preview", 3, "load", "src"], [1, "fa-solid", "fa-file-pdf", "mj-file-fallback-icon"], [1, "mj-file-media-video-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-video-box"], ["controls", "", "autoplay", "", 3, "loadeddata", "error", "src"], [1, "fa-solid", "fa-file-video", "mj-file-fallback-icon"], [1, "mj-file-media-audio-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-audio-box"], [1, "mj-file-audio-visual-icon"], [1, "fa-solid", "fa-headphones"], ["controls", "", 3, "loadeddata", "error", "src"], [1, "fa-solid", "fa-file-audio", "mj-file-fallback-icon"], [1, "mj-file-fallback-icon"], [1, "mj-file-fallback-meta"], [1, "mj-file-fallback-desc"], ["type", "button", "mjButton", "", "variant", "primary"], ["type", "button", "mjButton", "", "variant", "primary", 3, "click"], [1, "mj-file-sidebar-header"], ["type", "button", "title", "Collapse Sidebar", 1, "mj-file-sidebar-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-file-sidebar-content"], [1, "mj-file-sidebar-card"], [1, "mj-file-meta-row"], [1, "mj-file-meta-label"], [1, "mj-file-meta-val", "font-semibold"], [1, "mj-file-meta-val", "font-mono"], [1, "mj-file-meta-val"], [1, "mj-file-sidebar-section"], [1, "mj-file-sidebar-section-title"], [1, "fa-solid", "fa-link"], [1, "mj-file-relationship-wrapper"], [3, "Params", "NewRecordValues"], [1, "mj-file-mode-switch-bar"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent"], ["Slot", "before-fields", 3, "Entity", "Record", "FormComponent", "FormContext"], ["SectionKey", "fileBasics", "SectionName", "File Basics", "Icon", "fa fa-file", 3, "Form", "FormContext"], ["FieldName", "Name", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "classificationStatus", "SectionName", "Classification & Status", "Icon", "fa fa-tags", 3, "Form", "FormContext"], ["FieldName", "CategoryID", "Type", "textbox", "LinkType", "Record", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Status", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "storageDetails", "SectionName", "Storage Details", "Icon", "fa fa-database", 3, "Form", "FormContext"], ["FieldName", "ProviderID", "Type", "textbox", "LinkType", "Record", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "ProviderKey", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "ContentType", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "ContentLength", "Type", "numeric", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "mJFileEntityRecordLinks", "SectionName", "File Entity Record Links", "Icon", "fa fa-link", 3, "Form", "FormContext"], ["Slot", "after-fields", 3, "Entity", "Record", "FormComponent", "FormContext"]], template: function MJFileFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Template, 31, 14, "div", 0)(1, MJFileFormComponentExtended_Conditional_1_Template, 22, 54, "div", 1);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFileFormComponentExtended, selectors: [["mj-file-form-extended"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [[1, "mj-file-viewer-container"], [1, "mj-file-standard-form-wrapper"], [1, "mj-file-viewer-header"], [1, "mj-file-viewer-header-left"], [1, "mj-file-viewer-icon-box"], [1, "mj-file-viewer-title-group"], [1, "mj-file-viewer-title", 3, "title"], [1, "mj-file-viewer-badges"], [1, "mj-file-badge", "mj-file-badge--type"], [1, "mj-file-badge", "mj-file-badge--size"], [1, "mj-file-badge", "mj-file-badge--status"], [1, "mj-file-viewer-header-right"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", "title", "Open file in new browser tab"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "title"], [1, "fa-solid", "fa-circle-info"], ["type", "button", "mjButton", "", "variant", "tertiary", "size", "sm", "title", "Switch to full record editor"], [1, "mj-file-viewer-body"], [1, "mj-file-viewer-stage"], [1, "mj-file-viewer-loading-overlay"], [1, "mj-file-media-text-box"], [1, "mj-file-viewer-fallback"], [1, "mj-file-viewer-sidebar"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", "title", "Open file in new browser tab", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], ["type", "button", "mjButton", "", "variant", "tertiary", "size", "sm", "title", "Switch to full record editor", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], [3, "text"], [1, "mj-file-media-image-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-image-box"], [3, "load", "error", "src", "alt"], [1, "fa-solid", "fa-file-image", "mj-file-fallback-icon"], [1, "mj-file-media-frame-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-frame-box"], ["title", "Document Preview", 3, "load", "src"], [1, "fa-solid", "fa-file-pdf", "mj-file-fallback-icon"], [1, "mj-file-media-video-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-video-box"], ["controls", "", "autoplay", "", 3, "loadeddata", "error", "src"], [1, "fa-solid", "fa-file-video", "mj-file-fallback-icon"], [1, "mj-file-media-audio-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-audio-box"], [1, "mj-file-audio-visual-icon"], [1, "fa-solid", "fa-headphones"], ["controls", "", 3, "loadeddata", "error", "src"], [1, "fa-solid", "fa-file-audio", "mj-file-fallback-icon"], [1, "mj-file-media-office-box", 3, "mj-file-media--hidden"], [1, "mj-file-media-office-box"], [3, "Loaded", "Failed", "Url"], [1, "fa-solid", "fa-file-word", "mj-file-fallback-icon"], [1, "fa-solid", "fa-file-excel", "mj-file-fallback-icon"], [1, "mj-file-fallback-icon"], [1, "mj-file-fallback-meta"], [1, "mj-file-fallback-desc"], ["type", "button", "mjButton", "", "variant", "primary"], ["type", "button", "mjButton", "", "variant", "primary", 3, "click"], [1, "mj-file-sidebar-header"], ["type", "button", "title", "Collapse Sidebar", 1, "mj-file-sidebar-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-file-sidebar-content"], [1, "mj-file-sidebar-card"], [1, "mj-file-meta-row"], [1, "mj-file-meta-label"], [1, "mj-file-meta-val", "font-semibold"], [1, "mj-file-meta-val", "font-mono"], [1, "mj-file-meta-val"], [1, "mj-file-sidebar-section"], [1, "mj-file-sidebar-section-title"], [1, "fa-solid", "fa-link"], [1, "mj-file-relationship-wrapper"], [3, "Params", "NewRecordValues"], [1, "mj-file-mode-switch-bar"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent"], ["Slot", "before-fields", 3, "Entity", "Record", "FormComponent", "FormContext"], ["SectionKey", "fileBasics", "SectionName", "File Basics", "Icon", "fa fa-file", 3, "Form", "FormContext"], ["FieldName", "Name", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "classificationStatus", "SectionName", "Classification & Status", "Icon", "fa fa-tags", 3, "Form", "FormContext"], ["FieldName", "CategoryID", "Type", "textbox", "LinkType", "Record", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Status", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "storageDetails", "SectionName", "Storage Details", "Icon", "fa fa-database", 3, "Form", "FormContext"], ["FieldName", "ProviderID", "Type", "textbox", "LinkType", "Record", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "ProviderKey", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "ContentType", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "mJFileEntityRecordLinks", "SectionName", "File Entity Record Links", "Icon", "fa fa-link", 3, "Form", "FormContext"], ["Slot", "after-fields", 3, "Entity", "Record", "FormComponent", "FormContext"]], template: function MJFileFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MJFileFormComponentExtended_Conditional_0_Template, 32, 14, "div", 0)(1, MJFileFormComponentExtended_Conditional_1_Template, 21, 50, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.ViewStandardForm ? 0 : 1);
-        } }, dependencies: [i1.MJButtonDirective, i2.MjFormFieldComponent, i2.MjCollapsiblePanelComponent, i2.MjRecordFormContainerComponent, i2.FormPanelSlotComponent, i3.LoadingComponent, i4.DatePipe], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", ".mj-file-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n\n.mj-file-viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.mj-file-viewer-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  min-width: 0;\n}\n\n.mj-file-viewer-icon-box[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.mj-file-color-pdf[_ngcontent-%COMP%] { color: var(--mj-status-danger, #ef4444); }\n.mj-file-color-image[_ngcontent-%COMP%] { color: var(--mj-status-success, #10b981); }\n.mj-file-color-video[_ngcontent-%COMP%] { color: var(--mj-status-purple, #8b5cf6); }\n.mj-file-color-audio[_ngcontent-%COMP%] { color: var(--mj-status-warning, #f59e0b); }\n.mj-file-color-text[_ngcontent-%COMP%] { color: var(--mj-status-info, #3b82f6); }\n.mj-file-color-generic[_ngcontent-%COMP%] { color: var(--mj-text-muted, #94a3b8); }\n\n.mj-file-viewer-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mj-file-viewer-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-file-viewer-badges[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 3px;\n}\n\n.mj-file-badge[_ngcontent-%COMP%] {\n  font-size: 0.72rem;\n  font-weight: 600;\n  padding: 2px 7px;\n  border-radius: 9999px;\n}\n\n.mj-file-badge--type[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--size[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--status[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.mj-file-viewer-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n\n.mj-file-viewer-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n\n.mj-file-viewer-stage[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: auto;\n  background: var(--mj-bg-surface-sunken, #0f172a);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n}\n\n.mj-file-viewer-loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--mj-bg-surface-sunken, #0f172a);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n}\n\n.mj-file-media--hidden[_ngcontent-%COMP%] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.mj-file-media-image-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-image-box[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-frame-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n.mj-file-media-frame-box[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.mj-file-media-video-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-video-box[_ngcontent-%COMP%]   video[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-audio-box[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n}\n\n.mj-file-audio-visual-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-media-text-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.mj-file-media-text-box[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.85rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.mj-file-viewer-fallback[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  border: 1px solid var(--mj-border-default);\n  max-width: 480px;\n}\n\n.mj-file-fallback-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  margin-bottom: 14px;\n}\n\n.mj-file-viewer-fallback[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-fallback-meta[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 0.82rem;\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-fallback-desc[_ngcontent-%COMP%] {\n  margin: 0 0 18px 0;\n  font-size: 0.88rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n}\n\n\n.mj-file-viewer-sidebar[_ngcontent-%COMP%] {\n  width: 380px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mj-file-sidebar-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-file-sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  font-size: 0.95rem;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n}\n\n.mj-file-sidebar-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mj-file-sidebar-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, #f8fafc);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mj-file-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  font-size: 0.83rem;\n  gap: 8px;\n}\n\n.mj-file-meta-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  flex-shrink: 0;\n}\n\n.mj-file-meta-val[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  text-align: right;\n  word-break: break-all;\n}\n\n.mj-file-sidebar-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mj-file-sidebar-section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-file-relationship-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  overflow: hidden;\n  min-height: 250px;\n}\n\n\n.mj-file-standard-form-wrapper[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.mj-file-mode-switch-bar[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n}"] }); }
+        } }, dependencies: [i1.DocxPreviewComponent, i1.XlsxPreviewComponent, i2.MJButtonDirective, i3.MjFormFieldComponent, i3.MjCollapsiblePanelComponent, i3.MjRecordFormContainerComponent, i3.FormPanelSlotComponent, i4.LoadingComponent, i5.DatePipe], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", ".mj-file-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n\n.mj-file-viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.mj-file-viewer-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  min-width: 0;\n}\n\n.mj-file-viewer-icon-box[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.mj-file-color-pdf[_ngcontent-%COMP%] { color: var(--mj-status-danger, #ef4444); }\n.mj-file-color-image[_ngcontent-%COMP%] { color: var(--mj-status-success, #10b981); }\n.mj-file-color-video[_ngcontent-%COMP%] { color: var(--mj-status-purple, #8b5cf6); }\n.mj-file-color-audio[_ngcontent-%COMP%] { color: var(--mj-status-warning, #f59e0b); }\n.mj-file-color-text[_ngcontent-%COMP%] { color: var(--mj-status-info, #3b82f6); }\n.mj-file-color-generic[_ngcontent-%COMP%] { color: var(--mj-text-muted, #94a3b8); }\n.mj-file-color-word[_ngcontent-%COMP%] { color: var(--mj-status-info, #2b579a); }\n.mj-file-color-excel[_ngcontent-%COMP%] { color: var(--mj-status-success, #217346); }\n\n.mj-file-viewer-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mj-file-viewer-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-file-viewer-badges[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 3px;\n}\n\n.mj-file-badge[_ngcontent-%COMP%] {\n  font-size: 0.72rem;\n  font-weight: 600;\n  padding: 2px 7px;\n  border-radius: 9999px;\n}\n\n.mj-file-badge--type[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--size[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--status[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.mj-file-viewer-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n\n.mj-file-viewer-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n\n.mj-file-viewer-stage[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: auto;\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n}\n\n.mj-file-viewer-loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n}\n\n.mj-file-media--hidden[_ngcontent-%COMP%] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.mj-file-media-image-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-image-box[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-frame-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}\n\n.mj-file-media-frame-box[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.mj-file-media-video-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-video-box[_ngcontent-%COMP%]   video[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-audio-box[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n}\n\n.mj-file-audio-visual-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-media-text-box[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.mj-file-media-text-box[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.85rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.mj-file-viewer-fallback[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  border: 1px solid var(--mj-border-default);\n  max-width: 480px;\n}\n\n.mj-file-fallback-icon[_ngcontent-%COMP%] {\n  font-size: 3.5rem;\n  margin-bottom: 14px;\n}\n\n.mj-file-viewer-fallback[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-fallback-meta[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 0.82rem;\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-fallback-desc[_ngcontent-%COMP%] {\n  margin: 0 0 18px 0;\n  font-size: 0.88rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n}\n\n\n.mj-file-viewer-sidebar[_ngcontent-%COMP%] {\n  width: 380px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mj-file-sidebar-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-file-sidebar-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  font-size: 0.95rem;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n}\n\n.mj-file-sidebar-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mj-file-sidebar-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken, #f8fafc);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mj-file-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  font-size: 0.83rem;\n  gap: 8px;\n}\n\n.mj-file-meta-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  flex-shrink: 0;\n}\n\n.mj-file-meta-val[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  text-align: right;\n  word-break: break-all;\n}\n\n.mj-file-sidebar-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mj-file-sidebar-section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-file-relationship-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  overflow: hidden;\n  min-height: 250px;\n}\n\n\n.mj-file-standard-form-wrapper[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.mj-file-mode-switch-bar[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n\n.mj-file-media-office-box[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.mj-file-media-office-box[_ngcontent-%COMP%]    > mj-docx-preview[_ngcontent-%COMP%], \n.mj-file-media-office-box[_ngcontent-%COMP%]    > mj-xlsx-preview[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: block;\n}"] }); }
 };
 MJFileFormComponentExtended = MJFileFormComponentExtended_1 = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Files', 100)
@@ -648,7 +718,7 @@ MJFileFormComponentExtended = MJFileFormComponentExtended_1 = __decorate([
 export { MJFileFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFileFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-file-form-extended', template: "@if (!ViewStandardForm) {\n  <div class=\"mj-file-viewer-container\">\n    <!-- Top Action & Info Header -->\n    <header class=\"mj-file-viewer-header\">\n      <div class=\"mj-file-viewer-header-left\">\n        <div class=\"mj-file-viewer-icon-box\">\n          <i [class]=\"FileIconClass\"></i>\n        </div>\n        <div class=\"mj-file-viewer-title-group\">\n          <h1 class=\"mj-file-viewer-title\" [title]=\"record.Name\">{{ record.Name }}</h1>\n          <div class=\"mj-file-viewer-badges\">\n            <span class=\"mj-file-badge mj-file-badge--type\">{{ record.ContentType || 'Document' }}</span>\n            <span class=\"mj-file-badge mj-file-badge--size\">{{ FormatFileSize(record.ContentLength) }}</span>\n            @if (record.Status) {\n              <span class=\"mj-file-badge mj-file-badge--status\">{{ record.Status }}</span>\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mj-file-viewer-header-right\">\n        @if (MediaUrl) {\n          <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"OpenInExternalTab()\" title=\"Open file in new browser tab\">\n            <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n            <span>Open in New Tab</span>\n          </button>\n        }\n        <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"ToggleDetailsSidebar()\" [title]=\"ShowDetailsSidebar ? 'Hide Details' : 'Show Details'\">\n          <i class=\"fa-solid fa-circle-info\"></i>\n          <span>{{ ShowDetailsSidebar ? 'Hide Details' : 'Details' }}</span>\n        </button>\n        @if (UserCanEdit) {\n          <button type=\"button\" mjButton variant=\"tertiary\" size=\"sm\" (click)=\"ToggleViewMode()\" title=\"Switch to full record editor\">\n            <i class=\"fa-solid fa-pen-to-square\"></i>\n            <span>Edit Record</span>\n          </button>\n        }\n      </div>\n    </header>\n\n    <!-- Body / Split Content Area -->\n    <div class=\"mj-file-viewer-body\">\n      <!-- Media Stage -->\n      <main class=\"mj-file-viewer-stage\">\n        @if (IsLoadingMedia || !IsMediaLoaded) {\n          <div class=\"mj-file-viewer-loading-overlay\">\n            <mj-loading [text]=\"'Loading ' + (record.Name || 'file') + '...'\"></mj-loading>\n          </div>\n        }\n\n        @switch (MediaType) {\n          @case ('image') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-image-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <img [src]=\"MediaUrl\" [alt]=\"record.Name\" (load)=\"OnMediaElementLoaded()\" (error)=\"OnMediaElementLoaded()\" />\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-image mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Image preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('pdf') {\n            @if (SafeMediaUrl) {\n              <div class=\"mj-file-media-frame-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <iframe [src]=\"SafeMediaUrl\" title=\"Document Preview\" (load)=\"OnMediaElementLoaded()\"></iframe>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-pdf mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>PDF preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('video') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-video-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <video controls autoplay [src]=\"MediaUrl\" (loadeddata)=\"OnMediaElementLoaded()\" (error)=\"OnMediaElementLoaded()\"></video>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-video mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Video preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('audio') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-audio-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <div class=\"mj-file-audio-visual-icon\"><i class=\"fa-solid fa-headphones\"></i></div>\n                <audio controls [src]=\"MediaUrl\" (loadeddata)=\"OnMediaElementLoaded()\" (error)=\"OnMediaElementLoaded()\"></audio>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-audio mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Audio preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('text') {\n            <div class=\"mj-file-media-text-box\">\n              <pre><code>{{ TextContent || 'Loading text content...' }}</code></pre>\n            </div>\n          }\n          @default {\n            <div class=\"mj-file-viewer-fallback\">\n              <i [class]=\"FileIconClass\" class=\"mj-file-fallback-icon\"></i>\n              <h3>{{ record.Name }}</h3>\n              <p class=\"mj-file-fallback-meta\">{{ record.ContentType || 'Document' }} &bull; {{ FormatFileSize(record.ContentLength) }}</p>\n              <p class=\"mj-file-fallback-desc\">{{ record.Description || 'Preview is not available for this file type.' }}</p>\n              @if (MediaUrl) {\n                <button type=\"button\" mjButton variant=\"primary\" (click)=\"OpenInExternalTab()\">\n                  <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                  <span>Open in Browser</span>\n                </button>\n              }\n            </div>\n          }\n        }\n      </main>\n\n      <!-- Details & Linked Records Sidebar -->\n      @if (ShowDetailsSidebar) {\n        <aside class=\"mj-file-viewer-sidebar\">\n          <div class=\"mj-file-sidebar-header\">\n            <h3>File Details & Links</h3>\n            <button type=\"button\" class=\"mj-file-sidebar-close\" (click)=\"ToggleDetailsSidebar()\" title=\"Collapse Sidebar\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n\n          <div class=\"mj-file-sidebar-content\">\n            <!-- Metadata Cards -->\n            <div class=\"mj-file-sidebar-card\">\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">File Name:</span>\n                <span class=\"mj-file-meta-val font-semibold\">{{ record.Name }}</span>\n              </div>\n              @if (record.Description) {\n                <div class=\"mj-file-meta-row\">\n                  <span class=\"mj-file-meta-label\">Description:</span>\n                  <span class=\"mj-file-meta-val\">{{ record.Description }}</span>\n                </div>\n              }\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">MIME Type:</span>\n                <span class=\"mj-file-meta-val font-mono\">{{ record.ContentType || 'Unknown' }}</span>\n              </div>\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">Size:</span>\n                <span class=\"mj-file-meta-val\">{{ FormatFileSize(record.ContentLength) }}</span>\n              </div>\n              @if (record.Status) {\n                <div class=\"mj-file-meta-row\">\n                  <span class=\"mj-file-meta-label\">Status:</span>\n                  <span class=\"mj-file-meta-val\">{{ record.Status }}</span>\n                </div>\n              }\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">Created:</span>\n                <span class=\"mj-file-meta-val\">{{ record.CreatedAt | date:'short' }}</span>\n              </div>\n            </div>\n\n            <!-- Linked Records -->\n            <div class=\"mj-file-sidebar-section\">\n              <h4 class=\"mj-file-sidebar-section-title\">\n                <i class=\"fa-solid fa-link\"></i>\n                <span>Linked Records</span>\n              </h4>\n              <div class=\"mj-file-relationship-wrapper\">\n                <mj-relationship-view \n                  [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: File Entity Record Links', 'FileID')\"\n                  [NewRecordValues]=\"NewRecordValues('MJ: File Entity Record Links', 'FileID')\">\n                </mj-relationship-view>\n              </div>\n            </div>\n          </div>\n        </aside>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"mj-file-standard-form-wrapper\">\n    <div class=\"mj-file-mode-switch-bar\">\n      <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"ToggleViewMode()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        <span>Return to File Preview</span>\n      </button>\n    </div>\n\n    <mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n        (Navigate)=\"OnFormNavigate($event)\"\n        (DeleteRequested)=\"OnDeleteRequested()\"\n        (FavoriteToggled)=\"OnFavoriteToggled()\"\n        (HistoryRequested)=\"OnHistoryRequested()\"\n        (ListManagementRequested)=\"OnListManagementRequested()\">\n\n        <mj-form-panel-slot Entity=\"{{record.EntityInfo.Name}}\" Slot=\"before-fields\" [Record]=\"record\" [FormComponent]=\"this\" [FormContext]=\"formContext\"></mj-form-panel-slot>\n\n        <!-- File Basics Section -->\n        <mj-collapsible-panel\n            SectionKey=\"fileBasics\"\n            SectionName=\"File Basics\"\n            Icon=\"fa fa-file\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n        </mj-collapsible-panel>\n\n        <!-- Classification & Status Section -->\n        <mj-collapsible-panel\n            SectionKey=\"classificationStatus\"\n            SectionName=\"Classification & Status\"\n            Icon=\"fa fa-tags\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Status\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n        </mj-collapsible-panel>\n\n        <!-- Storage Details Section -->\n        <mj-collapsible-panel\n            SectionKey=\"storageDetails\"\n            SectionName=\"Storage Details\"\n            Icon=\"fa fa-database\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ProviderID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ProviderKey\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ContentType\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ContentLength\"\n                Type=\"numeric\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n        </mj-collapsible-panel>\n\n        <!-- Linked Records Section -->\n        <mj-collapsible-panel\n            SectionKey=\"mJFileEntityRecordLinks\"\n            SectionName=\"File Entity Record Links\"\n            Icon=\"fa fa-link\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-relationship-view \n                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: File Entity Record Links','FileID')\"\n                [NewRecordValues]=\"NewRecordValues('MJ: File Entity Record Links','FileID')\">\n            </mj-relationship-view>\n        </mj-collapsible-panel>\n\n        <mj-form-panel-slot Entity=\"{{record.EntityInfo.Name}}\" Slot=\"after-fields\" [Record]=\"record\" [FormComponent]=\"this\" [FormContext]=\"formContext\"></mj-form-panel-slot>\n    </mj-record-form-container>\n  </div>\n}\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", ".mj-file-viewer-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n/* Header */\n.mj-file-viewer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.mj-file-viewer-header-left {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  min-width: 0;\n}\n\n.mj-file-viewer-icon-box {\n  width: 38px;\n  height: 38px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.mj-file-color-pdf { color: var(--mj-status-danger, #ef4444); }\n.mj-file-color-image { color: var(--mj-status-success, #10b981); }\n.mj-file-color-video { color: var(--mj-status-purple, #8b5cf6); }\n.mj-file-color-audio { color: var(--mj-status-warning, #f59e0b); }\n.mj-file-color-text { color: var(--mj-status-info, #3b82f6); }\n.mj-file-color-generic { color: var(--mj-text-muted, #94a3b8); }\n\n.mj-file-viewer-title-group {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mj-file-viewer-title {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-file-viewer-badges {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 3px;\n}\n\n.mj-file-badge {\n  font-size: 0.72rem;\n  font-weight: 600;\n  padding: 2px 7px;\n  border-radius: 9999px;\n}\n\n.mj-file-badge--type {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--size {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--status {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.mj-file-viewer-header-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Body / Split View */\n.mj-file-viewer-body {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Stage (Media Preview) */\n.mj-file-viewer-stage {\n  flex: 1;\n  position: relative;\n  overflow: auto;\n  background: var(--mj-bg-surface-sunken, #0f172a);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n}\n\n.mj-file-viewer-loading-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--mj-bg-surface-sunken, #0f172a);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n}\n\n.mj-file-media--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.mj-file-media-image-box {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-image-box img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-frame-box {\n  width: 100%;\n  height: 100%;\n}\n\n.mj-file-media-frame-box iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.mj-file-media-video-box {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-video-box video {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-audio-box {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n}\n\n.mj-file-audio-visual-icon {\n  font-size: 3rem;\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-media-text-box {\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.mj-file-media-text-box pre {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.85rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.mj-file-viewer-fallback {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  border: 1px solid var(--mj-border-default);\n  max-width: 480px;\n}\n\n.mj-file-fallback-icon {\n  font-size: 3.5rem;\n  margin-bottom: 14px;\n}\n\n.mj-file-viewer-fallback h3 {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-fallback-meta {\n  margin: 0 0 10px 0;\n  font-size: 0.82rem;\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-fallback-desc {\n  margin: 0 0 18px 0;\n  font-size: 0.88rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n}\n\n/* Sidebar */\n.mj-file-viewer-sidebar {\n  width: 380px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mj-file-sidebar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-file-sidebar-header h3 {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-close {\n  background: none;\n  border: none;\n  font-size: 0.95rem;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n}\n\n.mj-file-sidebar-close:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mj-file-sidebar-card {\n  background: var(--mj-bg-surface-sunken, #f8fafc);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mj-file-meta-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  font-size: 0.83rem;\n  gap: 8px;\n}\n\n.mj-file-meta-label {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  flex-shrink: 0;\n}\n\n.mj-file-meta-val {\n  color: var(--mj-text-primary);\n  text-align: right;\n  word-break: break-all;\n}\n\n.mj-file-sidebar-section {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mj-file-sidebar-section-title {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-file-relationship-wrapper {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  overflow: hidden;\n  min-height: 250px;\n}\n\n/* Standard Form Wrapper */\n.mj-file-standard-form-wrapper {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.mj-file-mode-switch-bar {\n  padding: 8px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-file-form-extended', template: "@if (!ViewStandardForm) {\n  <div class=\"mj-file-viewer-container\">\n    <!-- Top Action & Info Header -->\n    <header class=\"mj-file-viewer-header\">\n      <div class=\"mj-file-viewer-header-left\">\n        <div class=\"mj-file-viewer-icon-box\">\n          <i [class]=\"FileIconClass\"></i>\n        </div>\n        <div class=\"mj-file-viewer-title-group\">\n          <h1 class=\"mj-file-viewer-title\" [title]=\"record.Name\">{{ record.Name }}</h1>\n          <div class=\"mj-file-viewer-badges\">\n            <span class=\"mj-file-badge mj-file-badge--type\">{{ record.ContentType || 'Document' }}</span>\n            @if (FileSizeLabel; as size) {\n              <span class=\"mj-file-badge mj-file-badge--size\">{{ size }}</span>\n            }\n            @if (record.Status) {\n              <span class=\"mj-file-badge mj-file-badge--status\">{{ record.Status }}</span>\n            }\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mj-file-viewer-header-right\">\n        @if (MediaUrl) {\n          <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"OpenInExternalTab()\" title=\"Open file in new browser tab\">\n            <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n            <span>Open in New Tab</span>\n          </button>\n        }\n        <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"ToggleDetailsSidebar()\" [title]=\"ShowDetailsSidebar ? 'Hide Details' : 'Show Details'\">\n          <i class=\"fa-solid fa-circle-info\"></i>\n          <span>{{ ShowDetailsSidebar ? 'Hide Details' : 'Details' }}</span>\n        </button>\n        @if (UserCanEdit) {\n          <button type=\"button\" mjButton variant=\"tertiary\" size=\"sm\" (click)=\"ToggleViewMode()\" title=\"Switch to full record editor\">\n            <i class=\"fa-solid fa-pen-to-square\"></i>\n            <span>Edit Record</span>\n          </button>\n        }\n      </div>\n    </header>\n\n    <!-- Body / Split Content Area -->\n    <div class=\"mj-file-viewer-body\">\n      <!-- Media Stage -->\n      <main class=\"mj-file-viewer-stage\">\n        @if (IsLoadingMedia || !IsMediaLoaded) {\n          <div class=\"mj-file-viewer-loading-overlay\">\n            <mj-loading [text]=\"'Loading ' + (record.Name || 'file') + '...'\"></mj-loading>\n          </div>\n        }\n\n        @switch (MediaType) {\n          @case ('image') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-image-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <img [src]=\"MediaUrl\" [alt]=\"record.Name\" (load)=\"OnMediaElementLoaded()\" (error)=\"OnMediaElementLoaded()\" />\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-image mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Image preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('pdf') {\n            @if (SafeMediaUrl) {\n              <div class=\"mj-file-media-frame-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <iframe [src]=\"SafeMediaUrl\" title=\"Document Preview\" (load)=\"OnMediaElementLoaded()\"></iframe>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-pdf mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>PDF preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('video') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-video-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <video controls autoplay [src]=\"MediaUrl\" (loadeddata)=\"OnMediaElementLoaded()\" (error)=\"OnMediaElementLoaded()\"></video>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-video mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Video preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('audio') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-audio-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <div class=\"mj-file-audio-visual-icon\"><i class=\"fa-solid fa-headphones\"></i></div>\n                <audio controls [src]=\"MediaUrl\" (loadeddata)=\"OnMediaElementLoaded()\" (error)=\"OnMediaElementLoaded()\"></audio>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-audio mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Audio preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('text') {\n            <div class=\"mj-file-media-text-box\">\n              <pre><code>{{ TextContent || 'Loading text content...' }}</code></pre>\n            </div>\n          }\n          @case ('docx') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-office-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <mj-docx-preview [Url]=\"MediaUrl\" (Loaded)=\"OnMediaElementLoaded()\" (Failed)=\"OnMediaElementLoaded()\"></mj-docx-preview>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-word mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Document preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @case ('xlsx') {\n            @if (MediaUrl) {\n              <div class=\"mj-file-media-office-box\" [class.mj-file-media--hidden]=\"!IsMediaLoaded\">\n                <mj-xlsx-preview [Url]=\"MediaUrl\" (Loaded)=\"OnMediaElementLoaded()\" (Failed)=\"OnMediaElementLoaded()\"></mj-xlsx-preview>\n              </div>\n            } @else {\n              <div class=\"mj-file-viewer-fallback\">\n                <i class=\"fa-solid fa-file-excel mj-file-fallback-icon\"></i>\n                <h3>{{ record.Name }}</h3>\n                <p>Workbook preview could not be loaded.</p>\n              </div>\n            }\n          }\n          @default {\n            <div class=\"mj-file-viewer-fallback\">\n              <i [class]=\"FileIconClass\" class=\"mj-file-fallback-icon\"></i>\n              <h3>{{ record.Name }}</h3>\n              <p class=\"mj-file-fallback-meta\">{{ record.ContentType || 'Document' }}@if (FileSizeLabel; as size) { &bull; {{ size }}}</p>\n              <p class=\"mj-file-fallback-desc\">{{ record.Description || 'Preview is not available for this file type.' }}</p>\n              @if (MediaUrl) {\n                <button type=\"button\" mjButton variant=\"primary\" (click)=\"OpenInExternalTab()\">\n                  <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                  <span>Open in Browser</span>\n                </button>\n              }\n            </div>\n          }\n        }\n      </main>\n\n      <!-- Details & Linked Records Sidebar -->\n      @if (ShowDetailsSidebar) {\n        <aside class=\"mj-file-viewer-sidebar\">\n          <div class=\"mj-file-sidebar-header\">\n            <h3>File Details & Links</h3>\n            <button type=\"button\" class=\"mj-file-sidebar-close\" (click)=\"ToggleDetailsSidebar()\" title=\"Collapse Sidebar\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n\n          <div class=\"mj-file-sidebar-content\">\n            <!-- Metadata Cards -->\n            <div class=\"mj-file-sidebar-card\">\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">File Name:</span>\n                <span class=\"mj-file-meta-val font-semibold\">{{ record.Name }}</span>\n              </div>\n              @if (record.Description) {\n                <div class=\"mj-file-meta-row\">\n                  <span class=\"mj-file-meta-label\">Description:</span>\n                  <span class=\"mj-file-meta-val\">{{ record.Description }}</span>\n                </div>\n              }\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">MIME Type:</span>\n                <span class=\"mj-file-meta-val font-mono\">{{ record.ContentType || 'Unknown' }}</span>\n              </div>\n              @if (FileSizeLabel; as size) {\n                <div class=\"mj-file-meta-row\">\n                  <span class=\"mj-file-meta-label\">Size:</span>\n                  <span class=\"mj-file-meta-val\">{{ size }}</span>\n                </div>\n              }\n              @if (record.Status) {\n                <div class=\"mj-file-meta-row\">\n                  <span class=\"mj-file-meta-label\">Status:</span>\n                  <span class=\"mj-file-meta-val\">{{ record.Status }}</span>\n                </div>\n              }\n              <div class=\"mj-file-meta-row\">\n                <span class=\"mj-file-meta-label\">Created:</span>\n                <span class=\"mj-file-meta-val\">{{ record.__mj_CreatedAt | date:'short' }}</span>\n              </div>\n            </div>\n\n            <!-- Linked Records -->\n            <div class=\"mj-file-sidebar-section\">\n              <h4 class=\"mj-file-sidebar-section-title\">\n                <i class=\"fa-solid fa-link\"></i>\n                <span>Linked Records</span>\n              </h4>\n              <div class=\"mj-file-relationship-wrapper\">\n                <mj-relationship-view \n                  [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: File Entity Record Links', 'FileID')\"\n                  [NewRecordValues]=\"NewRecordValues('MJ: File Entity Record Links', 'FileID')\">\n                </mj-relationship-view>\n              </div>\n            </div>\n          </div>\n        </aside>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"mj-file-standard-form-wrapper\">\n    <div class=\"mj-file-mode-switch-bar\">\n      <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" (click)=\"ToggleViewMode()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        <span>Return to File Preview</span>\n      </button>\n    </div>\n\n    <mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n        (Navigate)=\"OnFormNavigate($event)\"\n        (DeleteRequested)=\"OnDeleteRequested()\"\n        (FavoriteToggled)=\"OnFavoriteToggled()\"\n        (HistoryRequested)=\"OnHistoryRequested()\"\n        (ListManagementRequested)=\"OnListManagementRequested()\">\n\n        <mj-form-panel-slot Entity=\"{{record.EntityInfo.Name}}\" Slot=\"before-fields\" [Record]=\"record\" [FormComponent]=\"this\" [FormContext]=\"formContext\"></mj-form-panel-slot>\n\n        <!-- File Basics Section -->\n        <mj-collapsible-panel\n            SectionKey=\"fileBasics\"\n            SectionName=\"File Basics\"\n            Icon=\"fa fa-file\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n        </mj-collapsible-panel>\n\n        <!-- Classification & Status Section -->\n        <mj-collapsible-panel\n            SectionKey=\"classificationStatus\"\n            SectionName=\"Classification & Status\"\n            Icon=\"fa fa-tags\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Status\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n        </mj-collapsible-panel>\n\n        <!-- Storage Details Section -->\n        <mj-collapsible-panel\n            SectionKey=\"storageDetails\"\n            SectionName=\"Storage Details\"\n            Icon=\"fa fa-database\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ProviderID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ProviderKey\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n            <mj-form-field \n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"ContentType\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n            ></mj-form-field>\n        </mj-collapsible-panel>\n\n        <!-- Linked Records Section -->\n        <mj-collapsible-panel\n            SectionKey=\"mJFileEntityRecordLinks\"\n            SectionName=\"File Entity Record Links\"\n            Icon=\"fa fa-link\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <mj-relationship-view \n                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: File Entity Record Links','FileID')\"\n                [NewRecordValues]=\"NewRecordValues('MJ: File Entity Record Links','FileID')\">\n            </mj-relationship-view>\n        </mj-collapsible-panel>\n\n        <mj-form-panel-slot Entity=\"{{record.EntityInfo.Name}}\" Slot=\"after-fields\" [Record]=\"record\" [FormComponent]=\"this\" [FormContext]=\"formContext\"></mj-form-panel-slot>\n    </mj-record-form-container>\n  </div>\n}\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", ".mj-file-viewer-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n/* Header */\n.mj-file-viewer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.mj-file-viewer-header-left {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  min-width: 0;\n}\n\n.mj-file-viewer-icon-box {\n  width: 38px;\n  height: 38px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.mj-file-color-pdf { color: var(--mj-status-danger, #ef4444); }\n.mj-file-color-image { color: var(--mj-status-success, #10b981); }\n.mj-file-color-video { color: var(--mj-status-purple, #8b5cf6); }\n.mj-file-color-audio { color: var(--mj-status-warning, #f59e0b); }\n.mj-file-color-text { color: var(--mj-status-info, #3b82f6); }\n.mj-file-color-generic { color: var(--mj-text-muted, #94a3b8); }\n.mj-file-color-word { color: var(--mj-status-info, #2b579a); }\n.mj-file-color-excel { color: var(--mj-status-success, #217346); }\n\n.mj-file-viewer-title-group {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mj-file-viewer-title {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-file-viewer-badges {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 3px;\n}\n\n.mj-file-badge {\n  font-size: 0.72rem;\n  font-weight: 600;\n  padding: 2px 7px;\n  border-radius: 9999px;\n}\n\n.mj-file-badge--type {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--size {\n  background: var(--mj-bg-surface-sunken, #e2e8f0);\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-badge--status {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.mj-file-viewer-header-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Body / Split View */\n.mj-file-viewer-body {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Stage (Media Preview) */\n.mj-file-viewer-stage {\n  flex: 1;\n  position: relative;\n  overflow: auto;\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n}\n\n.mj-file-viewer-loading-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  background: var(--mj-bg-surface-sunken, #f1f5f9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n}\n\n.mj-file-media--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.mj-file-media-image-box {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-image-box img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-frame-box {\n  width: 100%;\n  height: 100%;\n}\n\n.mj-file-media-frame-box iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.mj-file-media-video-box {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n\n.mj-file-media-video-box video {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));\n}\n\n.mj-file-media-audio-box {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n}\n\n.mj-file-audio-visual-icon {\n  font-size: 3rem;\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-media-text-box {\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.mj-file-media-text-box pre {\n  margin: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 0.85rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.mj-file-viewer-fallback {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 40px;\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg, 12px);\n  border: 1px solid var(--mj-border-default);\n  max-width: 480px;\n}\n\n.mj-file-fallback-icon {\n  font-size: 3.5rem;\n  margin-bottom: 14px;\n}\n\n.mj-file-viewer-fallback h3 {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-fallback-meta {\n  margin: 0 0 10px 0;\n  font-size: 0.82rem;\n  color: var(--mj-text-secondary);\n}\n\n.mj-file-fallback-desc {\n  margin: 0 0 18px 0;\n  font-size: 0.88rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n}\n\n/* Sidebar */\n.mj-file-viewer-sidebar {\n  width: 380px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mj-file-sidebar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-file-sidebar-header h3 {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-close {\n  background: none;\n  border: none;\n  font-size: 0.95rem;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  padding: 4px;\n}\n\n.mj-file-sidebar-close:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-file-sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mj-file-sidebar-card {\n  background: var(--mj-bg-surface-sunken, #f8fafc);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mj-file-meta-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  font-size: 0.83rem;\n  gap: 8px;\n}\n\n.mj-file-meta-label {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  flex-shrink: 0;\n}\n\n.mj-file-meta-val {\n  color: var(--mj-text-primary);\n  text-align: right;\n  word-break: break-all;\n}\n\n.mj-file-sidebar-section {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mj-file-sidebar-section-title {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-file-relationship-wrapper {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  overflow: hidden;\n  min-height: 250px;\n}\n\n/* Standard Form Wrapper */\n.mj-file-standard-form-wrapper {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.mj-file-mode-switch-bar {\n  padding: 8px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Word and Excel previews fill the stage; the shared components scroll inside it */\n.mj-file-media-office-box {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.mj-file-media-office-box > mj-docx-preview,\n.mj-file-media-office-box > mj-xlsx-preview {\n  flex: 1;\n  min-height: 0;\n  display: block;\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFileFormComponentExtended, { className: "MJFileFormComponentExtended", filePath: "src/lib/custom/Files/file-form.component.ts", lineNumber: 58 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFileFormComponentExtended, { className: "MJFileFormComponentExtended", filePath: "src/lib/custom/Files/file-form.component.ts", lineNumber: 59 }); })();
 //# sourceMappingURL=file-form.component.js.map