@cauca-911/material 21.0.1-beta.3 → 21.0.1-beta.5

package/.eslintrc.json

@@ -0,0 +1,79 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*",
+    "**/*.spec.ts",
+    "**/test.ts",
+    "build/**/*",
+    "dist/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/cauca-material/tsconfig.lib.json"
+        ]
+      },
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "cauca",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/prefer-standalone": "off",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "error",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/member-ordering": [
+          "error", {
+            "default": [
+              "signature",
+              "public-field",
+              "protected-field",
+              "private-field",
+              ["get", "set"],
+              "constructor",
+              "public-method",
+              "protected-method",
+              "private-method"
+            ]
+          }
+        ],
+        "brace-style": [
+          "error",
+          "1tbs"
+        ],
+        "id-blacklist": "off",
+        "id-match": "off",
+        "no-underscore-dangle": "off",
+        "@angular-eslint/prefer-inject": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/README_PACKAGE.md

@@ -0,0 +1,5 @@
+# @cauca-911/material
+
+Run `npm install @cauca-911/material --save` to add this library to your project
+
+## To use this library, you need to import the module with specific configuration

package/karma.conf.js

@@ -0,0 +1,50 @@
+// 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: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageReporter: {
+      dir: 'build/reports/coverage',
+      reporters: [
+          { type: 'html', subdir: 'report-html' },
+          { type: 'lcov', subdir: 'report-lcov' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml', 'coverage'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+          base: 'ChromeHeadless',
+          flags: [
+              '--no-sandbox',
+              '--disable-setuid-sandbox',
+              '--disable-extensions',
+              '--disable-web-security',
+              '--disable-gpu',
+              '--no-proxy-server'
+          ]
+      }
+    },
+    singleRun: false,
+    restartOnFileChange: true,
+    captureTimeout: 120000,
+    browserDisconnectTimeout: 20000,
+    browserNoActivityTimeout: 120000,
+  });
+};

package/ng-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cauca-911/material",
-  "version": "21.0.1-beta.3",
+  "version": "21.0.1-beta.5",
   "peerDependencies": {
     "@angular/common": ">=21.2.0",
     "@angular/core": ">=21.2.0",
@@ -20,20 +20,5 @@
     "cauca-material",
     "cauca-911/material",
     "material"
-  ],
-  "module": "fesm2022/cauca-911-material.mjs",
-  "typings": "types/cauca-911-material.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/cauca-911-material.d.ts",
-      "default": "./fesm2022/cauca-911-material.mjs"
-    }
-  },
-  "sideEffects": false,
-  "scripts": {
-    "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled in full compilation mode. This is not allowed.\\nPlease delete and rebuild the package with partial compilation mode, before attempting to publish.\\n')\" && exit 1"
-  }
+  ]
 }

package/src/assets/i18n/cauca/en-material.json

@@ -0,0 +1,104 @@
+{
+    "material": {
+        "ok": "Ok",
+        "apply": "Apply",
+        "cancel": "Cancel",
+        "clear": "Clear",
+        "description": "The \"@cauca-911/material\" library add many visual component",
+        "select": "Select",
+        "dialogTitle": "Data acquisition",
+        "dialogMessage": "Data acquisition in progress <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+        "version": "Version",
+        "refresh": "Refresh"
+    },
+    "ok": "Ok",
+    "apply": "Apply",
+    "cancel": "Cancel",
+    "clear": "Clear",
+    "description": "The \"@cauca-911/material\" library add many visual component",
+    "select": "Select",
+    "dialogTitle": "Data acquisition",
+    "dialogMessage": "Data acquisition in progress <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+    "version": "Version",
+    "refresh": "Refresh",
+    "close": "Close",
+    "copyLink": "Copy link",
+    "logout": "Logout",
+    "search": "Search",
+    "en": "English",
+    "fr": "French",
+    "or": "OR",
+    "errorTitle": "Error",
+    "edit": "Edit",
+    "delete": "Delete",
+    "save": "Save",
+    "yes": "Yes",
+    "no": "No",
+    "dateRangeSelectorLabel": "Dates",
+    "errorDialog": {
+        "titleError": "Deletion Error",
+        "messageError": "An error occurred while deleting \"{{itemName}}\". Please try again later."
+    },
+  "savingSuccessNotification": {
+    "title": "Saving",
+    "message": "The save was successful."
+  },
+    "deleteDialog": {
+        "titleFemale": "Delete {{itemType}}",
+        "titleMale": "Delete {{itemType}}",
+        "message": "Are you sure you want to delete \"{{itemName}}\"?",
+        "titleError": "Unable to delete",
+        "messageError": "An error occurred while deleting the item \"{{itemName}}\""
+    },
+    "cancelEditionDialog": {
+        "title": "Cancel confirmation",
+        "message": "You have unsaved changes, are you sure you want to undo them ?"
+    },
+    "validationErrorDialog": {
+        "title": "Invalid data",
+        "message": "You cannot save because you have invalid information.",
+        "messageNext": "You cannot continue because you have invalid information."
+    },
+    "alertDialog": {
+        "errorTitle": "Error",
+        "noResult": "No results",
+        "deleteErrorMessage": "An error has occured while deleting item, please try again.",
+        "genericErrorMessage": "An error has occured, please try again.",
+        "saveErrorMessage": "An error has occured while saving data, please try again.",
+        "loadErrorMessage": "An error has occured while loading data, please try again."
+    },
+    "generalError": {
+        "errorAlertTitle": "Error",
+        "loadingErrorAlertTitle": "Loading error",
+        "loadingErrorAlertMessage": "An alert has occured while loading date.  Please try again.",
+        "savingErrorAlertTitle": "Saving error",
+        "savingErrorAlertMessage": "An alert has occured while saving date.  Please try again.",
+        "retryButtonLabel": "Retry"
+    },
+    "error": {
+        "requiredField": "Required field.",
+        "maxLength": "Value must have less than {{value}} characters.",
+        "valueMin": "Value below minimum",
+        "valueMax": "Value over maximum",
+        "invalidEmail": "Invalid email",
+        "invalidPhoneNumber": "Invalid phone number",
+        "min": "Minimum value: {{value}}",
+        "max": "Maximum value: {{value}}",
+        "length": "Length must not exceed {{value}} characters.",
+        "identicalPassword": "Same passwords",
+        "minimumCharacters": "Minimum 13 characters",
+        "minimumNumeric": "Minimum 1 numbers (0-9)",
+        "minimumSpecialCharacter": "Minimum 1 special character (!, @, $, ...)",
+        "minimumUpperAndLowercase": "Minimum 1 uppercase et 1 lowercase (A, z)"
+    },
+    "passwordEdition" : {
+        "passwordSelection": "Please choose a password.",
+        "password": "Password",
+        "passwordConfirmation": "Password confirmation",
+        "minimumCharacters": "Minimum 13 characters",
+        "minimumOneNumeric": "Minimum 1 number (0-9)",
+        "minimumOneSpecialCharacter": "Minimum 1 special character (!, @, $, etc.)",
+        "needLowerAndUppercase": "Minimum 1 uppercase and 1 lowercase (A, z)",
+        "equalPasswords": "Same passwords"
+    }
+}

package/src/assets/i18n/cauca/es-material.json

@@ -0,0 +1,104 @@
+{
+    "material": {
+        "ok": "Ok",
+        "apply": "Aplicar",
+        "cancel": "Cancelar",
+        "clear": "Claro",
+        "description": "La librería \"@cauca-911/material\" agrega componentes basados ​​en @angular/material",
+        "select": "Para seleccionar",
+        "dialogTitle": "Adquisición de datos",
+        "dialogMessage": "Adquisición de datos en curso <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+        "version": "Versión",
+        "refresh": "Actualizar"
+    },
+    "ok": "Ok",
+    "apply": "Aplicar",
+    "cancel": "Cancelar",
+    "clear": "Claro",
+    "description": "La librería \"@cauca-911/material\" agrega muchos componentes visuales",
+    "select": "Seleccionar",
+    "dialogTitle": "Adquisición de datos",
+    "dialogMessage": "Adquisición de datos en curso <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+    "version": "Versión",
+    "refresh": "Actualizar",
+    "close": "Cerrar",
+    "copyLink": "Copiar enlace",
+    "logout": "Cerrar sesión",
+    "search": "Buscar",
+    "en": "Inglés",
+    "fr": "Francés",
+    "or": "O",
+    "errorTitle": "Error",
+    "edit": "Editar",
+    "delete": "Eliminar",
+    "save": "Guardar",
+    "yes": "Sí",
+    "no": "No",
+    "dateRangeSelectorLabel": "Fechas",
+    "errorDialog": {
+        "titleError": "Error al eliminar",
+        "messageError": "Ocurrió un error al eliminar \"{{itemName}}\". Por favor, inténtalo de nuevo más tarde."
+    },
+    "savingSuccessNotification": {
+        "title": "Guardando",
+        "message": "El guardado fue exitoso."
+    },
+    "deleteDialog": {
+        "titleFemale": "Eliminar {{itemType}}",
+        "titleMale": "Eliminar {{itemType}}",
+        "message": "¿Está seguro que desea eliminar \"{{itemName}}\"?",
+        "titleError": "No se puede eliminar",
+        "messageError": "Ocurrió un error al eliminar el elemento \"{{itemName}}\""
+    },
+    "cancelEditionDialog": {
+        "title": "Confirmación de cancelación",
+        "message": "Tiene cambios sin guardar, ¿está seguro que desea deshacerlos?"
+    },
+    "validationErrorDialog": {
+        "title": "Datos inválidos",
+        "message": "No puede guardar porque tiene información inválida.",
+        "messageNext": "No puede continuar porque tiene información inválida."
+    },
+    "alertDialog": {
+        "errorTitle": "Error",
+        "noResult": "Sin resultados",
+        "deleteErrorMessage": "Ocurrió un error al eliminar el elemento, por favor intente de nuevo.",
+        "genericErrorMessage": "Ocurrió un error, por favor intente de nuevo.",
+        "saveErrorMessage": "Ocurrió un error al guardar los datos, por favor intente de nuevo.",
+        "loadErrorMessage": "Ocurrió un error al cargar los datos, por favor intente de nuevo."
+    },
+    "generalError": {
+        "errorAlertTitle": "Error",
+        "loadingErrorAlertTitle": "Error al cargar",
+        "loadingErrorAlertMessage": "Ocurrió una alerta al cargar los datos. Por favor intente de nuevo.",
+        "savingErrorAlertTitle": "Error al guardar",
+        "savingErrorAlertMessage": "Ocurrió una alerta al guardar los datos. Por favor intente de nuevo.",
+        "retryButtonLabel": "Reintentar"
+    },
+    "error": {
+        "requiredField": "Campo obligatorio.",
+        "maxLength": "El valor debe tener menos de {{value}} caracteres.",
+        "valueMin": "Valor por debajo del mínimo",
+        "valueMax": "Valor por encima del máximo",
+        "invalidEmail": "Correo electrónico inválido",
+        "invalidPhoneNumber": "Número de teléfono inválido",
+        "min": "Valor mínimo: {{value}}",
+        "max": "Valor máximo: {{value}}",
+        "length": "La longitud no debe exceder {{value}} caracteres.",
+        "identicalPassword": "Contraseñas iguales",
+        "minimumCharacters": "Mínimo 13 caracteres",
+        "minimumNumeric": "Mínimo 1 número (0-9)",
+        "minimumSpecialCharacter": "Mínimo 1 carácter especial (!, @, $, ...)",
+        "minimumUpperAndLowercase": "Mínimo 1 mayúscula y 1 minúscula (A, z)"
+    },
+    "passwordEdition": {
+        "passwordSelection": "Por favor, elija una contraseña.",
+        "password": "Contraseña",
+        "passwordConfirmation": "Confirmación de contraseña",
+        "minimumCharacters": "Mínimo 13 caracteres",
+        "minimumOneNumeric": "Mínimo 1 número (0-9)",
+        "minimumOneSpecialCharacter": "Mínimo 1 carácter especial (!, @, $, etc.)",
+        "needLowerAndUppercase": "Mínimo 1 mayúscula y 1 minúscula (A, z)",
+        "equalPasswords": "Contraseñas iguales"
+    }
+}

package/src/assets/i18n/cauca/fr-material.json

@@ -0,0 +1,106 @@
+{
+    "material": {
+        "ok": "Ok",
+        "apply": "Appliquer",
+        "cancel": "Annuler",
+        "clear": "Vider",
+        "description": "La librairie \"@cauca-911/material\" ajoute des composants basé sur @angular/material",
+        "select": "Sélectionner",
+        "dialogTitle": "Acquisition des données",
+        "dialogMessage": "Acquisition des données en cours <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+        "version": "Version",
+        "refresh": "Rafraîchir"
+    },
+    "ok": "Ok",
+    "apply": "Appliquer",
+    "cancel": "Annuler",
+    "clear": "Vider",
+    "description": "La librairie \"@cauca-911/material\" ajoute des composants basé sur @angular/material",
+    "select": "Sélectionner",
+    "dialogTitle": "Acquisition des données",
+    "dialogMessage": "Acquisition des données en cours <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+    "version": "Version",
+    "refresh": "Rafraîchir",
+    "errorTitle": "Erreur",
+    "edit": "Éditer",
+    "delete": "Supprimer",
+    "save": "Sauvegarder",
+    "yes": "Oui",
+    "no": "Non",
+    "close": "Fermer",
+    "copyLink": "Copier le lien",
+    "logout": "Déconnexion",
+    "search": "Rechercher",
+    "en": "Anglais",
+    "fr": "Français",
+    "es": "Espagnol",
+    "or": "OU",
+    "dateRangeSelectorLabel": "Dates",
+    "errorDialog": {
+        "titleError": "Erreur de suppression",
+        "messageError": "Une erreur est survenue lors de la suppression de \"{{itemName}}\". Veuillez réessayer plus tard."
+    },
+    "deleteDialog": {
+        "titleFemale": "Supprimer une {{itemType}}",
+        "titleMale": "Supprimer un {{itemType}}",
+        "message": "Êtes-vous sûr de vouloir supprimer l'élément \"{{itemName}}\" ?",
+        "titleError": "Erreur de suppression",
+        "messageError": "Une erreur s'est produite lors de la suppression de l'élément \"{{itemName}}\"."
+    },
+    "cancelEditionDialog": {
+        "title": "Confirmation d'annulation",
+        "message": "Vous avez des changements non sauvegardés, êtes-vous sûr de vouloir les annuler ?"
+    },
+    "validationErrorDialog": {
+        "title": "Données invalides",
+        "message": "Vous ne pouvez sauvegarder parce que vous avez des informations invalides.",
+        "messageNext": "Vous ne pouvez continuer parce que vous avez des informations invalides."
+    },
+    "alertDialog": {
+        "errorTitle": "Erreur",
+        "noResult": "Aucun résultat",
+        "genericErrorMessage": "Une erreur s'est produite, veuillez réessayer.",
+        "saveErrorMessage": "Une erreur s'est produite lors de la sauvegarde, veuillez réessayer.",
+        "loadErrorMessage": "Une erreur s'est produite lors du chargement, veuillez réessayer.",
+        "deleteErrorMessage": "Une erreur s'est produite lors de la suppression, veuillez réessayer.",
+        "creationErrorMessage": "Une erreur s'est produite lors de la création du fichier, veuillez réessayer."
+    },
+  "savingSuccessNotification": {
+    "title": "Sauvegarde",
+    "message": "La sauvegarde s'est effectuée avec succès."
+  },
+    "generalError": {
+        "errorAlertTitle": "Erreur",
+        "loadingErrorAlertTitle": "Erreur de chargement",
+        "loadingErrorAlertMessage": "Une erreur s'est produite pendant le chargement, veuillez réessayer.",
+        "savingErrorAlertTitle": "Erreur de sauvegarde",
+        "savingErrorAlertMessage": "Une erreur s'est produite pendant la sauvegarde, veuillez réessayer.",
+        "retryButtonLabel": "Réessayer"
+    },
+    "error": {
+        "requiredField": "Ce champ est obligatoire.",
+        "maxLength": "Ce champ doit avoir moins de {{value}} caractères.",
+        "valueMin": "Valeur sous minimum",
+        "valueMax": "Valeur au dessus maximum",
+        "invalidEmail": "Le courriel entré n'est pas valide",
+        "invalidPhoneNumber": "Le téléphone n'est pas valide",
+        "min": "Valeur minimale: {{value}}",
+        "max": "Valeur maximale: {{value}}",
+        "minimumCharacters": "Minimum 13 caractères",
+        "minimumNumeric": "Minimum 1 chiffre (0-9)",
+        "minimumSpecialCharacter": "Minimum 1 caractère spécial (!, @, $, ...)",
+        "minimumUpperAndLowercase": "Minimum 1 majuscule et 1 minuscule (A, z)",
+        "identicalPassword": "Mots de passe identiques",
+        "length": "La longueur ne doit pas dépasser {{value}} caractères."
+    },
+    "passwordEdition" : {
+        "passwordSelection": "Veuillez choisir un mot de passe.",
+        "password": "Mot de passe",
+        "passwordConfirmation": "Confirmation du mot de passe",
+        "minimumCharacters": "Minimum 13 caractères",
+        "minimumOneNumeric": "Minimum 1 chiffre (0-9)",
+        "minimumOneSpecialCharacter": "Minimum 1 caractère spécial (!, @, $, etc.)",
+        "needLowerAndUppercase": "Minimum 1 majuscule et 1 minuscule (A, z)",
+        "equalPasswords": "Mots de passe identiques"
+    }
+}

package/src/lib/cauca-material.component.html

@@ -0,0 +1 @@
+<div>{{'core.noGenericComponentOnThisLibrary' | translate}}</div>

package/src/lib/cauca-material.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { CaucaMaterialComponent } from './cauca-material.component';
+
+describe('CaucaMaterialComponent', () => {
+  let component: CaucaMaterialComponent;
+  let fixture: ComponentFixture<CaucaMaterialComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        CaucaMaterialComponent,
+        TranslateModule.forRoot()
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaMaterialComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/cauca-material.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-material',
+    templateUrl: './cauca-material.component.html',
+    styles: [],
+    imports: [TranslateModule]
+})
+export class CaucaMaterialComponent {
+
+}

package/src/lib/cauca-material.service.spec.ts

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

package/src/lib/cauca-material.service.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CaucaMaterialService {
+}

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

@@ -0,0 +1,52 @@
+@if (type() === 'basic') {
+  <button [ngClass]="class()" mat-button (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-basic">
+    @if (inProgress() || icon()) {
+      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
+    }
+    <span>{{label()}}</span>
+  </button>
+}
+
+@if (type() === 'raised') {
+  <button [ngClass]="class()" matButton="elevated" (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-raised">
+    @if (inProgress() || icon()) {
+      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
+    }
+    <span>{{label()}}</span>
+  </button>
+}
+
+@if (type() === 'stroked') {
+  <button [ngClass]="class()" matButton="outlined" (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-stroked">
+    @if (inProgress() || icon()) {
+      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
+    }
+    <span>{{label()}}</span>
+  </button>
+}
+
+@if (type() === 'flat') {
+  <button [ngClass]="class()" matButton="filled" (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-flat">
+    @if (inProgress() || icon()) {
+      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
+    }
+    <span>{{label()}}</span>
+  </button>
+}
+
+@if (type() === 'icon') {
+  <button [ngClass]="class()" matIconButton (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-icon">
+    @if (inProgress() || icon()) {
+      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
+    }
+  </button>
+}
+
+@if (type() === 'fab') {
+  <button [ngClass]="class()" matFab (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-icon">
+    @if (inProgress() || icon()) {
+      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
+    }
+    <span>{{label()}}</span>
+  </button>
+}

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

@@ -0,0 +1,6 @@
+@keyframes spinner {
+    to { transform: rotate(360deg); }
+}
+.button-spin {
+    animation: spinner 1s linear infinite;
+}