@mosa-ng/material 17.0.0

package/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "extends": "../../.eslintrc.json",
+    "parserOptions": {
+        "project": "**/tsconfig.json"
+    },
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "rules": {
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "mosa",
+                        "style": "kebab-case"
+                    }
+                ],
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "mosa",
+                        "style": "camelCase"
+                    }
+                ]
+            }
+        }
+    ]
+}

package/README.md

@@ -0,0 +1,24 @@
+# material
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project material` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project material`.
+> Note: Don't forget to add `--project material` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build material` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build material`, go to the dist folder `cd dist/material` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test material` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/@mosa-ng/material",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "assets": [
+        "src/assets"
+    ]
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@mosa-ng/material",
+    "version": "17.0.0",
+    "peerDependencies": {
+        "@angular/common": ">=17.0.0 < 18.0.0",
+        "@angular/core": ">=17.0.0 < 18.0.0"
+    },
+    "dependencies": {
+        "tslib": "^2.3.0"
+    },
+    "sideEffects": false
+}

package/src/lib/components/alert-widget/alert-widget.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { AlertWidget } from './alert.widget';
+
+@NgModule({
+    declarations: [ AlertWidget ],
+    exports: [
+        AlertWidget,
+    ],
+    imports: [
+        CommonModule,
+        MatIconModule,
+    ],
+})
+export class AlertWidgetModule {
+}

package/src/lib/components/alert-widget/alert.widget.html

@@ -0,0 +1,7 @@
+<div [class]="'alert-' + type" class="alert">
+    <div class="icon">
+        <mat-icon>icon</mat-icon>
+        {{ title }}
+    </div>
+    <div>{{ message }}</div>
+</div>

package/src/lib/components/alert-widget/alert.widget.scss

@@ -0,0 +1,50 @@
+@import "../../styles/vars";
+
+:host {
+  display: block;
+}
+
+.alert {
+  position: relative;
+  padding: 15px;
+  border-radius: 4px;
+  width: 100%;
+  display: table;
+  color: #222222;
+  border: 1px solid #222222;
+  border-left-width: 5px;
+
+  .icon {
+    @include flex(false, false, true);
+    margin-bottom: 10px;
+
+    mat-icon {
+      margin-right: 10px;
+    }
+  }
+
+  &-danger {
+    background: rgba($danger, .1);
+    border-color: $danger;
+  }
+
+  &-warning {
+    background: rgba($warning, .1);
+    border-color: $warning;
+  }
+
+  &-info {
+    background: rgba($info, .1);
+    border-color: $info;
+  }
+
+  &-primary {
+    background: rgba($primary, .1);
+    border-color: $primary;
+  }
+
+  &-success {
+    background: rgba($success, .1);
+    border-color: $success;
+  }
+}

package/src/lib/components/alert-widget/alert.widget.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+@Component({
+    selector: 'mosa-alert-widget',
+    templateUrl: './alert.widget.html',
+    styleUrls: [ './alert.widget.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertWidget implements OnInit, OnChanges {
+
+    @Input()
+    public icon: string;
+
+    @Input()
+    public title: string;
+
+    @Input()
+    public message: string;
+
+    @Input()
+    public type: 'warning' | 'error' | 'info' | 'success';
+
+    constructor() {
+    }
+
+    public ngOnInit(): void {
+        this.updateData();
+    }
+
+    public ngOnChanges(_changes: SimpleChanges): void {
+        this.updateData();
+    }
+
+    private updateData(): void {
+        if (!this.title || !this.icon) {
+            switch (this.type) {
+                case 'error':
+                    this.icon ||= 'alert-circle-outline';
+                    this.title ||= 'Error';
+                    break;
+                case 'info':
+                    this.icon ||= 'information-outline';
+                    this.title ||= 'Information';
+                    break;
+                case 'success':
+                    this.icon ||= 'check';
+                    this.title ||= 'Success';
+                    break;
+                case 'warning':
+                    this.icon ||= 'alert-outline';
+                    this.title ||= 'Warning';
+                    break;
+                default:
+                    this.icon ||= 'information-outline';
+                    this.title ||= 'Alert';
+                    break;
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CellEditorBaseComponent } from './cell-editor.base.component';
+
+@NgModule({
+    declarations: [
+        CellEditorBaseComponent,
+    ],
+    imports: [
+        CommonModule,
+    ],
+})
+export class BaseModule {
+}

package/src/lib/components/base/cell-editor.base.component.ts

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, OnInit, Optional } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { PromiseReject, PromiseResolve } from '@mosa-ng/core';
+import { Observable } from 'rxjs';
+import { ConfirmDialogData, ConfirmDialogResult } from '../../models/confirm-dialog.model';
+import { TableItem } from '../../models/table-item.model';
+import { ConfirmDialog } from '../confirm-dialog/confirm.dialog';
+
+@Component({
+    selector: 'mosa-cell-editor-base',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CellEditorBaseComponent<Model> implements OnInit, CanDeactivate<CellEditorBaseComponent<Model>> {
+
+    public dataSource: MatTableDataSource<TableItem<Model>>;
+    public displayedColumns: (keyof Model | string)[] = [];
+
+    constructor(
+        @Optional()
+        protected readonly myMatDialog: MatDialog,
+    ) {
+    }
+
+    public ngOnInit(): void {
+        this.dataSource = new MatTableDataSource<TableItem<Model>>();
+    }
+
+    public get changedRows(): TableItem<Model>[] {
+        return this.dataSource?.data?.filter((c: TableItem<Model>): boolean => c.changedRowKeys?.length > 0);
+    }
+
+    /**
+     * Remove table item data
+     * @param data
+     */
+    public serializeData(data: TableItem<Model>[]): Model[] {
+        return data.map((val: TableItem<Model>): Model => {
+            delete val.changedRowKeys;
+            delete val.rowOriginalData;
+            return val;
+        });
+    }
+
+    public toTableItems(data: Model[]): TableItem<Model>[] {
+        return data.map((val: Model): TableItem<Model> => ({
+            ...val,
+            rowOriginalData: val,
+            changedRowKeys: [],
+        }));
+    }
+
+    public canDeactivate(_component: CellEditorBaseComponent<Model>, _currentRoute: ActivatedRouteSnapshot, _currentState: RouterStateSnapshot,
+                         _nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+        if (!this.changedRows.length) {
+            return true;
+        }
+
+        return new Promise((resolve: PromiseResolve<boolean>, _reject: PromiseReject): void => {
+            this.myMatDialog
+                .open(ConfirmDialog, {
+                    width: '600px',
+                    data: new ConfirmDialogData('mosa.components.cellEditorBase.discardChanges.label',
+                        'mosa.components.cellEditorBase.discardChanges.message'),
+                })
+                .afterClosed()
+                .subscribe((result: ConfirmDialogResult): void => {
+                    if (result === ConfirmDialogResult.confirmed) {
+                        resolve(true);
+                    } else {
+                        resolve(false);
+                    }
+                });
+        });
+    }
+
+}

package/src/lib/components/cell-editor/cell-editor.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="mode === 'input'" class="input-wrapper">
+    <ng-content select=".cell-input"></ng-content>
+</div>
+<div *ngIf="mode === 'output'" class="output-wrapper">
+    <ng-content select=".cell-output"></ng-content>
+</div>

package/src/lib/components/cell-editor/cell-editor.component.scss

@@ -0,0 +1,53 @@
+@import "../../styles/vars";
+
+:host {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    &.focused .input-wrapper {
+        height: calc(100% - 6px);
+        width: 100%;
+        box-shadow: 0 0 0 3px rgba(#1387DF, .8);
+        outline: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &.edited {
+        color: #1387DF;
+        font-weight: 500;
+    }
+}
+
+::ng-deep .editable-cell {
+    position: relative;
+
+    &:first-child mosa-cell-editor:not(.focused) {
+        padding-left: 24px;
+    }
+}
+
+::ng-deep .cell-input {
+    padding: 10px;
+}
+
+::ng-deep .cell-output {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+::ng-deep input.cell-input {
+    font-size: 14px;
+    font-family: $fontRoboto;
+    background: none;
+    flex-grow: 1;
+    outline: 0;
+    border: none;
+}

package/src/lib/components/cell-editor/cell-editor.component.ts

@@ -0,0 +1,115 @@
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ContentChild,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+import { MatSelect } from '@angular/material/select';
+import { TableItem } from '../../models/table-item.model';
+import { BaseComponent } from '../base/base.component';
+
+@Component({
+    selector: 'mosa-cell-editor',
+    templateUrl: './cell-editor.component.html',
+    styleUrls: [ './cell-editor.component.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class CellEditorComponent<T = any> extends BaseComponent implements OnInit {
+
+    @Input()
+    public key: string;
+
+    @Input()
+    public rowItem: TableItem<T>;
+
+    @Input()
+    public value: T;
+
+    @Output()
+    public valueChange: EventEmitter<T> = new EventEmitter<T>();
+
+    @Output()
+    public cellClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+    @Output()
+    private readonly cellChange: EventEmitter<void> = new EventEmitter<void>();
+
+    @Output()
+    private readonly cellCancel: EventEmitter<void> = new EventEmitter<void>();
+
+    @ContentChild(MatSelect)
+    private readonly select: MatSelect;
+
+    public mode: 'input' | 'output' = 'output';
+
+    private oldValue: T;
+
+    constructor(
+        private readonly myChangeDetectorRef: ChangeDetectorRef,
+        private readonly myElementRef: ElementRef<HTMLElement>,
+    ) {
+        super();
+    }
+
+    public get element(): HTMLElement {
+        return this.myElementRef.nativeElement;
+    }
+
+    public override ngOnInit(): void {
+        this.oldValue = this.value;
+        this.rowItem.rowOriginalData = this.rowItem;
+    }
+
+    public toOutput(save?: boolean): void {
+        if (this.mode !== 'output') {
+            this.mode = 'output';
+            this.myChangeDetectorRef.markForCheck();
+            this.element.classList.remove('focused');
+
+            if (save) {
+                if (!this.rowItem.changedRowKeys) {
+                    this.rowItem.changedRowKeys = [];
+                }
+                const index: number = this.rowItem.changedRowKeys.indexOf(this.key);
+                if (this.value !== this.oldValue) {
+                    if (index === -1) {
+                        this.rowItem.changedRowKeys.push(this.key);
+                        this.element.classList.add('edited');
+                    }
+                    this.cellChange.emit();
+                } else {
+                    if (index !== -1) {
+                        this.rowItem.changedRowKeys.splice(index, 1);
+                        this.element.classList.remove('edited');
+                    }
+                }
+            } else {
+                this.value = this.oldValue;
+                this.cellCancel.emit();
+            }
+            this.valueChange.next(this.value);
+        }
+    }
+
+    public toInput(): void {
+        this.mode = 'input';
+        this.myChangeDetectorRef.markForCheck();
+        this.element.classList.add('focused');
+        setTimeout((): void => {
+            const comp: HTMLElement = this.element.querySelector('.cell-input');
+
+            if (comp instanceof HTMLInputElement) {
+                comp.focus();
+            } else if (this.select) {
+                this.select.open();
+            }
+        });
+    }
+
+}

package/src/lib/components/cell-editor/cell-editor.module.ts

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

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { ConfirmDialog } from './confirm.dialog';
+
+@NgModule({
+    declarations: [ ConfirmDialog ],
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        TranslateModule,
+    ],
+    exports: [ ConfirmDialog ],
+})
+export class ConfirmDialogModule {
+}

package/src/lib/components/confirm-dialog/confirm.dialog.html

@@ -0,0 +1,15 @@
+<h1 class="active" mat-dialog-title>{{ dialogData.title | translate }}</h1>
+<div mat-dialog-content>
+    {{ dialogData.message | translate }}
+</div>
+<div mat-dialog-actions>
+    <button (click)="confirm(result.cancelled)" *ngIf="dialogData.cancel" color="primary" mat-stroked-button>
+        {{ 'mosa.commons.buttons.cancel' | translate | uppercase }}
+    </button>
+    <button (click)="confirm(result.denied)" *ngIf="dialogData.deny.visible" color="primary" mat-stroked-button>
+        {{ dialogData.deny.label | translate | uppercase }}
+    </button>
+    <button (click)="confirm(result.confirmed)" *ngIf="dialogData.confirm.visible" color="primary" mat-flat-button>
+        {{ dialogData.confirm.label | translate | uppercase }}
+    </button>
+</div>

package/src/lib/components/confirm-dialog/confirm.dialog.scss

@@ -0,0 +1,3 @@
+.mat-dialog-actions {
+  margin-top: 20px;
+}

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

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ConfirmDialogAction, ConfirmDialogData, ConfirmDialogResult } from '../../models/confirm-dialog.model';
+import { BaseComponent } from '../base/base.component';
+
+@Component({
+    selector: 'mosa-confirm-dialog',
+    templateUrl: './confirm.dialog.html',
+    styleUrls: [ './confirm.dialog.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmDialog extends BaseComponent implements OnInit {
+
+    public dialogData: ConfirmDialogData;
+    public result: typeof ConfirmDialogResult = ConfirmDialogResult;
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA)
+        private readonly myConfirmDialogData: ConfirmDialogData,
+        private readonly myMatDialogRef: MatDialogRef<ConfirmDialog>,
+    ) {
+        super();
+        const cancel: ConfirmDialogAction = new ConfirmDialogAction('mosa.commons.buttons.cancel', true);
+        const deny: ConfirmDialogAction = new ConfirmDialogAction('mosa.commons.buttons.deny');
+        const confirm: ConfirmDialogAction = new ConfirmDialogAction('mosa.commons.buttons.confirm', true);
+        const title: string = 'mosa.components.confirmDialog.title';
+        const message: string = 'mosa.components.confirmDialog.message';
+
+        this.dialogData = myConfirmDialogData || new ConfirmDialogData(title, message, cancel, confirm, deny);
+
+        if (!this.dialogData.title) {
+            this.dialogData.title = title;
+        }
+
+        if (!this.dialogData.message) {
+            this.dialogData.message = message;
+        }
+
+        if (!this.dialogData.cancel) {
+            this.dialogData.cancel = cancel;
+        }
+
+        if (!this.dialogData.confirm) {
+            this.dialogData.confirm = confirm;
+        }
+
+        if (!this.dialogData.deny) {
+            this.dialogData.deny = deny;
+        }
+    }
+
+    public override ngOnInit(): void {
+        super.ngOnInit();
+    }
+
+    public confirm(result: ConfirmDialogResult): void {
+        this.myMatDialogRef.close(result);
+    }
+
+}

package/src/lib/components/loading-button/loading-button.component.html

@@ -0,0 +1,42 @@
+<ng-container [ngSwitch]="buttonType">
+    <button (click)="onClick($event)" *ngSwitchDefault [class]="mode" [color]="color"
+            [disabled]="loading || disabled" mat-button>
+        <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
+    </button>
+    <button (click)="onClick($event)" *ngSwitchCase="'raised'" [class]="mode" [color]="color"
+            [disabled]="loading || disabled" mat-raised-button>
+        <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
+    </button>
+    <button (click)="onClick($event)" *ngSwitchCase="'stroked'" [class]="mode" [color]="color"
+            [disabled]="loading || disabled" mat-stroked-button>
+        <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
+    </button>
+    <button (click)="onClick($event)" *ngSwitchCase="'flat'" [class]="mode" [color]="color"
+            [disabled]="loading || disabled" mat-flat-button>
+        <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
+    </button>
+    <button (click)="onClick($event)" *ngSwitchCase="'icon'" [class]="mode" [color]="color"
+            [disabled]="loading || disabled" mat-icon-button>
+        <mat-spinner *ngIf="loading" class="icon-spinner" [color]="color" [diameter]="40" [strokeWidth]="2"></mat-spinner>
+        <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+        <ng-content select=".icon"></ng-content>
+    </button>
+</ng-container>
+
+<ng-template #buttonContent>
+    <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+    <ng-container [ngSwitch]="mode">
+        <ng-container *ngSwitchCase="'spinner'">
+            <div class="spinner-inner">
+                <mat-spinner *ngIf="loading" [color]="color" [diameter]="20"></mat-spinner>
+                <span [class.loading]="loading" class="label">
+                    <ng-content select=".spinner-label"></ng-content>
+                </span>
+            </div>
+        </ng-container>
+        <ng-container *ngSwitchCase="'progress-bar'">
+            <ng-content select=".progress-bar-label"></ng-content>
+            <mat-progress-bar *ngIf="loading" [color]="color" mode="indeterminate"></mat-progress-bar>
+        </ng-container>
+    </ng-container>
+</ng-template>