wuic-framework-lib 1.0.19 → 1.1.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.
- package/fesm2022/{wuic-framework-lib-chart-list.component-C0OYuZoM.mjs → wuic-framework-lib-chart-list.component-C9_EDkGu.mjs} +73 -13
- package/fesm2022/{wuic-framework-lib-code-editor.component-B8OQ3Z0k.mjs → wuic-framework-lib-code-editor.component-D_p7LGSQ.mjs} +6 -6
- package/fesm2022/{wuic-framework-lib-designer.component-DsWgWtFj.mjs → wuic-framework-lib-designer.component-Dx6RraAn.mjs} +83 -50
- package/fesm2022/{wuic-framework-lib-first-run-wizard.component-wR_LrvPK.mjs → wuic-framework-lib-first-run-wizard.component-Cp8IKDb9.mjs} +9 -9
- package/fesm2022/{wuic-framework-lib-framework-docs.component-eyzu9tdV.mjs → wuic-framework-lib-framework-docs.component-CxckBsIX.mjs} +1205 -116
- package/fesm2022/{wuic-framework-lib-pivot-builder.component-BFdZW5Ch.mjs → wuic-framework-lib-pivot-builder.component-C-ceJi48.mjs} +269 -21
- package/fesm2022/{wuic-framework-lib-prompt-dialog-fallback-host.component-B583WbYe.mjs → wuic-framework-lib-prompt-dialog-fallback-host.component-DPZCgxOB.mjs} +6 -6
- package/fesm2022/{wuic-framework-lib-report-designer.component-HJUpslLX.mjs → wuic-framework-lib-report-designer.component-3-hUYft8.mjs} +5 -5
- package/fesm2022/{wuic-framework-lib-report-viewer.component-El32zpzi.mjs → wuic-framework-lib-report-viewer.component-D4QD_wPl.mjs} +5 -5
- package/fesm2022/{wuic-framework-lib-scheduler-list.component-E8s_e533.mjs → wuic-framework-lib-scheduler-list.component-C0nY8Wd6.mjs} +28 -5
- package/fesm2022/{wuic-framework-lib-spreadsheet-list-sf.component-CDn0qi_C.mjs → wuic-framework-lib-spreadsheet-list-sf.component-C9sWgq61.mjs} +449 -10
- package/fesm2022/{wuic-framework-lib-workflow-designer.component-hL7oKqYO.mjs → wuic-framework-lib-workflow-designer.component-8mv_Rbz9.mjs} +10 -10
- package/fesm2022/{wuic-framework-lib-wuic-framework-lib-ABS_G7lO.mjs → wuic-framework-lib-wuic-framework-lib-DJZAYFw8.mjs} +5882 -3545
- package/fesm2022/wuic-framework-lib.mjs +1 -1
- package/package.json +1 -1
- package/types/wuic-framework-lib.d.ts +1905 -998
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject } from 'rxjs';
|
|
4
|
-
import { W as WtoolboxService, k as WuicClientException, l as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-
|
|
4
|
+
import { W as WtoolboxService, k as WuicClientException, l as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-DJZAYFw8.mjs';
|
|
5
5
|
import * as i5 from 'primeng/chart';
|
|
6
6
|
import { ChartModule } from 'primeng/chart';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i8 from '@ngx-translate/core';
|
|
8
8
|
import { TranslateModule } from '@ngx-translate/core';
|
|
9
9
|
import * as i1 from '@angular/platform-browser';
|
|
10
10
|
import * as i1$1 from '@angular/router';
|
|
@@ -330,6 +330,16 @@ class ChartListComponent {
|
|
|
330
330
|
const metaChartOptions = info.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.options || {};
|
|
331
331
|
const metaChartType = info.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.type || "bar";
|
|
332
332
|
this.metaChartOptions = metaChartOptions;
|
|
333
|
+
// Seed UI controls (stacked/indexAxis) from dataOptions when present.
|
|
334
|
+
// Permette config 'stacked: true' + 'indexAxis: y' nel mdpropsbag.archetypes.chart.dataOptions
|
|
335
|
+
// direttamente, senza che l'utente debba toggle-are nel chart settings dialog.
|
|
336
|
+
const seedDataOptions = info.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.dataOptions || {};
|
|
337
|
+
if (seedDataOptions.stacked !== undefined && !this.hasUserChartTypeOverride) {
|
|
338
|
+
this.ui.stacked = !!seedDataOptions.stacked;
|
|
339
|
+
}
|
|
340
|
+
if (seedDataOptions.indexAxis && !this.hasUserChartTypeOverride) {
|
|
341
|
+
this.ui.indexAxis = (String(seedDataOptions.indexAxis).toLowerCase() === 'y') ? 'y' : 'x';
|
|
342
|
+
}
|
|
333
343
|
this.basicOptions = this.deepMerge({}, this.defaultChartOptions, this.getThemeChartOptions(), this.metaChartOptions);
|
|
334
344
|
if (!this.hasUserChartTypeOverride) {
|
|
335
345
|
this.selectedChartType = metaChartType;
|
|
@@ -1092,20 +1102,49 @@ class ChartListComponent {
|
|
|
1092
1102
|
}
|
|
1093
1103
|
else if (ds.labelField && ds.dataField) {
|
|
1094
1104
|
let dsInstance = {
|
|
1095
|
-
label: ds.label
|
|
1096
|
-
// backgroundColor: ds.backgroundColor,
|
|
1097
|
-
// borderColor: ds.borderColor,
|
|
1098
|
-
// borderWidth: ds.borderWidth
|
|
1105
|
+
label: ds.label
|
|
1099
1106
|
};
|
|
1100
1107
|
dsInstance.data = orderedRows.map((d) => this.getSeriesValue(d, ds.dataField));
|
|
1101
|
-
|
|
1102
|
-
|
|
1108
|
+
// Static colors per dataset (multi-series stacked / semantic palette).
|
|
1109
|
+
// Priority: backgroundColorField (per-row) > backgroundColor (static dataset)
|
|
1110
|
+
// > generateRandomColor (random per row) > applyDatasetAppearance (theme palette).
|
|
1111
|
+
// Cast `any` perche' ChartDatasetOptions del modello custom non espone
|
|
1112
|
+
// backgroundColor diretto (solo backgroundColorField), ma Chart.js runtime
|
|
1113
|
+
// accetta entrambi.
|
|
1114
|
+
const dsCfgAny = ds;
|
|
1115
|
+
if (dsCfgAny.backgroundColorField) {
|
|
1116
|
+
dsInstance.backgroundColor = orderedRows.map((d) => d[dsCfgAny.backgroundColorField]);
|
|
1117
|
+
}
|
|
1118
|
+
else if (dsCfgAny.backgroundColor) {
|
|
1119
|
+
dsInstance.backgroundColor = dsCfgAny.backgroundColor;
|
|
1103
1120
|
}
|
|
1104
|
-
else if (
|
|
1121
|
+
else if (dsCfgAny.generateRandomColor) {
|
|
1105
1122
|
dsInstance.backgroundColor = orderedRows.map(() => {
|
|
1106
1123
|
return 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',0.8)';
|
|
1107
1124
|
});
|
|
1108
1125
|
}
|
|
1126
|
+
// Cast `any` per Chart.js types: ChartDatasetOptions limita le keys
|
|
1127
|
+
// sul livello root, ma a runtime Chart.js le accetta tutte (chart-type-specific).
|
|
1128
|
+
const dsAny = ds;
|
|
1129
|
+
const dsInstAny = dsInstance;
|
|
1130
|
+
if (dsAny.borderColor)
|
|
1131
|
+
dsInstAny.borderColor = dsAny.borderColor;
|
|
1132
|
+
if (dsAny.borderWidth !== undefined)
|
|
1133
|
+
dsInstAny.borderWidth = dsAny.borderWidth;
|
|
1134
|
+
// `stack` raggruppa datasets in stacked bar separati per gruppo
|
|
1135
|
+
if (dsAny.stack)
|
|
1136
|
+
dsInstAny.stack = dsAny.stack;
|
|
1137
|
+
// Pass-through bar sizing controls (Chart.js bar/horizontal-bar):
|
|
1138
|
+
// evita che con poche categorie i bar si espandano a tutta altezza.
|
|
1139
|
+
// maxBarThickness=24 => bar mai oltre 24px anche con 2-3 categorie.
|
|
1140
|
+
if (dsAny.maxBarThickness !== undefined)
|
|
1141
|
+
dsInstAny.maxBarThickness = dsAny.maxBarThickness;
|
|
1142
|
+
if (dsAny.barThickness !== undefined)
|
|
1143
|
+
dsInstAny.barThickness = dsAny.barThickness;
|
|
1144
|
+
if (dsAny.barPercentage !== undefined)
|
|
1145
|
+
dsInstAny.barPercentage = dsAny.barPercentage;
|
|
1146
|
+
if (dsAny.categoryPercentage !== undefined)
|
|
1147
|
+
dsInstAny.categoryPercentage = dsAny.categoryPercentage;
|
|
1109
1148
|
if (ds.borderColorField) {
|
|
1110
1149
|
dsInstance.borderColor = orderedRows.map((d) => d[ds.borderColorField]);
|
|
1111
1150
|
dsInstance.borderWidth = 1;
|
|
@@ -1188,6 +1227,27 @@ class ChartListComponent {
|
|
|
1188
1227
|
nextHeight -= overflowDelta;
|
|
1189
1228
|
}
|
|
1190
1229
|
}
|
|
1230
|
+
// Cap al bounding del TD/cella dashboard. Quando il chart-list e' embedded
|
|
1231
|
+
// come widget di cella in una dashboard, NON deve espandersi oltre il box
|
|
1232
|
+
// riservato dalla cella — altrimenti lo strato sotto (es. tabella) viene
|
|
1233
|
+
// spinto fuori dal viewport. Solo TD veri (DOM tag) o ancestor con classe
|
|
1234
|
+
// CRM_HOME_CELL del designer (non qualsiasi ancestor con height esplicita,
|
|
1235
|
+
// perche' il chart-list ha un wrapper interno con height inline che
|
|
1236
|
+
// creerebbe un cap-loop).
|
|
1237
|
+
let constrainAncestor = chartHost.parentElement;
|
|
1238
|
+
while (constrainAncestor && constrainAncestor !== layoutContainer) {
|
|
1239
|
+
const isDashboardCell = constrainAncestor.tagName === 'TD'
|
|
1240
|
+
|| (constrainAncestor.className && constrainAncestor.className.indexOf('CRM_HOME_CELL') >= 0);
|
|
1241
|
+
if (isDashboardCell) {
|
|
1242
|
+
const ancRect = constrainAncestor.getBoundingClientRect();
|
|
1243
|
+
const cappedHeight = Math.floor(ancRect.bottom - hostTop - this.chartBottomPadding);
|
|
1244
|
+
if (cappedHeight > 0 && cappedHeight < nextHeight) {
|
|
1245
|
+
nextHeight = cappedHeight;
|
|
1246
|
+
}
|
|
1247
|
+
break;
|
|
1248
|
+
}
|
|
1249
|
+
constrainAncestor = constrainAncestor.parentElement;
|
|
1250
|
+
}
|
|
1191
1251
|
// Restore inline styles before updating the binding
|
|
1192
1252
|
chartHost.style.height = prevH;
|
|
1193
1253
|
chartHost.style.maxHeight = prevMH;
|
|
@@ -1284,10 +1344,10 @@ class ChartListComponent {
|
|
|
1284
1344
|
this.parentResizeObserver?.disconnect();
|
|
1285
1345
|
this.parentResizeObserver = undefined;
|
|
1286
1346
|
}
|
|
1287
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1347
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, deps: [{ token: i1.Title }, { token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }, { token: TranslationManagerService }, { token: UserInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1348
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartListComponent, isStandalone: true, selector: "wuic-chart-list", inputs: { hardcodedRoute: "hardcodedRoute", parentRecord: "parentRecord", parentMetaInfo: "parentMetaInfo", datasource: "datasource", hardcodedDatasource: "hardcodedDatasource", hideToolbar: "hideToolbar" }, outputs: { onChartDataSelect: "onChartDataSelect", onChartDrillDown: "onChartDrillDown", onChartDataBound: "onChartDataBound" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true }, { propertyName: "chartHostRef", first: true, predicate: ["chartHostRef"], descendants: true }], ngImport: i0, template: "@if (chartOptions) {\n <div class=\"chart-list-root\">\n @if (!hideToolbar) {\n <div class=\"chart-list-toolbar\">\n @if (isAdmin) {\n <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n }\n <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n @if (isAdmin) {\n <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n }\n </div>\n }\n\n <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n </div>\n </div>\n\n <wuic-archetype-configurator\n [visible]=\"showConfigPopup\"\n (visibleChange)=\"showConfigPopup = $event\"\n [archetype]=\"'chart'\"\n [metaInfo]=\"metaInfo\"\n [value]=\"getChartConfigValue()\"\n (applyConfig)=\"onArchetypeConfigApply($event)\">\n </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ChartModule }, { kind: "component", type: i5.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
|
|
1289
1349
|
}
|
|
1290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, decorators: [{
|
|
1291
1351
|
type: Component,
|
|
1292
1352
|
args: [{ selector: 'wuic-chart-list', imports: [ChartModule, TranslateModule, ArchetypeConfiguratorComponent], template: "@if (chartOptions) {\n <div class=\"chart-list-root\">\n @if (!hideToolbar) {\n <div class=\"chart-list-toolbar\">\n @if (isAdmin) {\n <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n }\n <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n @if (isAdmin) {\n <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n }\n </div>\n }\n\n <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n </div>\n </div>\n\n <wuic-archetype-configurator\n [visible]=\"showConfigPopup\"\n (visibleChange)=\"showConfigPopup = $event\"\n [archetype]=\"'chart'\"\n [metaInfo]=\"metaInfo\"\n [value]=\"getChartConfigValue()\"\n (applyConfig)=\"onArchetypeConfigApply($event)\">\n </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"] }]
|
|
1293
1353
|
}], ctorParameters: () => [{ type: i1.Title }, { type: i0.ChangeDetectorRef }, { type: i1$1.ActivatedRoute }, { type: TranslationManagerService }, { type: UserInfoService }], propDecorators: { hardcodedRoute: [{
|
|
@@ -1317,4 +1377,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1317
1377
|
}] } });
|
|
1318
1378
|
|
|
1319
1379
|
export { ChartListComponent };
|
|
1320
|
-
//# sourceMappingURL=wuic-framework-lib-chart-list.component-
|
|
1380
|
+
//# sourceMappingURL=wuic-framework-lib-chart-list.component-C9_EDkGu.mjs.map
|
|
@@ -6,9 +6,9 @@ import * as i1 from '@materia-ui/ngx-monaco-editor';
|
|
|
6
6
|
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
|
|
7
7
|
import { filter, take } from 'rxjs/operators';
|
|
8
8
|
import { Emitter } from 'monaco-editor/esm/vs/base/common/event';
|
|
9
|
-
import { W as WtoolboxService, M as MetadataProviderService, e as MetadatiColonna, m as MetaInfo, U as UserInfoService, f as DataProviderService } from './wuic-framework-lib-wuic-framework-lib-
|
|
9
|
+
import { W as WtoolboxService, M as MetadataProviderService, e as MetadatiColonna, m as MetaInfo, U as UserInfoService, f as DataProviderService } from './wuic-framework-lib-wuic-framework-lib-DJZAYFw8.mjs';
|
|
10
10
|
import { NgClass, NgStyle } from '@angular/common';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i14 from 'primeng/contextmenu';
|
|
12
12
|
import { ContextMenuModule } from 'primeng/contextmenu';
|
|
13
13
|
import * as i4 from 'primeng/tree';
|
|
14
14
|
import { TreeModule } from 'primeng/tree';
|
|
@@ -3891,10 +3891,10 @@ class CodeEditorComponent {
|
|
|
3891
3891
|
children: this.mapToPrimeTreeNodes(node?.items || [])
|
|
3892
3892
|
}));
|
|
3893
3893
|
}
|
|
3894
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3894
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i1.MonacoEditorLoaderService }, { token: i1$1.HttpClient }, { token: MetadataProviderService }, { token: UserInfoService }, { token: DataProviderService }, { token: WtoolboxService }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CodeEditorComponent, isStandalone: true, selector: "wuic-code-editor", inputs: { field: "field", record: "record", metaInfo: "metaInfo" }, host: { properties: { "style": "this.style" } }, viewQueries: [{ propertyName: "contextMenuAnchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }, { propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true }, { propertyName: "ctxs", first: true, predicate: ["ctxs"], descendants: true }], ngImport: i0, template: "@if (render) {\n<div [ngClass]=\"{'fullscreen': fullscreen, 'no-full-screen': !fullscreen }\">\n <div\n [ngStyle]=\"{width: sqlObjView ? '22%' : null, display: sqlObjView ? null : 'none', position: fullscreen ? 'absolute' : null, 'left': fullscreen ? '0px' : null, 'top': fullscreen ? '0px' : null }\"\n style=\"float: left; height: 100%; overflow: auto; background-color: #1e1e1e; z-index: 2000;\">\n <p-tree [value]=\"primeTreeNodes\">\n <ng-template let-node pTemplate=\"default\">\n <span style=\"-webkit-user-select: none; -ms-user-select: none; user-select: none;\" draggable=\"true\"\n (dragstart)=\"onTreeNodeDragStart($event, node.data)\" (click)=\"editorOptions.onNodeClick($event, node.data)\"\n (dragend)=\"onTreeNodeDragEnd($event, node.data)\">\n <span>\n {{ node.label }}\n </span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <div [ngStyle]=\"{width: sqlObjView ? '78%' : '100%', 'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null }\"\n style=\"height: 100%; float: left;\">\n <ul class=\"editor-btn\">\n <li>\n <div (click)=\"setFullScreen($event, this)\">\n <i\n [ngClass]=\"{'pi': true, 'pi-window-maximize': fullscreen == false, 'pi-window-minimize': fullscreen == true}\"></i>\n </div>\n </li>\n @if (editorOptions.language == 'sql') {\n <li>\n <div (click)=\"toggleSqlObjView($event, this)\">\n <i [ngClass]=\"{'pi': true, 'pi-server': true}\"></i>\n </div>\n </li>\n }\n @if (editorOptions.language == 'sql') {\n <li>\n <div (click)=\"testSql($event, this)\">\n <i [ngClass]=\"{'pi': true, 'pi-verified': true}\"></i>\n </div>\n </li>\n }\n @if (field.mc_suggest_value_callback) {\n <li>\n <div (click)=\"suggest($event, this)\">\n <i [ngClass]=\"{'pi': true, 'pi-question': true}\"></i>\n </div>\n </li>\n }\n @if (isHtmlEditor) {\n <li>\n <div (click)=\"formatHtmlNow($event)\" title=\"Format HTML\">\n <i [ngClass]=\"{'pi': true, 'pi-align-left': true}\"></i>\n </div>\n </li>\n <li>\n <div (click)=\"toggleHtmlPreview($event)\" title=\"Toggle HTML preview\">\n <i [ngClass]=\"{'pi': true, 'pi-eye': showHtmlPreview, 'pi-eye-slash': !showHtmlPreview}\"></i>\n </div>\n </li>\n }\n @if (isJsonEditor) {\n <li>\n <div (click)=\"formatJsonNow($event)\" title=\"Format JSON\">\n <i [ngClass]=\"{'pi': true, 'pi-code': true}\"></i>\n </div>\n </li>\n }\n </ul>\n <div class=\"editor-shell\">\n <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\">\n <ngx-monaco-editor #editorRef [options]=\"editorOptions\" [ngModel]=\"editorModelValue\"\n (ngModelChange)=\"onEditorModelChange($event)\"\n [ngModelOptions]=\"{standalone: true}\"\n [ngStyle]=\"{'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null, width: '100%' }\"\n style=\"width: 100%; height: 100%;\"\n (onDropIntoEditor)=\"editorOptions.onDropIntoEditor($event)\"></ngx-monaco-editor>\n </div>\n @if (isHtmlEditor && showHtmlPreview) {\n <div class=\"html-preview-pane\">\n <div class=\"html-preview-pane__header\">HTML Pseudo-Preview (sanitized)</div>\n <div class=\"html-preview-pane__body\" [innerHTML]=\"sanitizedHtmlPreview\"></div>\n </div>\n }\n </div>\n </div>\n</div>\n}\n\n@if (editorRef?.editorContent?.nativeElement) {\n<p-contextMenu [target]=\"editorRef?.editorContent?.nativeElement\" [model]=\"editorOptions.contextMenuItems\"\n appendTo=\"body\" />\n}\n", styles: [".editor-btn{color:#fff;list-style-type:none;z-index:2001;visibility:visible;position:absolute;right:10px;top:10px;display:flex;gap:8px;margin:0;padding:0}.editor-btn li{list-style:none}.editor-btn li div{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #334155;border-radius:4px;background:#0f172ad9;cursor:pointer}.fullscreen{position:fixed;inset:16px;z-index:3000;background:#1e1e1e;width:auto;height:auto}.fullscreen .editor-shell{position:absolute;inset:44px 0 0;height:auto}.fullscreen .editor-pane ngx-monaco-editor{position:relative;height:auto!important}.no-full-screen{width:100%;height:200px;position:relative}.editor-container{overflow:visible!important}.editor-shell{display:flex;width:100%;height:100%;min-height:0}.editor-pane{flex:1 1 auto;min-width:0;height:100%}.editor-pane--with-preview{flex:0 0 62%}.html-preview-pane{flex:0 0 38%;min-width:260px;border-left:1px solid #404040;background:#111827;color:#e5e7eb;display:flex;flex-direction:column}.html-preview-pane__header{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid #374151;color:#9ca3af}.html-preview-pane__body{flex:1 1 auto;overflow:auto;padding:12px;background:#fff;color:#111827}:host ::ng-deep .html-preview-pane__body .wuic-preview-component{border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:6px;padding:8px 10px;margin-bottom:10px;background:#f8fafc}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__title{font-weight:600;color:#0f172a;margin-bottom:4px}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__content{margin-top:8px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__label{display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__input{display:block;width:100%;border:1px solid #3b82f6;border-radius:4px;min-height:36px;box-sizing:border-box;background:#fff}:host ::ng-deep .monaco-editor .suggest-widget,:host ::ng-deep .monaco-editor .parameter-hints-widget,:host ::ng-deep .monaco-editor .monaco-hover{z-index:4000!important}:host ::ng-deep .monaco-editor .suggest-widget{height:220px!important;margin-top:-30px!important}:host ::ng-deep .monaco-editor .suggest-widget .tree,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows,:host ::ng-deep .monaco-editor .suggest-widget .monaco-scrollable-element{height:186px!important;max-height:186px!important}:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows{box-sizing:border-box;padding-bottom:20px!important}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:10px;visibility:hidden}::-webkit-scrollbar-thumb:hover{visibility:visible}::-webkit-scrollbar-thumb:hover{background:#fffc}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i1.MonacoEditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "uri"], outputs: ["init"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i14.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }] });
|
|
3896
3896
|
}
|
|
3897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeEditorComponent, decorators: [{
|
|
3898
3898
|
type: Component,
|
|
3899
3899
|
args: [{ selector: 'wuic-code-editor', imports: [NgClass, NgStyle, FormsModule, MonacoEditorModule, ContextMenuModule, TreeModule], template: "@if (render) {\n<div [ngClass]=\"{'fullscreen': fullscreen, 'no-full-screen': !fullscreen }\">\n <div\n [ngStyle]=\"{width: sqlObjView ? '22%' : null, display: sqlObjView ? null : 'none', position: fullscreen ? 'absolute' : null, 'left': fullscreen ? '0px' : null, 'top': fullscreen ? '0px' : null }\"\n style=\"float: left; height: 100%; overflow: auto; background-color: #1e1e1e; z-index: 2000;\">\n <p-tree [value]=\"primeTreeNodes\">\n <ng-template let-node pTemplate=\"default\">\n <span style=\"-webkit-user-select: none; -ms-user-select: none; user-select: none;\" draggable=\"true\"\n (dragstart)=\"onTreeNodeDragStart($event, node.data)\" (click)=\"editorOptions.onNodeClick($event, node.data)\"\n (dragend)=\"onTreeNodeDragEnd($event, node.data)\">\n <span>\n {{ node.label }}\n </span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <div [ngStyle]=\"{width: sqlObjView ? '78%' : '100%', 'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null }\"\n style=\"height: 100%; float: left;\">\n <ul class=\"editor-btn\">\n <li>\n <div (click)=\"setFullScreen($event, this)\">\n <i\n [ngClass]=\"{'pi': true, 'pi-window-maximize': fullscreen == false, 'pi-window-minimize': fullscreen == true}\"></i>\n </div>\n </li>\n @if (editorOptions.language == 'sql') {\n <li>\n <div (click)=\"toggleSqlObjView($event, this)\">\n <i [ngClass]=\"{'pi': true, 'pi-server': true}\"></i>\n </div>\n </li>\n }\n @if (editorOptions.language == 'sql') {\n <li>\n <div (click)=\"testSql($event, this)\">\n <i [ngClass]=\"{'pi': true, 'pi-verified': true}\"></i>\n </div>\n </li>\n }\n @if (field.mc_suggest_value_callback) {\n <li>\n <div (click)=\"suggest($event, this)\">\n <i [ngClass]=\"{'pi': true, 'pi-question': true}\"></i>\n </div>\n </li>\n }\n @if (isHtmlEditor) {\n <li>\n <div (click)=\"formatHtmlNow($event)\" title=\"Format HTML\">\n <i [ngClass]=\"{'pi': true, 'pi-align-left': true}\"></i>\n </div>\n </li>\n <li>\n <div (click)=\"toggleHtmlPreview($event)\" title=\"Toggle HTML preview\">\n <i [ngClass]=\"{'pi': true, 'pi-eye': showHtmlPreview, 'pi-eye-slash': !showHtmlPreview}\"></i>\n </div>\n </li>\n }\n @if (isJsonEditor) {\n <li>\n <div (click)=\"formatJsonNow($event)\" title=\"Format JSON\">\n <i [ngClass]=\"{'pi': true, 'pi-code': true}\"></i>\n </div>\n </li>\n }\n </ul>\n <div class=\"editor-shell\">\n <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\">\n <ngx-monaco-editor #editorRef [options]=\"editorOptions\" [ngModel]=\"editorModelValue\"\n (ngModelChange)=\"onEditorModelChange($event)\"\n [ngModelOptions]=\"{standalone: true}\"\n [ngStyle]=\"{'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null, width: '100%' }\"\n style=\"width: 100%; height: 100%;\"\n (onDropIntoEditor)=\"editorOptions.onDropIntoEditor($event)\"></ngx-monaco-editor>\n </div>\n @if (isHtmlEditor && showHtmlPreview) {\n <div class=\"html-preview-pane\">\n <div class=\"html-preview-pane__header\">HTML Pseudo-Preview (sanitized)</div>\n <div class=\"html-preview-pane__body\" [innerHTML]=\"sanitizedHtmlPreview\"></div>\n </div>\n }\n </div>\n </div>\n</div>\n}\n\n@if (editorRef?.editorContent?.nativeElement) {\n<p-contextMenu [target]=\"editorRef?.editorContent?.nativeElement\" [model]=\"editorOptions.contextMenuItems\"\n appendTo=\"body\" />\n}\n", styles: [".editor-btn{color:#fff;list-style-type:none;z-index:2001;visibility:visible;position:absolute;right:10px;top:10px;display:flex;gap:8px;margin:0;padding:0}.editor-btn li{list-style:none}.editor-btn li div{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #334155;border-radius:4px;background:#0f172ad9;cursor:pointer}.fullscreen{position:fixed;inset:16px;z-index:3000;background:#1e1e1e;width:auto;height:auto}.fullscreen .editor-shell{position:absolute;inset:44px 0 0;height:auto}.fullscreen .editor-pane ngx-monaco-editor{position:relative;height:auto!important}.no-full-screen{width:100%;height:200px;position:relative}.editor-container{overflow:visible!important}.editor-shell{display:flex;width:100%;height:100%;min-height:0}.editor-pane{flex:1 1 auto;min-width:0;height:100%}.editor-pane--with-preview{flex:0 0 62%}.html-preview-pane{flex:0 0 38%;min-width:260px;border-left:1px solid #404040;background:#111827;color:#e5e7eb;display:flex;flex-direction:column}.html-preview-pane__header{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid #374151;color:#9ca3af}.html-preview-pane__body{flex:1 1 auto;overflow:auto;padding:12px;background:#fff;color:#111827}:host ::ng-deep .html-preview-pane__body .wuic-preview-component{border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:6px;padding:8px 10px;margin-bottom:10px;background:#f8fafc}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__title{font-weight:600;color:#0f172a;margin-bottom:4px}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__content{margin-top:8px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__label{display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__input{display:block;width:100%;border:1px solid #3b82f6;border-radius:4px;min-height:36px;box-sizing:border-box;background:#fff}:host ::ng-deep .monaco-editor .suggest-widget,:host ::ng-deep .monaco-editor .parameter-hints-widget,:host ::ng-deep .monaco-editor .monaco-hover{z-index:4000!important}:host ::ng-deep .monaco-editor .suggest-widget{height:220px!important;margin-top:-30px!important}:host ::ng-deep .monaco-editor .suggest-widget .tree,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows,:host ::ng-deep .monaco-editor .suggest-widget .monaco-scrollable-element{height:186px!important;max-height:186px!important}:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows{box-sizing:border-box;padding-bottom:20px!important}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:10px;visibility:hidden}::-webkit-scrollbar-thumb:hover{visibility:visible}::-webkit-scrollbar-thumb:hover{background:#fffc}\n"] }]
|
|
3900
3900
|
}], ctorParameters: () => [{ type: i1.MonacoEditorLoaderService }, { type: i1$1.HttpClient }, { type: MetadataProviderService }, { type: UserInfoService }, { type: DataProviderService }, { type: WtoolboxService }, { type: i1$2.DomSanitizer }], propDecorators: { style: [{
|
|
@@ -3918,4 +3918,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
3918
3918
|
}] } });
|
|
3919
3919
|
|
|
3920
3920
|
export { CodeEditorComponent };
|
|
3921
|
-
//# sourceMappingURL=wuic-framework-lib-code-editor.component-
|
|
3921
|
+
//# sourceMappingURL=wuic-framework-lib-code-editor.component-D_p7LGSQ.mjs.map
|