feat(lib): implemented mat-mini-fab-menu component

Author: AnthonyNahas

projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module.ts

@@ -5,9 +5,10 @@ import {MatIconModule} from '@angular/material/icon';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatButtonModule} from '@angular/material/button';
+import {MatMiniFabMenuComponent} from './mat-mini-fab-menu/mat-mini-fab-menu.component';
 
 @NgModule({
-  declarations: [MatFabMenuComponent],
+  declarations: [MatFabMenuComponent, MatMiniFabMenuComponent, MatMiniFabMenuComponent],
   imports: [
     CommonModule,
     MatButtonModule,

projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.html

@@ -0,0 +1,28 @@
+<div [fxLayout]="layout" class="container" fxLayoutAlign="center center" fxLayoutGap="16px">
+  <div fxLayoutAlign="center">
+    <button (click)="isActive = !isActive"
+            [color]="color" [disabled]="disabled"
+            type="button"
+            [ngClass]="{
+    'mat-fab' : !isActive,
+    'mat-mini-fab' : isActive
+  }"
+            mat-mini-fab>
+      <mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
+    </button>
+  </div>
+  <div *ngIf="isActive" [@fabsStagger]="fabButtons.length"
+       [fxLayout]="layout2" fxLayoutAlign="center center" fxLayoutGap="16px">
+    <button (click)="selectFabMenu(fab)"
+            *ngFor="let fab of fabButtons"
+            [color]="fab?.color"
+            [matTooltip]="fab?.tooltip"
+            [matTooltipPosition]="fab?.tooltipPosition"
+            [ngClass]="{'fullSVG' : fab?.imgUrl}"
+            type="button"
+            mat-fab>
+      <mat-icon *ngIf="fab?.icon" [color]="fab?.iconColor">{{fab?.icon}}</mat-icon>
+      <img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon">
+    </button>
+  </div>
+</div>

projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.scss

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+}
+
+.fullSVG {
+  img {
+    width: 100%;
+  }
+
+  ::ng-deep span.mat-button-wrapper {
+    padding: 0;
+  }
+}
+
+.container {
+  //position: fixed;
+  //bottom: 15px;
+  //right: 15px;
+  //z-index: 100;
+
+  > div {
+    //display: flex;
+    //flex-direction: column-reverse;
+    //align-items: center;
+    margin-bottom: 5px;
+
+    button {
+      margin-bottom: 16px;
+    }
+  }
+}

projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.spec.ts

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

projects/angular-material-extensions/fab-menu/src/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import {MatFabMenuComponent} from '../mat-fab-menu.component';
+
+@Component({
+  selector: 'mat-mini-fab-menu',
+  templateUrl: './mat-mini-fab-menu.component.html',
+  styleUrls: ['./mat-mini-fab-menu.component.scss']
+})
+export class MatMiniFabMenuComponent extends MatFabMenuComponent{
+
+}

projects/angular-material-extensions/fab-menu/src/public-api.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './lib/mat-fab-menu.component';
+export * from './lib/mat-mini-fab-menu/mat-mini-fab-menu.component';
 export * from './lib/mat-fab-menu.module';