@colijnit/corecomponents_v12 12.0.13 → 12.0.16

package/src/lib/components/form/form.component.ts

@@ -1,223 +0,0 @@
-import {AfterViewInit, Component, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output} from "@angular/core";
-import {FormControl, FormGroup} from "@angular/forms";
-import {Subject, Subscription} from "rxjs";
-import { BaseInputComponent } from '../base/base-input.component';
-import { FormMasterService } from '../../core/service/form-master.service';
-import { StringUtils } from '../../core/utils/string-utils';
-
-const FormGroupStatus: any = {
-    VALID: "VALID",
-    INVALID: "INVALID",
-    PENDING: "PENDING",
-    DISABLED: "DISABLED"
-};
-
-@Component({
-    selector: "co-form",
-    template: `<ng-content></ng-content>`,
-})
-// The iOneJS version of the form tag, representing a form with controls.
-export class FormComponent implements AfterViewInit, OnDestroy, OnInit {
-    @Input()
-    set readonly(value: boolean) {
-        this._readonly = value;
-        this.readonlyChange.emit(value);
-    }
-
-    get readonly(): boolean {
-        return this._readonly;
-    }
-
-    @Input()
-    public keepInView: Element;
-
-    @Output()
-    public onChange: EventEmitter<FormControl> = new EventEmitter<FormControl>();
-
-    @HostBinding("class.submitted")
-    public submitted: boolean = false;
-
-    // Emits true after every valid submit.
-    @Output()
-    public readonly validSubmit: EventEmitter<void> = new EventEmitter<void>();
-
-    // Emits void after every 'submit' (either valid or invalid, eg a submit attempt)
-    @Output()
-    public readonly anySubmit: EventEmitter<void> = new EventEmitter<void>();
-
-    // note: a disabled control is considered valid
-    @Output()
-    public readonly validityChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    @Output()
-    public readonly readonlyChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    // The Angular in-memory representation of the form controls on this form. Performs actual logic, emits 'input field' (Control) state change events, etc.
-    public formGroup: FormGroup = new FormGroup({});
-
-    @Output()
-    public invalidSubmit: Subject<void> = new Subject<void>();
-
-    private _readonly: boolean = false;
-    private _valueChangeSub: Subscription;
-    private _statusChangeSub: Subscription;
-
-    private _init: boolean;
-
-    // key: name of form inputs, values: the component for that name
-    private _componentMap: Map<string, BaseInputComponent<any>> = new Map<string, BaseInputComponent<any>>([]);
-
-    constructor(
-        private _formMaster: FormMasterService
-    ) {
-        this._formMaster.addSlave(this);
-    }
-
-    ngAfterViewInit(): void {
-        this._init = true;
-    }
-
-    ngOnInit(): void {
-        this._valueChangeSub = this.formGroup.valueChanges.subscribe((e) => {
-            this.onChange.emit(e);
-        });
-        this._statusChangeSub = this.formGroup.statusChanges.subscribe((e) => {
-            if (e === FormGroupStatus.VALID || e === FormGroupStatus.DISABLED) {
-                this.validityChange.emit(true);
-            } else if (e === FormGroupStatus.INVALID) {
-                this.validityChange.emit(false);
-            }
-        });
-    }
-
-    ngOnDestroy(): void {
-        if (this._valueChangeSub) {
-            this._valueChangeSub.unsubscribe();
-        }
-        if (this._statusChangeSub) {
-            this._statusChangeSub.unsubscribe();
-        }
-        this._componentMap.clear();
-        this._componentMap = undefined;
-        this._formMaster.removeSlave(this);
-        this.keepInView = undefined;
-    }
-
-    public addFormInput(formInput: BaseInputComponent<any>): void {
-        this.formGroup.addControl(formInput.name, formInput.control);
-        if (formInput.elementRef) {
-            this._componentMap.set(formInput.name, formInput);
-        }
-    }
-
-    public removeFormInput(formInput: BaseInputComponent<any>): void {
-        this.formGroup.removeControl(formInput.name);
-        this._componentMap.delete(formInput.name);
-    }
-
-    public updateFormInput(formInput: BaseInputComponent<any>): void {
-        this.formGroup.setControl(formInput.name, formInput.control);
-    }
-
-    // Marks form as touched, checks validity and returns true if indeed valid, else false. Visuals of form inputs can change after calling this.
-    public checkUpdateValidity(): boolean {
-        this.formGroup.markAsTouched();
-        this.formGroup.updateValueAndValidity();
-        if (!this.isValid()) {
-            this._setFirstInvalidElementOnMaster();
-        }
-        return this.isValid();
-    }
-
-    public isTouched(): boolean {
-        return this.formGroup.touched;
-    }
-
-    public isValid(): boolean {
-        return this._init && this.formGroup.valid;
-    }
-
-    @HostListener('keyup.enter', ['$event'])
-    onEnterKey(event: KeyboardEvent): void {
-        const target: HTMLElement = <HTMLElement>event.target;
-        if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
-            return;
-        }
-        if (target.isContentEditable) {
-            return;
-        }
-        if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
-            return;
-        }
-        this.submit();
-    }
-
-    public reset(): void {
-        this.submitted = false;
-        this.formGroup.markAsUntouched();
-    }
-
-    // returns validity
-    public submit(throughFormMaster: boolean = false): boolean {
-        this.submitted = true;
-        if (!throughFormMaster) {
-            this.anySubmit.emit();
-        }
-        if (this.checkUpdateValidity()) {
-            this.validSubmit.emit();
-        } else {
-            if (!throughFormMaster) {
-                this.invalidSubmit.next();
-            }
-        }
-        return this.isValid();
-    }
-
-    public showErrorTooltipOnFormGroupControl(key: string): void {
-        for (const controlKey in this.formGroup.controls) {
-            if (this.formGroup.controls.hasOwnProperty(controlKey)) {
-                if (this._componentMap.has(controlKey)) {
-                    const comp: BaseInputComponent<any> = this._componentMap.get(controlKey);
-                    for (const errorKey in this.formGroup.controls[controlKey].errors) {
-                        if (this.formGroup.controls[controlKey].errors.hasOwnProperty(errorKey)) {
-                            const error: any = this.formGroup.controls[controlKey].errors[errorKey];
-                            const errorText: string = this._getValidationErrorText(error);
-                            const controlElement: HTMLElement = comp.elementRef.nativeElement;
-                            if (controlKey === key) {
-                                // this._tooltipService.spawnErrorTooltip(controlElement, errorText, this.keepInView ? this.keepInView : undefined);
-                            }
-                            comp.redErrorBackground = true;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    private _getValidationErrorText(validationError: any): string {
-        return "";
-        if (StringUtils.IsString(validationError)) {
-            // return this._dictionary.get(validationError);
-        } else if (validationError.message) {
-            if (validationError.placeholder) {
-                // see e.g. maxStringLengthValidator, where we return this {message: string, placeholder: string} object shape as validation error obj
-                // return this._dictionary.get(validationError.message, true, validationError.placeholder);
-            } else {
-                // return this._dictionary.get(validationError.message);
-            }
-        }
-    }
-
-    private _setFirstInvalidElementOnMaster(): void {
-        const elements: any = Array.from(this._componentMap);
-        const len: number = elements.length;
-        for (let i: number = 0; i < len; i++) {
-            const key: string = elements[i][0];
-            const value: BaseInputComponent<any> = elements[i][1];
-            if (this.formGroup.controls.hasOwnProperty(key) && this.formGroup.controls[key].status.toLowerCase() === "invalid") {
-                this._formMaster.setFirstInvalidField(this, key, value.elementRef ? value.elementRef.nativeElement : undefined);
-                return;
-            }
-        }
-    }
-}

package/src/lib/components/form/form.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { FormComponent } from './form.component';
-import {FormMasterService} from "../../core/service/form-master.service";
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        FormComponent
-    ],
-    providers: [
-        FormMasterService
-    ],
-    exports: [
-        FormComponent
-    ]
-})
-export class FormModule {
-}

package/src/lib/components/grid/base/base-grid.component.ts

@@ -1,83 +0,0 @@
-import {Directive, Input, ViewChild} from "@angular/core";
-import {
-  ContextMenuItemModel,
-  GridComponent,
-  PageSettingsModel,
-  RowDropSettingsModel
-} from "@syncfusion/ej2-angular-grids";
-import {InputBoolean} from "../../../core/decorator/input-boolean.decorator";
-import {GridLines} from "../enum/grid-lines.enum";
-import {LanguageCode} from "../../../model/enum/language-code.enum";
-
-@Directive()
-export class BaseGridComponent<T> {
-    public readonly languageCode: typeof LanguageCode = LanguageCode;
-
-    @ViewChild('grid', {static: false})
-    public grid: GridComponent;
-
-    @Input()
-    public data: T[];
-
-    @Input()
-    public gridLines: GridLines = GridLines.None;
-
-    @Input()
-    public contextMenuItems: ContextMenuItemModel[] = [];
-
-    @Input()
-    public frozenColumns: number;
-
-    @Input()
-    public frozenRows: number;
-
-    @Input()
-    @InputBoolean()
-    public sortingEnabled: boolean = false;
-
-    @Input()
-    @InputBoolean()
-    public filteringEnabled: boolean = false;
-
-    @Input()
-    @InputBoolean()
-    public pagingEnabled: boolean = false;
-
-    @Input()
-    @InputBoolean()
-    public groupingEnabled: boolean = false;
-
-    @Input()
-    @InputBoolean()
-    public reorderingEnabled: boolean = false;
-
-    @Input()
-    @InputBoolean()
-    public rowDragAndDropEnabled: boolean = false;
-
-    @Input()
-    public rowDropSettings: RowDropSettingsModel;
-
-    @Input()
-    @InputBoolean()
-    public resizingEnabled: boolean = false;
-
-    @Input()
-    @InputBoolean()
-    public showColumnMenu: boolean = false;
-
-    @Input()
-    public set maxNumberOfRows(value: number) {
-        if (value) {
-            this.pageSettings.pageSize = value;
-        }
-    }
-
-    @Input()
-    public columns: {}[];
-
-    @Input()
-    public locale: LanguageCode = this.languageCode.Dutch;
-
-    public pageSettings: PageSettingsModel = {};
-}

package/src/lib/components/grid/base/base-inline-edit-grid.component.ts

@@ -1,36 +0,0 @@
-import {Directive, EventEmitter, Input, Output} from "@angular/core";
-import {EditSettingsModel} from "@syncfusion/ej2-angular-grids";
-import {InputBoolean} from "../../../core/decorator/input-boolean.decorator";
-import {BaseToolbarGridComponent} from "./base-toolbar-grid.component";
-
-@Directive()
-export class BaseInlineEditGridComponent<T> extends BaseToolbarGridComponent<T> {
-
-    @Input()
-    @InputBoolean()
-    public set inlineEdit(value: boolean) {
-        if (value) {
-            this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
-        } else {
-            this.editSettings = {};
-        }
-        this.updateToolbar("Add", value);
-        this.updateToolbar("Edit", value);
-        this.updateToolbar("Delete", value);
-        this.updateToolbar("Update", value);
-        this.updateToolbar("Cancel", value);
-    }
-
-    @Output()
-    public rowSaved: EventEmitter<T> = new EventEmitter<T>();
-
-    public editSettings: EditSettingsModel;
-
-    public handleActionComplete(action: any): void {
-        if (action) {
-            if (action.requestType === "save") {
-                this.rowSaved.next(action.data);
-            }
-        }
-    }
-}

package/src/lib/components/grid/base/base-selection-grid.component.ts

@@ -1,98 +0,0 @@
-import {Directive, EventEmitter, HostBinding, Input, OnInit, Output, TemplateRef} from "@angular/core";
-import {RowDropEventArgs, SelectionSettingsModel} from "@syncfusion/ej2-angular-grids";
-import {BaseInlineEditGridComponent} from "./base-inline-edit-grid.component";
-import {InputBoolean} from "../../../core/decorator/input-boolean.decorator";
-import {MenuEventArgs} from "@syncfusion/ej2-navigations";
-import {GridRowDragEventArgs} from "../interface/grid-row-drag-event-args";
-import {GridRowDropEventArgs} from "../interface/grid-row-drop-event-args";
-import {RowDragEventArgs} from "@syncfusion/ej2-angular-grids";
-import {GridMenuEventArgs} from "../interface/grid-menu-event-args";
-
-const defaultColumn: string = `<div class="detail-wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><polygon points="34.55 26.18 34.55 37.49 12.44 37.49 12.44 15.38 24.68 15.38 25.59 14.48 24.05 12.94 10 12.94 10 39.94 36.99 39.94 36.99 25.88 35.92 24.81 34.55 26.18" fill="#484f60"/><polygon points="40 10.4 27.92 10.4 32 14.48 22.24 26.23 24.16 28.15 35.92 18.4 40 22.48 40 10.4" fill="#484f60"/></svg></div>`;
-
-@Directive()
-export class BaseSelectionGridComponent<T> extends BaseInlineEditGridComponent<T> implements OnInit {
-
-    @Input()
-    @InputBoolean()
-    public set multipleSelect(value: boolean) {
-        this.selectionOptions = { type: value ? "Multiple" : "Single" };
-    }
-
-    @HostBinding("class.detail-column")
-    @Input()
-    @InputBoolean()
-    public includeDetailColumn: boolean = false;
-
-    @Input()
-    public detailColumnTemplate: TemplateRef<any>;
-
-    @Output()
-    public rowsSelected: EventEmitter<T[]> = new EventEmitter<T[]>();
-
-    @Output()
-    public rowDoubleClick: EventEmitter<T> = new EventEmitter<T>();
-
-    @Output()
-    public detailColumnClick: EventEmitter<T> = new EventEmitter<T>();
-
-    @Output()
-    public contextMenuItemClick: EventEmitter<GridMenuEventArgs> = new EventEmitter<GridMenuEventArgs>();
-
-    @Output()
-    public rowDragStartEvent: EventEmitter<GridRowDragEventArgs> = new EventEmitter<GridRowDragEventArgs>();
-
-    @Output()
-    public rowDropEvent: EventEmitter<GridRowDropEventArgs> = new EventEmitter<GridRowDropEventArgs>();
-
-
-  public selectionOptions: SelectionSettingsModel = { type: "Single" };
-
-    ngOnInit(): void {
-        if (this.includeDetailColumn) {
-            this.columns.unshift({
-                field: "", headerText: "", lockColumn: true, maxWidth: 30, width: 30,
-                allowFiltering: false, allowResizing: false, allowReordering: false, allowEditing: false, allowSearching: false,
-                showColumnMenu: false, showInColumnChooser: false,
-                template: this.detailColumnTemplate ? this.detailColumnTemplate : defaultColumn,
-                headerTemplate: this.detailColumnTemplate ? this.detailColumnTemplate : defaultColumn});
-        }
-    }
-
-    public handleRowSelected(rowData: any): void {
-        if (this.grid) {
-            const rows: T[] = <T[]>this.grid.getSelectedRecords();
-            this.rowsSelected.next(rows);
-        }
-    }
-
-    public handleDoubleClick(clickData: any): void {
-        this.rowDoubleClick.next(<T>clickData.rowData);
-    }
-
-    public handleRecordClick(clickData: any): void {
-        if (clickData && this.includeDetailColumn && clickData.cellIndex === 0) {
-            this.detailColumnClick.next(clickData.rowData);
-        }
-    }
-
-    public selectRow(index: number): void {
-        if (this.grid) {
-            const rowIndexes: number[] = [];
-            rowIndexes.push(index);
-            this.grid.selectionModule.selectRows(rowIndexes);
-        }
-    }
-
-    public contextMenuClick(args: MenuEventArgs): void {
-        this.contextMenuItemClick.next(args);
-    }
-
-    public rowDragStartClick(args: RowDragEventArgs): void {
-      this.rowDragStartEvent.next(args);
-    }
-
-    public rowDropClick(args: RowDropEventArgs): void {
-      this.rowDropEvent.next(args);
-    }
-}

package/src/lib/components/grid/base/base-toolbar-grid.component.ts

@@ -1,75 +0,0 @@
-import {Directive, Input} from "@angular/core";
-import {ToolbarItems} from "@syncfusion/ej2-angular-grids";
-import {ClickEventArgs} from "@syncfusion/ej2-angular-navigations";
-import {InputBoolean} from "../../../core/decorator/input-boolean.decorator";
-import {BaseGridComponent} from "./base-grid.component";
-import {ArrayUtils} from "../../../core/utils/array-utils";
-
-@Directive()
-export class BaseToolbarGridComponent<T> extends BaseGridComponent<T> {
-
-    @Input()
-    @InputBoolean()
-    public set showColumnChooser(value: boolean) {
-        this._showColumnChooser = value;
-        this.updateToolbar("ColumnChooser", this._showColumnChooser);
-    }
-
-    public get showColumnChooser(): boolean {
-        return this._showColumnChooser;
-    }
-
-    @Input()
-    @InputBoolean()
-    public set exportExcelEnabled(value: boolean) {
-        this._exportExcelEnabled = value;
-        this.updateToolbar("ExcelExport", this._exportExcelEnabled);
-    }
-
-    public get exportExcelEnabled(): boolean {
-        return this._exportExcelEnabled;
-    }
-
-    @Input()
-    @InputBoolean()
-    public set exportPdfEnabled(value: boolean) {
-        this._exportPdfEnabled = value;
-        this.updateToolbar("PdfExport", this._exportPdfEnabled);
-    }
-
-    public get exportPdfEnabled(): boolean {
-        return this._exportPdfEnabled;
-    }
-
-    public toolbarOptions: ToolbarItems[];
-
-    private _exportExcelEnabled: boolean = false;
-    private _exportPdfEnabled: boolean = false;
-    private _showColumnChooser: boolean = false;
-
-    public toolbarClick(args: ClickEventArgs): void {
-        if (this.grid) {
-            if (args.item.id === 'grid_excelexport') {
-                this.grid.excelExport();
-            } else if (args.item.id === 'grid_pdfexport') {
-                this.grid.pdfExport();
-            }
-        }
-    }
-
-    protected updateToolbar(option: ToolbarItems, add: boolean): void {
-        if (add) {
-            if (!this.toolbarOptions) {
-                this.toolbarOptions = [];
-            }
-            this.toolbarOptions.push(option);
-        } else {
-            ArrayUtils.RemoveElement(option, this.toolbarOptions);
-        }
-        if (this.toolbarOptions && this.toolbarOptions.length > 0) {
-            this.toolbarOptions = this.toolbarOptions.slice();
-        } else {
-            this.toolbarOptions = undefined;
-        }
-    }
-}

package/src/lib/components/grid/co-grid.component.scss

@@ -1,29 +0,0 @@
-@import "../../style/_base-input.scss";
-
-:host {
-  &.detail-column {
-    ::ng-deep .e-grid {
-      .e-gridheader tr.e-columnheader th.e-headercell:first-child {
-        padding: 0;
-        .e-headercelldiv {
-          height: 30px;
-        }
-        svg {
-          height: 30px;
-          width: 30px;
-        }
-      }
-      .e-gridcontent tr td:first-child {
-        padding: 0;
-        .detail-wrapper {
-          height: 30px;
-        }
-        svg {
-          height: 30px;
-          width: 30px;
-        }
-      }
-    }
-  }
-}
-

package/src/lib/components/grid/co-grid.component.ts

@@ -1,70 +0,0 @@
-import {AfterViewInit, Component, OnInit, ViewEncapsulation} from '@angular/core';
-import { BaseSelectionGridComponent } from './base/base-selection-grid.component';
-import {RowDDService} from "@syncfusion/ej2-angular-grids";
-import {L10n} from "@syncfusion/ej2-base";
-import {LanguageCode} from "../../model/enum/language-code.enum";
-
-@Component({
-    selector: 'co-grid',
-    template: `
-        <ejs-grid #grid id="grid"
-                  [dataSource]="data"
-                  [contextMenuItems]="contextMenuItems"
-                  [pageSettings]="pageSettings"
-                  [toolbar]="toolbarOptions"
-                  [gridLines]="gridLines"
-                  [frozenColumns]="frozenColumns"
-                  [frozenRows]="frozenRows"
-                  [selectionSettings]="selectionOptions"
-                  [editSettings]="editSettings"
-                  [allowPaging]="pagingEnabled"
-                  [allowSorting]="sortingEnabled"
-                  [allowFiltering]="filteringEnabled"
-                  [allowGrouping]="groupingEnabled"
-                  [allowReordering]="reorderingEnabled"
-                  [allowResizing]="resizingEnabled"
-                  [allowRowDragAndDrop]="rowDragAndDropEnabled"
-                  [showColumnMenu]="showColumnMenu"
-                  [showColumnChooser]="showColumnChooser"
-                  [allowExcelExport]="exportExcelEnabled"
-                  [allowPdfExport]="exportPdfEnabled"
-                  [locale]="locale"
-                  (toolbarClick)="toolbarClick($event)"
-                  (rowSelected)="handleRowSelected($event)"
-                  (recordDoubleClick)="handleDoubleClick($event)"
-                  (recordClick)="handleRecordClick($event)"
-                  (actionComplete)="handleActionComplete($event)"
-                  (contextMenuClick)="contextMenuClick($event)"
-                  (rowDragStart)="rowDragStartClick($event)"
-                  (rowDrop)="rowDropClick($event)">
-        </ejs-grid>
-    `,
-    styleUrls: [
-        './co-grid.component.scss'
-    ],
-    providers: [
-      RowDDService
-    ],
-    encapsulation: ViewEncapsulation.None
-})
-export class CoGridComponent<T> extends BaseSelectionGridComponent<T> implements OnInit {
-    public readonly languageCode: typeof LanguageCode = LanguageCode;
-
-    ngOnInit(): void {
-        super.ngOnInit();
-
-        L10n.load({
-          [this.languageCode.Dutch]: {
-            'grid': {
-              'GroupDropArea': 'Versleep een colom',
-              'Add': 'Toevoegen',
-              'Edit': 'Bewerken',
-              'Delete': 'Verwijderen',
-              'Update': 'Bijwerken',
-              'Cancel': 'Annuleren',
-            }
-          }
-        });
-    }
-
-}

package/src/lib/components/grid/co-grid.module.ts

@@ -1,49 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {
-    ColumnChooserService,
-    ColumnMenuService,
-    ContextMenuService,
-    EditService,
-    ExcelExportService,
-    FilterService,
-    GridModule,
-    GroupService,
-    PageService,
-    PdfExportService,
-    ReorderService,
-    ResizeService,
-    SortService,
-    ToolbarService
-} from '@syncfusion/ej2-angular-grids';
-import { CoGridComponent } from './co-grid.component';
-import { IconCacheService } from '../icon/icon-cache.service';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        GridModule
-    ],
-    declarations: [CoGridComponent],
-    exports: [CoGridComponent],
-    providers: [
-        IconCacheService,
-        PageService,
-        SortService,
-        FilterService,
-        GroupService,
-        ReorderService,
-        ResizeService,
-        ExcelExportService,
-        PdfExportService,
-        EditService,
-        ToolbarService,
-        ColumnChooserService,
-        ColumnMenuService,
-        ContextMenuService
-    ]
-})
-export class CoGridModule {
-}

package/src/lib/components/grid/enum/column-align.enum.ts

@@ -1,5 +0,0 @@
-export enum ColumnAlign {
-    Left = "Left",
-    Right = "Right",
-    Center = "Center"
-}