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

package/fesm2015/apipass-inputs.js

@@ -1,4 +1,4 @@
-import { ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵelementEnd, ɵɵadvance, ɵɵproperty, ɵɵtext, ɵɵpipe, ɵɵtextInterpolate, ɵɵpipeBind1, ɵɵdefineComponent, ɵɵProvidersFeature, forwardRef, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵpipeBind2, ɵɵgetInheritedFactory, ɵsetClassMetadata, Component, ViewEncapsulation, Input, ɵɵreference, ɵɵtextInterpolate2, ɵɵelement, EventEmitter, ɵɵpureFunction1, ChangeDetectionStrategy, Output, ɵɵpureFunction3, ɵɵpureFunction2, ɵɵsanitizeUrl, ɵɵprojectionDef, ɵɵprojection, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ViewChild, ɵɵdirectiveInject, NgZone, ɵɵdefineDirective, Directive, ɵɵtextInterpolate1, ɵɵpipeBind3, ɵɵstaticViewQuery, ɵɵattribute, ɵɵpureFunction0, HostBinding, HostListener, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
+import { ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵelementEnd, ɵɵadvance, ɵɵproperty, ɵɵtext, ɵɵpipe, ɵɵtextInterpolate, ɵɵpipeBind1, ɵɵdefineComponent, ɵɵProvidersFeature, forwardRef, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵpipeBind2, ɵɵgetInheritedFactory, ɵsetClassMetadata, Component, ViewEncapsulation, Input, ɵɵreference, ɵɵtextInterpolate2, ɵɵelement, EventEmitter, ɵɵpureFunction1, ChangeDetectionStrategy, Output, ɵɵpureFunction3, ɵɵpureFunction2, ɵɵsanitizeUrl, ɵɵprojectionDef, ɵɵprojection, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ViewChild, ɵɵdirectiveInject, NgZone, ɵɵdefineDirective, Directive, ɵɵtextInterpolate1, ɵɵpipeBind3, ɵɵstaticViewQuery, ɵɵattribute, ɵɵpureFunction0, HostBinding, HostListener, ElementRef, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControlStatus, NgModel, DefaultValueAccessor, RequiredValidator, MinLengthValidator, FormsModule } from '@angular/forms';
 import { NgIf, NgForOf, NgClass, NgStyle, CommonModule } from '@angular/common';
 import { MatFormField, MatSuffix, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
@@ -18,6 +18,8 @@ import { NgSelectComponent, ɵh, ɵj, ɵf, NgSelectModule } from '@ng-select/ng-
 import { MatSelectFilterModule } from 'mat-select-filter';
 import { DndDropzoneDirective, DndModule } from 'ngx-drag-drop';
 import { RouterModule } from '@angular/router';
+import 'brace';
+import 'brace/theme/monokai';
 
 class ValueAccessorBase {
     constructor() {
@@ -744,6 +746,7 @@ class SelectBoxComponent extends ValueAccessorBase {
         this.addNewItemText = '';
         this.addNewItemIcon = '';
         this.addNewItemClickCloseSelect = false;
+        this.closeOnBodyScroll = false;
         this.onOpenSelectBox = new EventEmitter();
         this.onCloseSelectBox = new EventEmitter();
         this.onSelectChange = new EventEmitter();
@@ -753,9 +756,27 @@ class SelectBoxComponent extends ValueAccessorBase {
         this.loading = false;
         this.inputFilter = new Subject();
         this.lastSearchTerm = '';
+        this.onBodyScroll = (event) => {
+            var _a, _b;
+            if (this.closeOnBodyScroll && ((_a = this.ngSelectComponent) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+                const isScrollingInScrollHost = ((_b = event.target.className) === null || _b === void 0 ? void 0 : _b.indexOf('ng-dropdown-panel-items')) > -1;
+                if (isScrollingInScrollHost) {
+                    return;
+                }
+                this.ngSelectComponent.close();
+            }
+        };
     }
     ngOnInit() {
         this.onSearch();
+        if (this.closeOnBodyScroll) {
+            window.addEventListener('scroll', this.onBodyScroll, true);
+        }
+    }
+    ngOnDestroy() {
+        if (this.closeOnBodyScroll) {
+            window.removeEventListener('scroll', this.onBodyScroll, true);
+        }
     }
     onSearch() {
         this.inputFilter.pipe(debounceTime(200), distinctUntilChanged()).subscribe(searchString => {
@@ -838,7 +859,7 @@ SelectBoxComponent.ɵcmp = ɵɵdefineComponent({ type: SelectBoxComponent, selec
     } if (rf & 2) {
         var _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.ngSelectComponent = _t.first);
-    } }, inputs: { placeholder: "placeholder", searchPlaceHolder: "searchPlaceHolder", clearText: "clearText", notFoundText: "notFoundText", enabledSearch: "enabledSearch", data: "data", disabled: "disabled", selectedItem: "selectedItem", bindImageUrl: "bindImageUrl", bindKey: "bindKey", bindValue: "bindValue", limitItens: "limitItens", showAddNewItem: "showAddNewItem", addNewItemText: "addNewItemText", addNewItemIcon: "addNewItemIcon", addNewItemClickCloseSelect: "addNewItemClickCloseSelect" }, outputs: { onOpenSelectBox: "onOpenSelectBox", onCloseSelectBox: "onCloseSelectBox", onSelectChange: "onSelectChange", onSelectClear: "onSelectClear", onAddNewItemClick: "onAddNewItemClick" }, features: [ɵɵProvidersFeature([{
+    } }, inputs: { placeholder: "placeholder", searchPlaceHolder: "searchPlaceHolder", clearText: "clearText", notFoundText: "notFoundText", enabledSearch: "enabledSearch", data: "data", disabled: "disabled", selectedItem: "selectedItem", bindImageUrl: "bindImageUrl", bindKey: "bindKey", bindValue: "bindValue", limitItens: "limitItens", showAddNewItem: "showAddNewItem", addNewItemText: "addNewItemText", addNewItemIcon: "addNewItemIcon", addNewItemClickCloseSelect: "addNewItemClickCloseSelect", closeOnBodyScroll: "closeOnBodyScroll" }, outputs: { onOpenSelectBox: "onOpenSelectBox", onCloseSelectBox: "onCloseSelectBox", onSelectChange: "onSelectChange", onSelectClear: "onSelectClear", onAddNewItemClick: "onAddNewItemClick" }, features: [ɵɵProvidersFeature([{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectBoxComponent),
                 multi: true
@@ -902,6 +923,8 @@ const ɵSelectBoxComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInheritedFactory(S
             type: Input
         }], addNewItemClickCloseSelect: [{
             type: Input
+        }], closeOnBodyScroll: [{
+            type: Input
         }], onOpenSelectBox: [{
             type: Output
         }], onCloseSelectBox: [{
@@ -1377,6 +1400,351 @@ InputFileComponent.ɵcmp = ɵɵdefineComponent({ type: InputFileComponent, selec
             type: Output
         }] }); })();
 
+/* tslint:disable */
+class AceEditorComponent {
+    constructor(elementRef, zone) {
+        this.zone = zone;
+        this.textChanged = new EventEmitter();
+        this.textChange = new 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 = (_) => {
+        };
+        this._onTouched = () => {
+        };
+        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.setOptions(this._options || {});
+        this.setTheme(this._theme);
+        this.setMode(this._mode);
+        this.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);
+            });
+            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}`);
+        }
+    }
+    // @ts-ignore
+    get value() {
+        return this.text;
+    }
+    // @ts-ignore
+    set value(value) {
+        this.setText(value);
+    }
+    writeValue(value) {
+        this.setText(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    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;
+    }
+}
+AceEditorComponent.ɵfac = function AceEditorComponent_Factory(t) { return new (t || AceEditorComponent)(ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(NgZone)); };
+AceEditorComponent.ɵcmp = ɵɵ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: [ɵɵProvidersFeature([{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AceEditorComponent),
+                multi: true
+            }])], decls: 0, vars: 0, template: function AceEditorComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%] { display:block;width:100%; }"] });
+/*@__PURE__*/ (function () { ɵsetClassMetadata(AceEditorComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ace-editor',
+                template: '',
+                styles: [':host { display:block;width:100%; }'],
+                providers: [{
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => AceEditorComponent),
+                        multi: true
+                    }]
+            }]
+    }], function () { return [{ type: ElementRef }, { type: NgZone }]; }, { 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
+        }] }); })();
+
+/* tslint:disable */
+class AceEditorDirective {
+    constructor(elementRef, zone) {
+        this.zone = zone;
+        this.textChanged = new EventEmitter();
+        this.textChange = new EventEmitter();
+        this._options = {};
+        this._readOnly = false;
+        this._theme = 'monokai';
+        this._mode = 'html';
+        this._autoUpdateContent = true;
+        this._durationBeforeCallback = 0;
+        this._text = '';
+        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}`);
+        }
+    }
+    // @ts-ignore
+    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;
+    }
+}
+AceEditorDirective.ɵfac = function AceEditorDirective_Factory(t) { return new (t || AceEditorDirective)(ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(NgZone)); };
+AceEditorDirective.ɵdir = ɵɵ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 () { ɵsetClassMetadata(AceEditorDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[ace-editor]'
+            }]
+    }], function () { return [{ type: ElementRef }, { type: NgZone }]; }, { 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 InputsModule {
 }
 InputsModule.ɵmod = ɵɵdefineNgModule({ type: InputsModule });
@@ -1405,7 +1773,9 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
         InputAvatarComponent,
         InputFileComponent,
         CustomSelectComponent,
-        FieldComponent], imports: [RouterModule, CommonModule,
+        FieldComponent,
+        AceEditorComponent,
+        AceEditorDirective], imports: [RouterModule, CommonModule,
         FormsModule,
         MatFormFieldModule,
         MatInputModule,
@@ -1425,7 +1795,9 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
         InputAvatarComponent,
         InputFileComponent,
         CustomSelectComponent,
-        FieldComponent] }); })();
+        FieldComponent,
+        AceEditorComponent,
+        AceEditorDirective] }); })();
 /*@__PURE__*/ (function () { ɵsetClassMetadata(InputsModule, [{
         type: NgModule,
         args: [{
@@ -1455,7 +1827,9 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
                     InputAvatarComponent,
                     InputFileComponent,
                     CustomSelectComponent,
-                    FieldComponent
+                    FieldComponent,
+                    AceEditorComponent,
+                    AceEditorDirective
                 ],
                 exports: [
                     SelectBoxComponent,
@@ -1465,7 +1839,9 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
                     InputAvatarComponent,
                     InputFileComponent,
                     CustomSelectComponent,
-                    FieldComponent
+                    FieldComponent,
+                    AceEditorComponent,
+                    AceEditorDirective
                 ],
                 providers: [],
             }]
@@ -1475,5 +1851,5 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
  * Generated bundle index. Do not edit.
  */
 
-export { CustomSelectComponent, CustomSelectItem, FieldComponent, InputAvatarComponent, InputFileComponent, InputPasswordComponent, InputTextComponent, InputsModule, SelectBoxComponent, SelectEnumComponent };
+export { AceEditorComponent, AceEditorDirective, CustomSelectComponent, CustomSelectItem, FieldComponent, InputAvatarComponent, InputFileComponent, InputPasswordComponent, InputTextComponent, InputsModule, SelectBoxComponent, SelectEnumComponent };
 //# sourceMappingURL=apipass-inputs.js.map