@c8y/ngx-components/esm2022/core/action/action-outlet.component.mjs

Angular modules for Cumulocity IoT applications

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.13", ngImport: i0, type: ActionOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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.13", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLW91dGxldC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb3JlL2FjdGlvbi9hY3Rpb24tb3V0bGV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL2NvcmUvYWN0aW9uL2FjdGlvbi1vdXRsZXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuQyxPQUFPLEVBQUUsZUFBZSxFQUFjLE1BQU0sTUFBTSxDQUFDO0FBQ25ELE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7QUFHckM7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFxQjtJQUxsQztRQU1FOztXQUVHO1FBQ0gsMEJBQXFCLEdBQUcsS0FBSyxDQUFDO1FBYXRCLFdBQU0sR0FBOEIsSUFBSSxlQUFlLENBQUMsRUFBRSxDQUFDLENBQUM7UUFFcEU7O1dBRUc7UUFDSCx3QkFBbUIsR0FBeUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQzFELEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUNWLE1BQU0sQ0FDSixLQUFLLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLEVBQ3pDLElBQUksQ0FBQyxVQUFVLENBQ2hCLENBQ0YsQ0FDRixDQUFDO1FBRUY7O1dBRUc7UUFDSCxnQkFBVyxHQUF5QixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDbEQsR0FBRyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQ1YsTUFBTSxDQUNKLEtBQUssQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLEVBQ3hDLElBQUksQ0FBQyxVQUFVLENBQ2hCLENBQ0YsQ0FDRixDQUFDO0tBY0g7SUFqREM7O09BRUc7SUFDSCxJQUNJLEtBQUssQ0FBQyxLQUFLO1FBQ2IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUNELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDM0IsQ0FBQztJQTRCRDs7T0FFRztJQUNILE1BQU0sQ0FBQyxNQUFNO1FBQ1gsSUFBSSxNQUFNLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDbEIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUVPLFVBQVUsQ0FBQyxJQUFJO1FBQ3JCLE9BQU8sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3hCLENBQUM7K0dBdERVLHFCQUFxQjttR0FBckIscUJBQXFCLDZIQ2ZsQywwNkNBcUNBOzs0RkR0QmEscUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLG1CQUFtQixRQUV2QixFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUU7OEJBWXpCLEtBQUs7c0JBRFIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHNvcnRCeSB9IGZyb20gJ2xvZGFzaC1lcyc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IEFjdGlvbiB9IGZyb20gJy4vYWN0aW9uLm1vZGVsJztcblxuLyoqXG4gKiBUaGlzIGNvbXBvbmVudCBpcyB1c2VkIGFzIHRoZSBvdXRsZXQgdG8gc2hvdyB0aGUgYWN0aW9uIGxpc3QuXG4gKiBJbiBhIGM4eWNsaSBhcHAgaXQgaXMgYnkgZGVmYXVsdCBwbGFjZWQgb24gdGhlIGhlYWRlciBjb21wb25lbnQgbmVhciBhcHAtc3dpdGNoZXIuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2M4eS1hY3Rpb24tb3V0bGV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbi1vdXRsZXQuY29tcG9uZW50Lmh0bWwnLFxuICBob3N0OiB7IGNsYXNzOiAnZC1jb250ZW50cycgfVxufSlcbmV4cG9ydCBjbGFzcyBBY3Rpb25PdXRsZXRDb21wb25lbnQge1xuICAvKipcbiAgICogSWRlbnRpZmllcyBpZiBpbiBhIG1vYmlsZSB2aWV3IHRoZSB0b29sYmFyIGlzIGV4cGFuZGVkIG9yIG5vdC5cbiAgICovXG4gIGlzUGFnZVRvb2xiYXJFeHBhbmRlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBpdGVtcyB0byBkaXNwbGF5IGluIHRoZSBhY3Rpb24gZHJvcGRvd24uXG4gICAqL1xuICBASW5wdXQoKVxuICBzZXQgaXRlbXModmFsdWUpIHtcbiAgICB0aGlzLml0ZW1zJC5uZXh0KHZhbHVlKTtcbiAgfVxuICBnZXQgaXRlbXMoKSB7XG4gICAgcmV0dXJuIHRoaXMuaXRlbXMkLnZhbHVlO1xuICB9XG5cbiAgcHJpdmF0ZSBpdGVtcyQ6IEJlaGF2aW9yU3ViamVjdDxBY3Rpb25bXT4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0KFtdKTtcblxuICAvKipcbiAgICogUmV0dXJucyB0aGUgaXRlbXMgdGhhdCBhcmUgZGlzcGxheWVkIGluIHRoZSBcImFkZFwiLWRyb3Bkb3duIG9yZGVyZWQgYnkgcHJpb3JpdHkuXG4gICAqL1xuICB0ZW1wbGF0ZXNBbmRMYWJlbHMkOiBPYnNlcnZhYmxlPEFjdGlvbltdPiA9IHRoaXMuaXRlbXMkLnBpcGUoXG4gICAgbWFwKGl0ZW1zID0+XG4gICAgICBzb3J0QnkoXG4gICAgICAgIGl0ZW1zLmZpbHRlcihhY3Rpb24gPT4gIWFjdGlvbi5jb21wb25lbnQpLFxuICAgICAgICB0aGlzLmJ5UHJpb3JpdHlcbiAgICAgIClcbiAgICApXG4gICk7XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIGl0ZW1zIHRoYXQgYXJlIGRpc3BsYXllZCBhdCB0aGUgdG9wIG5hdmlnYXRpb24uXG4gICAqL1xuICBjb21wb25lbnRzJDogT2JzZXJ2YWJsZTxBY3Rpb25bXT4gPSB0aGlzLml0ZW1zJC5waXBlKFxuICAgIG1hcChpdGVtcyA9PlxuICAgICAgc29ydEJ5KFxuICAgICAgICBpdGVtcy5maWx0ZXIoYWN0aW9uID0+IGFjdGlvbi5jb21wb25lbnQpLFxuICAgICAgICB0aGlzLmJ5UHJpb3JpdHlcbiAgICAgIClcbiAgICApXG4gICk7XG5cbiAgLyoqXG4gICAqIEludm9rZXMgYWN0aW9uIGFmdGVyIGFuIGFjdGlvbiBpcyBjbGlja2VkLlxuICAgKi9cbiAgaW52b2tlKGFjdGlvbikge1xuICAgIGlmIChhY3Rpb24uYWN0aW9uKSB7XG4gICAgICBhY3Rpb24uYWN0aW9uLmNhbGwoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGJ5UHJpb3JpdHkoaXRlbSkge1xuICAgIHJldHVybiAtaXRlbS5wcmlvcml0eTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cIihjb21wb25lbnRzJCB8IGFzeW5jKT8ubGVuZ3RoID4gMFwiPlxuICA8ZGl2IGNsYXNzPVwibWFpbi1oZWFkZXItaXRlbVwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGNvbXBvbmVudHMkIHwgYXN5bmNcIj5cbiAgICA8bmctY29udGFpbmVyICpjOHlDb21wb25lbnRPdXRsZXQ9XCJpdGVtLmNvbXBvbmVudDsgZW52aXJvbm1lbnRJbmplY3RvcjogaXRlbS5pbmplY3RvclwiPjwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvbmctY29udGFpbmVyPlxuPG5nLWNvbnRhaW5lcj5cbiAgPGRpdiBjbGFzcz1cIm1haW4taGVhZGVyLWl0ZW1cIiAqbmdJZj1cIih0ZW1wbGF0ZXNBbmRMYWJlbHMkIHwgYXN5bmMpPy5sZW5ndGggPiAwXCI+XG4gICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duXCIgZHJvcGRvd24+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICBjbGFzcz1cIm1haW4taGVhZGVyLWJ1dHRvbiBkcm9wZG93bi10b2dnbGUgYzh5LWRyb3Bkb3duXCJcbiAgICAgICAgZHJvcGRvd25Ub2dnbGVcbiAgICAgICAgYXJpYS1oYXNwb3B1cD1cInRydWVcIlxuICAgICAgICB0aXRsZT1cInt7ICdBY3Rpb25zJyB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICA+XG4gICAgICAgIDxpIFtjOHlJY29uXT1cIidwbHVzLWNpcmNsZSdcIiBjbGFzcz1cImljb24tMnhcIj48L2k+XG4gICAgICA8L2J1dHRvbj5cblxuICAgICAgPHVsIGNsYXNzPVwiZHJvcGRvd24tbWVudSBjb2ctZHJvcGRvd25cIiAqZHJvcGRvd25NZW51PlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpdGVtIG9mIHRlbXBsYXRlc0FuZExhYmVscyQgfCBhc3luY1wiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKmM4eU91dGxldD1cIml0ZW0udGVtcGxhdGU7IGluamVjdG9yOiBpdGVtLmluamVjdG9yXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPGxpICpuZ0lmPVwiaXRlbS5sYWJlbFwiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICB0aXRsZT1cInt7IGl0ZW0ubGFiZWwgfCB0cmFuc2xhdGUgfX1cIlxuICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgW2F0dHIuZGlzYWJsZWRdPVwiaXRlbS5kaXNhYmxlZCA/ICdkaXNhYmxlZCcgOiBudWxsXCJcbiAgICAgICAgICAgICAgKGNsaWNrKT1cImludm9rZShpdGVtKVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxpICpuZ0lmPVwiaXRlbS5pY29uXCIgW2M4eUljb25dPVwiaXRlbS5pY29uXCI+PC9pPlxuICAgICAgICAgICAgICB7eyBpdGVtLmxhYmVsIHwgdHJhbnNsYXRlIH19XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvdWw+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy1jb250YWluZXI+XG4iXX0=