@dev-tcloud/tcloud-ui 6.21.7 → 6.22.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/docs/tcloud-ui-editor-diff.md +33 -0
- package/docs/tcloud-ui-editor.md +28 -0
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +349 -4
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/js/tcloud-ui-app.js +1 -1
- package/lib/_modules/tcloud-ui-editor/monaco-loader.d.ts +20 -0
- package/lib/_modules/tcloud-ui-editor/tcloud-ui-editor.component.d.ts +24 -0
- package/lib/_modules/tcloud-ui-editor-diff/tcloud-ui-editor-diff.component.d.ts +43 -0
- package/lib/tcloud-ui.module.d.ts +30 -28
- package/package.json +3 -2
- package/public-api.d.ts +2 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# tcloud-ui-editor-diff
|
|
2
|
+
|
|
3
|
+
Componente para comparacao de dois textos com destaque de diferencas usando `monaco-editor`.
|
|
4
|
+
|
|
5
|
+
## Exemplo
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<tcloud-ui-editor-diff
|
|
9
|
+
[(originalValue)]="originalCode"
|
|
10
|
+
[(modifiedValue)]="modifiedCode"
|
|
11
|
+
[language]="'typescript'"
|
|
12
|
+
[theme]="'vs-dark'"
|
|
13
|
+
[readOnly]="true"
|
|
14
|
+
height="420px"
|
|
15
|
+
></tcloud-ui-editor-diff>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Inputs
|
|
19
|
+
|
|
20
|
+
- `originalValue: string` - conteudo do lado original.
|
|
21
|
+
- `modifiedValue: string` - conteudo do lado modificado.
|
|
22
|
+
- `language: string` - linguagem do Monaco.
|
|
23
|
+
- `theme: string` - tema (`vs`, `vs-dark`, `hc-black`).
|
|
24
|
+
- `height: string` - altura do editor de diff.
|
|
25
|
+
- `readOnly: boolean` - quando `true` (padrao), original e modificado ficam somente leitura.
|
|
26
|
+
- `originalEditable: boolean` - so aplica com `readOnly=false`; permite editar apenas o lado original.
|
|
27
|
+
- `showDiagnostics: boolean` - exibe erros de validacao (TypeScript, etc.). Padrao: `false`.
|
|
28
|
+
- `options: IStandaloneDiffEditorConstructionOptions` - opcoes extras do Monaco.
|
|
29
|
+
|
|
30
|
+
## Outputs
|
|
31
|
+
|
|
32
|
+
- `originalValueChange: EventEmitter<string>` - emite mudancas no lado original.
|
|
33
|
+
- `modifiedValueChange: EventEmitter<string>` - emite mudancas no lado modificado.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# tcloud-ui-editor
|
|
2
|
+
|
|
3
|
+
Componente para edição de texto/código com `monaco-editor`.
|
|
4
|
+
|
|
5
|
+
## Exemplo
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<tcloud-ui-editor
|
|
9
|
+
[(value)]="code"
|
|
10
|
+
[language]="'typescript'"
|
|
11
|
+
[theme]="'vs-dark'"
|
|
12
|
+
[readOnly]="false"
|
|
13
|
+
height="360px"
|
|
14
|
+
></tcloud-ui-editor>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Inputs
|
|
18
|
+
|
|
19
|
+
- `value: string` - valor inicial do editor.
|
|
20
|
+
- `language: string` - linguagem do Monaco (ex: `plaintext`, `json`, `typescript`).
|
|
21
|
+
- `theme: string` - tema (`vs`, `vs-dark`, `hc-black`).
|
|
22
|
+
- `height: string` - altura do editor.
|
|
23
|
+
- `readOnly: boolean` - define modo somente leitura.
|
|
24
|
+
- `options: IStandaloneEditorConstructionOptions` - opcoes extras do Monaco.
|
|
25
|
+
|
|
26
|
+
## Outputs
|
|
27
|
+
|
|
28
|
+
- `valueChange: EventEmitter<string>` - emite quando o conteudo muda.
|
|
@@ -6538,6 +6538,345 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
6538
6538
|
type: Input
|
|
6539
6539
|
}] } });
|
|
6540
6540
|
|
|
6541
|
+
const CDN_MONACO_VS_BASE_PATH = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs';
|
|
6542
|
+
let monacoLoaderPromise = null;
|
|
6543
|
+
function appendScript(src) {
|
|
6544
|
+
return new Promise((resolve, reject) => {
|
|
6545
|
+
const script = document.createElement('script');
|
|
6546
|
+
script.type = 'text/javascript';
|
|
6547
|
+
script.src = src;
|
|
6548
|
+
script.async = true;
|
|
6549
|
+
script.onload = () => resolve();
|
|
6550
|
+
script.onerror = (error) => reject(error);
|
|
6551
|
+
document.body.appendChild(script);
|
|
6552
|
+
});
|
|
6553
|
+
}
|
|
6554
|
+
function getWorkerBootstrap(vsBasePath) {
|
|
6555
|
+
const workerSource = `self.MonacoEnvironment={baseUrl:'${vsBasePath}/'};importScripts('${vsBasePath}/base/worker/workerMain.js');`;
|
|
6556
|
+
return `data:text/javascript;charset=utf-8,${encodeURIComponent(workerSource)}`;
|
|
6557
|
+
}
|
|
6558
|
+
async function loadMonacoEditor() {
|
|
6559
|
+
if (typeof window === 'undefined') {
|
|
6560
|
+
throw new Error('Monaco Editor can only be loaded in browser environments.');
|
|
6561
|
+
}
|
|
6562
|
+
if (window.monaco?.editor) {
|
|
6563
|
+
return window.monaco;
|
|
6564
|
+
}
|
|
6565
|
+
if (!monacoLoaderPromise) {
|
|
6566
|
+
monacoLoaderPromise = (async () => {
|
|
6567
|
+
if (!window.require) {
|
|
6568
|
+
await appendScript(`${CDN_MONACO_VS_BASE_PATH}/loader.js`);
|
|
6569
|
+
}
|
|
6570
|
+
if (!window.require) {
|
|
6571
|
+
throw new Error('Monaco AMD loader was not initialized.');
|
|
6572
|
+
}
|
|
6573
|
+
window.require.config({
|
|
6574
|
+
paths: { vs: CDN_MONACO_VS_BASE_PATH }
|
|
6575
|
+
});
|
|
6576
|
+
window.MonacoEnvironment = {
|
|
6577
|
+
getWorkerUrl: () => getWorkerBootstrap(CDN_MONACO_VS_BASE_PATH)
|
|
6578
|
+
};
|
|
6579
|
+
await new Promise((resolve, reject) => {
|
|
6580
|
+
window.require?.(['vs/editor/editor.main'], () => resolve(), (error) => reject(error));
|
|
6581
|
+
});
|
|
6582
|
+
if (!window.monaco) {
|
|
6583
|
+
throw new Error('Monaco Editor global object was not created.');
|
|
6584
|
+
}
|
|
6585
|
+
return window.monaco;
|
|
6586
|
+
})();
|
|
6587
|
+
}
|
|
6588
|
+
return monacoLoaderPromise;
|
|
6589
|
+
}
|
|
6590
|
+
|
|
6591
|
+
class TCloudUiEditorComponent {
|
|
6592
|
+
constructor() {
|
|
6593
|
+
this.value = '';
|
|
6594
|
+
this.language = 'plaintext';
|
|
6595
|
+
this.theme = 'vs-dark';
|
|
6596
|
+
this.height = '320px';
|
|
6597
|
+
this.options = {};
|
|
6598
|
+
this.readOnly = false;
|
|
6599
|
+
this.valueChange = new EventEmitter();
|
|
6600
|
+
this.syncingValue = false;
|
|
6601
|
+
}
|
|
6602
|
+
async ngAfterViewInit() {
|
|
6603
|
+
if (!this.editorContainer) {
|
|
6604
|
+
return;
|
|
6605
|
+
}
|
|
6606
|
+
this.monaco = await loadMonacoEditor();
|
|
6607
|
+
this.monaco.editor.setTheme(this.theme);
|
|
6608
|
+
this.editor = this.monaco.editor.create(this.editorContainer.nativeElement, {
|
|
6609
|
+
value: this.value ?? '',
|
|
6610
|
+
language: this.language,
|
|
6611
|
+
readOnly: this.readOnly,
|
|
6612
|
+
automaticLayout: true,
|
|
6613
|
+
...this.options
|
|
6614
|
+
});
|
|
6615
|
+
this.onValueChangeDisposable = this.editor.onDidChangeModelContent(() => {
|
|
6616
|
+
if (!this.editor || this.syncingValue) {
|
|
6617
|
+
return;
|
|
6618
|
+
}
|
|
6619
|
+
const currentValue = this.editor.getValue();
|
|
6620
|
+
this.value = currentValue;
|
|
6621
|
+
this.valueChange.emit(currentValue);
|
|
6622
|
+
});
|
|
6623
|
+
}
|
|
6624
|
+
ngOnChanges(changes) {
|
|
6625
|
+
if (!this.editor || !this.monaco) {
|
|
6626
|
+
return;
|
|
6627
|
+
}
|
|
6628
|
+
if (changes['theme'] && !changes['theme'].firstChange) {
|
|
6629
|
+
this.monaco.editor.setTheme(this.theme);
|
|
6630
|
+
}
|
|
6631
|
+
if (changes['language'] && !changes['language'].firstChange) {
|
|
6632
|
+
const model = this.editor.getModel();
|
|
6633
|
+
if (model) {
|
|
6634
|
+
this.monaco.editor.setModelLanguage(model, this.language);
|
|
6635
|
+
}
|
|
6636
|
+
}
|
|
6637
|
+
if (changes['value'] && !changes['value'].firstChange) {
|
|
6638
|
+
this.syncEditorValue(this.value ?? '');
|
|
6639
|
+
}
|
|
6640
|
+
if (changes['readOnly'] || changes['options']) {
|
|
6641
|
+
this.editor.updateOptions({
|
|
6642
|
+
readOnly: this.readOnly,
|
|
6643
|
+
automaticLayout: true,
|
|
6644
|
+
...this.options
|
|
6645
|
+
});
|
|
6646
|
+
}
|
|
6647
|
+
}
|
|
6648
|
+
ngOnDestroy() {
|
|
6649
|
+
this.onValueChangeDisposable?.dispose();
|
|
6650
|
+
this.editor?.dispose();
|
|
6651
|
+
}
|
|
6652
|
+
syncEditorValue(value) {
|
|
6653
|
+
if (!this.editor || this.editor.getValue() === value) {
|
|
6654
|
+
return;
|
|
6655
|
+
}
|
|
6656
|
+
this.syncingValue = true;
|
|
6657
|
+
this.editor.setValue(value);
|
|
6658
|
+
this.syncingValue = false;
|
|
6659
|
+
}
|
|
6660
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TCloudUiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TCloudUiEditorComponent, isStandalone: true, selector: "tcloud-ui-editor", inputs: { value: "value", language: "language", theme: "theme", height: "height", options: "options", readOnly: "readOnly" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcloud-ui-editor-wrapper\" [style.height]=\"height\">\n <div #editorContainer class=\"tcloud-ui-editor-container\"></div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-editor-wrapper{width:100%}.tcloud-ui-editor-container{width:100%;height:100%;min-height:180px;border:1px solid var(--c-neutral-300, #d1d5db);border-radius:8px;overflow:hidden}\n"] }); }
|
|
6662
|
+
}
|
|
6663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TCloudUiEditorComponent, decorators: [{
|
|
6664
|
+
type: Component,
|
|
6665
|
+
args: [{ selector: 'tcloud-ui-editor', imports: [], template: "<div class=\"tcloud-ui-editor-wrapper\" [style.height]=\"height\">\n <div #editorContainer class=\"tcloud-ui-editor-container\"></div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-editor-wrapper{width:100%}.tcloud-ui-editor-container{width:100%;height:100%;min-height:180px;border:1px solid var(--c-neutral-300, #d1d5db);border-radius:8px;overflow:hidden}\n"] }]
|
|
6666
|
+
}], propDecorators: { value: [{
|
|
6667
|
+
type: Input
|
|
6668
|
+
}], language: [{
|
|
6669
|
+
type: Input
|
|
6670
|
+
}], theme: [{
|
|
6671
|
+
type: Input
|
|
6672
|
+
}], height: [{
|
|
6673
|
+
type: Input
|
|
6674
|
+
}], options: [{
|
|
6675
|
+
type: Input
|
|
6676
|
+
}], readOnly: [{
|
|
6677
|
+
type: Input
|
|
6678
|
+
}], valueChange: [{
|
|
6679
|
+
type: Output
|
|
6680
|
+
}], editorContainer: [{
|
|
6681
|
+
type: ViewChild,
|
|
6682
|
+
args: ['editorContainer', { static: true }]
|
|
6683
|
+
}] } });
|
|
6684
|
+
|
|
6685
|
+
const DEFAULT_DIAGNOSTICS_OPTIONS = {
|
|
6686
|
+
noSemanticValidation: false,
|
|
6687
|
+
noSyntaxValidation: false,
|
|
6688
|
+
noSuggestionDiagnostics: false
|
|
6689
|
+
};
|
|
6690
|
+
const DISABLED_DIAGNOSTICS_OPTIONS = {
|
|
6691
|
+
noSemanticValidation: true,
|
|
6692
|
+
noSyntaxValidation: true,
|
|
6693
|
+
noSuggestionDiagnostics: true
|
|
6694
|
+
};
|
|
6695
|
+
class TCloudUiEditorDiffComponent {
|
|
6696
|
+
constructor() {
|
|
6697
|
+
this.originalValue = '';
|
|
6698
|
+
this.modifiedValue = '';
|
|
6699
|
+
this.language = 'plaintext';
|
|
6700
|
+
this.theme = 'vs-dark';
|
|
6701
|
+
this.height = '420px';
|
|
6702
|
+
this.options = {};
|
|
6703
|
+
/** Quando true, original e modificado ficam somente leitura. */
|
|
6704
|
+
this.readOnly = true;
|
|
6705
|
+
/** So aplica quando readOnly=false. Permite editar apenas o lado original. */
|
|
6706
|
+
this.originalEditable = false;
|
|
6707
|
+
/** Exibe validacao/sublinhados de erro (TypeScript, JSON, etc.). Padrao: false. */
|
|
6708
|
+
this.showDiagnostics = false;
|
|
6709
|
+
this.originalValueChange = new EventEmitter();
|
|
6710
|
+
this.modifiedValueChange = new EventEmitter();
|
|
6711
|
+
this.syncingOriginalValue = false;
|
|
6712
|
+
this.syncingModifiedValue = false;
|
|
6713
|
+
this.instanceId = `tcloud-ui-editor-diff-${Math.random().toString(36).slice(2)}`;
|
|
6714
|
+
}
|
|
6715
|
+
async ngAfterViewInit() {
|
|
6716
|
+
if (!this.diffEditorContainer) {
|
|
6717
|
+
return;
|
|
6718
|
+
}
|
|
6719
|
+
this.monaco = await loadMonacoEditor();
|
|
6720
|
+
this.monaco.editor.setTheme(this.theme);
|
|
6721
|
+
this.applyLanguageDiagnostics();
|
|
6722
|
+
this.diffEditor = this.monaco.editor.createDiffEditor(this.diffEditorContainer.nativeElement, this.buildDiffEditorOptions());
|
|
6723
|
+
this.originalModel = this.monaco.editor.createModel(this.originalValue ?? '', this.language, this.monaco.Uri.parse(`inmemory://${this.instanceId}/original`));
|
|
6724
|
+
this.modifiedModel = this.monaco.editor.createModel(this.modifiedValue ?? '', this.language, this.monaco.Uri.parse(`inmemory://${this.instanceId}/modified`));
|
|
6725
|
+
this.diffEditor.setModel({
|
|
6726
|
+
original: this.originalModel,
|
|
6727
|
+
modified: this.modifiedModel
|
|
6728
|
+
});
|
|
6729
|
+
this.applyReadOnlyState();
|
|
6730
|
+
this.originalChangeDisposable = this.originalModel.onDidChangeContent(() => {
|
|
6731
|
+
if (this.syncingOriginalValue || this.isReadOnlyEffective()) {
|
|
6732
|
+
return;
|
|
6733
|
+
}
|
|
6734
|
+
this.originalValue = this.originalModel?.getValue() ?? '';
|
|
6735
|
+
this.originalValueChange.emit(this.originalValue);
|
|
6736
|
+
});
|
|
6737
|
+
this.modifiedChangeDisposable = this.modifiedModel.onDidChangeContent(() => {
|
|
6738
|
+
if (this.syncingModifiedValue || this.readOnly) {
|
|
6739
|
+
return;
|
|
6740
|
+
}
|
|
6741
|
+
this.modifiedValue = this.modifiedModel?.getValue() ?? '';
|
|
6742
|
+
this.modifiedValueChange.emit(this.modifiedValue);
|
|
6743
|
+
});
|
|
6744
|
+
}
|
|
6745
|
+
ngOnChanges(changes) {
|
|
6746
|
+
if (!this.monaco || !this.diffEditor) {
|
|
6747
|
+
return;
|
|
6748
|
+
}
|
|
6749
|
+
if (changes['theme'] && !changes['theme'].firstChange) {
|
|
6750
|
+
this.monaco.editor.setTheme(this.theme);
|
|
6751
|
+
}
|
|
6752
|
+
if (changes['language'] && !changes['language'].firstChange) {
|
|
6753
|
+
if (this.originalModel) {
|
|
6754
|
+
this.monaco.editor.setModelLanguage(this.originalModel, this.language);
|
|
6755
|
+
}
|
|
6756
|
+
if (this.modifiedModel) {
|
|
6757
|
+
this.monaco.editor.setModelLanguage(this.modifiedModel, this.language);
|
|
6758
|
+
}
|
|
6759
|
+
this.applyLanguageDiagnostics();
|
|
6760
|
+
}
|
|
6761
|
+
if (changes['showDiagnostics'] && !changes['showDiagnostics'].firstChange) {
|
|
6762
|
+
if (this.showDiagnostics) {
|
|
6763
|
+
this.restoreLanguageDiagnostics();
|
|
6764
|
+
}
|
|
6765
|
+
else {
|
|
6766
|
+
this.applyLanguageDiagnostics();
|
|
6767
|
+
}
|
|
6768
|
+
this.diffEditor.updateOptions(this.buildDiffEditorOptions());
|
|
6769
|
+
}
|
|
6770
|
+
if (changes['originalValue'] && !changes['originalValue'].firstChange) {
|
|
6771
|
+
this.syncOriginalModel(this.originalValue ?? '');
|
|
6772
|
+
}
|
|
6773
|
+
if (changes['modifiedValue'] && !changes['modifiedValue'].firstChange) {
|
|
6774
|
+
this.syncModifiedModel(this.modifiedValue ?? '');
|
|
6775
|
+
}
|
|
6776
|
+
if (changes['readOnly'] || changes['originalEditable'] || changes['options']) {
|
|
6777
|
+
this.applyReadOnlyState();
|
|
6778
|
+
}
|
|
6779
|
+
}
|
|
6780
|
+
ngOnDestroy() {
|
|
6781
|
+
this.restoreLanguageDiagnostics();
|
|
6782
|
+
this.originalChangeDisposable?.dispose();
|
|
6783
|
+
this.modifiedChangeDisposable?.dispose();
|
|
6784
|
+
this.diffEditor?.dispose();
|
|
6785
|
+
this.originalModel?.dispose();
|
|
6786
|
+
this.modifiedModel?.dispose();
|
|
6787
|
+
}
|
|
6788
|
+
isReadOnlyEffective() {
|
|
6789
|
+
return this.readOnly || !this.originalEditable;
|
|
6790
|
+
}
|
|
6791
|
+
buildDiffEditorOptions() {
|
|
6792
|
+
const originalEditable = this.readOnly ? false : this.originalEditable;
|
|
6793
|
+
return {
|
|
6794
|
+
readOnly: this.readOnly,
|
|
6795
|
+
originalEditable,
|
|
6796
|
+
automaticLayout: true,
|
|
6797
|
+
renderValidationDecorations: this.showDiagnostics ? 'on' : 'off',
|
|
6798
|
+
...this.options
|
|
6799
|
+
};
|
|
6800
|
+
}
|
|
6801
|
+
applyReadOnlyState() {
|
|
6802
|
+
if (!this.diffEditor) {
|
|
6803
|
+
return;
|
|
6804
|
+
}
|
|
6805
|
+
const originalEditable = this.readOnly ? false : this.originalEditable;
|
|
6806
|
+
this.diffEditor.updateOptions(this.buildDiffEditorOptions());
|
|
6807
|
+
this.diffEditor.getOriginalEditor().updateOptions({ readOnly: !originalEditable });
|
|
6808
|
+
this.diffEditor.getModifiedEditor().updateOptions({ readOnly: this.readOnly });
|
|
6809
|
+
}
|
|
6810
|
+
getLanguageDiagnosticsApi() {
|
|
6811
|
+
return this.monaco?.languages;
|
|
6812
|
+
}
|
|
6813
|
+
applyLanguageDiagnostics() {
|
|
6814
|
+
if (!this.monaco || this.showDiagnostics) {
|
|
6815
|
+
return;
|
|
6816
|
+
}
|
|
6817
|
+
const languages = this.getLanguageDiagnosticsApi();
|
|
6818
|
+
languages.typescript?.typescriptDefaults.setDiagnosticsOptions(DISABLED_DIAGNOSTICS_OPTIONS);
|
|
6819
|
+
languages.typescript?.javascriptDefaults.setDiagnosticsOptions(DISABLED_DIAGNOSTICS_OPTIONS);
|
|
6820
|
+
languages.json?.jsonDefaults.setDiagnosticsOptions({ validate: false });
|
|
6821
|
+
}
|
|
6822
|
+
restoreLanguageDiagnostics() {
|
|
6823
|
+
if (!this.monaco) {
|
|
6824
|
+
return;
|
|
6825
|
+
}
|
|
6826
|
+
const languages = this.getLanguageDiagnosticsApi();
|
|
6827
|
+
languages.typescript?.typescriptDefaults.setDiagnosticsOptions(DEFAULT_DIAGNOSTICS_OPTIONS);
|
|
6828
|
+
languages.typescript?.javascriptDefaults.setDiagnosticsOptions(DEFAULT_DIAGNOSTICS_OPTIONS);
|
|
6829
|
+
languages.json?.jsonDefaults.setDiagnosticsOptions({ validate: true });
|
|
6830
|
+
}
|
|
6831
|
+
syncOriginalModel(value) {
|
|
6832
|
+
if (!this.originalModel || this.originalModel.getValue() === value) {
|
|
6833
|
+
return;
|
|
6834
|
+
}
|
|
6835
|
+
this.syncingOriginalValue = true;
|
|
6836
|
+
this.originalModel.setValue(value);
|
|
6837
|
+
this.syncingOriginalValue = false;
|
|
6838
|
+
}
|
|
6839
|
+
syncModifiedModel(value) {
|
|
6840
|
+
if (!this.modifiedModel || this.modifiedModel.getValue() === value) {
|
|
6841
|
+
return;
|
|
6842
|
+
}
|
|
6843
|
+
this.syncingModifiedValue = true;
|
|
6844
|
+
this.modifiedModel.setValue(value);
|
|
6845
|
+
this.syncingModifiedValue = false;
|
|
6846
|
+
}
|
|
6847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TCloudUiEditorDiffComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6848
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TCloudUiEditorDiffComponent, isStandalone: true, selector: "tcloud-ui-editor-diff", inputs: { originalValue: "originalValue", modifiedValue: "modifiedValue", language: "language", theme: "theme", height: "height", options: "options", readOnly: "readOnly", originalEditable: "originalEditable", showDiagnostics: "showDiagnostics" }, outputs: { originalValueChange: "originalValueChange", modifiedValueChange: "modifiedValueChange" }, viewQueries: [{ propertyName: "diffEditorContainer", first: true, predicate: ["diffEditorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcloud-ui-editor-diff-wrapper\" [style.height]=\"height\">\n <div #diffEditorContainer class=\"tcloud-ui-editor-diff-container\"></div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-editor-diff-wrapper{width:100%}.tcloud-ui-editor-diff-container{width:100%;height:100%;min-height:240px;border:1px solid var(--c-neutral-300, #d1d5db);border-radius:8px;overflow:hidden}\n"] }); }
|
|
6849
|
+
}
|
|
6850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TCloudUiEditorDiffComponent, decorators: [{
|
|
6851
|
+
type: Component,
|
|
6852
|
+
args: [{ selector: 'tcloud-ui-editor-diff', imports: [], template: "<div class=\"tcloud-ui-editor-diff-wrapper\" [style.height]=\"height\">\n <div #diffEditorContainer class=\"tcloud-ui-editor-diff-container\"></div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-editor-diff-wrapper{width:100%}.tcloud-ui-editor-diff-container{width:100%;height:100%;min-height:240px;border:1px solid var(--c-neutral-300, #d1d5db);border-radius:8px;overflow:hidden}\n"] }]
|
|
6853
|
+
}], propDecorators: { originalValue: [{
|
|
6854
|
+
type: Input
|
|
6855
|
+
}], modifiedValue: [{
|
|
6856
|
+
type: Input
|
|
6857
|
+
}], language: [{
|
|
6858
|
+
type: Input
|
|
6859
|
+
}], theme: [{
|
|
6860
|
+
type: Input
|
|
6861
|
+
}], height: [{
|
|
6862
|
+
type: Input
|
|
6863
|
+
}], options: [{
|
|
6864
|
+
type: Input
|
|
6865
|
+
}], readOnly: [{
|
|
6866
|
+
type: Input
|
|
6867
|
+
}], originalEditable: [{
|
|
6868
|
+
type: Input
|
|
6869
|
+
}], showDiagnostics: [{
|
|
6870
|
+
type: Input
|
|
6871
|
+
}], originalValueChange: [{
|
|
6872
|
+
type: Output
|
|
6873
|
+
}], modifiedValueChange: [{
|
|
6874
|
+
type: Output
|
|
6875
|
+
}], diffEditorContainer: [{
|
|
6876
|
+
type: ViewChild,
|
|
6877
|
+
args: ['diffEditorContainer', { static: true }]
|
|
6878
|
+
}] } });
|
|
6879
|
+
|
|
6541
6880
|
class TCloudUiAlignDirective {
|
|
6542
6881
|
set TCalign(direction) {
|
|
6543
6882
|
if (direction) {
|
|
@@ -9471,7 +9810,9 @@ const COMPONENTS = [
|
|
|
9471
9810
|
TCloudUiFilterBarComponent,
|
|
9472
9811
|
TCloudUiLegendComponent,
|
|
9473
9812
|
TCloudUiSearchBarComponent,
|
|
9474
|
-
TCloudUiUploadAreaComponent
|
|
9813
|
+
TCloudUiUploadAreaComponent,
|
|
9814
|
+
TCloudUiEditorComponent,
|
|
9815
|
+
TCloudUiEditorDiffComponent
|
|
9475
9816
|
];
|
|
9476
9817
|
const DIRECTIVES = [
|
|
9477
9818
|
TCloudUiAlignDirective,
|
|
@@ -9603,7 +9944,9 @@ class TCloudUiModule {
|
|
|
9603
9944
|
TCloudUiFilterBarComponent,
|
|
9604
9945
|
TCloudUiLegendComponent,
|
|
9605
9946
|
TCloudUiSearchBarComponent,
|
|
9606
|
-
TCloudUiUploadAreaComponent,
|
|
9947
|
+
TCloudUiUploadAreaComponent,
|
|
9948
|
+
TCloudUiEditorComponent,
|
|
9949
|
+
TCloudUiEditorDiffComponent, TCloudUiAlignDirective,
|
|
9607
9950
|
TCloudUiCheckboxDirective,
|
|
9608
9951
|
TCloudUiCurrencyDirective,
|
|
9609
9952
|
TCloudUiElCopyDirective,
|
|
@@ -9697,7 +10040,9 @@ class TCloudUiModule {
|
|
|
9697
10040
|
TCloudUiFilterBarComponent,
|
|
9698
10041
|
TCloudUiLegendComponent,
|
|
9699
10042
|
TCloudUiSearchBarComponent,
|
|
9700
|
-
TCloudUiUploadAreaComponent,
|
|
10043
|
+
TCloudUiUploadAreaComponent,
|
|
10044
|
+
TCloudUiEditorComponent,
|
|
10045
|
+
TCloudUiEditorDiffComponent, TCloudUiAlignDirective,
|
|
9701
10046
|
TCloudUiCheckboxDirective,
|
|
9702
10047
|
TCloudUiCurrencyDirective,
|
|
9703
10048
|
TCloudUiElCopyDirective,
|
|
@@ -11811,5 +12156,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
11811
12156
|
* Generated bundle index. Do not edit.
|
|
11812
12157
|
*/
|
|
11813
12158
|
|
|
11814
|
-
export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
|
|
12159
|
+
export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize$1 as MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDialogComponent, TCloudUiDialogEventsEnum, TCloudUiDialogHostComponent, TCloudUiDialogModel, TCloudUiDialogService, TCloudUiDialogStatusEnum, TCloudUiDialogTextConfirmationEnum, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiDropdownMultiLevelComponent, TCloudUiEditorComponent, TCloudUiEditorDiffComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
|
|
11815
12160
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|