fabrikantencore 1.0.13 → 1.0.15

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-categories/beheer-categories.component.mjs

@@ -29,9 +29,9 @@ export class BeheerCategoriesComponent {
         });
     }
 }
-BeheerCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerCategoriesComponent, deps: [{ token: i1.CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerCategoriesComponent, selector: "app-beheer-categories", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">{{ categorie.name }}</td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"], 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: "component", type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i4.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i5.FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerCategoriesComponent, decorators: [{
+BeheerCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerCategoriesComponent, deps: [{ token: i1.CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerCategoriesComponent, selector: "app-beheer-categories", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">{{ categorie.name }}</td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"], 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: "component", type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i4.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i5.FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerCategoriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-categories', template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">{{ categorie.name }}</td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CategoriesApiClient }]; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-connect-category-dialog/beheer-connect-category-dialog.component.mjs

@@ -65,9 +65,9 @@ export class BeheerConnectCategoryDialogComponent {
         });
     }
 }
-BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerConnectCategoryDialogComponent, selector: "app-beheer-connect-category-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ 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: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11.FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
+BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerConnectCategoryDialogComponent, selector: "app-beheer-connect-category-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ 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: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11.FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-connect-category-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-ebo-koppel/beheer-ebo-koppel/beheer-ebo-koppel.component.mjs

@@ -81,9 +81,9 @@ export class BeheerEboKoppelComponent {
         });
     }
 }
-BeheerEboKoppelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: i1.EBOKoppelApiClient }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-BeheerEboKoppelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerEboKoppelComponent, selector: "app-beheer-ebo-koppel", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"], dependencies: [{ 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: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i7.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i8.FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerEboKoppelComponent, decorators: [{
+BeheerEboKoppelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: i1.EBOKoppelApiClient }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+BeheerEboKoppelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerEboKoppelComponent, selector: "app-beheer-ebo-koppel", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"], dependencies: [{ 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: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i7.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i8.FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerEboKoppelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-ebo-koppel', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EBOKoppelApiClient }, { type: i2.MatDialog }]; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-filters/beheer-filters.component.mjs

@@ -6,9 +6,9 @@ export class BeheerFiltersComponent {
     ngOnInit() {
     }
 }
-BeheerFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BeheerFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerFiltersComponent, selector: "app-beheer-filters", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1.BeheerNavComponent, selector: "app-beheer-nav" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerFiltersComponent, decorators: [{
+BeheerFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BeheerFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerFiltersComponent, selector: "app-beheer-filters", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1.BeheerNavComponent, selector: "app-beheer-nav" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-filters', template: "<app-beheer-nav></app-beheer-nav>\r\n" }]
         }], ctorParameters: function () { return []; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-import-sets/beheer-import-sets-dialog/beheer-import-sets-dialog.component.mjs

@@ -40,9 +40,9 @@ export class BeheerImportSetsDialogComponent {
         });
     }
 }
-BeheerImportSetsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.ImportApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerImportSetsDialogComponent, selector: "app-beheer-import-sets-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label>Naam</mat-label>\r\n    <input matInput [(ngModel)]=\"name\">\r\n  </mat-form-field>\r\n\r\n  <button mat-raised-button (click)=\"Opslaan()\">Opslaan</button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsDialogComponent, decorators: [{
+BeheerImportSetsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.ImportApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsDialogComponent, selector: "app-beheer-import-sets-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label>Naam</mat-label>\r\n    <input matInput [(ngModel)]=\"name\">\r\n  </mat-form-field>\r\n\r\n  <button mat-raised-button (click)=\"Opslaan()\">Opslaan</button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label>Naam</mat-label>\r\n    <input matInput [(ngModel)]=\"name\">\r\n  </mat-form-field>\r\n\r\n  <button mat-raised-button (click)=\"Opslaan()\">Opslaan</button>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-import-sets/beheer-import-sets-ebo/beheer-import-sets-ebo.component.mjs

@@ -10,11 +10,11 @@ export class BeheerImportSetsEboComponent {
     ngOnInit() {
     }
 }
-BeheerImportSetsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsEboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<mat-card>\n  <div class=\"row\">\n    <div class=\"icon-div\">\n      <mat-icon>chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div\">\n      <div class=\"row\">\n        <div class=\"flex-auto text-box\" *ngFor=\"let do of ebo.dOs\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\">\n            <mat-label>{{ do.doType }}</mat-label>\n            <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n\n  </div>\n</mat-card>\n", styles: ["app-beheer-import-sets-ebo .row{display:flex;align-items:center}app-beheer-import-sets-ebo .full-width{width:100%}app-beheer-import-sets-ebo .icon-div{width:22px;height:24px;cursor:pointer}app-beheer-import-sets-ebo .text-div{flex:auto;cursor:pointer}app-beheer-import-sets-ebo .flex-auto{flex:auto}app-beheer-import-sets-ebo .check-div{padding-left:5px}app-beheer-import-sets-ebo .card{margin:3px}app-beheer-import-sets-ebo .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets-ebo .mat-form-field-underline{bottom:0px}app-beheer-import-sets-ebo .mat-form-field-infix{width:auto}app-beheer-import-sets-ebo .text-box{padding-left:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsEboComponent, decorators: [{
+BeheerImportSetsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<mat-card>\n  <div class=\"row\">\n    <div class=\"icon-div\">\n      <mat-icon>chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div\">\n      <div class=\"row\">\n        <div class=\"flex-auto text-box\" *ngFor=\"let do of ebo.dOs\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\">\n            <mat-label>{{ do.doType }}</mat-label>\n            <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n\n  </div>\n</mat-card>\n", styles: ["app-beheer-import-sets-ebo .row{display:flex;align-items:center}app-beheer-import-sets-ebo .full-width{width:100%}app-beheer-import-sets-ebo .icon-div{width:22px;height:24px;cursor:pointer}app-beheer-import-sets-ebo .text-div{flex:auto;cursor:pointer}app-beheer-import-sets-ebo .flex-auto{flex:auto}app-beheer-import-sets-ebo .check-div{padding-left:5px}app-beheer-import-sets-ebo .card{margin:3px}app-beheer-import-sets-ebo .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets-ebo .mat-form-field-underline{bottom:0}app-beheer-import-sets-ebo .mat-form-field-infix{width:auto}app-beheer-import-sets-ebo .text-box{padding-left:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEboComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-import-sets-ebo', encapsulation: ViewEncapsulation.None, template: "<mat-card>\n  <div class=\"row\">\n    <div class=\"icon-div\">\n      <mat-icon>chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div\">\n      <div class=\"row\">\n        <div class=\"flex-auto text-box\" *ngFor=\"let do of ebo.dOs\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\">\n            <mat-label>{{ do.doType }}</mat-label>\n            <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n\n  </div>\n</mat-card>\n", styles: ["app-beheer-import-sets-ebo .row{display:flex;align-items:center}app-beheer-import-sets-ebo .full-width{width:100%}app-beheer-import-sets-ebo .icon-div{width:22px;height:24px;cursor:pointer}app-beheer-import-sets-ebo .text-div{flex:auto;cursor:pointer}app-beheer-import-sets-ebo .flex-auto{flex:auto}app-beheer-import-sets-ebo .check-div{padding-left:5px}app-beheer-import-sets-ebo .card{margin:3px}app-beheer-import-sets-ebo .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets-ebo .mat-form-field-underline{bottom:0px}app-beheer-import-sets-ebo .mat-form-field-infix{width:auto}app-beheer-import-sets-ebo .text-box{padding-left:3px}\n"] }]
+            args: [{ selector: 'app-beheer-import-sets-ebo', encapsulation: ViewEncapsulation.None, template: "<mat-card>\n  <div class=\"row\">\n    <div class=\"icon-div\">\n      <mat-icon>chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div\">\n      <div class=\"row\">\n        <div class=\"flex-auto text-box\" *ngFor=\"let do of ebo.dOs\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\">\n            <mat-label>{{ do.doType }}</mat-label>\n            <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n\n  </div>\n</mat-card>\n", styles: ["app-beheer-import-sets-ebo .row{display:flex;align-items:center}app-beheer-import-sets-ebo .full-width{width:100%}app-beheer-import-sets-ebo .icon-div{width:22px;height:24px;cursor:pointer}app-beheer-import-sets-ebo .text-div{flex:auto;cursor:pointer}app-beheer-import-sets-ebo .flex-auto{flex:auto}app-beheer-import-sets-ebo .check-div{padding-left:5px}app-beheer-import-sets-ebo .card{margin:3px}app-beheer-import-sets-ebo .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets-ebo .mat-form-field-underline{bottom:0}app-beheer-import-sets-ebo .mat-form-field-infix{width:auto}app-beheer-import-sets-ebo .text-box{padding-left:3px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { ebo: [{
                 type: Input
             }] } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-import-sets/beheer-import-sets-eigenschap/beheer-import-sets-eigenschap.component.mjs

@@ -14,9 +14,9 @@ export class BeheerImportSetsEigenschapComponent {
         this.ImportSetsService.ChangeImportSetValue(this.eigenschap.value + "", this.eigenschap.selected);
     }
 }
-BeheerImportSetsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsEigenschapComponent, deps: [{ token: i1.ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<mat-card class=\"card\">\n  <div class=\"top-row\">\n    <div class=\"text-div flexauto\" (click)=\"UpdateSelected()\">\n      {{ eigenschap.name }}\n    </div>\n    <div class=\"check-div\">\n      <mat-checkbox [checked]=\"eigenschap.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n    </div>\n  </div>\n</mat-card>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer}.card{margin:3px}.flexauto{flex:auto}\n"], dependencies: [{ kind: "component", type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsEigenschapComponent, decorators: [{
+BeheerImportSetsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEigenschapComponent, deps: [{ token: i1.ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<mat-card class=\"card\">\n  <div class=\"top-row\">\n    <div class=\"text-div flexauto\" (click)=\"UpdateSelected()\">\n      {{ eigenschap.name }}\n    </div>\n    <div class=\"check-div\">\n      <mat-checkbox [checked]=\"eigenschap.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n    </div>\n  </div>\n</mat-card>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer}.card{margin:3px}.flexauto{flex:auto}\n"], dependencies: [{ kind: "component", type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEigenschapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-eigenschap', template: "<mat-card class=\"card\">\n  <div class=\"top-row\">\n    <div class=\"text-div flexauto\" (click)=\"UpdateSelected()\">\n      {{ eigenschap.name }}\n    </div>\n    <div class=\"check-div\">\n      <mat-checkbox [checked]=\"eigenschap.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n    </div>\n  </div>\n</mat-card>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer}.card{margin:3px}.flexauto{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ImportSetsService }]; }, propDecorators: { eigenschap: [{

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-import-sets/beheer-import-sets-opbouw/beheer-import-sets-opbouw.component.mjs

@@ -25,9 +25,9 @@ export class BeheerImportSetsOpbouwComponent {
         this.ImportSetsService.ChangeImportSetValue(this.opbouw.value + "", this.opbouw.selected);
     }
 }
-BeheerImportSetsOpbouwComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsOpbouwComponent, deps: [{ token: i1.ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<mat-card class=\"card\">\n  <div class=\"top-row\">\n    <div class=\"icon-div\" (click)=\"Toggle()\">\n      <mat-icon *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div flexauto\" (click)=\"Toggle()\">\n    {{ opbouw.name }}\n    </div>\n    <div class=\"check-div\">\n      <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n    </div>\n  </div>\n  <div class=\"top-row\" *ngIf=\"opbouw.open\">\n    <br />\n    <app-beheer-import-sets-ebo class=\"flexauto\" [ebo]=\"ebo\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\"></app-beheer-import-sets-ebo>\n  </div>\n</mat-card>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer}.card{margin:3px}.flexauto{flex:auto}\n"], 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: "component", type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: ["ebo"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsOpbouwComponent, decorators: [{
+BeheerImportSetsOpbouwComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsOpbouwComponent, deps: [{ token: i1.ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<mat-card class=\"card\">\n  <div class=\"top-row\">\n    <div class=\"icon-div\" (click)=\"Toggle()\">\n      <mat-icon *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div flexauto\" (click)=\"Toggle()\">\n    {{ opbouw.name }}\n    </div>\n    <div class=\"check-div\">\n      <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n    </div>\n  </div>\n  <div class=\"top-row\" *ngIf=\"opbouw.open\">\n    <br />\n    <app-beheer-import-sets-ebo class=\"flexauto\" [ebo]=\"ebo\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\"></app-beheer-import-sets-ebo>\n  </div>\n</mat-card>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer}.card{margin:3px}.flexauto{flex:auto}\n"], 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: "component", type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: ["ebo"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsOpbouwComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-opbouw', template: "<mat-card class=\"card\">\n  <div class=\"top-row\">\n    <div class=\"icon-div\" (click)=\"Toggle()\">\n      <mat-icon *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">chevron_right</mat-icon>\n    </div>\n    <div class=\"text-div flexauto\" (click)=\"Toggle()\">\n    {{ opbouw.name }}\n    </div>\n    <div class=\"check-div\">\n      <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n    </div>\n  </div>\n  <div class=\"top-row\" *ngIf=\"opbouw.open\">\n    <br />\n    <app-beheer-import-sets-ebo class=\"flexauto\" [ebo]=\"ebo\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\"></app-beheer-import-sets-ebo>\n  </div>\n</mat-card>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer}.card{margin:3px}.flexauto{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ImportSetsService }]; }, propDecorators: { opbouw: [{

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-import-sets/beheer-import-sets.component.mjs

@@ -63,9 +63,9 @@ export class BeheerImportSetsComponent {
         return array;
     }
 }
-BeheerImportSetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsComponent, deps: [{ token: i1.MatDialog }, { token: i2.ProductsService }, { token: i3.ImportSetsService }, { token: i4.ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerImportSetsComponent, selector: "app-beheer-import-sets", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading() && ImportSetsService.BCBImportSetsViewModel != null && ProductsService.ProductsViewModel != null\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-title>\r\n          {{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}\r\n        </mat-card-title>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <mat-card class=\"card\">\r\n              <mat-card-title>Opbouw</mat-card-title>\r\n              <mat-card-content>\r\n                <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n              </mat-card-content>\r\n            </mat-card>\r\n            <mat-card class=\"card\">\r\n              <mat-card-title>Eigenschap</mat-card-title>\r\n              <mat-card-content>\r\n                <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n              </mat-card-content>\r\n            </mat-card>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i9.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i13.FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: i14.BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i15.BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerImportSetsComponent, decorators: [{
+BeheerImportSetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsComponent, deps: [{ token: i1.MatDialog }, { token: i2.ProductsService }, { token: i3.ImportSetsService }, { token: i4.ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsComponent, selector: "app-beheer-import-sets", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading() && ImportSetsService.BCBImportSetsViewModel != null && ProductsService.ProductsViewModel != null\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-title>\r\n          {{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}\r\n        </mat-card-title>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <mat-card class=\"card\">\r\n              <mat-card-title>Opbouw</mat-card-title>\r\n              <mat-card-content>\r\n                <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n              </mat-card-content>\r\n            </mat-card>\r\n            <mat-card class=\"card\">\r\n              <mat-card-title>Eigenschap</mat-card-title>\r\n              <mat-card-content>\r\n                <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n              </mat-card-content>\r\n            </mat-card>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i9.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i13.FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: i14.BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i15.BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading() && ImportSetsService.BCBImportSetsViewModel != null && ProductsService.ProductsViewModel != null\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-title>\r\n          {{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}\r\n        </mat-card-title>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <mat-card class=\"card\">\r\n              <mat-card-title>Opbouw</mat-card-title>\r\n              <mat-card-content>\r\n                <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n              </mat-card-content>\r\n            </mat-card>\r\n            <mat-card class=\"card\">\r\n              <mat-card-title>Eigenschap</mat-card-title>\r\n              <mat-card-content>\r\n                <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n              </mat-card-content>\r\n            </mat-card>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.ProductsService }, { type: i3.ImportSetsService }, { type: i4.ImportApiClient }, { type: i0.ChangeDetectorRef }]; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-inlog/beheer-inlog.component.mjs

@@ -34,9 +34,9 @@ export class BeheerInlogComponent {
         beheer.Message = message;
     }
 }
-BeheerInlogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerInlogComponent, deps: [{ token: i1.AuthenticationService }, { token: i2.Router }, { token: i3.SecurityApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerInlogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerInlogComponent, selector: "app-beheer-inlog", ngImport: i0, template: "\n<div class=\"container\">\n  <div class=\"inlogdialog\">\n    <div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Gebruikersnaam</mat-label>\n        <input type=\"text\" [(ngModel)]=\"Username\" matInput value=\"\">\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Wachtwoord</mat-label>\n        <input type=\"password\" [(ngModel)]=\"Password\" matInput value=\"\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"button-bar\">\n      <div class=\"error-box\">\n        {{ Message }}\n      </div>\n      <button mat-raised-button (click)=\"Login()\" class=\"login-button\">\n        <span *ngIf=\"!authenticationService.LoadingLogin\">\n          Login\n        </span>\n        <span *ngIf=\"authenticationService.LoadingLogin\">\n          <app-fab-loader class=\"loader\"></app-fab-loader>\n        </span>\n      </button>\n    </div>\n    <div>\n      IP Address: {{ LoginIPResponseModel?.ipAddress }}\n    </div>\n  </div>\n</div>\n", styles: [".container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.error-box{font-size:12px;text-align:center;color:red;padding:3px}.login-button{width:70px}.loader{height:20px;top:6px;position:relative}.inlogdialog{width:300px}.button-bar{text-align:right}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerInlogComponent, decorators: [{
+BeheerInlogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerInlogComponent, deps: [{ token: i1.AuthenticationService }, { token: i2.Router }, { token: i3.SecurityApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerInlogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerInlogComponent, selector: "app-beheer-inlog", ngImport: i0, template: "\n<div class=\"container\">\n  <div class=\"inlogdialog\">\n    <div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Gebruikersnaam</mat-label>\n        <input type=\"text\" [(ngModel)]=\"Username\" matInput value=\"\">\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Wachtwoord</mat-label>\n        <input type=\"password\" [(ngModel)]=\"Password\" matInput value=\"\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"button-bar\">\n      <div class=\"error-box\">\n        {{ Message }}\n      </div>\n      <button mat-raised-button (click)=\"Login()\" class=\"login-button\">\n        <span *ngIf=\"!authenticationService.LoadingLogin\">\n          Login\n        </span>\n        <span *ngIf=\"authenticationService.LoadingLogin\">\n          <app-fab-loader class=\"loader\"></app-fab-loader>\n        </span>\n      </button>\n    </div>\n    <div>\n      IP Address: {{ LoginIPResponseModel?.ipAddress }}\n    </div>\n  </div>\n</div>\n", styles: [".container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.error-box{font-size:12px;text-align:center;color:red;padding:3px}.login-button{width:70px}.loader{height:20px;top:6px;position:relative}.inlogdialog{width:300px}.button-bar{text-align:right}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerInlogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-inlog', template: "\n<div class=\"container\">\n  <div class=\"inlogdialog\">\n    <div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Gebruikersnaam</mat-label>\n        <input type=\"text\" [(ngModel)]=\"Username\" matInput value=\"\">\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Wachtwoord</mat-label>\n        <input type=\"password\" [(ngModel)]=\"Password\" matInput value=\"\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"button-bar\">\n      <div class=\"error-box\">\n        {{ Message }}\n      </div>\n      <button mat-raised-button (click)=\"Login()\" class=\"login-button\">\n        <span *ngIf=\"!authenticationService.LoadingLogin\">\n          Login\n        </span>\n        <span *ngIf=\"authenticationService.LoadingLogin\">\n          <app-fab-loader class=\"loader\"></app-fab-loader>\n        </span>\n      </button>\n    </div>\n    <div>\n      IP Address: {{ LoginIPResponseModel?.ipAddress }}\n    </div>\n  </div>\n</div>\n", styles: [".container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.error-box{font-size:12px;text-align:center;color:red;padding:3px}.login-button{width:70px}.loader{height:20px;top:6px;position:relative}.inlogdialog{width:300px}.button-bar{text-align:right}mat-form-field{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AuthenticationService }, { type: i2.Router }, { type: i3.SecurityApiClient }]; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-main/beheer-main.component.mjs

@@ -7,9 +7,9 @@ export class BeheerMainComponent {
     ngOnInit() {
     }
 }
-BeheerMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BeheerMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerMainComponent, selector: "app-beheer-main", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1.BeheerNavComponent, selector: "app-beheer-nav" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerMainComponent, decorators: [{
+BeheerMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BeheerMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerMainComponent, selector: "app-beheer-main", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1.BeheerNavComponent, selector: "app-beheer-nav" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerMainComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-main', template: "<app-beheer-nav></app-beheer-nav>\r\n" }]
         }], ctorParameters: function () { return []; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-nav/beheer-nav.component.mjs

@@ -35,9 +35,9 @@ export class BeheerNavComponent {
         });
     }
 }
-BeheerNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerNavComponent, deps: [{ token: i1.AuthenticationService }, { token: i2.Router }, { token: i3.FabrikantenApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerNavComponent, selector: "app-beheer-nav", ngImport: i0, template: "<div class=\"main-block\">\n  <div class=\"row\">\n    <div class=\"cell left-block\">\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\n        Zoeken\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\n        Import\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\n        Products\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\n        Filters\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\n        EBO Koppel\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\n        Categories\n      </button>\n    </div>\n    <div class=\"cell right-block\">\n      <button mat-raised-button (click)=\"ResetCache()\" class=\"link\">\n        Reset Cache\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\n        Settings\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\n        Users\n      </button>\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\n        Uitloggen\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/Images/BouwC_patroon-zwrt.png) fixed}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerNavComponent, decorators: [{
+BeheerNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerNavComponent, deps: [{ token: i1.AuthenticationService }, { token: i2.Router }, { token: i3.FabrikantenApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerNavComponent, selector: "app-beheer-nav", ngImport: i0, template: "<div class=\"main-block\">\n  <div class=\"row\">\n    <div class=\"cell left-block\">\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\n        Zoeken\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\n        Import\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\n        Products\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\n        Filters\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\n        EBO Koppel\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\n        Categories\n      </button>\n    </div>\n    <div class=\"cell right-block\">\n      <button mat-raised-button (click)=\"ResetCache()\" class=\"link\">\n        Reset Cache\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\n        Settings\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\n        Users\n      </button>\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\n        Uitloggen\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/Images/BouwC_patroon-zwrt.png) fixed}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-nav', encapsulation: ViewEncapsulation.None, template: "<div class=\"main-block\">\n  <div class=\"row\">\n    <div class=\"cell left-block\">\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\n        Zoeken\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\n        Import\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\n        Products\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\n        Filters\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\n        EBO Koppel\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\n        Categories\n      </button>\n    </div>\n    <div class=\"cell right-block\">\n      <button mat-raised-button (click)=\"ResetCache()\" class=\"link\">\n        Reset Cache\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\n        Settings\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\n        Users\n      </button>\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\n        Uitloggen\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/Images/BouwC_patroon-zwrt.png) fixed}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AuthenticationService }, { type: i2.Router }, { type: i3.FabrikantenApiClient }]; } });

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-products/beheer-products-bcbproduct/beheer-products-bcbproduct.component.mjs

@@ -35,9 +35,9 @@ export class BeheerProductsBcbproductComponent {
         });
     }
 }
-BeheerProductsBcbproductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerProductsBcbproductComponent, deps: [{ token: i1.ImportApiClient }, { token: i2.ProductsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: { BCBProductViewModel: "BCBProductViewModel" }, ngImport: i0, template: "<mat-card>\r\n  <div class=\"product-bar\">\r\n    <div class=\"product-first block\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Naam</mat-label>\r\n        <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"Import()\">\r\n        Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"ResetImport()\">\r\n        Reset Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Opslaan\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Verwijderen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</mat-card>\r\n<br />\r\n<mat-card>\r\n  <mat-card-content>\r\n    <b>Eigenschap</b>\r\n    <app-beheer-products-eigenschap *ngFor=\"let eigenschap of BCBProductViewModel.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n  </mat-card-content>\r\n</mat-card>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: ["eigenschap"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerProductsBcbproductComponent, decorators: [{
+BeheerProductsBcbproductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsBcbproductComponent, deps: [{ token: i1.ImportApiClient }, { token: i2.ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: { BCBProductViewModel: "BCBProductViewModel" }, ngImport: i0, template: "<mat-card>\r\n  <div class=\"product-bar\">\r\n    <div class=\"product-first block\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Naam</mat-label>\r\n        <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"Import()\">\r\n        Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"ResetImport()\">\r\n        Reset Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Opslaan\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Verwijderen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</mat-card>\r\n<br />\r\n<mat-card>\r\n  <mat-card-content>\r\n    <b>Eigenschap</b>\r\n    <app-beheer-products-eigenschap *ngFor=\"let eigenschap of BCBProductViewModel.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n  </mat-card-content>\r\n</mat-card>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: ["eigenschap"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsBcbproductComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-products-bcbproduct', template: "<mat-card>\r\n  <div class=\"product-bar\">\r\n    <div class=\"product-first block\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Naam</mat-label>\r\n        <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"Import()\">\r\n        Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"ResetImport()\">\r\n        Reset Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Opslaan\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Verwijderen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</mat-card>\r\n<br />\r\n<mat-card>\r\n  <mat-card-content>\r\n    <b>Eigenschap</b>\r\n    <app-beheer-products-eigenschap *ngFor=\"let eigenschap of BCBProductViewModel.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n  </mat-card-content>\r\n</mat-card>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ImportApiClient }, { type: i2.ProductsService }]; }, propDecorators: { BCBProductViewModel: [{

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-products/beheer-products-eigenschap/beheer-products-eigenschap.component.mjs

@@ -75,9 +75,9 @@ export class BeheerProductsEigenschapComponent {
         return false;
     }
 }
-BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: i1.ProductsService }, { token: i2.MatDialog }, { token: i3.ProductsApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<table class=\"full-width\">\r\n  <tr class=\"row\" (click)=\"Toggle()\" [ngClass]=\"{'warning': !eigenschap.connected}\">\r\n    <td class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && ShowArrow()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && ShowArrow()\">expand_less</mat-icon>\r\n    </td>\r\n    <td class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.bcbEigenschapViewModel.name}}\r\n    </td>\r\n  </tr>\r\n  <ng-container *ngIf=\"eigenschap.open\">\r\n    <tr *ngFor=\"let optie of eigenschap.bcbProductEigenschapOptieViewModels\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <td></td>\r\n      <td class=\"optiecel\">{{ optie.bcbEigenschapOptieViewModel.name }}</td>\r\n      <td class=\"optiecel optiecellast\">\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.bcbEigenschapViewModel.name, optie.bcbEigenschapOptieViewModel.name)\">\r\n            Category\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td>&nbsp;</td>\r\n    </tr>\r\n  </ng-container>\r\n</table>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer}.eigenschapcel{border-bottom:2px solid #000}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerProductsEigenschapComponent, decorators: [{
+BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: i1.ProductsService }, { token: i2.MatDialog }, { token: i3.ProductsApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<table class=\"full-width\">\r\n  <tr class=\"row\" (click)=\"Toggle()\" [ngClass]=\"{'warning': !eigenschap.connected}\">\r\n    <td class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && ShowArrow()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && ShowArrow()\">expand_less</mat-icon>\r\n    </td>\r\n    <td class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.bcbEigenschapViewModel.name}}\r\n    </td>\r\n  </tr>\r\n  <ng-container *ngIf=\"eigenschap.open\">\r\n    <tr *ngFor=\"let optie of eigenschap.bcbProductEigenschapOptieViewModels\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <td></td>\r\n      <td class=\"optiecel\">{{ optie.bcbEigenschapOptieViewModel.name }}</td>\r\n      <td class=\"optiecel optiecellast\">\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.bcbEigenschapViewModel.name, optie.bcbEigenschapOptieViewModel.name)\">\r\n            Category\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td>&nbsp;</td>\r\n    </tr>\r\n  </ng-container>\r\n</table>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer}.eigenschapcel{border-bottom:2px solid #000}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-products-eigenschap', template: "<table class=\"full-width\">\r\n  <tr class=\"row\" (click)=\"Toggle()\" [ngClass]=\"{'warning': !eigenschap.connected}\">\r\n    <td class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && ShowArrow()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && ShowArrow()\">expand_less</mat-icon>\r\n    </td>\r\n    <td class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.bcbEigenschapViewModel.name}}\r\n    </td>\r\n  </tr>\r\n  <ng-container *ngIf=\"eigenschap.open\">\r\n    <tr *ngFor=\"let optie of eigenschap.bcbProductEigenschapOptieViewModels\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <td></td>\r\n      <td class=\"optiecel\">{{ optie.bcbEigenschapOptieViewModel.name }}</td>\r\n      <td class=\"optiecel optiecellast\">\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.bcbEigenschapViewModel.name, optie.bcbEigenschapOptieViewModel.name)\">\r\n            Category\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td>&nbsp;</td>\r\n    </tr>\r\n  </ng-container>\r\n</table>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer}.eigenschapcel{border-bottom:2px solid #000}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ProductsService }, { type: i2.MatDialog }, { type: i3.ProductsApiClient }]; }, propDecorators: { eigenschap: [{

package/esm2020/src/app/modules/fabrikantencore/beheer/components/beheer-products/beheer-products-koppel-filteroption-dailog/beheer-products-koppel-filteroption-dailog.component.mjs

@@ -116,9 +116,9 @@ export class BeheerProductsKoppelFilteroptionDailogComponent {
         });
     }
 }
-BeheerProductsKoppelFilteroptionDailogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.FiltersApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsKoppelFilteroptionDailogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: BeheerProductsKoppelFilteroptionDailogComponent, selector: "app-beheer-products-koppel-filteroption-dailog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}\n"], dependencies: [{ 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: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11.FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, decorators: [{
+BeheerProductsKoppelFilteroptionDailogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.FiltersApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsKoppelFilteroptionDailogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsKoppelFilteroptionDailogComponent, selector: "app-beheer-products-koppel-filteroption-dailog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}\n"], dependencies: [{ 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: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11.FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-products-koppel-filteroption-dailog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: i2.FiltersApiClient }]; } });