@memberjunction/ng-core-entity-forms 6.1.0-edge.2 → 6.1.0-edge.3

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

@@ -0,0 +1,654 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MJFileFormComponentExtended_1;
+import { Component, inject } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { RegisterClass } from '@memberjunction/global';
+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 { 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) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.record.Status);
+} }
+function MJFileFormComponentExtended_Conditional_0_Conditional_15_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.ɵɵ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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "mj-loading", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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) {
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-file-media--hidden", !ctx_r1.IsMediaLoaded);
+    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) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Image 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_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);
+} 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) {
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-file-media--hidden", !ctx_r1.IsMediaLoaded);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r1.SafeMediaUrl, i0.ɵɵsanitizeResourceUrl);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "PDF 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_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);
+} 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) {
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-file-media--hidden", !ctx_r1.IsMediaLoaded);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r1.MediaUrl, i0.ɵɵsanitizeUrl);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Video 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_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);
+} 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) {
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-file-media--hidden", !ctx_r1.IsMediaLoaded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("src", ctx_r1.MediaUrl);
+} }
+function MJFileFormComponentExtended_Conditional_0_Case_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Audio 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_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);
+} 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) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "pre")(2, "code");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 46);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "p", 47);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, MJFileFormComponentExtended_Conditional_0_Case_29_Conditional_8_Template, 4, 0, "button", 48);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    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.ɵɵ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);
+} }
+function MJFileFormComponentExtended_Conditional_0_Conditional_30_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Description:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 59);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    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);
+    i0.ɵɵtext(2, "Status:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 59);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    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");
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 53)(7, "div", 54)(8, "div", 55)(9, "span", 56);
+    i0.ɵɵtext(10, "File Name:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 57);
+    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.ɵɵtext(16, "MIME Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "span", 58);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 55)(20, "span", 56);
+    i0.ɵɵtext(21, "Size:");
+    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.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(31, "div", 60)(32, "h4", 61);
+    i0.ɵɵelement(33, "i", 62);
+    i0.ɵɵelementStart(34, "span");
+    i0.ɵɵtext(35, "Linked Records");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(36, "div", 63);
+    i0.ɵɵelement(37, "mj-relationship-view", 64);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(12);
+    i0.ɵɵtextInterpolate(ctx_r1.record.Name);
+    i0.ɵɵadvance();
+    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.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(30, 8, ctx_r1.record.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"));
+} }
+function MJFileFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 0)(1, "header", 2)(2, "div", 3)(3, "div", 4);
+    i0.ɵɵelement(4, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 5)(6, "h1", 6);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    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.ɵɵ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.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(20, MJFileFormComponentExtended_Conditional_0_Conditional_20_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.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(30, MJFileFormComponentExtended_Conditional_0_Conditional_30_Template, 38, 11, "aside", 21);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_12_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(ctx_r1.FileIconClass);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", ctx_r1.record.Name);
+    i0.ɵɵadvance();
+    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.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.MediaUrl ? 15 : -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.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.IsLoadingMedia || !ctx_r1.IsMediaLoaded ? 23 : -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);
+} }
+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);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "mj-collapsible-panel", 73);
+    i0.ɵɵelement(12, "mj-form-field", 74)(13, "mj-form-field", 75);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "mj-collapsible-panel", 81);
+    i0.ɵɵelement(20, "mj-relationship-view", 64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(21, "mj-form-panel-slot", 82);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("Record", ctx_r1.record)("FormComponent", ctx_r1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Entity", i0.ɵɵinterpolate(ctx_r1.record.EntityInfo.Name))("Record", ctx_r1.record)("FormComponent", ctx_r1)("FormContext", ctx_r1.formContext);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Form", ctx_r1)("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("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("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("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("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"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Entity", i0.ɵɵinterpolate(ctx_r1.record.EntityInfo.Name))("Record", ctx_r1.record)("FormComponent", ctx_r1)("FormContext", ctx_r1.formContext);
+} }
+const CreateMediaAccessTokenMutation = gql `
+  mutation CreateMediaAccessToken($fileId: String!) {
+    CreateMediaAccessToken(fileId: $fileId) {
+      Success
+      Token
+      Url
+      MimeType
+      ErrorMessage
+    }
+  }
+`;
+const CreateMediaAccessTokenMutationSchema = z.object({
+    CreateMediaAccessToken: z.object({
+        Success: z.boolean(),
+        Token: z.string().optional().nullable(),
+        Url: z.string().optional().nullable(),
+        MimeType: z.string().optional().nullable(),
+        ErrorMessage: z.string().optional().nullable(),
+    }),
+});
+const DownloadUrlMutation = gql `
+  mutation DownloadUrl($fileId: String!) {
+    DownloadUrl(fileId: $fileId) {
+      Success
+      ErrorMessage
+      Url
+    }
+  }
+`;
+const DownloadUrlMutationSchema = z.object({
+    DownloadUrl: z.object({
+        Success: z.boolean(),
+        ErrorMessage: z.string().optional().nullable(),
+        Url: z.string().optional().nullable(),
+    }),
+});
+let MJFileFormComponentExtended = class MJFileFormComponentExtended extends MJFileFormComponent {
+    constructor() {
+        super(...arguments);
+        this.IsLoadingMedia = true;
+        this.IsMediaLoaded = false;
+        this.MediaUrl = null;
+        this.SafeMediaUrl = null;
+        this.TextContent = null;
+        this.ShowDetailsSidebar = true;
+        this.ViewStandardForm = false;
+        this.sanitizer = inject(DomSanitizer);
+        this.notifications = inject(MJNotificationService);
+    }
+    static { MJFileFormComponentExtended_1 = this; }
+    static { this.PREF_SHOW_DETAILS = 'mj.fileViewer.showDetailsSidebar'; }
+    async ngOnInit() {
+        await super.ngOnInit();
+        this.RestoreUserPreferences();
+        if (this.record?.ID) {
+            void this.LoadMediaPreview();
+        }
+    }
+    async ngOnChanges(changes) {
+        if (changes['record'] && this.record?.ID) {
+            void this.LoadMediaPreview();
+        }
+    }
+    ngOnDestroy() {
+        if (this.mediaTimer) {
+            clearTimeout(this.mediaTimer);
+        }
+        super.ngOnDestroy();
+    }
+    RestoreUserPreferences() {
+        const saved = UserInfoEngine.Instance.GetSetting(MJFileFormComponentExtended_1.PREF_SHOW_DETAILS);
+        if (saved !== undefined && saved !== null) {
+            try {
+                this.ShowDetailsSidebar = JSON.parse(saved) === true;
+            }
+            catch {
+                this.ShowDetailsSidebar = saved === 'true';
+            }
+        }
+    }
+    /**
+     * Loads the media streaming URL for inline viewing.
+     */
+    async LoadMediaPreview() {
+        if (!this.record?.ID)
+            return;
+        this.IsLoadingMedia = true;
+        this.IsMediaLoaded = false;
+        this.MediaUrl = null;
+        this.SafeMediaUrl = null;
+        this.TextContent = null;
+        this.cdr.markForCheck();
+        try {
+            // 1. Try CreateMediaAccessToken (supports Range headers and browser tab titles)
+            const mediaResult = await GraphQLDataProvider.ExecuteGQL(CreateMediaAccessTokenMutation, { fileId: this.record.ID });
+            const parsedMedia = CreateMediaAccessTokenMutationSchema.safeParse(mediaResult);
+            if (parsedMedia.success && parsedMedia.data.CreateMediaAccessToken.Success && parsedMedia.data.CreateMediaAccessToken.Url) {
+                this.MediaUrl = parsedMedia.data.CreateMediaAccessToken.Url;
+                this.SafeMediaUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.MediaUrl);
+            }
+            else {
+                // 2. Fallback to DownloadUrl
+                const downloadResult = await GraphQLDataProvider.ExecuteGQL(DownloadUrlMutation, { fileId: this.record.ID });
+                const parsedDownload = DownloadUrlMutationSchema.safeParse(downloadResult);
+                if (parsedDownload.success && parsedDownload.data.DownloadUrl.Success && parsedDownload.data.DownloadUrl.Url) {
+                    this.MediaUrl = parsedDownload.data.DownloadUrl.Url;
+                    this.SafeMediaUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.MediaUrl);
+                }
+            }
+            if (this.MediaUrl) {
+                const mediaType = this.MediaType;
+                if (mediaType === 'text') {
+                    try {
+                        const resp = await window.fetch(this.MediaUrl);
+                        if (resp.ok) {
+                            this.TextContent = await resp.text();
+                        }
+                    }
+                    catch {
+                        // fallback
+                    }
+                    this.IsMediaLoaded = true;
+                }
+            }
+            else {
+                this.IsMediaLoaded = true;
+            }
+        }
+        catch (err) {
+            console.error('[MJFileFormComponentExtended] Error loading media preview:', err);
+            this.IsMediaLoaded = true;
+        }
+        finally {
+            this.IsLoadingMedia = false;
+            this.cdr.markForCheck();
+        }
+    }
+    OnMediaElementLoaded() {
+        if (this.mediaTimer)
+            clearTimeout(this.mediaTimer);
+        this.mediaTimer = setTimeout(() => {
+            this.IsMediaLoaded = true;
+            this.cdr.markForCheck();
+        }, 350);
+    }
+    /**
+     * Determines media type category based on MIME type or file extension.
+     */
+    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';
+    }
+    get FileIconClass() {
+        switch (this.MediaType) {
+            case 'image': return 'fa-solid fa-file-image mj-file-color-image';
+            case 'pdf': return 'fa-solid fa-file-pdf mj-file-color-pdf';
+            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';
+            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]}`;
+    }
+    OpenInExternalTab() {
+        if (this.MediaUrl) {
+            window.open(this.MediaUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.notifications.CreateSimpleNotification('File URL not ready', 'warning');
+        }
+    }
+    ToggleDetailsSidebar() {
+        this.ShowDetailsSidebar = !this.ShowDetailsSidebar;
+        UserInfoEngine.Instance.SetSettingDebounced(MJFileFormComponentExtended_1.PREF_SHOW_DETAILS, JSON.stringify(this.ShowDetailsSidebar));
+    }
+    ToggleViewMode() {
+        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);
+        } 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\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\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\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\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\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\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\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\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\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\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\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\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\n.mj-file-viewer-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\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\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\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}"] }); }
+};
+MJFileFormComponentExtended = MJFileFormComponentExtended_1 = __decorate([
+    RegisterClass(BaseFormComponent, 'MJ: Files', 100)
+], MJFileFormComponentExtended);
+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"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFileFormComponentExtended, { className: "MJFileFormComponentExtended", filePath: "src/lib/custom/Files/file-form.component.ts", lineNumber: 58 }); })();
+//# sourceMappingURL=file-form.component.js.map