@valtimo/components 4.18.0 → 4.19.0

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

@@ -168,9 +168,7 @@ $disable-background-color: #eceeef;
   background-color: inherit;
 }
 
-.multiselect-item-checkbox
-  input[type='checkbox']:disabled:checked
-  + div:before {
+.multiselect-item-checkbox input[type='checkbox']:disabled:checked + div:before {
   background-color: #cccccc;
 }
 
@@ -207,4 +205,4 @@ $disable-background-color: #eceeef;
   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'), 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';
+    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('@valtimo/config'), require('ngx-logger'), 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', '@valtimo/config', 'ngx-logger', '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.config, global.ngxLogger, 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, i1$1, i4, 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;
 
@@ -958,11 +958,13 @@
      * limitations under the License.
      */
     var MenuService = /** @class */ (function () {
-        function MenuService(configService, documentService, userProviderService, logger) {
+        function MenuService(configService, documentService, userProviderService, logger, menuIncludeService) {
             this.configService = configService;
             this.documentService = documentService;
             this.userProviderService = userProviderService;
             this.logger = logger;
+            this.menuIncludeService = menuIncludeService;
+            this.includeFunctionObservables = {};
             this._menuItems$ = new rxjs.BehaviorSubject(undefined);
             this.menuConfig = configService.config.menu;
         }
@@ -984,6 +986,10 @@
             var _this = this;
             var menuItems = [];
             this.menuConfig.menuItems.forEach(function (menuItem) {
+                if (menuItem.includeFunction !== undefined) {
+                    _this.includeFunctionObservables[menuItem.title] =
+                        _this.menuIncludeService.getIncludeFunction(menuItem.includeFunction);
+                }
                 menuItem.show = true;
                 menuItems.push(menuItem);
             });
@@ -1055,7 +1061,7 @@
         };
         return MenuService;
     }());
-    MenuService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(i0.ɵɵinject(i1$1.ConfigService), i0.ɵɵinject(i2.DocumentService), i0.ɵɵinject(i3.UserProviderService), i0.ɵɵinject(i4.NGXLogger)); }, token: MenuService, providedIn: "root" });
+    MenuService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(i0.ɵɵinject(i1$1.ConfigService), i0.ɵɵinject(i2.DocumentService), i0.ɵɵinject(i3.UserProviderService), i0.ɵɵinject(i4.NGXLogger), i0.ɵɵinject(i1$1.MenuIncludeService)); }, token: MenuService, providedIn: "root" });
     MenuService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -1065,7 +1071,8 @@
         { type: i1$1.ConfigService },
         { type: i2.DocumentService },
         { type: i3.UserProviderService },
-        { type: i4.NGXLogger }
+        { type: i4.NGXLogger },
+        { type: i1$1.MenuIncludeService }
     ]; };
 
     /*
@@ -1117,6 +1124,8 @@
             this.elRef = elRef;
             this.renderer = renderer;
             this.router = router;
+            this.includeFunctionObservables = {};
+            this.includeFunctionObservables = this.menuService.includeFunctionObservables;
         }
         MenuComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1150,8 +1159,8 @@
     MenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-menu',
-                    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<ul class=\"sidebar-elements\">\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <li\n      [class.parent]=\"menuItem.children\"\n      [hidden]=\"!menuItem.show\"\n      [routerLinkActive]=\"'active'\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\n    >\n      <a *ngIf=\"menuItem.link\" [routerLink]=\"menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <a *ngIf=\"!menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <ng-container *ngIf=\"menuItem.children\">\n        <ul class=\"sub-menu\">\n          <li class=\"title\">{{ menuItem.title | translate }}</li>\n          <li\n            *ngFor=\"let subMenuItem of menuItem.children\"\n            [routerLinkActive]=\"'active'\"\n            [routerLinkActiveOptions]=\"{exact: true}\"\n          >\n            <a *ngIf=\"subMenuItem.link\" [routerLink]=\"subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n            <a *ngIf=\"!subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n          </li>\n        </ul>\n      </ng-container>\n    </li>\n  </ng-container>\n</ul>\n",
-                    styles: [".c-default{cursor:default}.sub-item{cursor:pointer}"]
+                    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<ul class=\"sidebar-elements\">\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <li\n      [class.parent]=\"menuItem.children\"\n      [hidden]=\"!menuItem.show\"\n      [routerLinkActive]=\"'active'\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async)\n      }\"\n    >\n      <a *ngIf=\"menuItem.link\" [routerLink]=\"menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <a *ngIf=\"!menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <ng-container *ngIf=\"menuItem.children\">\n        <ul class=\"sub-menu\">\n          <li class=\"title\">{{ menuItem.title | translate }}</li>\n          <li\n            *ngFor=\"let subMenuItem of menuItem.children\"\n            [routerLinkActive]=\"'active'\"\n            [routerLinkActiveOptions]=\"{exact: true}\"\n          >\n            <a *ngIf=\"subMenuItem.link\" [routerLink]=\"subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n            <a *ngIf=\"!subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n          </li>\n        </ul>\n      </ng-container>\n    </li>\n  </ng-container>\n</ul>\n",
+                    styles: [".c-default{cursor:default}.sub-item{cursor:pointer}.menu-item--hidden{display:none}.menu-item--visible{display:block}"]
                 },] }
     ];
     MenuComponent.ctorParameters = function () { return [
@@ -2362,6 +2371,7 @@
                     item.listItemFields = _this.fields.map(function (field) { return ({
                         key: field.key,
                         label: field.label,
+                        type: field.type || '',
                         value: _this.resolveObject(field, item),
                     }); });
                 });
@@ -2426,8 +2436,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                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}"]
+                    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              <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)\"\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\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-more-vert\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item)\"\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: ["@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}.table-responsive{overflow-x:visible}.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 [
@@ -3795,6 +3805,7 @@
     var FormIoStateService = /** @class */ (function () {
         function FormIoStateService() {
             this._documentDefinitionName$ = new rxjs.BehaviorSubject(undefined);
+            this._documentId$ = new rxjs.BehaviorSubject(undefined);
             this._currentForm$ = new rxjs.BehaviorSubject(undefined);
         }
         Object.defineProperty(FormIoStateService.prototype, "documentDefinitionName$", {
@@ -3807,6 +3818,16 @@
         FormIoStateService.prototype.setDocumentDefinitionName = function (documentDefinitionName) {
             this._documentDefinitionName$.next(documentDefinitionName);
         };
+        Object.defineProperty(FormIoStateService.prototype, "documentId$", {
+            get: function () {
+                return this._documentId$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FormIoStateService.prototype.setDocumentId = function (documentId) {
+            this._documentId$.next(documentId);
+        };
         Object.defineProperty(FormIoStateService.prototype, "currentForm$", {
             get: function () {
                 return this._currentForm$.asObservable();
@@ -3823,8 +3844,11 @@
         });
         return FormIoStateService;
     }());
+    FormIoStateService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormIoStateService_Factory() { return new FormIoStateService(); }, token: FormIoStateService, providedIn: "root" });
     FormIoStateService.decorators = [
-        { type: i0.Injectable }
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
     ];
 
     /*
@@ -3858,6 +3882,7 @@
         }
         FormioComponent.prototype.ngOnInit = function () {
             var documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName');
+            var documentId = this.route.snapshot.paramMap.get('documentId');
             var formDefinition = this.form;
             this.formDefinition = formDefinition;
             this.errors = [];
@@ -3867,6 +3892,9 @@
             if (documentDefinitionName) {
                 this.stateService.setDocumentDefinitionName(documentDefinitionName);
             }
+            if (documentId) {
+                this.stateService.setDocumentId(documentId);
+            }
             this.subscribeFormRefresh();
             this.openLanguageSubscription();
         };
@@ -4520,11 +4548,7 @@
                     ],
                     declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
                     exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
-                    providers: [
-                        FormIoStateService,
-                        FormIoDomService,
-                        { provide: angularFormio.FormioAppConfig, useValue: ɵ0$1 },
-                    ],
+                    providers: [FormIoDomService, { provide: angularFormio.FormioAppConfig, useValue: ɵ0$1 }],
                 },] }
     ];
 
@@ -4996,6 +5020,78 @@
         angularFormio.registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, FormIoUploaderComponent, UploaderComponent, injector);
     }
 
+    var SelectComponent = angularFormio.Components.components.select;
+    function registerFormioFileSelectorComponent(injector) {
+        var documentService = injector.get(i2.DocumentService);
+        var stateService = injector.get(FormIoStateService);
+        var unavailableMessage = {
+            label: 'could not retrieve documents',
+            value: null,
+        };
+        function getDocumentResources(documentId) {
+            if (!documentId) {
+                return new Promise(function (resolve) {
+                    resolve([unavailableMessage]);
+                });
+            }
+            return documentService
+                .getDocument(documentId)
+                .toPromise()
+                .then(function (document) { return document.relatedFiles.map(function (relatedFile) {
+                return {
+                    label: relatedFile.fileName,
+                    value: relatedFile.fileId,
+                };
+            }); })
+                .catch(function () {
+                return new Promise(function (resolve) {
+                    resolve([unavailableMessage]);
+                });
+            });
+        }
+        var ResourceSelectorComponent = /** @class */ (function (_super) {
+            __extends(ResourceSelectorComponent, _super);
+            function ResourceSelectorComponent() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            ResourceSelectorComponent.schema = function () {
+                var extend = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    extend[_i] = arguments[_i];
+                }
+                return SelectComponent.schema(Object.assign({ type: 'resource-selector', label: 'Resource selector', key: 'resource-selector', dataSrc: 'custom', dataType: 'string', valueProperty: 'value', asyncValues: true, data: {
+                        custom: 'values = instance.getResources()',
+                    } }, extend));
+            };
+            ResourceSelectorComponent.prototype.getResources = function () {
+                return stateService.documentId$
+                    .pipe(operators.take(1))
+                    .toPromise()
+                    .then(function (documentId) { return getDocumentResources(documentId); });
+            };
+            Object.defineProperty(ResourceSelectorComponent, "builderInfo", {
+                get: function () {
+                    return {
+                        title: 'Document picker',
+                        icon: 'th-list',
+                        group: 'basic',
+                        documentation: '/userguide/#textfield',
+                        weight: 0,
+                        schema: ResourceSelectorComponent.schema(),
+                    };
+                },
+                enumerable: false,
+                configurable: true
+            });
+            return ResourceSelectorComponent;
+        }(SelectComponent));
+        angularFormio.Formio.use({
+            components: {
+                'resource-selector': ResourceSelectorComponent,
+            },
+        });
+    }
+
     /*
      * Copyright 2015-2020 Ritense BV, the Netherlands.
      *
@@ -5196,6 +5292,7 @@
     exports.FilterSidebarComponent = FilterSidebarComponent;
     exports.FilterSidebarModule = FilterSidebarModule;
     exports.FormIoModule = FormIoModule;
+    exports.FormIoStateService = FormIoStateService;
     exports.FormIoUploaderComponent = FormIoUploaderComponent;
     exports.FormioBuilderComponent = FormioBuilderComponent;
     exports.FormioComponent = FormioComponent;
@@ -5240,6 +5337,7 @@
     exports.WidgetModule = WidgetModule;
     exports.customUploaderType = customUploaderType;
     exports.menuInitializer = menuInitializer;
+    exports.registerFormioFileSelectorComponent = registerFormioFileSelectorComponent;
     exports.registerFormioUploadComponent = registerFormioUploadComponent;
     exports.ɵ0 = ɵ0;
     exports.ɵa = CamundaGeneratedFormModule;
@@ -5260,10 +5358,9 @@
     exports.ɵp = MenuItemTextComponent;
     exports.ɵq = SubmenuItemTextComponent;
     exports.ɵr = VersionService;
-    exports.ɵs = FormIoStateService;
-    exports.ɵt = FormIoDomService;
-    exports.ɵu = AppConfig;
-    exports.ɵv = SpinnerComponent;
+    exports.ɵs = FormIoDomService;
+    exports.ɵt = AppConfig;
+    exports.ɵu = SpinnerComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });