@paperless/angular 0.1.0-alpha.130 → 0.1.0-alpha.131

package/fesm2020/paperless-angular.mjs

@@ -1,10 +1,315 @@
 import * as i0 from '@angular/core';
-import { Directive, HostListener, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, EventEmitter, Input, Output, ViewChild, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { FormControl, FormGroup, FormArray, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { __decorate } from 'tslib';
-import { fromEvent } from 'rxjs';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import { timer, fromEvent } from 'rxjs';
+import { startWith, pairwise, map, filter, debounce } from 'rxjs/operators';
 
-class ValueAccessor {
+class FormBaseComponent {
+    constructor() {
+        this.markedDirty = false;
+    }
+    scrollToFirstError() {
+        const invalidInputs = Array.from(document.getElementsByClassName('ng-invalid'))
+            .filter((e) => e?.nodeName?.toLowerCase() !== 'form')
+            .sort((a, b) => a.scrollTop - b.scrollTop);
+        const first = invalidInputs[0];
+        if (first) {
+            first.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'center',
+            });
+        }
+    }
+    markControlDirty(control) {
+        if (control instanceof FormControl) {
+            control.markAsDirty({ onlySelf: true });
+            control.markAsTouched({ onlySelf: true });
+        }
+        else if (control instanceof FormGroup) {
+            control.markAsDirty();
+            control.markAsTouched();
+            this.markAllDirty(control);
+        }
+        else if (control instanceof FormArray) {
+            control.markAsDirty();
+            control.markAsTouched();
+            for (const child of control?.controls) {
+                this.markControlDirty(child);
+            }
+        }
+        control.updateValueAndValidity();
+    }
+    markAllDirty(formGroup) {
+        this.markedDirty = true;
+        for (const field of Object.keys(formGroup.controls)) {
+            const control = formGroup.get(field);
+            this.markControlDirty(control);
+        }
+    }
+    getControlError(control) {
+        if (!this.hasControlError(control)) {
+            return;
+        }
+        return this.firstControlError(control);
+    }
+    hasControlError(control, showChildErrors = true) {
+        return (control?.dirty && this.firstControlError(control, showChildErrors));
+    }
+    firstControlError(control, showChildErrors = true) {
+        if (control instanceof FormGroup && showChildErrors) {
+            const errors = Object.keys(control.controls)
+                .map((key) => this.firstControlError(control.controls[key]))
+                .filter((val) => !!val);
+            return errors[0];
+        }
+        if (!control?.errors) {
+            return;
+        }
+        const keys = Object.keys(control.errors);
+        let err;
+        for (const key of keys) {
+            if (control.errors[key]) {
+                err = key;
+                break;
+            }
+        }
+        return err;
+    }
+    resetControl(control) {
+        control.setErrors(null);
+        control.reset();
+        control.markAsPristine();
+        if (control instanceof FormGroup) {
+            this.resetForm(control);
+        }
+        else if (control instanceof FormArray) {
+            for (const child of control?.controls) {
+                this.resetControl(child);
+            }
+        }
+    }
+    resetForm(formGroup) {
+        for (const field of Object.keys(formGroup.controls)) {
+            const control = formGroup.get(field);
+            this.resetControl(control);
+        }
+        this.markedDirty = false;
+    }
+}
+FormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: FormBaseComponent, selector: "ng-component", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: FormBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                }]
+        }] });
+
+let BaseTableComponent = class BaseTableComponent extends FormBaseComponent {
+    constructor() {
+        super();
+        this.quickFilters = [];
+        this.pageSizeDefault = 12;
+        this._defaultTableValues = {
+            pageSize: this.pageSizeDefault,
+            page: 1,
+            quickFilter: null,
+            query: '',
+            selectedRows: [],
+        };
+        this.defaultTableValues = {};
+    }
+    get pageSize() {
+        if (!this.tableOptions) {
+            return this._defaultTableValues.pageSize;
+        }
+        return this.tableOptions.get('pageSize')?.value;
+    }
+    get page() {
+        if (!this.tableOptions) {
+            return this._defaultTableValues.page;
+        }
+        return this.tableOptions.get('page')?.value;
+    }
+    get quickFilter() {
+        if (!this.tableOptions) {
+            return this._defaultTableValues.quickFilter;
+        }
+        return this.tableOptions.get('quickFilter')?.value;
+    }
+    set quickFilter(quickFilter) {
+        this.tableValues = {
+            quickFilter,
+        };
+    }
+    get query() {
+        if (!this.tableOptions) {
+            return this._defaultTableValues.query;
+        }
+        return this.tableOptions.get('query')?.value;
+    }
+    set query(query) {
+        this.tableValues = {
+            query,
+        };
+    }
+    get selectedRows() {
+        if (!this.tableOptions) {
+            return this._defaultTableValues.selectedRows;
+        }
+        return this.tableOptions.get('selectedRows')?.value;
+    }
+    set selectedRows(selectedRows) {
+        this.tableValues = {
+            selectedRows,
+        };
+    }
+    // setter
+    get parsedDefaultTableValues() {
+        return {
+            ...this._defaultTableValues,
+            ...this.defaultTableValues,
+            pageSize: this.defaultTableValues?.pageSize || this.pageSizeDefault,
+        };
+    }
+    get tableValues() {
+        return this.tableOptions?.value;
+    }
+    set tableValues(values) {
+        this._setTableValues({
+            ...this.tableValues,
+            ...values,
+        });
+    }
+    ngOnInit() {
+        this.tableOptions = new FormGroup({
+            pageSize: new FormControl(this.parsedDefaultTableValues.pageSize),
+            page: new FormControl(this.parsedDefaultTableValues.page),
+            quickFilter: new FormControl(this.parsedDefaultTableValues.quickFilter),
+            query: new FormControl(this.parsedDefaultTableValues.query),
+            selectedRows: new FormControl(this.parsedDefaultTableValues.selectedRows),
+        });
+        this.tableOptions.valueChanges
+            .pipe(untilDestroyed(this), startWith(this.tableOptions.value), pairwise(), map(([previous, next]) => this._getChanges(previous, next)), filter((changes) => !!changes), debounce((changes) => {
+            if (changes?.query && Object.keys(changes)?.length === 1) {
+                return timer(300);
+            }
+            return timer(0);
+        }), filter((changes) => !(changes?.selected &&
+            Object.keys(changes)?.length === 1)))
+            .subscribe((changes) => {
+            if (changes?.page) {
+                this._refresh();
+                return;
+            }
+            this._resetPageOrRefresh();
+        });
+        this._refresh();
+    }
+    resetTable(emitEvent = true, forceRefresh = null) {
+        this._setTableValues(this.parsedDefaultTableValues, emitEvent);
+        if (forceRefresh) {
+            this._refresh();
+        }
+    }
+    _refresh() {
+        console.warn('Not implemented');
+    }
+    _resetPageOrRefresh() {
+        if (!this.tableOptions) {
+            return;
+        }
+        if (this.page !== 1) {
+            this.tableOptions.get('page')?.setValue(1);
+            return;
+        }
+        this._refresh();
+    }
+    _setTableValues(data, emitEvent = true) {
+        this.tableOptions?.setValue(data, { emitEvent });
+    }
+    _getChanges(previous, next) {
+        const changes = {};
+        let key;
+        for (key in next) {
+            if (JSON.stringify(previous[key]) !== JSON.stringify(next[key])) {
+                changes[key] = next[key];
+            }
+        }
+        return Object.keys(changes).length ? changes : null;
+    }
+};
+BaseTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BaseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: BaseTableComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+BaseTableComponent = __decorate([
+    UntilDestroy({ checkProperties: true })
+], BaseTableComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BaseTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class BaseUploadComponent {
+    constructor() {
+        this.uploaded = false;
+        this.fileChange = new EventEmitter();
+        this._loading = false;
+    }
+    set loading(value) {
+        this._loading = value;
+    }
+    get loading() {
+        return this._loading;
+    }
+    onChange($event) {
+        const target = $event.target;
+        const file = target.files?.[0];
+        if (file) {
+            this._loading = true;
+            const reader = new FileReader();
+            reader.onload = (e) => this.onLoad(file, e?.currentTarget?.result);
+            reader.readAsDataURL(file);
+        }
+    }
+    onLoad(file, result) {
+        this.fileChange.next({
+            fileId: this.fileId,
+            result,
+            file,
+        });
+        if (this.uploaderInput?.nativeElement) {
+            this.uploaderInput.nativeElement.value = '';
+        }
+        this.file = file;
+        this._loading = false;
+    }
+}
+BaseUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BaseUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BaseUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: BaseUploadComponent, selector: "ng-component", inputs: { fileId: "fileId", uploaded: "uploaded", loading: "loading" }, outputs: { fileChange: "fileChange" }, viewQueries: [{ propertyName: "uploaderInput", first: true, predicate: ["uploaderInput"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BaseUploadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                }]
+        }], propDecorators: { fileId: [{
+                type: Input
+            }], uploaded: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], uploaderInput: [{
+                type: ViewChild,
+                args: ['uploaderInput']
+            }] } });
+
+class BaseValueAccessor {
     constructor(el) {
         this.el = el;
         this.onChange = () => {
@@ -34,9 +339,9 @@ class ValueAccessor {
         this.onTouched = fn;
     }
 }
-ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: ValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ValueAccessor, decorators: [{
+BaseValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BaseValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaseValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: BaseValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: BaseValueAccessor, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
@@ -44,7 +349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 args: ['focusout']
             }] } });
 
-class PageSizeSelectDirective extends ValueAccessor {
+class PageSizeSelectDirective extends BaseValueAccessor {
     constructor(el) {
         super(el);
     }
@@ -82,7 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class PaginationDirective extends ValueAccessor {
+class PaginationDirective extends BaseValueAccessor {
     constructor(el) {
         super(el);
     }
@@ -120,7 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class TableFooterDirective extends ValueAccessor {
+class TableFooterDirective extends BaseValueAccessor {
     constructor(el) {
         super(el);
         this.lastValue = {
@@ -169,7 +474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class TableHeaderDirective extends ValueAccessor {
+class TableHeaderDirective extends BaseValueAccessor {
     constructor(el) {
         super(el);
         this.lastValue = {
@@ -1556,5 +1861,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CUSTOM_DIRECTIVES, PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, PIcon, PIllustration, PInfoPanel, PInputGroup, PLayout, PLoader, PModal, PModalBackdrop, PModalBody, PModalContainer, PModalFooter, PModalHeader, PNavbar, PNavigationItem, PPageSizeSelect, PPagination, PPaginationItem, PProfile, PSegmentContainer, PSegmentItem, PSliderIndicator, PStatus, PStepper, PStepperItem, PStepperLine, PTabGroup, PTabItem, PTable, PTableBody, PTableContainer, PTableDefinition, PTableFooter, PTableHeader, PTableRow, PTag, PTooltip, PageSizeSelectDirective, PaginationDirective, PaperlessModule, TableFooterDirective, TableHeaderDirective };
+export { BaseTableComponent, BaseUploadComponent, BaseValueAccessor, CUSTOM_DIRECTIVES, FormBaseComponent, PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, PIcon, PIllustration, PInfoPanel, PInputGroup, PLayout, PLoader, PModal, PModalBackdrop, PModalBody, PModalContainer, PModalFooter, PModalHeader, PNavbar, PNavigationItem, PPageSizeSelect, PPagination, PPaginationItem, PProfile, PSegmentContainer, PSegmentItem, PSliderIndicator, PStatus, PStepper, PStepperItem, PStepperLine, PTabGroup, PTabItem, PTable, PTableBody, PTableContainer, PTableDefinition, PTableFooter, PTableHeader, PTableRow, PTag, PTooltip, PageSizeSelectDirective, PaginationDirective, PaperlessModule, TableFooterDirective, TableHeaderDirective };
 //# sourceMappingURL=paperless-angular.mjs.map