@apipass/inputs 0.2.1-alpha.6 → 0.2.1-alpha.7

package/ace-editor/component.d.ts

@@ -0,0 +1,52 @@
+import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import 'brace';
+import 'brace/theme/monokai';
+import * as i0 from "@angular/core";
+export declare class AceEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {
+    private zone;
+    textChanged: EventEmitter<any>;
+    textChange: EventEmitter<any>;
+    style: any;
+    _options: any;
+    _readOnly: false;
+    _theme: string;
+    _mode: string;
+    _autoUpdateContent: boolean;
+    _editor: any;
+    _durationBeforeCallback: number;
+    _text: string;
+    oldText: any;
+    timeoutSaving: any;
+    constructor(elementRef: ElementRef, zone: NgZone);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    init(): void;
+    initEvents(): void;
+    updateText(): void;
+    set options(options: any);
+    setOptions(options: any): void;
+    set readOnly(readOnly: any);
+    setReadOnly(readOnly: any): void;
+    set theme(theme: any);
+    setTheme(theme: any): void;
+    set mode(mode: any);
+    setMode(mode: any): void;
+    get value(): string;
+    set value(value: string);
+    writeValue(value: any): void;
+    private _onChange;
+    registerOnChange(fn: any): void;
+    private _onTouched;
+    registerOnTouched(fn: any): void;
+    get text(): string;
+    set text(text: string);
+    setText(text: any): void;
+    set autoUpdateContent(status: any);
+    setAutoUpdateContent(status: any): void;
+    set durationBeforeCallback(num: number);
+    setDurationBeforeCallback(num: number): void;
+    getEditor(): any;
+    static ɵfac: i0.ɵɵFactoryDef<AceEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<AceEditorComponent, "ace-editor", never, { "style": "style"; "options": "options"; "readOnly": "readOnly"; "theme": "theme"; "mode": "mode"; "value": "value"; "text": "text"; "autoUpdateContent": "autoUpdateContent"; "durationBeforeCallback": "durationBeforeCallback"; }, { "textChanged": "textChanged"; "textChange": "textChange"; }, never, never>;
+}

package/ace-editor/directive.d.ts

@@ -0,0 +1,39 @@
+import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
+import 'brace';
+import 'brace/theme/monokai';
+import * as i0 from "@angular/core";
+export declare class AceEditorDirective implements OnInit, OnDestroy {
+    private zone;
+    textChanged: EventEmitter<any>;
+    textChange: EventEmitter<any>;
+    _options: any;
+    _readOnly: boolean;
+    _theme: string;
+    _mode: string;
+    _autoUpdateContent: boolean;
+    _durationBeforeCallback: number;
+    _text: string;
+    editor: any;
+    oldText: any;
+    timeoutSaving: any;
+    constructor(elementRef: ElementRef, zone: NgZone);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    init(): void;
+    initEvents(): void;
+    updateText(): void;
+    set options(options: any);
+    set readOnly(readOnly: any);
+    set theme(theme: any);
+    set mode(mode: any);
+    setMode(mode: any): void;
+    get text(): string;
+    set text(text: string);
+    setText(text: any): void;
+    set autoUpdateContent(status: any);
+    set durationBeforeCallback(num: number);
+    setDurationBeforeCallback(num: number): void;
+    get aceEditor(): any;
+    static ɵfac: i0.ɵɵFactoryDef<AceEditorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<AceEditorDirective, "[ace-editor]", never, { "options": "options"; "readOnly": "readOnly"; "theme": "theme"; "mode": "mode"; "text": "text"; "autoUpdateContent": "autoUpdateContent"; "durationBeforeCallback": "durationBeforeCallback"; }, { "textChanged": "textChanged"; "textChange": "textChange"; }, never>;
+}

package/bundles/apipass-inputs.umd.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@apipass/pipes'), require('@ngx-translate/core'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('lodash'), require('@angular-material-extensions/password-strength'), require('@apipass/icons'), require('rxjs'), require('rxjs/operators'), require('@ng-select/ng-select'), require('mat-select-filter'), require('ngx-drag-drop'), require('@angular/router')) :
-    typeof define === 'function' && define.amd ? define('@apipass/inputs', ['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@apipass/pipes', '@ngx-translate/core', '@angular/material/input', '@angular/material/icon', '@angular/material/tooltip', 'lodash', '@angular-material-extensions/password-strength', '@apipass/icons', 'rxjs', 'rxjs/operators', '@ng-select/ng-select', 'mat-select-filter', 'ngx-drag-drop', '@angular/router'], factory) :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@apipass/pipes'), require('@ngx-translate/core'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('lodash'), require('@angular-material-extensions/password-strength'), require('@apipass/icons'), require('rxjs'), require('rxjs/operators'), require('@ng-select/ng-select'), require('mat-select-filter'), require('ngx-drag-drop'), require('@angular/router'), require('brace'), require('brace/theme/monokai')) :
+    typeof define === 'function' && define.amd ? define('@apipass/inputs', ['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@apipass/pipes', '@ngx-translate/core', '@angular/material/input', '@angular/material/icon', '@angular/material/tooltip', 'lodash', '@angular-material-extensions/password-strength', '@apipass/icons', 'rxjs', 'rxjs/operators', '@ng-select/ng-select', 'mat-select-filter', 'ngx-drag-drop', '@angular/router', 'brace', 'brace/theme/monokai'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.apipass = global.apipass || {}, global.apipass.inputs = {}), global.ng.core, global.ng.forms, global.ng.common, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.i6, global.i7, global.ng.material.input, global.ng.material.icon, global.ng.material.tooltip, global.lodash, global.i5$1, global.i3$1, global.rxjs, global.rxjs.operators, global.i1$2, global.matSelectFilter, global.i5$3, global.ng.router));
 }(this, (function (exports, i0, i4, i2, i1, i1$1, i5, i6, i7, i3, i5$2, i2$1, lodash, i5$1, i3$1, rxjs, operators, i1$2, matSelectFilter, i5$3, i1$3) { 'use strict';
 
@@ -1850,6 +1850,427 @@
                 }] });
     })();
 
+    /* tslint:disable */
+    var AceEditorComponent = /** @class */ (function () {
+        function AceEditorComponent(elementRef, zone) {
+            var _this = this;
+            this.zone = zone;
+            this.textChanged = new i0.EventEmitter();
+            this.textChange = new i0.EventEmitter();
+            this.style = {};
+            // @ts-ignore
+            this._options = {};
+            // @ts-ignore
+            this._theme = 'monokai';
+            // @ts-ignore
+            this._mode = 'html';
+            // @ts-ignore
+            this._autoUpdateContent = true;
+            // @ts-ignore
+            this._durationBeforeCallback = 0;
+            // @ts-ignore
+            this._text = '';
+            this._onChange = function (_) {
+            };
+            this._onTouched = function () {
+            };
+            var el = elementRef.nativeElement;
+            this.zone.runOutsideAngular(function () {
+                _this._editor = ace['edit'](el);
+            });
+            this._editor.$blockScrolling = Infinity;
+        }
+        AceEditorComponent.prototype.ngOnInit = function () {
+            this.init();
+            this.initEvents();
+        };
+        AceEditorComponent.prototype.ngOnDestroy = function () {
+            this._editor.destroy();
+        };
+        AceEditorComponent.prototype.init = function () {
+            this.setOptions(this._options || {});
+            this.setTheme(this._theme);
+            this.setMode(this._mode);
+            this.setReadOnly(this._readOnly);
+        };
+        AceEditorComponent.prototype.initEvents = function () {
+            var _this = this;
+            this._editor.on('change', function () { return _this.updateText(); });
+            this._editor.on('paste', function () { return _this.updateText(); });
+        };
+        AceEditorComponent.prototype.updateText = function () {
+            var _this = this;
+            var newVal = this._editor.getValue();
+            if (newVal === this.oldText) {
+                return;
+            }
+            if (!this._durationBeforeCallback) {
+                this._text = newVal;
+                this.zone.run(function () {
+                    _this.textChange.emit(newVal);
+                    _this.textChanged.emit(newVal);
+                });
+                this._onChange(newVal);
+            }
+            else {
+                if (this.timeoutSaving) {
+                    clearTimeout(this.timeoutSaving);
+                }
+                this.timeoutSaving = setTimeout(function () {
+                    _this._text = newVal;
+                    _this.zone.run(function () {
+                        _this.textChange.emit(newVal);
+                        _this.textChanged.emit(newVal);
+                    });
+                    _this.timeoutSaving = null;
+                }, this._durationBeforeCallback);
+            }
+            this.oldText = newVal;
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "options", {
+            set: function (options) {
+                this.setOptions(options);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setOptions = function (options) {
+            this._options = options;
+            this._editor.setOptions(options || {});
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "readOnly", {
+            set: function (readOnly) {
+                this.setReadOnly(readOnly);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setReadOnly = function (readOnly) {
+            this._readOnly = readOnly;
+            this._editor.setReadOnly(readOnly);
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "theme", {
+            set: function (theme) {
+                this.setTheme(theme);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setTheme = function (theme) {
+            this._theme = theme;
+            this._editor.setTheme("ace/theme/" + theme);
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "mode", {
+            set: function (mode) {
+                this.setMode(mode);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setMode = function (mode) {
+            this._mode = mode;
+            if (typeof this._mode === 'object') {
+                this._editor.getSession().setMode(this._mode);
+            }
+            else {
+                this._editor.getSession().setMode("ace/mode/" + this._mode);
+            }
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "value", {
+            // @ts-ignore
+            get: function () {
+                return this.text;
+            },
+            // @ts-ignore
+            set: function (value) {
+                this.setText(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.writeValue = function (value) {
+            this.setText(value);
+        };
+        AceEditorComponent.prototype.registerOnChange = function (fn) {
+            this._onChange = fn;
+        };
+        AceEditorComponent.prototype.registerOnTouched = function (fn) {
+            this._onTouched = fn;
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "text", {
+            get: function () {
+                return this._text;
+            },
+            set: function (text) {
+                this.setText(text);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setText = function (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();
+            }
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "autoUpdateContent", {
+            set: function (status) {
+                this.setAutoUpdateContent(status);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setAutoUpdateContent = function (status) {
+            this._autoUpdateContent = status;
+        };
+        Object.defineProperty(AceEditorComponent.prototype, "durationBeforeCallback", {
+            set: function (num) {
+                this.setDurationBeforeCallback(num);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorComponent.prototype.setDurationBeforeCallback = function (num) {
+            this._durationBeforeCallback = num;
+        };
+        AceEditorComponent.prototype.getEditor = function () {
+            return this._editor;
+        };
+        return AceEditorComponent;
+    }());
+    AceEditorComponent.ɵfac = function AceEditorComponent_Factory(t) { return new (t || AceEditorComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    AceEditorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AceEditorComponent, selectors: [["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" }, features: [i0.ɵɵProvidersFeature([{
+                    provide: i4.NG_VALUE_ACCESSOR,
+                    useExisting: i0.forwardRef(function () { return AceEditorComponent; }),
+                    multi: true
+                }])], decls: 0, vars: 0, template: function AceEditorComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%] { display:block;width:100%; }"] });
+    /*@__PURE__*/ (function () {
+        i0.ɵsetClassMetadata(AceEditorComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ace-editor',
+                        template: '',
+                        styles: [':host { display:block;width:100%; }'],
+                        providers: [{
+                                provide: i4.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return AceEditorComponent; }),
+                                multi: true
+                            }]
+                    }]
+            }], function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, { textChanged: [{
+                    type: i0.Output
+                }], textChange: [{
+                    type: i0.Output
+                }], style: [{
+                    type: i0.Input
+                }], options: [{
+                    type: i0.Input
+                }], readOnly: [{
+                    type: i0.Input
+                }], theme: [{
+                    type: i0.Input
+                }], mode: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }], autoUpdateContent: [{
+                    type: i0.Input
+                }], durationBeforeCallback: [{
+                    type: i0.Input
+                }] });
+    })();
+
+    /* tslint:disable */
+    var AceEditorDirective = /** @class */ (function () {
+        function AceEditorDirective(elementRef, zone) {
+            var _this = this;
+            this.zone = zone;
+            this.textChanged = new i0.EventEmitter();
+            this.textChange = new i0.EventEmitter();
+            this._options = {};
+            this._readOnly = false;
+            this._theme = 'monokai';
+            this._mode = 'html';
+            this._autoUpdateContent = true;
+            this._durationBeforeCallback = 0;
+            this._text = '';
+            var el = elementRef.nativeElement;
+            this.zone.runOutsideAngular(function () {
+                _this.editor = ace['edit'](el);
+            });
+            this.editor.$blockScrolling = Infinity;
+        }
+        AceEditorDirective.prototype.ngOnInit = function () {
+            this.init();
+            this.initEvents();
+        };
+        AceEditorDirective.prototype.ngOnDestroy = function () {
+            this.editor.destroy();
+        };
+        AceEditorDirective.prototype.init = function () {
+            this.editor.setOptions(this._options || {});
+            this.editor.setTheme("ace/theme/" + this._theme);
+            this.setMode(this._mode);
+            this.editor.setReadOnly(this._readOnly);
+        };
+        AceEditorDirective.prototype.initEvents = function () {
+            var _this = this;
+            this.editor.on('change', function () { return _this.updateText(); });
+            this.editor.on('paste', function () { return _this.updateText(); });
+        };
+        AceEditorDirective.prototype.updateText = function () {
+            var _this = this;
+            var newVal = this.editor.getValue();
+            if (newVal === this.oldText) {
+                return;
+            }
+            if (!this._durationBeforeCallback) {
+                this._text = newVal;
+                this.zone.run(function () {
+                    _this.textChange.emit(newVal);
+                    _this.textChanged.emit(newVal);
+                });
+            }
+            else {
+                if (this.timeoutSaving != null) {
+                    clearTimeout(this.timeoutSaving);
+                }
+                this.timeoutSaving = setTimeout(function () {
+                    _this._text = newVal;
+                    _this.zone.run(function () {
+                        _this.textChange.emit(newVal);
+                        _this.textChanged.emit(newVal);
+                    });
+                    _this.timeoutSaving = null;
+                }, this._durationBeforeCallback);
+            }
+            this.oldText = newVal;
+        };
+        Object.defineProperty(AceEditorDirective.prototype, "options", {
+            set: function (options) {
+                this._options = options;
+                this.editor.setOptions(options || {});
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AceEditorDirective.prototype, "readOnly", {
+            set: function (readOnly) {
+                this._readOnly = readOnly;
+                this.editor.setReadOnly(readOnly);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AceEditorDirective.prototype, "theme", {
+            set: function (theme) {
+                this._theme = theme;
+                this.editor.setTheme("ace/theme/" + theme);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AceEditorDirective.prototype, "mode", {
+            set: function (mode) {
+                this.setMode(mode);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorDirective.prototype.setMode = function (mode) {
+            this._mode = mode;
+            if (typeof this._mode === 'object') {
+                this.editor.getSession().setMode(this._mode);
+            }
+            else {
+                this.editor.getSession().setMode("ace/mode/" + this._mode);
+            }
+        };
+        Object.defineProperty(AceEditorDirective.prototype, "text", {
+            // @ts-ignore
+            get: function () {
+                return this._text;
+            },
+            set: function (text) {
+                this.setText(text);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorDirective.prototype.setText = function (text) {
+            if (this._text !== text) {
+                if (text === null || text === undefined) {
+                    text = '';
+                }
+                if (this._autoUpdateContent) {
+                    this._text = text;
+                    this.editor.setValue(text);
+                    this.editor.clearSelection();
+                }
+            }
+        };
+        Object.defineProperty(AceEditorDirective.prototype, "autoUpdateContent", {
+            set: function (status) {
+                this._autoUpdateContent = status;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AceEditorDirective.prototype, "durationBeforeCallback", {
+            set: function (num) {
+                this.setDurationBeforeCallback(num);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AceEditorDirective.prototype.setDurationBeforeCallback = function (num) {
+            this._durationBeforeCallback = num;
+        };
+        Object.defineProperty(AceEditorDirective.prototype, "aceEditor", {
+            get: function () {
+                return this.editor;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AceEditorDirective;
+    }());
+    AceEditorDirective.ɵfac = function AceEditorDirective_Factory(t) { return new (t || AceEditorDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    AceEditorDirective.ɵdir = i0.ɵɵdefineDirective({ type: AceEditorDirective, selectors: [["", "ace-editor", ""]], inputs: { options: "options", readOnly: "readOnly", theme: "theme", mode: "mode", text: "text", autoUpdateContent: "autoUpdateContent", durationBeforeCallback: "durationBeforeCallback" }, outputs: { textChanged: "textChanged", textChange: "textChange" } });
+    /*@__PURE__*/ (function () {
+        i0.ɵsetClassMetadata(AceEditorDirective, [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[ace-editor]'
+                    }]
+            }], function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, { textChanged: [{
+                    type: i0.Output
+                }], textChange: [{
+                    type: i0.Output
+                }], options: [{
+                    type: i0.Input
+                }], readOnly: [{
+                    type: i0.Input
+                }], theme: [{
+                    type: i0.Input
+                }], mode: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }], autoUpdateContent: [{
+                    type: i0.Input
+                }], durationBeforeCallback: [{
+                    type: i0.Input
+                }] });
+    })();
+
     var InputsModule = /** @class */ (function () {
         function InputsModule() {
         }
@@ -1882,7 +2303,9 @@
                 InputAvatarComponent,
                 InputFileComponent,
                 CustomSelectComponent,
-                FieldComponent], imports: [i1$3.RouterModule, i2.CommonModule,
+                FieldComponent,
+                AceEditorComponent,
+                AceEditorDirective], imports: [i1$3.RouterModule, i2.CommonModule,
                 i4.FormsModule,
                 i1.MatFormFieldModule,
                 i3.MatInputModule,
@@ -1902,7 +2325,9 @@
                 InputAvatarComponent,
                 InputFileComponent,
                 CustomSelectComponent,
-                FieldComponent] });
+                FieldComponent,
+                AceEditorComponent,
+                AceEditorDirective] });
     })();
     /*@__PURE__*/ (function () {
         i0.ɵsetClassMetadata(InputsModule, [{
@@ -1934,7 +2359,9 @@
                             InputAvatarComponent,
                             InputFileComponent,
                             CustomSelectComponent,
-                            FieldComponent
+                            FieldComponent,
+                            AceEditorComponent,
+                            AceEditorDirective
                         ],
                         exports: [
                             SelectBoxComponent,
@@ -1944,7 +2371,9 @@
                             InputAvatarComponent,
                             InputFileComponent,
                             CustomSelectComponent,
-                            FieldComponent
+                            FieldComponent,
+                            AceEditorComponent,
+                            AceEditorDirective
                         ],
                         providers: [],
                     }]
@@ -1955,6 +2384,8 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AceEditorComponent = AceEditorComponent;
+    exports.AceEditorDirective = AceEditorDirective;
     exports.CustomSelectComponent = CustomSelectComponent;
     exports.CustomSelectItem = CustomSelectItem;
     exports.FieldComponent = FieldComponent;