import { Component, ChangeDetectionStrategy } from '@angular/core';
import { PackageManager } from '../../../../services';
import * as i0 from "@angular/core";
import * as i1 from "../../../../services";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
//TODO: animations
/**
 * Component used as package manager of dynamic packages/modules
 */
export class PackageManagerComponent {
    //######################### constructor #########################
    constructor(packageManager) {
        this.packageManager = packageManager;
        //######################### protected properties - template bindings #########################
        /**
         * Indication whether is detail visible
         */
        this.detailVisible = false;
        /**
         * Array of used packages
         */
        this.usedPackages = [];
        /**
         * Array of available packages
         */
        this.availablePackages = [];
    }
    //######################### public methods - implementation of OnInit #########################
    /**
     * Initialize component
     */
    ngOnInit() {
        this.usedPackages = this.packageManager.usedPackages;
        this.updatedAvailablePackages();
    }
    //######################### protected methods - template bindings #########################
    /**
     * Adds package to used packages
     * @param packageName - Name of package to be added
     */
    addPackage(packageName) {
        if (!packageName) {
            return;
        }
        this.usedPackages = [...this.usedPackages, packageName];
        this.updatedAvailablePackages();
        this.packageManager.setUsedPackages(this.usedPackages);
    }
    /**
     * Removes package from used packages
     * @param packageName - Name of package to be removed
     */
    removePackage(packageName) {
        this.usedPackages = this.usedPackages.filter(itm => itm != packageName);
        this.updatedAvailablePackages();
        this.packageManager.setUsedPackages(this.usedPackages);
    }
    //######################### protected methods #########################
    /**
     * Updates available packages using used packages
     */
    updatedAvailablePackages() {
        this.availablePackages = this.packageManager.packages.filter(itm => !this.usedPackages.find(it => it == itm));
    }
}
PackageManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PackageManagerComponent, deps: [{ token: i1.PackageManager }], target: i0.ɵɵFactoryTarget.Component });
PackageManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: PackageManagerComponent, selector: "package-manager", ngImport: i0, template: "<div class=\"dynamic-flex-row\">\n    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-right-extra-small\" (click)=\"detailVisible = !detailVisible\">\n        <span class=\"fas\" [class.fa-plus]=\"!detailVisible\" [class.fa-minus]=\"detailVisible\"></span>\n    </button>\n\n    <div class=\"pm-header\">packages</div>\n</div>\n\n<div *ngIf=\"detailVisible\">\n    <div class=\"dynamic-flex-row\">\n        <select class=\"dynamic-form-control dynamic-flex-1\" #avPkgs>\n            <option *ngFor=\"let package of availablePackages\" [value]=\"package\">{{package}}</option>\n        </select>\n\n        <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"addPackage(availablePackages[avPkgs.selectedIndex])\">\n            <span class=\"fas fa-plus\"></span>\n        </button>\n    </div>\n\n    <div class=\"dynamic-flex-row dynamic-align-items-center dynamic-margin-top-small\" *ngFor=\"let package of usedPackages\">\n        <div class=\"dynamic-flex-1\">{{package}}</div>\n\n        <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"removePackage(package)\">\n            <span class=\"fas fa-times\"></span>\n        </button>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PackageManagerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'package-manager', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-row\">\n    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-right-extra-small\" (click)=\"detailVisible = !detailVisible\">\n        <span class=\"fas\" [class.fa-plus]=\"!detailVisible\" [class.fa-minus]=\"detailVisible\"></span>\n    </button>\n\n    <div class=\"pm-header\">packages</div>\n</div>\n\n<div *ngIf=\"detailVisible\">\n    <div class=\"dynamic-flex-row\">\n        <select class=\"dynamic-form-control dynamic-flex-1\" #avPkgs>\n            <option *ngFor=\"let package of availablePackages\" [value]=\"package\">{{package}}</option>\n        </select>\n\n        <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"addPackage(availablePackages[avPkgs.selectedIndex])\">\n            <span class=\"fas fa-plus\"></span>\n        </button>\n    </div>\n\n    <div class=\"dynamic-flex-row dynamic-align-items-center dynamic-margin-top-small\" *ngFor=\"let package of usedPackages\">\n        <div class=\"dynamic-flex-1\">{{package}}</div>\n\n        <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"removePackage(package)\">\n            <span class=\"fas fa-times\"></span>\n        </button>\n    </div>\n</div>" }]
        }], ctorParameters: () => [{ type: i1.PackageManager }] });
//# sourceMappingURL=packageManager.component.js.map