@mosa-ng/material 17.0.0

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

@@ -0,0 +1,40 @@
+:host {
+  pointer-events: none;
+}
+
+button:not(:disabled) {
+  pointer-events: all;
+}
+
+.icon-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.spinner {
+  .spinner-inner {
+    display: flex;
+    align-items: center;
+
+    mat-spinner {
+      position: absolute;
+    }
+
+    .label.loading {
+      margin-left: 30px;
+    }
+  }
+}
+
+.progress-bar {
+  overflow: hidden;
+  position: relative;
+
+  mat-progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+    selector: 'mosa-loading-button',
+    templateUrl: './loading-button.component.html',
+    styleUrls: [ './loading-button.component.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadingButtonComponent {
+
+    @Input()
+    public mode: 'spinner' | 'progress-bar' = 'spinner';
+
+    @Input()
+    public loading: boolean;
+
+    @Input()
+    public disabled: boolean;
+
+    @Input()
+    public color: ThemePalette = 'primary';
+
+    @Input()
+    public buttonType: 'default' | 'raised' | 'stroked' | 'flat' | 'icon';
+
+    @Input()
+    public icon: string;
+
+    @Output()
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    public click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+    constructor() {
+    }
+
+    public onClick(e: MouseEvent): void {
+        e.stopPropagation();
+        this.click.emit(e);
+    }
+
+}

package/src/lib/components/loading-button/loading-button.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { LoadingButtonComponent } from './loading-button.component';
+
+@NgModule({
+    declarations: [ LoadingButtonComponent ],
+    imports: [
+        CommonModule,
+        MatProgressSpinnerModule,
+        MatProgressBarModule,
+        MatButtonModule,
+        MatIconModule,
+    ],
+    exports: [ LoadingButtonComponent ],
+})
+export class LoadingButtonModule {
+}

package/src/lib/components/logger/README.md

@@ -0,0 +1,83 @@
+# Logger
+
+The mosa logger is a tool to display messages / infos to a user. It can also be used to catch http request errors and
+directly display the error message to the user
+
+## Example usage
+
+### HTML
+
+`````html
+<mosa-logger></mosa-logger>
+`````
+
+### TypeScript
+
+````typescript
+export class AppComponent implements OnInit {
+    
+    @ViewChild(LoggerComponent)
+    public set logger(logger: LoggerComponent) {
+        this.myLoggerService.logger(logger, this.defaultLoggerConfig);
+    }
+    
+    constructor(
+        private myCoreLoggerService: CoreLoggerService,
+        private myLoggerService: LoggerService,
+    ) {
+    }
+
+    public ngOnInit(): void {
+        // Subscribe to ui logs
+        this.defaultLoggerConfig = {
+            debug: !environment.production,
+            closeOnClick: false,
+            showDismiss: true,
+        };
+        this.myCoreLoggerService.subUiLogs()
+            .subscribe((data: ILogEvent): void => {
+                if (data) {
+                    this.myLoggerService.show({
+                        title: data.title,
+                        msg: data.msg,
+                        ...data.config,
+                        ...this.defaultLoggerConfig as ILoggerConfig,
+                    }, data.type);
+                }
+            });
+    }
+}
+````
+
+## Logger features
+
+For model definition see [ILoggerConfig](../../../../../core/src/lib/models/logger/logger-config.model.ts)
+
+````typescript
+// Subscribe to each log emitted in the code, or from http requests
+this.myLoggerService.subUiLogs()
+
+// Get error message from an object
+this.myLoggerService.getErrorMsg(err);
+
+// Get error title from an object
+this.myLoggerService.getErrorTitle(err);
+
+// Log an error
+this.myLoggerService.logError({ msg: message });
+
+// Log a success message
+this.myLoggerService.logSuccess({ msg: message });
+
+// Log a warning message
+this.myLoggerService.logWarning({ msg: message });
+
+// Log an info message
+this.myLoggerService.logInfo({ msg: message });
+
+// Any kind of log
+this.myLoggerService.log({ msg: message });
+
+// Any kind of log
+this.myLoggerService.show({ msg: message }, 'default');
+````

package/src/lib/components/logger/logger.component.html

@@ -0,0 +1,32 @@
+<ng-container *ngIf="loggerState$ | async as state">
+    <div #loggerElement
+         *ngFor="let log of state.logs"
+         [@slide]="log.state"
+         [class.none]="!log.state"
+         [class]="log.config.className"
+         (click)="onClickLog(log)"
+         [class.touch]="log.config.closeOnClick"
+         class="logger-element">
+
+        <div class="content">
+            <mat-icon class="icon">{{ log.icon }}</mat-icon>
+            <div>
+                <div *ngIf="log.title" class="title">{{ log.title | translate }}</div>
+                <div *ngIf="log.message" [innerHTML]="log.message | translate" class="message"></div>
+            </div>
+        </div>
+
+        <div *ngIf="log.config.action || log.config.showDismiss" class="actions">
+            <button (click)="slideOut(log.id)" *ngIf="log.config.showDismiss" class="dismiss" mat-button>
+                {{ 'mosa.commons.buttons.dismiss' | translate | uppercase }}
+            </button>
+            <button (click)="$event.stopPropagation(); callAction(log)"
+                    *ngIf="log.config.action && log.config.action.label && log.config.action.callback"
+                    class="action-btn" mat-button>
+                {{ log.config.action.label | translate | uppercase }}
+            </button>
+        </div>
+
+    </div>
+</ng-container>
+

package/src/lib/components/logger/logger.component.scss

@@ -0,0 +1,120 @@
+@import "../../styles/vars";
+
+:host {
+  @include size(100%, 100%);
+  @include move(0, 0);
+  @include flex(true, false);
+  position: fixed;
+  z-index: 10000;
+  align-items: flex-end;
+  pointer-events: none;
+}
+
+.logger-element {
+  padding: 10px 15px;
+  margin: 10px 10px 0;
+  width: 350px;
+  background: $white;
+  border-radius: 4px;
+  box-shadow: 3px 3px 10px rgba($black, .3);
+  border-left: 5px solid;
+  pointer-events: all;
+  max-height: 400px;
+
+  &.touch {
+    cursor: pointer;
+  }
+
+  .content {
+    display: flex;
+    width: 100%;
+
+    .icon {
+      flex-shrink: 0;
+      margin-right: 10px;
+    }
+
+    .title {
+      font-weight: 500;
+      color: #222222;
+    }
+
+    .message {
+      @include maxLines();
+      flex: 1 auto;
+      font-size: 15px;
+      margin-top: 3px;
+      color: #222222;
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+  }
+
+  .dismiss {
+    color: #222222;
+  }
+
+  button:not(:first-child) {
+    margin-left: 10px;
+  }
+
+  &.snackbar-error {
+    border-color: $danger;
+    color: $danger;
+
+    button.action-btn {
+      background-color: darken($danger, 15%);
+      color: $white;
+    }
+  }
+
+  &.snackbar-success {
+    border-color: $success;
+    color: $success;
+
+    button.action-btn {
+      background-color: darken($success, 15%);
+      color: $white;
+    }
+  }
+
+  &.snackbar-warning {
+    border-color: $warning;
+    color: $warning;
+
+    button.action-btn {
+      background-color: darken($warning, 10%);
+      color: $white;
+    }
+  }
+
+  &.snackbar-info {
+    border-color: $info;
+    color: $info;
+
+    button.action-btn {
+      background-color: darken($info, 15%);
+      color: $white;
+    }
+  }
+
+  &.snackbar-default {
+    border-color: #222222;
+    color: #222222;
+
+    button.action-btn {
+      background-color: #222222;
+      color: $white;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .logger-element {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,116 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { ILog, ILoggerConfig } from '@mosa-ng/core';
+import { Observable } from 'rxjs';
+import { ILoggerState } from '../../models/states/logger-state.model';
+import { LoggerFacade } from '../../services/facades/logger.facade';
+import { BaseComponent } from '../base/base.component';
+
+@Component({
+    selector: 'mosa-logger',
+    templateUrl: './logger.component.html',
+    styleUrls: [ './logger.component.scss' ],
+    animations: [
+        trigger('slide', [
+            state('enter', style({ transform: 'translateX(0)' })),
+            transition(':leave', [
+                animate(200, style({ transform: 'translateX(120%)' })),
+            ]),
+            transition(':enter', [
+                style({ transform: 'translateX(120%)' }),
+                animate(200, style({ transform: 'translateX(0)' })),
+            ]),
+        ]),
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoggerComponent extends BaseComponent implements OnInit {
+
+    @ViewChildren('loggerElement')
+    public elements: QueryList<HTMLElement>;
+
+    public loggerState$: Observable<ILoggerState>;
+
+    /**
+     * Default constructor
+     * @param myLoggerFacade
+     */
+    constructor(
+        private readonly myLoggerFacade: LoggerFacade,
+    ) {
+        super();
+    }
+
+    public override ngOnInit(): void {
+        super.ngOnInit();
+        this.loggerState$ = this.myLoggerFacade.subState();
+    }
+
+    public onClickLog(log: ILog): void {
+        if (log.config.closeOnClick) {
+            this.slideOut(log.id);
+        }
+    }
+
+    /**
+     * Shows the snackbar
+     * @param title
+     * @param message
+     * @param type
+     * @param config
+     */
+    public slideIn(title: string, message: string, type: string, config: ILoggerConfig): number {
+        const logs: ILog[] = [ ...this.myLoggerFacade.snapshot.logs ];
+        const i = logs.length;
+        let icon: string;
+
+        switch (type) {
+            case 'error':
+                icon = 'error';
+                break;
+            case 'warning':
+                icon = 'warning';
+                break;
+            case 'info':
+                icon = 'info';
+                break;
+            case 'success':
+                icon = 'done';
+                break;
+            case 'default':
+                icon = 'notifications';
+                break;
+        }
+
+        logs.push({ id: i, title, message, config, state: 'enter', icon });
+        this.myLoggerFacade.updateLogs(logs);
+        return i;
+    }
+
+    /**
+     * Hides the log
+     * @param id
+     */
+    public slideOut(id: number): void {
+        let logs: ILog[] = [ ...this.myLoggerFacade.snapshot.logs ];
+        if (logs.length > 0) {
+            const item = logs.find((e: ILog): boolean => e.id === id);
+            if (item) {
+                item.state = 'leave';
+                this.myLoggerFacade.updateLogs(logs);
+                setTimeout((): void => {
+                    logs = [ ...this.myLoggerFacade.snapshot.logs ];
+                    const index = logs.findIndex((log: ILog): boolean => log.id === item.id);
+                    logs.splice(index, 1);
+                    this.myLoggerFacade.updateLogs(logs);
+                }, 200);
+            }
+        }
+    }
+
+    public callAction(log: ILog): void {
+        log.config.action.callback.call(this);
+        this.slideOut(log.id);
+    }
+
+}

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

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { LoggerComponent } from './logger.component';
+
+@NgModule({
+    declarations: [
+        LoggerComponent,
+    ],
+    imports: [
+        CommonModule,
+        MatIconModule,
+        MatButtonModule,
+        TranslateModule,
+    ],
+    exports: [
+        LoggerComponent,
+    ],
+})
+export class LoggerModule {
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'mosa-skeleton-loader',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class BaseSkeletonLoader {
+
+    @Input()
+    public itemCount: number;
+
+}

package/src/lib/components/skeleton-loader/list-skeleton-loader/list-skeleton-loader.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+import { SkeletonLoaderModule } from '../skeleton-loader.module';
+import { ListSkeletonLoader } from './list.skeleton-loader';
+
+@NgModule({
+    declarations: [ ListSkeletonLoader ],
+    imports: [
+        CommonModule,
+        MatListModule,
+        SkeletonLoaderModule,
+    ],
+    exports: [ ListSkeletonLoader ],
+})
+export class ListSkeletonLoaderModule {
+}

package/src/lib/components/skeleton-loader/list-skeleton-loader/list.skeleton-loader.html

@@ -0,0 +1,5 @@
+<mat-list>
+    <mat-list-item *ngFor="let item of items">
+        <ng-container *ngTemplateOutlet="content, context: { $implicit: item }"></ng-container>
+    </mat-list-item>
+</mat-list>

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

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { BaseSkeletonLoader } from '../base.skeleton-loader';
+
+@Component({
+    selector: 'mosa-list-skeleton-loader',
+    templateUrl: './list.skeleton-loader.html',
+    styleUrls: [ './list.skeleton-loader.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class ListSkeletonLoader extends BaseSkeletonLoader implements OnInit {
+
+    @Input()
+    public content: TemplateRef<unknown>;
+
+    public items: number[] = [];
+
+    constructor() {
+        super();
+    }
+
+    public ngOnInit(): void {
+        this.items = Array(this.itemCount).fill(this.itemCount).map((x: number, i: number): number => i);
+    }
+
+}

package/src/lib/components/skeleton-loader/skeleton/skeleton.component.scss

@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  background: #d4d4d4;
+  flex-shrink: 0;
+  animation: loading .25s infinite linear alternate-reverse;
+}
+
+@keyframes loading {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: .5;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
+import { Skeleton } from '../../../models/skeleton.model';
+
+@Component({
+    selector: 'mosa-skeleton',
+    templateUrl: './skeleton.component.html',
+    styleUrls: [ './skeleton.component.scss' ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonComponent implements OnInit {
+
+    @Input()
+    public skeleton: Skeleton;
+
+    @Input()
+    public width: number | string;
+
+    @Input()
+    public height: number | string;
+
+    @Input()
+    public randomizeOffset: number;
+
+    @Input()
+    public borderRadius: number | string;
+
+    private readonly element: HTMLElement;
+
+    constructor(
+        private readonly myElementRef: ElementRef,
+    ) {
+        this.element = this.myElementRef.nativeElement;
+    }
+
+    public ngOnInit(): void {
+        if (!this.skeleton) {
+            this.skeleton = new Skeleton({
+                width: this.width,
+                height: this.height,
+                borderRadius: this.borderRadius,
+                randomizeOffset: this.randomizeOffset,
+            });
+        }
+        this.element.style.width = this.actualWidth;
+        this.element.style.height = SkeletonComponent.value(this.skeleton.height);
+        this.element.style.borderRadius = SkeletonComponent.value(this.skeleton.borderRadius);
+    }
+
+    private get actualWidth(): string {
+        if (this.skeleton.randomizeOffset > 0 && typeof this.skeleton.width === 'number') {
+            return `${ this.skeleton.width - Math.floor(Math.random() * this.skeleton.randomizeOffset) }px`;
+        }
+
+        return SkeletonComponent.value(this.skeleton.width);
+    }
+
+    private static value(val: number | string): string {
+        if (typeof val === 'number') {
+            return `${ val }px`;
+        }
+        return val;
+    }
+
+}

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { BaseSkeletonLoader } from './base.skeleton-loader';
+import { SkeletonComponent } from './skeleton/skeleton.component';
+
+@NgModule({
+    declarations: [ BaseSkeletonLoader, SkeletonComponent ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        BaseSkeletonLoader,
+        SkeletonComponent,
+    ],
+})
+export class SkeletonLoaderModule {
+}

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
+import { SkeletonLoaderModule } from '../skeleton-loader.module';
+import { TableSkeletonLoader } from './table.skeleton-loader';
+
+@NgModule({
+    declarations: [ TableSkeletonLoader ],
+    imports: [
+        CommonModule,
+        MatTableModule,
+        SkeletonLoaderModule,
+    ],
+    exports: [
+        TableSkeletonLoader,
+    ],
+})
+export class TableSkeletonLoaderModule {
+}

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

@@ -0,0 +1,12 @@
+<table [dataSource]="items" mat-table>
+    <ng-container *ngFor="let column of columns; let i = index;" [matColumnDef]="'column-' + i">
+        <th *matHeaderCellDef mat-header-cell>
+            <mosa-skeleton [skeleton]="column[0]"></mosa-skeleton>
+        </th>
+        <td *matCellDef="let row" mat-cell>
+            <mosa-skeleton [skeleton]="column[1]"></mosa-skeleton>
+        </td>
+    </ng-container>
+    <tr *matHeaderRowDef="displayedColumns;sticky:true" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns;" class="row-hover" mat-row></tr>
+</table>

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

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}