BREAKING drop fixed option

It is no longer possible to force the FAB to stay open at all times

Author: PowerKiKi

README.md

@@ -44,11 +44,10 @@ or adapt the bindings to your needs:
 
 ### eco-fab-speed-dial
 
-BREA| Property    | Type                            | Default | Description                                                                            |
-| ----------- | ------------------------------- | ------- | -------------------------------------------------------------------------------------- |
-| `open`      | `boolean`                       | `false` | Indicates if this FAB Speed Dial is opened                                             |
-| `direction` | `up`, `down`, `left` or `right` | `up`    | The direction to open the action buttons                                               |
-| `fixed`     | `boolean`                       | `false` | Indicates if this FAB Speed Dial is fixed (user cannot change the open state on click) |
+| Property    | Type                            | Default | Description                                |
+| ----------- | ------------------------------- | ------- | ------------------------------------------ |
+| `open`      | `boolean`                       | `false` | Indicates if this FAB Speed Dial is opened |
+| `direction` | `up`, `down`, `left` or `right` | `up`    | The direction to open the action buttons   |
 
 ### eco-fab-speed-dial-trigger
 

projects/fab-speed-dial/src/lib/fab-speed-dial.ts

@@ -151,14 +151,6 @@ export class EcoFabSpeedDialComponent implements OnDestroy {
 
     private documentClickUnlistener: (() => void) | null = null;
 
-    /**
-     * Whether this speed dial is fixed on screen (user cannot change it by clicking)
-     */
-    public readonly fixed = input(false);
-    private readonly processFixed = effect(() => {
-        this.processOutsideClickState();
-    });
-
     /**
      * Whether this speed dial is opened
      */
@@ -197,7 +189,7 @@ export class EcoFabSpeedDialComponent implements OnDestroy {
     }
 
     protected onClick(): void {
-        if (!this.fixed() && this.open()) {
+        if (this.open()) {
             this.open.set(false);
         }
     }
@@ -221,7 +213,7 @@ export class EcoFabSpeedDialComponent implements OnDestroy {
     }
 
     private processOutsideClickState(): void {
-        if (!this.fixed() && this.open()) {
+        if (this.open()) {
             this.setDocumentClickListener();
         } else {
             this.unsetDocumentClickListener();
@@ -261,9 +253,7 @@ export class EcoFabSpeedDialTriggerComponent {
     public readonly spin = input(false);
 
     protected onClick(event: Event): void {
-        if (!this.parent.fixed()) {
-            this.parent.toggle();
-            event.stopPropagation();
-        }
+        this.parent.toggle();
+        event.stopPropagation();
     }
 }

src/app/app.component.html

@@ -23,9 +23,6 @@
                 <mat-radio-button value="right">Right</mat-radio-button>
             </mat-radio-group>
         </p>
-        <p>
-            <mat-slide-toggle [(ngModel)]="fixed">Fixed</mat-slide-toggle>
-        </p>
         <p>
             <mat-slide-toggle [(ngModel)]="spin">Enable Spinning</mat-slide-toggle>
         </p>
@@ -40,7 +37,7 @@
 
         <mat-card-content class="mat-body-1">
             <mat-slide-toggle [(ngModel)]="open" (click)="stopPropagation($event)">Open</mat-slide-toggle>
-            <eco-fab-speed-dial [(open)]="open" [direction]="direction" [fixed]="fixed">
+            <eco-fab-speed-dial [(open)]="open" [direction]="direction">
                 <eco-fab-speed-dial-trigger [spin]="spin">
                     <button mat-fab (click)="doAction('trigger')">
                         <mat-icon class="spin180" fontIcon="add" />
@@ -74,7 +71,7 @@
         </mat-card-header>
 
         <mat-card-content class="mat-body-1">
-            <eco-fab-speed-dial #myFab [direction]="direction" [fixed]="fixed">
+            <eco-fab-speed-dial #myFab [direction]="direction">
                 <eco-fab-speed-dial-trigger [spin]="spin">
                     <button mat-fab (click)="doAction('trigger')">
                         <mat-icon class="spin360" fontIcon="check" />
@@ -94,7 +91,7 @@
                 </eco-fab-speed-dial-actions>
             </eco-fab-speed-dial>
 
-            <eco-fab-speed-dial #myFab2 [direction]="direction" [fixed]="fixed">
+            <eco-fab-speed-dial #myFab2 [direction]="direction">
                 <eco-fab-speed-dial-trigger [spin]="spin">
                     <button mat-fab (click)="doAction('trigger')">
                         <mat-icon class="spin360" fontIcon="check" />
@@ -120,7 +117,7 @@
                 </eco-fab-speed-dial-actions>
             </eco-fab-speed-dial>
 
-            <eco-fab-speed-dial #myFab3 [direction]="direction" [fixed]="fixed">
+            <eco-fab-speed-dial #myFab3 [direction]="direction">
                 <eco-fab-speed-dial-trigger [spin]="spin">
                     <button mat-fab (click)="doAction('trigger')">
                         <mat-icon class="spin360" fontIcon="check" />

src/app/app.component.ts

@@ -31,23 +31,10 @@ import {MatToolbarModule} from '@angular/material/toolbar';
     ],
 })
 export class AppComponent {
-    private _fixed = false;
-
     public open = false;
     public spin = false;
     public direction: Direction = 'up';
 
-    public get fixed(): boolean {
-        return this._fixed;
-    }
-
-    public set fixed(fixed: boolean) {
-        this._fixed = fixed;
-        if (this._fixed) {
-            this.open = true;
-        }
-    }
-
     public stopPropagation(event: Event): void {
         // Prevent the click to propagate to document and trigger
         // the FAB to be closed automatically right before we toggle it ourselves