bways-report 0.1.7 → 0.1.8
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.
|
@@ -15236,6 +15236,21 @@ class DesignerComponent {
|
|
|
15236
15236
|
formattedJson = computed(() => {
|
|
15237
15237
|
return JSON.stringify(this.currentDefinition(), null, 2);
|
|
15238
15238
|
});
|
|
15239
|
+
editorTheme = signal('light');
|
|
15240
|
+
wrapLines = signal(false);
|
|
15241
|
+
jsonStats = computed(() => {
|
|
15242
|
+
const json = this.formattedJson();
|
|
15243
|
+
const lines = json ? json.split('\n').length : 0;
|
|
15244
|
+
const bytes = new Blob([json]).size;
|
|
15245
|
+
const sizeKb = bytes < 1024 ? `${bytes} B` : `${(bytes / 1024).toFixed(1)} KB`;
|
|
15246
|
+
return { lines, sizeKb };
|
|
15247
|
+
});
|
|
15248
|
+
highlightedLines = computed(() => {
|
|
15249
|
+
const json = this.formattedJson();
|
|
15250
|
+
if (!json)
|
|
15251
|
+
return [];
|
|
15252
|
+
return this.syntaxHighlightJson(json).split('\n');
|
|
15253
|
+
});
|
|
15239
15254
|
loadedReportId = null;
|
|
15240
15255
|
loadedReportDef = null;
|
|
15241
15256
|
lastEmittedDef = null;
|
|
@@ -15413,6 +15428,49 @@ class DesignerComponent {
|
|
|
15413
15428
|
});
|
|
15414
15429
|
}
|
|
15415
15430
|
}
|
|
15431
|
+
downloadJson() {
|
|
15432
|
+
const json = this.formattedJson();
|
|
15433
|
+
const blob = new Blob([json], { type: 'application/json;charset=utf-8;' });
|
|
15434
|
+
const url = URL.createObjectURL(blob);
|
|
15435
|
+
const link = document.createElement('a');
|
|
15436
|
+
const slug = (this.currentDefinition().name || 'report')
|
|
15437
|
+
.toLowerCase()
|
|
15438
|
+
.replace(/[^a-z0-9_-]/g, '-');
|
|
15439
|
+
link.href = url;
|
|
15440
|
+
link.download = `${slug}.report.json`;
|
|
15441
|
+
link.click();
|
|
15442
|
+
URL.revokeObjectURL(url);
|
|
15443
|
+
}
|
|
15444
|
+
toggleEditorTheme() {
|
|
15445
|
+
this.editorTheme.update((current) => (current === 'light' ? 'dark' : 'light'));
|
|
15446
|
+
}
|
|
15447
|
+
toggleWrapLines() {
|
|
15448
|
+
this.wrapLines.update((v) => !v);
|
|
15449
|
+
}
|
|
15450
|
+
syntaxHighlightJson(json) {
|
|
15451
|
+
const escaped = json
|
|
15452
|
+
.replace(/&/g, '&')
|
|
15453
|
+
.replace(/</g, '<')
|
|
15454
|
+
.replace(/>/g, '>');
|
|
15455
|
+
return escaped.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (match) => {
|
|
15456
|
+
let cls = 'json-token-number';
|
|
15457
|
+
if (/^"/.test(match)) {
|
|
15458
|
+
if (/:$/.test(match)) {
|
|
15459
|
+
cls = 'json-token-key';
|
|
15460
|
+
}
|
|
15461
|
+
else {
|
|
15462
|
+
cls = 'json-token-string';
|
|
15463
|
+
}
|
|
15464
|
+
}
|
|
15465
|
+
else if (/true|false/.test(match)) {
|
|
15466
|
+
cls = 'json-token-boolean';
|
|
15467
|
+
}
|
|
15468
|
+
else if (/null/.test(match)) {
|
|
15469
|
+
cls = 'json-token-null';
|
|
15470
|
+
}
|
|
15471
|
+
return `<span class="${cls}">${match}</span>`;
|
|
15472
|
+
});
|
|
15473
|
+
}
|
|
15416
15474
|
showToast(message) {
|
|
15417
15475
|
this.saveMessage.set(message);
|
|
15418
15476
|
setTimeout(() => this.saveMessage.set(null), 3000);
|
|
@@ -15472,17 +15530,95 @@ class DesignerComponent {
|
|
|
15472
15530
|
}
|
|
15473
15531
|
@case ('json') {
|
|
15474
15532
|
<div class="json-mode-container">
|
|
15475
|
-
<div class="json-
|
|
15476
|
-
|
|
15477
|
-
|
|
15478
|
-
<
|
|
15533
|
+
<div class="json-editor-card" [class.theme-dark]="editorTheme() === 'dark'">
|
|
15534
|
+
<!-- Top Schema Toolbar -->
|
|
15535
|
+
<div class="json-banner">
|
|
15536
|
+
<div class="json-banner-left">
|
|
15537
|
+
<div class="json-badge-icon">
|
|
15538
|
+
<rpt-icon name="code" [size]="15" />
|
|
15539
|
+
</div>
|
|
15540
|
+
<div class="json-title-group">
|
|
15541
|
+
<div class="json-title-row">
|
|
15542
|
+
<span class="json-title">Report Definition Schema</span>
|
|
15543
|
+
<span class="json-schema-tag">v{{ currentDefinition().schemaVersion || 1 }}.0 • JSON</span>
|
|
15544
|
+
</div>
|
|
15545
|
+
<div class="json-meta-row">
|
|
15546
|
+
<span class="json-stat-pill">
|
|
15547
|
+
<strong>{{ currentDefinition().components.length }}</strong> components
|
|
15548
|
+
</span>
|
|
15549
|
+
<span class="json-stat-divider">•</span>
|
|
15550
|
+
<span class="json-stat-pill">
|
|
15551
|
+
<strong>{{ jsonStats().lines }}</strong> lines
|
|
15552
|
+
</span>
|
|
15553
|
+
<span class="json-stat-divider">•</span>
|
|
15554
|
+
<span class="json-stat-pill">
|
|
15555
|
+
{{ jsonStats().sizeKb }}
|
|
15556
|
+
</span>
|
|
15557
|
+
</div>
|
|
15558
|
+
</div>
|
|
15559
|
+
</div>
|
|
15560
|
+
|
|
15561
|
+
<div class="json-banner-actions">
|
|
15562
|
+
<button
|
|
15563
|
+
type="button"
|
|
15564
|
+
class="btn-json-action"
|
|
15565
|
+
[class.active]="wrapLines()"
|
|
15566
|
+
(click)="toggleWrapLines()"
|
|
15567
|
+
title="Toggle Word Wrap"
|
|
15568
|
+
>
|
|
15569
|
+
<rpt-icon name="list" [size]="13" />
|
|
15570
|
+
<span>Wrap</span>
|
|
15571
|
+
</button>
|
|
15572
|
+
|
|
15573
|
+
<button
|
|
15574
|
+
type="button"
|
|
15575
|
+
class="btn-json-action"
|
|
15576
|
+
(click)="toggleEditorTheme()"
|
|
15577
|
+
[title]="editorTheme() === 'dark' ? 'Switch to Light Theme' : 'Switch to Dark Theme'"
|
|
15578
|
+
>
|
|
15579
|
+
<rpt-icon [name]="editorTheme() === 'dark' ? 'sparkles' : 'sliders'" [size]="13" />
|
|
15580
|
+
<span>{{ editorTheme() === 'dark' ? 'Dark' : 'Light' }}</span>
|
|
15581
|
+
</button>
|
|
15582
|
+
|
|
15583
|
+
<button
|
|
15584
|
+
type="button"
|
|
15585
|
+
class="btn-json-action"
|
|
15586
|
+
(click)="downloadJson()"
|
|
15587
|
+
title="Download definition as JSON file"
|
|
15588
|
+
>
|
|
15589
|
+
<rpt-icon name="download" [size]="13" />
|
|
15590
|
+
<span>Export</span>
|
|
15591
|
+
</button>
|
|
15592
|
+
|
|
15593
|
+
<button
|
|
15594
|
+
type="button"
|
|
15595
|
+
class="btn-copy-json"
|
|
15596
|
+
[class.copied]="copyStatus() === 'Copied!'"
|
|
15597
|
+
(click)="copyJson()"
|
|
15598
|
+
title="Copy schema JSON to clipboard"
|
|
15599
|
+
>
|
|
15600
|
+
<rpt-icon [name]="copyStatus() === 'Copied!' ? 'check' : 'copy'" [size]="13" />
|
|
15601
|
+
<span>{{ copyStatus() }}</span>
|
|
15602
|
+
</button>
|
|
15603
|
+
</div>
|
|
15604
|
+
</div>
|
|
15605
|
+
|
|
15606
|
+
<!-- Code Viewport with Line Numbers -->
|
|
15607
|
+
<div class="json-viewport" [class.wrap-enabled]="wrapLines()">
|
|
15608
|
+
<div class="json-scroll-container">
|
|
15609
|
+
<table class="json-code-table" role="presentation">
|
|
15610
|
+
<tbody>
|
|
15611
|
+
@for (line of highlightedLines(); track $index) {
|
|
15612
|
+
<tr class="json-code-row">
|
|
15613
|
+
<td class="json-line-number" aria-hidden="true">{{ $index + 1 }}</td>
|
|
15614
|
+
<td class="json-line-text"><span [innerHTML]="line"></span></td>
|
|
15615
|
+
</tr>
|
|
15616
|
+
}
|
|
15617
|
+
</tbody>
|
|
15618
|
+
</table>
|
|
15619
|
+
</div>
|
|
15479
15620
|
</div>
|
|
15480
|
-
<button type="button" class="btn-copy-json" (click)="copyJson()">
|
|
15481
|
-
<rpt-icon [name]="copyStatus() === 'Copied!' ? 'check' : 'copy'" [size]="13" />
|
|
15482
|
-
<span>{{ copyStatus() }}</span>
|
|
15483
|
-
</button>
|
|
15484
15621
|
</div>
|
|
15485
|
-
<pre class="json-display"><code>{{ formattedJson() }}</code></pre>
|
|
15486
15622
|
</div>
|
|
15487
15623
|
}
|
|
15488
15624
|
}
|
|
@@ -15544,7 +15680,7 @@ class DesignerComponent {
|
|
|
15544
15680
|
</div>
|
|
15545
15681
|
}
|
|
15546
15682
|
</div>
|
|
15547
|
-
`, isInline: true, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:420px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:95vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:380px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;overflow-y:auto;padding:24px;background-color:#0f172a;display:flex;flex-direction:column}.json-banner{display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e293b}.btn-copy-json{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.btn-copy-json:hover{background:#fff3}.json-display{flex:1;margin:0;padding:20px;background:#090d16;border-radius:8px;border:1px solid #1e293b;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: DesignerToolbarComponent, selector: "rpt-designer-toolbar", inputs: ["isLeftPanelCollapsed", "isRightPanelCollapsed"], outputs: ["toggleLeftPanel", "toggleRightPanel", "saveRequested"] }, { kind: "component", type: ComponentPaletteComponent, selector: "rpt-component-palette", outputs: ["collapseRequested"] }, { kind: "component", type: DesignCanvasComponent, selector: "rpt-design-canvas" }, { kind: "component", type: PropertyEditorComponent, selector: "rpt-property-editor", outputs: ["collapseRequested"] }, { kind: "component", type: DynamicRendererComponent, selector: "rpt-dynamic-renderer", inputs: ["definition", "initialValues", "resultData"], outputs: ["executeRequested", "resetRequested", "exportRequested", "printRequested", "customActionTriggered", "gridStateChanged", "columnDefsChanged", "selectionChange", "selectionChanged", "rowActionTriggered"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15683
|
+
`, isInline: true, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:420px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:95vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:380px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;min-height:0;padding:20px 24px;background-color:var(--rpt-color-bg, #f8fafc);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.json-editor-card{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border-subtle, #e2e8f0);border-radius:var(--rpt-border-radius-lg, 8px);box-shadow:0 1px 3px #0000000d,0 1px 2px -1px #00000008;overflow:hidden;transition:background-color .2s ease,border-color .2s ease}.json-editor-card.theme-dark{background:#0f172a;border-color:#1e293b;box-shadow:0 4px 12px #00000040}.json-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:var(--rpt-color-surface, #ffffff);border-bottom:1px solid var(--rpt-color-border-subtle, #e2e8f0);flex-shrink:0;transition:background-color .2s ease,border-color .2s ease}.theme-dark .json-banner{background:#0b1120;border-bottom-color:#1e293b}.json-banner-left{display:flex;align-items:center;gap:12px;min-width:0}.json-badge-icon{width:32px;height:32px;border-radius:var(--rpt-border-radius, 6px);background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border:1px solid rgba(37,99,235,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}.theme-dark .json-badge-icon{background:#2563eb33;color:#60a5fa;border-color:#60a5fa4d}.json-title-group{display:flex;flex-direction:column;gap:2px;min-width:0}.json-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.json-title{font-size:.875rem;font-weight:600;letter-spacing:-.01em;color:var(--rpt-color-text, #0f172a)}.theme-dark .json-title{color:#f1f5f9}.json-schema-tag{font-size:.6875rem;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:9999px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;text-transform:uppercase}.theme-dark .json-schema-tag{background:#1e293b;color:#94a3b8;border-color:#334155}.json-meta-row{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--rpt-color-text-muted, #64748b)}.theme-dark .json-meta-row{color:#64748b}.json-stat-pill strong{color:var(--rpt-color-text, #0f172a);font-weight:600}.theme-dark .json-stat-pill strong,.json-stat-divider{color:#cbd5e1}.theme-dark .json-stat-divider{color:#334155}.json-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.btn-json-action{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text-secondary, #334155);background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;transition:all .15s ease}.btn-json-action:hover{background:var(--rpt-color-surface-hover, #f1f5f9);border-color:var(--rpt-color-border-hover, #94a3b8);color:var(--rpt-color-text, #0f172a)}.btn-json-action.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:var(--rpt-color-primary, #2563eb);font-weight:600}.theme-dark .btn-json-action{background:#1e293b;border-color:#334155;color:#cbd5e1}.theme-dark .btn-json-action:hover{background:#334155;border-color:#475569;color:#fff}.theme-dark .btn-json-action.active{background:#2563eb40;color:#60a5fa;border-color:#3b82f6}.btn-copy-json{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;font-size:.75rem;font-weight:600;color:#fff;background:var(--rpt-color-primary, #2563eb);border:1px solid var(--rpt-color-primary, #2563eb);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;box-shadow:0 1px 2px #2563eb33;transition:all .15s ease}.btn-copy-json:hover{background:var(--rpt-color-primary-hover, #1d4ed8);border-color:var(--rpt-color-primary-hover, #1d4ed8)}.btn-copy-json.copied{background:#10b981;border-color:#10b981;box-shadow:0 1px 2px #10b98133}.json-viewport{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:background-color .2s ease}.theme-dark .json-viewport{background:#0f172a}.json-scroll-container{flex:1;min-height:0;overflow:auto}.json-code-table{width:100%;border-collapse:collapse;font-family:var(--rpt-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.8125rem;line-height:1.6}.json-code-row{transition:background-color .1s ease}.json-code-row:hover{background:#f8fafc}.theme-dark .json-code-row:hover{background:#1e293b99}.json-line-number{width:44px;min-width:44px;max-width:56px;padding:1px 12px 1px 8px;text-align:right;color:#94a3b8;background:#f8fafc;border-right:1px solid #e2e8f0;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;vertical-align:top;font-size:.75rem}.theme-dark .json-line-number{background:#0b1120;color:#475569;border-right-color:#1e293b}.json-line-text{padding:1px 16px;white-space:pre;vertical-align:top;color:#1e293b}.wrap-enabled .json-line-text{white-space:pre-wrap;word-break:break-all}.theme-dark .json-line-text{color:#e2e8f0}.json-token-key{color:#1e40af;font-weight:600}.json-token-string{color:#047857}.json-token-number{color:#7c3aed;font-weight:500}.json-token-boolean{color:#d97706;font-weight:600}.json-token-null{color:#dc2626;font-weight:600}.theme-dark .json-token-key{color:#60a5fa;font-weight:600}.theme-dark .json-token-string{color:#4ade80}.theme-dark .json-token-number{color:#c084fc;font-weight:500}.theme-dark .json-token-boolean{color:#fbbf24;font-weight:600}.theme-dark .json-token-null{color:#f87171;font-weight:600}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: DesignerToolbarComponent, selector: "rpt-designer-toolbar", inputs: ["isLeftPanelCollapsed", "isRightPanelCollapsed"], outputs: ["toggleLeftPanel", "toggleRightPanel", "saveRequested"] }, { kind: "component", type: ComponentPaletteComponent, selector: "rpt-component-palette", outputs: ["collapseRequested"] }, { kind: "component", type: DesignCanvasComponent, selector: "rpt-design-canvas" }, { kind: "component", type: PropertyEditorComponent, selector: "rpt-property-editor", outputs: ["collapseRequested"] }, { kind: "component", type: DynamicRendererComponent, selector: "rpt-dynamic-renderer", inputs: ["definition", "initialValues", "resultData"], outputs: ["executeRequested", "resetRequested", "exportRequested", "printRequested", "customActionTriggered", "gridStateChanged", "columnDefsChanged", "selectionChange", "selectionChanged", "rowActionTriggered"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15548
15684
|
}
|
|
15549
15685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignerComponent, decorators: [{
|
|
15550
15686
|
type: Component,
|
|
@@ -15613,17 +15749,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
15613
15749
|
}
|
|
15614
15750
|
@case ('json') {
|
|
15615
15751
|
<div class="json-mode-container">
|
|
15616
|
-
<div class="json-
|
|
15617
|
-
|
|
15618
|
-
|
|
15619
|
-
<
|
|
15752
|
+
<div class="json-editor-card" [class.theme-dark]="editorTheme() === 'dark'">
|
|
15753
|
+
<!-- Top Schema Toolbar -->
|
|
15754
|
+
<div class="json-banner">
|
|
15755
|
+
<div class="json-banner-left">
|
|
15756
|
+
<div class="json-badge-icon">
|
|
15757
|
+
<rpt-icon name="code" [size]="15" />
|
|
15758
|
+
</div>
|
|
15759
|
+
<div class="json-title-group">
|
|
15760
|
+
<div class="json-title-row">
|
|
15761
|
+
<span class="json-title">Report Definition Schema</span>
|
|
15762
|
+
<span class="json-schema-tag">v{{ currentDefinition().schemaVersion || 1 }}.0 • JSON</span>
|
|
15763
|
+
</div>
|
|
15764
|
+
<div class="json-meta-row">
|
|
15765
|
+
<span class="json-stat-pill">
|
|
15766
|
+
<strong>{{ currentDefinition().components.length }}</strong> components
|
|
15767
|
+
</span>
|
|
15768
|
+
<span class="json-stat-divider">•</span>
|
|
15769
|
+
<span class="json-stat-pill">
|
|
15770
|
+
<strong>{{ jsonStats().lines }}</strong> lines
|
|
15771
|
+
</span>
|
|
15772
|
+
<span class="json-stat-divider">•</span>
|
|
15773
|
+
<span class="json-stat-pill">
|
|
15774
|
+
{{ jsonStats().sizeKb }}
|
|
15775
|
+
</span>
|
|
15776
|
+
</div>
|
|
15777
|
+
</div>
|
|
15778
|
+
</div>
|
|
15779
|
+
|
|
15780
|
+
<div class="json-banner-actions">
|
|
15781
|
+
<button
|
|
15782
|
+
type="button"
|
|
15783
|
+
class="btn-json-action"
|
|
15784
|
+
[class.active]="wrapLines()"
|
|
15785
|
+
(click)="toggleWrapLines()"
|
|
15786
|
+
title="Toggle Word Wrap"
|
|
15787
|
+
>
|
|
15788
|
+
<rpt-icon name="list" [size]="13" />
|
|
15789
|
+
<span>Wrap</span>
|
|
15790
|
+
</button>
|
|
15791
|
+
|
|
15792
|
+
<button
|
|
15793
|
+
type="button"
|
|
15794
|
+
class="btn-json-action"
|
|
15795
|
+
(click)="toggleEditorTheme()"
|
|
15796
|
+
[title]="editorTheme() === 'dark' ? 'Switch to Light Theme' : 'Switch to Dark Theme'"
|
|
15797
|
+
>
|
|
15798
|
+
<rpt-icon [name]="editorTheme() === 'dark' ? 'sparkles' : 'sliders'" [size]="13" />
|
|
15799
|
+
<span>{{ editorTheme() === 'dark' ? 'Dark' : 'Light' }}</span>
|
|
15800
|
+
</button>
|
|
15801
|
+
|
|
15802
|
+
<button
|
|
15803
|
+
type="button"
|
|
15804
|
+
class="btn-json-action"
|
|
15805
|
+
(click)="downloadJson()"
|
|
15806
|
+
title="Download definition as JSON file"
|
|
15807
|
+
>
|
|
15808
|
+
<rpt-icon name="download" [size]="13" />
|
|
15809
|
+
<span>Export</span>
|
|
15810
|
+
</button>
|
|
15811
|
+
|
|
15812
|
+
<button
|
|
15813
|
+
type="button"
|
|
15814
|
+
class="btn-copy-json"
|
|
15815
|
+
[class.copied]="copyStatus() === 'Copied!'"
|
|
15816
|
+
(click)="copyJson()"
|
|
15817
|
+
title="Copy schema JSON to clipboard"
|
|
15818
|
+
>
|
|
15819
|
+
<rpt-icon [name]="copyStatus() === 'Copied!' ? 'check' : 'copy'" [size]="13" />
|
|
15820
|
+
<span>{{ copyStatus() }}</span>
|
|
15821
|
+
</button>
|
|
15822
|
+
</div>
|
|
15823
|
+
</div>
|
|
15824
|
+
|
|
15825
|
+
<!-- Code Viewport with Line Numbers -->
|
|
15826
|
+
<div class="json-viewport" [class.wrap-enabled]="wrapLines()">
|
|
15827
|
+
<div class="json-scroll-container">
|
|
15828
|
+
<table class="json-code-table" role="presentation">
|
|
15829
|
+
<tbody>
|
|
15830
|
+
@for (line of highlightedLines(); track $index) {
|
|
15831
|
+
<tr class="json-code-row">
|
|
15832
|
+
<td class="json-line-number" aria-hidden="true">{{ $index + 1 }}</td>
|
|
15833
|
+
<td class="json-line-text"><span [innerHTML]="line"></span></td>
|
|
15834
|
+
</tr>
|
|
15835
|
+
}
|
|
15836
|
+
</tbody>
|
|
15837
|
+
</table>
|
|
15838
|
+
</div>
|
|
15620
15839
|
</div>
|
|
15621
|
-
<button type="button" class="btn-copy-json" (click)="copyJson()">
|
|
15622
|
-
<rpt-icon [name]="copyStatus() === 'Copied!' ? 'check' : 'copy'" [size]="13" />
|
|
15623
|
-
<span>{{ copyStatus() }}</span>
|
|
15624
|
-
</button>
|
|
15625
15840
|
</div>
|
|
15626
|
-
<pre class="json-display"><code>{{ formattedJson() }}</code></pre>
|
|
15627
15841
|
</div>
|
|
15628
15842
|
}
|
|
15629
15843
|
}
|
|
@@ -15685,7 +15899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
15685
15899
|
</div>
|
|
15686
15900
|
}
|
|
15687
15901
|
</div>
|
|
15688
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:420px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:95vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:380px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;overflow-y:auto;padding:24px;background-color:#0f172a;display:flex;flex-direction:column}.json-banner{display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e293b}.btn-copy-json{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.btn-copy-json:hover{background:#fff3}.json-display{flex:1;margin:0;padding:20px;background:#090d16;border-radius:8px;border:1px solid #1e293b;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
15902
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:420px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:95vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:380px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;min-height:0;padding:20px 24px;background-color:var(--rpt-color-bg, #f8fafc);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.json-editor-card{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border-subtle, #e2e8f0);border-radius:var(--rpt-border-radius-lg, 8px);box-shadow:0 1px 3px #0000000d,0 1px 2px -1px #00000008;overflow:hidden;transition:background-color .2s ease,border-color .2s ease}.json-editor-card.theme-dark{background:#0f172a;border-color:#1e293b;box-shadow:0 4px 12px #00000040}.json-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:var(--rpt-color-surface, #ffffff);border-bottom:1px solid var(--rpt-color-border-subtle, #e2e8f0);flex-shrink:0;transition:background-color .2s ease,border-color .2s ease}.theme-dark .json-banner{background:#0b1120;border-bottom-color:#1e293b}.json-banner-left{display:flex;align-items:center;gap:12px;min-width:0}.json-badge-icon{width:32px;height:32px;border-radius:var(--rpt-border-radius, 6px);background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border:1px solid rgba(37,99,235,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}.theme-dark .json-badge-icon{background:#2563eb33;color:#60a5fa;border-color:#60a5fa4d}.json-title-group{display:flex;flex-direction:column;gap:2px;min-width:0}.json-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.json-title{font-size:.875rem;font-weight:600;letter-spacing:-.01em;color:var(--rpt-color-text, #0f172a)}.theme-dark .json-title{color:#f1f5f9}.json-schema-tag{font-size:.6875rem;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:9999px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;text-transform:uppercase}.theme-dark .json-schema-tag{background:#1e293b;color:#94a3b8;border-color:#334155}.json-meta-row{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--rpt-color-text-muted, #64748b)}.theme-dark .json-meta-row{color:#64748b}.json-stat-pill strong{color:var(--rpt-color-text, #0f172a);font-weight:600}.theme-dark .json-stat-pill strong,.json-stat-divider{color:#cbd5e1}.theme-dark .json-stat-divider{color:#334155}.json-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.btn-json-action{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text-secondary, #334155);background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;transition:all .15s ease}.btn-json-action:hover{background:var(--rpt-color-surface-hover, #f1f5f9);border-color:var(--rpt-color-border-hover, #94a3b8);color:var(--rpt-color-text, #0f172a)}.btn-json-action.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:var(--rpt-color-primary, #2563eb);font-weight:600}.theme-dark .btn-json-action{background:#1e293b;border-color:#334155;color:#cbd5e1}.theme-dark .btn-json-action:hover{background:#334155;border-color:#475569;color:#fff}.theme-dark .btn-json-action.active{background:#2563eb40;color:#60a5fa;border-color:#3b82f6}.btn-copy-json{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;font-size:.75rem;font-weight:600;color:#fff;background:var(--rpt-color-primary, #2563eb);border:1px solid var(--rpt-color-primary, #2563eb);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;box-shadow:0 1px 2px #2563eb33;transition:all .15s ease}.btn-copy-json:hover{background:var(--rpt-color-primary-hover, #1d4ed8);border-color:var(--rpt-color-primary-hover, #1d4ed8)}.btn-copy-json.copied{background:#10b981;border-color:#10b981;box-shadow:0 1px 2px #10b98133}.json-viewport{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:background-color .2s ease}.theme-dark .json-viewport{background:#0f172a}.json-scroll-container{flex:1;min-height:0;overflow:auto}.json-code-table{width:100%;border-collapse:collapse;font-family:var(--rpt-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.8125rem;line-height:1.6}.json-code-row{transition:background-color .1s ease}.json-code-row:hover{background:#f8fafc}.theme-dark .json-code-row:hover{background:#1e293b99}.json-line-number{width:44px;min-width:44px;max-width:56px;padding:1px 12px 1px 8px;text-align:right;color:#94a3b8;background:#f8fafc;border-right:1px solid #e2e8f0;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;vertical-align:top;font-size:.75rem}.theme-dark .json-line-number{background:#0b1120;color:#475569;border-right-color:#1e293b}.json-line-text{padding:1px 16px;white-space:pre;vertical-align:top;color:#1e293b}.wrap-enabled .json-line-text{white-space:pre-wrap;word-break:break-all}.theme-dark .json-line-text{color:#e2e8f0}.json-token-key{color:#1e40af;font-weight:600}.json-token-string{color:#047857}.json-token-number{color:#7c3aed;font-weight:500}.json-token-boolean{color:#d97706;font-weight:600}.json-token-null{color:#dc2626;font-weight:600}.theme-dark .json-token-key{color:#60a5fa;font-weight:600}.theme-dark .json-token-string{color:#4ade80}.theme-dark .json-token-number{color:#c084fc;font-weight:500}.theme-dark .json-token-boolean{color:#fbbf24;font-weight:600}.theme-dark .json-token-null{color:#f87171;font-weight:600}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
15689
15903
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
15690
15904
|
type: HostListener,
|
|
15691
15905
|
args: ['window:resize']
|