@apipass/inputs 1.0.149 → 1.0.150

package/fesm2022/apipass-inputs.mjs

@@ -33,6 +33,8 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { RouterModule } from '@angular/router';
+import 'brace';
+import 'brace/theme/monokai';
 import * as i3$3 from '@apipass/buttons';
 import { ButtonsModule } from '@apipass/buttons';
 import moment from 'moment-timezone';
@@ -1046,6 +1048,378 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Output
             }] } });
 
+class AceEditorComponent {
+    zone;
+    textChanged = new EventEmitter();
+    textChange = new EventEmitter();
+    style = {};
+    _options = {};
+    _readOnly = false;
+    _theme = 'monokai';
+    _mode = 'html';
+    _autoUpdateContent = true;
+    _editor;
+    _durationBeforeCallback = 0;
+    _text = '';
+    oldText;
+    timeoutSaving;
+    constructor(elementRef, zone) {
+        this.zone = zone;
+        const el = elementRef.nativeElement;
+        this.zone.runOutsideAngular(() => {
+            this._editor = ace.edit(el);
+        });
+        this._editor.$blockScrolling = Infinity;
+    }
+    ngOnInit() {
+        this.init();
+        this.initEvents();
+    }
+    ngOnDestroy() {
+        this._editor.destroy();
+    }
+    init() {
+        this._editor.setKeyboardHandler('ace/keyboard/vscode');
+        this.setOptions({
+            enableBasicAutocompletion: true,
+            autoScrollEditorIntoView: true,
+            enableLiveAutocompletion: true
+        });
+        this.setTheme(this._theme);
+        this.setMode(this._mode);
+        this.setReadOnly(this._readOnly);
+        const completerIndex = this._editor.completers.findIndex((completer) => completer.id === 'apipass-completions');
+        if (completerIndex > -1) { // only splice array when item is found
+            this._editor.completers.splice(completerIndex, 1); // 2nd parameter means remove one item only
+        }
+    }
+    setCustomCompletions(customCompletions) {
+        const completer = this._editor.completers.find((completer) => completer.id === 'apipass-completions');
+        if (!completer) {
+            this.setOptions({
+                enableBasicAutocompletion: true,
+                autoScrollEditorIntoView: true,
+                enableLiveAutocompletion: true
+            });
+            this._editor.completers.push({
+                id: 'apipass-completions',
+                getCompletions: function (editor, session, pos, prefix, callback) {
+                    callback(null, customCompletions);
+                }
+            });
+        }
+        else {
+            completer.getCompletions = (editor, session, pos, prefix, callback) => {
+                callback(null, customCompletions);
+            };
+        }
+    }
+    initEvents() {
+        this._editor.on('change', () => {
+            this.updateText();
+        });
+        this._editor.on('paste', () => {
+            this.updateText();
+        });
+    }
+    updateText() {
+        const newVal = this._editor.getValue();
+        if (newVal === this.oldText) {
+            return;
+        }
+        if (!this._durationBeforeCallback) {
+            this._text = newVal;
+            this.zone.run(() => {
+                this.textChange.emit(newVal);
+                this.textChanged.emit(newVal);
+            });
+            this._onChange(newVal);
+        }
+        else {
+            if (this.timeoutSaving) {
+                clearTimeout(this.timeoutSaving);
+            }
+            this.timeoutSaving = setTimeout(() => {
+                this._text = newVal;
+                this.zone.run(() => {
+                    this.textChange.emit(newVal);
+                    this.textChanged.emit(newVal);
+                });
+                this.timeoutSaving = null;
+            }, this._durationBeforeCallback);
+        }
+        this.oldText = newVal;
+    }
+    set options(options) {
+        this.setOptions(options);
+    }
+    setOptions(options) {
+        this._options = options;
+        this._editor.setOptions(options || {});
+    }
+    set readOnly(readOnly) {
+        this.setReadOnly(readOnly);
+    }
+    setReadOnly(readOnly) {
+        this._readOnly = readOnly;
+        this._editor.setReadOnly(readOnly);
+    }
+    set theme(theme) {
+        this.setTheme(theme);
+    }
+    setTheme(theme) {
+        this._theme = theme;
+        this._editor.setTheme(`ace/theme/${theme}`);
+    }
+    set mode(mode) {
+        this.setMode(mode);
+    }
+    setMode(mode) {
+        this._mode = mode;
+        if (typeof this._mode === 'object') {
+            this._editor.getSession().setMode(this._mode);
+        }
+        else {
+            this._editor.getSession().setMode(`ace/mode/${this._mode}`);
+        }
+    }
+    get value() {
+        return this.text;
+    }
+    set value(value) {
+        this.setText(value);
+    }
+    writeValue(value) {
+        this.setText(value);
+    }
+    _onChange = (_) => {
+    };
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    _onTouched = () => {
+    };
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    get text() {
+        return this._text;
+    }
+    set text(text) {
+        this.setText(text);
+    }
+    setText(text) {
+        if (text === null || text === undefined) {
+            text = '';
+        }
+        if (this._text !== text && this._autoUpdateContent) {
+            this._text = text;
+            this._editor.setValue(text);
+            this._onChange(text);
+            this._editor.clearSelection();
+        }
+    }
+    set autoUpdateContent(status) {
+        this.setAutoUpdateContent(status);
+    }
+    setAutoUpdateContent(status) {
+        this._autoUpdateContent = status;
+    }
+    set durationBeforeCallback(num) {
+        this.setDurationBeforeCallback(num);
+    }
+    setDurationBeforeCallback(num) {
+        this._durationBeforeCallback = num;
+    }
+    getEditor() {
+        return this._editor;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AceEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AceEditorComponent, selector: "ace-editor", inputs: { style: "style", options: "options", readOnly: "readOnly", theme: "theme", mode: "mode", value: "value", text: "text", autoUpdateContent: "autoUpdateContent", durationBeforeCallback: "durationBeforeCallback" }, outputs: { textChanged: "textChanged", textChange: "textChange" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AceEditorComponent),
+                multi: true
+            }], ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AceEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ace-editor', template: '', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AceEditorComponent),
+                            multi: true
+                        }], styles: [":host{display:block;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { textChanged: [{
+                type: Output
+            }], textChange: [{
+                type: Output
+            }], style: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], autoUpdateContent: [{
+                type: Input
+            }], durationBeforeCallback: [{
+                type: Input
+            }] } });
+
+class AceEditorDirective {
+    zone;
+    textChanged = new EventEmitter();
+    textChange = new EventEmitter();
+    _options = {};
+    _readOnly = false;
+    _theme = 'monokai';
+    _mode = 'html';
+    _autoUpdateContent = true;
+    _durationBeforeCallback = 0;
+    _text = '';
+    editor;
+    oldText;
+    timeoutSaving;
+    constructor(elementRef, zone) {
+        this.zone = zone;
+        const el = elementRef.nativeElement;
+        this.zone.runOutsideAngular(() => {
+            this.editor = ace.edit(el);
+        });
+        this.editor.$blockScrolling = Infinity;
+    }
+    ngOnInit() {
+        this.init();
+        this.initEvents();
+    }
+    ngOnDestroy() {
+        this.editor.destroy();
+    }
+    init() {
+        this.editor.setOptions(this._options || {});
+        this.editor.setTheme(`ace/theme/${this._theme}`);
+        this.setMode(this._mode);
+        this.editor.setReadOnly(this._readOnly);
+    }
+    initEvents() {
+        this.editor.on('change', () => { this.updateText(); });
+        this.editor.on('paste', () => { this.updateText(); });
+    }
+    updateText() {
+        const newVal = this.editor.getValue();
+        if (newVal === this.oldText) {
+            return;
+        }
+        if (!this._durationBeforeCallback) {
+            this._text = newVal;
+            this.zone.run(() => {
+                this.textChange.emit(newVal);
+                this.textChanged.emit(newVal);
+            });
+        }
+        else {
+            if (this.timeoutSaving != null) {
+                clearTimeout(this.timeoutSaving);
+            }
+            this.timeoutSaving = setTimeout(() => {
+                this._text = newVal;
+                this.zone.run(() => {
+                    this.textChange.emit(newVal);
+                    this.textChanged.emit(newVal);
+                });
+                this.timeoutSaving = null;
+            }, this._durationBeforeCallback);
+        }
+        this.oldText = newVal;
+    }
+    set options(options) {
+        this._options = options;
+        this.editor.setOptions(options || {});
+    }
+    set readOnly(readOnly) {
+        this._readOnly = readOnly;
+        this.editor.setReadOnly(readOnly);
+    }
+    set theme(theme) {
+        this._theme = theme;
+        this.editor.setTheme(`ace/theme/${theme}`);
+    }
+    set mode(mode) {
+        this.setMode(mode);
+    }
+    setMode(mode) {
+        this._mode = mode;
+        if (typeof this._mode === 'object') {
+            this.editor.getSession().setMode(this._mode);
+        }
+        else {
+            this.editor.getSession().setMode(`ace/mode/${this._mode}`);
+        }
+    }
+    get text() {
+        return this._text;
+    }
+    set text(text) {
+        this.setText(text);
+    }
+    setText(text) {
+        if (this._text !== text) {
+            if (text === null || text === undefined) {
+                text = '';
+            }
+            if (this._autoUpdateContent) {
+                this._text = text;
+                this.editor.setValue(text);
+                this.editor.clearSelection();
+            }
+        }
+    }
+    set autoUpdateContent(status) {
+        this._autoUpdateContent = status;
+    }
+    set durationBeforeCallback(num) {
+        this.setDurationBeforeCallback(num);
+    }
+    setDurationBeforeCallback(num) {
+        this._durationBeforeCallback = num;
+    }
+    get aceEditor() {
+        return this.editor;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AceEditorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: AceEditorDirective, selector: "[ace-editor]", inputs: { options: "options", readOnly: "readOnly", theme: "theme", mode: "mode", text: "text", autoUpdateContent: "autoUpdateContent", durationBeforeCallback: "durationBeforeCallback" }, outputs: { textChanged: "textChanged", textChange: "textChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AceEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ace-editor]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { textChanged: [{
+                type: Output
+            }], textChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], autoUpdateContent: [{
+                type: Input
+            }], durationBeforeCallback: [{
+                type: Input
+            }] } });
+
 class InputNumberComponent extends ValueAccessorBase {
     label = '';
     disabled = false;
@@ -1922,6 +2296,8 @@ class InputsModule {
             CustomSelectComponent,
             SelectInterpolationComponent,
             FieldComponent,
+            AceEditorComponent,
+            AceEditorDirective,
             DebouceInputDirective,
             InputDateTimeIntervalComponent,
             KeyValueInputComponent], imports: [RouterModule,
@@ -1955,6 +2331,8 @@ class InputsModule {
             CustomSelectComponent,
             SelectInterpolationComponent,
             FieldComponent,
+            AceEditorComponent,
+            AceEditorDirective,
             DebouceInputDirective,
             InputDateTimeIntervalComponent,
             NgxMaskDirective,
@@ -2032,6 +2410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         CustomSelectComponent,
                         SelectInterpolationComponent,
                         FieldComponent,
+                        AceEditorComponent,
+                        AceEditorDirective,
                         DebouceInputDirective,
                         InputDateTimeIntervalComponent,
                         KeyValueInputComponent
@@ -2048,6 +2428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         CustomSelectComponent,
                         SelectInterpolationComponent,
                         FieldComponent,
+                        AceEditorComponent,
+                        AceEditorDirective,
                         DebouceInputDirective,
                         InputDateTimeIntervalComponent,
                         NgxMaskDirective,
@@ -2505,5 +2887,5 @@ class TimeIntervalValueBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { CurrentMonthInterval, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, DefaultIntervalsBuilder, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputDateTimeIntervalComponent, InputFileComponent, InputImageComponent, InputNumberComponent, InputTextComponent, InputsModule, KeyValueInputComponent, LastFiveMinutesInterval, LastHourInterval, LastMinuteInterval, LastMonthInterval, LastOneWeekInterval, LastQuarterInterval, LastTenMinutesInterval, LastThirtyMinutesInterval, LastThreeHoursInterval, LastTwoHoursInterval, LastYearInterval, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent, ThisQuarterInterval, ThisWeekInterval, ThisYearInterval, TimeIntervalValue, TimeIntervalValueBuilder, TimeIntervalsBuilder, TodayInterval, ValueAccessorBase, YesterdayInterval };
+export { AceEditorComponent, AceEditorDirective, CurrentMonthInterval, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, DefaultIntervalsBuilder, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputDateTimeIntervalComponent, InputFileComponent, InputImageComponent, InputNumberComponent, InputTextComponent, InputsModule, KeyValueInputComponent, LastFiveMinutesInterval, LastHourInterval, LastMinuteInterval, LastMonthInterval, LastOneWeekInterval, LastQuarterInterval, LastTenMinutesInterval, LastThirtyMinutesInterval, LastThreeHoursInterval, LastTwoHoursInterval, LastYearInterval, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent, ThisQuarterInterval, ThisWeekInterval, ThisYearInterval, TimeIntervalValue, TimeIntervalValueBuilder, TimeIntervalsBuilder, TodayInterval, ValueAccessorBase, YesterdayInterval };
 //# sourceMappingURL=apipass-inputs.mjs.map