fabrikantencore 2.10.5 → 2.10.8

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

@@ -38,11 +38,11 @@ class BeheerCategoriesComponent {
             this.Loading = false;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerCategoriesComponent, deps: [{ token: i1.CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </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.MatLegacyButton, 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: i4.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i5.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i6.FabLoaderComponent, selector: "app-fab-loader" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerCategoriesComponent, deps: [{ token: i1.CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </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.MatLegacyButton, 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: i4.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i5.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i6.FabLoaderComponent, selector: "app-fab-loader" }] });
 }
 export { BeheerCategoriesComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerCategoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", 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\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </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/esm2022/src/app/modules/fabrikantencore/beheer/components/beheer-connect-category-dialog/beheer-connect-category-dialog.component.mjs

@@ -61,11 +61,11 @@ class BeheerConnectCategoryDialogComponent {
             this.Loading = false;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1.MatLegacyDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.CategoriesApiClient }, { token: i3.ProductsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.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 label=\"Nieuw\">\r\n      <div class=\"bar\">\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-group>\r\n</div>\r\n", styles: [".tool-bar{padding:2px}\n"], dependencies: [{ 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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", 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.MatLegacyButton, 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.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.FabLoaderComponent, selector: "app-fab-loader" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1.MatLegacyDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.CategoriesApiClient }, { token: i3.ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.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 label=\"Nieuw\">\r\n      <div class=\"bar\">\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-group>\r\n</div>\r\n", styles: [".tool-bar{padding:2px}\n"], dependencies: [{ 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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", 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.MatLegacyButton, 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.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.FabLoaderComponent, selector: "app-fab-loader" }] });
 }
 export { BeheerConnectCategoryDialogComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", 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=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.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 label=\"Nieuw\">\r\n      <div class=\"bar\">\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-group>\r\n</div>\r\n", styles: [".tool-bar{padding:2px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatLegacyDialogRef }, { type: undefined, decorators: [{

package/esm2022/src/app/modules/fabrikantencore/beheer/components/beheer-deeplink/beheer-deeplink.component.mjs

@@ -43,11 +43,11 @@ class BeheerDeeplinkComponent {
             this.ChangeDetectorRef.detectChanges();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerDeeplinkComponent, deps: [{ token: i1.ProductsApiClient }, { token: i2.AuthenticationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerDeeplinkComponent, selector: "app-beheer-deeplink", 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\r\n<div *ngIf=\"!Loading\" class=\"main-window\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Filter</td>\r\n          <td>Option</td>\r\n          <!--<td>URL</td>-->\r\n        </tr>\r\n        <ng-container *ngFor=\"let filter of DeeplinkViewModel.filters\">\r\n          <tr class=\"header\">\r\n            <td>\r\n              {{ filter.filterName }}\r\n            </td>\r\n            <td></td>\r\n          </tr>\r\n          <tr *ngFor=\"let option of filter.optionURLNames\">\r\n            <td></td>\r\n            <td>{{ option }}</td>\r\n            <!--<td>\r\n              <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n                <a href=\"{{ GetLink(language, product) }}\" target=\"_blank\">{{ GetLink(language, product) }}</a>\r\n              </div>\r\n            </td>-->\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>URL</mat-label>\r\n        <input matInput [(ngModel)]=\"URL\">\r\n      </mat-form-field>\r\n\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Category</td>\r\n          <td>Link</td>\r\n          <!--<td>URL</td>-->\r\n        </tr>\r\n        <ng-container *ngFor=\"let category of DeeplinkViewModel.categories\">\r\n          <tr>\r\n            <td>\r\n              {{ category }}\r\n            </td>\r\n            <td>\r\n              <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n                <a href=\"{{ GetLinkCategory(language, category) }}\" target=\"_blank\">\r\n                {{ GetLinkCategory(language, category) }}\r\n                </a>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Naam</td>\r\n          <td>URL Naam</td>\r\n          <td>URL</td>\r\n        </tr>\r\n        <tr *ngFor=\"let product of DeeplinkViewModel.products\">\r\n          <td>{{ product.productName }}</td>\r\n          <td>{{ product.productURLName }}</td>\r\n          <td>\r\n            <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n              <a href=\"{{ GetLink(language, product) }}\" target=\"_blank\">{{ GetLink(language, product) }}</a>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n", styles: [".main-window{padding:5px}.full-width{width:100%}.header{font-weight:700}.header td{border-bottom:1px solid #000}\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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", 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.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i8.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i9.FabLoaderComponent, selector: "app-fab-loader" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerDeeplinkComponent, deps: [{ token: i1.ProductsApiClient }, { token: i2.AuthenticationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerDeeplinkComponent, selector: "app-beheer-deeplink", 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\r\n<div *ngIf=\"!Loading\" class=\"main-window\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Filter</td>\r\n          <td>Option</td>\r\n          <!--<td>URL</td>-->\r\n        </tr>\r\n        <ng-container *ngFor=\"let filter of DeeplinkViewModel.filters\">\r\n          <tr class=\"header\">\r\n            <td>\r\n              {{ filter.filterName }}\r\n            </td>\r\n            <td></td>\r\n          </tr>\r\n          <tr *ngFor=\"let option of filter.optionURLNames\">\r\n            <td></td>\r\n            <td>{{ option }}</td>\r\n            <!--<td>\r\n              <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n                <a href=\"{{ GetLink(language, product) }}\" target=\"_blank\">{{ GetLink(language, product) }}</a>\r\n              </div>\r\n            </td>-->\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>URL</mat-label>\r\n        <input matInput [(ngModel)]=\"URL\">\r\n      </mat-form-field>\r\n\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Category</td>\r\n          <td>Link</td>\r\n          <!--<td>URL</td>-->\r\n        </tr>\r\n        <ng-container *ngFor=\"let category of DeeplinkViewModel.categories\">\r\n          <tr>\r\n            <td>\r\n              {{ category }}\r\n            </td>\r\n            <td>\r\n              <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n                <a href=\"{{ GetLinkCategory(language, category) }}\" target=\"_blank\">\r\n                {{ GetLinkCategory(language, category) }}\r\n                </a>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Naam</td>\r\n          <td>URL Naam</td>\r\n          <td>URL</td>\r\n        </tr>\r\n        <tr *ngFor=\"let product of DeeplinkViewModel.products\">\r\n          <td>{{ product.productName }}</td>\r\n          <td>{{ product.productURLName }}</td>\r\n          <td>\r\n            <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n              <a href=\"{{ GetLink(language, product) }}\" target=\"_blank\">{{ GetLink(language, product) }}</a>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n", styles: [".main-window{padding:5px}.full-width{width:100%}.header{font-weight:700}.header td{border-bottom:1px solid #000}\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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", 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.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i8.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i9.FabLoaderComponent, selector: "app-fab-loader" }] });
 }
 export { BeheerDeeplinkComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerDeeplinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerDeeplinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-deeplink', 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\r\n<div *ngIf=\"!Loading\" class=\"main-window\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Filter</td>\r\n          <td>Option</td>\r\n          <!--<td>URL</td>-->\r\n        </tr>\r\n        <ng-container *ngFor=\"let filter of DeeplinkViewModel.filters\">\r\n          <tr class=\"header\">\r\n            <td>\r\n              {{ filter.filterName }}\r\n            </td>\r\n            <td></td>\r\n          </tr>\r\n          <tr *ngFor=\"let option of filter.optionURLNames\">\r\n            <td></td>\r\n            <td>{{ option }}</td>\r\n            <!--<td>\r\n              <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n                <a href=\"{{ GetLink(language, product) }}\" target=\"_blank\">{{ GetLink(language, product) }}</a>\r\n              </div>\r\n            </td>-->\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>URL</mat-label>\r\n        <input matInput [(ngModel)]=\"URL\">\r\n      </mat-form-field>\r\n\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Category</td>\r\n          <td>Link</td>\r\n          <!--<td>URL</td>-->\r\n        </tr>\r\n        <ng-container *ngFor=\"let category of DeeplinkViewModel.categories\">\r\n          <tr>\r\n            <td>\r\n              {{ category }}\r\n            </td>\r\n            <td>\r\n              <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n                <a href=\"{{ GetLinkCategory(language, category) }}\" target=\"_blank\">\r\n                {{ GetLinkCategory(language, category) }}\r\n                </a>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <table class=\"full-width\">\r\n        <tr class=\"header\">\r\n          <td>Naam</td>\r\n          <td>URL Naam</td>\r\n          <td>URL</td>\r\n        </tr>\r\n        <tr *ngFor=\"let product of DeeplinkViewModel.products\">\r\n          <td>{{ product.productName }}</td>\r\n          <td>{{ product.productURLName }}</td>\r\n          <td>\r\n            <div *ngFor=\"let language of DeeplinkViewModel.languages\">\r\n              <a href=\"{{ GetLink(language, product) }}\" target=\"_blank\">{{ GetLink(language, product) }}</a>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n", styles: [".main-window{padding:5px}.full-width{width:100%}.header{font-weight:700}.header td{border-bottom:1px solid #000}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ProductsApiClient }, { type: i2.AuthenticationService }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/src/app/modules/fabrikantencore/beheer/components/beheer-display-ebo/beheer-display-ebo.component.mjs

@@ -17,11 +17,11 @@ class BeheerDisplayEboComponent {
         }
         return text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerDisplayEboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerDisplayEboComponent, selector: "app-beheer-display-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<!--<div class=\"row\">\r\n  <div class=\"flex-auto\" *ngFor=\"let do of ebo.dOs\">\r\n    <mat-form-field class=\"full-width\" appearance=\"fill\">\r\n      <mat-label>{{ do.doType }}</mat-label>\r\n      <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\r\n    </mat-form-field>\r\n  </div>\r\n</div>-->\r\n<div>\r\n  {{ GetText() }}\r\n</div>\r\n", styles: [".row{display:flex}.flex-auto{flex:auto}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerDisplayEboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerDisplayEboComponent, selector: "app-beheer-display-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<!--<div class=\"row\">\r\n  <div class=\"flex-auto\" *ngFor=\"let do of ebo.dOs\">\r\n    <mat-form-field class=\"full-width\" appearance=\"fill\">\r\n      <mat-label>{{ do.doType }}</mat-label>\r\n      <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\r\n    </mat-form-field>\r\n  </div>\r\n</div>-->\r\n<div>\r\n  {{ GetText() }}\r\n</div>\r\n", styles: [".row{display:flex}.flex-auto{flex:auto}\n"] });
 }
 export { BeheerDisplayEboComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerDisplayEboComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerDisplayEboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-display-ebo', template: "<!--<div class=\"row\">\r\n  <div class=\"flex-auto\" *ngFor=\"let do of ebo.dOs\">\r\n    <mat-form-field class=\"full-width\" appearance=\"fill\">\r\n      <mat-label>{{ do.doType }}</mat-label>\r\n      <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\r\n    </mat-form-field>\r\n  </div>\r\n</div>-->\r\n<div>\r\n  {{ GetText() }}\r\n</div>\r\n", styles: [".row{display:flex}.flex-auto{flex:auto}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { ebo: [{

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

@@ -128,11 +128,11 @@ class BeheerEboKoppelComponent {
             this.ChangeDetectorRef.detectChanges();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: i1.EBOKoppelApiClient }, { token: i2.ImportSetsService }, { token: i3.MatLegacyDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerEboKoppelComponent, selector: "app-beheer-ebo-koppel", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\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\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\" (click)=\"lastopened = type.type;\" [expanded]=\"lastopened === type.type\">\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 }}\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let naam of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ naam.doNaam }} ({{ naam.ebOs.length }})\r\n              </div>\r\n              <div class=\"button-row\">\r\n                <button mat-raised-button (click)=\"Connect(naam.ebOs[0].id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(naam.ebOs[0].id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(naam.ebOs[0].id)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let ebo of naam.ebOs\" class=\"row eborow\">\r\n              <div class=\"text-div\">\r\n                {{ ebo.eboNaam }}\r\n              </div>\r\n              <div>\r\n                <div *ngFor=\"let filteroption of ebo.filterOptions\">\r\n                  {{ filteroption.filterName }}: {{ filteroption.filterOptionName }}\r\n                </div>\r\n\r\n                <div *ngFor=\"let category of ebo.categories\">\r\n                  Category: {{ category.categoryName }}\r\n                </div>\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}.loader{position:fixed;width:100%;z-index:100;background-color:#fffa;height:100%;top:0}.row{display:flex;align-items:center;cursor:pointer}.eborow{padding:3px;border-bottom:1px solid #000}.main-content{padding:5px}.icon-div{width:24px;height:24px}.text-div{flex:auto}.button-row{display:flex;gap:5px}\n"], dependencies: [{ 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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, selector: "mat-label" }, { 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.MatLegacyButton, 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: i8.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i8.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i9.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i13.FabLoaderComponent, selector: "app-fab-loader" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: i1.EBOKoppelApiClient }, { token: i2.ImportSetsService }, { token: i3.MatLegacyDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerEboKoppelComponent, selector: "app-beheer-ebo-koppel", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\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\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\" (click)=\"lastopened = type.type;\" [expanded]=\"lastopened === type.type\">\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 }}\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let naam of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ naam.doNaam }} ({{ naam.ebOs.length }})\r\n              </div>\r\n              <div class=\"button-row\">\r\n                <button mat-raised-button (click)=\"Connect(naam.ebOs[0].id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(naam.ebOs[0].id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(naam.ebOs[0].id)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let ebo of naam.ebOs\" class=\"row eborow\">\r\n              <div class=\"text-div\">\r\n                {{ ebo.eboNaam }}\r\n              </div>\r\n              <div>\r\n                <div *ngFor=\"let filteroption of ebo.filterOptions\">\r\n                  {{ filteroption.filterName }}: {{ filteroption.filterOptionName }}\r\n                </div>\r\n\r\n                <div *ngFor=\"let category of ebo.categories\">\r\n                  Category: {{ category.categoryName }}\r\n                </div>\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}.loader{position:fixed;width:100%;z-index:100;background-color:#fffa;height:100%;top:0}.row{display:flex;align-items:center;cursor:pointer}.eborow{padding:3px;border-bottom:1px solid #000}.main-content{padding:5px}.icon-div{width:24px;height:24px}.text-div{flex:auto}.button-row{display:flex;gap:5px}\n"], dependencies: [{ 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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, selector: "mat-label" }, { 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.MatLegacyButton, 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: i8.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i8.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i9.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i13.FabLoaderComponent, selector: "app-fab-loader" }] });
 }
 export { BeheerEboKoppelComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerEboKoppelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", 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()\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\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\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\" (click)=\"lastopened = type.type;\" [expanded]=\"lastopened === type.type\">\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 }}\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let naam of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ naam.doNaam }} ({{ naam.ebOs.length }})\r\n              </div>\r\n              <div class=\"button-row\">\r\n                <button mat-raised-button (click)=\"Connect(naam.ebOs[0].id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(naam.ebOs[0].id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(naam.ebOs[0].id)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let ebo of naam.ebOs\" class=\"row eborow\">\r\n              <div class=\"text-div\">\r\n                {{ ebo.eboNaam }}\r\n              </div>\r\n              <div>\r\n                <div *ngFor=\"let filteroption of ebo.filterOptions\">\r\n                  {{ filteroption.filterName }}: {{ filteroption.filterOptionName }}\r\n                </div>\r\n\r\n                <div *ngFor=\"let category of ebo.categories\">\r\n                  Category: {{ category.categoryName }}\r\n                </div>\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}.loader{position:fixed;width:100%;z-index:100;background-color:#fffa;height:100%;top:0}.row{display:flex;align-items:center;cursor:pointer}.eborow{padding:3px;border-bottom:1px solid #000}.main-content{padding:5px}.icon-div{width:24px;height:24px}.text-div{flex:auto}.button-row{display:flex;gap:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EBOKoppelApiClient }, { type: i2.ImportSetsService }, { type: i3.MatLegacyDialog }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/src/app/modules/fabrikantencore/beheer/components/beheer-filter/beheer-filter.component.mjs

@@ -208,11 +208,11 @@ class BeheerFilterComponent {
             alert('An unexpected error occured');
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerFilterComponent, deps: [{ token: i1.FiltersApiClient }, { token: i2.AuthenticationService }, { token: i3.MatLegacyDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerFilterComponent, selector: "app-beheer-filter", inputs: { filter: "filter" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"filter-name\">\r\n  <div class=\"flexauto\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label>Name</mat-label>\r\n      <input matInput [(ngModel)]=\"filter.name\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"save-div\">\r\n    <button mat-raised-button (click)=\"Save()\">Save</button>\r\n  </div>\r\n</div>\r\n<div>\r\n  <div class=\"filter-name\">\r\n    <div class=\"flexauto\">\r\n      Requires\r\n    </div>\r\n    <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n    <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n  </div>\r\n\r\n  <div *ngFor=\"let option of filter.requiresFilterOptions\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\r\n    {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n    <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n  </div>\r\n  <div *ngFor=\"let filter of filter.requiresFilters\" class=\"required-option\">\r\n    {{ filter.requiredFilterName }}\r\n    <button mat-raised-button>Remove</button>\r\n  </div>\r\n</div>\r\n<div>\r\n  <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n</div>\r\n<div class=\"filter-options-container\">\r\n  <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"input-item\" *ngFor=\"let option of GetFilterOptions()\" cdkDrag>\r\n      <span [ngClass]=\"{'selected': option.id == FilterOptionViewModel?.id }\">\r\n        {{ option.name }} (#{{ option.id }})\r\n      </span>\r\n\r\n      <button (click)=\"Open(option)\">Select</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<mat-card *ngIf=\"FilterOptionViewModel != null\">\r\n  <mat-card-content>\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-option-name flexauto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Name (#{{ FilterOptionViewModel.id }})</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterOptionViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <button mat-raised-button (click)=\"SaveFilterOption(FilterOptionViewModel)\">Save</button>\r\n      <button mat-raised-button (click)=\"RemoveFilterOption(FilterOptionViewModel)\">Remove</button>\r\n    </div>\r\n    <div>\r\n      <div class=\"filter-name\">\r\n        <div class=\"flexauto\">\r\n          Requires\r\n        </div>\r\n        <button mat-raised-button (click)=\"RequireFilterOptionFilterOption()\">FilterOption</button>\r\n      </div>\r\n\r\n      <div *ngFor=\"let option of FilterOptionViewModel.required\" class=\"required-option\">\r\n        {{ option.filterName }}: {{ option.filterOptionName }}\r\n        <button mat-raised-button (click)=\"RemoveRequireFilterOptionFilterOption(option)\">Remove</button>\r\n      </div>\r\n    </div>\r\n  </mat-card-content>\r\n</mat-card>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.save-div{padding-left:10px}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{border:solid 1px #ccc;display:block;background:white;border-radius:4px}.input-item{padding:5px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", 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.MatLegacyButton, 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.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerFilterComponent, deps: [{ token: i1.FiltersApiClient }, { token: i2.AuthenticationService }, { token: i3.MatLegacyDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerFilterComponent, selector: "app-beheer-filter", inputs: { filter: "filter" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"filter-name\">\r\n  <div class=\"flexauto\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label>Name</mat-label>\r\n      <input matInput [(ngModel)]=\"filter.name\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"save-div\">\r\n    <button mat-raised-button (click)=\"Save()\">Save</button>\r\n  </div>\r\n</div>\r\n<div>\r\n  <div class=\"filter-name\">\r\n    <div class=\"flexauto\">\r\n      Requires\r\n    </div>\r\n    <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n    <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n  </div>\r\n\r\n  <div *ngFor=\"let option of filter.requiresFilterOptions\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\r\n    {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n    <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n  </div>\r\n  <div *ngFor=\"let filter of filter.requiresFilters\" class=\"required-option\">\r\n    {{ filter.requiredFilterName }}\r\n    <button mat-raised-button>Remove</button>\r\n  </div>\r\n</div>\r\n<div>\r\n  <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n</div>\r\n<div class=\"filter-options-container\">\r\n  <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"input-item\" *ngFor=\"let option of GetFilterOptions()\" cdkDrag>\r\n      <span [ngClass]=\"{'selected': option.id == FilterOptionViewModel?.id }\">\r\n        {{ option.name }} (#{{ option.id }})\r\n      </span>\r\n\r\n      <button (click)=\"Open(option)\">Select</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<mat-card *ngIf=\"FilterOptionViewModel != null\">\r\n  <mat-card-content>\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-option-name flexauto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Name (#{{ FilterOptionViewModel.id }})</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterOptionViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <button mat-raised-button (click)=\"SaveFilterOption(FilterOptionViewModel)\">Save</button>\r\n      <button mat-raised-button (click)=\"RemoveFilterOption(FilterOptionViewModel)\">Remove</button>\r\n    </div>\r\n    <div>\r\n      <div class=\"filter-name\">\r\n        <div class=\"flexauto\">\r\n          Requires\r\n        </div>\r\n        <button mat-raised-button (click)=\"RequireFilterOptionFilterOption()\">FilterOption</button>\r\n      </div>\r\n\r\n      <div *ngFor=\"let option of FilterOptionViewModel.required\" class=\"required-option\">\r\n        {{ option.filterName }}: {{ option.filterOptionName }}\r\n        <button mat-raised-button (click)=\"RemoveRequireFilterOptionFilterOption(option)\">Remove</button>\r\n      </div>\r\n    </div>\r\n  </mat-card-content>\r\n</mat-card>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.save-div{padding-left:10px}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{border:solid 1px #ccc;display:block;background:white;border-radius:4px}.input-item{padding:5px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", 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.MatLegacyButton, 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.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
 export { BeheerFilterComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-filter', template: "<div class=\"filter-name\">\r\n  <div class=\"flexauto\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label>Name</mat-label>\r\n      <input matInput [(ngModel)]=\"filter.name\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"save-div\">\r\n    <button mat-raised-button (click)=\"Save()\">Save</button>\r\n  </div>\r\n</div>\r\n<div>\r\n  <div class=\"filter-name\">\r\n    <div class=\"flexauto\">\r\n      Requires\r\n    </div>\r\n    <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n    <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n  </div>\r\n\r\n  <div *ngFor=\"let option of filter.requiresFilterOptions\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\r\n    {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n    <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n  </div>\r\n  <div *ngFor=\"let filter of filter.requiresFilters\" class=\"required-option\">\r\n    {{ filter.requiredFilterName }}\r\n    <button mat-raised-button>Remove</button>\r\n  </div>\r\n</div>\r\n<div>\r\n  <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n</div>\r\n<div class=\"filter-options-container\">\r\n  <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n    <div class=\"input-item\" *ngFor=\"let option of GetFilterOptions()\" cdkDrag>\r\n      <span [ngClass]=\"{'selected': option.id == FilterOptionViewModel?.id }\">\r\n        {{ option.name }} (#{{ option.id }})\r\n      </span>\r\n\r\n      <button (click)=\"Open(option)\">Select</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<mat-card *ngIf=\"FilterOptionViewModel != null\">\r\n  <mat-card-content>\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-option-name flexauto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Name (#{{ FilterOptionViewModel.id }})</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterOptionViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <button mat-raised-button (click)=\"SaveFilterOption(FilterOptionViewModel)\">Save</button>\r\n      <button mat-raised-button (click)=\"RemoveFilterOption(FilterOptionViewModel)\">Remove</button>\r\n    </div>\r\n    <div>\r\n      <div class=\"filter-name\">\r\n        <div class=\"flexauto\">\r\n          Requires\r\n        </div>\r\n        <button mat-raised-button (click)=\"RequireFilterOptionFilterOption()\">FilterOption</button>\r\n      </div>\r\n\r\n      <div *ngFor=\"let option of FilterOptionViewModel.required\" class=\"required-option\">\r\n        {{ option.filterName }}: {{ option.filterOptionName }}\r\n        <button mat-raised-button (click)=\"RemoveRequireFilterOptionFilterOption(option)\">Remove</button>\r\n      </div>\r\n    </div>\r\n  </mat-card-content>\r\n</mat-card>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.save-div{padding-left:10px}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{border:solid 1px #ccc;display:block;background:white;border-radius:4px}.input-item{padding:5px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FiltersApiClient }, { type: i2.AuthenticationService }, { type: i3.MatLegacyDialog }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{

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

@@ -81,11 +81,11 @@ class BeheerFiltersComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerFiltersComponent, deps: [{ token: i1.FiltersApiClient }, { token: i2.AuthenticationService }, { token: i3.MatLegacyDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerFiltersComponent, selector: "app-beheer-filters", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"InputsViewModel\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                <span [ngClass]=\"{'selected': input.filter?.id == InputViewModel?.filter?.id }\">\r\n                  {{ input.filter.name }} (#{{ input.filter.id }})\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                <span [ngClass]=\"{'selected': input.range?.id == InputViewModel?.range?.id }\">\r\n                  {{ input.range.name }} (#{{ input.range.id }})\r\n                </span>\r\n                \r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <app-beheer-filter [filter]=\"InputViewModel.filter\" (reload)=\"LoadInputs()\"></app-beheer-filter>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n            <app-beheer-rangeinput [rangeinput]=\"InputViewModel.range\" (reload)=\"LoadInputs()\"></app-beheer-rangeinput>\r\n           </ng-container>\r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.loader{position:fixed;z-index:100;width:100%;background-color:#fffa;top:0;height:100%}.AND{border-color:red}.OR{border-color:#0f0}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.selected{font-weight:700}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow-y:scroll;height:calc(100vH - 188px)}.input-item{padding:5px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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.MatLegacyButton, 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.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i9.FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: i10.BeheerFilterComponent, selector: "app-beheer-filter", inputs: ["filter"], outputs: ["reload"] }, { kind: "component", type: i11.BeheerRangeinputComponent, selector: "app-beheer-rangeinput", inputs: ["rangeinput"], outputs: ["reload"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerFiltersComponent, deps: [{ token: i1.FiltersApiClient }, { token: i2.AuthenticationService }, { token: i3.MatLegacyDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerFiltersComponent, selector: "app-beheer-filters", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"InputsViewModel\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                <span [ngClass]=\"{'selected': input.filter?.id == InputViewModel?.filter?.id }\">\r\n                  {{ input.filter.name }} (#{{ input.filter.id }})\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                <span [ngClass]=\"{'selected': input.range?.id == InputViewModel?.range?.id }\">\r\n                  {{ input.range.name }} (#{{ input.range.id }})\r\n                </span>\r\n                \r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <app-beheer-filter [filter]=\"InputViewModel.filter\" (reload)=\"LoadInputs()\"></app-beheer-filter>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n            <app-beheer-rangeinput [rangeinput]=\"InputViewModel.range\" (reload)=\"LoadInputs()\"></app-beheer-rangeinput>\r\n           </ng-container>\r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.loader{position:fixed;z-index:100;width:100%;background-color:#fffa;top:0;height:100%}.AND{border-color:red}.OR{border-color:#0f0}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.selected{font-weight:700}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow-y:scroll;height:calc(100vH - 188px)}.input-item{padding:5px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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.MatLegacyButton, 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.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i9.FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: i10.BeheerFilterComponent, selector: "app-beheer-filter", inputs: ["filter"], outputs: ["reload"] }, { kind: "component", type: i11.BeheerRangeinputComponent, selector: "app-beheer-rangeinput", inputs: ["rangeinput"], outputs: ["reload"] }] });
 }
 export { BeheerFiltersComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-filters', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"InputsViewModel\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                <span [ngClass]=\"{'selected': input.filter?.id == InputViewModel?.filter?.id }\">\r\n                  {{ input.filter.name }} (#{{ input.filter.id }})\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                <span [ngClass]=\"{'selected': input.range?.id == InputViewModel?.range?.id }\">\r\n                  {{ input.range.name }} (#{{ input.range.id }})\r\n                </span>\r\n                \r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <app-beheer-filter [filter]=\"InputViewModel.filter\" (reload)=\"LoadInputs()\"></app-beheer-filter>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n            <app-beheer-rangeinput [rangeinput]=\"InputViewModel.range\" (reload)=\"LoadInputs()\"></app-beheer-rangeinput>\r\n           </ng-container>\r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.loader{position:fixed;z-index:100;width:100%;background-color:#fffa;top:0;height:100%}.AND{border-color:red}.OR{border-color:#0f0}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.selected{font-weight:700}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow-y:scroll;height:calc(100vH - 188px)}.input-item{padding:5px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FiltersApiClient }, { type: i2.AuthenticationService }, { type: i3.MatLegacyDialog }, { type: i0.ChangeDetectorRef }]; } });

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

@@ -49,11 +49,11 @@ class BeheerImportSetsDialogComponent {
             this.Loading = false;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ImportSetsService }, { token: i2.AuthenticationService }, { token: i3.MatLegacyDialogRef }, { token: MAT_DIALOG_DATA }, { token: i4.ImportApiClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatLegacyButton, 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: i10.FabLoaderComponent, selector: "app-fab-loader" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ImportSetsService }, { token: i2.AuthenticationService }, { token: i3.MatLegacyDialogRef }, { token: MAT_DIALOG_DATA }, { token: i4.ImportApiClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatLegacyButton, 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: i10.FabLoaderComponent, selector: "app-fab-loader" }] });
 }
 export { BeheerImportSetsDialogComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", 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: i0.ChangeDetectorRef }, { type: i1.ImportSetsService }, { type: i2.AuthenticationService }, { type: i3.MatLegacyDialogRef }, { type: undefined, decorators: [{

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

@@ -53,11 +53,11 @@ class BeheerImportSetsEboComponent {
             this.Opened = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsEboComponent, deps: [{ token: i1.ImportApiClient }, { token: i2.AuthenticationService }, { token: i3.ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"icon-div\" (click)=\"Open()\">\n    <mat-icon *ngIf=\"!Opened\" class=\"expand_more\">expand_more</mat-icon>\n    <mat-icon *ngIf=\"Opened\" class=\"expand_less\">expand_less</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 *ngIf=\"Opened\">\n  <div *ngIf=\"Loading\">\n    <app-fab-loader></app-fab-loader>\n  </div>\n  <div *ngIf=\"!Loading\" class=\"props\">\n    <div class=\"opbouw\">Opbouw</div>\n    <div *ngFor=\"let opbouw of BCBImportOpenResponse.bcbImportOpbouwen\">\n      <app-beheer-import-sets-opbouw [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\n    </div>\n\n    <div class=\"opbouw\">Eigenschap</div>\n    <div *ngFor=\"let eigenschap of BCBImportOpenResponse.bcbImportEigenschappen\">\n      <app-beheer-import-sets-eigenschap [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\n    </div>\n  </div>\n</div>\n\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 .props{padding-left:20px}app-beheer-import-sets-ebo .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}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: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i5.MatLegacyFormField; }), selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLegacyLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatLegacyInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return i8.FabLoaderComponent; }), selector: "app-fab-loader" }, { kind: "component", type: i0.forwardRef(function () { return BeheerImportSetsOpbouwComponent; }), selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i0.forwardRef(function () { return i9.BeheerImportSetsEigenschapComponent; }), selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsEboComponent, deps: [{ token: i1.ImportApiClient }, { token: i2.AuthenticationService }, { token: i3.ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"icon-div\" (click)=\"Open()\">\n    <mat-icon *ngIf=\"!Opened\" class=\"expand_more\">expand_more</mat-icon>\n    <mat-icon *ngIf=\"Opened\" class=\"expand_less\">expand_less</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 *ngIf=\"Opened\">\n  <div *ngIf=\"Loading\">\n    <app-fab-loader></app-fab-loader>\n  </div>\n  <div *ngIf=\"!Loading\" class=\"props\">\n    <div class=\"opbouw\">Opbouw</div>\n    <div *ngFor=\"let opbouw of BCBImportOpenResponse.bcbImportOpbouwen\">\n      <app-beheer-import-sets-opbouw [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\n    </div>\n\n    <div class=\"opbouw\">Eigenschap</div>\n    <div *ngFor=\"let eigenschap of BCBImportOpenResponse.bcbImportEigenschappen\">\n      <app-beheer-import-sets-eigenschap [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\n    </div>\n  </div>\n</div>\n\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 .props{padding-left:20px}app-beheer-import-sets-ebo .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}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: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i5.MatLegacyFormField; }), selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLegacyLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatLegacyInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return i8.FabLoaderComponent; }), selector: "app-fab-loader" }, { kind: "component", type: i0.forwardRef(function () { return BeheerImportSetsOpbouwComponent; }), selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i0.forwardRef(function () { return i9.BeheerImportSetsEigenschapComponent; }), selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 export { BeheerImportSetsEboComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsEboComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsEboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-ebo', encapsulation: ViewEncapsulation.None, template: "<div class=\"row\">\n  <div class=\"icon-div\" (click)=\"Open()\">\n    <mat-icon *ngIf=\"!Opened\" class=\"expand_more\">expand_more</mat-icon>\n    <mat-icon *ngIf=\"Opened\" class=\"expand_less\">expand_less</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 *ngIf=\"Opened\">\n  <div *ngIf=\"Loading\">\n    <app-fab-loader></app-fab-loader>\n  </div>\n  <div *ngIf=\"!Loading\" class=\"props\">\n    <div class=\"opbouw\">Opbouw</div>\n    <div *ngFor=\"let opbouw of BCBImportOpenResponse.bcbImportOpbouwen\">\n      <app-beheer-import-sets-opbouw [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\n    </div>\n\n    <div class=\"opbouw\">Eigenschap</div>\n    <div *ngFor=\"let eigenschap of BCBImportOpenResponse.bcbImportEigenschappen\">\n      <app-beheer-import-sets-eigenschap [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\n    </div>\n  </div>\n</div>\n\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 .props{padding-left:20px}app-beheer-import-sets-ebo .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}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 [{ type: i1.ImportApiClient }, { type: i2.AuthenticationService }, { type: i3.ImportSetsService }]; }, propDecorators: { ebo: [{
@@ -90,11 +90,11 @@ class BeheerImportSetsOpbouwComponent {
         base += this.opbouw.value + "";
         this.ImportSetsService.ChangeImportSetValue(base, 1, this.opbouw.selected, this.ChangeDetectorRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsOpbouwComponent, deps: [{ token: i3.ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<div class=\"top-row\">\r\n  <div class=\"icon-div\" (click)=\"Toggle()\">\r\n    <ng-container *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">\r\n      <mat-icon *ngIf=\"!opbouw.open\" class=\"expand_more\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\" class=\"expand_less\">expand_less</mat-icon>\r\n    </ng-container>\r\n    \r\n  </div>\r\n  <div class=\"text-div flexauto\" (click)=\"Toggle()\">\r\n    {{ opbouw.name }}\r\n  </div>\r\n  <div class=\"check-div\">\r\n    <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\r\n  </div>\r\n</div>\r\n<div class=\"content\" *ngIf=\"opbouw.open\">\r\n  <div class=\"ebobox\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\">\r\n    <app-beheer-import-sets-ebo [ebo]=\"ebo\"></app-beheer-import-sets-ebo>\r\n  </div>\r\n</div>\r\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}.ebobox{padding:10px;margin:10px;border:1px solid}\n"], dependencies: [{ 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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: ["ebo"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsOpbouwComponent, deps: [{ token: i3.ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<div class=\"top-row\">\r\n  <div class=\"icon-div\" (click)=\"Toggle()\">\r\n    <ng-container *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">\r\n      <mat-icon *ngIf=\"!opbouw.open\" class=\"expand_more\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\" class=\"expand_less\">expand_less</mat-icon>\r\n    </ng-container>\r\n    \r\n  </div>\r\n  <div class=\"text-div flexauto\" (click)=\"Toggle()\">\r\n    {{ opbouw.name }}\r\n  </div>\r\n  <div class=\"check-div\">\r\n    <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\r\n  </div>\r\n</div>\r\n<div class=\"content\" *ngIf=\"opbouw.open\">\r\n  <div class=\"ebobox\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\">\r\n    <app-beheer-import-sets-ebo [ebo]=\"ebo\"></app-beheer-import-sets-ebo>\r\n  </div>\r\n</div>\r\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}.ebobox{padding:10px;margin:10px;border:1px solid}\n"], dependencies: [{ 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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: ["ebo"] }] });
 }
 export { BeheerImportSetsOpbouwComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsOpbouwComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsOpbouwComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-opbouw', template: "<div class=\"top-row\">\r\n  <div class=\"icon-div\" (click)=\"Toggle()\">\r\n    <ng-container *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">\r\n      <mat-icon *ngIf=\"!opbouw.open\" class=\"expand_more\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\" class=\"expand_less\">expand_less</mat-icon>\r\n    </ng-container>\r\n    \r\n  </div>\r\n  <div class=\"text-div flexauto\" (click)=\"Toggle()\">\r\n    {{ opbouw.name }}\r\n  </div>\r\n  <div class=\"check-div\">\r\n    <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\r\n  </div>\r\n</div>\r\n<div class=\"content\" *ngIf=\"opbouw.open\">\r\n  <div class=\"ebobox\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\">\r\n    <app-beheer-import-sets-ebo [ebo]=\"ebo\"></app-beheer-import-sets-ebo>\r\n  </div>\r\n</div>\r\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}.ebobox{padding:10px;margin:10px;border:1px solid}\n"] }]
         }], ctorParameters: function () { return [{ type: i3.ImportSetsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { opbouw: [{

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

@@ -21,11 +21,11 @@ class BeheerImportSetsEigenschapComponent {
         base += this.eigenschap.value + "";
         this.ImportSetsService.ChangeImportSetValue(base, 1, this.eigenschap.selected, this.ChangeDetectorRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsEigenschapComponent, deps: [{ token: i1.ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<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", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}\n"], dependencies: [{ kind: "component", type: i2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsEigenschapComponent, deps: [{ token: i1.ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<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", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}\n"], dependencies: [{ kind: "component", type: i2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 }
 export { BeheerImportSetsEigenschapComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsEigenschapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsEigenschapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-eigenschap', template: "<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", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ImportSetsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { eigenschap: [{

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

@@ -76,11 +76,11 @@ class BeheerImportSetsComponent {
     }
     ConnectRange(value) {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsComponent, deps: [{ token: i1.MatLegacyDialog }, { token: i2.ProductsService }, { token: i3.ImportSetsService }, { token: i4.ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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()\" 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\" (selectionChange)=\"Reload()\">\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-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            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\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              <div class=\"main-block\">\r\n                <div class=\"flex-auto\">\r\n                  <div>\r\n                    {{ value.value }}\r\n                  </div>\r\n                  <div class=\"main-block\">\r\n                    <button mat-raised-button (click)=\"ConnectFilter(value)\">\r\n                      Filter\r\n                    </button>\r\n                    <button mat-raised-button (click)=\"ConnectRange(value)\">\r\n                      Range\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <mat-form-field appearance=\"fill\" style=\"width: 50px;\">\r\n                    <mat-label>\r\n                      Count\r\n                    </mat-label>\r\n                    <input matInput type=\"number\" [(ngModel)]=\"value.count\" (change)=\"ProcessChange(value)\">\r\n                  </mat-form-field>\r\n                </div>\r\n              </div>\r\n              \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: ["app-beheer-import-sets .main-content{padding:5px}app-beheer-import-sets .flex-auto{flex:auto}app-beheer-import-sets .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets .mat-form-field-underline{bottom:0}app-beheer-import-sets .full-width{width:100%}app-beheer-import-sets .value-block{margin:3px}app-beheer-import-sets .importset-block{min-width:400px;margin-left:5px}app-beheer-import-sets .full-height{height:100%}app-beheer-import-sets .main-block{display:flex}app-beheer-import-sets .block{margin-top:5px;margin-bottom:5px}app-beheer-import-sets .toolbar{display:flex}app-beheer-import-sets .toolbar-item{margin-right:3px}app-beheer-import-sets .card{margin:3px}app-beheer-import-sets .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatLegacyButton, 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: i10.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i10.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i10.MatLegacyCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i11.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i13.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i14.FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: i15.BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i16.BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsComponent, deps: [{ token: i1.MatLegacyDialog }, { token: i2.ProductsService }, { token: i3.ImportSetsService }, { token: i4.ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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()\" 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\" (selectionChange)=\"Reload()\">\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-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            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\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              <div class=\"main-block\">\r\n                <div class=\"flex-auto\">\r\n                  <div>\r\n                    {{ value.value }}\r\n                  </div>\r\n                  <div class=\"main-block\">\r\n                    <button mat-raised-button (click)=\"ConnectFilter(value)\">\r\n                      Filter\r\n                    </button>\r\n                    <button mat-raised-button (click)=\"ConnectRange(value)\">\r\n                      Range\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <mat-form-field appearance=\"fill\" style=\"width: 50px;\">\r\n                    <mat-label>\r\n                      Count\r\n                    </mat-label>\r\n                    <input matInput type=\"number\" [(ngModel)]=\"value.count\" (change)=\"ProcessChange(value)\">\r\n                  </mat-form-field>\r\n                </div>\r\n              </div>\r\n              \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: ["app-beheer-import-sets .main-content{padding:5px}app-beheer-import-sets .flex-auto{flex:auto}app-beheer-import-sets .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets .mat-form-field-underline{bottom:0}app-beheer-import-sets .full-width{width:100%}app-beheer-import-sets .value-block{margin:3px}app-beheer-import-sets .importset-block{min-width:400px;margin-left:5px}app-beheer-import-sets .full-height{height:100%}app-beheer-import-sets .main-block{display:flex}app-beheer-import-sets .block{margin-top:5px;margin-bottom:5px}app-beheer-import-sets .toolbar{display:flex}app-beheer-import-sets .toolbar-item{margin-right:3px}app-beheer-import-sets .card{margin:3px}app-beheer-import-sets .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\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.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatLegacyButton, 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: i10.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i10.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i10.MatLegacyCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i11.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i13.BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: i14.FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: i15.BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i16.BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 export { BeheerImportSetsComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: BeheerImportSetsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BeheerImportSetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets', encapsulation: ViewEncapsulation.None, 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()\" 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\" (selectionChange)=\"Reload()\">\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-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            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\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              <div class=\"main-block\">\r\n                <div class=\"flex-auto\">\r\n                  <div>\r\n                    {{ value.value }}\r\n                  </div>\r\n                  <div class=\"main-block\">\r\n                    <button mat-raised-button (click)=\"ConnectFilter(value)\">\r\n                      Filter\r\n                    </button>\r\n                    <button mat-raised-button (click)=\"ConnectRange(value)\">\r\n                      Range\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <mat-form-field appearance=\"fill\" style=\"width: 50px;\">\r\n                    <mat-label>\r\n                      Count\r\n                    </mat-label>\r\n                    <input matInput type=\"number\" [(ngModel)]=\"value.count\" (change)=\"ProcessChange(value)\">\r\n                  </mat-form-field>\r\n                </div>\r\n              </div>\r\n              \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: ["app-beheer-import-sets .main-content{padding:5px}app-beheer-import-sets .flex-auto{flex:auto}app-beheer-import-sets .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets .mat-form-field-underline{bottom:0}app-beheer-import-sets .full-width{width:100%}app-beheer-import-sets .value-block{margin:3px}app-beheer-import-sets .importset-block{min-width:400px;margin-left:5px}app-beheer-import-sets .full-height{height:100%}app-beheer-import-sets .main-block{display:flex}app-beheer-import-sets .block{margin-top:5px;margin-bottom:5px}app-beheer-import-sets .toolbar{display:flex}app-beheer-import-sets .toolbar-item{margin-right:3px}app-beheer-import-sets .card{margin:3px}app-beheer-import-sets .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatLegacyDialog }, { type: i2.ProductsService }, { type: i3.ImportSetsService }, { type: i4.ImportApiClient }, { type: i0.ChangeDetectorRef }]; } });