@mosa-ng/material 17.0.0 → 17.0.1

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

@@ -1,60 +0,0 @@
-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

@@ -1,42 +0,0 @@
-<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>

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

@@ -1,40 +0,0 @@
-: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

@@ -1,42 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,83 +0,0 @@
-# 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

@@ -1,32 +0,0 @@
-<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

@@ -1,120 +0,0 @@
-@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

@@ -1,116 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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

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