angular-matecu 4.0.0 → 4.0.2

package/README.md

@@ -159,50 +159,96 @@ El contenido de la página tiene una función que se puede llamar para realizar
 
 Importar módulo o componentes
 
+```
+    // ...
     import { MatecuTopbarLayoutModule } from 'angular-matecu';
-    // o
-    import {MatecuTopbarLayoutComponent} from 'angular-matecu';
-    import {MatecuTopbarHeaderRowComponent} from 'angular-matecu';
-    import {MatecuTopbarHeaderColumnComponent} from 'angular-matecu';
-    import {MatecuTopbarActionComponent} from 'angular-matecu';
-    import {MatecuTopbarSearchComponent} from 'angular-matecu';
-    import {MatecuTopbarFabComponent} from 'angular-matecu';
-    import {MatecuTopbarTitleComponent} from 'angular-matecu';
-    import {MatecuTopbarBodyComponent} from 'angular-matecu';
+    import { MatIconModule } from '@angular/material/icon';
+    import { MatButtonModule } from '@angular/material/button';
+    // Se pueden importar los componentes de forma individual
+    // ...
+    @NgModule({
+
+    declarations: [AppComponent],
+    imports: [
+    // ...
+    MatecuTopbarLayoutModule,
+    MatIconModule,
+    MatButtonModule
+    // ...
+    ],
+    providers: [],
+    bootstrap: [AppComponent],
+    })
+    export class AppModule {}
+```
 
 Agregar a la plantilla de algún componente:
 
 ```
  <matecu-topbar-layout #topbar>
   <matecu-topbar-header-row first-row>
-  <matecu-topbar-header-column left-column>
+    <matecu-topbar-header-column left-column>
       <matecu-topbar-action>
-      <button mat-icon-button><mat-icon>menu</mat-icon></button>
+        <button mat-icon-button><mat-icon>menu</mat-icon></button>
       </matecu-topbar-action>
       <matecu-topbar-fab>
-          <button mat-fab><mat-icon>add</mat-icon></button>
+        <button mat-fab><mat-icon>add</mat-icon></button>
       </matecu-topbar-fab>
       <matecu-topbar-title>Topbar Layout</matecu-topbar-title>
-
-  </matecu-topbar-header-column>
-  <matecu-topbar-header-column right-column>
-      <matecu-topbar-search (valueChange)="searchFunction($event)"></matecu-topbar-search>
+    </matecu-topbar-header-column>
+    <matecu-topbar-header-column right-column>
+      <matecu-topbar-search
+        placeholder="Buscar..."
+        (valueChange)="searchFunction($event)"
+      ></matecu-topbar-search>
       <matecu-topbar-action>
-          <button><mat-icon>more_vert</mat-icon></button>
+        <button mat-icon-button><mat-icon>more_vert</mat-icon></button>
       </matecu-topbar-action>
-  </matecu-topbar-header-column>
+    </matecu-topbar-header-column>
   </matecu-topbar-header-row>
-      <matecu-topbar-body >
-          Contenido de la página
-          .....
-          <button (click)="topbar.scrollTop()">
-              Regresar al inicio
-          </button>
-      </matecu-topbar-body>
-
+  <matecu-topbar-body>
+    Contenido de la página .....
+    <button (click)="topbar.scrollTop()">Regresar al inicio</button>
+  </matecu-topbar-body>
 </matecu-topbar-layout>
+
 ```
 
+Agregar al componente el método para capturar el texto de búsqueda
+
+```
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  searchFunction(searchText: string) {
+    console.log(searchText);
+  }
+
+}
+
+```
+
+Ajustar los colores y los estilos en el archivo de css del componente o el archivo de css global
+
+````
+// global
+:root {
+    // ...
+  --mtb-primary-color: red;
+  // ...
+}
+// en el componente
+:host {
+    // ...
+  --mtb-primary-color: red;
+  // ...
+}
+```
 ## Componentes
 
 ### MatecuTopbarLayout:
@@ -305,3 +351,4 @@ Crea un contenedor para agregar el contenido de la página
 --mtb-body-padding: Padding para el contenido
 --mtb-body-background: Fondo del contenido;
 --mtb-body-padding-button: Padding inferior (Es utilizado para asignar un espacio al Botón principal (FAB) cuando tiene asignados los estilos para dispositivos móviles)
+````

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,26 +1,11 @@
 {
   "name": "angular-matecu",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "peerDependencies": {
-    "@angular/common": "^15.x || ^16.x",
-    "@angular/core": "^15.x || ^16.x",
-    "@angular/material": "^15.x || ^16.x"
+    "@angular/common": "^15.x || ^16.x || ^17.x" ,
+    "@angular/core": "^15.x || ^16.x || ^17.x",
+    "@angular/material": "^15.x || ^16.x || ^17.x"
   },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2022/angular-matecu.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/angular-matecu.mjs",
-      "esm": "./esm2022/angular-matecu.mjs",
-      "default": "./fesm2022/angular-matecu.mjs"
-    }
-  },
-  "sideEffects": false
+  "dependencies": {},
+  "devDependencies": {}
 }

package/src/lib/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/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/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/components/matecu-alert-box/matecu-alert-box.component.ts

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+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'],
+  standalone: true,
+  imports: [CommonModule, MatIconModule]
+})
+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/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/components/matecu-alert-dialog/matecu-alert-dialog.component.scss

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

package/src/lib/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/components/matecu-alert-dialog/matecu-alert-dialog.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatecuAlertDialogData } from '../../types/matecu-alert-dialog';
+import { MatecuAlertBoxComponent } from '../matecu-alert-box/matecu-alert-box.component';
+@Component({
+  selector: 'matecu-alert-dialog',
+  templateUrl: './matecu-alert-dialog.component.html',
+  styleUrls: ['./matecu-alert-dialog.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatIconModule, MatecuAlertBoxComponent, MatButtonModule]
+})
+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/components/matecu-alert-snack-bar/matecu-alert-snack-bar.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/components/matecu-alert-snack-bar/matecu-alert-snack-bar.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/components/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/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, Inject, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBarModule, 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-alert-snack-bar',
+  templateUrl: './matecu-alert-snack-bar.component.html',
+  styleUrls: ['./matecu-alert-snack-bar.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatSnackBarModule]
+})
+export class MatecuAlertSnackBarComponent {
+
+  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<MatecuAlertSnackBarComponent>) {
+    this.title = data.title;
+    this.message = data.message;
+    this.action = data.action;
+    this.color = data.type;
+
+  }
+
+  dismiss(): void {
+    this.snackBarRef.dismissWithAction();
+  }
+
+
+}

package/src/lib/components/matecu-spinner/matecu-spinner.component.css

@@ -0,0 +1,15 @@
+
+.matecu-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    
+}
+.matecu-spinner     > svg {
+    width: 80px;;
+    height: 80px;;
+}
+.matecu-spinner__hidden {
+    display: none;
+}

package/src/lib/components/matecu-spinner/matecu-spinner.component.html

@@ -0,0 +1,35 @@
+<ng-container *ngIf="active">
+    <svg xmlns:svg="http://www.w3.org/2000/svg" [attr.width]="size" [attr.height]="size"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 128 128" xml:space="preserve">
+    <rect x="0" y="0" width="100%" height="100%" fill="transparent" />
+    <g>
+        <path class="matecu-spinner__100" d="M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z" [attr.fill]="color"
+            fill-opacity="1" />
+        <path class="matecu-spinner__30" d="M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z"
+            [attr.fill]="color" fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__40" d="M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z" [attr.fill]="color"
+            fill-opacity="0.4" />
+        <path class="matecu-spinner__50" d="M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z" [attr.fill]="color"
+            fill-opacity="0.5" />
+        <path class="matecu-spinner__60" d="M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z" [attr.fill]="color"
+            fill-opacity="0.6" />
+        <path class="matecu-spinner__70" d="M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z" [attr.fill]="color"
+            fill-opacity="0.7" />
+        <path class="matecu-spinner__80" d="M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z" [attr.fill]="color"
+            fill-opacity="0.8" />
+        <path class="matecu-spinner__90" d="M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z" [attr.fill]="color"
+            fill-opacity="0.9" />
+        <animateTransform attributeName="transform" type="rotate"
+            values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
+            calcMode="discrete" dur="600ms" repeatCount="indefinite"></animateTransform>
+    </g>
+</svg>
+</ng-container>

package/src/lib/components/matecu-spinner/matecu-spinner.component.spec.ts

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