import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Observable } from 'rxjs';
import { PluginListService } from './plugin-list.service';
import * as i0 from "@angular/core";
import * as i1 from "./plugin-list.service";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@angular/common";
import * as i4 from "./plugin-list-item.component";
export class PluginListComponent {
    constructor(pluginListService) {
        this.pluginListService = pluginListService;
        this.CURRENT_LOCATION = location.href;
        this.emptyListText = '';
        this.hideSource = false;
        /**
         * Shows the install button for each plugin separately. Currently used in package-details view.
         */
        this.installable = false;
        this.selectedItems = new EventEmitter();
        this.showOverview = new EventEmitter();
        this.selectedPlugins = {};
        this.updatingPluginId = this.pluginListService.updatingPluginId;
    }
    updateSelectedItems(selected, plugin) {
        this.selectedPlugins[plugin.id] = selected ? plugin : undefined;
        const onlyInstalledPlugins = Object.values(this.selectedPlugins).filter(Boolean);
        this.selectedItems.emit(onlyInstalledPlugins);
    }
    showPluginOverview(plugin) {
        if (plugin?.id === this.selectedPlugin?.id) {
            return;
        }
        this.showOverview.emit(plugin);
    }
    async installPlugin(plugin) {
        await this.pluginListService.updateAppRemotes(plugin, 'install', this.package);
    }
    async uninstallPlugin(plugin) {
        await this.pluginListService.updateAppRemotes(plugin, 'uninstall', this.package);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.PluginListService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", hideSource: "hideSource", installable: "installable", package: "package", selectedPlugin: "selectedPlugin" }, outputs: { selectedItems: "selectedItems", showOverview: "showOverview" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li\n        [ngClass]=\"{\n          disabled: plugin.installed,\n          selected: selectedPlugin?.id === plugin?.id\n        }\"\n      >\n        <div class=\"d-flex fit-w\">\n          <ng-container *ngIf=\"plugin.readmePath\">\n            <button\n              class=\"c8y-list__item__btn d-flex fit-w gap-4\"\n              title=\"{{ 'Details' | translate }}\"\n              (click)=\"showPluginOverview(plugin)\"\n            >\n              <c8y-plugin-list-item\n                class=\"d-contents\"\n                (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n                [plugin]=\"plugin\"\n                [selectable]=\"selectable\"\n                [hideSource]=\"hideSource\"\n              ></c8y-plugin-list-item>\n              <i\n                class=\"icon-24 m-l-auto a-s-center\"\n                c8yIcon=\"forward\"\n              ></i>\n            </button>\n          </ng-container>\n          <ng-container *ngIf=\"!plugin.readmePath\">\n            <c8y-plugin-list-item\n              class=\"d-contents\"\n              (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n              [plugin]=\"plugin\"\n              [selectable]=\"selectable\"\n              [hideSource]=\"hideSource\"\n            ></c8y-plugin-list-item>\n          </ng-container>\n        </div>\n        <div class=\"p-l-40 m-t-4 d-flex flex-wrap gap-8\">\n          <button\n            class=\"btn btn-danger btn-sm\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id === updatingPluginId.uninstall\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            class=\"btn btn-default btn-sm m-0\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id === updatingPluginId.install\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'plugin'\"\n    [title]=\"emptyListText | translate\"\n    [horizontal]=\"true\"\n    *ngIf=\"emptyListText\"\n  ></c8y-ui-empty-state>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i4.PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable", "hideSource"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PluginListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-plugin-list', template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li\n        [ngClass]=\"{\n          disabled: plugin.installed,\n          selected: selectedPlugin?.id === plugin?.id\n        }\"\n      >\n        <div class=\"d-flex fit-w\">\n          <ng-container *ngIf=\"plugin.readmePath\">\n            <button\n              class=\"c8y-list__item__btn d-flex fit-w gap-4\"\n              title=\"{{ 'Details' | translate }}\"\n              (click)=\"showPluginOverview(plugin)\"\n            >\n              <c8y-plugin-list-item\n                class=\"d-contents\"\n                (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n                [plugin]=\"plugin\"\n                [selectable]=\"selectable\"\n                [hideSource]=\"hideSource\"\n              ></c8y-plugin-list-item>\n              <i\n                class=\"icon-24 m-l-auto a-s-center\"\n                c8yIcon=\"forward\"\n              ></i>\n            </button>\n          </ng-container>\n          <ng-container *ngIf=\"!plugin.readmePath\">\n            <c8y-plugin-list-item\n              class=\"d-contents\"\n              (isItemSelected)=\"updateSelectedItems($event, plugin)\"\n              [plugin]=\"plugin\"\n              [selectable]=\"selectable\"\n              [hideSource]=\"hideSource\"\n            ></c8y-plugin-list-item>\n          </ng-container>\n        </div>\n        <div class=\"p-l-40 m-t-4 d-flex flex-wrap gap-8\">\n          <button\n            class=\"btn btn-danger btn-sm\"\n            title=\"{{ 'Uninstall plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"uninstallPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.uninstall }\"\n            [disabled]=\"updatingPluginId.uninstall && plugin.id === updatingPluginId.uninstall\"\n            data-cy=\"plugin-list--uninstall-plugin-button\"\n            translate\n          >\n            Uninstall plugin\n          </button>\n          <button\n            class=\"btn btn-default btn-sm m-0\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === updatingPluginId.install }\"\n            [disabled]=\"updatingPluginId.install && plugin.id === updatingPluginId.install\"\n            data-cy=\"plugin-list--install-plugin-button\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <c8y-ui-empty-state\n    [icon]=\"'plugin'\"\n    [title]=\"emptyListText | translate\"\n    [horizontal]=\"true\"\n    *ngIf=\"emptyListText\"\n  ></c8y-ui-empty-state>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.PluginListService }], propDecorators: { plugins$: [{
                type: Input
            }], emptyListText: [{
                type: Input
            }], selectable: [{
                type: Input
            }], hideSource: [{
                type: Input
            }], installable: [{
                type: Input
            }], package: [{
                type: Input
            }], selectedPlugin: [{
                type: Input
            }], selectedItems: [{
                type: Output
            }], showOverview: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 