import { Component, Input } from '@angular/core';
import { sortBy } from 'lodash-es';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../common/icon.directive";
import * as i2 from "../common/outlet.directive";
import * as i3 from "@angular/common";
import * as i4 from "../common/component-outlet.directive";
import * as i5 from "ngx-bootstrap/dropdown";
import * as i6 from "../i18n/c8y-translate.pipe";
/**
 * This component is used as the outlet to show the action list.
 * In a c8ycli app it is by default placed on the header component near app-switcher.
 */
export class ActionOutletComponent {
    constructor() {
        /**
         * Identifies if in a mobile view the toolbar is expanded or not.
         */
        this.isPageToolbarExpanded = false;
        this.items$ = new BehaviorSubject([]);
        /**
         * Returns the items that are displayed in the "add"-dropdown ordered by priority.
         */
        this.templatesAndLabels$ = this.items$.pipe(map(items => sortBy(items.filter(action => !action.component), this.byPriority)));
        /**
         * Returns the items that are displayed at the top navigation.
         */
        this.components$ = this.items$.pipe(map(items => sortBy(items.filter(action => action.component), this.byPriority)));
    }
    /**
     * The current items to display in the action dropdown.
     */
    set items(value) {
        this.items$.next(value);
    }
    get items() {
        return this.items$.value;
    }
    /**
     * Invokes action after an action is clicked.
     */
    invoke(action) {
        if (action.action) {
            action.action.call();
        }
    }
    byPriority(item) {
        return -item.priority;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: { items: "items" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<ng-container *ngIf=\"(components$ | async)?.length > 0\">\n  <div class=\"main-header-item\" *ngFor=\"let item of components$ | async\">\n    <ng-container *c8yComponentOutlet=\"item.component; environmentInjector: item.injector\"></ng-container>\n  </div>\n</ng-container>\n<ng-container>\n  <div class=\"main-header-item\" *ngIf=\"(templatesAndLabels$ | async)?.length > 0\">\n    <div class=\"dropdown\" dropdown>\n      <button\n        type=\"button\"\n        class=\"main-header-button dropdown-toggle c8y-dropdown\"\n        dropdownToggle\n        aria-haspopup=\"true\"\n        title=\"{{ 'Actions' | translate }}\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\" class=\"icon-2x\"></i>\n      </button>\n\n      <ul class=\"dropdown-menu cog-dropdown\" *dropdownMenu>\n        <ng-container *ngFor=\"let item of templatesAndLabels$ | async\">\n          <ng-container *c8yOutlet=\"item.template; injector: item.injector\"></ng-container>\n          <li *ngIf=\"item.label\">\n            <button\n              title=\"{{ item.label | translate }}\"\n              type=\"button\"\n              [attr.disabled]=\"item.disabled ? 'disabled' : null\"\n              (click)=\"invoke(item)\"\n            >\n              <i *ngIf=\"item.icon\" [c8yIcon]=\"item.icon\"></i>\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: i6.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionOutletComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-action-outlet', host: { class: 'd-contents' }, template: "<ng-container *ngIf=\"(components$ | async)?.length > 0\">\n  <div class=\"main-header-item\" *ngFor=\"let item of components$ | async\">\n    <ng-container *c8yComponentOutlet=\"item.component; environmentInjector: item.injector\"></ng-container>\n  </div>\n</ng-container>\n<ng-container>\n  <div class=\"main-header-item\" *ngIf=\"(templatesAndLabels$ | async)?.length > 0\">\n    <div class=\"dropdown\" dropdown>\n      <button\n        type=\"button\"\n        class=\"main-header-button dropdown-toggle c8y-dropdown\"\n        dropdownToggle\n        aria-haspopup=\"true\"\n        title=\"{{ 'Actions' | translate }}\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\" class=\"icon-2x\"></i>\n      </button>\n\n      <ul class=\"dropdown-menu cog-dropdown\" *dropdownMenu>\n        <ng-container *ngFor=\"let item of templatesAndLabels$ | async\">\n          <ng-container *c8yOutlet=\"item.template; injector: item.injector\"></ng-container>\n          <li *ngIf=\"item.label\">\n            <button\n              title=\"{{ item.label | translate }}\"\n              type=\"button\"\n              [attr.disabled]=\"item.disabled ? 'disabled' : null\"\n              (click)=\"invoke(item)\"\n            >\n              <i *ngIf=\"item.icon\" [c8yIcon]=\"item.icon\"></i>\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n" }]
        }], propDecorators: { items: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 