npm - @valtimo/components - Versions diffs - 10.0.1 → 10.1.0 - Mend

@valtimo/components 10.0.1 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/fesm2020/valtimo-components.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Pipe, NgModule, Injectable, Component, Input, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, ViewChildren } from '@angular/core';
-import { combineLatest, map, Subject, BehaviorSubject, from, switchMap, Observable, take, timer, fromEvent, Subscription, of, filter as filter$1, startWith } from 'rxjs';
+import { combineLatest, map, Subject, BehaviorSubject, from, switchMap, Observable, timer, take as take$1, fromEvent, Subscription, of, filter as filter$1, startWith } from 'rxjs';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i1$1 from '@angular/common';
@@ -20,7 +20,7 @@ import * as i1$4 from '@angular/router';
 import { RouterModule, NavigationEnd, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
 import * as i1$5 from '@valtimo/user-interface';
 import { ParagraphModule, ModalModule as ModalModule$1, TitleModule, ButtonModule, FormModule, InputModule, SelectModule as SelectModule$1, DatePickerModule, InputLabelModule } from '@valtimo/user-interface';
-import { filter, map as map$1, tap, take as take$1, debounceTime, switchMap as switchMap$1 } from 'rxjs/operators';
+import { filter, map as map$1, take, tap, debounceTime, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i2$2 from '@valtimo/document';
 import { DocumentModule, DocumentService } from '@valtimo/document';
 import * as i3 from '@valtimo/security';
@@ -1543,7 +1543,7 @@ class RightSidebarComponent {
     }
     onPageClick(targetElement) {
         combineLatest([this.shellService.panelExpanded$, this.shellService.mouseOnTopBar$])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([panelExpanded, mouseOnTopBar]) => {
             const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
             if (!clickedInside && panelExpanded) {
@@ -1566,7 +1566,7 @@ class RightSidebarComponent {
     updateUserLanguage(langKey) {
         this.translate
             .use(langKey)
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(() => {
             localStorage.setItem('langKey', langKey);
         });
@@ -1622,10 +1622,10 @@ class RightSidebarComponent {
     }
 }
 RightSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i3.UserProviderService }, { token: i2.FormBuilder }, { token: VersionService }, { token: i5$1.ContextService }, { token: i1$6.HttpClient }, { token: i4.NGXLogger }, { token: ShellService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-RightSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, 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<div class=\"right-sidebar-menu\">\n  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu ibm-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu ibm-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .information-table ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:first-child{padding-left:0!important}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:last-child{padding-right:0!important;padding-left:.5rem!important;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%;padding-right:.5rem!important}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.Panel, selector: "ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i10.ColumnDirective, selector: "[ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i10.GridDirective, selector: "[ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i10.RowDirective, selector: "[ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i10.Tabs, selector: "ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10.Tab, selector: "ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i10.StructuredList, selector: "ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i10.ListRow, selector: "ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i10.ListHeader, selector: "ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i10.ListColumn, selector: "ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i10.Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i10.Option, selector: "option" }, { kind: "component", type: i10.Toggle, selector: "ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel"] }, { kind: "component", type: i10.Tag, selector: "ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i10.Link, selector: "[ibmLink]", inputs: ["inline", "disabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+RightSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, 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<div class=\"right-sidebar-menu\">\n  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu ibm-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu ibm-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .information-table ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:first-child{padding-left:0!important}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.Panel, selector: "ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i10.ColumnDirective, selector: "[ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i10.GridDirective, selector: "[ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i10.RowDirective, selector: "[ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i10.Tabs, selector: "ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10.Tab, selector: "ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i10.StructuredList, selector: "ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i10.ListRow, selector: "ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i10.ListHeader, selector: "ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i10.ListColumn, selector: "ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i10.Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i10.Option, selector: "option" }, { kind: "component", type: i10.Toggle, selector: "ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel"] }, { kind: "component", type: i10.Tag, selector: "ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i10.Link, selector: "[ibmLink]", inputs: ["inline", "disabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-right-sidebar', encapsulation: ViewEncapsulation.None, 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<div class=\"right-sidebar-menu\">\n  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu ibm-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu ibm-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .information-table ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:first-child{padding-left:0!important}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:last-child{padding-right:0!important;padding-left:.5rem!important;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%;padding-right:.5rem!important}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:-moz-fit-content;width:fit-content}\n"] }]
+            args: [{ selector: 'valtimo-right-sidebar', encapsulation: ViewEncapsulation.None, 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<div class=\"right-sidebar-menu\">\n  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a></ibm-list-column\n        >\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu ibm-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu ibm-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .information-table ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:first-child{padding-left:0!important}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:-moz-fit-content;width:fit-content}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i3.UserProviderService }, { type: i2.FormBuilder }, { type: VersionService }, { type: i5$1.ContextService }, { type: i1$6.HttpClient }, { type: i4.NGXLogger }, { type: ShellService }, { type: i0.ElementRef }]; }, propDecorators: { onPageClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
@@ -1751,7 +1751,7 @@ class LeftSidebarComponent {
             this.shellService.mouseOnTopBar$,
             this.shellService.largeScreen$,
         ])
-            .pipe(take$1(1))
+            .pipe(take(1))
             .subscribe(([sideBarExpanded, mouseOnTopBar, largeScreen]) => {
             const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
             if (!clickedInside && !largeScreen && sideBarExpanded) {
@@ -1769,7 +1769,7 @@ class LeftSidebarComponent {
         event.preventDefault();
         this.router.navigate(route);
         combineLatest([this.shellService.sideBarExpanded$, this.shellService.largeScreen$])
-            .pipe(take$1(1))
+            .pipe(take(1))
             .subscribe(([sideBarExpanded, largeScreen]) => {
             if (!largeScreen && sideBarExpanded) {
                 this.shellService.setSideBarExpanded(false);
@@ -1780,7 +1780,7 @@ class LeftSidebarComponent {
         this.breakpointObserver
             .observe(['(max-width: 1055px)', '(min-width: 1056px)'])
             .subscribe(state => {
-            this.shellService.sideBarExpanded$.pipe(take$1(1)).subscribe(sideBarExpanded => {
+            this.shellService.sideBarExpanded$.pipe(take(1)).subscribe(sideBarExpanded => {
                 const breakpoints = state.breakpoints;
                 const breakpointKeys = Object.keys(breakpoints);
                 const smallScreen = breakpoints[breakpointKeys[0]];
@@ -2002,11 +2002,19 @@ class BooleanTypeConverter {
         return 'boolean';
     }
     convert(value, definition) {
-        if (!definition.enum) {
-            return value ? 'Yes' : 'No';
+        const enumeration = definition?.enum;
+        if (enumeration && Array.isArray(enumeration) && enumeration.length > 1) {
+            return value ? enumeration[0] || 'Yes' : enumeration[1] || 'No';
+        }
+        else if (enumeration &&
+            typeof enumeration === 'object' &&
+            Object.keys(enumeration).length > 1) {
+            return value
+                ? enumeration[Object.keys(enumeration)[0]] || 'Yes'
+                : enumeration[Object.keys(enumeration)[1]] || 'No';
         }
         else {
-            return value ? definition.enum[0] || 'Yes' : definition.enum[1] || 'No';
+            return value ? 'Yes' : 'No';
         }
     }
 }
@@ -2361,7 +2369,7 @@ class ListComponent {
         if (!sortable) {
             return;
         }
-        this.sort$.pipe(take$1(1)).subscribe(sort => {
+        this.sort$.pipe(take(1)).subscribe(sort => {
             let newState;
             if (sort.state.name === key) {
                 if (!sort.isSorting) {
@@ -2386,10 +2394,10 @@ class ListComponent {
 }
 ListComponent.PAGINATION_SIZE = 'PaginationSize';
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListComponent, deps: [{ token: ViewContentService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: 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<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container *ngIf=\"listItemField.type === ''\">\n                {{ listItemField.value || '-' }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"lastColumnTemplate; context: {index: i, length: items.length}\"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage' | translate: {current: pagination.page, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [maxSize]=\"pagination.maxPaginationItemSize\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\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 */.table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: 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<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter : searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container *ngIf=\"listItemField.type === ''\">\n                {{ listItemField.value || '-' }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"lastColumnTemplate; context: {index: i, length: items.length}\"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter : searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter : searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter : searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage' | translate : {current: pagination.page, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate : {number: (items | listFilter : searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter : searchModel).length,\n                  total: pagination.collectionSize\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [maxSize]=\"pagination.maxPaginationItemSize\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\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 */.table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-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<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container *ngIf=\"listItemField.type === ''\">\n                {{ listItemField.value || '-' }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"lastColumnTemplate; context: {index: i, length: items.length}\"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage' | translate: {current: pagination.page, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [maxSize]=\"pagination.maxPaginationItemSize\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\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 */.table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n"] }]
+            args: [{ selector: 'valtimo-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<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC'\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter : searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container *ngIf=\"listItemField.type === ''\">\n                {{ listItemField.value || '-' }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"lastColumnTemplate; context: {index: i, length: items.length}\"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter : searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter : searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter : searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage' | translate : {current: pagination.page, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate : {number: (items | listFilter : searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter : searchModel).length,\n                  total: pagination.collectionSize\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [maxSize]=\"pagination.maxPaginationItemSize\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\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 */.table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ViewContentService }, { type: i4.NGXLogger }]; }, propDecorators: { items: [{
                 type: Input
             }], fields: [{
@@ -3882,7 +3890,7 @@ class FormioComponent {
     }
     refreshToken() {
         from(this.userProviderService.updateToken(-1))
-            .pipe(switchMap$1(() => this.userProviderService.getToken()), take$1(1))
+            .pipe(switchMap$1(() => this.userProviderService.getToken()), take(1))
             .subscribe(token => {
             this.setToken(token);
         });
@@ -4012,7 +4020,7 @@ class FormIoDomService {
         this.stateService = stateService;
     }
     toggleSubmitButton(disabled) {
-        this.stateService.currentForm$.pipe(take$1(1)).subscribe(form => {
+        this.stateService.currentForm$.pipe(take(1)).subscribe(form => {
             const button = form.formioElement.nativeElement
                 .getElementsByClassName('formio-component-submit')[0]
                 .getElementsByClassName('btn-primary')[0];
@@ -4108,7 +4116,7 @@ class WebcamComponent {
         return false;
     }
     stopStream() {
-        this.stream$.pipe(take$1(1)).subscribe(mediaStream => {
+        this.stream$.pipe(take(1)).subscribe(mediaStream => {
             if (mediaStream) {
                 mediaStream.getTracks().forEach(stream => stream.stop());
             }
@@ -4338,7 +4346,7 @@ class FormIoUploaderComponent {
     fileSelected(file) {
         this.domService.toggleSubmitButton(true);
         this.uploading$.next(true);
-        this.stateService.documentDefinitionName$.pipe(take$1(1)).subscribe(name => {
+        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe(name => {
             this.uploadProviderService.uploadFile(file, name).subscribe(result => {
                 this.domService.toggleSubmitButton(false);
                 this.uploading$.next(false);
@@ -4534,7 +4542,7 @@ class DocumentenApiMetadataModalComponent {
             this.additionalDocumentDate$,
             this.translateService.stream('key'),
         ]).pipe(tap(([additionalDocumentDate]) => {
-            this.formData$.pipe(take(1)).subscribe(formData => {
+            this.formData$.pipe(take$1(1)).subscribe(formData => {
                 if (additionalDocumentDate === 'received' &&
                     (formData.status === 'in_bewerking' || formData.status === 'ter_vaststelling')) {
                     this.clearStatusSelection$.next(null);
@@ -4581,7 +4589,7 @@ class DocumentenApiMetadataModalComponent {
     }
     save() {
         combineLatest([this.valid$, this.formData$])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([valid, formData]) => {
             if (valid) {
                 this.metadata.emit(formData);
@@ -4733,7 +4741,7 @@ class DocumentenApiUploaderComponent {
         this.hideModal$.next(null);
         this.domService.toggleSubmitButton(true);
         this.fileToBeUploaded$
-            .pipe(take$1(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
+            .pipe(take(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
             this.domService.toggleSubmitButton(false);
             this.uploading$.next(false);
             this._value.push(result);
@@ -5198,7 +5206,7 @@ class SearchableDropdownComponent {
             .pipe(debounceTime(50))
             .subscribe((event) => {
             combineLatest([this.mouseOnList$, this.filteredItems$, this.focusedItemId$])
-                .pipe(take$1(1))
+                .pipe(take(1))
                 .subscribe(([mouseOnList, items, focusedId]) => {
                 const length = items.length;
                 const focusedIndex = items.findIndex(item => item.id === focusedId);
@@ -5251,7 +5259,7 @@ class SearchableDropdownComponent {
     }
     openSearchSubscription() {
         this.searchSubscription = this.searchTerm.valueChanges.subscribe(searchTerm => {
-            this.focusedItemId$.pipe(take$1(1)).subscribe(focusedItemId => {
+            this.focusedItemId$.pipe(take(1)).subscribe(focusedItemId => {
                 if (!searchTerm) {
                     this.filteredItems$.next(this.items);
                 }
@@ -5272,7 +5280,7 @@ class SearchableDropdownComponent {
         });
     }
     scrollButtonIntoView(id) {
-        this.filteredItems$.pipe(take$1(1)).subscribe(items => {
+        this.filteredItems$.pipe(take(1)).subscribe(items => {
             const focusItemIndex = items.findIndex(item => item.id === id);
             const focusedButton = this.buttons.toArray()[focusItemIndex];
             if (focusedButton) {
@@ -5880,7 +5888,7 @@ function registerFormioFileSelectorComponent(injector) {
         }
         getResources() {
             return stateService.documentId$
-                .pipe(take$1(1))
+                .pipe(take(1))
                 .toPromise()
                 .then(documentId => getDocumentResources(documentId));
         }
@@ -6111,7 +6119,7 @@ class SearchFieldsComponent {
         this.searchFields$.next(fields);
     }
     set documentDefinitionName(documentDefinitionName) {
-        this.documentDefinitionName$.pipe(take(1)).subscribe(currentDocumentDefinitionName => {
+        this.documentDefinitionName$.pipe(take$1(1)).subscribe(currentDocumentDefinitionName => {
             if (currentDocumentDefinitionName !== documentDefinitionName) {
                 this.documentDefinitionName$.next(documentDefinitionName);
             }
@@ -6124,7 +6132,7 @@ class SearchFieldsComponent {
         this.documentDefinitionNameSubscription?.unsubscribe();
     }
     singleValueChange(searchFieldKey, value, isDateTime) {
-        this.values$.pipe(take(1)).subscribe(values => {
+        this.values$.pipe(take$1(1)).subscribe(values => {
             if (value) {
                 this.values$.next({ ...values, [searchFieldKey]: this.getSingleValue(value, isDateTime) });
             }
@@ -6136,7 +6144,7 @@ class SearchFieldsComponent {
         });
     }
     multipleValueChange(searchFieldKey, value, isDateTime) {
-        this.values$.pipe(take(1)).subscribe(values => {
+        this.values$.pipe(take$1(1)).subscribe(values => {
             if (value.start && value.end) {
                 this.values$.next({
                     ...values,
@@ -6154,12 +6162,12 @@ class SearchFieldsComponent {
         });
     }
     toggleExpanded() {
-        this.expanded$.pipe(take(1)).subscribe(expanded => {
+        this.expanded$.pipe(take$1(1)).subscribe(expanded => {
             this.expanded$.next(!expanded);
         });
     }
     search() {
-        this.values$.pipe(take(1)).subscribe(values => {
+        this.values$.pipe(take$1(1)).subscribe(values => {
             this.doSearch.emit(values);
         });
     }