ngx-contextual-action-bar/esm2015/lib/actions-overflow-menu/actions-overflow-menu.component.js

ngx-contextual-action-bar is an Angular2+ implementation of the [Material Design Contextual Action Bar](https://material.io/components/app-bars-top#contextual-action-bar). The implementation makes it possible to change the action bar properties (i.e. titl

import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { combineLatest, fromEvent } from 'rxjs';
import { debounceTime, map, startWith } from 'rxjs/operators';
import xor from "arr-xor";
import { ContextualActionBarService } from '../ngx-contextual-action-bar.service';
const ICON_WIDTH = 40;
import { ActionAnimation } from "./animations/action.animation";
export class DmlActionsOverflowMenuComponent {
    constructor(service) {
        this.service = service;
        this.group = 'root';
        this._resizeEvent$ = fromEvent(window, 'resize').pipe(startWith(undefined), debounceTime(100));
    }
    handleActionClick(id, action) {
        this.service.actionEmitter.emit([id, action.icon]);
    }
    ngOnInit() {
        this.layer$ = this.service.latest(this.group).pipe(map(layer => {
            if (!layer)
                return undefined;
            return { id: layer.id, actions: layer.actions };
        }));
        this.width = this._resizeEvent$.pipe(map(_ => this.c.nativeElement.getBoundingClientRect().width));
        this.visible$ = combineLatest([this.width, this.layer$]).pipe(map(([width, layer]) => {
            if (!(layer === null || layer === void 0 ? void 0 : layer.actions))
                return [];
            let max_visible = Math.floor(width / ICON_WIDTH) - 1;
            let visible = max_visible > layer.actions.length ? layer.actions.length : max_visible;
            if (visible + 1 == layer.actions.length)
                return layer.actions;
            return layer.actions.slice(0, visible);
        }));
        this.menu$ = combineLatest([this.visible$, this.layer$]).pipe(map(([visible, layer]) => {
            return xor(visible, (layer === null || layer === void 0 ? void 0 : layer.actions) || [], (a, b) => {
                return a.icon === b.icon;
            });
        }));
    }
}
DmlActionsOverflowMenuComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-actions-overflow-menu',
                template: "<div #c class=\"component\" >\r\n    <ng-container *ngIf=\"layer$ | async as layer\">\r\n        <!-- visible -->\r\n        <button @action mat-icon-button *ngFor=\"let action of visible$ | async\" (click)=\"handleActionClick(layer.id, action)\">\r\n            <mat-icon>{{action.icon}}</mat-icon>\r\n        </button>\r\n        <!-- menu -->\r\n        <ng-container  *ngIf=\"menu$ | async as menu\">\r\n            <mat-menu #matMenu>\r\n                <button mat-menu-item *ngFor=\"let action of menu\" (click)=\"handleActionClick(layer.id, action)\">\r\n                    <mat-icon>{{action.icon}}</mat-icon>\r\n                    <span>{{action.displayName}}</span>\r\n                </button>\r\n            </mat-menu>\r\n            <button @action class=\"menu-trigger\" [matMenuTriggerFor]=\"matMenu\" mat-icon-button *ngIf=\"menu.length > 0\">\r\n                <mat-icon>more_vert</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>",
                host: {
                    class: 'ngx-actions-overflow-menu'
                },
                animations: [
                    ActionAnimation,
                ],
                styles: [":host{height:inherit;width:inherit}.component,:host{overflow:hidden;position:relative}.component{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:flex-end;min-width:0;width:100%}.component button{min-width:0;overflow:hidden}"]
            },] }
];
DmlActionsOverflowMenuComponent.ctorParameters = () => [
    { type: ContextualActionBarService }
];
DmlActionsOverflowMenuComponent.propDecorators = {
    group: [{ type: Input }],
    c: [{ type: ViewChild, args: ['c', { read: ElementRef, static: true },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9ucy1vdmVyZmxvdy1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29udGV4dHVhbC1hY3Rpb24tYmFyL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9hY3Rpb25zLW92ZXJmbG93LW1lbnUvYWN0aW9ucy1vdmVyZmxvdy1tZW51LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxhQUFhLEVBQUUsU0FBUyxFQUFjLE1BQU0sTUFBTSxDQUFDO0FBQzVELE9BQU8sRUFBRSxZQUFZLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRzlELE9BQU8sR0FBRyxNQUFNLFNBQVMsQ0FBQztBQUMxQixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUVsRixNQUFNLFVBQVUsR0FBRyxFQUFFLENBQUM7QUFFdEIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBYWhFLE1BQU0sT0FBTywrQkFBK0I7SUFpQjFDLFlBQ1UsT0FBbUM7UUFBbkMsWUFBTyxHQUFQLE9BQU8sQ0FBNEI7UUFoQnBDLFVBQUssR0FBVyxNQUFNLENBQUM7UUFLeEIsa0JBQWEsR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FDdEQsU0FBUyxDQUFDLFNBQVMsQ0FBQyxFQUNwQixZQUFZLENBQUMsR0FBRyxDQUFDLENBQ2xCLENBQUE7SUFXRCxDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBVSxFQUFFLE1BQTRCO1FBQ3hELElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQTtJQUNwRCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksQ0FDaEQsR0FBRyxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ1YsSUFBSSxDQUFDLEtBQUs7Z0JBQUUsT0FBTyxTQUFTLENBQUM7WUFDN0IsT0FBTyxFQUFDLEVBQUUsRUFBRSxLQUFLLENBQUMsRUFBRSxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUMsT0FBTyxFQUFDLENBQUM7UUFDaEQsQ0FBQyxDQUFDLENBQ0gsQ0FBQTtRQUNELElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQ2xDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUMsS0FBSyxDQUFDLENBQzdELENBQUE7UUFDRCxJQUFJLENBQUMsUUFBUSxHQUFHLGFBQWEsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUMzRCxHQUFHLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsRUFBRSxFQUFFO1lBQ3JCLElBQUksRUFBQyxLQUFLLGFBQUwsS0FBSyx1QkFBTCxLQUFLLENBQUUsT0FBTyxDQUFBO2dCQUFFLE9BQU8sRUFBRSxDQUFDO1lBQy9CLElBQUksV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLFVBQVUsQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNyRCxJQUFJLE9BQU8sR0FBRyxXQUFXLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUM7WUFDdEYsSUFBSSxPQUFPLEdBQUcsQ0FBQyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBTTtnQkFBRSxPQUFPLEtBQUssQ0FBQyxPQUFPLENBQUM7WUFDOUQsT0FBTyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsT0FBTyxDQUFDLENBQUE7UUFDeEMsQ0FBQyxDQUFDLENBQ0gsQ0FBQTtRQUNELElBQUksQ0FBQyxLQUFLLEdBQUcsYUFBYSxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQzNELEdBQUcsQ0FBQyxDQUFDLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUU7WUFDdkIsT0FBTyxHQUFHLENBQUMsT0FBTyxFQUFFLENBQUEsS0FBSyxhQUFMLEtBQUssdUJBQUwsS0FBSyxDQUFFLE9BQU8sS0FBSSxFQUFFLEVBQUUsQ0FBQyxDQUF1QixFQUFFLENBQXVCLEVBQUUsRUFBRTtnQkFDN0YsT0FBTyxDQUFDLENBQUMsSUFBSSxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUE7WUFDMUIsQ0FBQyxDQUFDLENBQUE7UUFDSixDQUFDLENBQUMsQ0FDSCxDQUFBO0lBQ0gsQ0FBQzs7O1lBaEVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsMkJBQTJCO2dCQUNyQyxrL0JBQXFEO2dCQUVyRCxJQUFJLEVBQUU7b0JBQ0osS0FBSyxFQUFFLDJCQUEyQjtpQkFDbkM7Z0JBQ0QsVUFBVSxFQUFFO29CQUNWLGVBQWU7aUJBQ2hCOzthQUNGOzs7WUFoQlEsMEJBQTBCOzs7b0JBbUJoQyxLQUFLO2dCQUNMLFNBQVMsU0FBQyxHQUFHLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBjb21iaW5lTGF0ZXN0LCBmcm9tRXZlbnQsIE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBtYXAsIHN0YXJ0V2l0aCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHsgQWN0aW9uQmFyTGF5ZXJBY3Rpb24gfSBmcm9tICcuLi9tb2RlbC9hY3Rpb24tYmFyLWxheWVyLm1vZGVsJztcclxuXHJcbmltcG9ydCB4b3IgZnJvbSBcImFyci14b3JcIjsgXHJcbmltcG9ydCB7IENvbnRleHR1YWxBY3Rpb25CYXJTZXJ2aWNlIH0gZnJvbSAnLi4vbmd4LWNvbnRleHR1YWwtYWN0aW9uLWJhci5zZXJ2aWNlJztcclxuXHJcbmNvbnN0IElDT05fV0lEVEggPSA0MDtcclxuXHJcbmltcG9ydCB7IEFjdGlvbkFuaW1hdGlvbiB9IGZyb20gXCIuL2FuaW1hdGlvbnMvYWN0aW9uLmFuaW1hdGlvblwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtYWN0aW9ucy1vdmVyZmxvdy1tZW51JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9ucy1vdmVyZmxvdy1tZW51LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hY3Rpb25zLW92ZXJmbG93LW1lbnUuY29tcG9uZW50LnNjc3MnXSxcclxuICBob3N0OiB7XHJcbiAgICBjbGFzczogJ25neC1hY3Rpb25zLW92ZXJmbG93LW1lbnUnXHJcbiAgfSxcclxuICBhbmltYXRpb25zOiBbXHJcbiAgICBBY3Rpb25BbmltYXRpb24sXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRG1sQWN0aW9uc092ZXJmbG93TWVudUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpIGdyb3VwOiBzdHJpbmcgPSAncm9vdCc7XHJcbiAgQFZpZXdDaGlsZCgnYycsIHsgcmVhZDogRWxlbWVudFJlZiwgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgYyE6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+O1xyXG5cclxuICBsYXllciQhOiBPYnNlcnZhYmxlPHtpZDogc3RyaW5nLCBhY3Rpb25zOiBBY3Rpb25CYXJMYXllckFjdGlvbltdfSB8IHVuZGVmaW5lZD47XHJcblxyXG4gIHByaXZhdGUgX3Jlc2l6ZUV2ZW50JCA9IGZyb21FdmVudCh3aW5kb3csICdyZXNpemUnKS5waXBlKFxyXG4gICAgc3RhcnRXaXRoKHVuZGVmaW5lZCksXHJcbiAgICBkZWJvdW5jZVRpbWUoMTAwKVxyXG4gIClcclxuXHJcbiAgcHJpdmF0ZSB3aWR0aCE6IE9ic2VydmFibGU8bnVtYmVyPjtcclxuICBcclxuICBwdWJsaWMgdmlzaWJsZSQhOiBPYnNlcnZhYmxlPEFjdGlvbkJhckxheWVyQWN0aW9uW10+O1xyXG4gIHB1YmxpYyBtZW51JCE6ICAgICBPYnNlcnZhYmxlPEFjdGlvbkJhckxheWVyQWN0aW9uW10+O1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgc2VydmljZTogQ29udGV4dHVhbEFjdGlvbkJhclNlcnZpY2UsXHJcbiAgKSB7XHJcbiAgICBcclxuICB9XHJcblxyXG4gIGhhbmRsZUFjdGlvbkNsaWNrKGlkOiBzdHJpbmcsIGFjdGlvbjogQWN0aW9uQmFyTGF5ZXJBY3Rpb24pe1xyXG4gICAgdGhpcy5zZXJ2aWNlLmFjdGlvbkVtaXR0ZXIuZW1pdChbaWQsIGFjdGlvbi5pY29uXSlcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5sYXllciQgPSB0aGlzLnNlcnZpY2UubGF0ZXN0KHRoaXMuZ3JvdXApLnBpcGUoXHJcbiAgICAgIG1hcChsYXllciA9PiB7XHJcbiAgICAgICAgaWYgKCFsYXllcikgcmV0dXJuIHVuZGVmaW5lZDsgXHJcbiAgICAgICAgcmV0dXJuIHtpZDogbGF5ZXIuaWQsIGFjdGlvbnM6IGxheWVyLmFjdGlvbnN9O1xyXG4gICAgICB9KVxyXG4gICAgKVxyXG4gICAgdGhpcy53aWR0aCA9IHRoaXMuX3Jlc2l6ZUV2ZW50JC5waXBlKFxyXG4gICAgICBtYXAoXyA9PiB0aGlzLmMubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aClcclxuICAgIClcclxuICAgIHRoaXMudmlzaWJsZSQgPSBjb21iaW5lTGF0ZXN0KFt0aGlzLndpZHRoLCB0aGlzLmxheWVyJF0pLnBpcGUoXHJcbiAgICAgIG1hcCgoW3dpZHRoLCBsYXllcl0pID0+IHtcclxuICAgICAgICBpZiAoIWxheWVyPy5hY3Rpb25zKSByZXR1cm4gW107XHJcbiAgICAgICAgbGV0IG1heF92aXNpYmxlID0gTWF0aC5mbG9vcih3aWR0aCAvIElDT05fV0lEVEgpIC0gMTtcclxuICAgICAgICBsZXQgdmlzaWJsZSA9IG1heF92aXNpYmxlID4gbGF5ZXIuYWN0aW9ucy5sZW5ndGggPyBsYXllci5hY3Rpb25zLmxlbmd0aCA6IG1heF92aXNpYmxlO1xyXG4gICAgICAgIGlmICh2aXNpYmxlICsgMSA9PSBsYXllci5hY3Rpb25zLmxlbmd0aCkgcmV0dXJuIGxheWVyLmFjdGlvbnM7XHJcbiAgICAgICAgcmV0dXJuIGxheWVyLmFjdGlvbnMuc2xpY2UoMCwgdmlzaWJsZSlcclxuICAgICAgfSlcclxuICAgIClcclxuICAgIHRoaXMubWVudSQgPSBjb21iaW5lTGF0ZXN0KFt0aGlzLnZpc2libGUkLCB0aGlzLmxheWVyJF0pLnBpcGUoXHJcbiAgICAgIG1hcCgoW3Zpc2libGUsIGxheWVyXSkgPT4ge1xyXG4gICAgICAgIHJldHVybiB4b3IodmlzaWJsZSwgbGF5ZXI/LmFjdGlvbnMgfHwgW10sIChhOiBBY3Rpb25CYXJMYXllckFjdGlvbiwgYjogQWN0aW9uQmFyTGF5ZXJBY3Rpb24pID0+IHtcclxuICAgICAgICAgIHJldHVybiBhLmljb24gPT09IGIuaWNvblxyXG4gICAgICAgIH0pXHJcbiAgICAgIH0pXHJcbiAgICApICAgIFxyXG4gIH1cclxuXHJcblxyXG59XHJcbiJdfQ==