ngx-ode-ui 4.6.0-dev.1 → 4.6.0

package/fesm2020/ngx-ode-ui.mjs

@@ -0,0 +1,2952 @@
+import * as i0 from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, Component, ViewChild, Input, Output, HostBinding, Directive, Pipe, TemplateRef, ContentChild, ChangeDetectionStrategy, HostListener, ContentChildren, Injector, NgModule } from '@angular/core';
+import { throwError, Observable, Subject } from 'rxjs';
+import { OdeComponent } from 'ngx-ode-core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgModel, FormsModule } from '@angular/forms';
+import Flatpickr from 'flatpickr';
+import French from 'flatpickr/dist/l10n/fr.js';
+import * as i1 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import * as i2$1 from 'ngx-ode-sijil';
+import { NgxOdeSijilModule } from 'ngx-ode-sijil';
+import * as i2$2 from 'ngx-infinite-scroll';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+class DynamicModuleImportsService {
+    constructor() {
+        this.imports = [];
+    }
+}
+DynamicModuleImportsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicModuleImportsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicModuleImportsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicModuleImportsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicModuleImportsService, decorators: [{
+            type: Injectable
+        }] });
+
+class InputFileService {
+    validateFiles(files, maxFilesNumber, allowedExtensions) {
+        if (!files) {
+            return throwError('files is empty');
+        }
+        if (files.length > maxFilesNumber) {
+            return throwError(`Only ${maxFilesNumber} file(s) allowed`);
+        }
+        const validFiles = [];
+        const invalidFiles = [];
+        for (let i = 0; i < files.length; i++) {
+            const filenameSplit = files[i].name.split('.');
+            const ext = filenameSplit[filenameSplit.length - 1];
+            if (allowedExtensions.lastIndexOf(ext.toLowerCase()) !== -1) {
+                validFiles.push(files[i]);
+            }
+            else {
+                invalidFiles.push(files[i]);
+            }
+        }
+        return new Observable(observer => {
+            if (validFiles.length > 0) {
+                observer.next(validFiles);
+            }
+            if (invalidFiles.length > 0) {
+                observer.error(`Extension not allowed. Allowed extensions: ${allowedExtensions}`);
+            }
+            observer.complete();
+        });
+    }
+    isSrcExternalUrl(src) {
+        if (src) {
+            return src.startsWith('http://') || src.startsWith('https://');
+        }
+        else {
+            return false;
+        }
+    }
+    isSrcWorkspace(src) {
+        if (src) {
+            return src.startsWith('/workspace');
+        }
+        else {
+            return false;
+        }
+    }
+}
+InputFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: InputFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+InputFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: InputFileService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: InputFileService, decorators: [{
+            type: Injectable
+        }] });
+
+class LabelsService {
+    constructor() {
+        this.labels = {
+            'select.all': 'Select all',
+            'deselect.all': 'Deselect all',
+            search: 'Search'
+        };
+    }
+    static withLabels(labels) {
+        const newService = new LabelsService();
+        for (const prop in labels) {
+            newService.labels[prop] = labels[prop];
+        }
+        return newService;
+    }
+    getLabel(label) {
+        return this.labels[label] || label;
+    }
+    mixin(labels) {
+        for (const property in labels) {
+            this.labels[property] = labels[property];
+        }
+    }
+}
+LabelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LabelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LabelsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LabelsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LabelsService, decorators: [{
+            type: Injectable
+        }] });
+
+class SpinnerService {
+    constructor(appRef) {
+        this.appRef = appRef;
+        this.timer = 250;
+        this.loading = new Set();
+        this.timers = new Map();
+        this._trigger = new Subject();
+        this.wrap = (func, label, props = {}, ...args) => {
+            this.load(label, props.delay);
+            const promise = props.binding ?
+                func.bind(props.binding)(...args) :
+                func(...args);
+            promise.catch((err) => {
+                this.done(label);
+                throw err;
+            }).then(_ => {
+                this.done(label);
+                return _;
+            });
+            if (props.cdRef) {
+                props.cdRef.markForCheck();
+            }
+            return promise;
+        };
+    }
+    get trigger() {
+        return this._trigger;
+    }
+    isLoading(something, pending = false) {
+        return this.loading.has(something) ||
+            (pending && this.timers.has(something));
+    }
+    perform(something, promise, timer) {
+        this.load(something, timer);
+        return promise.catch(err => {
+            this.done(something);
+            throw err;
+        }).then(_ => {
+            this.done(something);
+            return _;
+        });
+    }
+    load(something, timer) {
+        if (this.timers.has(something)) {
+            window.clearTimeout(this.timers.get(something));
+        }
+        const addToQueue = () => {
+            this.loading.add(something);
+            this.timers.delete(something);
+            this.appRef.tick();
+            this.trigger.next(true);
+        };
+        if (timer === 0) {
+            addToQueue();
+        }
+        else {
+            this.timers.set(something, window.setTimeout(addToQueue, timer || this.timer));
+        }
+    }
+    done(something) {
+        window.clearTimeout(this.timers.get(something));
+        this.timers.delete(something);
+        this.loading.delete(something);
+        this.trigger.next(true);
+        this.appRef.tick();
+    }
+}
+SpinnerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SpinnerService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SpinnerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SpinnerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SpinnerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }]; } });
+
+// access ngmodel
+const NOOP = () => {
+};
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatepickerComponent),
+    multi: true
+};
+class DatepickerComponent extends OdeComponent {
+    constructor(renderer, labelsService, injector) {
+        super(injector);
+        this.renderer = renderer;
+        this.labelsService = labelsService;
+        this.innerValue = '';
+        this.disabled = false;
+        this._readonly = false;
+        this.enableTime = false;
+        this.placeholder = '';
+        this.changeDate = new EventEmitter();
+        this.onChangeCallback = NOOP;
+        this.onTouchedCallback = NOOP;
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        let init = false;
+        if (this.innerValue === undefined) {
+            init = true;
+        }
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+            if (!init) {
+                this.changeDate.emit(v);
+            }
+        }
+    }
+    set readonly(val) {
+        this._readonly = val;
+        if (this.datePickerInst && this.datePickerInst.altInput) {
+            // Apply the readonly attribute addition/removal to the visible input (wrapped)
+            if (val)
+                this.datePickerInst.altInput.setAttribute('readonly', "");
+            else
+                this.datePickerInst.altInput.removeAttribute('readonly');
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // add attr data-input, mandatory for the picker to work in wrap mode
+        this.renderer.setAttribute(this.inputElement.nativeElement, 'data-input', '');
+        // disabled case
+        if (this.disabled === true) {
+            this.model.control.disable();
+        }
+        const navigatorLanguage = navigator.language.split('-')[0];
+        let datePickerLocale = {};
+        if (navigatorLanguage === 'fr') {
+            datePickerLocale = French.fr;
+        }
+        // options for the flatpickr instance
+        const options = {
+            altInput: !this.disabled,
+            altFormat: 'd/m/Y',
+            dateFormat: 'Y-m-d',
+            allowInput: false,
+            enableTime: this.enableTime,
+            minDate: this.minDate,
+            maxDate: this.maxDate,
+            clickOpens: false,
+            wrap: true,
+            locale: datePickerLocale
+        };
+        this.datePickerInst = new Flatpickr(this.datePickerElement.nativeElement, options);
+        if (!this.disabled) {
+            this.datePickerInst.altInput.addEventListener('click', e => {
+                if (!this.readonly) {
+                    this.datePickerInst.toggle();
+                }
+            });
+        }
+        // Force updating the date input readonly attribute :
+        this.readonly = this._readonly;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.datePickerInst.destroy();
+    }
+    writeValue(value) {
+        if (value !== this.innerValue && this.datePickerInst) {
+            this.innerValue = value;
+            this.datePickerInst.setDate(value);
+            this.onChangeCallback(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    labels(label) {
+        return this.labelsService.getLabel(label);
+    }
+}
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.Renderer2 }, { token: LabelsService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: DatepickerComponent, selector: "ode-date-picker", inputs: { disabled: "disabled", readonly: "readonly", enableTime: "enableTime", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate" }, outputs: { changeDate: "changeDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePickerElement", first: true, predicate: ["datePickerElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "model", first: true, predicate: NgModel, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flatpickr\" #datePickerElement>\n  <input type=\"date\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [ngClass]=\"{ 'cursor-default': disabled }\" placeholder=\"{{ placeholder }}\" #inputRef>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-toggle [title]=\"labels('datepicker.open')\"><i class=\"fa fa-calendar open\" aria-hidden=\"true\"></i></a>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-clear [title]=\"labels('datepicker.delete')\"><i class=\"fa fa-times delete\" aria-hidden=\"true\"></i></a>\n</div>\n", styles: [".hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-date-picker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"flatpickr\" #datePickerElement>\n  <input type=\"date\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [ngClass]=\"{ 'cursor-default': disabled }\" placeholder=\"{{ placeholder }}\" #inputRef>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-toggle [title]=\"labels('datepicker.open')\"><i class=\"fa fa-calendar open\" aria-hidden=\"true\"></i></a>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-clear [title]=\"labels('datepicker.delete')\"><i class=\"fa fa-times delete\" aria-hidden=\"true\"></i></a>\n</div>\n", styles: [".hidden{visibility:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LabelsService }, { type: i0.Injector }]; }, propDecorators: { datePickerElement: [{
+                type: ViewChild,
+                args: ['datePickerElement']
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputRef']
+            }], model: [{
+                type: ViewChild,
+                args: [NgModel]
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], enableTime: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], changeDate: [{
+                type: Output
+            }] } });
+
+/**
+ * A simple ellipsis component that switches text-overflow on click.
+ * Add an ellipsis={'hide'| 'expand'} attirubute on your element.
+ * Default behavior is 'hide', so that it's the same than the raw CSS
+ */
+class EllipsisComponent extends OdeComponent {
+    constructor(eltRef, injector) {
+        super(injector);
+        this.eltRef = eltRef;
+        this._ellipsis = 'hide';
+        this.isExpanded = false;
+        this.initialStyle = Object.assign({}, this.eltRef.nativeElement.style);
+    }
+    set ellipsis(value) {
+        if (!!value) {
+            this._ellipsis = value;
+            if (this._ellipsis == 'expand') {
+                this.eltRef.nativeElement.className = 'expand';
+            }
+        }
+    }
+    onClick() {
+        if (this._ellipsis == 'hide') {
+            return;
+        }
+        if (!this.isExpanded) {
+            this.isExpanded = true;
+            Object.assign(this.eltRef.nativeElement.style, {
+                textOverflow: 'clip',
+                overflow: 'auto',
+                whiteSpace: 'normal',
+            });
+        }
+        else {
+            this.isExpanded = false;
+            this.eltRef.nativeElement.style = this.initialStyle;
+        }
+    }
+}
+EllipsisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: EllipsisComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: EllipsisComponent, selector: "[ellipsis]", inputs: { ellipsis: "ellipsis" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;width:8em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host.expand{cursor:pointer}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: EllipsisComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ellipsis]', template: `<ng-content></ng-content>`, host: {
+                        '(click)': 'onClick()',
+                    }, styles: [":host{display:block;width:8em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host.expand{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { ellipsis: [{
+                type: Input
+            }] } });
+
+class FormErrorsComponent extends OdeComponent {
+    constructor(labelsService, injector) {
+        super(injector);
+        this.labelsService = labelsService;
+    }
+    getErrorsArray() {
+        const errorsArray = [];
+        for (const prop in this.ref.errors) {
+            errorsArray.push({ name: prop, value: this.ref.errors[prop] });
+        }
+        return errorsArray;
+    }
+    labels(label) {
+        return this.labelsService.getLabel(label);
+    }
+}
+FormErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormErrorsComponent, deps: [{ token: LabelsService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FormErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FormErrorsComponent, selector: "ode-form-errors", inputs: { ref: ["control", "ref"], expectedPatternMsg: "expectedPatternMsg" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"ref && ref.errors && (ref.dirty || ref.touched)\" class=\"form-errors\">\n  <div *ngFor=\"let error of getErrorsArray()\">\n    <span>{{ 'form.error.' + error.name | translate: error.value }}</span>\n    <span *ngIf=\"error.name == 'pattern'\">{{expectedPatternMsg}}</span>\n  </div>\n</div>\n", styles: [".form-errors{font-size:.8em;color:#dc143c;font-style:italic}\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$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-form-errors', template: "<div *ngIf=\"ref && ref.errors && (ref.dirty || ref.touched)\" class=\"form-errors\">\n  <div *ngFor=\"let error of getErrorsArray()\">\n    <span>{{ 'form.error.' + error.name | translate: error.value }}</span>\n    <span *ngIf=\"error.name == 'pattern'\">{{expectedPatternMsg}}</span>\n  </div>\n</div>\n", styles: [".form-errors{font-size:.8em;color:#dc143c;font-style:italic}\n"] }]
+        }], ctorParameters: function () { return [{ type: LabelsService }, { type: i0.Injector }]; }, propDecorators: { ref: [{
+                type: Input,
+                args: ['control']
+            }], expectedPatternMsg: [{
+                type: Input,
+                args: ['expectedPatternMsg']
+            }] } });
+
+const icons = {
+    info: 'fa-question-circle',
+    warning: 'fa-exclamation-circle',
+    danger: 'fa-ban',
+    success: 'fa-check-circle'
+};
+class MessageBoxComponent extends OdeComponent {
+    constructor(eltRef, injector) {
+        super(injector);
+        this.eltRef = eltRef;
+        this._position = 'inherit';
+        /**
+         * `gravity` set the relative position of the message box if its position is 'absolute'.
+         * No effect when position is 'inherit'.
+         */
+        this.gravity = 'left';
+        this.hidden = false;
+    }
+    set messages(value) {
+        this._messages = [];
+        for (const message of value) {
+            if (typeof message == 'string') {
+                this._messages.push([message, {}]);
+            }
+            else if (typeof message == 'object') {
+                this._messages.push(message);
+            }
+        }
+    }
+    get messages() {
+        return this._messages;
+    }
+    set position(value) {
+        this._position = value;
+    }
+    get isGravityLeft() { return this.gravity === 'left'; }
+    get isGravityRight() { return this.gravity === 'right'; }
+    canHide() {
+        if (this._position == 'absolute') {
+            return true;
+        }
+        return false;
+    }
+    hide() {
+        this.hidden = true;
+        this.hideEvent.emit();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.type == undefined) {
+            throw new Error('MessageSticker : type\' property must be set');
+        }
+        this.eltRef.nativeElement.style.position = this._position;
+        if (this._position == 'absolute') {
+            this.eltRef.nativeElement.style.width = '450px';
+            // TODO: Maybe use a static counter to push on top the last open MessageBox ?
+            this.eltRef.nativeElement.style.zIndex = '10';
+        }
+    }
+}
+MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MessageBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: MessageBoxComponent, selector: "message-box", inputs: { type: "type", header: "header", messages: "messages", position: "position", gravity: "gravity" }, outputs: { hideEvent: "onHide" }, host: { properties: { "class.gravity-left": "this.isGravityLeft", "class.gravity-right": "this.isGravityRight" } }, usesInheritance: true, ngImport: i0, template: "<article class=\"message is-{{type}}\" [hidden]=\"hidden\">\n  <div *ngIf=\"header\" class=\"message-header\">\n    <p>\n      <i *ngIf=\"canHide()\" (click)=\"hide()\" class=\"fa fa-times-circle\"></i>\n      {{header | translate}}\n    </p>\n  </div>\n  <div class=\"message-body\">\n    <i *ngIf=\"canHide() && !header\" (click)=\"hide()\" class=\"fa fa-times-circle\"></i>\n    <p *ngFor=\"let message of messages\">\n      <s5l [s5l-params]=\"message[1]\">{{message[0]}}</s5l>\n    </p>\n  </div>\n</article>\n", styles: [":host{font-size:initial;position:inherit;top:-5px}:host.gravity-left{right:-5px}:host.gravity-right{left:-5px}:host .message{border:1px solid}i.fa-times-circle{display:inline-flex;float:right;cursor:pointer;font-weight:700}\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: "component", type: i2$1.S5lComponent, selector: "s5l", inputs: ["s5l-params", "s5l-lang"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MessageBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'message-box', template: "<article class=\"message is-{{type}}\" [hidden]=\"hidden\">\n  <div *ngIf=\"header\" class=\"message-header\">\n    <p>\n      <i *ngIf=\"canHide()\" (click)=\"hide()\" class=\"fa fa-times-circle\"></i>\n      {{header | translate}}\n    </p>\n  </div>\n  <div class=\"message-body\">\n    <i *ngIf=\"canHide() && !header\" (click)=\"hide()\" class=\"fa fa-times-circle\"></i>\n    <p *ngFor=\"let message of messages\">\n      <s5l [s5l-params]=\"message[1]\">{{message[0]}}</s5l>\n    </p>\n  </div>\n</article>\n", styles: [":host{font-size:initial;position:inherit;top:-5px}:host.gravity-left{right:-5px}:host.gravity-right{left:-5px}:host .message{border:1px solid}i.fa-times-circle{display:inline-flex;float:right;cursor:pointer;font-weight:700}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { type: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], gravity: [{
+                type: Input
+            }], isGravityLeft: [{
+                type: HostBinding,
+                args: ['class.gravity-left']
+            }], isGravityRight: [{
+                type: HostBinding,
+                args: ['class.gravity-right']
+            }], hideEvent: [{
+                type: Output,
+                args: ['onHide']
+            }] } });
+
+/**
+* Dynamically load the component describe with the @input dynamic-component
+*/
+class DynamicComponentDirective {
+    constructor(viewContainerRef, componentFactoryResolver) {
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    load(data) {
+        if (this.isLoaded()) {
+            return;
+        }
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.componentDesc.type);
+        this.viewContainerRef.clear();
+        this.componentRef = this.viewContainerRef.createComponent(componentFactory);
+        if (data != undefined) {
+            this.componentDesc.assignData(data);
+        }
+        for (const attribute in this.componentDesc.data) {
+            this.componentRef.instance[attribute] = this.componentDesc.data[attribute];
+            if (attribute == 'hideEvent') {
+                this.componentRef.instance.hideEvent.subscribe(e => {
+                    this.destroy();
+                });
+            }
+        }
+    }
+    isLoaded() {
+        if (this.componentRef == undefined) {
+            return false;
+        }
+        else {
+            return this.componentRef.instance != null;
+        }
+    }
+    destroy() {
+        if (this.componentRef.instance.hideEvent != undefined) {
+            this.componentRef.instance.hideEvent.unsubscribe();
+        }
+        // FIXME: this.componentRef.destroy(); => This one usually should work, better to use but do nothing...
+        delete this.componentRef;
+        this.viewContainerRef.clear();
+    }
+}
+DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: DynamicComponentDirective, selector: "[dynamic-component]", inputs: { componentDesc: ["dynamic-component", "componentDesc"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicComponentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dynamic-component]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { componentDesc: [{
+                type: Input,
+                args: ['dynamic-component']
+            }] } });
+
+/**
+* Usefull to desccribe (type and input data) a component
+* that will be dynamically instanciate
+*/
+class ComponentDescriptor {
+    constructor(type, data) {
+        this.type = type;
+        this.data = data;
+    }
+    assignData(data) {
+        Object.assign(this.data, data);
+        return this;
+    }
+}
+
+class MessageStickerComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.gravity = 'left';
+        this.icons = icons;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.type === undefined) {
+            throw new Error('MessageSticker : type\' property must be set');
+        }
+    }
+    newMessageBox() {
+        return new ComponentDescriptor(MessageBoxComponent, {
+            type: this.type,
+            header: this.header,
+            messages: this.messages,
+            position: 'absolute',
+            gravity: this.gravity,
+            hideEvent: new EventEmitter()
+        });
+    }
+    loadMessageBox() {
+        this.dComponent.load();
+    }
+}
+MessageStickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MessageStickerComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MessageStickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: MessageStickerComponent, selector: "ode-message-sticker", inputs: { type: "type", header: "header", messages: "messages", gravity: "gravity" }, viewQueries: [{ propertyName: "dComponent", first: true, predicate: DynamicComponentDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<i (click)=\"loadMessageBox()\" class=\"fa {{icons[type]}} is-{{type}}\"></i>\n<span message-box-anchor>\n            <ng-container [dynamic-component]=\"newMessageBox()\"></ng-container>\n        </span>\n", styles: [":host{display:inline;padding-left:.2em}span[message-box-anchor]{position:absolute;z-index:8}i{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: DynamicComponentDirective, selector: "[dynamic-component]", inputs: ["dynamic-component"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MessageStickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-message-sticker', template: "<i (click)=\"loadMessageBox()\" class=\"fa {{icons[type]}} is-{{type}}\"></i>\n<span message-box-anchor>\n            <ng-container [dynamic-component]=\"newMessageBox()\"></ng-container>\n        </span>\n", styles: [":host{display:inline;padding-left:.2em}span[message-box-anchor]{position:absolute;z-index:8}i{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { type: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], gravity: [{
+                type: Input
+            }], dComponent: [{
+                type: ViewChild,
+                args: [DynamicComponentDirective]
+            }] } });
+
+class FormFieldComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+    }
+}
+FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FormFieldComponent, selector: "ode-form-field", inputs: { label: "label", help: "help", required: "required" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n  <label>\n    {{ label | translate }}\n    <span *ngIf=\"required\" class=\"asterisque\">*</span>\n    <ode-message-sticker *ngIf=\"help\"\n                     [type]=\"'info'\"\n                     [messages]=\"[help]\">\n    </ode-message-sticker>\n  </label>\n  <ng-content></ng-content>\n</div>\n", styles: ["div.form-field{display:flex;align-items:center}div.form-field > > > > *{flex:1;margin-left:5px}div.form-field>*:first-child{flex:0 0 200px;margin-left:0}div.form-field message-sticker{font-size:1.3em}div.form-field .asterisque{color:#dc143c}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MessageStickerComponent, selector: "ode-message-sticker", inputs: ["type", "header", "messages", "gravity"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-form-field', template: "<div class=\"form-field\">\n  <label>\n    {{ label | translate }}\n    <span *ngIf=\"required\" class=\"asterisque\">*</span>\n    <ode-message-sticker *ngIf=\"help\"\n                     [type]=\"'info'\"\n                     [messages]=\"[help]\">\n    </ode-message-sticker>\n  </label>\n  <ng-content></ng-content>\n</div>\n", styles: ["div.form-field{display:flex;align-items:center}div.form-field > > > > *{flex:1;margin-left:5px}div.form-field>*:first-child{flex:0 0 200px;margin-left:0}div.form-field message-sticker{font-size:1.3em}div.form-field .asterisque{color:#dc143c}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { label: [{
+                type: Input
+            }], help: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
+
+class FilterPipe {
+    stringFullCompare(str1, str2) {
+        return str1.match(new RegExp(str2, 'i')) !== null;
+    }
+    _filterString(value, filter, arrayRef) {
+        if (typeof value === 'string' &&
+            typeof filter === 'string' &&
+            filter.trim() &&
+            this.stringFullCompare(value, filter)) {
+            arrayRef.push(value);
+            return true;
+        }
+        return false;
+    }
+    _filterObject(object, filter, objectRef, arrayRef) {
+        if (typeof object == 'object' && typeof filter === 'object') {
+            let check = true;
+            for (const property in filter) {
+                if (!check) {
+                    break;
+                }
+                const filterValue = filter[property];
+                const propsToCheck = property.split(",");
+                const objectValues = new Array(propsToCheck.length);
+                for (let i = propsToCheck.length; i-- > 0;)
+                    objectValues[i] = object[propsToCheck[i].trim()];
+                if (filterValue instanceof Function) {
+                    check = filterValue.apply(null, objectValues);
+                }
+                else if (filterValue instanceof Object) {
+                    if (propsToCheck.length > 1)
+                        throw "Multi-argument object filtering is not yet supported";
+                    return this._filterObject(objectValues[0], filterValue, objectRef, arrayRef);
+                }
+                else {
+                    for (let i = objectValues.length; i-- > 0;) {
+                        if (!check)
+                            break;
+                        const objectValue = objectValues[i];
+                        if (typeof objectValue === 'undefined' && typeof filterValue === 'string' && filterValue.length > 0) {
+                            check = false;
+                        }
+                        else if (objectValue instanceof Array && typeof filterValue === 'string') {
+                            check = this.stringFullCompare(objectValue.join(), filterValue);
+                        }
+                        else if (typeof filterValue === 'string' && typeof objectValue === 'string') {
+                            check = this.stringFullCompare(objectValue, filterValue);
+                        }
+                        else if (filterValue instanceof Array && typeof objectValue === 'string') {
+                            for (let i = 0; i < filterValue.length; i++) {
+                                check = this.stringFullCompare(objectValue, filterValue[i]);
+                                if (check) {
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            if (check) {
+                arrayRef.push(objectRef);
+            }
+            return true;
+        }
+        return false;
+    }
+    _filterFunction(value, filter, arrayRef) {
+        if (typeof filter === 'function') {
+            if (filter(value)) {
+                arrayRef.push(value);
+            }
+            return true;
+        }
+        return false;
+    }
+    transform(array, by) {
+        if (!array || !by) {
+            return array;
+        }
+        const filteredArray = [];
+        array.forEach(item => {
+            this._filterString(item, by, filteredArray) ||
+                this._filterObject(item, by, item, filteredArray) ||
+                this._filterFunction(item, by, filteredArray);
+        });
+        return filteredArray;
+    }
+}
+FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: FilterPipe, name: "filter", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FilterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'filter', pure: false }]
+        }] });
+
+class FlattenObjectArrayPipe {
+    transform(array, onlyProps) {
+        if (!array) {
+            return [];
+        }
+        if (onlyProps.length < 1) {
+            return array;
+        }
+        let flattenedArray = Array.from(array);
+        const flatten = (array) => {
+            array.forEach(item => {
+                for (const prop in item) {
+                    const val = item[prop];
+                    if (val instanceof Array &&
+                        !onlyProps ||
+                        onlyProps.indexOf(prop) > -1) {
+                        flattenedArray = [...flattenedArray, ...val];
+                        flatten(val);
+                    }
+                }
+            });
+        };
+        flatten(array);
+        return Array.from(new Set(flattenedArray));
+    }
+}
+FlattenObjectArrayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FlattenObjectArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FlattenObjectArrayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: FlattenObjectArrayPipe, name: "flattenObjArray" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FlattenObjectArrayPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'flattenObjArray' }]
+        }] });
+
+class OrderPipe {
+    transform(array, sortPredicate, reverseOrder, compareFn) {
+        if (array == null || !sortPredicate) {
+            return array;
+        }
+        /*** ***/
+        const isString = (value) => {
+            return typeof value === 'string';
+        };
+        const isFunction = (value) => {
+            return typeof value === 'function';
+        };
+        const isArray = (value) => {
+            return value && value instanceof Array;
+        };
+        const isObject = (value) => {
+            return typeof value === 'object';
+        };
+        const isPrimitive = (value) => {
+            switch (typeof value) {
+                case 'number': /* falls through */
+                case 'boolean': /* falls through */
+                case 'string':
+                    return true;
+                default:
+                    return false;
+            }
+        };
+        const hasCustomToString = (value) => {
+            return value &&
+                typeof value.toString === 'function' &&
+                value.toString !== Object.prototype.toString;
+        };
+        const getComparisonObject = (value, index) => {
+            // NOTE: We are adding an extra `tieBreaker` value based on the element's index.
+            // This will be used to keep the sort stable when none of the input predicates can
+            // distinguish between two elements.
+            return {
+                value,
+                tieBreaker: { value: index, type: 'number', index },
+                predicateValues: predicates.map(function (predicate) {
+                    return getPredicateValue(predicate.get(value), index);
+                })
+            };
+        };
+        const doComparison = (v1, v2) => {
+            for (let i = 0, ii = predicates.length; i < ii; i++) {
+                const result = compare(v1.predicateValues[i], v2.predicateValues[i]);
+                if (result) {
+                    return result * predicates[i].descending * descending;
+                }
+            }
+            return compare(v1.tieBreaker, v2.tieBreaker) * descending;
+        };
+        const processPredicates = (sortPredicates) => {
+            return sortPredicates.map(function (predicate) {
+                let descending = 1, get = (value) => value;
+                if (isFunction(predicate)) {
+                    get = predicate;
+                }
+                else if (isString(predicate)) {
+                    if ((predicate.charAt(0) === '+' || predicate.charAt(0) === '-')) {
+                        descending = predicate.charAt(0) === '-' ? -1 : 1;
+                        predicate = predicate.substring(1);
+                    }
+                    if (predicate !== '') {
+                        get = (value) => value[predicate];
+                    }
+                }
+                return { get, descending };
+            });
+        };
+        const objectValue = (value) => {
+            // If `valueOf` is a valid function use that
+            if (isFunction(value.valueOf)) {
+                value = value.valueOf();
+                if (isPrimitive(value)) {
+                    return value;
+                }
+            }
+            // If `toString` is a valid function and not the one from `Object.prototype` use that
+            if (hasCustomToString(value)) {
+                value = value.toString();
+                if (isPrimitive(value)) {
+                    return value;
+                }
+            }
+            return value;
+        };
+        const getPredicateValue = (value, index) => {
+            let type = typeof value;
+            if (value === null) {
+                type = 'string';
+                value = 'null';
+            }
+            else if (type === 'object') {
+                value = objectValue(value);
+            }
+            return { value, type, index };
+        };
+        const defaultCompare = (v1, v2) => {
+            let result = 0;
+            const type1 = v1.type;
+            const type2 = v2.type;
+            if (type1 === type2) {
+                let value1 = v1.value;
+                let value2 = v2.value;
+                if (type1 === 'string') {
+                    // Compare strings case-insensitively
+                    value1 = value1.toLowerCase();
+                    value2 = value2.toLowerCase();
+                    result = value1.localeCompare(value2);
+                }
+                else if (type1 === 'object') {
+                    // For basic objects, use the position of the object
+                    // in the collection instead of the value
+                    if (isObject(value1)) {
+                        value1 = v1.index;
+                    }
+                    if (isObject(value2)) {
+                        value2 = v2.index;
+                    }
+                    if (value1 !== value2) {
+                        result = value1 < value2 ? -1 : 1;
+                    }
+                }
+            }
+            else {
+                result = type1 < type2 ? -1 : 1;
+            }
+            return result;
+        };
+        /*** ***/
+        if (!isArray(sortPredicate)) {
+            sortPredicate = [sortPredicate];
+        }
+        if (sortPredicate.length === 0) {
+            sortPredicate = ['+'];
+        }
+        const predicates = processPredicates(sortPredicate);
+        const descending = reverseOrder ? -1 : 1;
+        // Define the `compare()` function. Use a default comparator if none is specified.
+        const compare = isFunction(compareFn) ? compareFn : defaultCompare;
+        // The next three lines are a version of a Swartzian Transform idiom from Perl
+        // (sometimes called the Decorate-Sort-Undecorate idiom)
+        // See https://en.wikipedia.org/wiki/Schwartzian_transform
+        const compareValues = Array.prototype.map.call(array, getComparisonObject);
+        compareValues.sort(doComparison);
+        array = compareValues.map(function (item) { return item.value; });
+        return array;
+    }
+}
+OrderPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: OrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+OrderPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: OrderPipe, name: "orderBy" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: OrderPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'orderBy' }]
+        }] });
+
+class ItemTreeComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        /**** Inputs ****/
+        // Items
+        this.items = [];
+        // Property containing the list of child objects.
+        this.childrenProperty = 'children';
+        // Property to display in the list
+        this.displayProperty = 'label';
+        // Filter pipe argument
+        this.filter = '';
+        // OrderBy pipe argument
+        this.order = [];
+        // Reverse the order pipe
+        this.reverse = false;
+        this._flattenProps = [];
+        // Disable the opener icon
+        this.disableOpener = false;
+        // Use checkboxes instead of selecting items
+        this.checkboxMode = false;
+        /**** Outputs ****/
+        this.onSelect = new EventEmitter();
+        this.onCheck = new EventEmitter();
+        this._depth = 0;
+        this.unfolded = [];
+    }
+    // Flatten the tree on the specified properties
+    set flatten(flattenProps) {
+        if (!this.isFlattened() && flattenProps.length > 0) {
+            this._selectedItem = this._lastSelectedItem;
+        }
+        else if (this.isFlattened && flattenProps.length < 1) {
+            this.flagIfParent();
+        }
+        this._flattenProps = flattenProps;
+    }
+    get flatten() {
+        return this._flattenProps;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.flagIfParent();
+    }
+    selectItem(item) {
+        this._selectedItem = item;
+        if (this.childItemTree) {
+            delete this.childItemTree._selectedItem;
+        }
+        const idx = this.unfolded.indexOf(item);
+        if (!this.disableOpener && idx < 0) {
+            this.unfolded.push(item);
+        }
+        else {
+            this.unfolded.splice(idx, 1);
+        }
+        this.bubbleSelect(item);
+    }
+    checkItem(item) {
+        this.onCheck.emit(item);
+    }
+    bubbleSelect(item) {
+        this._lastSelectedItem = item;
+        this.onSelect.emit(item);
+    }
+    isSelected(item) {
+        return (this.disableOpener ? this._selectedItem : this._lastSelectedItem) === item;
+    }
+    toggleFold(event, item) {
+        event.stopPropagation();
+        const idx = this.unfolded.indexOf(item);
+        if (idx < 0) {
+            this.unfolded.push(item);
+        }
+        else {
+            this.unfolded.splice(idx, 1);
+        }
+    }
+    isFolded(item) {
+        return this.disableOpener ? !this.isSelected(item) : this.unfolded.indexOf(item) < 0;
+    }
+    display(item) {
+        return this.displayProperty && item[this.displayProperty];
+    }
+    getChildren(item) {
+        return item[this.childrenProperty] || [];
+    }
+    hasChildren(item) {
+        return this.getChildren(item).length > 0;
+    }
+    isFlattened() {
+        return this._flattenProps.length;
+    }
+    flagIfParent() {
+        if (!this._lastSelectedItem) {
+            return;
+        }
+        const findSubItem = (item, target) => {
+            if (item === target) {
+                return true;
+            }
+            if (this.hasChildren(item)) {
+                return this.getChildren(item).find(subItem => {
+                    return findSubItem(subItem, target);
+                });
+            }
+            return false;
+        };
+        for (const i in this.items) {
+            const item = this.items[i];
+            if (item === this._lastSelectedItem ||
+                findSubItem(item, this._lastSelectedItem)) {
+                this._selectedItem = item;
+                this.unfolded = [item];
+                break;
+            }
+        }
+        this.changeDetector.markForCheck();
+    }
+}
+ItemTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ItemTreeComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ItemTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: ItemTreeComponent, selector: "ode-item-tree", inputs: { items: "items", childrenProperty: ["children", "childrenProperty"], displayProperty: ["display", "displayProperty"], displayTemplate: "displayTemplate", filter: "filter", order: "order", reverse: "reverse", flatten: "flatten", disableOpener: "disableOpener", checkboxMode: "checkboxMode", _lastSelectedItem: ["lastSelected", "_lastSelectedItem"], _depth: ["depth", "_depth"] }, outputs: { onSelect: "onSelect", onCheck: "onCheck" }, viewQueries: [{ propertyName: "childItemTree", first: true, predicate: ItemTreeComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"{ flattened: isFlattened() }\">\n  <li *ngFor=\"let item of (items | flattenObjArray: flatten | filter: filter | orderBy: order:reverse)\"\n      [ngClass]=\"{ selected: isSelected(item), unfolded: !isFolded(item), parent: hasChildren(item), root: _depth === 0 }\">\n    <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" *ngIf=\"!checkboxMode\">\n      <i class=\"opener\" (click)=\"toggleFold($event, item)\"\n         *ngIf=\"!isFlattened() && hasChildren(item) && !disableOpener\"></i>\n      <span *ngIf=\"displayProperty\">{{ display(item) }}</span>\n      <span *ngIf=\"displayTemplate\">\n        <ng-template [ngTemplateOutlet]=\"displayTemplate\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>\n      </span>\n    </a>\n    <div class=\"checkbox__item\" *ngIf=\"checkboxMode\">\n      <input id=\"all\" type=\"checkbox\" [(ngModel)]=\"item.check\" ngDefaultControl>\n      <label *ngIf=\"displayProperty\" for=\"all\" (click)=\"checkItem(item)\">{{display(item)}}</label>\n      <span *ngIf=\"displayTemplate\">\n        <ng-template [ngTemplateOutlet]=\"displayTemplate\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>\n      </span>\n    </div>\n    <ode-item-tree\n      [items]=\"getChildren(item)\"\n      [children]=\"childrenProperty\"\n      [display]=\"displayProperty\"\n      [displayTemplate]=\"displayTemplate\"\n      [filter]=\"filter\"\n      [order]=\"order\"\n      [reverse]=\"reverse\"\n      [lastSelected]=\"_lastSelectedItem\"\n      [depth]=\"_depth + 1\"\n      [disableOpener]=\"disableOpener\"\n      [checkboxMode]=\"checkboxMode\"\n      (onSelect)=\"bubbleSelect($event)\"\n      (onCheck)=\"checkItem($event)\"\n      *ngIf=\"(checkboxMode && hasChildren(item)) || (!isFlattened() && hasChildren(item) && !isFolded(item))\">\n    </ode-item-tree>\n  </li>\n</ul>\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ItemTreeComponent, selector: "ode-item-tree", inputs: ["items", "children", "display", "displayTemplate", "filter", "order", "reverse", "flatten", "disableOpener", "checkboxMode", "lastSelected", "depth"], outputs: ["onSelect", "onCheck"] }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: FlattenObjectArrayPipe, name: "flattenObjArray" }, { kind: "pipe", type: OrderPipe, name: "orderBy" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ItemTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-item-tree', template: "<ul [ngClass]=\"{ flattened: isFlattened() }\">\n  <li *ngFor=\"let item of (items | flattenObjArray: flatten | filter: filter | orderBy: order:reverse)\"\n      [ngClass]=\"{ selected: isSelected(item), unfolded: !isFolded(item), parent: hasChildren(item), root: _depth === 0 }\">\n    <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" *ngIf=\"!checkboxMode\">\n      <i class=\"opener\" (click)=\"toggleFold($event, item)\"\n         *ngIf=\"!isFlattened() && hasChildren(item) && !disableOpener\"></i>\n      <span *ngIf=\"displayProperty\">{{ display(item) }}</span>\n      <span *ngIf=\"displayTemplate\">\n        <ng-template [ngTemplateOutlet]=\"displayTemplate\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>\n      </span>\n    </a>\n    <div class=\"checkbox__item\" *ngIf=\"checkboxMode\">\n      <input id=\"all\" type=\"checkbox\" [(ngModel)]=\"item.check\" ngDefaultControl>\n      <label *ngIf=\"displayProperty\" for=\"all\" (click)=\"checkItem(item)\">{{display(item)}}</label>\n      <span *ngIf=\"displayTemplate\">\n        <ng-template [ngTemplateOutlet]=\"displayTemplate\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>\n      </span>\n    </div>\n    <ode-item-tree\n      [items]=\"getChildren(item)\"\n      [children]=\"childrenProperty\"\n      [display]=\"displayProperty\"\n      [displayTemplate]=\"displayTemplate\"\n      [filter]=\"filter\"\n      [order]=\"order\"\n      [reverse]=\"reverse\"\n      [lastSelected]=\"_lastSelectedItem\"\n      [depth]=\"_depth + 1\"\n      [disableOpener]=\"disableOpener\"\n      [checkboxMode]=\"checkboxMode\"\n      (onSelect)=\"bubbleSelect($event)\"\n      (onCheck)=\"checkItem($event)\"\n      *ngIf=\"(checkboxMode && hasChildren(item)) || (!isFlattened() && hasChildren(item) && !isFolded(item))\">\n    </ode-item-tree>\n  </li>\n</ul>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { items: [{
+                type: Input
+            }], childrenProperty: [{
+                type: Input,
+                args: ['children']
+            }], displayProperty: [{
+                type: Input,
+                args: ['display']
+            }], displayTemplate: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], reverse: [{
+                type: Input
+            }], flatten: [{
+                type: Input
+            }], disableOpener: [{
+                type: Input
+            }], checkboxMode: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], onCheck: [{
+                type: Output
+            }], childItemTree: [{
+                type: ViewChild,
+                args: [ItemTreeComponent]
+            }], _lastSelectedItem: [{
+                type: Input,
+                args: ['lastSelected']
+            }], _depth: [{
+                type: Input,
+                args: ['depth']
+            }] } });
+
+class LightBoxComponent extends OdeComponent {
+    constructor(injector, renderer, host) {
+        super(injector);
+        this.renderer = renderer;
+        this.host = host;
+        this._show = false;
+        this.showCloseButton = true;
+        this.onClose = new EventEmitter();
+    }
+    set show(s) {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+        if (s) {
+            this._show = true;
+            this.timer = window.setTimeout(() => {
+                this.renderer.addClass(this.host.nativeElement, 'shown');
+                this.timer = null;
+                this.changeDetector.markForCheck();
+            }, 100);
+        }
+        else {
+            const wait = parseFloat(this.section &&
+                window.getComputedStyle(this.section.nativeElement)['transition-duration']);
+            this.renderer.removeClass(this.host.nativeElement, 'shown');
+            this.timer = window.setTimeout(() => {
+                this._show = false;
+                this.timer = null;
+                this.changeDetector.markForCheck();
+            }, wait * 1000);
+        }
+    }
+    get show() {
+        return this._show;
+    }
+    onClick(event) {
+        if (this.overlay.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    close() {
+        this.show = false;
+        this.onClose.emit();
+    }
+}
+LightBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LightBoxComponent, deps: [{ token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+LightBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: LightBoxComponent, selector: "ode-lightbox", inputs: { show: "show", showCloseButton: "showCloseButton" }, outputs: { onClose: "onClose" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "section", first: true, predicate: ["section"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section *ngIf=\"_show\" #section>\n  <div overlay #overlay></div>\n  <div content>\n    <i (click)=\"close()\" *ngIf=\"showCloseButton == true\"></i>\n    <ng-content></ng-content>\n  </div>\n</section>\n", styles: ["section{position:fixed;display:flex;align-items:center;justify-content:center;height:100%;width:100%;z-index:100;top:0;left:0;opacity:0;transition:opacity .35s}section[hidden]{display:none!important}:host.shown>section{opacity:1}div[overlay]{position:absolute;top:0;left:0;opacity:.7;width:100%;height:100%;background-color:#000}div[content]{flex:0 0 auto;max-width:75%;max-height:75%;overflow:auto;background-color:#fff;z-index:2;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LightBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-lightbox', host: {
+                        '(click)': 'onClick($event)'
+                    }, template: "<section *ngIf=\"_show\" #section>\n  <div overlay #overlay></div>\n  <div content>\n    <i (click)=\"close()\" *ngIf=\"showCloseButton == true\"></i>\n    <ng-content></ng-content>\n  </div>\n</section>\n", styles: ["section{position:fixed;display:flex;align-items:center;justify-content:center;height:100%;width:100%;z-index:100;top:0;left:0;opacity:0;transition:opacity .35s}section[hidden]{display:none!important}:host.shown>section{opacity:1}div[overlay]{position:absolute;top:0;left:0;opacity:.7;width:100%;height:100%;background-color:#000}div[content]{flex:0 0 auto;max-width:75%;max-height:75%;overflow:auto;background-color:#fff;z-index:2;position:relative}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { show: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], section: [{
+                type: ViewChild,
+                args: ['section']
+            }], overlay: [{
+                type: ViewChild,
+                args: ['overlay']
+            }] } });
+
+class LightboxConfirmComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.cancelText = "cancel";
+        this.confirmText = "confirm";
+        this.extraButtons = [];
+        this.disableConfirm = false;
+        this.onConfirm = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.onExtra = new EventEmitter();
+    }
+}
+LightboxConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LightboxConfirmComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+LightboxConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: LightboxConfirmComponent, selector: "ode-lightbox-confirm", inputs: { lightboxTitle: "lightboxTitle", show: "show", cancelText: "cancelText", confirmText: "confirmText", extraButtons: "extraButtons", disableConfirm: "disableConfirm" }, outputs: { onConfirm: "onConfirm", onCancel: "onCancel", onExtra: "onExtra" }, usesInheritance: true, ngImport: i0, template: "<ode-lightbox [show]=\"show\" (onClose)=\"onCancel.emit()\">\n  <h2 class=\"lightbox-confirm__header\">{{ lightboxTitle | translate }}</h2>\n  <div class=\"lightbox-confirm-content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"lightbox-confirm-action\">\n    <button (click)=\"onConfirm.emit()\" [disabled]=\"disableConfirm\" class=\"confirm\">{{ confirmText | translate }}</button>\n    <button\n      *ngFor=\"let extraBtn of extraButtons.slice().reverse(); index as i;\"\n      (click)=\"onExtra.emit(extraButtons.length - 1 - i)\" class=\"confirm\">{{ extraBtn | translate }}</button>\n    <button (click)=\"onCancel.emit()\" class=\"cancel\">{{ cancelText | translate }}</button>\n  </div>\n</ode-lightbox>\n", styles: [".lightbox-confirm__header{margin-bottom:0}.lightbox-confirm-content{font-size:16px;padding:20px 0}.lightbox-confirm-action button{float:right;text-align:center;margin-left:5px;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LightBoxComponent, selector: "ode-lightbox", inputs: ["show", "showCloseButton"], outputs: ["onClose"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LightboxConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-lightbox-confirm', template: "<ode-lightbox [show]=\"show\" (onClose)=\"onCancel.emit()\">\n  <h2 class=\"lightbox-confirm__header\">{{ lightboxTitle | translate }}</h2>\n  <div class=\"lightbox-confirm-content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"lightbox-confirm-action\">\n    <button (click)=\"onConfirm.emit()\" [disabled]=\"disableConfirm\" class=\"confirm\">{{ confirmText | translate }}</button>\n    <button\n      *ngFor=\"let extraBtn of extraButtons.slice().reverse(); index as i;\"\n      (click)=\"onExtra.emit(extraButtons.length - 1 - i)\" class=\"confirm\">{{ extraBtn | translate }}</button>\n    <button (click)=\"onCancel.emit()\" class=\"cancel\">{{ cancelText | translate }}</button>\n  </div>\n</ode-lightbox>\n", styles: [".lightbox-confirm__header{margin-bottom:0}.lightbox-confirm-content{font-size:16px;padding:20px 0}.lightbox-confirm-action button{float:right;text-align:center;margin-left:5px;margin-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { lightboxTitle: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], confirmText: [{
+                type: Input
+            }], extraButtons: [{
+                type: Input
+            }], disableConfirm: [{
+                type: Input
+            }], onConfirm: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }], onExtra: [{
+                type: Output
+            }] } });
+
+class SearchInputComponent extends OdeComponent {
+    constructor(injector, _elRef, _renderer) {
+        super(injector);
+        this._elRef = _elRef;
+        this._renderer = _renderer;
+        /* Inputs / Outputs / View */
+        this.isSearchActive = false;
+        this.isSearchButtonDisabled = false;
+        this.searchInput = false;
+        this._delay = 200;
+        this.onChange = new EventEmitter();
+        /* Internal logic */
+        this.$searchTerms = new Subject();
+    }
+    set delay(d) {
+        this._delay = d;
+        this.observable = this.$searchTerms.pipe(debounceTime(this.delay), distinctUntilChanged());
+        if (this.observer) {
+            this.observer.unsubscribe();
+        }
+        this.observer = this.observable.subscribe(val => {
+            this.onChange.emit(val);
+        });
+    }
+    get delay() {
+        return this._delay;
+    }
+    evalAttributes() {
+        const element = this._elRef.nativeElement;
+        if (element && this.searchBox) {
+            for (let i = 0; i < element.attributes.length; i++) {
+                const attr = element.attributes[i];
+                this._renderer.setAttribute(this.searchBox.nativeElement, attr.name, attr.value);
+            }
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.observable) {
+            this.observable = this.$searchTerms
+                .pipe(debounceTime(this.delay), distinctUntilChanged());
+            this.observer = this.observable.subscribe(val => {
+                this.onChange.emit(val);
+            });
+        }
+        setTimeout(() => this.evalAttributes(), 20);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.observer.unsubscribe();
+    }
+    search(str) {
+        this.$searchTerms.next(str);
+    }
+    handleSubmit() {
+        this.searchSubmit();
+    }
+}
+SearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SearchInputComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: SearchInputComponent, selector: "ode-search-input", inputs: { isSearchActive: "isSearchActive", isSearchButtonDisabled: "isSearchButtonDisabled", searchInput: "searchInput", searchSubmit: "searchSubmit", delay: "delay" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form\n    class=\"search-container\"\n    (ngSubmit)=\"searchInput && handleSubmit()\">\n    <input\n        #searchBox\n        class=\"search-input\"\n        name=\"searchTerm\"\n        type=\"search\"\n        (input)=\"search(searchBox.value)\" />\n    <button class=\"search-button\" *ngIf=\"searchInput\" [attr.disabled]=\"isSearchButtonDisabled ? true : null\">\n        <i class=\"fa fa-search is-size-4 search-icon\"></i>\n    </button>\n</form>\n\n<!-- <input *ngIf=\"!searchInput\" type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/> -->", styles: [":host .search-container{margin:0;display:flex}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-search-input', template: "<form\n    class=\"search-container\"\n    (ngSubmit)=\"searchInput && handleSubmit()\">\n    <input\n        #searchBox\n        class=\"search-input\"\n        name=\"searchTerm\"\n        type=\"search\"\n        (input)=\"search(searchBox.value)\" />\n    <button class=\"search-button\" *ngIf=\"searchInput\" [attr.disabled]=\"isSearchButtonDisabled ? true : null\">\n        <i class=\"fa fa-search is-size-4 search-icon\"></i>\n    </button>\n</form>\n\n<!-- <input *ngIf=\"!searchInput\" type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/> -->", styles: [":host .search-container{margin:0;display:flex}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { isSearchActive: [{
+                type: Input
+            }], isSearchButtonDisabled: [{
+                type: Input
+            }], searchInput: [{
+                type: Input
+            }], searchSubmit: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], searchBox: [{
+                type: ViewChild,
+                args: ['searchBox']
+            }] } });
+
+class StorePipe {
+    transform(value, context, prop = '_storedRef') {
+        context[prop] = value;
+        return value;
+    }
+}
+StorePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: StorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+StorePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: StorePipe, name: "store" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: StorePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'store'
+                }]
+        }] });
+
+class ListComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        /* Store pipe */
+        this.self = this;
+        this._storedElements = [];
+        this.searchPlaceholder = 'search';
+        this.noResultsLabel = 'list.results.no.items';
+        this.placeholder = 'list.placeholder';
+        this.isSearchActive = true;
+        this.isSearchButtonDisabled = false;
+        this.searchInput = false;
+        this.inputChange = new EventEmitter();
+        this.onSelect = new EventEmitter();
+        this.listChange = new EventEmitter();
+        this.scrolledDown = new EventEmitter();
+        this.isSelected = (arg) => false;
+        this.isDisabled = (arg) => false;
+        this.ngClass = (arg) => ({});
+    }
+    set storedElements(list) {
+        this._storedElements = list;
+        this.listChange.emit(list);
+    }
+    get storedElements() {
+        return this._storedElements;
+    }
+}
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ListComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: ListComponent, selector: "ode-list", inputs: { model: "model", filters: "filters", inputFilter: "inputFilter", sort: "sort", limit: "limit", searchPlaceholder: "searchPlaceholder", noResultsLabel: "noResultsLabel", placeholder: "placeholder", isSearchActive: "isSearchActive", isSearchButtonDisabled: "isSearchButtonDisabled", searchInput: "searchInput", searchDelay: "searchDelay", searchSubmit: "searchSubmit", isSelected: "isSelected", isDisabled: "isDisabled", ngClass: "ngClass" }, outputs: { inputChange: "inputChange", onSelect: "onSelect", listChange: "listChange", scrolledDown: "scrolledDown" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ode-search-input\n  *ngIf=\"isSearchActive\"\n  [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\n  [searchInput]=\"searchInput\"\n  [searchSubmit]=\"searchSubmit\"\n  [delay]=\"searchDelay\"\n  [attr.placeholder]=\"searchPlaceholder | translate\"\n  (onChange)=\"inputChange.emit($event)\"\n>\n</ode-search-input>\n\n<div class=\"toolbar\">\n  <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n\n<div\n  class=\"list-wrapper\"\n  infiniteScroll\n  [scrollWindow]=\"false\"\n  (scrolled)=\"scrolledDown.emit()\"\n  [infiniteScrollThrottle]=\"50\"\n>\n  <ul>\n    <li\n      *ngFor=\"let item of model | filter: filters | filter: inputFilter | store:self:'storedElements' | orderBy: sort | slice: 0:limit\"\n      (click)=\"onSelect.emit(item)\"\n      [class.selected]=\"isSelected(item)\"\n      [class.disabled]=\"isDisabled(item)\"\n      [ngClass]=\"ngClass(item)\"\n      class=\"lct-list-item\"\n    >\n      <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-template>\n    </li>\n  </ul>\n\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n  </ul>\n\n  <ul *ngIf=\"!model\">\n    <li class=\"placeholder\">{{ placeholder | translate }}</li>\n  </ul>\n</div>\n", styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.no-results{padding:50px;text-align:center;font-style:italic}ul li.no-results:hover{cursor:default!important;background-color:inherit!important}ul li.placeholder{color:#aaa;padding:2rem;text-align:left}ul li.placeholder:hover{cursor:default!important;background-color:inherit!important}ul li.disabled{pointer-events:none}\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$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SearchInputComponent, selector: "ode-search-input", inputs: ["isSearchActive", "isSearchButtonDisabled", "searchInput", "searchSubmit", "delay"], outputs: ["onChange"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: OrderPipe, name: "orderBy" }, { kind: "pipe", type: StorePipe, name: "store" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-list', template: "<ode-search-input\n  *ngIf=\"isSearchActive\"\n  [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\n  [searchInput]=\"searchInput\"\n  [searchSubmit]=\"searchSubmit\"\n  [delay]=\"searchDelay\"\n  [attr.placeholder]=\"searchPlaceholder | translate\"\n  (onChange)=\"inputChange.emit($event)\"\n>\n</ode-search-input>\n\n<div class=\"toolbar\">\n  <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n\n<div\n  class=\"list-wrapper\"\n  infiniteScroll\n  [scrollWindow]=\"false\"\n  (scrolled)=\"scrolledDown.emit()\"\n  [infiniteScrollThrottle]=\"50\"\n>\n  <ul>\n    <li\n      *ngFor=\"let item of model | filter: filters | filter: inputFilter | store:self:'storedElements' | orderBy: sort | slice: 0:limit\"\n      (click)=\"onSelect.emit(item)\"\n      [class.selected]=\"isSelected(item)\"\n      [class.disabled]=\"isDisabled(item)\"\n      [ngClass]=\"ngClass(item)\"\n      class=\"lct-list-item\"\n    >\n      <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-template>\n    </li>\n  </ul>\n\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n  </ul>\n\n  <ul *ngIf=\"!model\">\n    <li class=\"placeholder\">{{ placeholder | translate }}</li>\n  </ul>\n</div>\n", styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.no-results{padding:50px;text-align:center;font-style:italic}ul li.no-results:hover{cursor:default!important;background-color:inherit!important}ul li.placeholder{color:#aaa;padding:2rem;text-align:left}ul li.placeholder:hover{cursor:default!important;background-color:inherit!important}ul li.disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { model: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], inputFilter: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], noResultsLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], isSearchActive: [{
+                type: Input
+            }], isSearchButtonDisabled: [{
+                type: Input
+            }], searchInput: [{
+                type: Input
+            }], searchDelay: [{
+                type: Input
+            }], searchSubmit: [{
+                type: Input
+            }], inputChange: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], listChange: [{
+                type: Output
+            }], scrolledDown: [{
+                type: Output
+            }], templateRef: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], isSelected: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], ngClass: [{
+                type: Input
+            }] } });
+
+class ListCheckableComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.model = [];
+        this.noResultsLabel = 'list.results.no.items';
+        this.readOnly = false;
+        this.onCheck = new EventEmitter();
+        this.listChange = new EventEmitter();
+        this.scrolledDown = new EventEmitter();
+        this.areAllChecked = () => false;
+        this.isChecked = (arg) => false;
+        this.isDisabled = (arg) => false;
+        this.ngClass = (arg) => ({});
+        /* Store pipe */
+        this.self = this;
+        this._storedElements = [];
+    }
+    set storedElements(list) {
+        this._storedElements = list;
+        this.listChange.emit(list);
+    }
+    get storedElements() {
+        return this._storedElements;
+    }
+    toggleAll(checkAll) {
+        this.model.forEach(item => {
+            const isChecked = this.isChecked(item);
+            if (!this.isDisabled(item)
+                && ((isChecked && !checkAll) || (!isChecked && checkAll))) {
+                this.onCheck.emit({ item: item, checked: checkAll });
+            }
+        });
+    }
+}
+ListCheckableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ListCheckableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ListCheckableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: ListCheckableComponent, selector: "ode-list-checkable", inputs: { model: "model", filters: "filters", sort: "sort", limit: "limit", noResultsLabel: "noResultsLabel", readOnly: "readOnly", areAllChecked: "areAllChecked", isChecked: "isChecked", isDisabled: "isDisabled", ngClass: "ngClass" }, outputs: { onCheck: "onCheck", listChange: "listChange", scrolledDown: "scrolledDown" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-checkable-wrapper\"\n     infiniteScroll\n     [scrollWindow]=\"false\"\n     (scrolled)=\"scrolledDown.emit()\"\n     [infiniteScrollThrottle]=\"50\">\n\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\"><span>{{ noResultsLabel | translate }}</span></li>\n  </ul>\n  \n  <ul>\n    <li class=\"select-all\" \n        [class.checked]=\"areAllChecked()\"\n        *ngIf=\"!readOnly\">\n      <label>\n        <span>{{(areAllChecked() ? 'ux.multiselect.deselect-all' : 'ux.multiselect.select-all') | translate}}</span>\n        <input type=\"checkbox\" [checked]=\"areAllChecked()\" (change)=\"toggleAll($event.target.checked)\" />\n      </label>\n    </li>\n\n    <li class=\"lct-list-checkable-item\" \n        [class.checked]=\"isChecked(item)\"\n        [class.disabled]=\"isDisabled(item)\"\n        [ngClass]=\"ngClass(item)\"\n        *ngFor=\"let item of model | filter: filters | store:self:'storedElements' | orderBy: sort | slice: 0:limit\">\n      <label>\n        <span>\n          <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>        \n        </span>\n        <input *ngIf=\"!readOnly\" type=\"checkbox\" \n              [disabled]=\"isDisabled(item)\"\n              [checked]=\"isChecked(item)\"\n              (change)=\"onCheck.emit({item:item, checked:$event.target.checked})\"/>\n      </label>\n    </li>\n  </ul>\n\n</div>\n", styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{border-top:1px solid #ddd;width:-webkit-fill-available;width:-moz-available;display:flex}ul li:not(.checked){color:#939393}ul li.disabled{pointer-events:none}ul li.select-all{background-color:#ff83520a;color:#5b6472}ul li.select-all span{text-align:right}ul li label{cursor:pointer;width:100%;display:flex}ul li label:hover{background-color:#eaedf2}ul li label span{padding:7px 15px;width:100%}ul li label input[type=checkbox]{margin-right:15px;align-self:center}\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$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: OrderPipe, name: "orderBy" }, { kind: "pipe", type: StorePipe, name: "store" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ListCheckableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-list-checkable', template: "<div class=\"list-checkable-wrapper\"\n     infiniteScroll\n     [scrollWindow]=\"false\"\n     (scrolled)=\"scrolledDown.emit()\"\n     [infiniteScrollThrottle]=\"50\">\n\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\"><span>{{ noResultsLabel | translate }}</span></li>\n  </ul>\n  \n  <ul>\n    <li class=\"select-all\" \n        [class.checked]=\"areAllChecked()\"\n        *ngIf=\"!readOnly\">\n      <label>\n        <span>{{(areAllChecked() ? 'ux.multiselect.deselect-all' : 'ux.multiselect.select-all') | translate}}</span>\n        <input type=\"checkbox\" [checked]=\"areAllChecked()\" (change)=\"toggleAll($event.target.checked)\" />\n      </label>\n    </li>\n\n    <li class=\"lct-list-checkable-item\" \n        [class.checked]=\"isChecked(item)\"\n        [class.disabled]=\"isDisabled(item)\"\n        [ngClass]=\"ngClass(item)\"\n        *ngFor=\"let item of model | filter: filters | store:self:'storedElements' | orderBy: sort | slice: 0:limit\">\n      <label>\n        <span>\n          <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>        \n        </span>\n        <input *ngIf=\"!readOnly\" type=\"checkbox\" \n              [disabled]=\"isDisabled(item)\"\n              [checked]=\"isChecked(item)\"\n              (change)=\"onCheck.emit({item:item, checked:$event.target.checked})\"/>\n      </label>\n    </li>\n  </ul>\n\n</div>\n", styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{border-top:1px solid #ddd;width:-webkit-fill-available;width:-moz-available;display:flex}ul li:not(.checked){color:#939393}ul li.disabled{pointer-events:none}ul li.select-all{background-color:#ff83520a;color:#5b6472}ul li.select-all span{text-align:right}ul li label{cursor:pointer;width:100%;display:flex}ul li label:hover{background-color:#eaedf2}ul li label span{padding:7px 15px;width:100%}ul li label input[type=checkbox]{margin-right:15px;align-self:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { model: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], noResultsLabel: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], onCheck: [{
+                type: Output
+            }], listChange: [{
+                type: Output
+            }], scrolledDown: [{
+                type: Output
+            }], templateRef: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], areAllChecked: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], ngClass: [{
+                type: Input
+            }] } });
+
+class MonoSelectComponent extends OdeComponent {
+    constructor(elementRef, injector) {
+        super(injector);
+        this.elementRef = elementRef;
+        this.placeholder = 'monoselect.placeholder.default';
+        this.options = [];
+        this.translateOptions = true;
+        this.opened = false;
+        this.selectedOption = null;
+        this.disabled = false;
+        this.onChange = (_) => {
+        };
+        this.onTouched = () => {
+        };
+    }
+    optionClicked(option) {
+        this.selectedOption = option;
+        this.opened = false;
+        this.onChange(this.selectedOption != null ? this.selectedOption.value : null);
+    }
+    onClickOnDocument(event) {
+        if (this.opened &&
+            !this.elementRef.nativeElement.querySelector('.lct-form-select').contains(event.target)) {
+            this.opened = false;
+        }
+        return true;
+    }
+    onClickOnHost() {
+        if (!this.opened && !this.disabled) {
+            this.opened = true;
+        }
+        else {
+            this.opened = false;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(obj) {
+        this.selectedOption = this.options.find(option => option.value === obj);
+        this.onChange(this.selectedOption ? this.selectedOption.value : null);
+    }
+}
+MonoSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MonoSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MonoSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: MonoSelectComponent, selector: "ode-mono-select", inputs: { placeholder: "placeholder", options: "options", trackByFn: "trackByFn", translateOptions: "translateOptions", disabled: "disabled" }, host: { listeners: { "document:click": "onClickOnDocument($event)", "click": "onClickOnHost()" } }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MonoSelectComponent),
+            multi: true
+        }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-select lct-form-select\" [ngClass]=\"{'form-select--opened': opened, 'form-select--disabled': disabled}\">\n  <ul>\n    <li class=\"form-select__options--selected lct-form-select__options--selected\">\n      <strong>{{selectedOption ? ((translateOptions == true) ? (selectedOption.label | translate) : selectedOption.label) : (placeholder | translate)}}</strong>\n      <ul class=\"form-select__list lct-form-select__list\" *ngIf=\"opened\">\n        <li class=\"form-select__options lct-form-select__options\"\n            (click)=\"$event.stopPropagation(); optionClicked()\">{{placeholder | translate}}</li>\n        <li class=\"form-select__options lct-form-select__options\"\n            *ngFor=\"let option of options\"\n            (click)=\"$event.stopPropagation(); optionClicked(option)\">{{(translateOptions == true) ? (option.label | translate) : option.label}}</li>\n      </ul>\n    </li>\n  </ul>\n</div>\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: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MonoSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-mono-select', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MonoSelectComponent),
+                            multi: true
+                        }], host: {
+                        '(document:click)': 'onClickOnDocument($event)',
+                        '(click)': 'onClickOnHost()'
+                    }, template: "<div class=\"form-select lct-form-select\" [ngClass]=\"{'form-select--opened': opened, 'form-select--disabled': disabled}\">\n  <ul>\n    <li class=\"form-select__options--selected lct-form-select__options--selected\">\n      <strong>{{selectedOption ? ((translateOptions == true) ? (selectedOption.label | translate) : selectedOption.label) : (placeholder | translate)}}</strong>\n      <ul class=\"form-select__list lct-form-select__list\" *ngIf=\"opened\">\n        <li class=\"form-select__options lct-form-select__options\"\n            (click)=\"$event.stopPropagation(); optionClicked()\">{{placeholder | translate}}</li>\n        <li class=\"form-select__options lct-form-select__options\"\n            *ngFor=\"let option of options\"\n            (click)=\"$event.stopPropagation(); optionClicked(option)\">{{(translateOptions == true) ? (option.label | translate) : option.label}}</li>\n      </ul>\n    </li>\n  </ul>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], trackByFn: [{
+                type: Input
+            }], translateOptions: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/* If you need to use multi-combo in a form you should give a look to the MultiSelectComponent. */
+class MultiComboComponent extends OdeComponent {
+    constructor(_eref, labelsService, injector) {
+        super(injector);
+        this._eref = _eref;
+        this.labelsService = labelsService;
+        this.filteredModel = [];
+        this.title = 'Select';
+        this.reverse = false;
+        this.disabled = false;
+        this.onSelectItem = new EventEmitter();
+        this.onDeselectItem = new EventEmitter();
+        this.filteredModelChange = new EventEmitter();
+        this.onOpen = new EventEmitter();
+        this.onClose = new EventEmitter();
+        this.self = this;
+        this._comboModel = [];
+        this.filteredComboModel = [];
+        this.search = {
+            input: '',
+            reset() {
+                this.input = '';
+            }
+        };
+        this.show = false;
+    }
+    set comboModel(model) {
+        this._comboModel = model;
+        if (!model) {
+            this.filteredModel = [];
+            return;
+        }
+        for (let i = 0; i < this.filteredModel.length; i++) {
+            const idx = model.indexOf(this.filteredModel[i]);
+            if (idx < 0) {
+                this.filteredModel.splice(idx, 1);
+                i--;
+            }
+        }
+    }
+    labels(label) {
+        return this.labelsService.getLabel(label);
+    }
+    toggleVisibility() {
+        this.show = !this.show;
+        if (this.show) {
+            this.search.reset();
+            this.onOpen.emit();
+        }
+        else {
+            this.onClose.emit();
+        }
+    }
+    isSelected(item) {
+        return this.filteredModel && this.filteredModel.indexOf(item) >= 0;
+    }
+    isDisabled() {
+        return this.filteredModel && this.maxSelected &&
+            this.maxSelected <= this.filteredModel.length;
+    }
+    toggleItem(item) {
+        const idx = this.filteredModel.indexOf(item);
+        if (idx >= 0) {
+            this.filteredModel.splice(idx, 1);
+            this.onDeselectItem.emit(item);
+        }
+        else if (!this.maxSelected ||
+            this.filteredModel.length < this.maxSelected) {
+            this.filteredModel.push(item);
+            this.onSelectItem.emit(item);
+        }
+        this.filteredModelChange.emit(this.filteredModel);
+    }
+    selectAll() {
+        this.filteredModel = [];
+        for (let i = 0; i < this.filteredComboModel.length; i++) {
+            this.filteredModel.push(this.filteredComboModel[i]);
+        }
+        this.filteredModelChange.emit(this.filteredModel);
+    }
+    deselectAll() {
+        this.filteredModel = [];
+        this.filteredModelChange.emit(this.filteredModel);
+    }
+    displayItem(item) {
+        return item instanceof Object ?
+            this.display && typeof this.display === 'string' ?
+                item[this.display] :
+                item.toString() :
+            this.display && this.display instanceof Function ?
+                this.display(item || '') :
+                item;
+    }
+    onClick(event) {
+        if (this.show && !this._eref.nativeElement.contains(event.target)) {
+            this.toggleVisibility();
+        }
+        return true;
+    }
+    getFilter() {
+        if (!this.filter) {
+            return '';
+        }
+        let filter = '';
+        if (this._comboModel.length > 0) {
+            if (typeof this._comboModel[0] === 'string') {
+                filter = this.search.input;
+            }
+            else {
+                filter = {};
+                filter[this.filter] = this.search.input;
+            }
+        }
+        return filter;
+    }
+}
+MultiComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MultiComboComponent, deps: [{ token: i0.ElementRef }, { token: LabelsService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MultiComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: MultiComboComponent, selector: "ode-multi-combo", inputs: { comboModel: "comboModel", filteredModel: ["outputModel", "filteredModel"], title: "title", display: "display", filter: "filter", orderBy: "orderBy", reverse: "reverse", maxSelected: ["max", "maxSelected"], disabled: "disabled" }, outputs: { onSelectItem: "onSelectItem", onDeselectItem: "onDeselectItem", filteredModelChange: "outputModelChange", onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<button (click)=\"toggleVisibility()\"\n        [ngClass]=\"{ opened: show }\"\n        [disabled]=\"disabled\"\n        type=\"button\">\n  {{ title }}\n</button>\n<div [ngClass]=\"{ hidden: !show }\">\n  <div class=\"options\">\n    <button class=\"select-all\" (click)=\"selectAll()\" *ngIf=\"!maxSelected\"\n            [title]=\"labels('select.all')\" type=\"button\">{{ labels('select.all') }}</button>\n    <button class=\"deselect-all\" (click)=\"deselectAll()\"\n            [title]=\"labels('deselect.all')\" type=\"button\">{{ labels('deselect.all') }}</button>\n  </div>\n  <div *ngIf=\"filter\" class=\"filter\">\n    <ode-search-input (onChange)=\"search.input = $event\" [attr.placeholder]=\"labels('search')\"></ode-search-input>\n  </div>\n  <ul>\n    <li *ngFor=\"let item of _comboModel | filter: getFilter() | orderBy: orderBy | store: self:'filteredComboModel'\"\n        (click)=\"toggleItem(item)\"\n        [ngClass]=\"{ selected: isSelected(item) }\"\n        [attr.disabled]=\"isDisabled()\">\n      {{ displayItem(item) | translate }}\n    </li>\n  </ul>\n</div>\n", styles: [":host{position:relative}:host>button{min-width:150px}:host>div{position:absolute;z-index:2;left:0px;overflow:hidden;background:white;border:2px solid black}:host>div.hidden{max-height:0px;border-width:0px}:host>div>div.options>*{display:inline-block;vertical-align:middle}:host>div>div.filter{margin:10px 0;width:100%;position:relative}:host>div>div.filter input{width:100%}:host>div>ul{list-style:none;padding:0;overflow-y:auto;max-height:200px}:host>div>ul>li{white-space:nowrap;cursor:pointer}:host>div>ul>li:not(.selected)[disabled=true]{pointer-events:none}\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: "component", type: SearchInputComponent, selector: "ode-search-input", inputs: ["isSearchActive", "isSearchButtonDisabled", "searchInput", "searchSubmit", "delay"], outputs: ["onChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: OrderPipe, name: "orderBy" }, { kind: "pipe", type: StorePipe, name: "store" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MultiComboComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-multi-combo', host: {
+                        '(document:click)': 'onClick($event)',
+                    }, template: "<button (click)=\"toggleVisibility()\"\n        [ngClass]=\"{ opened: show }\"\n        [disabled]=\"disabled\"\n        type=\"button\">\n  {{ title }}\n</button>\n<div [ngClass]=\"{ hidden: !show }\">\n  <div class=\"options\">\n    <button class=\"select-all\" (click)=\"selectAll()\" *ngIf=\"!maxSelected\"\n            [title]=\"labels('select.all')\" type=\"button\">{{ labels('select.all') }}</button>\n    <button class=\"deselect-all\" (click)=\"deselectAll()\"\n            [title]=\"labels('deselect.all')\" type=\"button\">{{ labels('deselect.all') }}</button>\n  </div>\n  <div *ngIf=\"filter\" class=\"filter\">\n    <ode-search-input (onChange)=\"search.input = $event\" [attr.placeholder]=\"labels('search')\"></ode-search-input>\n  </div>\n  <ul>\n    <li *ngFor=\"let item of _comboModel | filter: getFilter() | orderBy: orderBy | store: self:'filteredComboModel'\"\n        (click)=\"toggleItem(item)\"\n        [ngClass]=\"{ selected: isSelected(item) }\"\n        [attr.disabled]=\"isDisabled()\">\n      {{ displayItem(item) | translate }}\n    </li>\n  </ul>\n</div>\n", styles: [":host{position:relative}:host>button{min-width:150px}:host>div{position:absolute;z-index:2;left:0px;overflow:hidden;background:white;border:2px solid black}:host>div.hidden{max-height:0px;border-width:0px}:host>div>div.options>*{display:inline-block;vertical-align:middle}:host>div>div.filter{margin:10px 0;width:100%;position:relative}:host>div>div.filter input{width:100%}:host>div>ul{list-style:none;padding:0;overflow-y:auto;max-height:200px}:host>div>ul>li{white-space:nowrap;cursor:pointer}:host>div>ul>li:not(.selected)[disabled=true]{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: LabelsService }, { type: i0.Injector }]; }, propDecorators: { comboModel: [{
+                type: Input
+            }], filteredModel: [{
+                type: Input,
+                args: ['outputModel']
+            }], title: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], orderBy: [{
+                type: Input
+            }], reverse: [{
+                type: Input
+            }], maxSelected: [{
+                type: Input,
+                args: ['max']
+            }], disabled: [{
+                type: Input
+            }], onSelectItem: [{
+                type: Output
+            }], onDeselectItem: [{
+                type: Output
+            }], filteredModelChange: [{
+                type: Output,
+                args: ['outputModelChange']
+            }], onOpen: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }] } });
+
+class MultiSelectComponent extends OdeComponent {
+    constructor(injector, elementRef) {
+        super(injector);
+        this.elementRef = elementRef;
+        this.label = '';
+        this.options = [];
+        this.preview = false;
+        this.model = [];
+        this.isDisabled = false;
+        this.isOptionsVisible = false;
+        this.onChange = (_) => {
+        };
+        this.onTouched = () => {
+        };
+    }
+    optionClicked(option) {
+        if (this.model) {
+            const index = this.getIndexOfOptionInModel(option);
+            if (index < 0) {
+                this.model.push(option.value);
+            }
+            else {
+                this.model.splice(index, 1);
+            }
+        }
+        else {
+            this.model = [option.value];
+        }
+        this.onChange(this.model);
+    }
+    selectAll() {
+        this.options.forEach(option => {
+            if (!this.model.includes(option.value)) {
+                this.model.push(option.value);
+            }
+        });
+        this.onChange(this.model);
+    }
+    deselectAll() {
+        this.model = [];
+        this.onChange(this.model);
+    }
+    toggleOptionsVisibility() {
+        this.isOptionsVisible = !this.isOptionsVisible;
+    }
+    isSelected(option) {
+        return this.model ? (this.getIndexOfOptionInModel(option) >= 0) : false;
+    }
+    closeIfOpened(event) {
+        if (this.isOptionsVisible
+            && !this.elementRef.nativeElement.querySelector('.lct-multi-select__options-container').contains(event.target)
+            && !this.elementRef.nativeElement.querySelector('.lct-multi-select__toggle').contains(event.target)) {
+            this.isOptionsVisible = false;
+        }
+        return true;
+    }
+    getIndexOfOptionInModel(option) {
+        return this.model.map(this.trackByFn).indexOf(this.trackByFn(option.value));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    writeValue(obj) {
+        this.model = obj;
+        this.onChange(this.model);
+    }
+}
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: MultiSelectComponent, selector: "ode-multi-select", inputs: { label: "label", options: "options", preview: "preview", trackByFn: "trackByFn" }, host: { listeners: { "document:click": "closeIfOpened($event)" } }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MultiSelectComponent),
+            multi: true
+        }], usesInheritance: true, ngImport: i0, template: "<button type=\"button\"\n        (click)=\"toggleOptionsVisibility()\" [disabled]=\"isDisabled\"\n        class=\"multi-select__toggle lct-multi-select__toggle\"\n        [ngClass]=\"{'multi-select__toggle--active': isOptionsVisible}\">{{label |\u00A0translate}}</button>\n<div class=\"multi-select__options-container lct-multi-select__options-container\"\n     [ngClass]=\"{'multi-select__options-container--active': isOptionsVisible}\">\n  <div class=\"multi-select__options-actions\">\n    <button type=\"button\"\n            class=\"multi-select__options-actions-item\"\n            (click)=\"selectAll()\">{{'ux.multiselect.select-all' | translate}}</button>\n    <button type=\"button\"\n            class=\"multi-select__options-actions-item\"\n            (click)=\"deselectAll()\">{{'ux.multiselect.deselect-all' | translate}}</button>\n  </div>\n  <ul class=\"multi-select__options lct-multi-select__options\">\n    <li class=\"multi-select__options-item lct-multi-select__options-item\"\n        *ngFor=\"let option of options\"\n        (click)=\"optionClicked(option)\"\n        [ngClass]=\"{'multi-select__options-item--selected': isSelected(option)}\">{{option.label | translate}}</li>\n  </ul>\n</div>\n<div class=\"multi-select__options-preview lct-multi-select__options-preview\" *ngIf=\"preview\">\n  <ng-container *ngFor=\"let option of options\">\n    <button *ngIf=\"isSelected(option)\"\n            type=\"button\"\n            class=\"multi-select__options-preview-item lct-multi-select__options-preview-item\"\n            (click)=\"optionClicked(option)\">\n      <span>{{option.label | translate}}</span>\n      <i class=\"multi-select__options-preview-item-delete-icon fa fa-trash is-size-5\"></i>\n    </button>\n  </ng-container>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative}.multi-select__toggle{min-width:210px;outline:none;background-color:#f2f2f2}.multi-select__toggle:after{content:\"\\25bc\";float:right;margin-left:10px;transition:transform .25s,color .25s}.multi-select__toggle:hover:after{color:#fff}.multi-select__toggle:hover,.multi-select__toggle.multi-select__toggle--active{background-color:#ff8352;color:#fff}.multi-select__toggle.multi-select__toggle--active:after{transform:rotate(180deg);color:#fff}.multi-select__options-container{display:none;position:absolute;z-index:2;left:1px;top:31px;overflow:hidden;background:white;border:1px solid #ddd;padding:0 10px 0 20px;min-width:160px}.multi-select__options-container.multi-select__options-container--active{display:block}.multi-select__options{list-style:none;padding:0;overflow-y:scroll;max-height:200px;margin-bottom:10px}.multi-select__options-item{white-space:nowrap;cursor:pointer;line-height:25px;font-size:13px;transition:background-color .25s,color .25s;margin-bottom:5px;padding:0 10px}.multi-select__options-item.multi-select__options-item--selected{color:#fff;background-color:#217b9e}.multi-select__options-preview{color:#fff;margin:10px 0}.multi-select__options-preview-item{border:1px solid #217b9e;display:inline-block;font-size:.8em;margin-right:10px;margin-bottom:10px;padding:10px;cursor:pointer;transition:all .25s;border-radius:3px;background-color:#217b9e;line-height:1.5em;color:#fff}.multi-select__options-preview-item:hover{background-color:#61bbde;border-color:#fff}.multi-select__options-preview-item-delete-icon{opacity:0;transition:opacity .25s;float:right;padding-left:10px}.multi-select__options-preview-item:hover .multi-select__options-preview-item-delete-icon{opacity:1}.multi-select__options-actions{margin-top:10px}.multi-select__options-actions-item{margin-bottom:3px;min-width:136px}.multi-select__options-actions-item:hover{background:#ffccb8}\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: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-multi-select', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true
+                        }], host: {
+                        '(document:click)': 'closeIfOpened($event)'
+                    }, template: "<button type=\"button\"\n        (click)=\"toggleOptionsVisibility()\" [disabled]=\"isDisabled\"\n        class=\"multi-select__toggle lct-multi-select__toggle\"\n        [ngClass]=\"{'multi-select__toggle--active': isOptionsVisible}\">{{label |\u00A0translate}}</button>\n<div class=\"multi-select__options-container lct-multi-select__options-container\"\n     [ngClass]=\"{'multi-select__options-container--active': isOptionsVisible}\">\n  <div class=\"multi-select__options-actions\">\n    <button type=\"button\"\n            class=\"multi-select__options-actions-item\"\n            (click)=\"selectAll()\">{{'ux.multiselect.select-all' | translate}}</button>\n    <button type=\"button\"\n            class=\"multi-select__options-actions-item\"\n            (click)=\"deselectAll()\">{{'ux.multiselect.deselect-all' | translate}}</button>\n  </div>\n  <ul class=\"multi-select__options lct-multi-select__options\">\n    <li class=\"multi-select__options-item lct-multi-select__options-item\"\n        *ngFor=\"let option of options\"\n        (click)=\"optionClicked(option)\"\n        [ngClass]=\"{'multi-select__options-item--selected': isSelected(option)}\">{{option.label | translate}}</li>\n  </ul>\n</div>\n<div class=\"multi-select__options-preview lct-multi-select__options-preview\" *ngIf=\"preview\">\n  <ng-container *ngFor=\"let option of options\">\n    <button *ngIf=\"isSelected(option)\"\n            type=\"button\"\n            class=\"multi-select__options-preview-item lct-multi-select__options-preview-item\"\n            (click)=\"optionClicked(option)\">\n      <span>{{option.label | translate}}</span>\n      <i class=\"multi-select__options-preview-item-delete-icon fa fa-trash is-size-5\"></i>\n    </button>\n  </ng-container>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative}.multi-select__toggle{min-width:210px;outline:none;background-color:#f2f2f2}.multi-select__toggle:after{content:\"\\25bc\";float:right;margin-left:10px;transition:transform .25s,color .25s}.multi-select__toggle:hover:after{color:#fff}.multi-select__toggle:hover,.multi-select__toggle.multi-select__toggle--active{background-color:#ff8352;color:#fff}.multi-select__toggle.multi-select__toggle--active:after{transform:rotate(180deg);color:#fff}.multi-select__options-container{display:none;position:absolute;z-index:2;left:1px;top:31px;overflow:hidden;background:white;border:1px solid #ddd;padding:0 10px 0 20px;min-width:160px}.multi-select__options-container.multi-select__options-container--active{display:block}.multi-select__options{list-style:none;padding:0;overflow-y:scroll;max-height:200px;margin-bottom:10px}.multi-select__options-item{white-space:nowrap;cursor:pointer;line-height:25px;font-size:13px;transition:background-color .25s,color .25s;margin-bottom:5px;padding:0 10px}.multi-select__options-item.multi-select__options-item--selected{color:#fff;background-color:#217b9e}.multi-select__options-preview{color:#fff;margin:10px 0}.multi-select__options-preview-item{border:1px solid #217b9e;display:inline-block;font-size:.8em;margin-right:10px;margin-bottom:10px;padding:10px;cursor:pointer;transition:all .25s;border-radius:3px;background-color:#217b9e;line-height:1.5em;color:#fff}.multi-select__options-preview-item:hover{background-color:#61bbde;border-color:#fff}.multi-select__options-preview-item-delete-icon{opacity:0;transition:opacity .25s;float:right;padding-left:10px}.multi-select__options-preview-item:hover .multi-select__options-preview-item-delete-icon{opacity:1}.multi-select__options-actions{margin-top:10px}.multi-select__options-actions-item{margin-bottom:3px;min-width:136px}.multi-select__options-actions-item:hover{background:#ffccb8}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], trackByFn: [{
+                type: Input
+            }] } });
+
+class PanelSectionComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.folded = null;
+    }
+}
+PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: PanelSectionComponent, selector: "ode-panel-section", inputs: { sectionTitle: ["section-title", "sectionTitle"], folded: "folded" }, usesInheritance: true, ngImport: i0, template: "<section class=\"panel-section\">\n  <div class=\"panel-section-header is-display-flex has-space-between\" (click)=\"folded !== null ? folded=!folded : null\" [class.foldable]=\"folded !== null\">\n    <div class=\"is-display-flex\">\n      <s5l>{{ sectionTitle\u00A0}}</s5l>\n      <div class=\"has-left-padding-10\">\n        <ng-content select=\"[panel-section-header-icons]\"></ng-content>\n      </div>\n    </div>\n\n    <i class=\"opener\" *ngIf=\"folded !== null\"\n       [class.opened]=\"!folded\"></i>\n  </div>\n  <div class=\"panel-section-content\" *ngIf=\"!folded\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", styles: [".panel-section-header{font-size:1.1em;padding:10px}.panel-section-header.foldable{cursor:pointer}.panel-section-content{padding:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.S5lComponent, selector: "s5l", inputs: ["s5l-params", "s5l-lang"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-panel-section', template: "<section class=\"panel-section\">\n  <div class=\"panel-section-header is-display-flex has-space-between\" (click)=\"folded !== null ? folded=!folded : null\" [class.foldable]=\"folded !== null\">\n    <div class=\"is-display-flex\">\n      <s5l>{{ sectionTitle\u00A0}}</s5l>\n      <div class=\"has-left-padding-10\">\n        <ng-content select=\"[panel-section-header-icons]\"></ng-content>\n      </div>\n    </div>\n\n    <i class=\"opener\" *ngIf=\"folded !== null\"\n       [class.opened]=\"!folded\"></i>\n  </div>\n  <div class=\"panel-section-content\" *ngIf=\"!folded\">\n    <ng-content></ng-content>\n  </div>\n</section>\n", styles: [".panel-section-header{font-size:1.1em;padding:10px}.panel-section-header.foldable{cursor:pointer}.panel-section-content{padding:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { sectionTitle: [{
+                type: Input,
+                args: ['section-title']
+            }], folded: [{
+                type: Input
+            }] } });
+
+class PortalComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+    }
+}
+PortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PortalComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+PortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: PortalComponent, selector: "ode-portal", usesInheritance: true, ngImport: i0, template: "<header>\n  <ng-content select=\"[header-left]\"></ng-content>\n  <ng-content select=\"[header-middle]\"></ng-content>\n  <ng-content select=\"[header-right]\"></ng-content>\n</header>\n<section>\n  <ng-content select=\"[section]\"></ng-content>\n</section>\n<footer>\n  <ng-content select=\"[footer]\"></ng-content>\n</footer>\n", styles: ["header{position:relative;display:flex;align-items:center;top:0px;width:100%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PortalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-portal', template: "<header>\n  <ng-content select=\"[header-left]\"></ng-content>\n  <ng-content select=\"[header-middle]\"></ng-content>\n  <ng-content select=\"[header-right]\"></ng-content>\n</header>\n<section>\n  <ng-content select=\"[section]\"></ng-content>\n</section>\n<footer>\n  <ng-content select=\"[footer]\"></ng-content>\n</footer>\n", styles: ["header{position:relative;display:flex;align-items:center;top:0px;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class PushPanelComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.onClose = new EventEmitter();
+    }
+    set toggle(toggle) {
+        this._opened = toggle;
+    }
+    onClick(event) {
+        const checkOpener = this.opener &&
+            (this.opener.contains && this.opener.contains(event.target)) ||
+            (this.opener.nativeElement && this.opener.nativeElement.contains(event.target));
+        if (this._opened &&
+            !this.inside.nativeElement.contains(event.target) &&
+            !checkOpener) {
+            this._opened = false;
+            this.onClose.emit();
+        }
+        return true;
+    }
+}
+PushPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PushPanelComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+PushPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: PushPanelComponent, selector: "ode-push-panel", inputs: { toggle: "toggle", opener: "opener" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "inside", first: true, predicate: ["inside"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ opened: _opened }\" #inside>\n  <ng-content select=\"[inside]\"></ng-content>\n</div>\n<div>\n  <ng-content select=\"[companion]\"></ng-content>\n</div>\n", styles: [":host>div:nth-child(1){position:fixed;z-index:10;overflow-x:hidden;overflow-y:scroll;height:100%;top:0px;left:-30%;width:30%;transition:transform .25s}:host>div:nth-child(1).opened{transform:translate(100%)}:host>div:nth-child(2){position:relative;left:0%;opacity:1;transition:transform .25s,opacity .25s}:host>div:nth-child(1).opened+div{opacity:.7;transform:translate(30%);overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PushPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-push-panel', host: {
+                        '(document:click)': 'onClick($event)',
+                    }, template: "<div [ngClass]=\"{ opened: _opened }\" #inside>\n  <ng-content select=\"[inside]\"></ng-content>\n</div>\n<div>\n  <ng-content select=\"[companion]\"></ng-content>\n</div>\n", styles: [":host>div:nth-child(1){position:fixed;z-index:10;overflow-x:hidden;overflow-y:scroll;height:100%;top:0px;left:-30%;width:30%;transition:transform .25s}:host>div:nth-child(1).opened{transform:translate(100%)}:host>div:nth-child(2){position:relative;left:0%;opacity:1;transition:transform .25s,opacity .25s}:host>div:nth-child(1).opened+div{opacity:.7;transform:translate(30%);overflow-x:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { toggle: [{
+                type: Input
+            }], opener: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], inside: [{
+                type: ViewChild,
+                args: ['inside']
+            }] } });
+
+class SideLayoutComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.showCompanion = false;
+        this.close = new EventEmitter();
+    }
+}
+SideLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SideLayoutComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SideLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: SideLayoutComponent, selector: "ode-side-layout", inputs: { showCompanion: "showCompanion" }, outputs: { close: "closeCompanion" }, usesInheritance: true, ngImport: i0, template: "<div class=\"side-layout\">\n  <div class=\"side-card\">\n    <ng-content select=\"[side-card]\"></ng-content>\n  </div>\n  <div class=\"side-companion\" *ngIf=\"showCompanion\">\n    <ng-content select=\"[side-companion]\"></ng-content>\n  </div>\n</div>\n", styles: ["div.side-layout{display:flex;flex-wrap:nowrap;align-items:flex-start}div.side-card{flex:400px 0 0;position:relative}div.side-companion{flex:1;position:relative;margin-left:25px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SideLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-side-layout', template: "<div class=\"side-layout\">\n  <div class=\"side-card\">\n    <ng-content select=\"[side-card]\"></ng-content>\n  </div>\n  <div class=\"side-companion\" *ngIf=\"showCompanion\">\n    <ng-content select=\"[side-companion]\"></ng-content>\n  </div>\n</div>\n", styles: ["div.side-layout{display:flex;flex-wrap:nowrap;align-items:flex-start}div.side-card{flex:400px 0 0;position:relative}div.side-companion{flex:1;position:relative;margin-left:25px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { showCompanion: [{
+                type: Input
+            }], close: [{
+                type: Output,
+                args: ['closeCompanion']
+            }] } });
+
+class SidePanelComponent extends OdeComponent {
+    constructor(injector, elementRef) {
+        super(injector);
+        this.elementRef = elementRef;
+        this.onClose = new EventEmitter();
+    }
+    set toggle(toggle) {
+        this.opened = toggle;
+    }
+    onClick(event) {
+        const checkOpener = this.opener &&
+            (this.opener.contains && this.opener.contains(event.target)) ||
+            (this.opener.nativeElement && this.opener.nativeElement.contains(event.target));
+        if (this.opened &&
+            !this.elementRef.nativeElement.contains(event.target) &&
+            !checkOpener) {
+            this.opened = false;
+            this.onClose.emit();
+        }
+        return true;
+    }
+}
+SidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SidePanelComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: SidePanelComponent, selector: "ode-side-panel", inputs: { toggle: "toggle", opener: "opener" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ opened: opened }\">\n  <ng-content></ng-content>\n</div>\n", styles: ["div{position:fixed;z-index:10;overflow-x:hidden;overflow-y:scroll;top:0;left:-30%;width:30%;transition:transform .25s}div.opened{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-side-panel', host: {
+                        '(document:click)': 'onClick($event)',
+                    }, template: "<div [ngClass]=\"{ opened: opened }\">\n  <ng-content></ng-content>\n</div>\n", styles: ["div{position:fixed;z-index:10;overflow-x:hidden;overflow-y:scroll;top:0;left:-30%;width:30%;transition:transform .25s}div.opened{transform:translate(100%)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { toggle: [{
+                type: Input
+            }], opener: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }] } });
+
+class SpinnerCubeComponent extends OdeComponent {
+    constructor(injector, spinner) {
+        super(injector);
+        this.spinner = spinner;
+    }
+    set loadingProp(prop) {
+        this._loadingProp = prop;
+    }
+    get loadingProp() { return this._loadingProp; }
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscriptions.add(this.spinner.trigger.subscribe(() => {
+            this.changeDetector.markForCheck();
+        }));
+    }
+}
+SpinnerCubeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SpinnerCubeComponent, deps: [{ token: i0.Injector }, { token: SpinnerService }], target: i0.ɵɵFactoryTarget.Component });
+SpinnerCubeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: SpinnerCubeComponent, selector: "ode-spinner-cube", inputs: { loadingProp: ["waitingFor", "loadingProp"] }, usesInheritance: true, ngImport: i0, template: "<div class=\"spinner-wrapper\" *ngIf=\"spinner.isLoading(loadingProp)\">\n  <div class=\"spinner-cube\">\n    <div class=\"sk-cube sk-cube1\"></div>\n    <div class=\"sk-cube sk-cube2\"></div>\n    <div class=\"sk-cube sk-cube3\"></div>\n    <div class=\"sk-cube sk-cube4\"></div>\n    <div class=\"sk-cube sk-cube5\"></div>\n    <div class=\"sk-cube sk-cube6\"></div>\n    <div class=\"sk-cube sk-cube7\"></div>\n    <div class=\"sk-cube sk-cube8\"></div>\n    <div class=\"sk-cube sk-cube9\"></div>\n  </div>\n</div>\n", styles: ["div.spinner-wrapper{position:fixed;width:100%;height:100%;pointer-events:all;display:flex;justify-content:center;align-items:center}div.spinner-cube{width:20vh;height:20vh}div.sk-cube{width:33%;height:33%;float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}div.sk-cube1{animation-delay:.2s}div.sk-cube2{animation-delay:.3s}div.sk-cube3{animation-delay:.4s}div.sk-cube4{animation-delay:.1s}div.sk-cube5{animation-delay:.2s}div.sk-cube6{animation-delay:.3s}div.sk-cube7{animation-delay:0s}div.sk-cube8{animation-delay:.1s}div.sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SpinnerCubeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-spinner-cube', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner-wrapper\" *ngIf=\"spinner.isLoading(loadingProp)\">\n  <div class=\"spinner-cube\">\n    <div class=\"sk-cube sk-cube1\"></div>\n    <div class=\"sk-cube sk-cube2\"></div>\n    <div class=\"sk-cube sk-cube3\"></div>\n    <div class=\"sk-cube sk-cube4\"></div>\n    <div class=\"sk-cube sk-cube5\"></div>\n    <div class=\"sk-cube sk-cube6\"></div>\n    <div class=\"sk-cube sk-cube7\"></div>\n    <div class=\"sk-cube sk-cube8\"></div>\n    <div class=\"sk-cube sk-cube9\"></div>\n  </div>\n</div>\n", styles: ["div.spinner-wrapper{position:fixed;width:100%;height:100%;pointer-events:all;display:flex;justify-content:center;align-items:center}div.spinner-cube{width:20vh;height:20vh}div.sk-cube{width:33%;height:33%;float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}div.sk-cube1{animation-delay:.2s}div.sk-cube2{animation-delay:.3s}div.sk-cube3{animation-delay:.4s}div.sk-cube4{animation-delay:.1s}div.sk-cube5{animation-delay:.2s}div.sk-cube6{animation-delay:.3s}div.sk-cube7{animation-delay:0s}div.sk-cube8{animation-delay:.1s}div.sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: SpinnerService }]; }, propDecorators: { loadingProp: [{
+                type: Input,
+                args: ['waitingFor']
+            }] } });
+
+class PagerComponent extends OdeComponent {
+    constructor(injector, bundles) {
+        super(injector);
+        this.bundles = bundles;
+        this.offsetChange = new EventEmitter();
+        this.translate = (...args) => this.bundles.translate(...args);
+    }
+    ngOnInit() { }
+    previousPage() {
+        if (this.offset - this.limit >= 0) {
+            this.offset = this.offset - this.limit;
+        }
+        else {
+            this.offset = 0;
+        }
+        this.offsetChange.emit(this.offset);
+    }
+    nextPage() {
+        if (this.offset + this.limit <= this.total) {
+            this.offset = this.offset + this.limit;
+        }
+        this.offsetChange.emit(this.offset);
+    }
+    offsetLimit() {
+        return this.offset + this.limit < this.total ?
+            this.offset + this.limit : this.total;
+    }
+}
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PagerComponent, deps: [{ token: i0.Injector }, { token: i2$1.BundlesService }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: PagerComponent, selector: "ode-pager", inputs: { limit: "limit", offset: "offset", total: "total" }, outputs: { offsetChange: "offsetChange" }, usesInheritance: true, ngImport: i0, template: "<strong><s5l>pager.page</s5l></strong>\n<a class=\"button\" [ngClass]=\"{'is-hidden': offset - limit < 0}\" (click)=\"previousPage()\">\n  <i class=\"fa fa-chevron-left\"></i> <s5l>pager.page.previous</s5l>\n</a>\n<span>{{\"pager.position\" | translate : {offset : offset+1,  offsetLimit:offsetLimit(), total:total} }}</span>\n<a class=\"button\" [ngClass]=\"{'is-hidden': offset + limit  > total}\" (click)=\"nextPage()\">\n  <s5l>pager.page.next</s5l> <i class=\"fa fa-chevron-right\"></i>\n</a>\n", styles: ["i{cursor:pointer;padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.S5lComponent, selector: "s5l", inputs: ["s5l-params", "s5l-lang"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-pager', changeDetection: ChangeDetectionStrategy.OnPush, template: "<strong><s5l>pager.page</s5l></strong>\n<a class=\"button\" [ngClass]=\"{'is-hidden': offset - limit < 0}\" (click)=\"previousPage()\">\n  <i class=\"fa fa-chevron-left\"></i> <s5l>pager.page.previous</s5l>\n</a>\n<span>{{\"pager.position\" | translate : {offset : offset+1,  offsetLimit:offsetLimit(), total:total} }}</span>\n<a class=\"button\" [ngClass]=\"{'is-hidden': offset + limit  > total}\" (click)=\"nextPage()\">\n  <s5l>pager.page.next</s5l> <i class=\"fa fa-chevron-right\"></i>\n</a>\n", styles: ["i{cursor:pointer;padding:0 2px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i2$1.BundlesService }]; }, propDecorators: { limit: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], offsetChange: [{
+                type: Output
+            }], total: [{
+                type: Input
+            }] } });
+
+class TooltipComponent extends OdeComponent {
+    constructor(injector, ref, renderer) {
+        super(injector);
+        this.ref = ref;
+        this.renderer = renderer;
+        this.position = 'bottom';
+        this.offset = 5;
+        this.onTransitionEnd = () => {
+            if (this.tooltipElt && !this.tooltipElt.classList.contains('shown')) {
+                this.tooltipElt.parentNode.removeChild(this.tooltipElt);
+                this.tooltipElt = null;
+            }
+        };
+    }
+    onMouseEnter() {
+        const r = this.renderer;
+        if (!this.tooltipElt) {
+            this.tooltipElt = this.renderer.createElement('div');
+            let tooltipText = this.renderer.createText(this.tooltipContents);
+            this.renderer.appendChild(this.tooltipElt, tooltipText);
+            this.renderer.addClass(this.tooltipElt, "tooltip");
+            this.renderer.appendChild(document.getElementsByTagName('body')[0], this.tooltipElt);
+        }
+        const tip = this.tooltipElt;
+        const pos = this.getPosition(this.ref.nativeElement, tip, this.position);
+        for (const prop in pos) {
+            this.renderer.setStyle(tip, prop, pos[prop] + 'px');
+        }
+        this.renderer.addClass(tip, 'shown');
+    }
+    onMouseLeave() {
+        const wait = this.tooltipElt &&
+            parseFloat(window.getComputedStyle(this.tooltipElt)['transition-duration']);
+        this.renderer.removeClass(this.tooltipElt, 'shown');
+        setTimeout(this.onTransitionEnd, wait * 1000);
+    }
+    getPosition(elt, tip, pos) {
+        const rect = {
+            top: elt.getBoundingClientRect().top + window.scrollY,
+            left: elt.getBoundingClientRect().left + window.scrollX
+        };
+        let left, top;
+        switch (pos) {
+            case 'top':
+                top = rect.top - tip.offsetHeight - this.offset;
+                left = rect.left + elt.offsetWidth / 2 - tip.offsetWidth / 2;
+                break;
+            case 'left':
+                top = rect.top + elt.offsetHeight / 2 - tip.offsetHeight / 2;
+                left = rect.left - tip.offsetWidth - this.offset;
+                break;
+            case 'right':
+                top = rect.top + elt.offsetHeight / 2 - tip.offsetHeight / 2;
+                left = rect.left + elt.offsetWidth + this.offset;
+                break;
+            case 'bottom':
+            default:
+                top = rect.top + elt.offsetHeight + this.offset;
+                left = rect.left + elt.offsetWidth / 2 - tip.offsetWidth / 2;
+        }
+        if (left < 0) {
+            left = rect.left + elt.offsetWidth + this.offset;
+        }
+        if (top < 0) {
+            top = rect.top + elt.offsetHeight + this.offset;
+        }
+        if (left + tip.offsetWidth >= window.pageXOffset + window.innerWidth) {
+            left = rect.left - tip.offsetWidth - this.offset;
+        }
+        if (top - tip.offsetHeight >= window.pageYOffset + window.innerHeight) {
+            top = rect.top - tip.offsetHeight - this.offset;
+        }
+        return {
+            top: top < 5 ? 5 : top,
+            left: left < 5 ? 5 : left
+        };
+    }
+    ngOnDestroy() {
+        if (this.tooltipElt) {
+            this.tooltipElt.parentNode.removeChild(this.tooltipElt);
+            this.tooltipElt = null;
+        }
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TooltipComponent, selector: "[tooltip]", inputs: { tooltipContents: ["tooltip", "tooltipContents"], position: "position", offset: "offset" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["body>div.tooltip{position:absolute;z-index:100}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[tooltip]', template: `<ng-content></ng-content>`, host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()'
+                    }, styles: ["body>div.tooltip{position:absolute;z-index:100}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipContents: [{
+                type: Input,
+                args: ['tooltip']
+            }], position: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }] } });
+
+class DragAndDropFilesDirective {
+    constructor(inputFileService) {
+        this.inputFileService = inputFileService;
+        this.allowedExtensions = [];
+        this.maxFilesNumber = 1;
+        this.dragAndDrop = new EventEmitter();
+        this.invalidDragAndDrop = new EventEmitter();
+        this.backgroundColor = '#fafafa';
+        this.borderColor = '#ddd';
+    }
+    onDragOver(evt) {
+        if (!this.disabled) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.highlightColors();
+        }
+    }
+    onDragLeave(evt) {
+        if (!this.disabled) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.resetColors();
+        }
+    }
+    onDrop(event) {
+        if (!this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.dataTransfer) {
+                this.inputFileService
+                    .validateFiles(event.dataTransfer.files, this.maxFilesNumber, this.allowedExtensions)
+                    .subscribe(files => this.dragAndDrop.emit(files), error => this.invalidDragAndDrop.emit(error));
+            }
+            this.resetColors();
+        }
+    }
+    resetColors() {
+        this.backgroundColor = '#fafafa';
+        this.borderColor = '#ddd';
+    }
+    highlightColors() {
+        this.backgroundColor = '#ffd1b6';
+        this.borderColor = '#ff8352';
+    }
+}
+DragAndDropFilesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DragAndDropFilesDirective, deps: [{ token: InputFileService }], target: i0.ɵɵFactoryTarget.Directive });
+DragAndDropFilesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: DragAndDropFilesDirective, selector: "[dragAndDropFiles]", inputs: { allowedExtensions: "allowedExtensions", maxFilesNumber: "maxFilesNumber", disabled: "disabled" }, outputs: { dragAndDrop: "dragAndDrop", invalidDragAndDrop: "invalidDragAndDrop" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "style.background": "this.backgroundColor", "style.border-color": "this.borderColor" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DragAndDropFilesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dragAndDropFiles]'
+                }]
+        }], ctorParameters: function () { return [{ type: InputFileService }]; }, propDecorators: { allowedExtensions: [{
+                type: Input
+            }], maxFilesNumber: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dragAndDrop: [{
+                type: Output
+            }], invalidDragAndDrop: [{
+                type: Output
+            }], backgroundColor: [{
+                type: HostBinding,
+                args: ['style.background']
+            }], borderColor: [{
+                type: HostBinding,
+                args: ['style.border-color']
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class UploadFilesComponent extends OdeComponent {
+    constructor(injector, inputFileService) {
+        super(injector);
+        this.inputFileService = inputFileService;
+        this.upload = new EventEmitter();
+        this.invalidUpload = new EventEmitter();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.multiple = this.maxFilesNumber > 1;
+    }
+    onChange($event) {
+        if ($event.target) {
+            this.inputFileService
+                .validateFiles($event.target.files, this.maxFilesNumber, this.allowedExtensions)
+                .subscribe(files => this.upload.emit(files), error => this.invalidUpload.emit(error));
+        }
+    }
+    onClickDropzoneInput($event) {
+        $event.stopPropagation();
+        const inputFileElement = this.inputFileRef.nativeElement;
+        inputFileElement.click();
+    }
+    onDragAndDrop($event) {
+        this.upload.emit($event);
+    }
+    onInvalidDragAndDrop($event) {
+        this.invalidUpload.emit($event);
+    }
+}
+UploadFilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: UploadFilesComponent, deps: [{ token: i0.Injector }, { token: InputFileService }], target: i0.ɵɵFactoryTarget.Component });
+UploadFilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: UploadFilesComponent, selector: "ode-upload-files", inputs: { fileSrc: "fileSrc", allowedExtensions: "allowedExtensions", maxFilesNumber: "maxFilesNumber", disabled: "disabled" }, outputs: { upload: "upload", invalidUpload: "invalidUpload" }, viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"upload-files-dropzone\"\n     dragAndDropFiles\n     [allowedExtensions]=\"allowedExtensions\"\n     [maxFilesNumber]=\"maxFilesNumber\"\n     [disabled]=\"disabled\"\n     (dragAndDrop)=\"onDragAndDrop($event)\"\n     (invalidDragAndDrop)=\"onInvalidDragAndDrop($event)\">\n  <div *ngIf=\"fileSrc\" class=\"upload-files-dropzone-image\">\n    <img src=\"{{ fileSrc }}\"\n         *ngIf=\"inputFileService.isSrcExternalUrl(fileSrc)\"\n         class=\"upload-files-dropzone-image__image\"/>\n    <img src=\"{{ fileSrc }}\"\n         *ngIf=\"inputFileService.isSrcWorkspace(fileSrc)\"\n         class=\"upload-files-dropzone-image__image\"/>\n    <i class=\"upload-files-dropzone-image__icon {{ fileSrc }}\"\n       *ngIf=\"!inputFileService.isSrcExternalUrl(fileSrc)\n                        && !inputFileService.isSrcWorkspace(fileSrc)\"></i>\n  </div>\n\n  <div class=\"upload-files-dropzone-input\" *ngIf=\"!disabled\">\n    <button class=\"confirm upload-files-dropzone-input__button\"\n            (click)=\"onClickDropzoneInput($event)\">\n      <s5l>ux.upload-files.button.label</s5l>\n    </button>\n    <i class=\"upload-files-dropzone-input__icon fa fa-cloud-upload fa-2x\">\n    </i>\n    <span class=\"upload-files-dropzone-input__help\">\n                    <s5l>ux.upload-files.button.help</s5l>\n                </span>\n    <input *ngIf=\"multiple === true else singleFileInput\"\n           class=\"upload-files-dropzone-input__input\"\n           type=\"file\"\n           (change)=\"onChange($event)\"\n           multiple\n           #inputFileRef>\n    <ng-template #singleFileInput>\n      <input class=\"upload-files-dropzone-input__input\"\n             type=\"file\"\n             (change)=\"onChange($event)\"\n             #inputFileRef>\n    </ng-template>\n  </div>\n</div>\n", styles: [".upload-files-dropzone{display:flex;align-items:center;justify-content:center;min-height:150px;margin:20px;padding:20px 10px;background-color:#fafafa;border:2px dashed #ddd;border-radius:5px}.upload-files-dropzone-image{display:flex;align-items:center;justify-content:center;width:120px;height:120px}.upload-files-dropzone-image__image{max-height:90%;max-width:90%}.upload-files-dropzone-image__icon{font-size:5em}.upload-files-dropzone-input{display:flex;align-items:center;background-color:#fff;border-radius:5px;box-shadow:1px 1px 5px #0000004d;padding:10px;margin:0 40px 0 20px}.upload-files-dropzone-input__input{display:none}.upload-files-dropzone-input__icon{margin-left:10px}.upload-files-dropzone-input__help{margin-left:10px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.S5lComponent, selector: "s5l", inputs: ["s5l-params", "s5l-lang"] }, { kind: "directive", type: DragAndDropFilesDirective, selector: "[dragAndDropFiles]", inputs: ["allowedExtensions", "maxFilesNumber", "disabled"], outputs: ["dragAndDrop", "invalidDragAndDrop"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: UploadFilesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-upload-files', template: "<div class=\"upload-files-dropzone\"\n     dragAndDropFiles\n     [allowedExtensions]=\"allowedExtensions\"\n     [maxFilesNumber]=\"maxFilesNumber\"\n     [disabled]=\"disabled\"\n     (dragAndDrop)=\"onDragAndDrop($event)\"\n     (invalidDragAndDrop)=\"onInvalidDragAndDrop($event)\">\n  <div *ngIf=\"fileSrc\" class=\"upload-files-dropzone-image\">\n    <img src=\"{{ fileSrc }}\"\n         *ngIf=\"inputFileService.isSrcExternalUrl(fileSrc)\"\n         class=\"upload-files-dropzone-image__image\"/>\n    <img src=\"{{ fileSrc }}\"\n         *ngIf=\"inputFileService.isSrcWorkspace(fileSrc)\"\n         class=\"upload-files-dropzone-image__image\"/>\n    <i class=\"upload-files-dropzone-image__icon {{ fileSrc }}\"\n       *ngIf=\"!inputFileService.isSrcExternalUrl(fileSrc)\n                        && !inputFileService.isSrcWorkspace(fileSrc)\"></i>\n  </div>\n\n  <div class=\"upload-files-dropzone-input\" *ngIf=\"!disabled\">\n    <button class=\"confirm upload-files-dropzone-input__button\"\n            (click)=\"onClickDropzoneInput($event)\">\n      <s5l>ux.upload-files.button.label</s5l>\n    </button>\n    <i class=\"upload-files-dropzone-input__icon fa fa-cloud-upload fa-2x\">\n    </i>\n    <span class=\"upload-files-dropzone-input__help\">\n                    <s5l>ux.upload-files.button.help</s5l>\n                </span>\n    <input *ngIf=\"multiple === true else singleFileInput\"\n           class=\"upload-files-dropzone-input__input\"\n           type=\"file\"\n           (change)=\"onChange($event)\"\n           multiple\n           #inputFileRef>\n    <ng-template #singleFileInput>\n      <input class=\"upload-files-dropzone-input__input\"\n             type=\"file\"\n             (change)=\"onChange($event)\"\n             #inputFileRef>\n    </ng-template>\n  </div>\n</div>\n", styles: [".upload-files-dropzone{display:flex;align-items:center;justify-content:center;min-height:150px;margin:20px;padding:20px 10px;background-color:#fafafa;border:2px dashed #ddd;border-radius:5px}.upload-files-dropzone-image{display:flex;align-items:center;justify-content:center;width:120px;height:120px}.upload-files-dropzone-image__image{max-height:90%;max-width:90%}.upload-files-dropzone-image__icon{font-size:5em}.upload-files-dropzone-input{display:flex;align-items:center;background-color:#fff;border-radius:5px;box-shadow:1px 1px 5px #0000004d;padding:10px;margin:0 40px 0 20px}.upload-files-dropzone-input__input{display:none}.upload-files-dropzone-input__icon{margin-left:10px}.upload-files-dropzone-input__help{margin-left:10px;font-style:italic}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: InputFileService }]; }, propDecorators: { fileSrc: [{
+                type: Input
+            }], allowedExtensions: [{
+                type: Input
+            }], maxFilesNumber: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], upload: [{
+                type: Output
+            }], invalidUpload: [{
+                type: Output
+            }], inputFileRef: [{
+                type: ViewChild,
+                args: ['inputFileRef']
+            }] } });
+
+class SimpleSelectComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.selectChange = new EventEmitter();
+    }
+}
+SimpleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SimpleSelectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: SimpleSelectComponent, selector: "ode-simple-select", inputs: { selected: "selected", model: "model", options: "options", ignoreOption: "ignoreOption" }, outputs: { selectChange: "selectChange" }, usesInheritance: true, ngImport: i0, template: "<select [ngModel]=\"model[selected]\" (ngModelChange)=\"model[selected] = $event; selectChange.emit($event)\">\n\n<option *ngIf=\"ignoreOption.length > 0 \" [ngValue]=\"ignoreOption[0].value\">\n                                                                          {{ignoreOption[0].label}}\n</option>\n<option *ngFor=\"let option of options | orderBy: 'label'\" [ngValue]=\"option.value\">\n                                                                                  {{option.label}}\n</option>\n</select>\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: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: OrderPipe, name: "orderBy" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SimpleSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select [ngModel]=\"model[selected]\" (ngModelChange)=\"model[selected] = $event; selectChange.emit($event)\">\n\n<option *ngIf=\"ignoreOption.length > 0 \" [ngValue]=\"ignoreOption[0].value\">\n                                                                          {{ignoreOption[0].label}}\n</option>\n<option *ngFor=\"let option of options | orderBy: 'label'\" [ngValue]=\"option.value\">\n                                                                                  {{option.label}}\n</option>\n</select>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { selected: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], ignoreOption: [{
+                type: Input
+            }], selectChange: [{
+                type: Output
+            }] } });
+
+class StepComponent {
+    constructor() {
+        this.hasError = false;
+        this.isFinished = false;
+    }
+}
+StepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: StepComponent, selector: "ode-step", inputs: { name: "name", isActived: "isActived" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:none;overflow:auto;padding:1em}:host.active{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: StepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-step', template: `<ng-content></ng-content>`, styles: [":host{display:none;overflow:auto;padding:1em}:host.active{display:block}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], isActived: [{
+                type: Input
+            }] } });
+class WizardComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.cancel = new EventEmitter();
+        this.previousStep = new EventEmitter();
+        this.nextStep = new EventEmitter();
+        this.canDoNext = true;
+        this.activeStep = 0;
+    }
+    doCancel() {
+        this.activeStep = 0;
+        this.steps.forEach((step, index) => {
+            index === 0 ? step.isActived = true : step.isActived = false;
+        });
+        this.canDoNext = true;
+    }
+    onPreviousStep() {
+        this.previousStep.emit(this.activeStep);
+    }
+    doPreviousStep() {
+        if (this.activeStep > 0) {
+            this.steps.toArray()[this.activeStep].isActived = false;
+            this.steps.toArray()[this.activeStep - 1].isActived = true;
+            this.activeStep--;
+            this.canDoNext = true;
+        }
+    }
+    onNextStep() {
+        this.nextStep.emit(this.activeStep);
+    }
+    doNextStep(error) {
+        if (this.activeStep < this.steps.length - 1) {
+            this.canDoNext = !error;
+            this.steps.toArray()[this.activeStep].isActived = false;
+            this.steps.toArray()[this.activeStep + 1].isActived = true;
+            this.activeStep++;
+        }
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this.steps.length === 0) {
+            throw new Error('<wizard> component musts nest at least 1 <step> compoent');
+        }
+    }
+}
+WizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: WizardComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+WizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: WizardComponent, selector: "ode-wizard", outputs: { cancel: "cancel", previousStep: "previousStep", nextStep: "nextStep" }, queries: [{ propertyName: "steps", predicate: StepComponent }], usesInheritance: true, ngImport: i0, template: `
+        <div class="wizard">
+            <nav class="wizard-menu">
+                <h2 class="wizard-menu__title"><s5l>wizard.steps</s5l></h2>
+                <ul>
+                    <li *ngFor="let step of steps"
+                        [class.active]="step.isActived"
+                        [class.finish]="step.isFinished">
+                        {{step.name}}
+                    </li>
+                </ul>
+            </nav>
+            <section class="wizard-content">
+                <ng-content select="ode-step"></ng-content>
+                <nav class="wizard-content-nav" *ngIf="activeStep < steps.length - 1">
+                    <button class="wizard-content-nav__button cancel"
+                        (click)="cancel.emit()"
+                        [title]="'cancel' | translate">
+                        {{ 'cancel' | translate }}
+                    </button>
+                    <button class="wizard-content-nav__button previous"
+                        (click)="onPreviousStep()"
+                        *ngIf="activeStep > 0"
+                        [title]="'previous' | translate">
+                        {{ 'wizard.previous' | translate }}
+                    </button>
+                    <button class="wizard-content-nav__button wizard-content-nav__button--next"
+                        (click)="onNextStep()"
+                        [disabled]="!canDoNext"
+                        [title]="'next' | translate">
+                        {{ 'wizard.next' | translate }}
+                    </button>
+                </nav>
+            </section>
+        </div>
+    `, isInline: true, styles: [".wizard{display:flex}.wizard-menu{background:#5b6472;flex:0 0 240px}.wizard-menu ul{padding:10px 30px}.wizard-menu ul li{color:#eaedf2;list-style-type:none;padding:5px 0}.wizard-menu ul li.active,.wizard-menu ul li.finish{font-weight:700;color:#fff}.wizard-menu ul li.finish{color:green}.wizard-menu__title{font-weight:700;font-size:1.2em;color:#fff;padding:25px 0 0 10px}.wizard-content{background:#fff;flex:auto}.wizard-content-nav{text-align:right}.wizard-content-nav__button{margin:10px 0}.wizard-content-nav__button--next{margin-right:16px}\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: "component", type: i2$1.S5lComponent, selector: "s5l", inputs: ["s5l-params", "s5l-lang"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: WizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-wizard', template: `
+        <div class="wizard">
+            <nav class="wizard-menu">
+                <h2 class="wizard-menu__title"><s5l>wizard.steps</s5l></h2>
+                <ul>
+                    <li *ngFor="let step of steps"
+                        [class.active]="step.isActived"
+                        [class.finish]="step.isFinished">
+                        {{step.name}}
+                    </li>
+                </ul>
+            </nav>
+            <section class="wizard-content">
+                <ng-content select="ode-step"></ng-content>
+                <nav class="wizard-content-nav" *ngIf="activeStep < steps.length - 1">
+                    <button class="wizard-content-nav__button cancel"
+                        (click)="cancel.emit()"
+                        [title]="'cancel' | translate">
+                        {{ 'cancel' | translate }}
+                    </button>
+                    <button class="wizard-content-nav__button previous"
+                        (click)="onPreviousStep()"
+                        *ngIf="activeStep > 0"
+                        [title]="'previous' | translate">
+                        {{ 'wizard.previous' | translate }}
+                    </button>
+                    <button class="wizard-content-nav__button wizard-content-nav__button--next"
+                        (click)="onNextStep()"
+                        [disabled]="!canDoNext"
+                        [title]="'next' | translate">
+                        {{ 'wizard.next' | translate }}
+                    </button>
+                </nav>
+            </section>
+        </div>
+    `, styles: [".wizard{display:flex}.wizard-menu{background:#5b6472;flex:0 0 240px}.wizard-menu ul{padding:10px 30px}.wizard-menu ul li{color:#eaedf2;list-style-type:none;padding:5px 0}.wizard-menu ul li.active,.wizard-menu ul li.finish{font-weight:700;color:#fff}.wizard-menu ul li.finish{color:green}.wizard-menu__title{font-weight:700;font-size:1.2em;color:#fff;padding:25px 0 0 10px}.wizard-content{background:#fff;flex:auto}.wizard-content-nav{text-align:right}.wizard-content-nav__button{margin:10px 0}.wizard-content-nav__button--next{margin-right:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { cancel: [{
+                type: Output
+            }], previousStep: [{
+                type: Output
+            }], nextStep: [{
+                type: Output
+            }], steps: [{
+                type: ContentChildren,
+                args: [StepComponent]
+            }] } });
+
+/**
+ * DropdownComponent is an alternative to the MonoSelectComponent.
+ * Accept everything inside <ng-content> but should work with <ode-list> component
+ *
+ * Simple Dropdown Component without search:
+ * [isSearchActive] can be set to false to disable search input in <ode-list>
+```
+<ode-dropdown
+    [name]="option_name"
+    [isDropdownOpened]="a_boolean"
+    (onDropdown)="toggle_func"
+  >
+  <ode-list
+    [model]="model"
+    [filters]="filters"
+    (onSelect)="func_to_select_elem($event)"
+    (inputChange)="a_string_for_input_value = $event"
+    noResultsLabel="text_to_display"
+    searchPlaceholder="default_placeholder_text"
+    >
+      <ng-template let-item>
+        <div>{{ item.name }}</div>
+      </ng-template>
+    </ode-list>
+  </ode-dropdown>
+`̀``
+ */
+class DropdownComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.name = '';
+        this.isDropdownOpened = false;
+        this.onDropdown = new EventEmitter();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: DropdownComponent, selector: "ode-dropdown", inputs: { name: "name", isDropdownOpened: "isDropdownOpened" }, outputs: { onDropdown: "onDropdown" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\" [ngClass]=\"isDropdownOpened ? 'open' : ''\">\n  <button (click)=\"onDropdown.emit()\" class=\"dropdown-trigger\">\n    <span class=\"cell-ellipsis\">{{ name }}</span> <i class=\"fonticon arrow-select\"></i>\n  </button>\n  <div class=\"dropdown-list\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".dropdown{position:relative;width:230px;box-sizing:border-box}.dropdown *{box-sizing:border-box}.dropdown-trigger{cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;color:#4a4a4a;text-transform:uppercase;text-align:left;width:100%;border-radius:8px;border:1px solid #7a7a7a;background-color:#fff}.dropdown-trigger>span{display:inline-block;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-trigger i.arrow-select{display:inline-block;float:none!important;padding-left:0;transform:rotate(180deg);transform-origin:center center}.dropdown-trigger:hover{color:#4a4a4a;border-color:#7a7a7a;background-color:#fff}.dropdown-trigger:hover i.arrow-select{color:#4a4a4a!important}.dropdown-list{display:none;position:absolute;overflow:hidden;z-index:2;top:100%;left:0;right:0;width:316px;box-shadow:0 4px 12px #00000026;border-radius:8px;background-color:#fff}.dropdown::ng-deep ode-list li{justify-content:flex-start}.dropdown::ng-deep ode-list input[type=search]{padding:12px 16px}.dropdown.open .dropdown-list{display:block}.dropdown.open i.arrow-select{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-dropdown', template: "<div class=\"dropdown\" [ngClass]=\"isDropdownOpened ? 'open' : ''\">\n  <button (click)=\"onDropdown.emit()\" class=\"dropdown-trigger\">\n    <span class=\"cell-ellipsis\">{{ name }}</span> <i class=\"fonticon arrow-select\"></i>\n  </button>\n  <div class=\"dropdown-list\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".dropdown{position:relative;width:230px;box-sizing:border-box}.dropdown *{box-sizing:border-box}.dropdown-trigger{cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;color:#4a4a4a;text-transform:uppercase;text-align:left;width:100%;border-radius:8px;border:1px solid #7a7a7a;background-color:#fff}.dropdown-trigger>span{display:inline-block;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-trigger i.arrow-select{display:inline-block;float:none!important;padding-left:0;transform:rotate(180deg);transform-origin:center center}.dropdown-trigger:hover{color:#4a4a4a;border-color:#7a7a7a;background-color:#fff}.dropdown-trigger:hover i.arrow-select{color:#4a4a4a!important}.dropdown-list{display:none;position:absolute;overflow:hidden;z-index:2;top:100%;left:0;right:0;width:316px;box-shadow:0 4px 12px #00000026;border-radius:8px;background-color:#fff}.dropdown::ng-deep ode-list li{justify-content:flex-start}.dropdown::ng-deep ode-list input[type=search]{padding:12px 16px}.dropdown.open .dropdown-list{display:block}.dropdown.open i.arrow-select{transform:rotate(0)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { name: [{
+                type: Input
+            }], isDropdownOpened: [{
+                type: Input
+            }], onDropdown: [{
+                type: Output
+            }] } });
+
+/**
+ * Search Toolbar component.
+ * Used within List component, Search Toolbar will display following information:
+ * - Label of the search filter section (example: 'Search by')
+ * - List of search type filters (example: 'Name', 'Email' , ...)
+ * - Number of items returned by the search
+ *
+```
+<ode-search-toolbar
+  [label]="'user.searchType.label'"
+  [searchTypes]="searchTypes"
+  [nbItem]="nbUser || 0"
+  [nbItemLabel]="'list.results.users'"
+  (selectSearchType)="handleSelectSearchType($event)"
+>
+</ode-search-toolbar>
+```
+ */
+class SearchToolbarComponent extends OdeComponent {
+    constructor(injector) {
+        super(injector);
+        this.nbItem = 0;
+        this.selectSearchType = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.searchTypes && this.searchTypes.length > 0) {
+            this.selectedSearchTypeValue = this.searchTypes[0].value;
+        }
+    }
+    handleSearchTypeClick(searchTypeValue) {
+        this.selectedSearchTypeValue = searchTypeValue;
+        this.selectSearchType.emit(searchTypeValue);
+    }
+}
+SearchToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SearchToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SearchToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: SearchToolbarComponent, selector: "ode-search-toolbar", inputs: { label: "label", searchTypes: "searchTypes", nbItem: "nbItem", nbItemLabel: "nbItemLabel" }, outputs: { selectSearchType: "selectSearchType" }, usesInheritance: true, ngImport: i0, template: "<div class=\"search-toolbar\">\n  <div class=\"search-toolbar-label\">\n    <s5l>{{ label }}</s5l>\n    <button\n      *ngFor=\"let searchType of searchTypes\"\n      class=\"button has-left-margin-5\"\n      [ngClass]=\"{\n        'is-selected': searchType.value === selectedSearchTypeValue\n      }\"\n      (click)=\"handleSearchTypeClick(searchType.value)\"\n    >\n      <s5l>{{ searchType.label }}</s5l>\n    </button>\n  </div>\n  <div>\n    <strong class=\"badge\">{{ nbItem }} <s5l>{{ nbItemLabel }}</s5l></strong>\n  </div>\n</div>\n", styles: [".search-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px}.search-toolbar .search-toolbar-label{font-size:.85rem}.search-toolbar .search-toolbar-label .button{padding:4px 12px;border-radius:20px;font-size:12px;border-width:2px;border-color:#ff8d2e}\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: "component", type: i2$1.S5lComponent, selector: "s5l", inputs: ["s5l-params", "s5l-lang"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: SearchToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ode-search-toolbar', template: "<div class=\"search-toolbar\">\n  <div class=\"search-toolbar-label\">\n    <s5l>{{ label }}</s5l>\n    <button\n      *ngFor=\"let searchType of searchTypes\"\n      class=\"button has-left-margin-5\"\n      [ngClass]=\"{\n        'is-selected': searchType.value === selectedSearchTypeValue\n      }\"\n      (click)=\"handleSearchTypeClick(searchType.value)\"\n    >\n      <s5l>{{ searchType.label }}</s5l>\n    </button>\n  </div>\n  <div>\n    <strong class=\"badge\">{{ nbItem }} <s5l>{{ nbItemLabel }}</s5l></strong>\n  </div>\n</div>\n", styles: [".search-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px}.search-toolbar .search-toolbar-label{font-size:.85rem}.search-toolbar .search-toolbar-label .button{padding:4px 12px;border-radius:20px;font-size:12px;border-width:2px;border-color:#ff8d2e}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { label: [{
+                type: Input
+            }], searchTypes: [{
+                type: Input
+            }], nbItem: [{
+                type: Input
+            }], nbItemLabel: [{
+                type: Input
+            }], selectSearchType: [{
+                type: Output
+            }] } });
+
+class AnchorDirective {
+    constructor() {
+        this.offset = 50;
+    }
+    onClick() {
+        const element = document.getElementById(this.anchor);
+        window.scrollBy(0, element.getBoundingClientRect().top - this.offset);
+    }
+}
+AnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: AnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: AnchorDirective, selector: "[anchor]", inputs: { anchor: "anchor", offset: "offset" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: AnchorDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[anchor]' }]
+        }], propDecorators: { anchor: [{
+                type: Input,
+                args: ['anchor']
+            }], offset: [{
+                type: Input,
+                args: ['offset']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DynamicTemplateDirective {
+    constructor(elementRef, viewContainer, compiler, dynamicModuleImports) {
+        this.elementRef = elementRef;
+        this.viewContainer = viewContainer;
+        this.compiler = compiler;
+        this.dynamicModuleImports = dynamicModuleImports;
+        this._html = '';
+        this._selector = 'dynamic-view';
+    }
+    set templateContents(html) {
+        if (html) {
+            this._html = html;
+            const cmpType = this._createDynamicComponent();
+            const moduleType = this._createDynamicModule(cmpType);
+            const injector = Injector.create({
+                providers: [],
+                parent: this.viewContainer.parentInjector,
+            });
+            this.compiler.compileModuleAndAllComponentsAsync(moduleType)
+                .then(factory => {
+                let cmpFactory;
+                for (let i = factory.componentFactories.length - 1; i >= 0; i--) {
+                    if (factory.componentFactories[i].selector === this._selector) {
+                        cmpFactory = factory.componentFactories[i];
+                        break;
+                    }
+                }
+                return cmpFactory;
+            })
+                .then(cmpFactory => {
+                if (cmpFactory && this.viewContainer) {
+                    this.viewContainer.clear();
+                    this.viewContainer.createComponent(cmpFactory, 0, injector);
+                }
+            });
+        }
+        else {
+            this._html = '';
+            this.viewContainer.clear();
+        }
+    }
+    _createDynamicComponent() {
+        const metadata = {
+            selector: this._selector,
+            template: this._html,
+            inputs: ['template']
+        };
+        class _cmp_ {
+        }
+        _cmp_.prototype = this.context;
+        return Component(metadata)(_cmp_);
+    }
+    _createDynamicModule(componentType) {
+        class _mod_ {
+        }
+        return NgModule({
+            imports: [
+                CommonModule,
+                ...this.dynamicModuleImports.imports
+            ],
+            declarations: [componentType],
+            providers: []
+        })(_mod_);
+    }
+}
+DynamicTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Compiler }, { token: DynamicModuleImportsService }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: DynamicTemplateDirective, selector: "dynamic-template", inputs: { templateContents: ["template", "templateContents"], context: "context" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DynamicTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dynamic-template'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Compiler }, { type: DynamicModuleImportsService }]; }, propDecorators: { templateContents: [{
+                type: Input,
+                args: ['template']
+            }], context: [{
+                type: Input
+            }] } });
+
+/**
+*
+* see https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
+*/
+class ObjectURLDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    // TODO provide more specific method like createJSON, createCSV, createPDF
+    // to free directive consumer from using Blog API
+    create(blob, filename) {
+        if (this.objectURL !== null) {
+            window.URL.revokeObjectURL(this.objectURL);
+        }
+        this.objectURL = window.URL.createObjectURL(blob);
+        this.elementRef.nativeElement.href = this.objectURL;
+        this.elementRef.nativeElement.download = filename;
+    }
+}
+ObjectURLDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ObjectURLDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ObjectURLDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: ObjectURLDirective, selector: "[object-url]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ObjectURLDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[object-url]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+const UNITS = [
+    { label: "quota.byte", value: 1 },
+    { label: "quota.kilobyte", value: 1024 },
+    { label: "quota.megabyte", value: Math.pow(1024, 2) },
+    { label: "quota.gigabyte", value: Math.pow(1024, 3) }
+];
+function toDecimal(value, decimal) {
+    return Math.round(value * Math.pow(10, decimal)) / Math.pow(10, decimal);
+}
+function getUnit(bytes) {
+    let unit = 0;
+    let finalValue = bytes;
+    while (finalValue >= 1024 && unit < 3) {
+        finalValue = finalValue / 1024;
+        unit++;
+    }
+    return UNITS[unit];
+}
+
+class BytesPipe {
+    transform(value, unit, decimal) {
+        if (decimal) {
+            return toDecimal((value / unit), decimal);
+        }
+        return Math.round(value / unit);
+    }
+}
+BytesPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BytesPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: BytesPipe, name: "bytes" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BytesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bytes'
+                }]
+        }] });
+
+class KeysPipe {
+    transform(obj, args) {
+        const keys = [];
+        for (const key in obj) {
+            if (key) {
+                keys.push(key);
+            }
+        }
+        return keys;
+    }
+}
+KeysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+KeysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: KeysPipe, name: "keys" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: KeysPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'keys' }]
+        }] });
+
+class LimitPipe {
+    transform(array, limit, offset = 0) {
+        return array.slice(offset, limit);
+    }
+}
+LimitPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LimitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LimitPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: LimitPipe, name: "limit", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LimitPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'limit',
+                    pure: false
+                }]
+        }] });
+
+class LocalizedDatePipe {
+    constructor(bundlesService) {
+        this.bundlesService = bundlesService;
+    }
+    transform(value, pattern = 'mediumDate') {
+        const datePipe = new DatePipe(this.bundlesService.currentLanguage);
+        return datePipe.transform(value, pattern);
+    }
+}
+LocalizedDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LocalizedDatePipe, deps: [{ token: i2$1.BundlesService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: LocalizedDatePipe, name: "localizedDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LocalizedDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'localizedDate',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i2$1.BundlesService }]; } });
+
+class LengthPipe {
+    transform(source) {
+        return source.length;
+    }
+}
+LengthPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LengthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LengthPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: LengthPipe, name: "length", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: LengthPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'length',
+                    pure: false
+                }]
+        }] });
+
+class ReplacePipe {
+    transform(value, strToReplace, replacementStr) {
+        if (!value || !strToReplace || !replacementStr) {
+            return value;
+        }
+        return value.replace(new RegExp(this.escapeStr(strToReplace), 'g'), '' + replacementStr);
+    }
+    escapeStr(str) {
+        return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+    }
+}
+ReplacePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ReplacePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: ReplacePipe, name: "replace" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ReplacePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'replace' }]
+        }] });
+
+function trim(text) {
+    if (text && text.length > 0) {
+        return text.trim();
+    }
+    return text;
+}
+function standardise(str) {
+    return removeAccents(str != null ? str : '').toLowerCase().replace('\\s+', ' ');
+}
+const removeAccents = (str) => str.normalize("NFD").replace(/\p{Diacritic}/gu, '');
+
+function getText(el) {
+    return el.nativeElement.textContent.trim();
+}
+function clickOn(el) {
+    return el.triggerEventHandler('click', null);
+}
+
+class NgxOdeUiModule {
+    static forRoot(labelsProvider) {
+        return {
+            ngModule: NgxOdeUiModule,
+            providers: [
+                DynamicModuleImportsService,
+                labelsProvider || LabelsService
+            ]
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: NgxOdeUiModule,
+            providers: []
+        };
+    }
+}
+NgxOdeUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgxOdeUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxOdeUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: NgxOdeUiModule, declarations: [
+        // components
+        DatepickerComponent,
+        FormErrorsComponent,
+        FormFieldComponent,
+        ItemTreeComponent,
+        LightBoxComponent,
+        LightboxConfirmComponent,
+        ListComponent,
+        ListCheckableComponent,
+        MonoSelectComponent,
+        MultiSelectComponent,
+        MultiComboComponent,
+        PanelSectionComponent,
+        PortalComponent,
+        PushPanelComponent,
+        SearchInputComponent,
+        SideLayoutComponent,
+        SidePanelComponent,
+        StepComponent,
+        TooltipComponent,
+        WizardComponent,
+        SimpleSelectComponent,
+        MessageStickerComponent,
+        MessageBoxComponent,
+        UploadFilesComponent,
+        SpinnerCubeComponent,
+        PagerComponent,
+        EllipsisComponent,
+        DropdownComponent,
+        SearchToolbarComponent,
+        // directives
+        AnchorDirective,
+        DynamicTemplateDirective,
+        DynamicComponentDirective,
+        DragAndDropFilesDirective,
+        ObjectURLDirective,
+        // pipes
+        FilterPipe,
+        FlattenObjectArrayPipe,
+        LimitPipe,
+        OrderPipe,
+        StorePipe,
+        LocalizedDatePipe,
+        BytesPipe,
+        KeysPipe,
+        LengthPipe,
+        ReplacePipe], imports: [CommonModule,
+        FormsModule, i2$1.NgxOdeSijilModule, InfiniteScrollModule], exports: [
+        // components
+        DatepickerComponent,
+        FormErrorsComponent,
+        FormFieldComponent,
+        ItemTreeComponent,
+        LightBoxComponent,
+        LightboxConfirmComponent,
+        ListComponent,
+        ListCheckableComponent,
+        MonoSelectComponent,
+        MultiSelectComponent,
+        MultiComboComponent,
+        PanelSectionComponent,
+        PortalComponent,
+        PushPanelComponent,
+        SearchInputComponent,
+        SideLayoutComponent,
+        SidePanelComponent,
+        StepComponent,
+        TooltipComponent,
+        WizardComponent,
+        SimpleSelectComponent,
+        MessageStickerComponent,
+        MessageBoxComponent,
+        UploadFilesComponent,
+        SpinnerCubeComponent,
+        PagerComponent,
+        EllipsisComponent,
+        DropdownComponent,
+        SearchToolbarComponent,
+        // directives
+        AnchorDirective,
+        DynamicTemplateDirective,
+        DynamicComponentDirective,
+        DragAndDropFilesDirective,
+        ObjectURLDirective,
+        // pipes
+        FilterPipe,
+        FlattenObjectArrayPipe,
+        LimitPipe,
+        OrderPipe,
+        StorePipe,
+        LocalizedDatePipe,
+        BytesPipe,
+        KeysPipe,
+        LengthPipe,
+        ReplacePipe] });
+NgxOdeUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgxOdeUiModule, providers: [InputFileService, OrderPipe], imports: [CommonModule,
+        FormsModule,
+        NgxOdeSijilModule.forChild(),
+        InfiniteScrollModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgxOdeUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        // components
+                        DatepickerComponent,
+                        FormErrorsComponent,
+                        FormFieldComponent,
+                        ItemTreeComponent,
+                        LightBoxComponent,
+                        LightboxConfirmComponent,
+                        ListComponent,
+                        ListCheckableComponent,
+                        MonoSelectComponent,
+                        MultiSelectComponent,
+                        MultiComboComponent,
+                        PanelSectionComponent,
+                        PortalComponent,
+                        PushPanelComponent,
+                        SearchInputComponent,
+                        SideLayoutComponent,
+                        SidePanelComponent,
+                        StepComponent,
+                        TooltipComponent,
+                        WizardComponent,
+                        SimpleSelectComponent,
+                        MessageStickerComponent,
+                        MessageBoxComponent,
+                        UploadFilesComponent,
+                        SpinnerCubeComponent,
+                        PagerComponent,
+                        EllipsisComponent,
+                        DropdownComponent,
+                        SearchToolbarComponent,
+                        // directives
+                        AnchorDirective,
+                        DynamicTemplateDirective,
+                        DynamicComponentDirective,
+                        DragAndDropFilesDirective,
+                        ObjectURLDirective,
+                        // pipes
+                        FilterPipe,
+                        FlattenObjectArrayPipe,
+                        LimitPipe,
+                        OrderPipe,
+                        StorePipe,
+                        LocalizedDatePipe,
+                        BytesPipe,
+                        KeysPipe,
+                        LengthPipe,
+                        ReplacePipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        NgxOdeSijilModule.forChild(),
+                        InfiniteScrollModule
+                    ],
+                    exports: [
+                        // components
+                        DatepickerComponent,
+                        FormErrorsComponent,
+                        FormFieldComponent,
+                        ItemTreeComponent,
+                        LightBoxComponent,
+                        LightboxConfirmComponent,
+                        ListComponent,
+                        ListCheckableComponent,
+                        MonoSelectComponent,
+                        MultiSelectComponent,
+                        MultiComboComponent,
+                        PanelSectionComponent,
+                        PortalComponent,
+                        PushPanelComponent,
+                        SearchInputComponent,
+                        SideLayoutComponent,
+                        SidePanelComponent,
+                        StepComponent,
+                        TooltipComponent,
+                        WizardComponent,
+                        SimpleSelectComponent,
+                        MessageStickerComponent,
+                        MessageBoxComponent,
+                        UploadFilesComponent,
+                        SpinnerCubeComponent,
+                        PagerComponent,
+                        EllipsisComponent,
+                        DropdownComponent,
+                        SearchToolbarComponent,
+                        // directives
+                        AnchorDirective,
+                        DynamicTemplateDirective,
+                        DynamicComponentDirective,
+                        DragAndDropFilesDirective,
+                        ObjectURLDirective,
+                        // pipes
+                        FilterPipe,
+                        FlattenObjectArrayPipe,
+                        LimitPipe,
+                        OrderPipe,
+                        StorePipe,
+                        LocalizedDatePipe,
+                        BytesPipe,
+                        KeysPipe,
+                        LengthPipe,
+                        ReplacePipe
+                    ],
+                    providers: [InputFileService, OrderPipe]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-ode-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnchorDirective, BytesPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, ComponentDescriptor, DatepickerComponent, DragAndDropFilesDirective, DropdownComponent, DynamicComponentDirective, DynamicModuleImportsService, DynamicTemplateDirective, EllipsisComponent, FilterPipe, FlattenObjectArrayPipe, FormErrorsComponent, FormFieldComponent, InputFileService, ItemTreeComponent, KeysPipe, LabelsService, LengthPipe, LightBoxComponent, LightboxConfirmComponent, LimitPipe, ListCheckableComponent, ListComponent, LocalizedDatePipe, MessageBoxComponent, MessageStickerComponent, MonoSelectComponent, MultiComboComponent, MultiSelectComponent, NgxOdeUiModule, ObjectURLDirective, OrderPipe, PagerComponent, PanelSectionComponent, PortalComponent, PushPanelComponent, ReplacePipe, SearchInputComponent, SearchToolbarComponent, SideLayoutComponent, SidePanelComponent, SimpleSelectComponent, SpinnerCubeComponent, SpinnerService, StepComponent, StorePipe, TooltipComponent, UNITS, UploadFilesComponent, WizardComponent, clickOn, getText, getUnit, icons, removeAccents, standardise, toDecimal, trim };
+//# sourceMappingURL=ngx-ode-ui.mjs.map