npm - @memberjunction/ng-dashboards - Versions diffs - 5.35.0 → 5.36.0 - Mend

@memberjunction/ng-dashboards 5.35.0 → 5.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/dist/DevTools/layout-inspector.component.js CHANGED Viewed

@@ -11,30 +11,8 @@ import { DevToolsPrefs } from './dev-tools-prefs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-application";
 import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-code-editor";
-const _forTrack0 = ($index, $item) => $item.id;
-function LayoutInspectorComponent_For_22_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function LayoutInspectorComponent_For_22_Template_button_click_0_listener() { const section_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSectionClick(section_r2)); });
-    i0.ɵɵelement(1, "i", 24);
-    i0.ɵɵelementStart(2, "div", 25)(3, "div", 26);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 27);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const section_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("mj-inspector__nav-item--active", ctx_r2.ActiveSection === section_r2.id);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(section_r2.icon);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(section_r2.label);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r2.description);
-} }
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-code-editor";
 /**
  * Layout Inspector — read-only view of the current workspace + Golden Layout
  * configuration. Replaces the legacy "Log Layout (Debug)" user-menu item that
@@ -71,6 +49,21 @@ let LayoutInspectorComponent = class LayoutInspectorComponent extends BaseResour
     }
     async GetResourceDisplayName() { return 'Layout Inspector'; }
     async GetResourceIconClass() { return 'fa-solid fa-table-columns'; }
+    /** Sections rendered as horizontal tabs in the chrome's [toolbar] slot. */
+    get tabsConfig() {
+        return this.Sections.map(s => ({
+            key: s.id,
+            label: s.label,
+            icon: s.icon
+        }));
+    }
+    /** Adapter for `<mj-tab-nav>`'s string-typed `(TabChange)` output. */
+    onTabChange(key) {
+        const section = this.Sections.find(s => s.id === key);
+        if (section) {
+            this.OnSectionClick(section);
+        }
+    }
     OnSectionClick(section) {
         if (this.ActiveSection === section.id)
             return;
@@ -140,61 +133,50 @@ let LayoutInspectorComponent = class LayoutInspectorComponent extends BaseResour
         return value;
     }
     static ɵfac = function LayoutInspectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LayoutInspectorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.WorkspaceStateManager), i0.ɵɵdirectiveInject(i1.GoldenLayoutManager)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutInspectorComponent, selectors: [["mj-layout-inspector"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 31, vars: 14, consts: [[1, "mj-inspector"], [1, "mj-inspector__header"], [1, "mj-inspector__header-icon"], [1, "fa-solid", "fa-table-columns"], [1, "mj-inspector__header-title"], [1, "mj-inspector__header-sub"], [1, "mj-inspector__header-spacer"], [1, "mj-inspector__header-actions"], ["type", "button", "title", "Refresh", 1, "mj-inspector__btn", 3, "click"], [1, "fa-solid", "fa-rotate"], ["type", "button", 1, "mj-inspector__btn", 3, "click", "title"], [1, "fa-solid"], ["type", "button", "title", "Download as JSON", 1, "mj-inspector__btn", 3, "click"], [1, "fa-solid", "fa-download"], [1, "mj-inspector__body"], [1, "mj-inspector__sidebar"], ["type", "button", 1, "mj-inspector__nav-item", 3, "mj-inspector__nav-item--active"], [1, "mj-inspector__content"], [1, "mj-inspector__content-head"], [1, "mj-inspector__content-title"], [1, "mj-inspector__content-meta"], [1, "mj-inspector__editor"], [3, "ngModelChange", "ngModel", "language", "readonly", "lineWrapping"], ["type", "button", 1, "mj-inspector__nav-item", 3, "click"], [1, "mj-inspector__nav-icon"], [1, "mj-inspector__nav-text"], [1, "mj-inspector__nav-label"], [1, "mj-inspector__nav-desc"]], template: function LayoutInspectorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵelement(3, "i", 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutInspectorComponent, selectors: [["mj-layout-inspector"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 16, consts: [[1, "mj-inspector", "mj-inspector--solo"], ["Role", "region", "AriaLabel", "Layout inspector", "Title", "Layout Inspector", "Subtitle", "Workspace + Golden Layout configuration"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "size", "sm", 3, "click", "variant", "title"], ["aria-hidden", "true", 1, "fa-solid"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Download as JSON", "aria-label", "Download as JSON", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-download"], ["toolbar", ""], [3, "TabChange", "Tabs", "ActiveKey"], [1, "mj-inspector__content"], [1, "mj-inspector__content-head"], [1, "mj-inspector__content-title"], [1, "mj-inspector__content-meta"], [1, "mj-inspector__editor"], [3, "ngModelChange", "ngModel", "language", "readonly", "lineWrapping"]], template: function LayoutInspectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-page-header-interior", 1)(2, "div", 2)(3, "mj-refresh-button", 3);
+            i0.ɵɵlistener("Clicked", function LayoutInspectorComponent_Template_mj_refresh_button_Clicked_3_listener() { return ctx.refresh(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div")(5, "h3", 4);
-            i0.ɵɵtext(6, "Layout Inspector");
+            i0.ɵɵelementStart(4, "button", 4);
+            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_4_listener() { return ctx.OnCopy(); });
+            i0.ɵɵelement(5, "i", 5);
+            i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 5);
-            i0.ɵɵtext(8, "Workspace + Golden Layout configuration");
+            i0.ɵɵelementStart(7, "button", 6);
+            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_7_listener() { return ctx.OnDownload(); });
+            i0.ɵɵelement(8, "i", 7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(9, "span", 6);
-            i0.ɵɵelementStart(10, "div", 7)(11, "button", 8);
-            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_11_listener() { return ctx.refresh(); });
-            i0.ɵɵelement(12, "i", 9);
-            i0.ɵɵtext(13, " Refresh ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "button", 10);
-            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_14_listener() { return ctx.OnCopy(); });
-            i0.ɵɵelement(15, "i", 11);
-            i0.ɵɵtext(16);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "button", 12);
-            i0.ɵɵlistener("click", function LayoutInspectorComponent_Template_button_click_17_listener() { return ctx.OnDownload(); });
-            i0.ɵɵelement(18, "i", 13);
+            i0.ɵɵelementStart(9, "div", 8)(10, "mj-tab-nav", 9);
+            i0.ɵɵlistener("TabChange", function LayoutInspectorComponent_Template_mj_tab_nav_TabChange_10_listener($event) { return ctx.onTabChange($event); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(19, "div", 14)(20, "aside", 15);
-            i0.ɵɵrepeaterCreate(21, LayoutInspectorComponent_For_22_Template, 7, 6, "button", 16, _forTrack0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 17)(24, "div", 18)(25, "h4", 19);
-            i0.ɵɵtext(26);
+            i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "h4", 12);
+            i0.ɵɵtext(14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "span", 20);
-            i0.ɵɵtext(28);
+            i0.ɵɵelementStart(15, "span", 13);
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(29, "div", 21)(30, "mj-code-editor", 22);
-            i0.ɵɵtwoWayListener("ngModelChange", function LayoutInspectorComponent_Template_mj_code_editor_ngModelChange_30_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.LayoutJson, $event) || (ctx.LayoutJson = $event); return $event; });
-            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(17, "div", 14)(18, "mj-code-editor", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function LayoutInspectorComponent_Template_mj_code_editor_ngModelChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.LayoutJson, $event) || (ctx.LayoutJson = $event); return $event; });
+            i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(14);
-            i0.ɵɵclassProp("mj-inspector__btn--success", ctx.CopyConfirmed);
-            i0.ɵɵproperty("title", ctx.CopyConfirmed ? "Copied" : "Copy JSON");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Loading", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("variant", ctx.CopyConfirmed ? "success" : "secondary")("title", ctx.CopyConfirmed ? "Copied" : "Copy JSON");
             i0.ɵɵadvance();
             i0.ɵɵclassProp("fa-clipboard", !ctx.CopyConfirmed)("fa-check", ctx.CopyConfirmed);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.CopyConfirmed ? "Copied" : "Copy", " ");
-            i0.ɵɵadvance(5);
-            i0.ɵɵrepeater(ctx.Sections);
-            i0.ɵɵadvance(5);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("Tabs", ctx.tabsConfig)("ActiveKey", ctx.ActiveSection);
+            i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.SectionLabel);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1("Refreshed ", ctx.LastRefreshedLabel);
             i0.ɵɵadvance(2);
             i0.ɵɵtwoWayProperty("ngModel", ctx.LayoutJson);
             i0.ɵɵproperty("language", "json")("readonly", true)("lineWrapping", true);
-        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n\n.mj-inspector__header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.mj-inspector__header-icon[_ngcontent-%COMP%] {\n    width: 36px; height: 36px;\n    border-radius: 9px;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: white;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n.mj-inspector__header-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-inspector__header-sub[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-inspector__header-spacer[_ngcontent-%COMP%] { flex: 1; }\n.mj-inspector__header-actions[_ngcontent-%COMP%] {\n    display: flex; gap: 6px;\n}\n.mj-inspector__btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 12px;\n    border-radius: 7px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.15s;\n}\n.mj-inspector__btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__btn--success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-border-default));\n}\n\n\n\n.mj-inspector__body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n.mj-inspector__sidebar[_ngcontent-%COMP%] {\n    width: 220px;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    overflow-y: auto;\n    flex-shrink: 0;\n    padding: 8px;\n}\n.mj-inspector__nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.12s;\n    margin-bottom: 2px;\n    font-family: inherit;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    width: 100%;\n}\n.mj-inspector__nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.mj-inspector__nav-item--active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__nav-item--active[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n}\n.mj-inspector__nav-icon[_ngcontent-%COMP%] {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n    margin-top: 1px;\n    flex-shrink: 0;\n    color: inherit;\n}\n.mj-inspector__nav-text[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.mj-inspector__nav-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.2;\n}\n.mj-inspector__nav-desc[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 3px;\n    line-height: 1.3;\n}\n.mj-inspector__nav-item--active[_ngcontent-%COMP%]   .mj-inspector__nav-desc[_ngcontent-%COMP%] {\n    color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n}\n\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n@media (max-width: 700px) {\n    .mj-inspector__body[_ngcontent-%COMP%] { flex-direction: column; }\n    .mj-inspector__sidebar[_ngcontent-%COMP%] {\n        width: 100%;\n        height: auto;\n        max-height: 200px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n    }\n    .mj-inspector__nav-item[_ngcontent-%COMP%] { flex: 1 1 calc(50% - 8px); margin-bottom: 0; }\n    .mj-inspector__nav-desc[_ngcontent-%COMP%] { display: none; }\n    .mj-inspector__header[_ngcontent-%COMP%] { padding: 12px 14px; gap: 10px; }\n}"] });
+        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJPageHeaderInteriorComponent, i3.MJRefreshButtonComponent, i3.MJTabNavComponent, i4.CodeEditorComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}"] });
 };
 LayoutInspectorComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'LayoutInspector')
@@ -202,7 +184,7 @@ LayoutInspectorComponent = __decorate([
 export { LayoutInspectorComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutInspectorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-layout-inspector', template: "<div class=\"mj-inspector\">\n    <div class=\"mj-inspector__header\">\n        <div class=\"mj-inspector__header-icon\"><i class=\"fa-solid fa-table-columns\"></i></div>\n        <div>\n            <h3 class=\"mj-inspector__header-title\">Layout Inspector</h3>\n            <div class=\"mj-inspector__header-sub\">Workspace + Golden Layout configuration</div>\n        </div>\n        <span class=\"mj-inspector__header-spacer\"></span>\n        <div class=\"mj-inspector__header-actions\">\n            <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"refresh()\" title=\"Refresh\">\n                <i class=\"fa-solid fa-rotate\"></i> Refresh\n            </button>\n            <button class=\"mj-inspector__btn\"\n                    [class.mj-inspector__btn--success]=\"CopyConfirmed\"\n                    type=\"button\" (click)=\"OnCopy()\"\n                    [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n                <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\"></i>\n                {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n            </button>\n            <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"OnDownload()\" title=\"Download as JSON\">\n                <i class=\"fa-solid fa-download\"></i>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"mj-inspector__body\">\n        <aside class=\"mj-inspector__sidebar\">\n            @for (section of Sections; track section.id) {\n                <button type=\"button\"\n                        class=\"mj-inspector__nav-item\"\n                        [class.mj-inspector__nav-item--active]=\"ActiveSection === section.id\"\n                        (click)=\"OnSectionClick(section)\">\n                    <i class=\"mj-inspector__nav-icon\" [class]=\"section.icon\"></i>\n                    <div class=\"mj-inspector__nav-text\">\n                        <div class=\"mj-inspector__nav-label\">{{ section.label }}</div>\n                        <div class=\"mj-inspector__nav-desc\">{{ section.description }}</div>\n                    </div>\n                </button>\n            }\n        </aside>\n\n        <div class=\"mj-inspector__content\">\n            <div class=\"mj-inspector__content-head\">\n                <h4 class=\"mj-inspector__content-title\">{{ SectionLabel }}</h4>\n                <span class=\"mj-inspector__content-meta\">Refreshed {{ LastRefreshedLabel }}</span>\n            </div>\n            <div class=\"mj-inspector__editor\">\n                <mj-code-editor\n                    [(ngModel)]=\"LayoutJson\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    [lineWrapping]=\"true\">\n                </mj-code-editor>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Header */\n.mj-inspector__header {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.mj-inspector__header-icon {\n    width: 36px; height: 36px;\n    border-radius: 9px;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: white;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n.mj-inspector__header-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-inspector__header-sub {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-inspector__header-spacer { flex: 1; }\n.mj-inspector__header-actions {\n    display: flex; gap: 6px;\n}\n.mj-inspector__btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 7px 12px;\n    border-radius: 7px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.15s;\n}\n.mj-inspector__btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__btn--success {\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-border-default));\n}\n\n/* Layout: sidebar + content */\n.mj-inspector__body {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n.mj-inspector__sidebar {\n    width: 220px;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    overflow-y: auto;\n    flex-shrink: 0;\n    padding: 8px;\n}\n.mj-inspector__nav-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.12s;\n    margin-bottom: 2px;\n    font-family: inherit;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    width: 100%;\n}\n.mj-inspector__nav-item:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.mj-inspector__nav-item--active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-inspector__nav-item--active:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n}\n.mj-inspector__nav-icon {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n    margin-top: 1px;\n    flex-shrink: 0;\n    color: inherit;\n}\n.mj-inspector__nav-text { flex: 1; min-width: 0; }\n.mj-inspector__nav-label {\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.2;\n}\n.mj-inspector__nav-desc {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 3px;\n    line-height: 1.3;\n}\n.mj-inspector__nav-item--active .mj-inspector__nav-desc {\n    color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n@media (max-width: 700px) {\n    .mj-inspector__body { flex-direction: column; }\n    .mj-inspector__sidebar {\n        width: 100%;\n        height: auto;\n        max-height: 200px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n    }\n    .mj-inspector__nav-item { flex: 1 1 calc(50% - 8px); margin-bottom: 0; }\n    .mj-inspector__nav-desc { display: none; }\n    .mj-inspector__header { padding: 12px 14px; gap: 10px; }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-layout-inspector', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Layout inspector\"\n        Title=\"Layout Inspector\"\n        Subtitle=\"Workspace + Golden Layout configuration\">\n        <div actions>\n            <mj-refresh-button [Loading]=\"false\" (Clicked)=\"refresh()\"></mj-refresh-button>\n            <button mjButton\n                    [variant]=\"CopyConfirmed ? 'success' : 'secondary'\"\n                    size=\"sm\"\n                    (click)=\"OnCopy()\"\n                    [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n                <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\" aria-hidden=\"true\"></i>\n                {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n            </button>\n            <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"OnDownload()\" title=\"Download as JSON\" aria-label=\"Download as JSON\">\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n        <div toolbar>\n            <mj-tab-nav\n                [Tabs]=\"tabsConfig\"\n                [ActiveKey]=\"ActiveSection\"\n                (TabChange)=\"onTabChange($event)\">\n            </mj-tab-nav>\n        </div>\n    </mj-page-header-interior>\n\n    <div class=\"mj-inspector__content\">\n        <div class=\"mj-inspector__content-head\">\n            <h4 class=\"mj-inspector__content-title\">{{ SectionLabel }}</h4>\n            <span class=\"mj-inspector__content-meta\">Refreshed {{ LastRefreshedLabel }}</span>\n        </div>\n        <div class=\"mj-inspector__editor\">\n            <mj-code-editor\n                [(ngModel)]=\"LayoutJson\"\n                [language]=\"'json'\"\n                [readonly]=\"true\"\n                [lineWrapping]=\"true\">\n            </mj-code-editor>\n        </div>\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.WorkspaceStateManager }, { type: i1.GoldenLayoutManager }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutInspectorComponent, { className: "LayoutInspectorComponent", filePath: "src/DevTools/layout-inspector.component.ts", lineNumber: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutInspectorComponent, { className: "LayoutInspectorComponent", filePath: "src/DevTools/layout-inspector.component.ts", lineNumber: 27 }); })();
 //# sourceMappingURL=layout-inspector.component.js.map

package/dist/DevTools/layout-inspector.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"layout-inspector.component.js","sourceRoot":"","sources":["../../src/DevTools/layout-inspector.component.ts","../../src/DevTools/layout-inspector.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAwC,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;ICwBlC,kCAG0C;IAAlC,kNAAS,iCAAuB,KAAC;IACrC,wBAA6D;IAEzD,AADJ,+BAAoC,cACK;IAAA,YAAmB;IAAA,iBAAM;IAC9D,+BAAoC;IAAA,YAAyB;IAErE,AADI,AADiE,iBAAM,EACjE,EACD;;;;IAPD,wFAAqE;IAEvC,cAAsB;IAAtB,8BAAsB;IAEf,eAAmB;IAAnB,sCAAmB;IACpB,eAAyB;IAAzB,4CAAyB;;ADtBrF;;;;GAIG;AAQI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,qBAAqB;IAanD;IACA;IACA;IAbL,QAAQ,GAAoB;QAC/B,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,iBAAiB,EAAG,IAAI,EAAE,2BAA2B,EAAG,WAAW,EAAE,6BAA6B,EAAE;QAC9H,EAAE,EAAE,EAAE,QAAQ,EAAK,KAAK,EAAE,eAAe,EAAK,IAAI,EAAE,4BAA4B,EAAE,WAAW,EAAE,2BAA2B,EAAE;KAC/H,CAAC;IAEK,aAAa,GAA2B,WAAW,CAAC;IACpD,UAAU,GAAG,IAAI,CAAC;IAClB,aAAa,GAAG,KAAK,CAAC;IACtB,aAAa,GAAG,IAAI,IAAI,EAAE,CAAC;IAElC,YACY,GAAsB,EACtB,SAAgC,EAChC,MAA2B;QAEnC,KAAK,EAAE,CAAC;QAJA,QAAG,GAAH,GAAG,CAAmB;QACtB,cAAS,GAAT,SAAS,CAAuB;QAChC,WAAM,GAAN,MAAM,CAAqB;IAGvC,CAAC;IAEM,QAAQ;QACX,MAAM,CAAC,GAAG,aAAa,CAAC,GAAG,CAA6C,iBAAiB,CAAC,CAAC;QAC3F,IAAI,CAAC,EAAE,aAAa;YAAE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC;QAC3D,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEe,WAAW;QACvB,aAAa,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAC7E,KAAK,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC;IAEe,KAAK,CAAC,sBAAsB,KAAsB,OAAO,kBAAkB,CAAC,CAAC,CAAC;IAC9E,KAAK,CAAC,oBAAoB,KAAsB,OAAO,2BAA2B,CAAC,CAAC,CAAC;IAE9F,cAAc,CAAC,OAAsB;QACxC,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,CAAC,EAAE;YAAE,OAAO;QAC9C,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,EAAE,CAAC;QAChC,aAAa,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAC7E,IAAI,CAAC,OAAO,EAAE,CAAC;IACnB,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAC3E,IAAI,CAAC,aAAa,GAAG,IAAI,IAAI,EAAE,CAAC;QAChC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,MAAM;QACf,IAAI,CAAC;YACD,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACrD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;YACxB,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC3B,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;YAC5B,CAAC,EAAE,IAAI,CAAC,CAAC;QACb,CAAC;QAAC,MAAM,CAAC;YACL,wBAAwB;QAC5B,CAAC;IACL,CAAC;IAEM,UAAU;QACb,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC;QACvE,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC;QACb,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC7D,CAAC,CAAC,QAAQ,GAAG,aAAa,IAAI,CAAC,aAAa,IAAI,KAAK,OAAO,CAAC;QAC7D,CAAC,CAAC,KAAK,EAAE,CAAC;QACV,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC,kBAAkB,EAAE,CAAC;IACnD,CAAC;IAED,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;IAC7E,CAAC;IAED,gCAAgC;IAExB,WAAW;QACf,IAAI,IAAI,CAAC,aAAa,KAAK,WAAW,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;QAC7C,CAAC;QACD,wEAAwE;QACxE,MAAM,SAAS,GAAG,IAAI,CAAC,MAAwF,CAAC;QAChH,IAAI,OAAO,SAAS,CAAC,sBAAsB,KAAK,UAAU,EAAE,CAAC;YACzD,OAAO,SAAS,CAAC,sBAAsB,EAAE,CAAC;QAC9C,CAAC;QACD,IAAI,SAAS,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;YACxC,OAAO,SAAS,CAAC,aAAa,CAAC;QACnC,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,uEAAuE,EAAE,CAAC;IAC7F,CAAC;IAEO,YAAY,CAAC,IAAY,EAAE,KAAc;QAC7C,IAAI,KAAK,YAAY,IAAI;YAAE,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC;QACtD,IAAI,KAAK,YAAY,GAAG;YAAE,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QACrE,IAAI,KAAK,YAAY,GAAG;YAAE,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,IAAI,OAAO,KAAK,KAAK,UAAU;YAAE,OAAO,aAAc,KAA0B,CAAC,IAAI,IAAI,WAAW,GAAG,CAAC;QACxG,OAAO,KAAK,CAAC;IACjB,CAAC;kHAxGQ,wBAAwB;6DAAxB,wBAAwB;YCvB7B,AADJ,AADJ,8BAA0B,aACY,aACS;YAAA,uBAAyC;YAAA,iBAAM;YAElF,AADJ,2BAAK,YACsC;YAAA,gCAAgB;YAAA,iBAAK;YAC5D,8BAAsC;YAAA,uDAAuC;YACjF,AADiF,iBAAM,EACjF;YACN,0BAAiD;YAE7C,AADJ,+BAA0C,iBAC8C;YAApC,sGAAS,aAAS,IAAC;YAC/D,wBAAkC;YAAC,0BACvC;YAAA,iBAAS;YACT,mCAGyD;YADnC,sGAAS,YAAQ,IAAC;YAEpC,yBAA+F;YAC/F,aACJ;YAAA,iBAAS;YACT,mCAAgG;YAAhD,sGAAS,gBAAY,IAAC;YAClE,yBAAoC;YAGhD,AADI,AADI,iBAAS,EACP,EACJ;YAGF,AADJ,gCAAgC,iBACS;YACjC,iGAWC;YACL,iBAAQ;YAIA,AADJ,AADJ,gCAAmC,eACS,cACI;YAAA,aAAkB;YAAA,iBAAK;YAC/D,iCAAyC;YAAA,aAAkC;YAC/E,AAD+E,iBAAO,EAChF;YAEF,AADJ,gCAAkC,0BAKJ;YAHtB,gOAAwB;YAQ5C,AADI,AADI,AADI,AADI,iBAAiB,EACf,EACJ,EACJ,EACJ;;YA3Cc,gBAAkD;YAAlD,+DAAkD;YAElD,kEAAgD;YAChC,cAAqC;YAAC,AAAtC,kDAAqC,+BAAiC;YAC1F,cACJ;YADI,sEACJ;YASA,eAWC;YAXD,2BAWC;YAK2C,eAAkB;YAAlB,sCAAkB;YACjB,eAAkC;YAAlC,2DAAkC;YAIvE,eAAwB;YAAxB,8CAAwB;YAGxB,AADA,AADA,iCAAmB,kBACF,sBACI;;;AD1B5B,wBAAwB;IAPpC,aAAa,CAAC,qBAAqB,EAAE,iBAAiB,CAAC;GAO3C,wBAAwB,CAyGpC;;iFAzGY,wBAAwB;cANpC,SAAS;6BACM,KAAK,YACP,qBAAqB;;kFAItB,wBAAwB","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RegisterClass } from '@memberjunction/global';\nimport { WorkspaceStateManager, GoldenLayoutManager } from '@memberjunction/ng-base-application';\nimport { DevToolsPrefs } from './dev-tools-prefs';\n\ninterface LayoutSection {\n id: 'workspace' \| 'golden';\n label: string;\n icon: string;\n description: string;\n}\n\n/*\n Layout Inspector — read-only view of the current workspace + Golden Layout\n * configuration. Replaces the legacy \"Log Layout (Debug)\" user-menu item that\n * only printed to console.\n */\n@RegisterClass(BaseResourceComponent, 'LayoutInspector')\n@Component({\n standalone: false,\n selector: 'mj-layout-inspector',\n templateUrl: './layout-inspector.component.html',\n styleUrls: ['./inspector-shared.css']\n})\nexport class LayoutInspectorComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n\n public Sections: LayoutSection[] = [\n { id: 'workspace', label: 'Workspace State', icon: 'fa-solid fa-table-columns', description: 'Tabs, active tab, app state' },\n { id: 'golden', label: 'Golden Layout', icon: 'fa-solid fa-window-restore', description: 'Active layout JSON config' }\n ];\n\n public ActiveSection: 'workspace' \| 'golden' = 'workspace';\n public LayoutJson = '{}';\n public CopyConfirmed = false;\n public LastRefreshed = new Date();\n\n constructor(\n private cdr: ChangeDetectorRef,\n private workspace: WorkspaceStateManager,\n private layout: GoldenLayoutManager\n ) {\n super();\n }\n\n public ngOnInit(): void {\n const p = DevToolsPrefs.Get<{ activeSection?: 'workspace' \| 'golden' }>('layoutInspector');\n if (p?.activeSection) this.ActiveSection = p.activeSection;\n this.refresh();\n this.NotifyLoadComplete();\n }\n\n public override ngOnDestroy(): void {\n DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n super.ngOnDestroy();\n }\n\n public override async GetResourceDisplayName(): Promise<string> { return 'Layout Inspector'; }\n public override async GetResourceIconClass(): Promise<string> { return 'fa-solid fa-table-columns'; }\n\n public OnSectionClick(section: LayoutSection): void {\n if (this.ActiveSection === section.id) return;\n this.ActiveSection = section.id;\n DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n this.refresh();\n }\n\n public refresh(): void {\n this.LayoutJson = JSON.stringify(this.computeData(), this.jsonReplacer, 2);\n this.LastRefreshed = new Date();\n this.cdr.markForCheck();\n }\n\n public async OnCopy(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.LayoutJson);\n this.CopyConfirmed = true;\n this.cdr.markForCheck();\n setTimeout(() => {\n this.CopyConfirmed = false;\n this.cdr.markForCheck();\n }, 1800);\n } catch {\n // clipboard unavailable\n }\n }\n\n public OnDownload(): void {\n const blob = new Blob([this.LayoutJson], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n a.download = `mj-layout-${this.ActiveSection}-${stamp}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n public get LastRefreshedLabel(): string {\n return this.LastRefreshed.toLocaleTimeString();\n }\n\n public get SectionLabel(): string {\n return this.Sections.find(s => s.id === this.ActiveSection)?.label ?? '';\n }\n\n // ---------- private ----------\n\n private computeData(): unknown {\n if (this.ActiveSection === 'workspace') {\n return this.workspace.GetConfiguration();\n }\n // Golden Layout: GoldenLayoutManager exposes its raw config when active\n const layoutAny = this.layout as unknown as { GetCurrentLayoutConfig?: () => unknown; CurrentConfig?: unknown };\n if (typeof layoutAny.GetCurrentLayoutConfig === 'function') {\n return layoutAny.GetCurrentLayoutConfig();\n }\n if (layoutAny.CurrentConfig !== undefined) {\n return layoutAny.CurrentConfig;\n }\n return { note: 'Golden Layout config is not currently exposed by GoldenLayoutManager.' };\n }\n\n private jsonReplacer(_key: string, value: unknown): unknown {\n if (value instanceof Date) return value.toISOString();\n if (value instanceof Map) return Object.fromEntries(value.entries());\n if (value instanceof Set) return Array.from(value);\n if (typeof value === 'function') return `[Function ${(value as { name: string }).name \|\| 'anonymous'}]`;\n return value;\n }\n}\n","<div class=\"mj-inspector\">\n <div class=\"mj-inspector__header\">\n <div class=\"mj-inspector__header-icon\"><i class=\"fa-solid fa-table-columns\"></i></div>\n <div>\n <h3 class=\"mj-inspector__header-title\">Layout Inspector</h3>\n <div class=\"mj-inspector__header-sub\">Workspace + Golden Layout configuration</div>\n </div>\n <span class=\"mj-inspector__header-spacer\"></span>\n <div class=\"mj-inspector__header-actions\">\n <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-rotate\"></i> Refresh\n </button>\n <button class=\"mj-inspector__btn\"\n [class.mj-inspector__btn--success]=\"CopyConfirmed\"\n type=\"button\" (click)=\"OnCopy()\"\n [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\"></i>\n {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n </button>\n <button class=\"mj-inspector__btn\" type=\"button\" (click)=\"OnDownload()\" title=\"Download as JSON\">\n <i class=\"fa-solid fa-download\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"mj-inspector__body\">\n <aside class=\"mj-inspector__sidebar\">\n @for (section of Sections; track section.id) {\n <button type=\"button\"\n class=\"mj-inspector__nav-item\"\n [class.mj-inspector__nav-item--active]=\"ActiveSection === section.id\"\n (click)=\"OnSectionClick(section)\">\n <i class=\"mj-inspector__nav-icon\" [class]=\"section.icon\"></i>\n <div class=\"mj-inspector__nav-text\">\n <div class=\"mj-inspector__nav-label\">{{ section.label }}</div>\n <div class=\"mj-inspector__nav-desc\">{{ section.description }}</div>\n </div>\n </button>\n }\n </aside>\n\n <div class=\"mj-inspector__content\">\n <div class=\"mj-inspector__content-head\">\n <h4 class=\"mj-inspector__content-title\">{{ SectionLabel }}</h4>\n <span class=\"mj-inspector__content-meta\">Refreshed {{ LastRefreshedLabel }}</span>\n </div>\n <div class=\"mj-inspector__editor\">\n <mj-code-editor\n [(ngModel)]=\"LayoutJson\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n</div>\n"]}
1	+ {"version":3,"file":"layout-inspector.component.js","sourceRoot":"","sources":["../../src/DevTools/layout-inspector.component.ts","../../src/DevTools/layout-inspector.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RegisterClass } from '@memberjunction/global';\nimport { TabConfig } from '@memberjunction/ng-ui-components';\nimport { WorkspaceStateManager, GoldenLayoutManager } from '@memberjunction/ng-base-application';\nimport { DevToolsPrefs } from './dev-tools-prefs';\n\ninterface LayoutSection {\n id: 'workspace' \| 'golden';\n label: string;\n icon: string;\n description: string;\n}\n\n/*\n Layout Inspector — read-only view of the current workspace + Golden Layout\n * configuration. Replaces the legacy \"Log Layout (Debug)\" user-menu item that\n * only printed to console.\n /\n@RegisterClass(BaseResourceComponent, 'LayoutInspector')\n@Component({\n standalone: false,\n selector: 'mj-layout-inspector',\n templateUrl: './layout-inspector.component.html',\n styleUrls: ['./inspector-shared.css']\n})\nexport class LayoutInspectorComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n\n public Sections: LayoutSection[] = [\n { id: 'workspace', label: 'Workspace State', icon: 'fa-solid fa-table-columns', description: 'Tabs, active tab, app state' },\n { id: 'golden', label: 'Golden Layout', icon: 'fa-solid fa-window-restore', description: 'Active layout JSON config' }\n ];\n\n public ActiveSection: 'workspace' \| 'golden' = 'workspace';\n public LayoutJson = '{}';\n public CopyConfirmed = false;\n public LastRefreshed = new Date();\n\n constructor(\n private cdr: ChangeDetectorRef,\n private workspace: WorkspaceStateManager,\n private layout: GoldenLayoutManager\n ) {\n super();\n }\n\n public ngOnInit(): void {\n const p = DevToolsPrefs.Get<{ activeSection?: 'workspace' \| 'golden' }>('layoutInspector');\n if (p?.activeSection) this.ActiveSection = p.activeSection;\n this.refresh();\n this.NotifyLoadComplete();\n }\n\n public override ngOnDestroy(): void {\n DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n super.ngOnDestroy();\n }\n\n public override async GetResourceDisplayName(): Promise<string> { return 'Layout Inspector'; }\n public override async GetResourceIconClass(): Promise<string> { return 'fa-solid fa-table-columns'; }\n\n /* Sections rendered as horizontal tabs in the chrome's [toolbar] slot. /\n public get tabsConfig(): TabConfig[] {\n return this.Sections.map(s => ({\n key: s.id,\n label: s.label,\n icon: s.icon\n }));\n }\n\n /* Adapter for `<mj-tab-nav>`'s string-typed `(TabChange)` output. */\n public onTabChange(key: string): void {\n const section = this.Sections.find(s => s.id === key);\n if (section) {\n this.OnSectionClick(section);\n }\n }\n\n public OnSectionClick(section: LayoutSection): void {\n if (this.ActiveSection === section.id) return;\n this.ActiveSection = section.id;\n DevToolsPrefs.Save('layoutInspector', { activeSection: this.ActiveSection });\n this.refresh();\n }\n\n public refresh(): void {\n this.LayoutJson = JSON.stringify(this.computeData(), this.jsonReplacer, 2);\n this.LastRefreshed = new Date();\n this.cdr.markForCheck();\n }\n\n public async OnCopy(): Promise<void> {\n try {\n await navigator.clipboard.writeText(this.LayoutJson);\n this.CopyConfirmed = true;\n this.cdr.markForCheck();\n setTimeout(() => {\n this.CopyConfirmed = false;\n this.cdr.markForCheck();\n }, 1800);\n } catch {\n // clipboard unavailable\n }\n }\n\n public OnDownload(): void {\n const blob = new Blob([this.LayoutJson], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n const stamp = new Date().toISOString().replace(/[:.]/g, '-');\n a.download = `mj-layout-${this.ActiveSection}-${stamp}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n public get LastRefreshedLabel(): string {\n return this.LastRefreshed.toLocaleTimeString();\n }\n\n public get SectionLabel(): string {\n return this.Sections.find(s => s.id === this.ActiveSection)?.label ?? '';\n }\n\n // ---------- private ----------\n\n private computeData(): unknown {\n if (this.ActiveSection === 'workspace') {\n return this.workspace.GetConfiguration();\n }\n // Golden Layout: GoldenLayoutManager exposes its raw config when active\n const layoutAny = this.layout as unknown as { GetCurrentLayoutConfig?: () => unknown; CurrentConfig?: unknown };\n if (typeof layoutAny.GetCurrentLayoutConfig === 'function') {\n return layoutAny.GetCurrentLayoutConfig();\n }\n if (layoutAny.CurrentConfig !== undefined) {\n return layoutAny.CurrentConfig;\n }\n return { note: 'Golden Layout config is not currently exposed by GoldenLayoutManager.' };\n }\n\n private jsonReplacer(_key: string, value: unknown): unknown {\n if (value instanceof Date) return value.toISOString();\n if (value instanceof Map) return Object.fromEntries(value.entries());\n if (value instanceof Set) return Array.from(value);\n if (typeof value === 'function') return `[Function ${(value as { name: string }).name \|\| 'anonymous'}]`;\n return value;\n }\n}\n","<div class=\"mj-inspector mj-inspector--solo\">\n <mj-page-header-interior\n Role=\"region\"\n AriaLabel=\"Layout inspector\"\n Title=\"Layout Inspector\"\n Subtitle=\"Workspace + Golden Layout configuration\">\n <div actions>\n <mj-refresh-button [Loading]=\"false\" (Clicked)=\"refresh()\"></mj-refresh-button>\n <button mjButton\n [variant]=\"CopyConfirmed ? 'success' : 'secondary'\"\n size=\"sm\"\n (click)=\"OnCopy()\"\n [title]=\"CopyConfirmed ? 'Copied' : 'Copy JSON'\">\n <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\" aria-hidden=\"true\"></i>\n {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n </button>\n <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"OnDownload()\" title=\"Download as JSON\" aria-label=\"Download as JSON\">\n <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div toolbar>\n <mj-tab-nav\n [Tabs]=\"tabsConfig\"\n [ActiveKey]=\"ActiveSection\"\n (TabChange)=\"onTabChange($event)\">\n </mj-tab-nav>\n </div>\n </mj-page-header-interior>\n\n <div class=\"mj-inspector__content\">\n <div class=\"mj-inspector__content-head\">\n <h4 class=\"mj-inspector__content-title\">{{ SectionLabel }}</h4>\n <span class=\"mj-inspector__content-meta\">Refreshed {{ LastRefreshedLabel }}</span>\n </div>\n <div class=\"mj-inspector__editor\">\n <mj-code-editor\n [(ngModel)]=\"LayoutJson\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n</div>\n"]}