@mosa-ng/material 17.0.0

package/src/lib/components/skeleton-loader/table-skeleton-loader/table.skeleton-loader.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Skeleton } from '../../../models/skeleton.model';
+import { BaseSkeletonLoader } from '../base.skeleton-loader';
+
+@Component({
+    selector: 'mosa-table-skeleton-loader',
+    templateUrl: './table.skeleton-loader.html',
+    styleUrls: [ './table.skeleton-loader.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class TableSkeletonLoader extends BaseSkeletonLoader implements OnInit {
+
+    @Input()
+    public columns: Skeleton[][];
+
+    public items: Skeleton[][] = [];
+    public displayedColumns: string[] = [];
+
+    constructor() {
+        super();
+    }
+
+    public ngOnInit(): void {
+        for (let i = 0; i < this.columns.length; i++) {
+            this.displayedColumns.push(`column-${ i }`);
+        }
+
+        for (let i = 0; i < this.itemCount; i++) {
+            const skeletons: Skeleton[] = [];
+            for (let j = 0; j < this.displayedColumns.length; j++) {
+                const skeleton = this.columns[ j ][ 1 ];
+                skeletons.push(new Skeleton({
+                    width: skeleton.width,
+                    height: skeleton.height,
+                    borderRadius: skeleton.borderRadius,
+                    randomizeOffset: skeleton.randomizeOffset,
+                }));
+            }
+            this.items.push(skeletons);
+        }
+    }
+
+}

package/src/lib/components/update-dialog/mat-update-dialog/mat-update.dialog.html

@@ -0,0 +1,17 @@
+<h1 class="active" mat-dialog-title>{{ config.title | translate }}</h1>
+<div mat-dialog-content>
+    {{ config.message | translate }}
+</div>
+<div mat-dialog-actions>
+    <button (click)="close(0)" [class.cancel-btn]="config.showIgnore" mat-stroked-button>
+        {{ 'mosa.commons.buttons.cancel' | translate | uppercase }}
+    </button>
+    <button (click)="close(1)" *ngIf="config.showIgnore" color="primary" mat-stroked-button>
+        {{ 'mosa.commons.buttons.ignoreFor' | translate: {
+            duration: config.ignoreTimeout | mosaDuration: 'auto' | async | uppercase
+        } | uppercase }}
+    </button>
+    <button mat-flat-button color="primary" (click)="close(2)">
+        {{ 'mosa.commons.buttons.reloadNow' | translate | uppercase}}
+    </button>
+</div>

package/src/lib/components/update-dialog/mat-update-dialog/mat-update.dialog.scss

@@ -0,0 +1,3 @@
+.cancel-btn {
+  margin-right: auto;
+}

package/src/lib/components/update-dialog/mat-update-dialog/mat-update.dialog.ts

@@ -0,0 +1,28 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { IUpdateConfig, UpdateDialogResult } from '../../../models/update-config.model';
+import { BaseComponent } from '../../base/base.component';
+
+@Component({
+    selector: 'mosa-mat-update-dialog',
+    templateUrl: './mat-update.dialog.html',
+    styleUrls: [ './mat-update.dialog.scss' ],
+})
+export class MatUpdateDialog extends BaseComponent implements OnInit {
+
+    constructor(
+        private readonly myMatDialogRef: MatDialogRef<MatUpdateDialog>,
+        @Inject(MAT_DIALOG_DATA) public readonly config: IUpdateConfig,
+    ) {
+        super();
+    }
+
+    public override ngOnInit(): void {
+        super.ngOnInit();
+    }
+
+    public close(result: UpdateDialogResult): void {
+        this.myMatDialogRef.close(result);
+    }
+
+}

package/src/lib/components/update-dialog/update-dialog.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatUpdateDialog } from './mat-update-dialog/mat-update.dialog';
+import { UpdateDialog } from './update.dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MosaDurationPipeModule } from '@mosa-ng/core';
+
+@NgModule({
+    declarations: [ UpdateDialog, MatUpdateDialog ],
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        MosaDurationPipeModule,
+        TranslateModule,
+    ],
+    exports: [ UpdateDialog ],
+})
+export class UpdateDialogModule {
+}

package/src/lib/components/update-dialog/update.dialog.ts

@@ -0,0 +1,124 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ApiService, isNullOrEmpty } from '@mosa-ng/core';
+import { firstValueFrom, timer } from 'rxjs';
+import { IUpdateConfig, IVersion, UpdateDialogResult } from '../../models/update-config.model';
+import { MatUpdateDialog } from './mat-update-dialog/mat-update.dialog';
+
+@Component({
+    selector: 'mosa-update-dialog',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UpdateDialog {
+
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('config')
+    public set updateConfig(config: IUpdateConfig) {
+        if (config) {
+            if (!config.versionPath) {
+                console.warn('LoggerService: No version path was provided. This field is required!');
+                return;
+            }
+
+            if (!config.localStorageKey) {
+                config.localStorageKey = 'mosaApplicationVersion';
+            }
+
+            if (!config.ignoreTimeout) {
+                config.ignoreTimeout = 30000;
+            }
+
+            if (!config.refreshInterval) {
+                config.refreshInterval = 15000;
+            }
+
+            if (!config.title) {
+                config.title = 'mosa.components.updateDialog.title';
+            }
+
+            if (!config.message) {
+                config.message = 'mosa.components.updateDialog.message';
+            }
+
+            this.config = config;
+            this.end();
+            this.start();
+        } else {
+            console.warn('LoggerService: Cannot check for version. No config was provided.');
+        }
+    }
+
+    private firstLoad: boolean = true;
+
+    private blocked: boolean;
+    private interval: NodeJS.Timeout;
+    private config: IUpdateConfig;
+
+    constructor(
+        private readonly myApiService: ApiService,
+        private readonly myMatDialog: MatDialog,
+    ) {
+    }
+
+    private start(): void {
+        if (this.interval) {
+            this.end();
+        }
+        void this.checkForUpdate();
+        this.interval = setInterval((): Promise<void> => this.checkForUpdate(), this.config.refreshInterval);
+    }
+
+    private openDialog(version: IVersion): void {
+        this.myMatDialog
+            .open(MatUpdateDialog, {
+                width: '600px',
+                data: this.config,
+            })
+            .afterClosed()
+            .subscribe((result: UpdateDialogResult): void => {
+                switch (result) {
+                    case UpdateDialogResult.cancel:
+                        this.end();
+                        this.blocked = true;
+                        break;
+                    case UpdateDialogResult.ignore:
+                        timer(this.config.ignoreTimeout).subscribe((): void => {
+                            this.openDialog(version);
+                        });
+                        break;
+                    case UpdateDialogResult.reload:
+                        window.location.reload();
+                        window.localStorage.setItem(this.config.localStorageKey, JSON.stringify(version));
+                        break;
+                }
+            });
+    }
+
+    private async checkForUpdate(): Promise<void> {
+        if (!this.blocked) {
+            const localStorageVersion: string = window.localStorage.getItem(this.config.localStorageKey);
+            let localVersion: IVersion = { version: '0.0.0', timestamp: 0 };
+            if (!isNullOrEmpty(localStorageVersion)) {
+                localVersion = JSON.parse(localStorageVersion);
+            }
+            const data: IVersion = await firstValueFrom(this.myApiService.get(this.config.versionPath));
+            if (this.firstLoad) {
+                window.localStorage.setItem(this.config.localStorageKey, JSON.stringify(data));
+                this.firstLoad = false;
+                return;
+            }
+            if (data.version !== localVersion.version) {
+                this.blocked = true;
+                this.end();
+                this.openDialog(data);
+            }
+        }
+    }
+
+    private end(): void {
+        clearInterval(this.interval);
+        this.interval = null;
+    }
+
+}

package/src/lib/directives/cell-editor/cell-editor.directive.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CellEditorDirective } from './cell-editor.directive';
+
+@NgModule({
+    declarations: [ CellEditorDirective ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        CellEditorDirective,
+    ],
+})
+export class CellEditorDirectiveModule {
+}

package/src/lib/directives/cell-editor/cell-editor.directive.ts

@@ -0,0 +1,163 @@
+import { ContentChild, Directive, ElementRef, HostListener, OnInit } from '@angular/core';
+import { CellEditorComponent } from '../../components/cell-editor/cell-editor.component';
+import { CellEditorService } from '../../services/cell-editor.service';
+
+@Directive({
+    selector: 'td[mosaCellEditor]',
+})
+export class CellEditorDirective implements OnInit {
+
+    @ContentChild(CellEditorComponent)
+    private readonly cellEditor: CellEditorComponent;
+
+    constructor(
+        private readonly myElementRef: ElementRef<HTMLElement>,
+        private readonly myCellEditorService: CellEditorService,
+    ) {
+    }
+
+    @HostListener('keydown.escape', [ '$event' ])
+    public onEscapeKeyDown(e: KeyboardEvent): void {
+        e.preventDefault();
+        this.cellEditor.toOutput();
+    }
+
+    @HostListener('keydown.tab', [ '$event' ])
+    @HostListener('keydown.shift.tab', [ '$event' ])
+    @HostListener('keydown.meta.tab', [ '$event' ])
+    public onShiftKeyDown(e: KeyboardEvent): void {
+        e.preventDefault();
+        if (e.shiftKey) {
+            this.moveToCell(e, false);
+        } else {
+            this.moveToCell(e, true);
+        }
+    }
+
+    @HostListener('keydown.enter', [ '$event' ])
+    public onEnterKeyDown(e: KeyboardEvent): void {
+        e.preventDefault();
+        if (this.myCellEditorService.isEditingCellValid()) {
+            this.moveToNextRowCell(e);
+        }
+    }
+
+    @HostListener('click', [ '$event' ])
+    public onClick(e: MouseEvent): void {
+        e.preventDefault();
+        this.myCellEditorService.updateEditingCell(this.cellEditor);
+        this.cellEditor.cellClick.emit();
+    }
+
+    public ngOnInit(): void {
+        this.myElementRef.nativeElement.classList.add('editable-cell');
+    }
+
+    private moveToNextRowCell(e: KeyboardEvent): void {
+        const currentCell: Element = this.cellEditor?.element?.parentElement;
+        if (!currentCell) {
+            return;
+        }
+
+        let columnDefClass: string = '';
+        currentCell.classList.forEach((className: string): void => {
+            const found: boolean = className.indexOf('mat-column-') > -1;
+            if (found) {
+                columnDefClass = className;
+            }
+        });
+
+        const targetCell: HTMLElement = this.findNextRowEditableColumn(currentCell, columnDefClass);
+        this.cellEditor.toOutput(true);
+        CellEditorDirective.executeMove(e, targetCell);
+    }
+
+    private findNextRowEditableColumn(row: Element, matColumnClassName: string): HTMLElement {
+        const nextRow: Element = row.parentElement?.nextElementSibling;
+        if (!nextRow) {
+            return null;
+        }
+
+        const column: Element = nextRow.getElementsByClassName(matColumnClassName)[ 0 ];
+        return column?.classList.contains('editable-cell') ?
+            column.firstChild as HTMLElement :
+            this.findNextRowEditableColumn(nextRow, matColumnClassName);
+    }
+
+    private findNextEditableColumn(cell: HTMLElement): HTMLElement {
+        let nextCell: HTMLElement = cell.parentElement?.nextElementSibling as HTMLElement;
+
+        if (!nextCell) {
+            const nextRow: HTMLElement = cell.parentElement.parentElement.nextElementSibling as HTMLElement;
+            if (nextRow) {
+                nextCell = nextRow.firstElementChild as HTMLElement;
+            }
+        }
+
+        if (nextCell) {
+            return nextCell.classList.contains('editable-cell') ?
+                nextCell.firstChild as HTMLElement :
+                this.findNextEditableColumn(nextCell);
+        } else {
+            return null;
+        }
+    }
+
+    private findPreviousEditableColumn(cell: HTMLElement): HTMLElement {
+        let prevCell: HTMLElement = cell.previousElementSibling as HTMLElement;
+
+        if (!prevCell) {
+            const previousRow: HTMLElement = cell.parentElement.previousElementSibling as HTMLElement;
+            if (previousRow) {
+                prevCell = previousRow.lastElementChild as HTMLElement;
+            }
+        }
+
+        if (prevCell) {
+            return prevCell.classList.contains('editable-cell') ?
+                prevCell.firstChild as HTMLElement :
+                this.findPreviousEditableColumn(prevCell);
+        } else {
+            return null;
+        }
+    }
+
+    private moveToCell(event: KeyboardEvent, nextCell: boolean): void {
+        const currentCell: HTMLElement = this.cellEditor.element;
+        if (this.cellEditor.element != null) {
+            const targetCell: HTMLElement = nextCell ?
+                this.findNextEditableColumn(currentCell) :
+                this.findPreviousEditableColumn(currentCell);
+            if (this.myCellEditorService.isEditingCellValid()) {
+                this.cellEditor.toOutput(true);
+                targetCell?.click();
+            }
+            CellEditorDirective.executeMove(event, targetCell);
+        }
+    }
+
+    private static invokeElementMethod(element: HTMLElement, methodName: string, args?: unknown[]): void {
+        // eslint-disable-next-line prefer-spread
+        (element[ methodName as keyof HTMLElement ] as Function).apply(element, args);
+    }
+
+    private static executeMove(e: KeyboardEvent, targetCell: HTMLElement): void {
+        e.preventDefault();
+        // If datepicker is opened, remove cdk-overlay from dom
+        const element: Element = e.composedPath()[ 0 ] as Element;
+        if (element.className.indexOf('td-input-date') > -1) {
+            const cdkOverlayContainer: Element = document.getElementsByClassName('cdk-overlay-container')[ 0 ];
+            const cdkBackdrop: HTMLElement = cdkOverlayContainer.getElementsByClassName('cdk-overlay-backdrop')[ 0 ] as HTMLElement;
+            if (cdkBackdrop != null) {
+                CellEditorDirective.invokeElementMethod(cdkBackdrop, 'click');
+            }
+            cdkOverlayContainer.innerHTML = '';
+        }
+
+        CellEditorDirective.invokeElementMethod(e.target as HTMLElement, 'blur');
+        if (targetCell != null) {
+            CellEditorDirective.invokeElementMethod(targetCell, 'click');
+        }
+    }
+
+}

package/src/lib/directives/click-outside/click-outside.directive.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ClickOutsideDirective } from './click-outside.directive';
+
+@NgModule({
+    declarations: [
+        ClickOutsideDirective,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [ ClickOutsideDirective ],
+})
+export class ClickOutsideDirectiveModule {
+}

package/src/lib/directives/click-outside/click-outside.directive.ts

@@ -0,0 +1,48 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+@Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    selector: '[clickOutside]',
+})
+export class ClickOutsideDirective {
+
+    @Output()
+    public clickOutside: EventEmitter<[ HTMLElement, HTMLElement ]> = new EventEmitter<[ HTMLElement, HTMLElement ]>();
+
+    @Input()
+    public enableWhiteListing: boolean;
+
+    constructor(
+        private readonly elementRef: ElementRef,
+    ) {
+    }
+
+    @HostListener('document:click', [ '$event.target' ])
+    private onClick(targetElement: HTMLElement): void {
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
+        const whiteListedClass = 'whitelisted';
+        if (!clickedInside) {
+            if (this.enableWhiteListing) {
+                const isWhiteListed = targetElement.classList.contains(whiteListedClass)
+                    || ClickOutsideDirective.getClosest(targetElement, whiteListedClass)
+                    || ClickOutsideDirective.getClosest(targetElement, 'cdk-overlay-container');
+                if (!isWhiteListed) {
+                    this.clickOutside.emit([ this.elementRef.nativeElement, targetElement ]);
+                }
+            } else {
+                this.clickOutside.emit([ this.elementRef.nativeElement, targetElement ]);
+            }
+        }
+    }
+
+    private static getClosest(el: HTMLElement, selector: string): HTMLElement {
+        while (el) {
+            if (el.classList.contains(selector)) {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+
+}

package/src/lib/models/confirm-dialog.model.ts

@@ -0,0 +1,33 @@
+// eslint-disable-next-line max-classes-per-file
+export enum ConfirmDialogResult {
+    confirmed,
+    denied,
+    cancelled,
+}
+
+export class ConfirmDialogAction {
+    public icon: string;
+    public visible: boolean;
+    public label: string;
+
+    constructor(label: string, visible?: boolean) {
+        this.label = label;
+        this.visible = visible;
+    }
+}
+
+export class ConfirmDialogData {
+    public title: string;
+    public message: string;
+    public cancel: ConfirmDialogAction;
+    public confirm: ConfirmDialogAction;
+    public deny: ConfirmDialogAction;
+
+    constructor(title?: string, message?: string, cancel?: ConfirmDialogAction, confirm?: ConfirmDialogAction, deny?: ConfirmDialogAction) {
+        this.title = title;
+        this.message = message;
+        this.cancel = cancel;
+        this.confirm = confirm;
+        this.deny = deny;
+    }
+}

package/src/lib/models/skeleton.model.ts

@@ -0,0 +1,19 @@
+import { isNullOrEmpty, isNumber, isZeroOrHigher } from '@mosa-ng/core';
+
+export class Skeleton {
+    public width?: number | string;
+    public height?: number | string;
+    public borderRadius?: number | string;
+    public randomizeOffset?: number;
+
+    constructor(skeleton?: Skeleton) {
+        this.width = isZeroOrHigher(skeleton?.width) ? skeleton?.width : 100;
+        this.height = isZeroOrHigher(skeleton?.height) ? skeleton?.height : 15;
+        if ((isNumber(skeleton?.borderRadius) && isZeroOrHigher(skeleton?.borderRadius)) ||
+            (typeof skeleton?.borderRadius === 'string' && !isNullOrEmpty(skeleton?.borderRadius))) {
+            this.borderRadius = skeleton.borderRadius;
+        }
+        this.borderRadius = this.borderRadius || 4;
+        this.randomizeOffset = skeleton?.randomizeOffset || 0;
+    }
+}

package/src/lib/models/states/cell-editor-base-state.model.ts

@@ -0,0 +1,3 @@
+export interface ICellEditorBaseState {
+    loading: boolean;
+}

package/src/lib/models/states/logger-state.model.ts

@@ -0,0 +1,5 @@
+import { ILog } from '@mosa-ng/core';
+
+export interface ILoggerState {
+    logs: ILog[];
+}

package/src/lib/models/table-item.model.ts

@@ -0,0 +1,6 @@
+export interface ITableItem<T> {
+    changedRowKeys: string[];
+    rowOriginalData: T;
+}
+
+export type TableItem<T> = ITableItem<T> & T;

package/src/lib/models/update-config.model.ts

@@ -0,0 +1,20 @@
+export interface IUpdateConfig {
+    refreshInterval?: number;
+    ignoreTimeout?: number;
+    localStorageKey?: string;
+    versionPath: string;
+    showIgnore?: boolean;
+    title?: string;
+    message?: string;
+}
+
+export interface IVersion {
+    version: string;
+    timestamp: number;
+}
+
+export enum UpdateDialogResult {
+    cancel,
+    ignore,
+    reload,
+}

package/src/lib/mosa-material.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
+import { AssetsI18nLoaderService } from '@mosa-ng/core';
+
+export function initI18n(i18n: AssetsI18nLoaderService): () => Promise<void> {
+    return () => i18n.init(null, 'mosa');
+}
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+    ],
+})
+export class MosaMaterialModule {
+
+    public static forRoot(): ModuleWithProviders<MosaMaterialModule> {
+        return {
+            ngModule: MosaMaterialModule,
+            providers: [
+                { provide: APP_INITIALIZER, useFactory: initI18n, deps: [ AssetsI18nLoaderService ], multi: true },
+            ],
+        };
+    }
+
+}

package/src/lib/services/cell-editor.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { CellEditorComponent } from '../components/cell-editor/cell-editor.component';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class CellEditorService {
+
+    public cellEditor: CellEditorComponent;
+
+    private documentEditListener: (e: MouseEvent) => void;
+
+    constructor() {
+    }
+
+    public updateEditingCell(cellEditor: CellEditorComponent): void {
+        if (cellEditor !== this.cellEditor) {
+            this.cellEditor?.toOutput(true);
+        }
+        this.cellEditor = cellEditor;
+        this.cellEditor.toInput();
+        this.bindDocumentEditListener();
+    }
+
+    public bindDocumentEditListener(): void {
+        if (!this.documentEditListener) {
+            this.documentEditListener = (e: MouseEvent): void => {
+                e.preventDefault();
+                const target: HTMLElement = e.target as HTMLElement;
+                const mosaCellEditor: HTMLElement = target.closest('mosa-cell-editor');
+                if (this.cellEditor && mosaCellEditor !== this.cellEditor.element && !target.classList.contains('cell-output')) {
+                    this.documentEditListener = null;
+                    this.cellEditor.toOutput(true);
+                    this.cellEditor = null;
+                    document.removeEventListener('click', this.documentEditListener);
+                }
+            };
+
+            document.addEventListener('click', this.documentEditListener);
+        }
+    }
+
+    public isEditingCellValid(): boolean {
+        return this.cellEditor?.element != null && Array.from(this.cellEditor.element.querySelectorAll('.ng-invalid')).length === 0;
+    }
+}