@gravitee/ui-particles-angular 13.3.1 → 13.4.0

package/fesm2022/gravitee-ui-particles-angular.mjs

@@ -3335,6 +3335,7 @@ class GioMonacoEditorComponent {
         this.options = {};
         this.disableMiniMap = false;
         this.disableAutoFormat = false;
+        this.singleLineMode = false;
         this.loaded$ = new ReplaySubject(1);
         this.defaultOptions = {
             contextmenu: false,
@@ -3433,18 +3434,88 @@ class GioMonacoEditorComponent {
                 this.standaloneCodeEditor?.getAction('editor.action.formatDocument')?.run();
             }, 80);
         }
+        if (this.singleLineMode) {
+            this.standaloneCodeEditor?.addAction({
+                id: 'custom.action',
+                label: 'custom action',
+                keybindings: [monaco.KeyCode.Enter],
+                precondition: '!suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible',
+                run: () => {
+                    // Ignore Enter key in single line mode when writing
+                    return;
+                },
+            });
+        }
         const onDidChangeContent = this.textModel?.onDidChangeContent(() => {
-            const newValue = this.textModel?.getValue();
+            const textModelValue = this.textModel?.getValue() ?? '';
+            if (this.singleLineMode) {
+                // If value has \n, \r or \r\n, remove them
+                // Useful to clear line breaks when pasting text
+                const hasLineBreak = new RegExp(/(\r\n|\n|\r)/gm);
+                if (hasLineBreak.test(textModelValue)) {
+                    const currentPosition = this.standaloneCodeEditor?.getPosition();
+                    setTimeout(() => {
+                        this.standaloneCodeEditor?.pushUndoStop();
+                        this.textModel?.setValue(textModelValue.replace(/(\r\n|\n|\r)/gm, ''));
+                        if (currentPosition) {
+                            this.standaloneCodeEditor?.setPosition(currentPosition);
+                        }
+                        this.standaloneCodeEditor?.popUndoStop();
+                    }, 0);
+                    return;
+                }
+            }
             this.ngZone.run(() => {
-                if (!this.readOnly && !isEqual(this.value, newValue)) {
+                if (!this.readOnly && !isEqual(this.value, textModelValue)) {
                     setTimeout(() => {
-                        this.value = newValue ?? '';
-                        this._onChange(newValue ?? '');
+                        this.value = textModelValue;
+                        this._onChange(textModelValue);
                         this._onTouched();
                     }, 0);
                 }
             });
         });
+        if (this.singleLineMode) {
+            // Source : https://farzadyz.com/blog/single-line-monaco-editor
+            this.standaloneCodeEditor?.updateOptions({
+                // quickSuggestions: false,
+                fixedOverflowWidgets: true,
+                acceptSuggestionOnEnter: 'on',
+                hover: {
+                    delay: 100,
+                },
+                roundedSelection: false,
+                contextmenu: false,
+                cursorStyle: 'line-thin',
+                links: false,
+                find: {
+                    addExtraSpaceOnTop: false,
+                    autoFindInSelection: 'never',
+                    seedSearchStringFromSelection: 'never',
+                },
+                fontSize: 14,
+                fontWeight: 'normal',
+                overviewRulerLanes: 0,
+                scrollBeyondLastColumn: 0,
+                wordWrap: 'on',
+                minimap: {
+                    enabled: false,
+                },
+                lineNumbers: 'off',
+                hideCursorInOverviewRuler: true,
+                overviewRulerBorder: false,
+                glyphMargin: false,
+                folding: false,
+                lineDecorationsWidth: 0,
+                lineNumbersMinChars: 0,
+                renderLineHighlight: 'none',
+                scrollbar: {
+                    horizontal: 'hidden',
+                    vertical: 'hidden',
+                    alwaysConsumeMouseWheel: false,
+                },
+            });
+        }
         const onDidBlurEditorWidget = this.standaloneCodeEditor?.onDidBlurEditorWidget(() => {
             this.ngZone.run(() => {
                 if (!this.readOnly)
@@ -3474,11 +3545,11 @@ class GioMonacoEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioMonacoEditorComponent, deps: [{ token: i0.ElementRef }, { token: GIO_MONACO_EDITOR_CONFIG }, { token: GioMonacoEditorService }, { token: GioLanguageJsonService }, { token: GioLanguageElService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: { languageConfig: "languageConfig", options: "options", disableMiniMap: "disableMiniMap", disableAutoFormat: "disableAutoFormat" }, ngImport: i0, template: ` <div *ngIf="loaded$ | async">Loading...</div>`, isInline: true, styles: [":host{display:block;height:100%;min-height:150px;pointer-events:auto;transition:opacity .2s ease-out}:host-context(.hidden){opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: { languageConfig: "languageConfig", options: "options", disableMiniMap: "disableMiniMap", disableAutoFormat: "disableAutoFormat", singleLineMode: "singleLineMode" }, host: { properties: { "class.single-line": "this.singleLineMode" } }, ngImport: i0, template: ` <div *ngIf="loaded$ | async">Loading...</div>`, isInline: true, styles: [":host{display:block;height:100%;min-height:150px;pointer-events:auto;transition:opacity .2s ease-out}:host.single-line{display:flex;height:24px;min-height:24px;align-items:center}:host-context(.hidden){opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioMonacoEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-monaco-editor', template: ` <div *ngIf="loaded$ | async">Loading...</div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%;min-height:150px;pointer-events:auto;transition:opacity .2s ease-out}:host-context(.hidden){opacity:0}\n"] }]
+            args: [{ selector: 'gio-monaco-editor', template: ` <div *ngIf="loaded$ | async">Loading...</div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%;min-height:150px;pointer-events:auto;transition:opacity .2s ease-out}:host.single-line{display:flex;height:24px;min-height:24px;align-items:center}:host-context(.hidden){opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GIO_MONACO_EDITOR_CONFIG]
@@ -3494,6 +3565,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], disableAutoFormat: [{
                 type: Input
+            }], singleLineMode: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.single-line']
             }] } });
 const isJsonString = (str) => {
     try {
@@ -4747,7 +4823,7 @@ class GioFjsCodeEditorTypeComponent extends FieldType$1 {
       [formControl]="formControl"
       [languageConfig]="languageConfig"
     ></gio-monaco-editor>
-  `, isInline: true, styles: ["gio-monaco-editor{min-height:38px}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: ["languageConfig", "options", "disableMiniMap", "disableAutoFormat"] }, { kind: "directive", type: GioMonacoEditorFormFieldDirective, selector: "[gioMonacoEditorFormField]", inputs: ["placeholder", "required", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["gio-monaco-editor{min-height:38px}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GioMonacoEditorComponent, selector: "gio-monaco-editor", inputs: ["languageConfig", "options", "disableMiniMap", "disableAutoFormat", "singleLineMode"] }, { kind: "directive", type: GioMonacoEditorFormFieldDirective, selector: "[gioMonacoEditorFormField]", inputs: ["placeholder", "required", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GioFjsCodeEditorTypeComponent, decorators: [{
             type: Component,