@valtimo/dossier 5.10.0 → 5.11.0

package/fesm2020/valtimo-dossier.mjs

@@ -392,6 +392,7 @@ class DossierListComponent {
         this.logger = logger;
         this.selectedProcessDocumentDefinition = null;
         this.modalListenerAdded = false;
+        this.loading$ = new BehaviorSubject(true);
         this.settingPaginationForDocName$ = new BehaviorSubject(undefined);
         this.documentDefinitionName$ = this.route.params.pipe(map(params => params.documentDefinitionName || ''), tap(documentDefinitionName => {
             this.resetPagination(documentDefinitionName);
@@ -442,7 +443,7 @@ class DossierListComponent {
         this.documentItems$ = this.documentsRequest$.pipe(map(documents => documents.content.map(document => {
             const { content, ...others } = document;
             return { ...content, ...others };
-        })));
+        })), tap(() => this.loading$.next(false)));
     }
     ngOnInit() {
         this.modalListenerAdded = false;
@@ -561,10 +562,10 @@ class DossierListComponent {
     }
 }
 DossierListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i6$1.TranslateService }, { token: DossierService }, { token: i5.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-DossierListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierListComponent, selector: "valtimo-dossier-list", viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #list>\n  <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <valtimo-list\n        *ngIf=\"documentItems$ | async as documentItems\"\n        [items]=\"documentItems\"\n        [fields]=\"fields\"\n        (rowClicked)=\"rowClick($event)\"\n        [pagination]=\"pagination\"\n        [viewMode]=\"true\"\n        [header]=\"true\"\n        paginationIdentifier=\"dossierList\"\n        (paginationClicked)=\"pageChange($event)\"\n        (paginationSet)=\"pageSizeChange($event)\"\n        [initialSortState]=\"pagination.sort\"\n        (sortChanged)=\"sortChanged($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">\n            {{ (schema$ | async)?.title }}\n            <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documentItems?.length || 0 }}</sup>\n          </h3>\n        </div>\n      </valtimo-list>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [ngModel]=\"globalSearchFilter$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [ngModel]=\"sequence$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""], components: [{ type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal" }, { type: i7.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: i7.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
+DossierListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierListComponent, selector: "valtimo-dossier-list", viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0 || obs.loading\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-spinner *ngIf=\"obs.loading\"></valtimo-spinner>\n      <ng-container *ngTemplateOutlet=\"list; context:{obs: obs}\"></ng-container>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #list let-obs=\"obs\">\n    <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <ng-container *ngIf=\"documentItems$ | async as documentItems\">\n        <valtimo-widget *ngIf=\"obs.loading === false\">\n          <valtimo-list\n            [items]=\"documentItems\"\n            [fields]=\"fields\"\n            (rowClicked)=\"rowClick($event)\"\n            [pagination]=\"pagination\"\n            [viewMode]=\"true\"\n            [header]=\"true\"\n            paginationIdentifier=\"dossierList\"\n            (paginationClicked)=\"pageChange($event)\"\n            (paginationSet)=\"pageSizeChange($event)\"\n            [initialSortState]=\"pagination.sort\"\n            (sortChanged)=\"sortChanged($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">\n                {{ (schema$ | async)?.title }}\n                <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documentItems?.length || 0 }}</sup>\n              </h3>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [ngModel]=\"globalSearchFilter$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [ngModel]=\"sequence$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""], components: [{ type: i7.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal" }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: i7.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-list', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #list>\n  <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <valtimo-list\n        *ngIf=\"documentItems$ | async as documentItems\"\n        [items]=\"documentItems\"\n        [fields]=\"fields\"\n        (rowClicked)=\"rowClick($event)\"\n        [pagination]=\"pagination\"\n        [viewMode]=\"true\"\n        [header]=\"true\"\n        paginationIdentifier=\"dossierList\"\n        (paginationClicked)=\"pageChange($event)\"\n        (paginationSet)=\"pageSizeChange($event)\"\n        [initialSortState]=\"pagination.sort\"\n        (sortChanged)=\"sortChanged($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">\n            {{ (schema$ | async)?.title }}\n            <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documentItems?.length || 0 }}</sup>\n          </h3>\n        </div>\n      </valtimo-list>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [ngModel]=\"globalSearchFilter$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [ngModel]=\"sequence$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-dossier-list', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0 || obs.loading\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-spinner *ngIf=\"obs.loading\"></valtimo-spinner>\n      <ng-container *ngTemplateOutlet=\"list; context:{obs: obs}\"></ng-container>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #list let-obs=\"obs\">\n    <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <ng-container *ngIf=\"documentItems$ | async as documentItems\">\n        <valtimo-widget *ngIf=\"obs.loading === false\">\n          <valtimo-list\n            [items]=\"documentItems\"\n            [fields]=\"fields\"\n            (rowClicked)=\"rowClick($event)\"\n            [pagination]=\"pagination\"\n            [viewMode]=\"true\"\n            [header]=\"true\"\n            paginationIdentifier=\"dossierList\"\n            (paginationClicked)=\"pageChange($event)\"\n            (paginationSet)=\"pageSizeChange($event)\"\n            [initialSortState]=\"pagination.sort\"\n            (sortChanged)=\"sortChanged($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">\n                {{ (schema$ | async)?.title }}\n                <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documentItems?.length || 0 }}</sup>\n              </h3>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [ngModel]=\"globalSearchFilter$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [ngModel]=\"sequence$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$1.DocumentService }, { type: i6$1.TranslateService }, { type: DossierService }, { type: i5.NGXLogger }]; }, propDecorators: { processStart: [{
                 type: ViewChild,
                 args: ['processStartModal']
@@ -1043,7 +1044,7 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
     }
 }
 DossierDetailTabDocumentenApiDocumentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$2.ToastrService }, { token: i4$1.UploadProviderService }, { token: i4$1.DownloadService }, { token: i3$3.PromptService }, { token: i6$1.TranslateService }, { token: i1.ConfigService }, { token: i6.UserProviderService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabDocumentenApiDocumentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabDocumentenApiDocumentsComponent, selector: "valtimo-dossier-detail-tab-documenten-api-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div *ngIf=\"uploadProcessLinkedSet && !uploadProcessLinked\">\n  <div\n    *ngIf=\"isAdmin\"\n    [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n    class=\"bg-warning text-black mb-2 p-3 text-center\"\n  ></div>\n  <div\n    *ngIf=\"!isAdmin\"\n    [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n    class=\"bg-warning text-black mb-2 p-3 text-center\"\n  ></div>\n</div>\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [camera]=\"false\"\n  [disabled]=\"!uploadProcessLinkedSet || !uploadProcessLinked\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [maxFiles]=\"1\"\n  [showMaxFileSize]=\"true\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [actions]=\"actions\"\n    [fields]=\"fields\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [items]=\"relatedFiles$ | async\"\n    [viewMode]=\"true\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [""], components: [{ type: i7.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: i7.DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$"], outputs: ["metadata"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
+DossierDetailTabDocumentenApiDocumentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabDocumentenApiDocumentsComponent, selector: "valtimo-dossier-detail-tab-documenten-api-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div *ngIf=\"uploadProcessLinkedSet && !uploadProcessLinked\">\n  <div\n    *ngIf=\"isAdmin\"\n    [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n    class=\"bg-warning text-black mb-2 p-3 text-center\"\n  ></div>\n  <div\n    *ngIf=\"!isAdmin\"\n    [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n    class=\"bg-warning text-black mb-2 p-3 text-center\"\n  ></div>\n</div>\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [camera]=\"false\"\n  [disabled]=\"!uploadProcessLinkedSet || !uploadProcessLinked\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [maxFiles]=\"1\"\n  [showMaxFileSize]=\"true\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [actions]=\"actions\"\n    [fields]=\"fields\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [items]=\"relatedFiles$ | async\"\n    [viewMode]=\"true\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [""], components: [{ type: i7.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: i7.DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel"], outputs: ["metadata"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-documenten-api-documents', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div *ngIf=\"uploadProcessLinkedSet && !uploadProcessLinked\">\n  <div\n    *ngIf=\"isAdmin\"\n    [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n    class=\"bg-warning text-black mb-2 p-3 text-center\"\n  ></div>\n  <div\n    *ngIf=\"!isAdmin\"\n    [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n    class=\"bg-warning text-black mb-2 p-3 text-center\"\n  ></div>\n</div>\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [camera]=\"false\"\n  [disabled]=\"!uploadProcessLinkedSet || !uploadProcessLinked\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [maxFiles]=\"1\"\n  [showMaxFileSize]=\"true\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [actions]=\"actions\"\n    [fields]=\"fields\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [items]=\"relatedFiles$ | async\"\n    [viewMode]=\"true\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [""] }]