@valtimo/components 5.15.0 → 10.0.1

package/esm2020/lib/components/search-fields/search-fields.component.mjs

@@ -17,10 +17,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BehaviorSubject, map, Subject, take } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
-import * as i2 from "../spinner/spinner.component";
-import * as i3 from "../widget/widget.component";
-import * as i4 from "@valtimo/user-interface";
-import * as i5 from "@angular/common";
+import * as i2 from "@angular/common";
+import * as i3 from "../spinner/spinner.component";
+import * as i4 from "../widget/widget.component";
+import * as i5 from "@valtimo/user-interface";
 export class SearchFieldsComponent {
     constructor(translateService) {
         this.translateService = translateService;
@@ -126,9 +126,9 @@ export class SearchFieldsComponent {
         this.expanded$.next(false);
     }
 }
-SearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-SearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchFieldsComponent, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", documentDefinitionName: "documentDefinitionName" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"search fields\">\n  <ng-container *ngIf=\"loading\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <valtimo-widget>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"buttonAccordion\"></ng-container>\n      </div>\n    </div>\n    <div\n      class=\"row p-3\"\n      [ngClass]=\"{'row--hidden': (expanded$ | async) === false}\"\n      *ngIf=\"searchFields$ | async as searchFields\"\n    >\n      <ng-container *ngFor=\"let searchField of searchFields; let i = index\">\n        <div class=\"col-4\">\n          <ng-container\n            *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n          ></ng-container>\n        </div>\n        <div class=\"w-100\" *ngIf=\"(i + 1) % 3 === 0\"></div>\n      </ng-container>\n      <div class=\"col-12\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            buttonsTemplate;\n            context: {noSearchFields: !searchFields || searchFields.length === 0}\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key)\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields\"\n        type=\"button\"\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n      <button\n        (click)=\"search()\"\n        [disabled]=\"loading || noSearchFields || (hasValidValues$ | async) === false\"\n        type=\"button\"\n        class=\"btn btn-space btn-primary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"w-100 mb-3\" *ngIf=\"noSearchFields\">\n    <v-paragraph [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonAccordion>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <button\n      [disabled]=\"loading\"\n      type=\"button\"\n      class=\"accordion-button\"\n      (click)=\"toggleExpanded()\"\n      [ngClass]=\"\n        obs.expanded ? 'mdi mdi-chevron-right accordion-button--active' : 'mdi mdi-chevron-down'\n      \"\n    >\n      {{ 'searchFields.searchButtonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n", styles: [".w-100{height:15px}.w-100:last-child{display:none}::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;flex-direction:row;justify-content:end}.right-buttons{display:flex;flex-direction:row}.right-buttons v-button:last-child{margin-left:8px}.row--hidden{display:none}.accordion-button{display:block;width:100%;padding:15px;border:none;outline:none;cursor:pointer;background:#f8f9f9;text-align:left;transition:background .2s;font-size:1.2rem;color:#404040}.accordion-button--active{background:#f1f1f1}\n"], components: [{ type: i2.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i4.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "clear$"], outputs: ["valueChange"] }, { type: i4.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime"], outputs: ["valueChange"] }, { type: i4.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { type: i4.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { type: i4.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { type: i4.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i5.AsyncPipe, "translate": i1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchFieldsComponent, decorators: [{
+SearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+SearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchFieldsComponent, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", documentDefinitionName: "documentDefinitionName" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"search fields\">\n  <ng-container *ngIf=\"loading\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <valtimo-widget>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"buttonAccordion\"></ng-container>\n      </div>\n    </div>\n    <div\n      class=\"row p-3\"\n      [ngClass]=\"{'row--hidden': (expanded$ | async) === false}\"\n      *ngIf=\"searchFields$ | async as searchFields\"\n    >\n      <ng-container *ngFor=\"let searchField of searchFields; let i = index\">\n        <div class=\"col-4\">\n          <ng-container\n            *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n          ></ng-container>\n        </div>\n        <div class=\"w-100\" *ngIf=\"(i + 1) % 3 === 0\"></div>\n      </ng-container>\n      <div class=\"col-12\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            buttonsTemplate;\n            context: {noSearchFields: !searchFields || searchFields.length === 0}\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key)\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields\"\n        type=\"button\"\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n      <button\n        (click)=\"search()\"\n        [disabled]=\"loading || noSearchFields || (hasValidValues$ | async) === false\"\n        type=\"button\"\n        class=\"btn btn-space btn-primary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"w-100 mb-3\" *ngIf=\"noSearchFields\">\n    <v-paragraph [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonAccordion>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <button\n      [disabled]=\"loading\"\n      type=\"button\"\n      class=\"accordion-button\"\n      (click)=\"toggleExpanded()\"\n      [ngClass]=\"\n        obs.expanded ? 'mdi mdi-chevron-right accordion-button--active' : 'mdi mdi-chevron-down'\n      \"\n    >\n      {{ 'searchFields.searchButtonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n", styles: [".w-100{height:15px}.w-100:last-child{display:none}::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;flex-direction:row;justify-content:end}.right-buttons{display:flex;flex-direction:row}.right-buttons v-button:last-child{margin-left:8px}.row--hidden{display:none}.accordion-button{display:block;width:100%;padding:15px;border:none;outline:none;cursor:pointer;background:#f8f9f9;text-align:left;transition:background .2s;font-size:1.2rem;color:#404040}.accordion-button--active{background:#f1f1f1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i5.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i5.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i5.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime"], outputs: ["valueChange"] }, { kind: "component", type: i5.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { kind: "component", type: i5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i5.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-search-fields', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"search fields\">\n  <ng-container *ngIf=\"loading\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <valtimo-widget>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"buttonAccordion\"></ng-container>\n      </div>\n    </div>\n    <div\n      class=\"row p-3\"\n      [ngClass]=\"{'row--hidden': (expanded$ | async) === false}\"\n      *ngIf=\"searchFields$ | async as searchFields\"\n    >\n      <ng-container *ngFor=\"let searchField of searchFields; let i = index\">\n        <div class=\"col-4\">\n          <ng-container\n            *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n          ></ng-container>\n        </div>\n        <div class=\"w-100\" *ngIf=\"(i + 1) % 3 === 0\"></div>\n      </ng-container>\n      <div class=\"col-12\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            buttonsTemplate;\n            context: {noSearchFields: !searchFields || searchFields.length === 0}\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key)\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields\"\n        type=\"button\"\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n      <button\n        (click)=\"search()\"\n        [disabled]=\"loading || noSearchFields || (hasValidValues$ | async) === false\"\n        type=\"button\"\n        class=\"btn btn-space btn-primary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"w-100 mb-3\" *ngIf=\"noSearchFields\">\n    <v-paragraph [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonAccordion>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <button\n      [disabled]=\"loading\"\n      type=\"button\"\n      class=\"accordion-button\"\n      (click)=\"toggleExpanded()\"\n      [ngClass]=\"\n        obs.expanded ? 'mdi mdi-chevron-right accordion-button--active' : 'mdi mdi-chevron-down'\n      \"\n    >\n      {{ 'searchFields.searchButtonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n", styles: [".w-100{height:15px}.w-100:last-child{display:none}::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;flex-direction:row;justify-content:end}.right-buttons{display:flex;flex-direction:row}.right-buttons v-button:last-child{margin-left:8px}.row--hidden{display:none}.accordion-button{display:block;width:100%;padding:15px;border:none;outline:none;cursor:pointer;background:#f8f9f9;text-align:left;transition:background .2s;font-size:1.2rem;color:#404040}.accordion-button--active{background:#f1f1f1}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { loading: [{

package/esm2020/lib/components/search-fields/search-fields.module.mjs

@@ -23,8 +23,8 @@ import { ButtonModule, DatePickerModule, FormModule, InputLabelModule, InputModu
 import * as i0 from "@angular/core";
 export class SearchFieldsModule {
 }
-SearchFieldsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchFieldsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchFieldsModule, declarations: [SearchFieldsComponent], imports: [CommonModule,
+SearchFieldsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchFieldsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, declarations: [SearchFieldsComponent], imports: [CommonModule,
         SpinnerModule,
         WidgetModule,
         TranslateModule,
@@ -35,20 +35,18 @@ SearchFieldsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         ParagraphModule,
         ButtonModule,
         SelectModule], exports: [SearchFieldsComponent] });
-SearchFieldsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchFieldsModule, imports: [[
-            CommonModule,
-            SpinnerModule,
-            WidgetModule,
-            TranslateModule,
-            InputModule,
-            FormModule,
-            DatePickerModule,
-            InputLabelModule,
-            ParagraphModule,
-            ButtonModule,
-            SelectModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchFieldsModule, decorators: [{
+SearchFieldsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, imports: [CommonModule,
+        SpinnerModule,
+        WidgetModule,
+        TranslateModule,
+        InputModule,
+        FormModule,
+        DatePickerModule,
+        InputLabelModule,
+        ParagraphModule,
+        ButtonModule,
+        SelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchFieldsComponent],
@@ -68,4 +66,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     exports: [SearchFieldsComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWZpZWxkcy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NlYXJjaC1maWVsZHMvc2VhcmNoLWZpZWxkcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNoRSxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDeEQsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3JELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNwRCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGdCQUFnQixFQUNoQixVQUFVLEVBQ1YsZ0JBQWdCLEVBQ2hCLFdBQVcsRUFDWCxlQUFlLEVBQ2YsWUFBWSxHQUNiLE1BQU0seUJBQXlCLENBQUM7O0FBbUJqQyxNQUFNLE9BQU8sa0JBQWtCOztnSEFBbEIsa0JBQWtCO2lIQUFsQixrQkFBa0IsaUJBaEJkLHFCQUFxQixhQUVsQyxZQUFZO1FBQ1osYUFBYTtRQUNiLFlBQVk7UUFDWixlQUFlO1FBQ2YsV0FBVztRQUNYLFVBQVU7UUFDVixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGVBQWU7UUFDZixZQUFZO1FBQ1osWUFBWSxhQUVKLHFCQUFxQjtpSEFFcEIsa0JBQWtCLFlBZnBCO1lBQ1AsWUFBWTtZQUNaLGFBQWE7WUFDYixZQUFZO1lBQ1osZUFBZTtZQUNmLFdBQVc7WUFDWCxVQUFVO1lBQ1YsZ0JBQWdCO1lBQ2hCLGdCQUFnQjtZQUNoQixlQUFlO1lBQ2YsWUFBWTtZQUNaLFlBQVk7U0FDYjs0RkFHVSxrQkFBa0I7a0JBakI5QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLHFCQUFxQixDQUFDO29CQUNyQyxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixhQUFhO3dCQUNiLFlBQVk7d0JBQ1osZUFBZTt3QkFDZixXQUFXO3dCQUNYLFVBQVU7d0JBQ1YsZ0JBQWdCO3dCQUNoQixnQkFBZ0I7d0JBQ2hCLGVBQWU7d0JBQ2YsWUFBWTt3QkFDWixZQUFZO3FCQUNiO29CQUNELE9BQU8sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2lCQUNqQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAxNS0yMDIwIFJpdGVuc2UgQlYsIHRoZSBOZXRoZXJsYW5kcy5cbiAqXG4gKiBMaWNlbnNlZCB1bmRlciBFVVBMLCBWZXJzaW9uIDEuMiAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqIGh0dHBzOi8vam9pbnVwLmVjLmV1cm9wYS5ldS9jb2xsZWN0aW9uL2V1cGwvZXVwbC10ZXh0LWV1cGwtMTJcbiAqXG4gKiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgYmFzaXMsXG4gKiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG5cbmltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDb21tb25Nb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1NlYXJjaEZpZWxkc0NvbXBvbmVudH0gZnJvbSAnLi9zZWFyY2gtZmllbGRzLmNvbXBvbmVudCc7XG5pbXBvcnQge1NwaW5uZXJNb2R1bGV9IGZyb20gJy4uL3NwaW5uZXIvc3Bpbm5lci5tb2R1bGUnO1xuaW1wb3J0IHtXaWRnZXRNb2R1bGV9IGZyb20gJy4uL3dpZGdldC93aWRnZXQubW9kdWxlJztcbmltcG9ydCB7VHJhbnNsYXRlTW9kdWxlfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7XG4gIEJ1dHRvbk1vZHVsZSxcbiAgRGF0ZVBpY2tlck1vZHVsZSxcbiAgRm9ybU1vZHVsZSxcbiAgSW5wdXRMYWJlbE1vZHVsZSxcbiAgSW5wdXRNb2R1bGUsXG4gIFBhcmFncmFwaE1vZHVsZSxcbiAgU2VsZWN0TW9kdWxlLFxufSBmcm9tICdAdmFsdGltby91c2VyLWludGVyZmFjZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1NlYXJjaEZpZWxkc0NvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgU3Bpbm5lck1vZHVsZSxcbiAgICBXaWRnZXRNb2R1bGUsXG4gICAgVHJhbnNsYXRlTW9kdWxlLFxuICAgIElucHV0TW9kdWxlLFxuICAgIEZvcm1Nb2R1bGUsXG4gICAgRGF0ZVBpY2tlck1vZHVsZSxcbiAgICBJbnB1dExhYmVsTW9kdWxlLFxuICAgIFBhcmFncmFwaE1vZHVsZSxcbiAgICBCdXR0b25Nb2R1bGUsXG4gICAgU2VsZWN0TW9kdWxlLFxuICBdLFxuICBleHBvcnRzOiBbU2VhcmNoRmllbGRzQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoRmllbGRzTW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWZpZWxkcy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NlYXJjaC1maWVsZHMvc2VhcmNoLWZpZWxkcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNoRSxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDeEQsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3JELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNwRCxPQUFPLEVBQ0wsWUFBWSxFQUNaLGdCQUFnQixFQUNoQixVQUFVLEVBQ1YsZ0JBQWdCLEVBQ2hCLFdBQVcsRUFDWCxlQUFlLEVBQ2YsWUFBWSxHQUNiLE1BQU0seUJBQXlCLENBQUM7O0FBbUJqQyxNQUFNLE9BQU8sa0JBQWtCOztnSEFBbEIsa0JBQWtCO2lIQUFsQixrQkFBa0IsaUJBaEJkLHFCQUFxQixhQUVsQyxZQUFZO1FBQ1osYUFBYTtRQUNiLFlBQVk7UUFDWixlQUFlO1FBQ2YsV0FBVztRQUNYLFVBQVU7UUFDVixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGVBQWU7UUFDZixZQUFZO1FBQ1osWUFBWSxhQUVKLHFCQUFxQjtpSEFFcEIsa0JBQWtCLFlBZDNCLFlBQVk7UUFDWixhQUFhO1FBQ2IsWUFBWTtRQUNaLGVBQWU7UUFDZixXQUFXO1FBQ1gsVUFBVTtRQUNWLGdCQUFnQjtRQUNoQixnQkFBZ0I7UUFDaEIsZUFBZTtRQUNmLFlBQVk7UUFDWixZQUFZOzRGQUlILGtCQUFrQjtrQkFqQjlCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMscUJBQXFCLENBQUM7b0JBQ3JDLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsWUFBWTt3QkFDWixlQUFlO3dCQUNmLFdBQVc7d0JBQ1gsVUFBVTt3QkFDVixnQkFBZ0I7d0JBQ2hCLGdCQUFnQjt3QkFDaEIsZUFBZTt3QkFDZixZQUFZO3dCQUNaLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFLENBQUMscUJBQXFCLENBQUM7aUJBQ2pDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDE1LTIwMjAgUml0ZW5zZSBCViwgdGhlIE5ldGhlcmxhbmRzLlxuICpcbiAqIExpY2Vuc2VkIHVuZGVyIEVVUEwsIFZlcnNpb24gMS4yICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cHM6Ly9qb2ludXAuZWMuZXVyb3BhLmV1L2NvbGxlY3Rpb24vZXVwbC9ldXBsLXRleHQtZXVwbC0xMlxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBiYXNpcyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7U2VhcmNoRmllbGRzQ29tcG9uZW50fSBmcm9tICcuL3NlYXJjaC1maWVsZHMuY29tcG9uZW50JztcbmltcG9ydCB7U3Bpbm5lck1vZHVsZX0gZnJvbSAnLi4vc3Bpbm5lci9zcGlubmVyLm1vZHVsZSc7XG5pbXBvcnQge1dpZGdldE1vZHVsZX0gZnJvbSAnLi4vd2lkZ2V0L3dpZGdldC5tb2R1bGUnO1xuaW1wb3J0IHtUcmFuc2xhdGVNb2R1bGV9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHtcbiAgQnV0dG9uTW9kdWxlLFxuICBEYXRlUGlja2VyTW9kdWxlLFxuICBGb3JtTW9kdWxlLFxuICBJbnB1dExhYmVsTW9kdWxlLFxuICBJbnB1dE1vZHVsZSxcbiAgUGFyYWdyYXBoTW9kdWxlLFxuICBTZWxlY3RNb2R1bGUsXG59IGZyb20gJ0B2YWx0aW1vL3VzZXItaW50ZXJmYWNlJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU2VhcmNoRmllbGRzQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBTcGlubmVyTW9kdWxlLFxuICAgIFdpZGdldE1vZHVsZSxcbiAgICBUcmFuc2xhdGVNb2R1bGUsXG4gICAgSW5wdXRNb2R1bGUsXG4gICAgRm9ybU1vZHVsZSxcbiAgICBEYXRlUGlja2VyTW9kdWxlLFxuICAgIElucHV0TGFiZWxNb2R1bGUsXG4gICAgUGFyYWdyYXBoTW9kdWxlLFxuICAgIEJ1dHRvbk1vZHVsZSxcbiAgICBTZWxlY3RNb2R1bGUsXG4gIF0sXG4gIGV4cG9ydHM6IFtTZWFyY2hGaWVsZHNDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBTZWFyY2hGaWVsZHNNb2R1bGUge31cbiJdfQ==

package/esm2020/lib/components/searchable-dropdown/searchable-dropdown.component.mjs

@@ -167,9 +167,9 @@ export class SearchableDropdownComponent {
         });
     }
 }
-SearchableDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchableDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", width: "width" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "click": "clickInside()", "document:click": "clickout()" } }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button\n      class=\"btn btn-primary btn-sm searchable-dropdown__size\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5\n      class=\"searchable-dropdown__underline-button\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"searchable-dropdown__container\" [style.width.px]=\"width\">\n    <div class=\"searchable-dropdown__size searchable-dropdown__search\" [style.width.px]=\"width\">\n      <input\n        #search\n        [ngClass]=\"{disabled: disabled}\"\n        [placeholder]=\"searchText\"\n        [formControl]=\"searchTerm\"\n      />\n      {{ search.focus() }}\n    </div>\n    <div\n      class=\"searchable-dropdown__list\"\n      (mouseenter)=\"mouseEnterList()\"\n      (mouseleave)=\"mouseLeaveList()\"\n    >\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container\n          *ngIf=\"\n            filteredItems.length > 0 && focusedItemId$ | async as focusedItemId;\n            else noResults\n          \"\n        >\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{focus: focusedItemId === item.id, disabled: disabled}\"\n            class=\"searchable-dropdown__button searchable-dropdown__size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"searchable-dropdown__button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div\n    class=\"searchable-dropdown__button searchable-dropdown__size disabled\"\n    [style.width.px]=\"width\"\n  >\n    <span class=\"searchable-dropdown__button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div\n    *ngIf=\"style === 'button' || !style\"\n    class=\"searchable-dropdown__size\"\n    [style.width.px]=\"width\"\n  ></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"searchable-dropdown__underline-button\"><b>-</b></h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.searchable-dropdown__size{width:250px;height:34px}.searchable-dropdown__underline-button{text-decoration:underline;width:250px;cursor:pointer}.searchable-dropdown__container{background-color:#fff;position:fixed;z-index:999;border:1px solid #e3e3e3;box-shadow:0 0 6px #0000001f;border-radius:3px;padding:7px 0;overflow:hidden;display:flex;flex-direction:column;width:250px;max-height:300px}.searchable-dropdown__list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.searchable-dropdown__search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.searchable-dropdown__search input{width:100%;border:none;outline:none;padding:0}.searchable-dropdown__search input:focus{border:none;outline:none}.searchable-dropdown__button{font-weight:400;color:#504e4e;padding:8px 24px;background-color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;border:none;outline:none}.searchable-dropdown__button.focus{background-color:#f5f5f5}.searchable-dropdown__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
+SearchableDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchableDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", width: "width" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "click": "clickInside()", "document:click": "clickout()" } }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button\n      class=\"btn btn-primary btn-sm searchable-dropdown__size\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5\n      class=\"searchable-dropdown__underline-button\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"searchable-dropdown__container\" [style.width.px]=\"width\">\n    <div class=\"searchable-dropdown__size searchable-dropdown__search\" [style.width.px]=\"width\">\n      <input\n        #search\n        [ngClass]=\"{disabled: disabled}\"\n        [placeholder]=\"searchText\"\n        [formControl]=\"searchTerm\"\n      />\n      {{ search.focus() }}\n    </div>\n    <div\n      class=\"searchable-dropdown__list\"\n      (mouseenter)=\"mouseEnterList()\"\n      (mouseleave)=\"mouseLeaveList()\"\n    >\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container\n          *ngIf=\"\n            filteredItems.length > 0 && focusedItemId$ | async as focusedItemId;\n            else noResults\n          \"\n        >\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{focus: focusedItemId === item.id, disabled: disabled}\"\n            class=\"searchable-dropdown__button searchable-dropdown__size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"searchable-dropdown__button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div\n    class=\"searchable-dropdown__button searchable-dropdown__size disabled\"\n    [style.width.px]=\"width\"\n  >\n    <span class=\"searchable-dropdown__button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div\n    *ngIf=\"style === 'button' || !style\"\n    class=\"searchable-dropdown__size\"\n    [style.width.px]=\"width\"\n  ></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"searchable-dropdown__underline-button\"><b>-</b></h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.searchable-dropdown__size{width:250px;height:34px}.searchable-dropdown__underline-button{text-decoration:underline;width:250px;cursor:pointer}.searchable-dropdown__container{background-color:#fff;position:fixed;z-index:999;border:1px solid #e3e3e3;box-shadow:0 0 6px #0000001f;border-radius:3px;padding:7px 0;overflow:hidden;display:flex;flex-direction:column;width:250px;max-height:300px}.searchable-dropdown__list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.searchable-dropdown__search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.searchable-dropdown__search input{width:100%;border:none;outline:none;padding:0}.searchable-dropdown__search input:focus{border:none;outline:none}.searchable-dropdown__button{font-weight:400;color:#504e4e;padding:8px 24px;background-color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;border:none;outline:none}.searchable-dropdown__button.focus{background-color:#f5f5f5}.searchable-dropdown__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-searchable-dropdown', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button\n      class=\"btn btn-primary btn-sm searchable-dropdown__size\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5\n      class=\"searchable-dropdown__underline-button\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"searchable-dropdown__container\" [style.width.px]=\"width\">\n    <div class=\"searchable-dropdown__size searchable-dropdown__search\" [style.width.px]=\"width\">\n      <input\n        #search\n        [ngClass]=\"{disabled: disabled}\"\n        [placeholder]=\"searchText\"\n        [formControl]=\"searchTerm\"\n      />\n      {{ search.focus() }}\n    </div>\n    <div\n      class=\"searchable-dropdown__list\"\n      (mouseenter)=\"mouseEnterList()\"\n      (mouseleave)=\"mouseLeaveList()\"\n    >\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container\n          *ngIf=\"\n            filteredItems.length > 0 && focusedItemId$ | async as focusedItemId;\n            else noResults\n          \"\n        >\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{focus: focusedItemId === item.id, disabled: disabled}\"\n            class=\"searchable-dropdown__button searchable-dropdown__size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"searchable-dropdown__button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div\n    class=\"searchable-dropdown__button searchable-dropdown__size disabled\"\n    [style.width.px]=\"width\"\n  >\n    <span class=\"searchable-dropdown__button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div\n    *ngIf=\"style === 'button' || !style\"\n    class=\"searchable-dropdown__size\"\n    [style.width.px]=\"width\"\n  ></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"searchable-dropdown__underline-button\"><b>-</b></h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.searchable-dropdown__size{width:250px;height:34px}.searchable-dropdown__underline-button{text-decoration:underline;width:250px;cursor:pointer}.searchable-dropdown__container{background-color:#fff;position:fixed;z-index:999;border:1px solid #e3e3e3;box-shadow:0 0 6px #0000001f;border-radius:3px;padding:7px 0;overflow:hidden;display:flex;flex-direction:column;width:250px;max-height:300px}.searchable-dropdown__list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.searchable-dropdown__search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.searchable-dropdown__search input{width:100%;border:none;outline:none;padding:0}.searchable-dropdown__search input:focus{border:none;outline:none}.searchable-dropdown__button{font-weight:400;color:#504e4e;padding:8px 24px;background-color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;border:none;outline:none}.searchable-dropdown__button.focus{background-color:#f5f5f5}.searchable-dropdown__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\n"] }]
         }], propDecorators: { style: [{

package/esm2020/lib/components/searchable-dropdown/searchable-dropdown.module.mjs

@@ -20,10 +20,10 @@ import { SearchableDropdownComponent } from './searchable-dropdown.component';
 import * as i0 from "@angular/core";
 export class SearchableDropdownModule {
 }
-SearchableDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchableDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownModule, declarations: [SearchableDropdownComponent], imports: [CommonModule, ReactiveFormsModule], exports: [SearchableDropdownComponent] });
-SearchableDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownModule, imports: [[CommonModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownModule, decorators: [{
+SearchableDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchableDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, declarations: [SearchableDropdownComponent], imports: [CommonModule, ReactiveFormsModule], exports: [SearchableDropdownComponent] });
+SearchableDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, imports: [CommonModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchableDropdownComponent],
@@ -31,4 +31,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     exports: [SearchableDropdownComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoYWJsZS1kcm9wZG93bi5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NlYXJjaGFibGUtZHJvcGRvd24vc2VhcmNoYWJsZS1kcm9wZG93bi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSxpQ0FBaUMsQ0FBQzs7QUFPNUUsTUFBTSxPQUFPLHdCQUF3Qjs7c0hBQXhCLHdCQUF3Qjt1SEFBeEIsd0JBQXdCLGlCQUpwQiwyQkFBMkIsYUFDaEMsWUFBWSxFQUFFLG1CQUFtQixhQUNqQywyQkFBMkI7dUhBRTFCLHdCQUF3QixZQUgxQixDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQzs0RkFHakMsd0JBQXdCO2tCQUxwQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLDJCQUEyQixDQUFDO29CQUMzQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsbUJBQW1CLENBQUM7b0JBQzVDLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDO2lCQUN2QyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAxNS0yMDIwIFJpdGVuc2UgQlYsIHRoZSBOZXRoZXJsYW5kcy5cbiAqXG4gKiBMaWNlbnNlZCB1bmRlciBFVVBMLCBWZXJzaW9uIDEuMiAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqIGh0dHBzOi8vam9pbnVwLmVjLmV1cm9wYS5ldS9jb2xsZWN0aW9uL2V1cGwvZXVwbC10ZXh0LWV1cGwtMTJcbiAqXG4gKiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgYmFzaXMsXG4gKiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG5cbmltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1JlYWN0aXZlRm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7U2VhcmNoYWJsZURyb3Bkb3duQ29tcG9uZW50fSBmcm9tICcuL3NlYXJjaGFibGUtZHJvcGRvd24uY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU2VhcmNoYWJsZURyb3Bkb3duQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgUmVhY3RpdmVGb3Jtc01vZHVsZV0sXG4gIGV4cG9ydHM6IFtTZWFyY2hhYmxlRHJvcGRvd25Db21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBTZWFyY2hhYmxlRHJvcGRvd25Nb2R1bGUge31cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoYWJsZS1kcm9wZG93bi5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NlYXJjaGFibGUtZHJvcGRvd24vc2VhcmNoYWJsZS1kcm9wZG93bi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSxpQ0FBaUMsQ0FBQzs7QUFPNUUsTUFBTSxPQUFPLHdCQUF3Qjs7c0hBQXhCLHdCQUF3Qjt1SEFBeEIsd0JBQXdCLGlCQUpwQiwyQkFBMkIsYUFDaEMsWUFBWSxFQUFFLG1CQUFtQixhQUNqQywyQkFBMkI7dUhBRTFCLHdCQUF3QixZQUh6QixZQUFZLEVBQUUsbUJBQW1COzRGQUdoQyx3QkFBd0I7a0JBTHBDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsMkJBQTJCLENBQUM7b0JBQzNDLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQztvQkFDNUMsT0FBTyxFQUFFLENBQUMsMkJBQTJCLENBQUM7aUJBQ3ZDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDE1LTIwMjAgUml0ZW5zZSBCViwgdGhlIE5ldGhlcmxhbmRzLlxuICpcbiAqIExpY2Vuc2VkIHVuZGVyIEVVUEwsIFZlcnNpb24gMS4yICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cHM6Ly9qb2ludXAuZWMuZXVyb3BhLmV1L2NvbGxlY3Rpb24vZXVwbC9ldXBsLXRleHQtZXVwbC0xMlxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBiYXNpcyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cblxuaW1wb3J0IHtDb21tb25Nb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge05nTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7UmVhY3RpdmVGb3Jtc01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtTZWFyY2hhYmxlRHJvcGRvd25Db21wb25lbnR9IGZyb20gJy4vc2VhcmNoYWJsZS1kcm9wZG93bi5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTZWFyY2hhYmxlRHJvcGRvd25Db21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlXSxcbiAgZXhwb3J0czogW1NlYXJjaGFibGVEcm9wZG93bkNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIFNlYXJjaGFibGVEcm9wZG93bk1vZHVsZSB7fVxuIl19

package/esm2020/lib/components/searchable-dropdown-select/searchable-dropdown-select.component.mjs

@@ -15,8 +15,8 @@
  */
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "../searchable-dropdown/searchable-dropdown.component";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "../searchable-dropdown/searchable-dropdown.component";
 export class SearchableDropdownSelectComponent {
     constructor() {
         this.width = 250;
@@ -30,9 +30,9 @@ export class SearchableDropdownSelectComponent {
         this.clearSelection.emit();
     }
 }
-SearchableDropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchableDropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", selectedText: "selectedText", selectedTextValue: "selectedTextValue", clearSelectionButtonTitle: "clearSelectionButtonTitle", hasSelection: "hasSelection", width: "width" }, outputs: { itemSelected: "itemSelected", clearSelection: "clearSelection" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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: ["/*!\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 */.selected-text{margin:0}.clear-icon{font-size:16px}\n"], components: [{ type: i1.SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "width"], outputs: ["itemSelected"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownSelectComponent, decorators: [{
+SearchableDropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchableDropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", selectedText: "selectedText", selectedTextValue: "selectedTextValue", clearSelectionButtonTitle: "clearSelectionButtonTitle", hasSelection: "hasSelection", width: "width" }, outputs: { itemSelected: "itemSelected", clearSelection: "clearSelection" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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: ["/*!\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 */.selected-text{margin:0}.clear-icon{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "width"], outputs: ["itemSelected"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-searchable-dropdown-select', 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<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: ["/*!\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 */.selected-text{margin:0}.clear-icon{font-size:16px}\n"] }]
         }], propDecorators: { style: [{

package/esm2020/lib/components/searchable-dropdown-select/searchable-dropdown-select.module.mjs

@@ -21,10 +21,10 @@ import { SearchableDropdownModule } from '../searchable-dropdown/searchable-drop
 import * as i0 from "@angular/core";
 export class SearchableDropdownSelectModule {
 }
-SearchableDropdownSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchableDropdownSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownSelectModule, declarations: [SearchableDropdownSelectComponent], imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule], exports: [SearchableDropdownSelectComponent] });
-SearchableDropdownSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownSelectModule, imports: [[CommonModule, ReactiveFormsModule, SearchableDropdownModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchableDropdownSelectModule, decorators: [{
+SearchableDropdownSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchableDropdownSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, declarations: [SearchableDropdownSelectComponent], imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule], exports: [SearchableDropdownSelectComponent] });
+SearchableDropdownSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchableDropdownSelectComponent],
@@ -32,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     exports: [SearchableDropdownSelectComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoYWJsZS1kcm9wZG93bi1zZWxlY3QubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGltby9jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9zZWFyY2hhYmxlLWRyb3Bkb3duLXNlbGVjdC9zZWFyY2hhYmxlLWRyb3Bkb3duLXNlbGVjdC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsaUNBQWlDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN6RixPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSxtREFBbUQsQ0FBQzs7QUFPM0YsTUFBTSxPQUFPLDhCQUE4Qjs7NEhBQTlCLDhCQUE4Qjs2SEFBOUIsOEJBQThCLGlCQUoxQixpQ0FBaUMsYUFDdEMsWUFBWSxFQUFFLG1CQUFtQixFQUFFLHdCQUF3QixhQUMzRCxpQ0FBaUM7NkhBRWhDLDhCQUE4QixZQUhoQyxDQUFDLFlBQVksRUFBRSxtQkFBbUIsRUFBRSx3QkFBd0IsQ0FBQzs0RkFHM0QsOEJBQThCO2tCQUwxQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLGlDQUFpQyxDQUFDO29CQUNqRCxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsd0JBQXdCLENBQUM7b0JBQ3RFLE9BQU8sRUFBRSxDQUFDLGlDQUFpQyxDQUFDO2lCQUM3QyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAxNS0yMDIwIFJpdGVuc2UgQlYsIHRoZSBOZXRoZXJsYW5kcy5cbiAqXG4gKiBMaWNlbnNlZCB1bmRlciBFVVBMLCBWZXJzaW9uIDEuMiAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqIGh0dHBzOi8vam9pbnVwLmVjLmV1cm9wYS5ldS9jb2xsZWN0aW9uL2V1cGwvZXVwbC10ZXh0LWV1cGwtMTJcbiAqXG4gKiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgYmFzaXMsXG4gKiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG5cbmltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1JlYWN0aXZlRm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7U2VhcmNoYWJsZURyb3Bkb3duU2VsZWN0Q29tcG9uZW50fSBmcm9tICcuL3NlYXJjaGFibGUtZHJvcGRvd24tc2VsZWN0LmNvbXBvbmVudCc7XG5pbXBvcnQge1NlYXJjaGFibGVEcm9wZG93bk1vZHVsZX0gZnJvbSAnLi4vc2VhcmNoYWJsZS1kcm9wZG93bi9zZWFyY2hhYmxlLWRyb3Bkb3duLm1vZHVsZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1NlYXJjaGFibGVEcm9wZG93blNlbGVjdENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUsIFNlYXJjaGFibGVEcm9wZG93bk1vZHVsZV0sXG4gIGV4cG9ydHM6IFtTZWFyY2hhYmxlRHJvcGRvd25TZWxlY3RDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBTZWFyY2hhYmxlRHJvcGRvd25TZWxlY3RNb2R1bGUge31cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoYWJsZS1kcm9wZG93bi1zZWxlY3QubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGltby9jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9zZWFyY2hhYmxlLWRyb3Bkb3duLXNlbGVjdC9zZWFyY2hhYmxlLWRyb3Bkb3duLXNlbGVjdC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsaUNBQWlDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN6RixPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSxtREFBbUQsQ0FBQzs7QUFPM0YsTUFBTSxPQUFPLDhCQUE4Qjs7NEhBQTlCLDhCQUE4Qjs2SEFBOUIsOEJBQThCLGlCQUoxQixpQ0FBaUMsYUFDdEMsWUFBWSxFQUFFLG1CQUFtQixFQUFFLHdCQUF3QixhQUMzRCxpQ0FBaUM7NkhBRWhDLDhCQUE4QixZQUgvQixZQUFZLEVBQUUsbUJBQW1CLEVBQUUsd0JBQXdCOzRGQUcxRCw4QkFBOEI7a0JBTDFDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsaUNBQWlDLENBQUM7b0JBQ2pELE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxtQkFBbUIsRUFBRSx3QkFBd0IsQ0FBQztvQkFDdEUsT0FBTyxFQUFFLENBQUMsaUNBQWlDLENBQUM7aUJBQzdDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDE1LTIwMjAgUml0ZW5zZSBCViwgdGhlIE5ldGhlcmxhbmRzLlxuICpcbiAqIExpY2Vuc2VkIHVuZGVyIEVVUEwsIFZlcnNpb24gMS4yICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cHM6Ly9qb2ludXAuZWMuZXVyb3BhLmV1L2NvbGxlY3Rpb24vZXVwbC9ldXBsLXRleHQtZXVwbC0xMlxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBiYXNpcyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cblxuaW1wb3J0IHtDb21tb25Nb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge05nTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7UmVhY3RpdmVGb3Jtc01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtTZWFyY2hhYmxlRHJvcGRvd25TZWxlY3RDb21wb25lbnR9IGZyb20gJy4vc2VhcmNoYWJsZS1kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50JztcbmltcG9ydCB7U2VhcmNoYWJsZURyb3Bkb3duTW9kdWxlfSBmcm9tICcuLi9zZWFyY2hhYmxlLWRyb3Bkb3duL3NlYXJjaGFibGUtZHJvcGRvd24ubW9kdWxlJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU2VhcmNoYWJsZURyb3Bkb3duU2VsZWN0Q29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgUmVhY3RpdmVGb3Jtc01vZHVsZSwgU2VhcmNoYWJsZURyb3Bkb3duTW9kdWxlXSxcbiAgZXhwb3J0czogW1NlYXJjaGFibGVEcm9wZG93blNlbGVjdENvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIFNlYXJjaGFibGVEcm9wZG93blNlbGVjdE1vZHVsZSB7fVxuIl19

package/esm2020/lib/components/spinner/spinner.component.mjs

@@ -15,8 +15,8 @@
  */
 import { Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "ngx-spinner";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-spinner";
 import * as i3 from "@ngx-translate/core";
 export class SpinnerComponent {
     constructor() {
@@ -29,9 +29,9 @@ export class SpinnerComponent {
         this.noMarginTop = false;
     }
 }
-SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpinnerComponent, selector: "valtimo-spinner", inputs: { useBootstrapSpinner: "useBootstrapSpinner", name: "name", type: "type", size: "size", color: "color", bdColor: "bdColor", fullScreen: "fullScreen", noMarginTop: "noMarginTop" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top:0}\n"], components: [{ type: i1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpinnerComponent, decorators: [{
+SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SpinnerComponent, selector: "valtimo-spinner", inputs: { useBootstrapSpinner: "useBootstrapSpinner", name: "name", type: "type", size: "size", color: "color", bdColor: "bdColor", fullScreen: "fullScreen", noMarginTop: "noMarginTop" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-spinner', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top:0}\n"] }]
         }], propDecorators: { useBootstrapSpinner: [{

package/esm2020/lib/components/spinner/spinner.module.mjs

@@ -21,10 +21,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 export class SpinnerModule {
 }
-SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule, NgxSpinnerModule, TranslateModule], exports: [SpinnerComponent] });
-SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpinnerModule, imports: [[CommonModule, NgxSpinnerModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpinnerModule, decorators: [{
+SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule, NgxSpinnerModule, TranslateModule], exports: [SpinnerComponent] });
+SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, imports: [CommonModule, NgxSpinnerModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SpinnerComponent],
@@ -32,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     imports: [CommonModule, NgxSpinnerModule, TranslateModule],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5lci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NwaW5uZXIvc3Bpbm5lci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFDN0MsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQU9wRCxNQUFNLE9BQU8sYUFBYTs7MkdBQWIsYUFBYTs0R0FBYixhQUFhLGlCQUpULGdCQUFnQixhQUVyQixZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxhQUQvQyxnQkFBZ0I7NEdBR2YsYUFBYSxZQUZmLENBQUMsWUFBWSxFQUFFLGdCQUFnQixFQUFFLGVBQWUsQ0FBQzs0RkFFL0MsYUFBYTtrQkFMekIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQztvQkFDaEMsT0FBTyxFQUFFLENBQUMsZ0JBQWdCLENBQUM7b0JBQzNCLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxlQUFlLENBQUM7aUJBQzNEIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDE1LTIwMjAgUml0ZW5zZSBCViwgdGhlIE5ldGhlcmxhbmRzLlxuICpcbiAqIExpY2Vuc2VkIHVuZGVyIEVVUEwsIFZlcnNpb24gMS4yICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cHM6Ly9qb2ludXAuZWMuZXVyb3BhLmV1L2NvbGxlY3Rpb24vZXVwbC9ldXBsLXRleHQtZXVwbC0xMlxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBiYXNpcyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cblxuaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7U3Bpbm5lckNvbXBvbmVudH0gZnJvbSAnLi9zcGlubmVyLmNvbXBvbmVudCc7XG5pbXBvcnQge05neFNwaW5uZXJNb2R1bGV9IGZyb20gJ25neC1zcGlubmVyJztcbmltcG9ydCB7VHJhbnNsYXRlTW9kdWxlfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU3Bpbm5lckNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTcGlubmVyQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgTmd4U3Bpbm5lck1vZHVsZSwgVHJhbnNsYXRlTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgU3Bpbm5lck1vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5lci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NwaW5uZXIvc3Bpbm5lci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFDN0MsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQU9wRCxNQUFNLE9BQU8sYUFBYTs7MkdBQWIsYUFBYTs0R0FBYixhQUFhLGlCQUpULGdCQUFnQixhQUVyQixZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxhQUQvQyxnQkFBZ0I7NEdBR2YsYUFBYSxZQUZkLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxlQUFlOzRGQUU5QyxhQUFhO2tCQUx6QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLGdCQUFnQixDQUFDO29CQUNoQyxPQUFPLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQztvQkFDM0IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGdCQUFnQixFQUFFLGVBQWUsQ0FBQztpQkFDM0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IDIwMTUtMjAyMCBSaXRlbnNlIEJWLCB0aGUgTmV0aGVybGFuZHMuXG4gKlxuICogTGljZW5zZWQgdW5kZXIgRVVQTCwgVmVyc2lvbiAxLjIgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiBodHRwczovL2pvaW51cC5lYy5ldXJvcGEuZXUvY29sbGVjdGlvbi9ldXBsL2V1cGwtdGV4dC1ldXBsLTEyXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIGJhc2lzLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuXG5pbXBvcnQge05nTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtTcGlubmVyQ29tcG9uZW50fSBmcm9tICcuL3NwaW5uZXIuY29tcG9uZW50JztcbmltcG9ydCB7Tmd4U3Bpbm5lck1vZHVsZX0gZnJvbSAnbmd4LXNwaW5uZXInO1xuaW1wb3J0IHtUcmFuc2xhdGVNb2R1bGV9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTcGlubmVyQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW1NwaW5uZXJDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBOZ3hTcGlubmVyTW9kdWxlLCBUcmFuc2xhdGVNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBTcGlubmVyTW9kdWxlIHt9XG4iXX0=

package/esm2020/lib/components/timeline/timeline.component.mjs

@@ -19,12 +19,12 @@ import * as i1 from "@angular/common";
 import * as i2 from "@ngx-translate/core";
 export class TimelineComponent {
 }
-TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineComponent, selector: "valtimo-timeline", inputs: { items: "items" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineComponent, decorators: [{
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TimelineComponent, selector: "valtimo-timeline", inputs: { items: "items" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate : item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-timeline', 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 id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-timeline', 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 id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate : item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGltby9jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBRUgsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7QUFRL0MsTUFBTSxPQUFPLGlCQUFpQjs7K0dBQWpCLGlCQUFpQjttR0FBakIsaUJBQWlCLG9GQ3hCOUIsd2lEQXVDQTs0RkRmYSxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQUtuQixLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IDIwMTUtMjAyMCBSaXRlbnNlIEJWLCB0aGUgTmV0aGVybGFuZHMuXG4gKlxuICogTGljZW5zZWQgdW5kZXIgRVVQTCwgVmVyc2lvbiAxLjIgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiBodHRwczovL2pvaW51cC5lYy5ldXJvcGEuZXUvY29sbGVjdGlvbi9ldXBsL2V1cGwtdGV4dC1ldXBsLTEyXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIGJhc2lzLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuXG5pbXBvcnQge0NvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUaW1lbGluZUl0ZW19IGZyb20gJy4uLy4uL21vZGVscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbHRpbW8tdGltZWxpbmUnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGltZWxpbmUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90aW1lbGluZS5jb21wb25lbnQuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRpbWVsaW5lQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaXRlbXM6IEFycmF5PFRpbWVsaW5lSXRlbT47XG59XG4iLCI8IS0tXG4gIH4gQ29weXJpZ2h0IDIwMTUtMjAyMCBSaXRlbnNlIEJWLCB0aGUgTmV0aGVybGFuZHMuXG4gIH5cbiAgfiBMaWNlbnNlZCB1bmRlciBFVVBMLCBWZXJzaW9uIDEuMiAodGhlIFwiTGljZW5zZVwiKTtcbiAgfiB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gIH4gWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gIH5cbiAgfiBodHRwczovL2pvaW51cC5lYy5ldXJvcGEuZXUvY29sbGVjdGlvbi9ldXBsL2V1cGwtdGV4dC1ldXBsLTEyXG4gIH5cbiAgfiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gIH4gZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIGJhc2lzLFxuICB+IFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICB+IFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAgfiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAgLS0+XG5cbjxkaXY+XG4gIDxkaXYgaWQ9XCJuby1yZXN1bHRzXCIgY2xhc3M9XCJwLTVcIiAqbmdJZj1cIml0ZW1zPy5sZW5ndGggPT09IDBcIj5ObyByZXN1bHQgZm91bmQ8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInBiLTVcIiAqbmdJZj1cIml0ZW1zPy5sZW5ndGggPiAwXCI+XG4gICAgPHVsIGNsYXNzPVwidGltZWxpbmUgbWItMCBweS01XCI+XG4gICAgICA8bGkgY2xhc3M9XCJ0aW1lbGluZS1pdGVtIHN0YXR1cy1kb25lXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInRpbWVsaW5lLWRhdGVcIj5cbiAgICAgICAgICA8c3Bhbj57eyBpdGVtLmRhdGUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGltZWxpbmUtY29udGVudCBtdC0xXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInRpbWVsaW5lLWhlYWRlciBwLTBcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGltZWxpbmUtdGltZVwiPnt7IGl0ZW0udGltZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGltZWxpbmUtYXV0aG9yXCI+e3sgaXRlbS51c2VyIH19PC9zcGFuPlxuICAgICAgICAgICAgPGJyIC8+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRpbWVsaW5lLWFjdGl2aXR5XCI+e3sgaXRlbS5hY3Rpdml0eSB9fTwvcD5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0aW1lbGluZS1zdW1tYXJ5XCI+XG4gICAgICAgICAgICAgIDxwPnt7IGl0ZW0uc3VtbWFyeVRyYW5zbGF0aW9uS2V5IHwgdHJhbnNsYXRlOiBpdGVtLnN1bW1hcnlUcmFuc2xhdGlvblBhcmFtcyB9fTwvcD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGltby9jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBRUgsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7QUFRL0MsTUFBTSxPQUFPLGlCQUFpQjs7K0dBQWpCLGlCQUFpQjttR0FBakIsaUJBQWlCLG9GQ3hCOUIseWlEQXVDQTs0RkRmYSxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQUtuQixLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IDIwMTUtMjAyMCBSaXRlbnNlIEJWLCB0aGUgTmV0aGVybGFuZHMuXG4gKlxuICogTGljZW5zZWQgdW5kZXIgRVVQTCwgVmVyc2lvbiAxLjIgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiBodHRwczovL2pvaW51cC5lYy5ldXJvcGEuZXUvY29sbGVjdGlvbi9ldXBsL2V1cGwtdGV4dC1ldXBsLTEyXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIGJhc2lzLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuXG5pbXBvcnQge0NvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUaW1lbGluZUl0ZW19IGZyb20gJy4uLy4uL21vZGVscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbHRpbW8tdGltZWxpbmUnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGltZWxpbmUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90aW1lbGluZS5jb21wb25lbnQuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRpbWVsaW5lQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaXRlbXM6IEFycmF5PFRpbWVsaW5lSXRlbT47XG59XG4iLCI8IS0tXG4gIH4gQ29weXJpZ2h0IDIwMTUtMjAyMCBSaXRlbnNlIEJWLCB0aGUgTmV0aGVybGFuZHMuXG4gIH5cbiAgfiBMaWNlbnNlZCB1bmRlciBFVVBMLCBWZXJzaW9uIDEuMiAodGhlIFwiTGljZW5zZVwiKTtcbiAgfiB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gIH4gWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gIH5cbiAgfiBodHRwczovL2pvaW51cC5lYy5ldXJvcGEuZXUvY29sbGVjdGlvbi9ldXBsL2V1cGwtdGV4dC1ldXBsLTEyXG4gIH5cbiAgfiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gIH4gZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIGJhc2lzLFxuICB+IFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICB+IFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAgfiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAgLS0+XG5cbjxkaXY+XG4gIDxkaXYgaWQ9XCJuby1yZXN1bHRzXCIgY2xhc3M9XCJwLTVcIiAqbmdJZj1cIml0ZW1zPy5sZW5ndGggPT09IDBcIj5ObyByZXN1bHQgZm91bmQ8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInBiLTVcIiAqbmdJZj1cIml0ZW1zPy5sZW5ndGggPiAwXCI+XG4gICAgPHVsIGNsYXNzPVwidGltZWxpbmUgbWItMCBweS01XCI+XG4gICAgICA8bGkgY2xhc3M9XCJ0aW1lbGluZS1pdGVtIHN0YXR1cy1kb25lXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInRpbWVsaW5lLWRhdGVcIj5cbiAgICAgICAgICA8c3Bhbj57eyBpdGVtLmRhdGUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGltZWxpbmUtY29udGVudCBtdC0xXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInRpbWVsaW5lLWhlYWRlciBwLTBcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGltZWxpbmUtdGltZVwiPnt7IGl0ZW0udGltZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGltZWxpbmUtYXV0aG9yXCI+e3sgaXRlbS51c2VyIH19PC9zcGFuPlxuICAgICAgICAgICAgPGJyIC8+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInRpbWVsaW5lLWFjdGl2aXR5XCI+e3sgaXRlbS5hY3Rpdml0eSB9fTwvcD5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0aW1lbGluZS1zdW1tYXJ5XCI+XG4gICAgICAgICAgICAgIDxwPnt7IGl0ZW0uc3VtbWFyeVRyYW5zbGF0aW9uS2V5IHwgdHJhbnNsYXRlIDogaXRlbS5zdW1tYXJ5VHJhbnNsYXRpb25QYXJhbXMgfX08L3A+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2xpPlxuICAgIDwvdWw+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=