@valtimo/components 4.17.0 → 4.18.0

package/assets/css/ng-multiselect-dropdown.theme.scss

@@ -0,0 +1,210 @@
+$base-color: #337ab7;
+$disable-background-color: #eceeef;
+.multiselect-dropdown {
+  position: relative;
+  width: 100%;
+  font-size: inherit;
+  font-family: inherit;
+  .dropdown-btn {
+    display: inline-block;
+    border: 1px solid #adadad;
+    width: 100%;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-weight: normal;
+    line-height: 1.52857143;
+    text-align: left;
+    vertical-align: middle;
+    cursor: pointer;
+    background-image: none;
+    border-radius: 4px;
+    .selected-item {
+      border: 1px solid $base-color;
+      margin-right: 4px;
+      background: $base-color;
+      padding: 0px 5px;
+      color: #fff;
+      border-radius: 2px;
+      float: left;
+      a {
+        text-decoration: none;
+      }
+    }
+    .selected-item:hover {
+      box-shadow: 1px 1px #959595;
+    }
+    .dropdown-down {
+      display: inline-block;
+      top: 10px;
+      width: 0;
+      height: 0;
+      border-top: 10px solid #adadad;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+    }
+    .dropdown-up {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-bottom: 10px solid #adadad;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+    }
+  }
+  .disabled {
+    & > span {
+      background-color: $disable-background-color;
+    }
+  }
+}
+
+.dropdown-list {
+  position: absolute;
+  padding-top: 6px;
+  width: 100%;
+  z-index: 9999;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: #fff;
+  margin-top: 10px;
+  box-shadow: 0px 1px 5px #959595;
+  ul {
+    padding: 0px;
+    list-style: none;
+    overflow: auto;
+    margin: 0px;
+  }
+  li {
+    padding: 6px 10px;
+    cursor: pointer;
+    text-align: left;
+  }
+  .filter-textbox {
+    border-bottom: 1px solid #ccc;
+    position: relative;
+    padding: 10px;
+    input {
+      border: 0px;
+      width: 100%;
+      padding: 0px 0px 0px 26px;
+    }
+    input:focus {
+      outline: none;
+    }
+  }
+}
+
+.multiselect-item-checkbox input[type='checkbox'] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.multiselect-item-checkbox input[type='checkbox']:focus + div:before,
+.multiselect-item-checkbox input[type='checkbox']:hover + div:before {
+  border-color: $base-color;
+  background-color: #f2f2f2;
+}
+
+.multiselect-item-checkbox input[type='checkbox']:active + div:before {
+  transition-duration: 0s;
+}
+
+.multiselect-item-checkbox input[type='checkbox'] + div {
+  position: relative;
+  padding-left: 2em;
+  vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+  margin: 0px;
+  color: #000;
+}
+
+.multiselect-item-checkbox input[type='checkbox'] + div:before {
+  box-sizing: content-box;
+  content: '';
+  color: $base-color;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 14px;
+  height: 14px;
+  margin-top: -9px;
+  border: 2px solid $base-color;
+  text-align: center;
+  transition: all 0.4s ease;
+}
+
+.multiselect-item-checkbox input[type='checkbox'] + div:after {
+  box-sizing: content-box;
+  content: '';
+  background-color: $base-color;
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 10px;
+  height: 10px;
+  margin-top: -5px;
+  transform: scale(0);
+  transform-origin: 50%;
+  transition: transform 200ms ease-out;
+}
+
+.multiselect-item-checkbox input[type='checkbox']:disabled + div:before {
+  border-color: #cccccc;
+}
+
+.multiselect-item-checkbox
+  input[type='checkbox']:disabled:focus
+  + div:before
+  .multiselect-item-checkbox
+  input[type='checkbox']:disabled:hover
+  + div:before {
+  background-color: inherit;
+}
+
+.multiselect-item-checkbox
+  input[type='checkbox']:disabled:checked
+  + div:before {
+  background-color: #cccccc;
+}
+
+.multiselect-item-checkbox input[type='checkbox'] + div:after {
+  background-color: transparent;
+  top: 50%;
+  left: 4px;
+  width: 8px;
+  height: 3px;
+  margin-top: -4px;
+  border-style: solid;
+  border-color: #ffffff;
+  border-width: 0 0 3px 3px;
+  border-image: none;
+  transform: rotate(-45deg) scale(0);
+}
+
+.multiselect-item-checkbox input[type='checkbox']:checked + div:after {
+  content: '';
+  transform: rotate(-45deg) scale(1);
+  transition: transform 200ms ease-out;
+}
+
+.multiselect-item-checkbox input[type='checkbox']:checked + div:before {
+  animation: borderscale 200ms ease-in;
+  background: $base-color;
+}
+
+.multiselect-item-checkbox input[type='checkbox']:checked + div:after {
+  transform: rotate(-45deg) scale(1);
+}
+
+@keyframes borderscale {
+  50% {
+    box-shadow: 0 0 0 2px $base-color;
+  }
+}

package/bundles/valtimo-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('moment'), require('@valtimo/choicefield'), require('@angular/router'), require('ngx-logger'), require('@valtimo/config'), require('rxjs'), require('@valtimo/document'), require('@valtimo/security'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('@valtimo/context'), require('rxjs/operators'), require('@angular/platform-browser'), require('bpmn-js/dist/bpmn-navigated-viewer.production.min.js'), require('heatmap.js-fixed/build/heatmap.js'), require('@valtimo/resource'), require('angular-formio'), require('jwt-decode'), require('dropzone'), require('ngx-spinner')) :
-    typeof define === 'function' && define.amd ? define('@valtimo/components', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'moment', '@valtimo/choicefield', '@angular/router', 'ngx-logger', '@valtimo/config', 'rxjs', '@valtimo/document', '@valtimo/security', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', '@valtimo/context', 'rxjs/operators', '@angular/platform-browser', 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js', 'heatmap.js-fixed/build/heatmap.js', '@valtimo/resource', 'angular-formio', 'jwt-decode', 'dropzone', 'ngx-spinner'], factory) :
-    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.components = {}), global.ng.core, global.ng.common, global.ng.forms, global.moment, global.choicefield, global.ng.router, global.ngxLogger, global.config, global.rxjs, global.document, global.security, global.ngBootstrap, global.core$1, global.ng.common.http, global.context, global.rxjs.operators, global.ng.platformBrowser, global.BpmnJS, global.heatmap, global.resource, global.angularFormio, global.jwt_decode, global.Dropzone, global.ngxSpinner));
-}(this, (function (exports, i0, common, forms, momentImported, choicefield, i1, i4, i1$1, rxjs, i2, i3, ngBootstrap, core, i1$2, context, operators, platformBrowser, BpmnJS, heatmap, resource, angularFormio, jwt_decode, Dropzone, ngxSpinner) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('moment'), require('@valtimo/choicefield'), require('@angular/router'), require('ngx-logger'), require('@valtimo/config'), require('rxjs'), require('@valtimo/document'), require('@valtimo/security'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('@valtimo/context'), require('rxjs/operators'), require('@angular/platform-browser'), require('bpmn-js/dist/bpmn-navigated-viewer.production.min.js'), require('heatmap.js-fixed/build/heatmap.js'), require('@valtimo/resource'), require('angular-formio'), require('jwt-decode'), require('dropzone'), require('ngx-spinner'), require('ng-multiselect-dropdown')) :
+    typeof define === 'function' && define.amd ? define('@valtimo/components', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'moment', '@valtimo/choicefield', '@angular/router', 'ngx-logger', '@valtimo/config', 'rxjs', '@valtimo/document', '@valtimo/security', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', '@valtimo/context', 'rxjs/operators', '@angular/platform-browser', 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js', 'heatmap.js-fixed/build/heatmap.js', '@valtimo/resource', 'angular-formio', 'jwt-decode', 'dropzone', 'ngx-spinner', 'ng-multiselect-dropdown'], factory) :
+    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.components = {}), global.ng.core, global.ng.common, global.ng.forms, global.moment, global.choicefield, global.ng.router, global.ngxLogger, global.config, global.rxjs, global.document, global.security, global.ngBootstrap, global.core$1, global.ng.common.http, global.context, global.rxjs.operators, global.ng.platformBrowser, global.BpmnJS, global.heatmap, global.resource, global.angularFormio, global.jwt_decode, global.Dropzone, global.ngxSpinner, global.ngMultiselectDropdown));
+}(this, (function (exports, i0, common, forms, momentImported, choicefield, i1, i4, i1$1, rxjs, i2, i3, ngBootstrap, core, i1$2, context, operators, platformBrowser, BpmnJS, heatmap, resource, angularFormio, jwt_decode, Dropzone, ngxSpinner, ngMultiselectDropdown) { 'use strict';
 
     jwt_decode = jwt_decode && Object.prototype.hasOwnProperty.call(jwt_decode, 'default') ? jwt_decode['default'] : jwt_decode;
 
@@ -908,8 +908,8 @@
     TopbarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-topbar',
-                    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<nav class=\"navbar navbar-expand fixed-top be-top-header\">\n  <div class=\"container-fluid\">\n    <div class=\"be-navbar-header\">\n      <a class=\"navbar-brand\" [routerLink]=\"['/']\"></a>\n    </div>\n    <div class=\"be-right-navbar\">\n      <!-- important empty div: in order to made float-right element works on mobile  -->\n      <div></div>\n      <ul class=\"nav navbar-nav be-user-nav float-right be-icons-nav\">\n        <li class=\"nav-item dropdown special\">\n          <a class=\"nav-link be-toggle-right-sidebar\" href=\"#\" role=\"button\" aria-expanded=\"false\">\n            <i class=\"fas fa-user-circle user-icon\"></i>\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</nav>\n",
-                    styles: [".user-icon{font-size:30px;padding-top:5px}"]
+                    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<nav class=\"navbar navbar-expand fixed-top be-top-header\">\n  <div class=\"container-fluid\">\n    <div class=\"be-navbar-header\">\n      <a class=\"navbar-brand\" [routerLink]=\"['/']\"></a>\n    </div>\n    <div class=\"be-right-navbar\">\n      <!-- important empty div: in order to made float-right element works on mobile  -->\n      <div></div>\n      <ul class=\"nav navbar-nav be-user-nav float-right be-icons-nav\">\n        <li class=\"nav-item dropdown special\">\n          <a class=\"nav-link be-toggle-right-sidebar\" href=\"#\" role=\"button\" aria-expanded=\"false\">\n            <i class=\"mdi mdi-account-circle user-icon\"></i>\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</nav>\n",
+                    styles: [".user-icon{font-size:30px}.be-toggle-right-sidebar{display:flex}"]
                 },] }
     ];
     TopbarComponent.ctorParameters = function () { return []; };
@@ -2426,8 +2426,8 @@
     ListComponent.decorators = [
         { type: i0.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=\"Search...\"\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=\"mdi mdi-view-headline\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"mdi mdi-view-module\"></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\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              {{ listItemField.value || '-' }}\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item)\"\n              ></i>\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      <br />\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",
-                    styles: ["@charset \"UTF-8\";\n/*!\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}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;height:80px;padding-left:18px;padding-right:18px}.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}td:first-child,th:first-child{padding-left:25px}th.sortable{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}th.sortable:after{content:\" \uF0DD\";font-family:Font Awesome\\ 5 Free;margin:auto 0 auto 5px;opacity:0;position:absolute;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}"]
+                    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=\"Search...\"\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=\"mdi mdi-view-headline\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"mdi mdi-view-module\"></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\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              {{ listItemField.value || '-' }}\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)\"\n              ></i>\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      <br />\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",
+                    styles: ["@charset \"UTF-8\";\n/*!\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}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;height:80px;padding-left:18px;padding-right:18px}.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}td:first-child,th:first-child{padding-left:25px}th.sortable{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}th.sortable:after{content:\" \uF0DD\";font-family:Font Awesome\\ 5 Free;margin:auto 0 auto 5px;opacity:0;position:absolute;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{font-size:16px}"]
                 },] }
     ];
     ListComponent.ctorParameters = function () { return [
@@ -3328,7 +3328,7 @@
     UploaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-uploader',
-                    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  class=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"fa fa-cloud-upload fa-4x\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"fa fa-trash text-danger\"></i>\n    </button>\n  </div>\n</div>\n",
+                    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  class=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n",
                     styles: [".upload-file-container{background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:100px;border:2px dashed #d5d8de;color:#d5d8de;margin:0 0 1rem;text-align:center}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{background:#fff;border:1px solid #bdc0c7;display:flex;font-size:1em;justify-content:space-between;margin:1rem auto;padding:5px}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}"]
                 },] }
     ];
@@ -4120,7 +4120,7 @@
     FormIoUploaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-formio-uploader',
-                    template: "<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon fa fa-trash\"></i>\n    </a>\n  </div>\n</div>\n",
+                    template: "<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\n",
                     styles: [".progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .btn-secondary,::ng-deep .formio-component-valtimo-file .formio-button-add-another{display:none}::ng-deep .formio-component-valtimo-file td{border:none;padding:0!important}::ng-deep .formio-component-valtimo-file .table{border:none;border-collapse:collapse;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{border:1px solid #dee2e6;display:flex;margin-top:-1px}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;cursor:pointer;font-size:1.3846rem;line-height:18px}.file-preview .icon:hover{color:grey}"]
                 },] }
     ];
@@ -4246,7 +4246,7 @@
     DropzoneComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dropzone',
-                    template: "<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"fa fa-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n",
+                    template: "<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\n</ng-template>\n",
                     styles: ["form.dropzone{padding:30px 20px}form.dropzone h2{font-size:2rem;text-align:center}form.dropzone.disabled{cursor:default;opacity:.7;pointer-events:none}form.dropzone.preview{border:none;padding:15px 20px}.dz-message{align-items:center;display:flex;flex-direction:column}.dropzone-mobile-trigger{cursor:pointer}.alert-light{align-items:center;display:flex}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;margin-bottom:0;padding:0;width:auto}form.dropzone .message{padding:1.385rem 2.1542rem}.file{align-items:center;display:flex;flex-direction:row;font-size:1.5rem}.small-font{color:#959595;font-size:1rem}.file-size{margin-left:5px}.progress-bar-container{bottom:0;height:auto;position:absolute;width:100%}.webcam-button{position:absolute;right:10px;top:10px}"]
                 },] }
     ];
@@ -4421,8 +4421,8 @@
     WebcamComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-webcam',
-                    template: "<div\n  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"fa fa-camera\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"fa fa-undo\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"fa fa-save\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\n",
-                    styles: [".webcam-overlay{align-items:center;background-color:rgba(0,0,0,.65);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .15s linear;width:100%;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;height:30px;justify-content:space-evenly;margin-bottom:10px;margin-top:20px}.button-container i{margin-right:5px}.new-btn,.picture-btn,.save-btn{display:flex;justify-content:center;position:absolute}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{left:0;width:100%}.new-btn{left:0}.save-btn{right:0}.modal-header{color:grey;margin-top:35px;padding:0;position:absolute;right:-18px;top:0}.close{color:grey}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container img,.video-container video{height:495px;position:absolute;width:660px}.video-container img{-o-object-fit:cover;object-fit:cover}#canvas{display:none}"]
+                    template: "<div\n  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"icon mdi mdi-camera mr-1\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-redo mr-1\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-save mr-1\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\n",
+                    styles: [".webcam-overlay{align-items:center;background-color:rgba(0,0,0,.65);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .15s linear;width:100%;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;height:30px;justify-content:space-evenly;margin-bottom:10px;margin-top:20px}.button-container i{margin-right:5px}.new-btn,.picture-btn,.save-btn{display:flex;justify-content:center;position:absolute}.new-btn .icon,.picture-btn .icon,.save-btn .icon{background-color:unset;border-radius:unset;display:inline-block;height:unset;margin-bottom:0;padding:0;width:unset}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{left:0;width:100%}.new-btn{left:0}.save-btn{right:0}.modal-header{color:grey;margin-top:35px;padding:0;position:absolute;right:-18px;top:0}.close{color:grey}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container img,.video-container video{height:495px;position:absolute;width:660px}.video-container img{-o-object-fit:cover;object-fit:cover}#canvas{display:none}"]
                 },] }
     ];
     WebcamComponent.propDecorators = {
@@ -5028,8 +5028,8 @@
     SearchableDropdownSelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-searchable-dropdown-select',
-                    template: "<valtimo-searchable-dropdown\n  *ngIf=\"!hasSelection; else selection\"\n  [style]=\"style\"\n  [items]=\"items\"\n  [buttonText]=\"buttonText\"\n  [searchText]=\"searchText\"\n  [noResultsText]=\"noResultsText\"\n  [disabled]=\"disabled\"\n  [width]=\"width\"\n  (itemSelected)=\"onSelect($event)\"\n>\n</valtimo-searchable-dropdown>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      type=\"button\"\n      class=\"close p-0 m-0 ml-2 d-flex text-danger\"\n      aria-label=\"Close\"\n      (click)=\"onClearSelection()\"\n      [title]=\"clearSelectionButtonTitle\"\n    >\n      <i class=\"clear-icon fa fa-times text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n",
-                    styles: [".selected-text{margin:0}.clear-icon{font-size:13px}"]
+                    template: "<valtimo-searchable-dropdown\n  *ngIf=\"!hasSelection; else selection\"\n  [style]=\"style\"\n  [items]=\"items\"\n  [buttonText]=\"buttonText\"\n  [searchText]=\"searchText\"\n  [noResultsText]=\"noResultsText\"\n  [disabled]=\"disabled\"\n  [width]=\"width\"\n  (itemSelected)=\"onSelect($event)\"\n>\n</valtimo-searchable-dropdown>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      type=\"button\"\n      class=\"close p-0 m-0 ml-2 d-flex text-danger\"\n      aria-label=\"Close\"\n      (click)=\"onClearSelection()\"\n      [title]=\"clearSelectionButtonTitle\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n",
+                    styles: [".selected-text{margin:0}.clear-icon{font-size:16px}"]
                 },] }
     ];
     SearchableDropdownSelectComponent.propDecorators = {
@@ -5077,7 +5077,82 @@
     ];
 
     /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     * Copyright 2015-2022 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MultiselectDropdownComponent = /** @class */ (function () {
+        function MultiselectDropdownComponent() {
+            this.items = [];
+            this.dropdownSettings = {
+                singleSelection: false,
+                selectAllText: 'Select All',
+                unSelectAllText: 'UnSelect All',
+                itemsShowLimit: 3,
+                allowSearchFilter: true,
+            };
+            this.itemsSelected = new i0.EventEmitter();
+        }
+        MultiselectDropdownComponent.prototype.onItemsSelected = function () {
+            this.itemsSelected.emit(this.selectedItems);
+        };
+        return MultiselectDropdownComponent;
+    }());
+    MultiselectDropdownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'valtimo-multiselect-dropdown',
+                    template: "<!--\n  ~ Copyright 2015-2022 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n",
+                    styles: [""]
+                },] }
+    ];
+    MultiselectDropdownComponent.propDecorators = {
+        selectedItems: [{ type: i0.Input }],
+        items: [{ type: i0.Input }],
+        placeHolder: [{ type: i0.Input }],
+        dropdownSettings: [{ type: i0.Input }],
+        itemsSelected: [{ type: i0.Output }]
+    };
+
+    /*
+     * Copyright 2015-2022 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var MultiselectDropdownModule = /** @class */ (function () {
+        function MultiselectDropdownModule() {
+        }
+        return MultiselectDropdownModule;
+    }());
+    MultiselectDropdownModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [MultiselectDropdownComponent],
+                    imports: [common.CommonModule, forms.ReactiveFormsModule, ngMultiselectDropdown.NgMultiSelectDropDownModule, forms.FormsModule],
+                    exports: [MultiselectDropdownComponent],
+                },] }
+    ];
+
+    /*
+     * Copyright 2015-2022 Ritense BV, the Netherlands.
      *
      * Licensed under EUPL, Version 1.2 (the "License");
      * you may not use this file except in compliance with the License.
@@ -5135,6 +5210,8 @@
     exports.MenuService = MenuService;
     exports.ModalComponent = ModalComponent;
     exports.ModalModule = ModalModule;
+    exports.MultiselectDropdownComponent = MultiselectDropdownComponent;
+    exports.MultiselectDropdownModule = MultiselectDropdownModule;
     exports.PageHeaderComponent = PageHeaderComponent;
     exports.PageHeaderModule = PageHeaderModule;
     exports.PageTitleComponent = PageTitleComponent;