Floating Action Button

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attus/elements",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "peerDependencies": {
     "@angular/common": "^11.0",
     "@angular/core": "^11.0"

src/lib/components/fab/fab.component.html

@@ -0,0 +1,8 @@
+<div class="fab-button-content">
+  <span class="label">
+    <ng-content></ng-content>
+  </span>
+</div>
+
+<div matRipple class="fab-button-ripple">
+</div>

src/lib/components/fab/fab.component.scss

@@ -0,0 +1,46 @@
+:host {
+  .fab-button-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .fab-button-content {
+    span {
+      &.label {
+        ::ng-deep mat-icon {
+          vertical-align: middle;
+          margin-right: 0.75rem;
+        }
+      }
+    }
+  }
+}
+
+:host(.mat-raised-button) {
+  padding: 0.375rem 1.25rem 0.375rem 0.75rem;
+  border-radius: 1.5rem;
+  position: relative;
+  top: -0.75rem;
+  left: 1.5rem;
+  &.attus-fab-mobile {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    top: auto;
+    left: auto;
+    padding-right: 0.75rem;
+    min-width: 0;
+    span {
+      &.label {
+        display: block;
+        width: 1.5rem;
+        overflow: hidden;
+        ::ng-deep mat-icon {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}

src/lib/components/fab/fab.component.spec.ts

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

src/lib/components/fab/fab.component.ts

@@ -0,0 +1,53 @@
+/**
+ * @file Floating Action Button
+ * 
+ * @author Attila Németh
+ * @date 04.01.2021
+ */
+
+import {Component, Input, HostBinding} from '@angular/core';
+
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+
+@Component({
+  selector: '[attus-fab-button]',
+  templateUrl: './fab.component.html',
+  styleUrls: ['./fab.component.scss']
+})
+export class AttusElementsFabComponent {
+
+  @HostBinding('class') elementClass: string = 'mat-raised-button';
+  isMobile: boolean = true
+  @Input() set color(color: string) {
+    this.colorString = color;
+    this.updateElementClass();
+  }
+  colorString: string = null
+
+  constructor(breakpointObserver: BreakpointObserver) {
+    breakpointObserver.observe([Breakpoints.Handset]).subscribe(status => {
+      if (status.matches) {
+        this.isMobile = true;
+      }
+      else {
+        this.isMobile = false;
+      }
+      this.updateElementClass();
+    });
+  }
+
+  private updateElementClass(): void {
+    let classes: Array<string> = [
+      'attus-fab-button',
+      'mat-raised-button',
+      'mat-focus-indicator',
+      'mat-button-base',
+      'mat-' + this.colorString,
+    ];
+    if (this.isMobile) {
+      classes.push('attus-fab-mobile');
+    }
+    this.elementClass = classes.join(' ');
+  }
+
+}

src/lib/elements.module.ts

@@ -6,21 +6,25 @@ import { BrowserModule } from '@angular/platform-browser';
 import {MatInputModule} from '@angular/material/input';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
+import {MatRippleModule} from '@angular/material/core';
 
 import { AttusElementsLoginDialogComponent } from './components/login/login.component';
 import { AttusElementsConfirmDialogComponent } from './components/confirm/confirm.component';
+import { AttusElementsFabComponent } from './components/fab/fab.component';
 
 @NgModule({
   declarations: [
     AttusElementsLoginDialogComponent,
     AttusElementsConfirmDialogComponent,
+    AttusElementsFabComponent,
   ],
   imports: [
     CommonModule,
     ReactiveFormsModule,
     MatInputModule,
     MatDialogModule,
     MatButtonModule,
+    MatRippleModule,
   ],
   exports: [
     AttusElementsLoginDialogComponent