import { Component, EventEmitter, Input, Output } from '@angular/core';
import { gettext } from '@c8y/ngx-components';
import { PRODUCT_EXPERIENCE_REPOSITORY_SHARED } from '@c8y/ngx-components/repository/shared';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@c8y/ngx-components/operations/operation-details";
import * as i4 from "./device-software-list.component";
export class DeviceSoftwareChangesComponent {
    constructor() {
        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_REPOSITORY_SHARED;
        this.clear = new EventEmitter();
        this.drop = new EventEmitter();
        this.apply = new EventEmitter();
        this.hideSoftwareChanges = new EventEmitter();
        this.changes$ = new BehaviorSubject([]);
        this.installations$ = this.changes$.pipe(map(changes => {
            return changes.filter(change => change.action === 'install');
        }));
        this.removals$ = this.changes$.pipe(map(changes => {
            return changes.filter(change => change.action === 'delete');
        }));
    }
    get applyButtonLabel() {
        return this.changesInProgress ? gettext('Applying changes…') : gettext('Apply changes');
    }
    ngOnChanges(changes) {
        if (changes.changes) {
            this.changes$.next(changes.changes.currentValue);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceSoftwareChangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeviceSoftwareChangesComponent, selector: "c8y-device-software-changes", inputs: { changes: "changes", changesInProgress: "changesInProgress", deviceSoftwareChangesOperation: "deviceSoftwareChangesOperation" }, outputs: { clear: "clear", drop: "drop", apply: "apply", hideSoftwareChanges: "hideSoftwareChanges" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"inner-scroll d-flex d-col\">\n  <div class=\"card-header separator sticky-top visible-sm visible-xs\">\n    <button\n      class=\"btn btn-dot text-primary\"\n      [title]=\"'Back' | translate\"\n      type=\"button\"\n      (click)=\"hideSoftwareChanges.emit()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      <span translate>Back</span>\n    </button>\n  </div>\n  <div class=\"card-header separator large-padding sticky-top\">\n    <div\n      class=\"card-title\"\n      translate\n    >\n      Software changes\n    </div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      class=\"card-block large-padding bg-level-2 p-0\"\n      id=\"operation-block\"\n      *ngIf=\"deviceSoftwareChangesOperation\"\n    >\n      <c8y-operation-details [operation]=\"deviceSoftwareChangesOperation\"></c8y-operation-details>\n    </fieldset>\n  </div>\n  <div\n    class=\"flex-grow inner-scroll\"\n    id=\"software-changes-list\"\n  >\n    <div\n      class=\"card-block large-padding\"\n      *ngIf=\"(changes$ | async).length === 0; else changesList\"\n    >\n      <div class=\"c8y-empty-state\">\n        <div class=\"h1 c8y-icon c8y-icon-device-control c8y-icon-duocolor\"></div>\n        <p>\n          <strong translate>No software changes.</strong>\n          <br />\n          <small translate>Selected actions will be displayed here.</small>\n        </p>\n      </div>\n    </div>\n\n    <ng-template #changesList>\n      <fieldset\n        class=\"card-block p-t-0 p-b-0\"\n        *ngIf=\"(installations$ | async).length > 0\"\n        [disabled]=\"changesInProgress\"\n      >\n        <div\n          class=\"form-block legend\"\n          translate\n        >\n          Installations`software`\n        </div>\n        <c8y-device-software-list\n          [softwareList]=\"installations$ | async\"\n          (remove)=\"drop.emit($event)\"\n        ></c8y-device-software-list>\n      </fieldset>\n\n      <fieldset\n        class=\"card-block p-t-0 p-b-0\"\n        *ngIf=\"(removals$ | async).length > 0\"\n        [disabled]=\"changesInProgress\"\n      >\n        <div\n          class=\"form-block legend\"\n          translate\n        >\n          Removals`software`\n        </div>\n        <c8y-device-software-list\n          [softwareList]=\"removals$ | async\"\n          (remove)=\"drop.emit($event)\"\n        ></c8y-device-software-list>\n      </fieldset>\n    </ng-template>\n  </div>\n  <div\n    class=\"card-footer separator large-padding sticky-bottom\"\n    *ngIf=\"(changes$ | async).length > 0\"\n  >\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Clear changes' | translate }}\"\n      type=\"button\"\n      (click)=\"clear.emit()\"\n      [disabled]=\"changesInProgress\"\n      translate\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_CHANGES,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.CLEAR_SOFTWARE_CHANGES\n      }\"\n    >\n      Clear`changes`\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ applyButtonLabel | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn-pending': changesInProgress }\"\n      [disabled]=\"changesInProgress\"\n      (click)=\"apply.emit(); hideSoftwareChanges.emit()\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_CHANGES,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.APPLY_SOFTWARE_CHANGES\n      }\"\n    >\n      {{ applyButtonLabel | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i3.OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "component", type: i4.DeviceSoftwareListComponent, selector: "c8y-device-software-list", inputs: ["softwareList", "device", "deviceSoftwareChanges", "filterCriteria$"], outputs: ["update", "remove", "onListEmpty"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceSoftwareChangesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-device-software-changes', template: "<div class=\"inner-scroll d-flex d-col\">\n  <div class=\"card-header separator sticky-top visible-sm visible-xs\">\n    <button\n      class=\"btn btn-dot text-primary\"\n      [title]=\"'Back' | translate\"\n      type=\"button\"\n      (click)=\"hideSoftwareChanges.emit()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      <span translate>Back</span>\n    </button>\n  </div>\n  <div class=\"card-header separator large-padding sticky-top\">\n    <div\n      class=\"card-title\"\n      translate\n    >\n      Software changes\n    </div>\n  </div>\n  <div class=\"flex-grow\">\n    <fieldset\n      class=\"card-block large-padding bg-level-2 p-0\"\n      id=\"operation-block\"\n      *ngIf=\"deviceSoftwareChangesOperation\"\n    >\n      <c8y-operation-details [operation]=\"deviceSoftwareChangesOperation\"></c8y-operation-details>\n    </fieldset>\n  </div>\n  <div\n    class=\"flex-grow inner-scroll\"\n    id=\"software-changes-list\"\n  >\n    <div\n      class=\"card-block large-padding\"\n      *ngIf=\"(changes$ | async).length === 0; else changesList\"\n    >\n      <div class=\"c8y-empty-state\">\n        <div class=\"h1 c8y-icon c8y-icon-device-control c8y-icon-duocolor\"></div>\n        <p>\n          <strong translate>No software changes.</strong>\n          <br />\n          <small translate>Selected actions will be displayed here.</small>\n        </p>\n      </div>\n    </div>\n\n    <ng-template #changesList>\n      <fieldset\n        class=\"card-block p-t-0 p-b-0\"\n        *ngIf=\"(installations$ | async).length > 0\"\n        [disabled]=\"changesInProgress\"\n      >\n        <div\n          class=\"form-block legend\"\n          translate\n        >\n          Installations`software`\n        </div>\n        <c8y-device-software-list\n          [softwareList]=\"installations$ | async\"\n          (remove)=\"drop.emit($event)\"\n        ></c8y-device-software-list>\n      </fieldset>\n\n      <fieldset\n        class=\"card-block p-t-0 p-b-0\"\n        *ngIf=\"(removals$ | async).length > 0\"\n        [disabled]=\"changesInProgress\"\n      >\n        <div\n          class=\"form-block legend\"\n          translate\n        >\n          Removals`software`\n        </div>\n        <c8y-device-software-list\n          [softwareList]=\"removals$ | async\"\n          (remove)=\"drop.emit($event)\"\n        ></c8y-device-software-list>\n      </fieldset>\n    </ng-template>\n  </div>\n  <div\n    class=\"card-footer separator large-padding sticky-bottom\"\n    *ngIf=\"(changes$ | async).length > 0\"\n  >\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Clear changes' | translate }}\"\n      type=\"button\"\n      (click)=\"clear.emit()\"\n      [disabled]=\"changesInProgress\"\n      translate\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_CHANGES,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.CLEAR_SOFTWARE_CHANGES\n      }\"\n    >\n      Clear`changes`\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ applyButtonLabel | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn-pending': changesInProgress }\"\n      [disabled]=\"changesInProgress\"\n      (click)=\"apply.emit(); hideSoftwareChanges.emit()\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_CHANGES,\n        action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.APPLY_SOFTWARE_CHANGES\n      }\"\n    >\n      {{ applyButtonLabel | translate }}\n    </button>\n  </div>\n</div>\n" }]
        }], propDecorators: { changes: [{
                type: Input
            }], changesInProgress: [{
                type: Input
            }], deviceSoftwareChangesOperation: [{
                type: Input
            }], clear: [{
                type: Output
            }], drop: [{
                type: Output
            }], apply: [{
                type: Output
            }], hideSoftwareChanges: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 