128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
141 | `,
142 | imports: [EcoFabSpeedDialActionsComponent, EcoFabSpeedDialTriggerComponent, EcoFabSpeedDialComponent],
143 | })
144 | class TestAppComponent {
145 | public readonly fabActions = viewChild.required(EcoFabSpeedDialActionsComponent);
146 | public readonly fabSpeedDial = viewChild.required(EcoFabSpeedDialComponent);
147 | public direction: Direction = 'up';
148 | public open = false;
149 | }
150 |
--------------------------------------------------------------------------------
/projects/fab-speed-dial/src/lib/fab-speed-dial.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | computed,
4 | contentChild,
5 | contentChildren,
6 | effect,
7 | ElementRef,
8 | inject,
9 | input,
10 | model,
11 | OnDestroy,
12 | output,
13 | Renderer2,
14 | ViewEncapsulation,
15 | } from '@angular/core';
16 | import {MatMiniFabAnchor, MatMiniFabButton} from '@angular/material/button';
17 | import {DOCUMENT} from '@angular/common';
18 | import {forkJoin, fromEvent, Subscription} from 'rxjs';
19 | import {take} from 'rxjs/operators';
20 |
21 | const Z_INDEX_ITEM = 23;
22 |
23 | export type Direction = 'up' | 'down' | 'left' | 'right';
24 |
25 | type MiniFab = MatMiniFabButton | MatMiniFabAnchor;
26 |
27 | function getHostElement(miniFab: MiniFab): HTMLButtonElement | HTMLAnchorElement {
28 | return miniFab._elementRef.nativeElement;
29 | }
30 |
31 | @Component({
32 | selector: 'eco-fab-speed-dial-actions',
33 | template: `@if (miniFabVisible) {
34 | Test element
140 |
135 |
138 | `,
139 | styleUrl: './fab-speed-dial.scss',
140 | // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation
141 | encapsulation: ViewEncapsulation.None,
142 | host: {
143 | '[class.eco-opened]': 'open()',
144 | '(click)': 'onClick()',
145 | },
146 | })
147 | export class EcoFabSpeedDialComponent implements OnDestroy {
148 | private readonly elementRef = inject
GitHub
8 |
18 | Direction:
19 |
27 |
33 |
34 |
35 | Click me
36 |
37 |
38 |
39 | Open
40 |
41 |
42 |
45 |
46 |
47 |
48 |
51 |
54 |
57 |
58 |
61 |
62 |
63 |
64 |
65 |
69 |
70 | Hover me
71 |
72 |
73 |
74 |
75 |
76 |
79 |
80 |
81 |
82 |
85 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
99 |
100 |
101 |
102 |
105 |
108 |
111 |
114 |
117 |
118 |
119 |
120 |
121 |
122 |
125 |
126 |
127 |
128 |
131 |
134 |
137 |
140 |
143 |
146 |
149 |
152 |
155 |
158 |
161 |
164 |
167 |
170 |
173 |
174 |
175 |
176 |
177 |
178 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | mat-card {
2 | margin: 15px;
3 | }
4 |
5 | .container-fab-demo {
6 | width: 100%;
7 | display: flex;
8 | flex-direction: row;
9 | flex-wrap: wrap;
10 | justify-content: flex-start;
11 | align-content: flex-start;
12 | align-items: flex-start;
13 |
14 | & mat-card {
15 | height: 300px;
16 | padding: 20px;
17 | flex-grow: 1;
18 | flex-shrink: 0;
19 | flex-basis: 300px;
20 | }
21 | }
22 |
23 | .example-spacer {
24 | flex: 1 1 auto;
25 | }
26 |
27 | .github-logo {
28 | height: 26px;
29 | margin: 0 4px 3px 0;
30 | vertical-align: middle;
31 | }
32 |
33 | eco-fab-speed-dial {
34 | margin: 1em;
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import {TestBed} from '@angular/core/testing';
2 | import {AppComponent} from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async () => {
6 | await TestBed.configureTestingModule({
7 | imports: [AppComponent],
8 | }).compileComponents();
9 | });
10 |
11 | it('should create the app', () => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.componentInstance;
14 | expect(app).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | import {
3 | Direction,
4 | EcoFabSpeedDialActionsComponent,
5 | EcoFabSpeedDialComponent,
6 | EcoFabSpeedDialTriggerComponent,
7 | } from '@ecodev/fab-speed-dial';
8 | import {MatIconModule} from '@angular/material/icon';
9 | import {MatSlideToggleModule} from '@angular/material/slide-toggle';
10 | import {FormsModule} from '@angular/forms';
11 | import {MatRadioModule} from '@angular/material/radio';
12 | import {MatCardModule} from '@angular/material/card';
13 | import {MatButtonModule} from '@angular/material/button';
14 | import {MatToolbarModule} from '@angular/material/toolbar';
15 |
16 | @Component({
17 | selector: 'app-root',
18 | templateUrl: './app.component.html',
19 | styleUrl: './app.component.scss',
20 | imports: [
21 | MatToolbarModule,
22 | MatButtonModule,
23 | MatCardModule,
24 | MatRadioModule,
25 | FormsModule,
26 | MatSlideToggleModule,
27 | MatIconModule,
28 | EcoFabSpeedDialComponent,
29 | EcoFabSpeedDialTriggerComponent,
30 | EcoFabSpeedDialActionsComponent,
31 | ],
32 | })
33 | export class AppComponent {
34 | public open = false;
35 | public spin = false;
36 | public direction: Direction = 'up';
37 |
38 | public stopPropagation(event: Event): void {
39 | // Prevent the click to propagate to document and trigger
40 | // the FAB to be closed automatically right before we toggle it ourselves
41 | event.stopPropagation();
42 | }
43 |
44 | public doAction(event: string): void {
45 | console.log(event);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/app.config.ts:
--------------------------------------------------------------------------------
1 | import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
2 |
3 | export const appConfig: ApplicationConfig = {
4 | providers: [provideZoneChangeDetection({eventCoalescing: true})],
5 | };
6 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |