angular-matecu 2.0.6 → 2.0.9

package/README.md

@@ -118,6 +118,35 @@ En el componente
   }
 
 
+## MatecuSnackBarService 
+
+Servicio para abrir dialogos snackBar con titulos con colores para Error, Success, Warning, Info
+
+### Uso
+
+Importar en el módulo.
+
+    import { MatecuAlertBoxModule } from 'angular-matecu';
+
+En el componente
+
+    import { MatecuSnackBarService } from 'angular-matecu';
+
+     // .... 
+    constructor(private snackBar: MatecuSnackBarService) { }
+
+    openError(): void {
+         this.snackBar.openError('Mensaje de error');
+    }
+
+### Métodos
+
+    - openError()
+    - openInfo()
+    - openWarning()
+    - openSuccess()
+    - open()
+    - dismiss()
 # matecu-topbar-layout (Componente)
 
 ### Uso:

package/angular-matecu.code-workspace

@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": "../.."
+		}
+	],
+	"settings": {
+		"editor.formatOnSave": true
+	}
+}

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/angular-matecu'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-matecu",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "src/scss/**/*.scss",
+    "src/css/**/*.css"
+
+  ]
+  
+}

package/package.json

@@ -1,19 +1,11 @@
 {
   "name": "angular-matecu",
-  "version": "2.0.6",
+  "version": "2.0.9",
   "peerDependencies": {
-    "@angular/common": "^12.x",
-    "@angular/core": "^12.x",
-    "@angular/material": "^12.x"
+    "@angular/common": "^12.x || ^13.x",
+    "@angular/core": "^12.x || ^13.x",
+    "@angular/material": "^12.x || ^13.x"
   },
-  "dependencies": {
-    "tslib": "^2.1.0"
-  },
-  "main": "bundles/angular-matecu.umd.js",
-  "module": "fesm2015/angular-matecu.js",
-  "es2015": "fesm2015/angular-matecu.js",
-  "esm2015": "esm2015/angular-matecu.js",
-  "fesm2015": "fesm2015/angular-matecu.js",
-  "typings": "angular-matecu.d.ts",
-  "sideEffects": false
-}
+  "dependencies": {},
+  "devDependencies": {}
+}

package/src/lib/modules/matecu-alert-box/components/matecu-alert-box/matecu-alert-box.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="icon && iconValue">
+  <div class="matecu-alert-box__icon">
+    <mat-icon>{{iconValue}}</mat-icon>
+  </div>
+</ng-container>
+<div class="matecu-alert-box__content">
+  <ng-content>
+
+
+  </ng-content>
+</div>

package/src/lib/modules/matecu-alert-box/components/matecu-alert-box/matecu-alert-box.component.scss

@@ -0,0 +1,39 @@
+:host.matecu-alert-box {
+  display: flex;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  position: relative;
+  border: 1px solid rgb(224, 224, 224);
+  box-sizing: border-box;
+  margin: 1rem 0;
+
+  &--success {
+    color: rgb(15, 80, 50);
+    background-color: rgb(210, 230, 220);
+    border-color: rgb(186, 220, 205);
+  }
+  &--danger {
+    color: rgb(130, 30, 40);
+    background-color: rgb(248, 215, 218);
+    border-color: rgb(245, 194, 199);
+  }
+  &--warning {
+    color: rgb(100, 77, 3);
+    background-color: rgb(255, 243, 205);
+    border-color: rgb(255, 236, 180);
+  }
+  &--info {
+    color: rgb(5, 81, 96);
+    background-color: rgb(207, 244, 252);
+    border-color: rgb(182, 239, 251);
+  }
+  .matecu-alert-box {
+    &__icon {
+      display: flex;
+      margin-right: 1rem;
+    }
+    &__content {
+      align-self: center;
+    }
+  }
+}

package/src/lib/modules/matecu-alert-box/components/matecu-alert-box/matecu-alert-box.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuAlertBoxComponent } from './matecu-alert-box.component';
+
+describe('MatecuAlertBoxComponent', () => {
+  let component: MatecuAlertBoxComponent;
+  let fixture: ComponentFixture<MatecuAlertBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuAlertBoxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuAlertBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-alert-box/components/matecu-alert-box/matecu-alert-box.component.ts

@@ -0,0 +1,56 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { MatecuAlertBoxType } from '../../types/matecu-altert-box-type';
+
+@Component({
+  selector: 'matecu-alert-box',
+  templateUrl: './matecu-alert-box.component.html',
+  styleUrls: ['./matecu-alert-box.component.scss'],
+})
+export class MatecuAlertBoxComponent implements OnInit {
+  classNameBase = 'matecu-alert-box';
+  alertColor?: MatecuAlertBoxType | undefined | string | null;
+  iconValue?: string | null | undefined;
+  private alertIcon = false;
+  get color(): MatecuAlertBoxType | undefined | string | null {
+    return this.alertColor;
+  }
+  @Input() set color(value: MatecuAlertBoxType | undefined | string | null) {
+    this.alertColor = value;
+    if (!!value) {
+      this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
+    } else {
+      this.className = this.classNameBase;
+    }
+    this.updateIcon();
+  }
+  get icon(): boolean {
+    return this.alertIcon;
+  }
+  @Input() set icon(value: boolean) {
+    this.alertIcon = value;
+  }
+  @HostBinding('class') className = this.classNameBase;
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  private updateIcon(): void {
+    switch (this.color) {
+      case MatecuAlertBoxType.danger:
+        this.iconValue = 'dangerous';
+        break;
+      case MatecuAlertBoxType.warning:
+        this.iconValue = 'warning';
+        break;
+      case MatecuAlertBoxType.success:
+        this.iconValue = 'check_circle';
+        break;
+      case MatecuAlertBoxType.info:
+        this.iconValue = 'info';
+        break;
+      default:
+        this.iconValue = null;
+        break;
+    }
+  }
+}

package/src/lib/modules/matecu-alert-box/components/matecu-alert-dialog/matecu-alert-dialog.component.html

@@ -0,0 +1,14 @@
+<h2 mat-dialog-title *ngIf="hasTitle">{{dialogData.title}}</h2>
+<mat-dialog-content>
+
+  <matecu-alert-box [color]="dialogData.type" [icon]="!!dialogData.icon">
+    {{dialogData.message}}
+  </matecu-alert-box>
+
+</mat-dialog-content>
+<mat-dialog-actions *ngIf="showActions" align="end">
+  <button mat-button color="primary" tabindex="-1" mat-dialog-close
+    *ngIf="hasDismissBtn">{{dialogData.dismissText}}</button>
+  <button mat-button color="primary" tabindex="-2" (click)="activateAction()"
+    *ngIf="hasActionBtn">{{dialogData.action}}</button>
+</mat-dialog-actions>

package/src/lib/modules/matecu-alert-box/components/matecu-alert-dialog/matecu-alert-dialog.component.scss

@@ -0,0 +1,5 @@
+:host {
+  matecu-alert-box {
+    max-width: 900px;
+  }
+}

package/src/lib/modules/matecu-alert-box/components/matecu-alert-dialog/matecu-alert-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuAlertDialogComponent } from './matecu-alert-dialog.component';
+
+describe('MatecuAlertDialogComponent', () => {
+  let component: MatecuAlertDialogComponent;
+  let fixture: ComponentFixture<MatecuAlertDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuAlertDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuAlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-alert-box/components/matecu-alert-dialog/matecu-alert-dialog.component.ts

@@ -0,0 +1,47 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatecuAlertDialogData } from '../../types/matecu-alert-dialog';
+@Component({
+  selector: 'matecu-alert-dialog',
+  templateUrl: './matecu-alert-dialog.component.html',
+  styleUrls: ['./matecu-alert-dialog.component.scss'],
+})
+export class MatecuAlertDialogComponent implements OnInit {
+  hasTitle = false;
+  hasDismissBtn = false;
+  hasActionBtn = false;
+  showActions = false;
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public dialogData: MatecuAlertDialogData,
+    public dialogRef: MatDialogRef<MatecuAlertDialogComponent>
+  ) {
+    this.setHasTitle();
+    this.setHasDismissBtn();
+    this.setHasActionBtn();
+    this.setShowActions();
+  }
+
+  ngOnInit(): void {}
+
+  activateAction(): void {
+    this.dialogRef.close(true);
+  }
+
+  private setHasTitle(): void {
+    this.hasTitle = this.isValidString(this.dialogData.title);
+  }
+  private setHasDismissBtn(): void {
+    this.hasDismissBtn = this.isValidString(this.dialogData.dismissText);
+  }
+
+  private setHasActionBtn(): void {
+    this.hasActionBtn = this.isValidString(this.dialogData.action);
+  }
+  private setShowActions(): void {
+    this.showActions = this.hasActionBtn || this.hasDismissBtn;
+  }
+  private isValidString(str: string | null | undefined): boolean {
+    const isValid = typeof str === 'string' && str.trim().length > 0;
+    return isValid;
+  }
+}

package/src/lib/modules/matecu-alert-box/matecu-alert-box.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatecuAlertBoxComponent } from './components/matecu-alert-box/matecu-alert-box.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatecuAlertDialogComponent } from './components/matecu-alert-dialog/matecu-alert-dialog.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatecuSnackBarAlertComponent } from './matecu-snack-bar-alert/matecu-snack-bar-alert.component';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatecuAlertSnackBarComponent } from './matecu-alert-snack-bar/matecu-alert-snack-bar.component';
+
+@NgModule({
+    declarations: [MatecuAlertBoxComponent, MatecuAlertDialogComponent, MatecuSnackBarAlertComponent, MatecuAlertSnackBarComponent],
+    imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, MatSnackBarModule],
+    exports: [MatecuAlertBoxComponent]
+})
+export class MatecuAlertBoxModule {}

package/src/lib/modules/matecu-alert-box/matecu-alert-snack-bar/matecu-alert-snack-bar.component.html

@@ -0,0 +1 @@
+<p>matecu-alert-snack-bar works!</p>

package/src/lib/modules/matecu-alert-box/matecu-alert-snack-bar/matecu-alert-snack-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuAlertSnackBarComponent } from './matecu-alert-snack-bar.component';
+
+describe('MatecuAlertSnackBarComponent', () => {
+  let component: MatecuAlertSnackBarComponent;
+  let fixture: ComponentFixture<MatecuAlertSnackBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuAlertSnackBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuAlertSnackBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-alert-box/matecu-alert-snack-bar/matecu-alert-snack-bar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'matecu-alert-snack-bar',
+  templateUrl: './matecu-alert-snack-bar.component.html',
+  styleUrls: ['./matecu-alert-snack-bar.component.css']
+})
+export class MatecuAlertSnackBarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/modules/matecu-alert-box/matecu-snack-bar-alert/matecu-snack-bar-alert.component.html

@@ -0,0 +1,8 @@
+<div>
+    <strong>{{title}}</strong> &nbsp;
+    <span>{{message}}</span>
+</div>
+<div *ngIf="!!action?.length">
+
+    <button mat-button color="accent" (click)="dismiss()">{{action}}</button>
+</div>

package/src/lib/modules/matecu-alert-box/matecu-snack-bar-alert/matecu-snack-bar-alert.component.scss

@@ -0,0 +1,34 @@
+:host.matecu-alert-snackbar {
+    display: flex;
+    align-items: center;
+    > * {
+        &:not(:first-child) {
+            margin-left: 10px;
+            
+        }
+
+    }
+    &--success {
+        strong {
+
+            color: rgb(32, 219, 32);
+        }
+      }
+      &--danger {
+        strong {
+            color: red;
+        }
+      }
+      &--warning {
+        strong {
+            color: orange;
+        }
+      }
+      &--info {
+        strong {
+            color: rgb(7, 160, 237)
+        }
+      }
+  
+   
+}

package/src/lib/modules/matecu-alert-box/matecu-snack-bar-alert/matecu-snack-bar-alert.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuSnackBarAlertComponent } from './matecu-snack-bar-alert.component';
+
+describe('MatecuSnackBarAlertComponent', () => {
+  let component: MatecuSnackBarAlertComponent;
+  let fixture: ComponentFixture<MatecuSnackBarAlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuSnackBarAlertComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuSnackBarAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-alert-box/matecu-snack-bar-alert/matecu-snack-bar-alert.component.ts

@@ -0,0 +1,41 @@
+import { Component, HostBinding, Inject, OnInit } from '@angular/core';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { MatecuAlertSnackBarData } from '../types/matecu-alert-snackbar';
+import { MatecuAlertBoxType } from '../types/matecu-altert-box-type';
+
+@Component({
+  selector: 'matecu-snack-bar-alert',
+  templateUrl: './matecu-snack-bar-alert.component.html',
+  styleUrls: ['./matecu-snack-bar-alert.component.scss']
+})
+export class MatecuSnackBarAlertComponent  {
+
+  title: string;
+  message: string;
+  action?: string;
+  classNameBase = 'matecu-alert-snackbar';
+  alertColor!: MatecuAlertBoxType ;
+  get color(): MatecuAlertBoxType {
+    return this.alertColor;
+  }
+  set color(value: MatecuAlertBoxType ) {
+    this.alertColor = value;
+    this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
+  }
+  @HostBinding('class') className = this.classNameBase;
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: MatecuAlertSnackBarData,
+    private snackBarRef: MatSnackBarRef<MatecuSnackBarAlertComponent>) { 
+    this.title = data.title;
+    this.message = data.message;
+    this.action = data.action;
+    this.color = data.type;
+
+  }
+
+  dismiss():void {
+    this.snackBarRef.dismissWithAction();
+  }
+
+
+}

package/src/lib/modules/matecu-alert-box/services/matecu-snack-bar.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatecuSnackBarService } from './matecu-snack-bar.service';
+
+describe('MatecuSnackBarService', () => {
+  let service: MatecuSnackBarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MatecuSnackBarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-alert-box/services/matecu-snack-bar.service.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar, MatSnackBarConfig, MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
+import { MatecuSnackBarAlertComponent } from '../matecu-snack-bar-alert/matecu-snack-bar-alert.component';
+import { MatecuAlertSnackBarData } from '../types/matecu-alert-snackbar';
+import { MatecuAlertBoxType } from '../types/matecu-altert-box-type';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MatecuSnackBarService {
+
+  constructor(private snackBar: MatSnackBar) { }
+
+
+
+  openError(error: string | Error, title?: string | null, action?: string, config?:MatSnackBarConfig<any>): MatSnackBarRef<MatecuSnackBarAlertComponent> {
+    const message = this.getErrorMessage(error);
+    const titleStr = title || 'ERROR';
+    const type = MatecuAlertBoxType.danger;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  openSuccess(message: string, title?: string | null, action?: string, config?:MatSnackBarConfig<any>): MatSnackBarRef<MatecuSnackBarAlertComponent> {
+    const titleStr = title || 'OK';
+    const type = MatecuAlertBoxType.success;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  openWarning(message: string, title?: string | null, action?: string, config?:MatSnackBarConfig<any>): MatSnackBarRef<MatecuSnackBarAlertComponent> {
+    const titleStr = title || 'WARNING';
+    const type = MatecuAlertBoxType.warning;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  openInfo(message: string, title?: string | null, action?: string, config?:MatSnackBarConfig<any>): MatSnackBarRef<MatecuSnackBarAlertComponent> {
+    const titleStr = title || 'INFO';
+    const type = MatecuAlertBoxType.info;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  open(message: string, action?: string, config?: MatSnackBarConfig<any>): MatSnackBarRef<TextOnlySnackBar> {
+    return this.snackBar.open(message, action,config);
+  }
+  dismiss(): void {
+    this.snackBar.dismiss()
+  }
+  private openAlert(message: string, title: string, type: MatecuAlertBoxType, action?: string, config?:MatSnackBarConfig<any> ) {
+
+    const data: MatecuAlertSnackBarData = {
+      message,
+      title,
+      action,
+      type
+    }
+    const dialogConfig = {...config, data}
+    
+    return this.snackBar.openFromComponent(MatecuSnackBarAlertComponent, dialogConfig);
+  }
+
+  private getErrorMessage(err: string | Error ): string {
+    const error = new Error()
+    if (typeof err === 'string') {
+      return err;
+    }
+    if (err instanceof Error) {
+      return err.message;
+    }
+    return '';
+  }
+}

package/src/lib/modules/matecu-alert-box/types/matecu-alert-dialog.ts

@@ -0,0 +1,10 @@
+import { MatecuAlertBoxType } from './matecu-altert-box-type';
+
+export interface MatecuAlertDialogData {
+  message: string;
+  title?: string | null | undefined;
+  action?: string | null | undefined;
+  icon?: boolean | null | undefined;
+  type?: MatecuAlertBoxType | string | null | undefined;
+  dismissText?: string | null | undefined;
+}

package/src/lib/modules/matecu-alert-box/types/matecu-alert-snackbar.ts

@@ -0,0 +1,8 @@
+import { MatecuAlertBoxType } from './matecu-altert-box-type';
+
+export interface MatecuAlertSnackBarData {
+  message: string;
+  title: string;
+  action?: string;
+  type: MatecuAlertBoxType
+}

package/src/lib/modules/matecu-alert-box/types/matecu-altert-box-type.ts

@@ -0,0 +1,6 @@
+export enum MatecuAlertBoxType {
+  warning = 'warning',
+  success = 'success',
+  danger = 'danger',
+  info = 'info',
+}