@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
70 lines • 12 kB
JavaScript
import { animate, query, stagger, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, HostListener, inject, Input, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { FloatingActionButtonComponent } from './floating-action-button.component';
import { FloatingActionButtonsService } from './floating-action-buttons.service';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class FloatingActionButtonsComponent {
/** Specify the direction that the FAB should display */
set direction(direction) { this.fab.direction$.next(direction); }
constructor() {
this.fab = inject(FloatingActionButtonsService);
this._elementRef = inject(ElementRef);
/** Emit whenever the open state changes */
this.openChange = new EventEmitter();
this._subscription = new Subscription();
this._subscription.add(this.fab.open$.subscribe(value => this.openChange.emit(value)));
}
ngAfterViewInit() {
this.fab.setButtons(this.buttons);
}
ngOnDestroy() {
this._subscription.unsubscribe();
}
/*
* Detect any clicks to trigger close of the menu
*/
close(target) {
if (!this._elementRef.nativeElement.contains(target)) {
this.fab.close();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FloatingActionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: FloatingActionButtonsComponent, selector: "ux-floating-action-buttons", inputs: { direction: "direction" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:click": "close($event.target)" } }, providers: [FloatingActionButtonsService], queries: [{ propertyName: "buttons", predicate: FloatingActionButtonComponent }], ngImport: i0, template: "<ng-content select=\"[fab-primary]\"></ng-content>\n\n@if (fab.open$ | async) {\n <div class=\"floating-action-button-list\" [@fabAnimation]=\"fab.open$ | async\" [ngClass]=\"fab.direction$ | async\">\n <ng-content></ng-content>\n </div>\n}", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
trigger('fabAnimation', [
transition('void => true', [
query('ux-floating-action-button', style({ opacity: 0 })),
query('ux-floating-action-button', stagger(50, animate(250, style({ opacity: 1 }))))
]),
transition('true => void', [
query('ux-floating-action-button', stagger(-50, animate(250, style({ opacity: 0 }))))
])
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FloatingActionButtonsComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-floating-action-buttons', providers: [FloatingActionButtonsService], changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, animations: [
trigger('fabAnimation', [
transition('void => true', [
query('ux-floating-action-button', style({ opacity: 0 })),
query('ux-floating-action-button', stagger(50, animate(250, style({ opacity: 1 }))))
]),
transition('true => void', [
query('ux-floating-action-button', stagger(-50, animate(250, style({ opacity: 0 }))))
])
])
], template: "<ng-content select=\"[fab-primary]\"></ng-content>\n\n@if (fab.open$ | async) {\n <div class=\"floating-action-button-list\" [@fabAnimation]=\"fab.open$ | async\" [ngClass]=\"fab.direction$ | async\">\n <ng-content></ng-content>\n </div>\n}" }]
}], ctorParameters: () => [], propDecorators: { direction: [{
type: Input
}], openChange: [{
type: Output
}], buttons: [{
type: ContentChildren,
args: [FloatingActionButtonComponent]
}], close: [{
type: HostListener,
args: ['document:click', ['$event.target']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMvZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMvZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUYsT0FBTyxFQUFpQix1QkFBdUIsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3hMLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEMsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDbkYsT0FBTyxFQUFpQyw0QkFBNEIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7QUFvQmhILE1BQU0sT0FBTyw4QkFBOEI7SUFLdkMsd0RBQXdEO0lBQ3hELElBQWEsU0FBUyxDQUFDLFNBQXdDLElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQVV6RztRQWZTLFFBQUcsR0FBRyxNQUFNLENBQUMsNEJBQTRCLENBQUMsQ0FBQztRQUVuQyxnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUtsRCwyQ0FBMkM7UUFDakMsZUFBVSxHQUFH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IHN0YWdnZXIsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBDb250ZW50Q2hpbGRyZW4sIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCwgUXVlcnlMaXN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEZsb2F0aW5nQWN0aW9uQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi9mbG9hdGluZy1hY3Rpb24tYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGbG9hdGluZ0FjdGlvbkJ1dHRvbkRpcmVjdGlvbiwgRmxvYXRpbmdBY3Rpb25CdXR0b25zU2VydmljZSB9IGZyb20gJy4vZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtZmxvYXRpbmctYWN0aW9uLWJ1dHRvbnMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9mbG9hdGluZy1hY3Rpb24tYnV0dG9ucy5jb21wb25lbnQuaHRtbCcsXG4gICAgcHJvdmlkZXJzOiBbRmxvYXRpbmdBY3Rpb25CdXR0b25zU2VydmljZV0sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gICAgYW5pbWF0aW9uczogW1xuICAgICAgICB0cmlnZ2VyKCdmYWJBbmltYXRpb24nLCBbXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IHRydWUnLCBbXG4gICAgICAgICAgICAgICAgcXVlcnkoJ3V4LWZsb2F0aW5nLWFjdGlvbi1idXR0b24nLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpLFxuICAgICAgICAgICAgICAgIHF1ZXJ5KCd1eC1mbG9hdGluZy1hY3Rpb24tYnV0dG9uJywgc3RhZ2dlcig1MCwgYW5pbWF0ZSgyNTAsIHN0eWxlKHsgb3BhY2l0eTogMSB9KSkpKVxuICAgICAgICAgICAgXSksXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCd0cnVlID0+IHZvaWQnLCBbXG4gICAgICAgICAgICAgICAgcXVlcnkoJ3V4LWZsb2F0aW5nLWFjdGlvbi1idXR0b24nLCBzdGFnZ2VyKC01MCwgYW5pbWF0ZSgyNTAsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSkpKVxuICAgICAgICAgICAgXSlcbiAgICAgICAgXSlcbiAgICBdXG59KVxuZXhwb3J0IGNsYXNzIEZsb2F0aW5nQWN0aW9uQnV0dG9uc0NvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gICAgcmVhZG9ubHkgZmFiID0gaW5qZWN0KEZsb2F0aW5nQWN0aW9uQnV0dG9uc1NlcnZpY2UpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICAgIC8qKiBTcGVjaWZ5IHRoZSBkaXJlY3Rpb24gdGhhdCB0aGUgRkFCIHNob3VsZCBkaXNwbGF5ICovXG4gICAgQElucHV0KCkgc2V0IGRpcmVjdGlvbihkaXJlY3Rpb246IEZsb2F0aW5nQWN0aW9uQnV0dG9uRGlyZWN0aW9uKSB7IHRoaXMuZmFiLmRpcmVjdGlvbiQubmV4dChkaXJlY3Rpb24pOyB9XG5cbiAgICAvKiogRW1pdCB3aGVuZXZlciB0aGUgb3BlbiBzdGF0ZSBjaGFuZ2VzICovXG4gICAgQE91dHB1dCgpIG9wZW5DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICAvKiogR2V0IGFsbCBjaGlsZCBGQUIgYnV0dG9ucyAqL1xuICAgIEBDb250ZW50Q2hpbGRyZW4oRmxvYXRpbmdBY3Rpb25CdXR0b25Db21wb25lbnQpIGJ1dHRvbnM6IFF1ZXJ5TGlzdDxGbG9hdGluZ0FjdGlvbkJ1dHRvbkNvbXBvbmVudD47XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9zdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICB0aGlzLl9zdWJzY3JpcHRpb24uYWRkKHRoaXMuZmFiLm9wZW4kLnN1YnNjcmliZSh2YWx1ZSA9PiB0aGlzLm9wZW5DaGFuZ2UuZW1pdCh2YWx1ZSkpKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZmFiLnNldEJ1dHRvbnModGhpcy5idXR0b25zKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgLypcbiAgICAgKiBEZXRlY3QgYW55IGNsaWNrcyB0byB0cmlnZ2VyIGNsb3NlIG9mIHRoZSBtZW51XG4gICAgICovXG4gICAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudC50YXJnZXQnXSkgY2xvc2UodGFyZ2V0OiBIVE1MRWxlbWVudCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyh0YXJnZXQpKSB7XG4gICAgICAgICAgICB0aGlzLmZhYi5jbG9zZSgpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ZhYi1wcmltYXJ5XVwiPjwvbmctY29udGVudD5cblxuQGlmIChmYWIub3BlbiQgfCBhc3luYykge1xuICA8ZGl2IGNsYXNzPVwiZmxvYXRpbmctYWN0aW9uLWJ1dHRvbi1saXN0XCIgW0BmYWJBbmltYXRpb25dPVwiZmFiLm9wZW4kIHwgYXN5bmNcIiBbbmdDbGFzc109XCJmYWIuZGlyZWN0aW9uJCB8IGFzeW5jXCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbn0iXX0=