@acpaas-ui/ngx-forms 5.3.0 → 6.0.0-beta.0

package/fesm2015/acpaas-ui-ngx-forms.mjs

@@ -0,0 +1,2591 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, NgModule, Injectable, EventEmitter, TemplateRef, forwardRef, Component, Output, ViewChild, ContentChild, InjectionToken, ChangeDetectionStrategy, Inject, HostBinding, HostListener } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import * as i4 from '@acpaas-ui/ngx-flyout';
+import { FlyoutDirective, FlyoutZoneDirective, FlyoutModule, FlyoutSize } from '@acpaas-ui/ngx-flyout';
+import * as i5 from '@acpaas-ui/ngx-selectable-list';
+import { SelectableListModule } from '@acpaas-ui/ngx-selectable-list';
+import Inputmask from 'inputmask';
+import { get, isEqual, debounce } from 'lodash-es';
+import { Subject, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DateHelper } from '@acpaas-ui/js-date-utils';
+import * as i1$2 from '@acpaas-ui/ngx-calendar';
+import { CALENDAR_DEFAULT_MONTH_LABELS, CALENDAR_DEFAULT_WEEKDAY_LABELS, CALENDAR_MONTH_LABELS, CALENDAR_WEEKDAY_LABELS, CalendarModule } from '@acpaas-ui/ngx-calendar';
+import { IntervalBuilder } from '@acpaas-ui/ngx-utils';
+import * as i4$1 from '@acpaas-ui/ngx-icon';
+import { IconModule } from '@acpaas-ui/ngx-icon';
+import * as i2 from '@acpaas-ui/ngx-progress-bar';
+import { ProgressBarModule } from '@acpaas-ui/ngx-progress-bar';
+
+class MaskDirective {
+    constructor(ref) {
+        this.ref = ref;
+    }
+    ngOnChanges() {
+        this.setMask(this.auiMask);
+    }
+    setMask(mask) {
+        Inputmask(mask).mask(this.ref.nativeElement);
+    }
+}
+/** @nocollapse */ MaskDirective.ɵfac = function MaskDirective_Factory(t) { return new (t || MaskDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+/** @nocollapse */ MaskDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MaskDirective, selectors: [["", "auiMask", ""]], inputs: { auiMask: "auiMask" }, features: [i0.ɵɵNgOnChangesFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MaskDirective, [{
+            type: Directive,
+            args: [{
+                    selector: '[auiMask]',
+                }]
+        }], function () { return [{ type: i0.ElementRef }]; }, { auiMask: [{
+                type: Input
+            }] });
+})();
+
+class MaskModule {
+}
+/** @nocollapse */ MaskModule.ɵfac = function MaskModule_Factory(t) { return new (t || MaskModule)(); };
+/** @nocollapse */ MaskModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: MaskModule });
+/** @nocollapse */ MaskModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [CommonModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MaskModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [MaskDirective],
+                    exports: [MaskDirective],
+                    providers: [],
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MaskModule, { declarations: [MaskDirective], imports: [CommonModule], exports: [MaskDirective] }); })();
+
+class SearchService {
+    constructor() {
+        this.matchItemWithSearchString = (item, searchString) => {
+            return String(item).toLowerCase().indexOf(searchString.toLowerCase()) > -1;
+        };
+    }
+    search(data, options = {}) {
+        const query = options.hasOwnProperty('query') ? options.query : '';
+        const minLength = options.hasOwnProperty('minLength') ? options.minLength : 0;
+        const key = options.hasOwnProperty('key') ? options.key : '';
+        if ((!query && options.showAllByDefault) || query.length < minLength) {
+            return [...data];
+        }
+        return [...data].filter(item => {
+            if (key && !item.hasOwnProperty(key)) {
+                return console.error(`"${key}" does not exist in item ${JSON.stringify(item, null, 2)}`);
+            }
+            if (key) {
+                return this.matchItemWithSearchString(item[key], query);
+            }
+            return this.matchItemWithSearchString(item, query);
+        });
+    }
+}
+/** @nocollapse */ SearchService.ɵfac = function SearchService_Factory(t) { return new (t || SearchService)(); };
+/** @nocollapse */ SearchService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: SearchService, factory: SearchService.ɵfac });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchService, [{
+            type: Injectable
+        }], null, null);
+})();
+
+function AutoCompleteComponent_input_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r4 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "input", 4);
+        i0.ɵɵlistener("focus", function AutoCompleteComponent_input_1_Template_input_focus_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onFocus()); })("keyArrowDown", function AutoCompleteComponent_input_1_Template_input_keyArrowDown_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.onKeyArrowDown()); })("keyArrowUp", function AutoCompleteComponent_input_1_Template_input_keyArrowUp_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onKeyArrowUp()); })("keyEnter", function AutoCompleteComponent_input_1_Template_input_keyEnter_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onKeyEnter($event)); })("keyEscape", function AutoCompleteComponent_input_1_Template_input_keyEscape_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onKeyEscape()); })("ngModelChange", function AutoCompleteComponent_input_1_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.query = $event); })("ngModelChange", function AutoCompleteComponent_input_1_Template_input_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.doSearch()); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngModel", ctx_r0.query)("disabled", ctx_r0.isDisabled ? true : null)("id", ctx_r0.id)("placeholder", ctx_r0.placeholder)("autocomplete", ctx_r0.autoComplete);
+    }
+}
+function AutoCompleteComponent_input_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r12 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "input", 5);
+        i0.ɵɵlistener("focus", function AutoCompleteComponent_input_2_Template_input_focus_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onFocus()); })("keyArrowDown", function AutoCompleteComponent_input_2_Template_input_keyArrowDown_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onKeyArrowDown()); })("keyArrowUp", function AutoCompleteComponent_input_2_Template_input_keyArrowUp_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onKeyArrowUp()); })("keyEnter", function AutoCompleteComponent_input_2_Template_input_keyEnter_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onKeyEnter($event)); })("keyEscape", function AutoCompleteComponent_input_2_Template_input_keyEscape_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.onKeyEscape()); })("ngModelChange", function AutoCompleteComponent_input_2_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.query = $event); })("ngModelChange", function AutoCompleteComponent_input_2_Template_input_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.doSearch()); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngModel", ctx_r1.query)("auiMask", ctx_r1.mask)("disabled", ctx_r1.isDisabled ? true : null)("id", ctx_r1.id)("placeholder", ctx_r1.placeholder)("autocomplete", ctx_r1.autoComplete);
+    }
+}
+function AutoCompleteComponent_div_3_span_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span", 10);
+        i0.ɵɵelement(1, "span", 11);
+        i0.ɵɵelementStart(2, "span", 12);
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r19 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate(ctx_r19.loadingText);
+    }
+}
+function AutoCompleteComponent_div_3_span_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span", 13);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r20 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(ctx_r20.searchIncentiveText);
+    }
+}
+function AutoCompleteComponent_div_3_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span", 13);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r21 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(ctx_r21.noResultsText);
+    }
+}
+function AutoCompleteComponent_div_3_aui_selectable_list_4_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r24 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "aui-selectable-list", 14);
+        i0.ɵɵlistener("selected", function AutoCompleteComponent_div_3_aui_selectable_list_4_Template_aui_selectable_list_selected_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r23 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r23.onSelect($event)); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r22 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("index", ctx_r22.index)("itemTemplate", ctx_r22.template)("items", ctx_r22.results)("label", ctx_r22.label)("search", ctx_r22.query);
+    }
+}
+function AutoCompleteComponent_div_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 6);
+        i0.ɵɵtemplate(1, AutoCompleteComponent_div_3_span_1_Template, 4, 1, "span", 7);
+        i0.ɵɵtemplate(2, AutoCompleteComponent_div_3_span_2_Template, 2, 1, "span", 8);
+        i0.ɵɵtemplate(3, AutoCompleteComponent_div_3_span_3_Template, 2, 1, "span", 8);
+        i0.ɵɵtemplate(4, AutoCompleteComponent_div_3_aui_selectable_list_4_Template, 1, 5, "aui-selectable-list", 9);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r2.focused && ctx_r2.loadingText && ctx_r2.searching);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r2.focused && ctx_r2.searchIncentiveText && !ctx_r2.searching && !ctx_r2.query && !ctx_r2.results.length);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r2.focused && ctx_r2.noResultsText && !ctx_r2.searching && ctx_r2.query && !ctx_r2.results.length);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r2.results.length > 0 && !(ctx_r2.focused && ctx_r2.loadingText && ctx_r2.searching));
+    }
+}
+class AutoCompleteComponent {
+    constructor(ref, searchService) {
+        this.ref = ref;
+        this.searchService = searchService;
+        this.results = []; // The values for the selectable list
+        this.data = []; // The values to search in when remote search is disabled
+        this.remote = false; // Disable or enamble remote search
+        this.minCharacters = 0;
+        this.mask = null;
+        this.clearInvalid = false;
+        this.showAllByDefault = false;
+        this.autoComplete = 'off';
+        // Eventemitter for searchvalue (parent object should update the results with this param)
+        this.search = new EventEmitter();
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.select = new EventEmitter();
+        this.query = '';
+        this.index = -1; // index for active element in selectable list, by default -1 (so it starts in the input field)
+        this.selectedItem = null; // keep a backup of the selectedItem
+        this.searching = false; // track remote search state
+        this.focused = false;
+        this.isDisabled = false;
+        this.remoteValue = false;
+        this.updateModel = (_) => { };
+    }
+    // CONTROL_VALUE_ACCESSOR interface
+    writeValue(value = '') {
+        if (this.value) {
+            const selected = this.data.find((item) => item[this.value] === value);
+            if (selected) {
+                return (this.query = selected[this.label]);
+            }
+            if (this.remote && !!value) {
+                this.remoteValue = true;
+            }
+        }
+        this.query = value;
+    }
+    // CONTROL_VALUE_ACCESSOR interface
+    registerOnChange(fn) {
+        this.updateModel = fn;
+    }
+    // CONTROL_VALUE_ACCESSOR interface
+    registerOnTouched() { }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    ngOnInit() {
+        if (Array.isArray(this.data) && this.data.length > 0 && !this.query && this.showAllByDefault) {
+            this.results = [...this.data];
+        }
+    }
+    // OnChanges interface
+    ngOnChanges(changes) {
+        if (!changes) {
+            return;
+        }
+        const newData = get(changes, 'data.currentValue', []);
+        if (!isEqual(newData, get(changes, 'data.previousValue', []))) {
+            if (this.remote) {
+                this.remoteSearch();
+            }
+            else {
+                this.localSearch();
+            }
+        }
+        if (changes.results && changes.results.currentValue) {
+            this.searching = false;
+        }
+    }
+    propagateChange(item) {
+        this.query = item !== null ? (this.label ? item[this.label] : item) : '';
+        this.select.emit(item);
+        if (!item) {
+            return;
+        }
+        const key = this.value ? this.value : this.label ? this.label : null;
+        this.updateModel(key ? item[key] || '' : item);
+        this.selectedItem = item;
+    }
+    /**
+     * triggers on input value change
+     */
+    doSearch() {
+        this.index = -1; // reset index
+        this.searching = true;
+        if (this.remote) {
+            this.search.emit(this.query); // ask for new remote data
+        }
+        else {
+            this.localSearch();
+        }
+        this.openFlyout(); // open the flyout when there is a change
+    }
+    /**
+     * triggers on selectable-list:select -> onClick event in selectable-list
+     */
+    onSelect(item) {
+        this.propagateChange(item);
+        this.closeFlyout(); // Close the flyout manually
+    }
+    onFlyoutClosed() {
+        // there is only 1 result, select it
+        if (this.index >= 0 && this.results.length === 1) {
+            return this.onSelect(this.results[0]);
+        }
+        // there is no query nor selected item, clear the selected item
+        if (!this.query && this.index < 0) {
+            return this.onSelect(null);
+        }
+        // reset the query for an invalid query if clearInvalid is true
+        if (this.clearInvalid && this.query && !this.results.length && this.index < 0) {
+            this.query = this.selectedItem ? (this.label ? this.selectedItem[this.label] : this.selectedItem) : '';
+        }
+    }
+    onKeyArrowDown() {
+        if (this.index < this.results.length - 1) {
+            this.scrollList(1);
+        }
+        this.openFlyout();
+    }
+    onKeyArrowUp() {
+        if (this.index >= 0) {
+            this.scrollList(-1);
+        }
+    }
+    onKeyEnter(event) {
+        event.preventDefault(); // Do not submit form when selecting an item.
+        const query = this.index >= 0 ? this.results[this.index] : this.query;
+        this.propagateChange(query);
+        this.closeFlyout();
+    }
+    onKeyEscape() {
+        this.closeFlyout();
+    }
+    onFocus() {
+        this.focused = true;
+        this.openFlyout();
+    }
+    openFlyout() {
+        if (this.flyout) {
+            this.flyout.open();
+        }
+    }
+    closeFlyout() {
+        if (this.flyout) {
+            this.flyout.close();
+        }
+        this.focused = false;
+    }
+    localSearch() {
+        this.results = this.searchService.search(this.data, {
+            minLength: this.minCharacters,
+            key: this.label,
+            query: this.query,
+            showAllByDefault: this.showAllByDefault,
+        });
+        if (this.results.length === 1 && this.query === this.results[0][this.label]) {
+            this.index = 0;
+        }
+        this.searching = false;
+    }
+    remoteSearch() {
+        if (!this.remoteValue || !this.data) {
+            return;
+        }
+        const selected = this.data.find((item) => {
+            if (this.value) {
+                return item[this.value] === this.query;
+            }
+            return item === this.query;
+        });
+        if (selected) {
+            this.query = this.label ? selected[this.label] : selected;
+        }
+        else {
+            this.query = '';
+        }
+        this.remoteValue = false;
+    }
+    scrollList(factor) {
+        this.index += factor;
+        if (!this.flyoutZone) {
+            return;
+        }
+        const liItems = this.flyoutZone.element.getElementsByTagName('li');
+        const liHeight = liItems[1] ? liItems[1].offsetHeight : liItems[0].offsetHeight;
+        const zoneHeight = this.flyoutZone.element.offsetHeight;
+        const offset = zoneHeight / liHeight / 2;
+        this.flyoutZone.element.scrollTop = this.index * liHeight - offset * liHeight;
+    }
+}
+/** @nocollapse */ AutoCompleteComponent.ɵfac = function AutoCompleteComponent_Factory(t) { return new (t || AutoCompleteComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(SearchService)); };
+/** @nocollapse */ AutoCompleteComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: AutoCompleteComponent, selectors: [["aui-auto-complete"]], contentQueries: function AutoCompleteComponent_ContentQueries(rf, ctx, dirIndex) {
+        if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, TemplateRef, 7);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.template = _t.first);
+        }
+    }, viewQuery: function AutoCompleteComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(FlyoutDirective, 7);
+            i0.ɵɵviewQuery(FlyoutZoneDirective, 7);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flyout = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flyoutZone = _t.first);
+        }
+    }, inputs: { id: "id", placeholder: "placeholder", description: "description", inputLabel: "inputLabel", results: "results", data: "data", remote: "remote", minCharacters: "minCharacters", mask: "mask", clearInvalid: "clearInvalid", searchIncentiveText: "searchIncentiveText", loadingText: "loadingText", noResultsText: "noResultsText", showAllByDefault: "showAllByDefault", autoComplete: "autoComplete", label: "label", value: "value" }, outputs: { search: "search", select: "select" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => AutoCompleteComponent)),
+                multi: true,
+            },
+        ]), i0.ɵɵNgOnChangesFeature], decls: 4, vars: 4, consts: [["aria-haspopup", "listbox", "auiFlyout", "", 1, "m-flyout", "m-flyout--scrollable", "m-flyout--full", "o-auto-complete", 3, "toggleClick", "closed"], ["aria-autocomplete", "list", "auiFlyoutAction", "", "auiSelectableActions", "", "type", "text", "class", "a-input", 3, "ngModel", "disabled", "id", "placeholder", "autocomplete", "focus", "keyArrowDown", "keyArrowUp", "keyEnter", "keyEscape", "ngModelChange", 4, "ngIf"], ["aria-autocomplete", "list", "auiFlyoutAction", "", "auiSelectableActions", "", "type", "text", "class", "a-input", 3, "ngModel", "auiMask", "disabled", "id", "placeholder", "autocomplete", "focus", "keyArrowDown", "keyArrowUp", "keyEnter", "keyEscape", "ngModelChange", 4, "ngIf"], ["auiFlyoutZone", "", 4, "ngIf"], ["aria-autocomplete", "list", "auiFlyoutAction", "", "auiSelectableActions", "", "type", "text", 1, "a-input", 3, "ngModel", "disabled", "id", "placeholder", "autocomplete", "focus", "keyArrowDown", "keyArrowUp", "keyEnter", "keyEscape", "ngModelChange"], ["aria-autocomplete", "list", "auiFlyoutAction", "", "auiSelectableActions", "", "type", "text", 1, "a-input", 3, "ngModel", "auiMask", "disabled", "id", "placeholder", "autocomplete", "focus", "keyArrowDown", "keyArrowUp", "keyEnter", "keyEscape", "ngModelChange"], ["auiFlyoutZone", ""], ["class", "a-spinner a-spinner--s u-margin-xs", "role", "alert", 4, "ngIf"], ["class", "o-auto-complete__info u-text-light u-margin-xs", 4, "ngIf"], [3, "index", "itemTemplate", "items", "label", "search", "selected", 4, "ngIf"], ["role", "alert", 1, "a-spinner", "a-spinner--s", "u-margin-xs"], [1, "a-spinner__circle"], [1, "a-spinner__text"], [1, "o-auto-complete__info", "u-text-light", "u-margin-xs"], [3, "index", "itemTemplate", "items", "label", "search", "selected"]], template: function AutoCompleteComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("closed", function AutoCompleteComponent_Template_div_closed_0_listener() { return ctx.onFlyoutClosed(); });
+            i0.ɵɵtemplate(1, AutoCompleteComponent_input_1_Template, 1, 5, "input", 1);
+            i0.ɵɵtemplate(2, AutoCompleteComponent_input_2_Template, 1, 6, "input", 2);
+            i0.ɵɵtemplate(3, AutoCompleteComponent_div_3_Template, 5, 4, "div", 3);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("toggleClick", false);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.mask);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.mask);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isDisabled);
+        }
+    }, dependencies: [i1.NgIf, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgModel, i4.FlyoutActionDirective, i4.FlyoutZoneDirective, i4.FlyoutDirective, i5.SelectableListComponent, i5.SelectableActionsDirective, MaskDirective], styles: [".o-auto-complete[_ngcontent-%COMP%], .o-auto-complete__info[_ngcontent-%COMP%]{display:block}"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoCompleteComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-auto-complete', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => AutoCompleteComponent)),
+                            multi: true,
+                        },
+                    ], template: "<div\n  (closed)=\"onFlyoutClosed()\"\n  [toggleClick]=\"false\"\n  aria-haspopup=\"listbox\"\n  auiFlyout\n  class=\"m-flyout m-flyout--scrollable m-flyout--full o-auto-complete\"\n>\n  <input\n    (focus)=\"onFocus()\"\n    (keyArrowDown)=\"onKeyArrowDown()\"\n    (keyArrowUp)=\"onKeyArrowUp()\"\n    (keyEnter)=\"onKeyEnter($event)\"\n    (keyEscape)=\"onKeyEscape()\"\n    [(ngModel)]=\"query\"\n    (ngModelChange)=\"doSearch()\"\n    *ngIf=\"!mask\"\n    [disabled]=\"isDisabled ? true : null\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    aria-autocomplete=\"list\"\n    auiFlyoutAction\n    auiSelectableActions\n    [autocomplete]=\"autoComplete\"\n    type=\"text\"\n    class=\"a-input\"\n  />\n  <input\n    (focus)=\"onFocus()\"\n    (keyArrowDown)=\"onKeyArrowDown()\"\n    (keyArrowUp)=\"onKeyArrowUp()\"\n    (keyEnter)=\"onKeyEnter($event)\"\n    (keyEscape)=\"onKeyEscape()\"\n    [(ngModel)]=\"query\"\n    (ngModelChange)=\"doSearch()\"\n    *ngIf=\"mask\"\n    [auiMask]=\"mask\"\n    [disabled]=\"isDisabled ? true : null\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    aria-autocomplete=\"list\"\n    auiFlyoutAction\n    auiSelectableActions\n    [autocomplete]=\"autoComplete\"\n    type=\"text\"\n    class=\"a-input\"\n  />\n  <div *ngIf=\"!isDisabled\" auiFlyoutZone>\n    <span *ngIf=\"focused && loadingText && searching\" class=\"a-spinner a-spinner--s u-margin-xs\" role=\"alert\">\n      <span class=\"a-spinner__circle\"></span>\n      <span class=\"a-spinner__text\">{{ loadingText }}</span>\n    </span>\n    <span\n      *ngIf=\"focused && searchIncentiveText && !searching && !query && !results.length\"\n      class=\"o-auto-complete__info u-text-light u-margin-xs\"\n      >{{ searchIncentiveText }}</span\n    >\n    <span\n      *ngIf=\"focused && noResultsText && !searching && query && !results.length\"\n      class=\"o-auto-complete__info u-text-light u-margin-xs\"\n      >{{ noResultsText }}</span\n    >\n    <aui-selectable-list\n      (selected)=\"onSelect($event)\"\n      *ngIf=\"results.length > 0 && !(focused && loadingText && searching)\"\n      [index]=\"index\"\n      [itemTemplate]=\"template\"\n      [items]=\"results\"\n      [label]=\"label\"\n      [search]=\"query\"\n    ></aui-selectable-list>\n  </div>\n</div>\n", styles: [".o-auto-complete,.o-auto-complete__info{display:block}\n"] }]
+        }], function () { return [{ type: i0.ElementRef }, { type: SearchService }]; }, { id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], inputLabel: [{
+                type: Input
+            }], results: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], remote: [{
+                type: Input
+            }], minCharacters: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], clearInvalid: [{
+                type: Input
+            }], searchIncentiveText: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], noResultsText: [{
+                type: Input
+            }], showAllByDefault: [{
+                type: Input
+            }], autoComplete: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], flyout: [{
+                type: ViewChild,
+                args: [FlyoutDirective, { static: true }]
+            }], flyoutZone: [{
+                type: ViewChild,
+                args: [FlyoutZoneDirective, { static: true }]
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: true }]
+            }] });
+})();
+
+class AutoCompleteModule {
+}
+/** @nocollapse */ AutoCompleteModule.ɵfac = function AutoCompleteModule_Factory(t) { return new (t || AutoCompleteModule)(); };
+/** @nocollapse */ AutoCompleteModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: AutoCompleteModule });
+/** @nocollapse */ AutoCompleteModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [SearchService], imports: [CommonModule, FormsModule, FlyoutModule, SelectableListModule, MaskModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoCompleteModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, FlyoutModule, SelectableListModule, MaskModule],
+                    declarations: [AutoCompleteComponent],
+                    exports: [AutoCompleteComponent],
+                    providers: [SearchService],
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AutoCompleteModule, { declarations: [AutoCompleteComponent], imports: [CommonModule, FormsModule, FlyoutModule, SelectableListModule, MaskModule], exports: [AutoCompleteComponent] }); })();
+
+const DATEPICKER_ERROR_LABELS = new InjectionToken('errorLabels');
+const DATEPICKER_DEFAULT_ERROR_LABELS = {
+    ERRORS_INVALID_DATE: 'INVALID_DATE',
+    ERRORS_INVALID_RANGE: 'INVALID_RANGE',
+};
+const DATEPICKER_SEPARATOR_CHAR = '/';
+const DATEPICKER_DATE_MASK = `99${DATEPICKER_SEPARATOR_CHAR}99${DATEPICKER_SEPARATOR_CHAR}9999`;
+
+function DatepickerComponent_aui_icon_7_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "aui-icon", 7);
+    }
+}
+function DatepickerComponent_ng_container_8_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelement(1, "aui-icon", 8);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("openOnFocus", false);
+    }
+}
+function DatepickerComponent_ng_container_9_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r4 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "div", 9)(2, "aui-calendar", 10);
+        i0.ɵɵlistener("selectDate", function DatepickerComponent_ng_container_9_Template_aui_calendar_selectDate_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDateFromCalendar($event)); });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("range", ctx_r2.range)("selectedDate", ctx_r2.selectedDate)("interval", ctx_r2.interval)("weekdayLabels", ctx_r2.weekdayLabels)("monthLabels", ctx_r2.monthLabels);
+    }
+}
+class DatepickerComponent {
+    constructor(moduleMonthLabels = CALENDAR_DEFAULT_MONTH_LABELS, moduleWeekdayLabels = CALENDAR_DEFAULT_WEEKDAY_LABELS, errorLabels = DATEPICKER_DEFAULT_ERROR_LABELS, calendarService, formBuilder, ref) {
+        this.moduleMonthLabels = moduleMonthLabels;
+        this.moduleWeekdayLabels = moduleWeekdayLabels;
+        this.errorLabels = errorLabels;
+        this.calendarService = calendarService;
+        this.formBuilder = formBuilder;
+        this.ref = ref;
+        this.placeholder = 'dd/mm/yyyy';
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.blur = new EventEmitter();
+        this.dateMask = { mask: DATEPICKER_DATE_MASK, showMaskOnHover: false };
+        this.isDisabled = false;
+        this.componentDestroyed$ = new Subject();
+        this.onChange = () => undefined;
+        this.onTouched = () => undefined;
+    }
+    ngOnInit() {
+        this.weekdayLabels = this.weekdayLabels || this.moduleWeekdayLabels;
+        this.monthLabels = this.monthLabels || this.moduleMonthLabels;
+        this.createInterval();
+        this.formControl = this.formBuilder.control({ value: '', disabled: this.isDisabled });
+        this.formControl.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((value) => {
+            if (value) {
+                const format = value.split(DATEPICKER_SEPARATOR_CHAR).reverse().join('-');
+                const date = DateHelper.parseDate(format, 'yyyy-MM-dd');
+                if (date) {
+                    this.selectedDate = date;
+                    this.onChange(date.toISOString());
+                }
+                else {
+                    // Change value with original value (and not null or '') so we can add an error in the validate function
+                    this.onChange(value);
+                }
+            }
+            else {
+                this.selectedDate = null;
+                this.onChange('');
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.min || changes.max) {
+            this.createInterval();
+        }
+    }
+    ngOnDestroy() {
+        this.componentDestroyed$.next(true);
+        this.componentDestroyed$.complete();
+    }
+    createInterval() {
+        if (!this.min && !this.max) {
+            return;
+        }
+        // Create an interval if min/max is filled in
+        this.interval = IntervalBuilder.dateInterval(this.min ? new Date(this.min) : null, this.max ? new Date(this.max) : null)
+            .not()
+            .build();
+    }
+    writeValue(value) {
+        this.selectedDate =
+            typeof value === 'string'
+                ? this.isISODateFormat(value)
+                    ? new Date(value)
+                    : DateHelper.parseDate(value, 'dd/MM/yyyy')
+                : value;
+        const dateString = this.selectedDate ? this.formatDate(this.selectedDate) : '';
+        this.formControl.setValue(dateString);
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        if (this.formControl) {
+            if (isDisabled && this.formControl.enabled) {
+                this.formControl.disable();
+            }
+            else if (!isDisabled && this.formControl.disabled) {
+                this.formControl.enable();
+            }
+        }
+        this.ref.markForCheck();
+    }
+    selectDateFromCalendar(result) {
+        if (result.complete) {
+            this.formControl.setValue(this.formatDate(result.date));
+            this.flyout.close();
+        }
+    }
+    formatDate(date) {
+        return DateHelper.formatDate(date, 'DD/MM/YYYY', {
+            leadingZero: true,
+            monthLabels: this.monthLabels,
+            weekdayLabels: this.weekdayLabels,
+        });
+    }
+    validate(ctrl) {
+        // no error on empty value (add required validator in app)
+        if (ctrl.value === '' || ctrl.value === null) {
+            return null;
+        }
+        // throw format error if no valid date was provided
+        const date = DateHelper.parseDate(ctrl.value);
+        if (!date) {
+            return {
+                format: this.errorLabels.ERRORS_INVALID_DATE,
+            };
+        }
+        // no error if valid date an no range provided
+        if (!this.range || !this.range.length) {
+            return null;
+        }
+        // throw error when out of range
+        const range = this.calendarService.getRangeForDate(date, this.range);
+        return range.indexOf(date.getDate()) >= 0
+            ? {
+                range: this.errorLabels.ERRORS_INVALID_RANGE,
+            }
+            : null;
+    }
+    handleBlur(e) {
+        this.blur.emit(e);
+        this.onTouched(e);
+    }
+    isISODateFormat(value) {
+        if (typeof value !== 'string') {
+            return false;
+        }
+        return value.match(/\d{4}-\d{2}-\d{2}T.*/);
+    }
+}
+/** @nocollapse */ DatepickerComponent.ɵfac = function DatepickerComponent_Factory(t) { return new (t || DatepickerComponent)(i0.ɵɵdirectiveInject(CALENDAR_MONTH_LABELS), i0.ɵɵdirectiveInject(CALENDAR_WEEKDAY_LABELS), i0.ɵɵdirectiveInject(DATEPICKER_ERROR_LABELS), i0.ɵɵdirectiveInject(i1$2.CalendarService), i0.ɵɵdirectiveInject(i1$1.UntypedFormBuilder), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+/** @nocollapse */ DatepickerComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DatepickerComponent, selectors: [["aui-datepicker"]], viewQuery: function DatepickerComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(FlyoutDirective, 7);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flyout = _t.first);
+        }
+    }, inputs: { id: "id", name: "name", placeholder: "placeholder", label: "label", description: "description", range: "range", min: "min", max: "max", autocomplete: "autocomplete", weekdayLabels: "weekdayLabels", monthLabels: "monthLabels" }, outputs: { blur: "blur" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => DatepickerComponent)),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef((() => DatepickerComponent)),
+                multi: true,
+            },
+        ]), i0.ɵɵNgOnChangesFeature], decls: 10, vars: 11, consts: [["aria-haspopup", "grid", "auiFlyout", "", 1, "aui-datepicker", "a-input", "has-icon-right"], ["for", "id", 1, "a-input__label"], ["id", "id", 1, "a-input__description"], [1, "a-input__wrapper"], ["label", "Pick date", "description", "Description", "type", "text", 3, "autocomplete", "formControl", "id", "name", "placeholder", "blur"], ["name", "ai-calendar-3", "role", "button", "tabindex", "0", 4, "ngIf"], [4, "ngIf"], ["name", "ai-calendar-3", "role", "button", "tabindex", "0"], ["auiFlyoutAction", "", "name", "ai-calendar-3", "className", "is-clickable", "role", "button", "tabindex", "0", 3, "openOnFocus"], ["auiFlyoutZone", "", "role", "dialog", 1, "m-datepicker", "m-datepicker--fixed"], [3, "range", "selectedDate", "interval", "weekdayLabels", "monthLabels", "selectDate"]], template: function DatepickerComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "small", 2);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 3)(6, "input", 4);
+            i0.ɵɵlistener("blur", function DatepickerComponent_Template_input_blur_6_listener($event) { return ctx.handleBlur($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, DatepickerComponent_aui_icon_7_Template, 1, 0, "aui-icon", 5);
+            i0.ɵɵtemplate(8, DatepickerComponent_ng_container_8_Template, 2, 1, "ng-container", 6);
+            i0.ɵɵtemplate(9, DatepickerComponent_ng_container_9_Template, 3, 5, "ng-container", 6);
+            i0.ɵɵelementEnd()();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.label);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.description, "");
+            i0.ɵɵadvance(2);
+            i0.ɵɵpropertyInterpolate("id", ctx.id);
+            i0.ɵɵpropertyInterpolate("name", ctx.name);
+            i0.ɵɵpropertyInterpolate("placeholder", ctx.placeholder);
+            i0.ɵɵproperty("autocomplete", ctx.autocomplete)("formControl", ctx.formControl);
+            i0.ɵɵattribute("disabled", ctx.isDisabled ? true : null);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.isDisabled);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isDisabled);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isDisabled);
+        }
+    }, dependencies: [i1.NgIf, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.FormControlDirective, i1$2.CalendarComponent, i4$1.IconComponent, i4.FlyoutActionDirective, i4.FlyoutZoneDirective, i4.FlyoutDirective], styles: ["[_nghost-%COMP%], .aui-datepicker[_ngcontent-%COMP%]{display:block}"], changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => DatepickerComponent)),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef((() => DatepickerComponent)),
+                            multi: true,
+                        },
+                    ], template: "<div aria-haspopup=\"grid\" auiFlyout class=\"aui-datepicker a-input has-icon-right\">\n  <label class=\"a-input__label\" for=\"id\">{{ label }}</label>\n  <small class=\"a-input__description\" id=\"id\"> {{ description }}</small>\n  <div class=\"a-input__wrapper\">\n    <input\n      (blur)=\"handleBlur($event)\"\n      [attr.disabled]=\"isDisabled ? true : null\"\n      [autocomplete]=\"autocomplete\"\n      [formControl]=\"formControl\"\n      id=\"{{ id }}\"\n      label=\"Pick date\"\n      description=\"Description\"\n      name=\"{{ name }}\"\n      placeholder=\"{{ placeholder }}\"\n      type=\"text\"\n    />\n    <aui-icon *ngIf=\"isDisabled\" name=\"ai-calendar-3\" role=\"button\" tabindex=\"0\"/>\n    <ng-container *ngIf=\"!isDisabled\">\n      <aui-icon\n        auiFlyoutAction\n        [openOnFocus]=\"false\"\n        name=\"ai-calendar-3\"\n        className=\"is-clickable\"\n        role=\"button\"\n        tabindex=\"0\"\n      ></aui-icon>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isDisabled\">\n      <div auiFlyoutZone class=\"m-datepicker m-datepicker--fixed\" role=\"dialog\">\n        <aui-calendar\n          (selectDate)=\"selectDateFromCalendar($event)\"\n          [range]=\"range\"\n          [selectedDate]=\"selectedDate\"\n          [interval]=\"interval\"\n          [weekdayLabels]=\"weekdayLabels\"\n          [monthLabels]=\"monthLabels\"\n        ></aui-calendar>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host,.aui-datepicker{display:block}\n"] }]
+        }], function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [CALENDAR_MONTH_LABELS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [CALENDAR_WEEKDAY_LABELS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DATEPICKER_ERROR_LABELS]
+                    }] }, { type: i1$2.CalendarService }, { type: i1$1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }];
+    }, { flyout: [{
+                type: ViewChild,
+                args: [FlyoutDirective, { static: true }]
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], range: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], weekdayLabels: [{
+                type: Input
+            }], monthLabels: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }] });
+})();
+
+class DatepickerModule {
+    static forChild(weekdayLabels, monthLabels, errorLabels) {
+        return {
+            ngModule: DatepickerModule,
+            providers: [
+                { provide: CALENDAR_WEEKDAY_LABELS, useValue: weekdayLabels },
+                { provide: CALENDAR_MONTH_LABELS, useValue: monthLabels },
+                { provide: DATEPICKER_ERROR_LABELS, useValue: errorLabels },
+            ],
+        };
+    }
+}
+/** @nocollapse */ DatepickerModule.ɵfac = function DatepickerModule_Factory(t) { return new (t || DatepickerModule)(); };
+/** @nocollapse */ DatepickerModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: DatepickerModule });
+/** @nocollapse */ DatepickerModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [
+        {
+            provide: CALENDAR_WEEKDAY_LABELS,
+            useValue: CALENDAR_DEFAULT_WEEKDAY_LABELS,
+        },
+        { provide: CALENDAR_MONTH_LABELS, useValue: CALENDAR_DEFAULT_MONTH_LABELS },
+        {
+            provide: DATEPICKER_ERROR_LABELS,
+            useValue: DATEPICKER_DEFAULT_ERROR_LABELS,
+        },
+    ], imports: [CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, IconModule, FlyoutModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, IconModule, FlyoutModule],
+                    declarations: [DatepickerComponent],
+                    exports: [DatepickerComponent],
+                    providers: [
+                        {
+                            provide: CALENDAR_WEEKDAY_LABELS,
+                            useValue: CALENDAR_DEFAULT_WEEKDAY_LABELS,
+                        },
+                        { provide: CALENDAR_MONTH_LABELS, useValue: CALENDAR_DEFAULT_MONTH_LABELS },
+                        {
+                            provide: DATEPICKER_ERROR_LABELS,
+                            useValue: DATEPICKER_DEFAULT_ERROR_LABELS,
+                        },
+                    ],
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DatepickerModule, { declarations: [DatepickerComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, IconModule, FlyoutModule], exports: [DatepickerComponent] }); })();
+
+function RangeSliderComponent_div_6_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "div", 11);
+    }
+}
+function RangeSliderComponent_span_9_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r5 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "span", 12);
+        i0.ɵɵlistener("blur", function RangeSliderComponent_span_9_Template_span_blur_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggleFocus(false, null, $event)); })("dragexit", function RangeSliderComponent_span_9_Template_span_dragexit_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onMouseUp($event)); })("focus", function RangeSliderComponent_span_9_Template_span_focus_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.toggleFocus(true, "end", $event)); })("mousedown", function RangeSliderComponent_span_9_Template_span_mousedown_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onMouseDown("end")); })("touchstart", function RangeSliderComponent_span_9_Template_span_touchstart_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onMouseDown("end")); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵstyleProp("left", ctx_r1.endPercentage + "%");
+        i0.ɵɵattribute("aria-label", ctx_r1.ariaLabelMax);
+    }
+}
+class RangeSliderComponent {
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.coreBranding = true;
+        this.min = 0;
+        this.max = 100;
+        this.minimalDistance = 1;
+        this.step = 0;
+        this.label = '';
+        this.labelBefore = '';
+        this.labelAfter = '';
+        this.ariaLabelMin = 'Minimum';
+        this.ariaLabelMax = 'Maximum';
+        this.start = 0;
+        this.end = false;
+        this.steps = [];
+        this.active = null;
+        this.isDisabled = false;
+        this.hasFocus = false;
+        this.click = false;
+        this.propagateChange = (value) => { };
+    }
+    get disabledClass() {
+        return this.isDisabled;
+    }
+    ngOnInit() {
+        if (this.step > 0) {
+            for (let i = 0; i <= this.max; i += Number(this.step)) {
+                this.steps.push(i);
+            }
+        }
+        this.startPercentage = this.startToPercentage();
+        if (this.end) {
+            this.endPercentage = this.endToPercentage();
+        }
+    }
+    writeValue(value) {
+        if (value && value.start) {
+            this.start = value.start;
+        }
+        else if (!isNaN(value) && value !== '') {
+            this.start = Number(value);
+        }
+        else {
+            this.setStart(Number(this.min));
+        }
+        this.startPercentage = this.startToPercentage();
+        if (value && value.end) {
+            this.end = value.end;
+            this.endPercentage = this.endToPercentage();
+        }
+    }
+    registerOnTouched() { }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    onMouseDown(handle) {
+        if (this.isDisabled) {
+            return;
+        }
+        this.hasFocus = true;
+        this.active = handle;
+    }
+    toggleFocus(hasFocus, element, $event) {
+        if (this.isDisabled) {
+            return;
+        }
+        $event.preventDefault();
+        this.hasFocus = hasFocus;
+        this.active = element;
+    }
+    onKeyDown($event) {
+        if (!this.hasFocus) {
+            return;
+        }
+        const key = $event.keyCode;
+        const keyCodes = {
+            end: 35,
+            home: 36,
+            left: 37,
+            up: 38,
+            right: 39,
+            down: 40,
+        };
+        if (Object.keys(keyCodes)
+            .map((e) => keyCodes[e])
+            .indexOf(key) === -1) {
+            return;
+        }
+        let increment = this.minimalDistance;
+        if (this.step > 0) {
+            increment = Number(this.step);
+        }
+        const processValue = (dir) => {
+            let newValue = this.active === 'start' ? this.start : Number(this.end);
+            if (dir === 'up') {
+                newValue += increment;
+            }
+            else {
+                newValue -= increment;
+            }
+            let newPercentage = ((newValue - this.min) / (this.max - this.min)) * 100;
+            if (newPercentage > 100) {
+                newPercentage = 100;
+            }
+            if (newPercentage < 0) {
+                newPercentage = 0;
+            }
+            return newPercentage;
+        };
+        switch (key) {
+            case keyCodes.right:
+            case keyCodes.up:
+                this.updateHandle(processValue('up'));
+                $event.preventDefault();
+                break;
+            case keyCodes.left:
+            case keyCodes.down:
+                this.updateHandle(processValue('down'));
+                $event.preventDefault();
+                break;
+            case keyCodes.end:
+                this.updateHandle(100);
+                $event.preventDefault();
+                break;
+            case keyCodes.home:
+                this.updateHandle(0);
+                $event.preventDefault();
+                break;
+        }
+    }
+    onMouseUp(event) {
+        if (this.active === 'start') {
+            this.setStart(this.round(this.start, this.step, 0));
+            this.startPercentage = this.startToPercentage();
+        }
+        if (this.active === 'end') {
+            this.setEnd(this.round(this.end, this.step, 0));
+            this.endPercentage = this.endToPercentage();
+        }
+        this.click = false;
+    }
+    mouseDown(event) {
+        this.click = true;
+    }
+    onMouseMove(event) {
+        if (!this.active || !this.click) {
+            return;
+        }
+        event.preventDefault(); // Do not select text while sliding
+        const x = event.x !== undefined ? event.x : event.targetTouches[0].pageX;
+        const rect = this.elRef.nativeElement.getBoundingClientRect();
+        const newPercentage = this.calcPercentage(x, rect.width, rect.left);
+        this.updateHandle(newPercentage);
+    }
+    updateHandle(newPercentage) {
+        if (this.active === 'start') {
+            this.startPercentage = newPercentage;
+            this.setStart(this.percentageToStart());
+            if (this.minimalDistanceNotRespected()) {
+                this.setStart(Number(this.end) - Number(this.minimalDistance));
+                this.startPercentage = this.startToPercentage();
+            }
+        }
+        if (this.active === 'end' && this.endPercentage) {
+            this.endPercentage = newPercentage;
+            this.setEnd(this.percentageToEnd());
+            if (this.minimalDistanceNotRespected()) {
+                this.setEnd(Number(this.start) + Number(this.minimalDistance));
+                this.endPercentage = this.endToPercentage();
+            }
+        }
+    }
+    // ---------- HELPERS ---------- //
+    setStart(value) {
+        this.start = value;
+        if (this.end) {
+            this.propagateChange({
+                start: this.start,
+                end: this.end,
+            });
+        }
+        else {
+            this.propagateChange(this.start);
+        }
+    }
+    setEnd(value) {
+        this.end = value;
+        this.propagateChange({
+            start: this.start,
+            end: this.end,
+        });
+    }
+    round(n, increment, offset) {
+        if (increment > 0) {
+            return Math.round((n - offset) / increment) * increment + offset;
+        }
+        return n;
+    }
+    startToPercentage() {
+        return Math.round(((this.start - this.min) / (this.max - this.min)) * 100);
+    }
+    percentageToStart() {
+        return Math.round((this.startPercentage / 100) * (this.max - this.min) + Number(this.min));
+    }
+    endToPercentage() {
+        return Math.round(((Number(this.end) - this.min) / (this.max - this.min)) * 100);
+    }
+    percentageToEnd() {
+        return Math.round((this.endPercentage / 100) * (this.max - this.min) + Number(this.min));
+    }
+    minimalDistanceNotRespected() {
+        return this.minimalDistance >= 0 && this.end && this.start > Number(this.end) - this.minimalDistance;
+    }
+    calcPercentage(mouseX, width, offsetLeft) {
+        const mousePos = mouseX - offsetLeft;
+        let newPercentage = Math.round((mousePos / width) * 100);
+        if (newPercentage > 100) {
+            newPercentage = 100;
+        }
+        if (newPercentage < 0) {
+            newPercentage = 0;
+        }
+        return newPercentage;
+    }
+}
+/** @nocollapse */ RangeSliderComponent.ɵfac = function RangeSliderComponent_Factory(t) { return new (t || RangeSliderComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+/** @nocollapse */ RangeSliderComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: RangeSliderComponent, selectors: [["aui-range-slider"]], hostVars: 4, hostBindings: function RangeSliderComponent_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("keydown", function RangeSliderComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); }, false, i0.ɵɵresolveDocument)("touchend", function RangeSliderComponent_touchend_HostBindingHandler($event) { return ctx.onMouseUp($event); })("mouseup", function RangeSliderComponent_mouseup_HostBindingHandler($event) { return ctx.onMouseUp($event); })("touchstart", function RangeSliderComponent_touchstart_HostBindingHandler($event) { return ctx.mouseDown($event); })("mousedown", function RangeSliderComponent_mousedown_HostBindingHandler($event) { return ctx.mouseDown($event); })("touchmove", function RangeSliderComponent_touchmove_HostBindingHandler($event) { return ctx.onMouseMove($event); })("mousemove", function RangeSliderComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); });
+        }
+        if (rf & 2) {
+            i0.ɵɵclassProp("m-range-slider", ctx.coreBranding)("is-disabled", ctx.disabledClass);
+        }
+    }, inputs: { min: "min", max: "max", minimalDistance: "minimalDistance", step: "step", label: "label", labelBefore: "labelBefore", labelAfter: "labelAfter", ariaLabelMin: "ariaLabelMin", ariaLabelMax: "ariaLabelMax" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => RangeSliderComponent)),
+                multi: true,
+            },
+        ])], decls: 15, vars: 16, consts: [[1, "a-range-slider"], [1, "a-range-slider__labels"], [1, "a-range-slider__label"], [1, "a-range-slider__inner"], [1, "a-range-slider__tickmarks"], ["class", "a-range-slider__tickmark", 4, "ngFor", "ngForOf"], [1, "a-range-slider__bar"], ["tabindex", "0", 1, "a-range-slider__handle", 3, "blur", "dragexit", "focus", "mousedown", "touchstart"], ["class", "a-range-slider__handle", "name", "a-range-slider__handle__end", "tabindex", "0", 3, "left", "blur", "dragexit", "focus", "mousedown", "touchstart", 4, "ngIf"], [1, "a-range-slider__descriptions"], [1, "a-range-slider__description", "small"], [1, "a-range-slider__tickmark"], ["name", "a-range-slider__handle__end", "tabindex", "0", 1, "a-range-slider__handle", 3, "blur", "dragexit", "focus", "mousedown", "touchstart"]], template: function RangeSliderComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4);
+            i0.ɵɵtemplate(6, RangeSliderComponent_div_6_Template, 1, 0, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(7, "div", 6);
+            i0.ɵɵelementStart(8, "span", 7);
+            i0.ɵɵlistener("blur", function RangeSliderComponent_Template_span_blur_8_listener($event) { return ctx.toggleFocus(false, null, $event); })("dragexit", function RangeSliderComponent_Template_span_dragexit_8_listener($event) { return ctx.onMouseUp($event); })("focus", function RangeSliderComponent_Template_span_focus_8_listener($event) { return ctx.toggleFocus(true, "start", $event); })("mousedown", function RangeSliderComponent_Template_span_mousedown_8_listener() { return ctx.onMouseDown("start"); })("touchstart", function RangeSliderComponent_Template_span_touchstart_8_listener() { return ctx.onMouseDown("start"); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(9, RangeSliderComponent_span_9_Template, 1, 3, "span", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "div", 9)(11, "div", 10);
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "div", 10);
+            i0.ɵɵtext(14);
+            i0.ɵɵelementEnd()()();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.label);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngForOf", ctx.steps);
+            i0.ɵɵadvance(1);
+            i0.ɵɵstyleProp("left", ctx.endPercentage ? ctx.startPercentage + "%" : false)("width", ctx.endPercentage ? ctx.endPercentage - ctx.startPercentage + "%" : ctx.startPercentage + "%");
+            i0.ɵɵadvance(1);
+            i0.ɵɵstyleProp("left", ctx.startPercentage + "%");
+            i0.ɵɵattribute("aria-label", ctx.ariaLabelMin);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.end);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate3("", ctx.labelBefore, "", ctx.min, "", ctx.labelAfter, "");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate3("", ctx.labelBefore, "", ctx.max, "", ctx.labelAfter, "");
+        }
+    }, dependencies: [i1.NgForOf, i1.NgIf], styles: ["[_nghost-%COMP%]{display:block;position:relative}.is-disabled[_nghost-%COMP%]{cursor:not-allowed}.is-disabled[_nghost-%COMP%]   .m-range-slider__handle[_ngcontent-%COMP%]:hover{cursor:not-allowed}"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RangeSliderComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-range-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => RangeSliderComponent)),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"a-range-slider\">\n  <div class=\"a-range-slider__labels\">\n    <div class=\"a-range-slider__label\">{{ label }}</div>\n  </div>\n  <div class=\"a-range-slider__inner\">\n    <div class=\"a-range-slider__tickmarks\">\n      <div *ngFor=\"let step of steps; let i = index\" class=\"a-range-slider__tickmark\"></div>\n    </div>\n    <div\n      [style.left]=\"endPercentage ? startPercentage + '%' : false\"\n      [style.width]=\"endPercentage ? endPercentage - startPercentage + '%' : startPercentage + '%'\"\n      class=\"a-range-slider__bar\"\n    ></div>\n    <span\n      (blur)=\"toggleFocus(false, null, $event)\"\n      (dragexit)=\"onMouseUp($event)\"\n      (focus)=\"toggleFocus(true, 'start', $event)\"\n      (mousedown)=\"onMouseDown('start')\"\n      (touchstart)=\"onMouseDown('start')\"\n      [style.left]=\"startPercentage + '%'\"\n      class=\"a-range-slider__handle\"\n      [attr.aria-label]=\"ariaLabelMin\"\n      tabindex=\"0\"\n    >\n    </span>\n\n    <span\n      (blur)=\"toggleFocus(false, null, $event)\"\n      (dragexit)=\"onMouseUp($event)\"\n      (focus)=\"toggleFocus(true, 'end', $event)\"\n      (mousedown)=\"onMouseDown('end')\"\n      (touchstart)=\"onMouseDown('end')\"\n      *ngIf=\"end\"\n      [style.left]=\"endPercentage + '%'\"\n      class=\"a-range-slider__handle\"\n      name=\"a-range-slider__handle__end\"\n      [attr.aria-label]=\"ariaLabelMax\"\n      tabindex=\"0\"\n    >\n    </span>\n  </div>\n  <div class=\"a-range-slider__descriptions\">\n    <div class=\"a-range-slider__description small\">{{ labelBefore }}{{ min }}{{ labelAfter }}</div>\n    <div class=\"a-range-slider__description small\">{{ labelBefore }}{{ max }}{{ labelAfter }}</div>\n  </div>\n</div>\n", styles: [":host{display:block;position:relative}:host.is-disabled{cursor:not-allowed}:host.is-disabled .m-range-slider__handle:hover{cursor:not-allowed}\n"] }]
+        }], function () { return [{ type: i0.ElementRef }]; }, { coreBranding: [{
+                type: HostBinding,
+                args: ['class.m-range-slider']
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], minimalDistance: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelBefore: [{
+                type: Input
+            }], labelAfter: [{
+                type: Input
+            }], ariaLabelMin: [{
+                type: Input
+            }], ariaLabelMax: [{
+                type: Input
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.is-disabled']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['touchend', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }], mouseDown: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['touchmove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }] });
+})();
+
+class RangeSliderModule {
+}
+/** @nocollapse */ RangeSliderModule.ɵfac = function RangeSliderModule_Factory(t) { return new (t || RangeSliderModule)(); };
+/** @nocollapse */ RangeSliderModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: RangeSliderModule });
+/** @nocollapse */ RangeSliderModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RangeSliderModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule],
+                    declarations: [RangeSliderComponent],
+                    exports: [RangeSliderComponent],
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(RangeSliderModule, { declarations: [RangeSliderComponent], imports: [CommonModule, FormsModule], exports: [RangeSliderComponent] }); })();
+
+const _c0$4 = function (a0, a1) { return { "a-button--l": a0, "a-button--s": a1 }; };
+function SearchFilterComponent_button_8_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r6 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 12);
+        i0.ɵɵlistener("click", function SearchFilterComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.clear()); });
+        i0.ɵɵelement(1, "aui-icon", 13);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c0$4, ctx_r0.size === "large", ctx_r0.size === "small"));
+        i0.ɵɵattribute("disabled", ctx_r0.isDisabled ? "" : null);
+    }
+}
+function SearchFilterComponent_aui_icon_9_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "aui-icon", 13);
+    }
+}
+function SearchFilterComponent_p_11_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "p", 14);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(ctx_r2.labelResults);
+    }
+}
+function SearchFilterComponent_div_12_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "div", 15);
+    }
+}
+function SearchFilterComponent_ul_13_li_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "li", 19)(1, "p", 20);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r7 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx_r7.labelNoResults);
+    }
+}
+function SearchFilterComponent_ul_13_li_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r12 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "li", 19)(1, "div", 21)(2, "div", 22)(3, "input", 23);
+        i0.ɵɵlistener("change", function SearchFilterComponent_ul_13_li_2_Template_input_change_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r12); const choice_r9 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.toggleSelected(choice_r9.label)); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "label", 24);
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd()()()();
+    }
+    if (rf & 2) {
+        const choice_r9 = ctx.$implicit;
+        const i_r10 = ctx.index;
+        const ctx_r8 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(3);
+        i0.ɵɵpropertyInterpolate("id", "checkbox--" + i_r10 + "--" + ctx_r8.id);
+        i0.ɵɵpropertyInterpolate("name", "checkbox--" + i_r10 + "--" + ctx_r8.id);
+        i0.ɵɵproperty("checked", ctx_r8.selectedItems.indexOf(choice_r9.label) >= 0);
+        i0.ɵɵattribute("disabled", ctx_r8.isDisabled ? true : null);
+        i0.ɵɵadvance(1);
+        i0.ɵɵpropertyInterpolate("for", "checkbox--" + i_r10 + "--" + ctx_r8.id);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(choice_r9.label);
+    }
+}
+function SearchFilterComponent_ul_13_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "ul", 16);
+        i0.ɵɵtemplate(1, SearchFilterComponent_ul_13_li_1_Template, 3, 1, "li", 17);
+        i0.ɵɵtemplate(2, SearchFilterComponent_ul_13_li_2_Template, 6, 6, "li", 18);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r4 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx_r4.filteredChoices.length);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r4.filteredChoices);
+    }
+}
+const _c1$4 = function (a0, a1, a2) { return { "a-input--l": a0, "a-input--s": a1, "has-icon-right": a2 }; };
+class SearchFilterComponent {
+    constructor() {
+        this.flyoutSize = FlyoutSize.Small;
+        this.labelDeselect = 'Alles deselecteren';
+        this.labelResults = 'Resultaten';
+        this.labelNoResults = 'Geen resultaten gevonden.';
+        this.choices = [];
+        this.placeholder = 'Zoeken';
+        this.inputDelay = 150;
+        this.onSelect = () => { };
+        this.onClear = () => { };
+        this.size = 'default';
+        this.search = new EventEmitter();
+        this.query = '';
+        this.selectedItems = [];
+        this.filteredChoices = [];
+        this.loading = false;
+        this.isDisabled = false;
+        this.updateModel = () => { };
+        this.filterDataFromSearch = debounce(this.filterData.bind(this), this.inputDelay);
+    }
+    writeValue(value) {
+        this.selectedItems = Array.isArray(value) ? value : [];
+    }
+    registerOnChange(onChange) {
+        this.updateModel = onChange;
+    }
+    registerOnTouched() { }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    ngOnChanges(changes) {
+        const choices = get(changes, 'choices.currentValue', null);
+        if (!choices) {
+            return;
+        }
+        if (this.remote) {
+            this.filteredChoices = [...choices];
+            this.loading = false;
+        }
+        else {
+            this.filterData();
+        }
+    }
+    filterData() {
+        if (this.remote) {
+            this.loading = true;
+            return this.search.emit(this.query);
+        }
+        this.filterChoices();
+    }
+    clear() {
+        this.selectedItems = [];
+        this.query = '';
+        this.filterData();
+        this.updateModel(this.selectedItems);
+        this.onClear();
+    }
+    toggleSelected(choice) {
+        const selected = this.selectedItems.indexOf(choice);
+        if (selected < 0) {
+            this.selectedItems = this.selectedItems.concat(choice);
+        }
+        else {
+            this.selectedItems = [...this.selectedItems.slice(0, selected), ...this.selectedItems.slice(selected + 1)];
+        }
+        this.updateModel(this.selectedItems);
+        this.onSelect();
+    }
+    filterChoices() {
+        this.filteredChoices = this.choices.filter((choice) => {
+            return (this.selectedItems.indexOf(choice.value) < 0 &&
+                choice.label.toLowerCase().indexOf(this.query.toLowerCase()) >= 0);
+        });
+    }
+    hasClose() {
+        var _a, _b;
+        return ((_a = this.filteredChoices) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.query) === null || _b === void 0 ? void 0 : _b.length) > 1;
+    }
+    getSelectedLabels() {
+        return this.selectedItems.length ? this.selectedItems.map((el) => el).join(', ') : null;
+    }
+}
+/** @nocollapse */ SearchFilterComponent.ɵfac = function SearchFilterComponent_Factory(t) { return new (t || SearchFilterComponent)(); };
+/** @nocollapse */ SearchFilterComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SearchFilterComponent, selectors: [["aui-search-filter"]], inputs: { id: "id", name: "name", flyoutSize: "flyoutSize", flyoutAlign: "flyoutAlign", label: "label", description: "description", labelDeselect: "labelDeselect", labelResults: "labelResults", labelNoResults: "labelNoResults", choices: "choices", remote: "remote", placeholder: "placeholder", inputDelay: "inputDelay", onSelect: "onSelect", onClear: "onClear", size: "size" }, outputs: { search: "search" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => SearchFilterComponent)),
+                multi: true,
+            },
+        ]), i0.ɵɵNgOnChangesFeature], decls: 14, vars: 22, consts: [["aria-haspopup", "listbox", "auiFlyout", "", 1, "m-search-filter", 3, "align", "size"], [1, "a-input", 3, "ngClass"], [1, "a-input__label", 3, "for"], [1, "a-input__description", 3, "id"], [1, "m-search-filter__input"], ["aria-autocomplete", "list", "type", "text", "auiFlyoutAction", "", 3, "ngModel", "id", "name", "value", "input", "ngModelChange"], ["class", "a-button a-button--outlined has-icon m-search-filter__button a-button--danger", "aria-label", "Zoekopdracht wissen", "type", "button", 3, "ngClass", "click", 4, "ngIf"], ["name", "ai-close", 4, "ngIf"], ["auiFlyoutZone", "", 1, "m-search-filter__search", "m-search-filter__search--scroll"], ["class", "h6 m-search-filter__results-title u-margin-bottom-xs", 4, "ngIf"], ["class", "u-text-center u-padding a-spinner", 4, "ngIf"], ["class", "a-checkbox-list a-checkbox-list--flushed", 4, "ngIf"], ["aria-label", "Zoekopdracht wissen", "type", "button", 1, "a-button", "a-button--outlined", "has-icon", "m-search-filter__button", "a-button--danger", 3, "ngClass", "click"], ["name", "ai-close"], [1, "h6", "m-search-filter__results-title", "u-margin-bottom-xs"], [1, "u-text-center", "u-padding", "a-spinner"], [1, "a-checkbox-list", "a-checkbox-list--flushed"], ["class", "a-checkbox-list__item", 4, "ngIf"], ["class", "a-checkbox-list__item", 4, "ngFor", "ngForOf"], [1, "a-checkbox-list__item"], [1, "u-margin-xs"], [1, "a-input", "a-checkbox-list__checkbox"], [1, "a-input__checkbox"], ["type", "checkbox", 3, "checked", "id", "name", "change"], [3, "for"]], template: function SearchFilterComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "label", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "small", 3);
+            i0.ɵɵtext(5, "Input description");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 4)(7, "input", 5);
+            i0.ɵɵlistener("input", function SearchFilterComponent_Template_input_input_7_listener() { return ctx.filterDataFromSearch(); })("ngModelChange", function SearchFilterComponent_Template_input_ngModelChange_7_listener($event) { return ctx.query = $event; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(8, SearchFilterComponent_button_8_Template, 2, 5, "button", 6);
+            i0.ɵɵtemplate(9, SearchFilterComponent_aui_icon_9_Template, 1, 0, "aui-icon", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 8);
+            i0.ɵɵtemplate(11, SearchFilterComponent_p_11_Template, 2, 1, "p", 9);
+            i0.ɵɵtemplate(12, SearchFilterComponent_div_12_Template, 1, 0, "div", 10);
+            i0.ɵɵtemplate(13, SearchFilterComponent_ul_13_Template, 3, 2, "ul", 11);
+            i0.ɵɵelementEnd()();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("align", ctx.flyoutAlign)("size", ctx.flyoutSize);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(18, _c1$4, ctx.size === "large", ctx.size === "small", ctx.hasClose));
+            i0.ɵɵadvance(1);
+            i0.ɵɵpropertyInterpolate("for", ctx.id + "-search");
+            i0.ɵɵadvance(1);
+            i0.ɵɵtextInterpolate(ctx.label);
+            i0.ɵɵadvance(1);
+            i0.ɵɵpropertyInterpolate("id", ctx.id + "-description");
+            i0.ɵɵadvance(3);
+            i0.ɵɵpropertyInterpolate("id", ctx.id + "-search");
+            i0.ɵɵpropertyInterpolate("name", ctx.name + "-search");
+            i0.ɵɵpropertyInterpolate("value", ctx.getSelectedLabels());
+            i0.ɵɵproperty("ngModel", ctx.query);
+            i0.ɵɵattribute("aria-labelledby", ctx.id + "-label")("placeholder", ctx.placeholder)("disabled", ctx.isDisabled ? "" : null);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.hasClose);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.hasClose);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.labelResults);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.loading);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.loading);
+        }
+    }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i4.FlyoutActionDirective, i4.FlyoutZoneDirective, i4.FlyoutDirective, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgModel, i4$1.IconComponent], styles: [".m-search-filter[_ngcontent-%COMP%]{display:block}.m-search-filter__input[_ngcontent-%COMP%]{display:flex;padding:0}.m-search-filter__input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{border-right:none}.m-search-filter__button[_ngcontent-%COMP%]{display:inline-block;padding:0;position:relative;vertical-align:middle}.m-search-filter__button[_ngcontent-%COMP%]   .ai[_ngcontent-%COMP%]{position:relative;transform:none!important;top:0}"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchFilterComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-search-filter', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => SearchFilterComponent)),
+                            multi: true,
+                        },
+                    ], template: "<div [align]=\"flyoutAlign\" [size]=\"flyoutSize\" aria-haspopup=\"listbox\" auiFlyout class=\"m-search-filter\">\n  <div\n    class=\"a-input\"\n    [ngClass]=\"{\n      'a-input--l': size === 'large',\n      'a-input--s': size === 'small',\n      'has-icon-right': hasClose\n    }\"\n  >\n    <label class=\"a-input__label\" for=\"{{ id + '-search' }}\">{{ label }}</label>\n    <small class=\"a-input__description\" id=\"{{ id + '-description' }}\">Input description</small>\n    <div class=\"m-search-filter__input\">\n      <input\n        (input)=\"filterDataFromSearch()\"\n        [(ngModel)]=\"query\"\n        [attr.aria-labelledby]=\"id + '-label'\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.disabled]=\"isDisabled ? '' : null\"\n        aria-autocomplete=\"list\"\n        id=\"{{ id + '-search' }}\"\n        name=\"{{ name + '-search' }}\"\n        value=\"{{ getSelectedLabels() }}\"\n        type=\"text\"\n        auiFlyoutAction\n      />\n      <button\n        *ngIf=\"hasClose\"\n        [ngClass]=\"{\n          'a-button--l': size === 'large',\n          'a-button--s': size === 'small'\n        }\"\n        class=\"a-button a-button--outlined has-icon m-search-filter__button a-button--danger\"\n        aria-label=\"Zoekopdracht wissen\"\n        type=\"button\"\n        (click)=\"clear()\"\n        [attr.disabled]=\"isDisabled ? '' : null\"\n      >\n        <aui-icon name=\"ai-close\"></aui-icon>\n      </button>\n      <aui-icon *ngIf=\"!hasClose\" name=\"ai-close\"></aui-icon>\n    </div>\n  </div>\n  <div auiFlyoutZone class=\"m-search-filter__search m-search-filter__search--scroll\">\n    <p *ngIf=\"labelResults\" class=\"h6 m-search-filter__results-title u-margin-bottom-xs\">{{ labelResults }}</p>\n    <div *ngIf=\"loading\" class=\"u-text-center u-padding a-spinner\"></div>\n    <ul *ngIf=\"!loading\" class=\"a-checkbox-list a-checkbox-list--flushed\">\n      <li *ngIf=\"!filteredChoices.length\" class=\"a-checkbox-list__item\">\n        <p class=\"u-margin-xs\">{{ labelNoResults }}</p>\n      </li>\n      <li *ngFor=\"let choice of filteredChoices; index as i\" class=\"a-checkbox-list__item\">\n        <div class=\"a-input a-checkbox-list__checkbox\">\n          <div class=\"a-input__checkbox\">\n            <input\n              (change)=\"toggleSelected(choice.label)\"\n              [attr.disabled]=\"isDisabled ? true : null\"\n              [checked]=\"selectedItems.indexOf(choice.label) >= 0\"\n              id=\"{{ 'checkbox--' + i + '--' + id }}\"\n              name=\"{{ 'checkbox--' + i + '--' + id }}\"\n              type=\"checkbox\"\n            />\n            <label for=\"{{ 'checkbox--' + i + '--' + id }}\">{{ choice.label }}</label>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".m-search-filter{display:block}.m-search-filter__input{display:flex;padding:0}.m-search-filter__input input{border-right:none}.m-search-filter__button{display:inline-block;padding:0;position:relative;vertical-align:middle}.m-search-filter__button .ai{position:relative;transform:none!important;top:0}\n"] }]
+        }], function () { return []; }, { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], flyoutSize: [{
+                type: Input
+            }], flyoutAlign: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], labelDeselect: [{
+                type: Input
+            }], labelResults: [{
+                type: Input
+            }], labelNoResults: [{
+                type: Input
+            }], choices: [{
+                type: Input
+            }], remote: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], inputDelay: [{
+                type: Input
+            }], onSelect: [{
+                type: Input
+            }], onClear: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }] });
+})();
+
+class SearchFilterModule {
+}
+/** @nocollapse */ SearchFilterModule.ɵfac = function SearchFilterModule_Factory(t) { return new (t || SearchFilterModule)(); };
+/** @nocollapse */ SearchFilterModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: SearchFilterModule });
+/** @nocollapse */ SearchFilterModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [CommonModule, FlyoutModule, FormsModule, IconModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchFilterModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FlyoutModule, FormsModule, IconModule],
+                    declarations: [SearchFilterComponent],
+                    exports: [SearchFilterComponent],
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SearchFilterModule, { declarations: [SearchFilterComponent], imports: [CommonModule, FlyoutModule, FormsModule, IconModule], exports: [SearchFilterComponent] }); })();
+
+class TimePickerValidators {
+    // time `hh:mm` 24h format
+    static minTime(time) {
+        const validator = (control) => {
+            const splittedControlValue = control.value.split(':');
+            const controlHours = parseInt(splittedControlValue[0], 10);
+            const controlMinutes = parseInt(splittedControlValue[1], 10);
+            const splittedMinTime = time.split(':');
+            const minHours = parseInt(splittedMinTime[0], 10);
+            const minMinutes = parseInt(splittedMinTime[1], 10);
+            // Don't throw error --> use Validator.required
+            if (isNaN(controlHours) || isNaN(controlMinutes) || isNaN(minHours) || isNaN(minMinutes)) {
+                return null;
+            }
+            if (minHours < controlHours) {
+                return null;
+            }
+            if (minHours === controlHours && minMinutes <= controlMinutes) {
+                return null;
+            }
+            return { minTime: { value: control.value } };
+        };
+        return validator;
+    }
+    // time `hh:mm` 24h format
+    static maxTime(time) {
+        const validator = (control) => {
+            const splittedControlValue = control.value.split(':');
+            const controlHours = parseInt(splittedControlValue[0], 10);
+            const controlMinutes = parseInt(splittedControlValue[1], 10);
+            const splittedMinTime = time.split(':');
+            const maxHours = parseInt(splittedMinTime[0], 10);
+            const maxMinutes = parseInt(splittedMinTime[1], 10);
+            // Don't throw error --> use Validator.required
+            if (isNaN(controlHours) || isNaN(controlMinutes) || isNaN(maxHours) || isNaN(maxMinutes)) {
+                return null;
+            }
+            if (maxHours > controlHours) {
+                return null;
+            }
+            if (maxHours === controlHours && maxMinutes >= controlMinutes) {
+                return null;
+            }
+            return { maxTime: { value: control.value } };
+        };
+        return validator;
+    }
+}
+
+var TimepickerInputSize;
+(function (TimepickerInputSize) {
+    TimepickerInputSize["Auto"] = "auto";
+    TimepickerInputSize["Small"] = "small";
+    TimepickerInputSize["Large"] = "large";
+})(TimepickerInputSize || (TimepickerInputSize = {}));
+
+function TimepickerComponent_div_1_aui_icon_4_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "aui-icon", 8);
+    }
+}
+const _c0$3 = function (a0) { return { "has-error": a0 }; };
+const _c1$3 = function (a0) { return { "is-error": a0 }; };
+function TimepickerComponent_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 3)(1, "label", 4);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "small", 5);
+        i0.ɵɵtemplate(4, TimepickerComponent_div_1_aui_icon_4_Template, 1, 0, "aui-icon", 6);
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(6, "input", 7);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵclassMap("a-input--" + ctx_r0.size);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$3, ctx_r0.hasError));
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx_r0.label);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$3, ctx_r0.hasError));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r0.hasError);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r0.description, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("formControl", ctx_r0.timeControl)("id", ctx_r0.id);
+        i0.ɵɵattribute("aria-label", ctx_r0.ariaLabelHours + ":" + ctx_r0.ariaLabelMinutes);
+    }
+}
+function TimepickerComponent_div_2_option_6_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "option", 17);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const hour_r5 = ctx.$implicit;
+        i0.ɵɵproperty("value", hour_r5);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(hour_r5);
+    }
+}
+function TimepickerComponent_div_2_option_13_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "option", 17);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const minute_r6 = ctx.$implicit;
+        i0.ɵɵproperty("value", minute_r6);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(minute_r6);
+    }
+}
+function TimepickerComponent_div_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "div", 11)(3, "select", 12)(4, "option", 13);
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(6, TimepickerComponent_div_2_option_6_Template, 2, 2, "option", 14);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(7, "aui-icon", 15);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(8, "div", 10)(9, "div", 11)(10, "select", 16)(11, "option", 13);
+        i0.ɵɵtext(12);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(13, TimepickerComponent_div_2_option_13_Template, 2, 2, "option", 14);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(14, "aui-icon", 15);
+        i0.ɵɵelementEnd()()();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("formGroup", ctx_r1.fallbackForm);
+        i0.ɵɵadvance(1);
+        i0.ɵɵclassMap("a-input--" + ctx_r1.size);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c0$3, ctx_r1.hasError));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("id", ctx_r1.id);
+        i0.ɵɵattribute("aria-label", ctx_r1.ariaLabelHours);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx_r1.hoursPlaceholder);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r1.hours);
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassMap("a-input--" + ctx_r1.size);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0$3, ctx_r1.hasError));
+        i0.ɵɵadvance(2);
+        i0.ɵɵattribute("aria-label", ctx_r1.ariaLabelMinutes);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx_r1.minutesPlaceholder);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r1.minutes);
+    }
+}
+class TimepickerComponent {
+    constructor(formBuilder, renderer) {
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        this.id = 'aui-timepicker-' + Math.random().toString(36).substring(2);
+        this.hoursPlaceholder = 'uu';
+        this.minutesPlaceholder = 'mm';
+        this.hasError = false;
+        this.size = TimepickerInputSize.Auto;
+        this.ariaLabelHours = 'Uur';
+        this.ariaLabelMinutes = 'Minuten';
+        this.shouldUseFallback = false;
+        this.minutes = [];
+        this.hours = [];
+        this.timeControl = new UntypedFormControl();
+        this.componentDestroyed$ = new Subject();
+    }
+    ngOnInit() {
+        this.shouldUseFallback = this.supportsNativeTimepicker();
+        this.minutes = this.getMinutes();
+        this.hours = this.getHours();
+        this.fallbackForm = this.formBuilder.group({
+            hours: null,
+            minutes: null,
+        });
+        this.fallbackForm.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((formData) => {
+            if (formData.hours && formData.minutes) {
+                this.updateModel(`${formData.hours}:${formData.minutes}`);
+            }
+            else {
+                this.updateModel('');
+            }
+        });
+        this.timeControl.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe((time) => {
+            this.updateModel(time);
+        });
+    }
+    ngOnDestroy() {
+        this.componentDestroyed$.next(true);
+        this.componentDestroyed$.complete();
+    }
+    writeValue(value) {
+        this.timeControl.setValue(value, { emitEvent: false });
+        if (value) {
+            const splitted = value.split(':');
+            this.fallbackForm.get('hours').setValue(splitted[0], { emitEvent: false });
+            this.fallbackForm.get('minutes').setValue(splitted[1], { emitEvent: false });
+        }
+    }
+    registerOnChange(onChange) {
+        this.updateModel = onChange;
+    }
+    registerOnTouched() { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.timeControl.disable({ emitEvent: false });
+            this.fallbackForm.disable({ emitEvent: false });
+        }
+        else {
+            this.timeControl.enable({ emitEvent: false });
+            this.fallbackForm.enable({ emitEvent: false });
+        }
+    }
+    supportsNativeTimepicker() {
+        const element = this.renderer.createElement('input');
+        element.type = 'time';
+        return element.type === 'text';
+    }
+    getMinutes() {
+        return Array(60)
+            .fill('')
+            .map((value, index) => {
+            return DateHelper.addLeadingZero(index);
+        });
+    }
+    getHours() {
+        return Array(24)
+            .fill('')
+            .map((value, index) => {
+            return DateHelper.addLeadingZero(index);
+        });
+    }
+}
+/** @nocollapse */ TimepickerComponent.ɵfac = function TimepickerComponent_Factory(t) { return new (t || TimepickerComponent)(i0.ɵɵdirectiveInject(i1$1.UntypedFormBuilder), i0.ɵɵdirectiveInject(i0.Renderer2)); };
+/** @nocollapse */ TimepickerComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TimepickerComponent, selectors: [["aui-timepicker"]], inputs: { id: "id", hoursPlaceholder: "hoursPlaceholder", minutesPlaceholder: "minutesPlaceholder", hasError: "hasError", size: "size", ariaLabelHours: "ariaLabelHours", ariaLabelMinutes: "ariaLabelMinutes", label: "label", description: "description" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => TimepickerComponent)),
+                multi: true,
+            },
+        ])], decls: 3, vars: 2, consts: [[1, "m-timepicker"], ["class", "a-input", 3, "class", "ngClass", 4, "ngIf"], [3, "formGroup", 4, "ngIf"], [1, "a-input", 3, "ngClass"], ["for", "id", 1, "a-input__label"], ["id", "id", 1, "a-input__description", 3, "ngClass"], ["name", "ai-alert-triangle", 4, "ngIf"], ["type", "time", 3, "formControl", "id"], ["name", "ai-alert-triangle"], [3, "formGroup"], [1, "a-input", "has-icon-right", 3, "ngClass"], [1, "a-input__wrapper"], ["formControlName", "hours", 3, "id"], ["disabled", "", "value", "null"], [3, "value", 4, "ngFor", "ngForOf"], ["name", "ai-arrow-down-1"], ["formControlName", "minutes"], [3, "value"]], template: function TimepickerComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, TimepickerComponent_div_1_Template, 7, 14, "div", 1);
+            i0.ɵɵtemplate(2, TimepickerComponent_div_2_Template, 15, 18, "div", 2);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.shouldUseFallback);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.shouldUseFallback);
+        }
+    }, dependencies: [i1$1.NgSelectOption, i1$1.ɵNgSelectMultipleOption, i1$1.DefaultValueAccessor, i1$1.SelectControlValueAccessor, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.FormControlDirective, i1$1.FormGroupDirective, i1$1.FormControlName, i1.NgClass, i1.NgForOf, i1.NgIf, i4$1.IconComponent], styles: ["[_nghost-%COMP%]{display:block}"], changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimepickerComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-timepicker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => TimepickerComponent)),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"m-timepicker\">\n  <div *ngIf=\"!shouldUseFallback\" [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input\">\n    <label class=\"a-input__label\" for=\"id\">{{ label }}</label>\n    <small class=\"a-input__description\" id=\"id\" [ngClass]=\"{ 'is-error': hasError }\">\n      <aui-icon *ngIf=\"hasError\" name=\"ai-alert-triangle\"></aui-icon>\n      {{ description }}</small\n    >\n    <input\n      [attr.aria-label]=\"ariaLabelHours + ':' + ariaLabelMinutes\"\n      [formControl]=\"timeControl\"\n      [id]=\"id\"\n      type=\"time\"\n    />\n  </div>\n\n  <div *ngIf=\"shouldUseFallback\" [formGroup]=\"fallbackForm\">\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelHours\" [id]=\"id\" formControlName=\"hours\">\n          <option disabled value=\"null\">{{ hoursPlaceholder }}</option>\n          <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelMinutes\" formControlName=\"minutes\">\n          <option disabled value=\"null\">{{ minutesPlaceholder }}</option>\n          <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], function () { return [{ type: i1$1.UntypedFormBuilder }, { type: i0.Renderer2 }]; }, { id: [{
+                type: Input
+            }], hoursPlaceholder: [{
+                type: Input
+            }], minutesPlaceholder: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], ariaLabelHours: [{
+                type: Input
+            }], ariaLabelMinutes: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }] });
+})();
+
+class TimepickerModule {
+}
+/** @nocollapse */ TimepickerModule.ɵfac = function TimepickerModule_Factory(t) { return new (t || TimepickerModule)(); };
+/** @nocollapse */ TimepickerModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: TimepickerModule });
+/** @nocollapse */ TimepickerModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [ReactiveFormsModule, CommonModule, IconModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimepickerModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [ReactiveFormsModule, CommonModule, IconModule],
+                    declarations: [TimepickerComponent],
+                    exports: [TimepickerComponent],
+                    providers: [],
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TimepickerModule, { declarations: [TimepickerComponent], imports: [ReactiveFormsModule, CommonModule, IconModule], exports: [TimepickerComponent] }); })();
+
+const UPLOAD_OPTIONS_DEFAULT = {
+    allowedMimeTypes: [],
+    allowedFileTypes: [],
+    autoUpload: false,
+    maxFileSize: 0,
+    queueLimit: 0,
+    type: 'drop',
+    url: '',
+};
+const UPLOAD_VALIDATION_MESSAGES = new InjectionToken('uploadValidationMessages');
+
+class Uploader {
+    constructor(options) {
+        this.options = UPLOAD_OPTIONS_DEFAULT;
+        this.setOptions(options);
+    }
+    setOptions(options) {
+        this.options = Object.assign({}, this.options, options);
+    }
+    uploadFiles(files) {
+        const formData = this.filesToFormData(files);
+        return new Observable(observer => {
+            const xhr = new XMLHttpRequest();
+            // Progress callback
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percentComplete = e.loaded / e.total;
+                    observer.next({
+                        progress: percentComplete,
+                        data: null,
+                    });
+                }
+            });
+            // Complete callback
+            xhr.onload = () => {
+                observer.next({
+                    progress: 1,
+                    data: xhr.response,
+                });
+                // observer.complete();
+            };
+            // Do request
+            xhr.responseType = 'json';
+            xhr.open('post', this.options.url);
+            xhr.send(formData);
+        });
+    }
+    validateFiles(files) {
+        const validFiles = [];
+        const invalidFiles = [];
+        if (files.length > 0) {
+            for (const file of files) {
+                const errors = [];
+                if (!this.validateFileType(file)) {
+                    errors.push('INVALID_FILE_TYPE');
+                }
+                if (!this.validateFileSize(file)) {
+                    errors.push('INVALID_FILE_SIZE');
+                }
+                if (!this.validateMimeType(file)) {
+                    errors.push('INVALID_MIME_TYPE');
+                }
+                if (errors.length === 0) {
+                    validFiles.push(file);
+                }
+                else {
+                    invalidFiles.push({
+                        reasons: errors,
+                        file,
+                    });
+                }
+            }
+        }
+        return {
+            validFiles,
+            invalidFiles,
+        };
+    }
+    filesToFormData(files) {
+        const formData = new FormData();
+        if (!this.options.url || this.options.url === '') {
+            throw new Error('Define the upload url.');
+        }
+        for (const file of files) {
+            formData.append('file', file);
+        }
+        return formData;
+    }
+    getFileExtension(file) {
+        return file.name.split('.')[file.name.split('.').length - 1];
+    }
+    validateFileType(file) {
+        const allowedFileTypes = this.options.allowedFileTypes;
+        const ext = this.getFileExtension(file);
+        // Filter defined?
+        if (!Array.isArray(allowedFileTypes) || allowedFileTypes.length === 0) {
+            return true;
+        }
+        // Make allowedFileTypes case insensitive
+        const toUpper = (x) => x.toUpperCase();
+        const allowedFileTypesToUpper = allowedFileTypes.map(toUpper);
+        return allowedFileTypesToUpper.lastIndexOf(ext.toUpperCase()) !== -1;
+    }
+    validateFileSize(file) {
+        const maxFileSize = this.options.maxFileSize;
+        // Filter defined?
+        if (!maxFileSize || maxFileSize === 0) {
+            return true;
+        }
+        return maxFileSize > file.size;
+    }
+    validateMimeType(file) {
+        const allowedMimeTypes = this.options.allowedMimeTypes;
+        // Filter defined?
+        if (!Array.isArray(allowedMimeTypes) || allowedMimeTypes.length === 0) {
+            return true;
+        }
+        return allowedMimeTypes.lastIndexOf(file.type) !== -1;
+    }
+}
+
+function UploadQueueComponent_li_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r5 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "li");
+        i0.ɵɵelement(1, "aui-icon", 3);
+        i0.ɵɵelementStart(2, "span", 4);
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "button", 5);
+        i0.ɵɵlistener("click", function UploadQueueComponent_li_1_Template_button_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const i_r3 = restoredCtx.index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.remove(i_r3)); });
+        i0.ɵɵelement(5, "aui-icon", 6);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const file_r2 = ctx.$implicit;
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate(file_r2.name);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ariaLabel", ctx_r0.ariaLabelRemove);
+    }
+}
+function UploadQueueComponent_button_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r7 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 7);
+        i0.ɵɵlistener("click", function UploadQueueComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.uploadFiles()); });
+        i0.ɵɵtext(1, "Upload");
+        i0.ɵɵelementEnd();
+    }
+}
+class UploadQueueComponent {
+    constructor() {
+        this.ariaLabelRemove = 'Verwijder';
+        this.uploadedFiles = new EventEmitter();
+        this.uploadProgress = 0;
+    }
+    remove(index) {
+        this.files.splice(index, 1);
+    }
+    uploadFiles() {
+        const progress = undefined;
+        const data = undefined;
+        this.uploader.uploadFiles(this.files).subscribe((response) => {
+            if (response.progress) {
+                this.uploadProgress = Math.floor(response.progress * 100);
+            }
+            if (response.data) {
+                this.uploadedFiles.emit(response.data);
+                this.files = [];
+            }
+        });
+    }
+}
+/** @nocollapse */ UploadQueueComponent.ɵfac = function UploadQueueComponent_Factory(t) { return new (t || UploadQueueComponent)(); };
+/** @nocollapse */ UploadQueueComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: UploadQueueComponent, selectors: [["aui-upload-queue"]], inputs: { files: "files", uploader: "uploader", ariaLabelRemove: "ariaLabelRemove" }, outputs: { uploadedFiles: "uploadedFiles" }, decls: 3, vars: 2, consts: [[1, "m-upload__files", "u-margin-bottom-xs"], [4, "ngFor", "ngForOf"], ["class", "a-button", "type", "button", 3, "click", 4, "ngIf"], ["name", "ai-common-file-empty"], [1, "m-upload__filename"], ["type", "button", 1, "m-upload__delete", "a-button", "a-button--text", "a-button--neutral", "a-button--s", "has-icon", 3, "click"], ["name", "ai-close", 3, "ariaLabel"], ["type", "button", 1, "a-button", 3, "click"]], template: function UploadQueueComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "ul", 0);
+            i0.ɵɵtemplate(1, UploadQueueComponent_li_1_Template, 6, 2, "li", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(2, UploadQueueComponent_button_2_Template, 2, 0, "button", 2);
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.files);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.files.length > 0);
+        }
+    }, dependencies: [i1.NgForOf, i1.NgIf, i4$1.IconComponent], encapsulation: 2 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UploadQueueComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-upload-queue', template: "<ul class=\"m-upload__files u-margin-bottom-xs\">\n  <li *ngFor=\"let file of files; let i = index\">\n    <aui-icon name=\"ai-common-file-empty\"></aui-icon>\n    <span class=\"m-upload__filename\">{{ file.name }}</span>\n\n    <button\n      (click)=\"remove(i)\"\n      class=\"m-upload__delete a-button a-button--text a-button--neutral a-button--s has-icon\"\n      type=\"button\"\n    >\n      <aui-icon name=\"ai-close\" [ariaLabel]=\"ariaLabelRemove\"></aui-icon>\n    </button>\n  </li>\n</ul>\n\n<button (click)=\"uploadFiles()\" *ngIf=\"files.length > 0\" class=\"a-button\" type=\"button\">Upload</button>\n" }]
+        }], null, { files: [{
+                type: Input
+            }], uploader: [{
+                type: Input
+            }], ariaLabelRemove: [{
+                type: Input
+            }], uploadedFiles: [{
+                type: Output
+            }] });
+})();
+
+const _c0$2 = ["fileInput"];
+function UploadZoneComponent_div_0_div_5_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 10)(1, "label", 11);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "p", 12);
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r3 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("for", ctx_r3.ariaId);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r3.label, " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx_r3.uploadedFilesString);
+    }
+}
+function UploadZoneComponent_div_0_ng_container_6_ng_container_2_ng_container_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵtext(1, ",");
+        i0.ɵɵelementContainerEnd();
+    }
+}
+function UploadZoneComponent_div_0_ng_container_6_ng_container_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵtext(1);
+        i0.ɵɵtemplate(2, UploadZoneComponent_div_0_ng_container_6_ng_container_2_ng_container_2_Template, 2, 0, "ng-container", 8);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const file_r6 = ctx.$implicit;
+        const last_r7 = ctx.last;
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", file_r6.name, " ");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !last_r7);
+    }
+}
+function UploadZoneComponent_div_0_ng_container_6_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "p", 13);
+        i0.ɵɵtemplate(2, UploadZoneComponent_div_0_ng_container_6_ng_container_2_Template, 3, 2, "ng-container", 14);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(3, "aui-progress-bar", 15);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const ctx_r4 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx_r4.uploadingFiles);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("value", ctx_r4.uploadProgress);
+    }
+}
+function UploadZoneComponent_div_0_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r10 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "input", 5, 6);
+        i0.ɵɵlistener("click", function UploadZoneComponent_div_0_Template_input_click_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onFileClick($event)); })("change", function UploadZoneComponent_div_0_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.updateFiles()); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(5, UploadZoneComponent_div_0_div_5_Template, 5, 3, "div", 7);
+        i0.ɵɵtemplate(6, UploadZoneComponent_div_0_ng_container_6_Template, 4, 2, "ng-container", 8);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(7, "small", 9);
+        i0.ɵɵtext(8);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("is-disabled", ctx_r0.disabled);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("id", ctx_r0.id);
+        i0.ɵɵattribute("aria-labelledby", ctx_r0.ariaId);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", !ctx_r0.uploadProgress || ctx_r0.uploadProgress === 0);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx_r0.uploadProgress > 0);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", ctx_r0.description, " ");
+    }
+}
+function UploadZoneComponent_button_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r14 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 16);
+        i0.ɵɵlistener("click", function UploadZoneComponent_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.triggerFile()); });
+        i0.ɵɵelementStart(1, "span", 17);
+        i0.ɵɵprojection(2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "input", 5, 6);
+        i0.ɵɵlistener("click", function UploadZoneComponent_button_1_Template_input_click_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onFileClick($event)); })("change", function UploadZoneComponent_button_1_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.updateFiles()); });
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("disabled", ctx_r1.disabled);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("id", ctx_r1.ariaId);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("id", ctx_r1.id);
+        i0.ɵɵattribute("aria-labelledby", ctx_r1.ariaId);
+    }
+}
+const _c1$2 = [[["", 8, "m-upload__button"]]];
+const _c2 = [".m-upload__button"];
+class UploadZoneComponent {
+    onDragOver(event) {
+        this.preventAndStop(event);
+        this.hasDragOver = true;
+    }
+    onDragLeave(event) {
+        this.preventAndStop(event);
+        this.hasDragOver = false;
+    }
+    onDrop(event) {
+        this.preventAndStop(event);
+        this.hasDragOver = false;
+        const files = this.fileListToArray(event.dataTransfer.files);
+        this.handleFiles(files);
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.id = '';
+        this.accept = [];
+        this.capture = '';
+        this.ariaId = '';
+        this.disabled = false;
+        this.multiple = true;
+        this.label = '';
+        this.description = '';
+        this.uploadedFiles = new EventEmitter();
+        this.queuedFiles = new EventEmitter();
+        this.invalidFiles = new EventEmitter();
+        this.hasDragOver = false;
+        this.uploadProgress = 0;
+    }
+    triggerFile() {
+        this.fileInput.nativeElement.click();
+    }
+    updateFiles() {
+        const files = this.fileListToArray(this.fileInput.nativeElement.files);
+        this.uploadedFilesString = files.map((file) => file.name).join(', ');
+        this.handleFiles(files);
+    }
+    onFileClick(event) {
+        // When removing a file make sure you can add it again later
+        // See: https://stackoverflow.com/questions/59870335/ng2-file-upload-not-allowing-me-to-add-same-doc-after-ive-removed-it-from-que
+        event.target.value = '';
+    }
+    ngAfterViewInit() {
+        if (this.multiple !== false) {
+            this.renderer.setProperty(this.fileInput.nativeElement, 'multiple', 'multiple');
+        }
+        if (!!this.accept.length) {
+            this.renderer.setProperty(this.fileInput.nativeElement, 'accept', this.accept.join());
+        }
+        if (this.disabled) {
+            this.renderer.setProperty(this.fileInput.nativeElement, 'disabled', 'disabled');
+        }
+        if (this.capture !== '') {
+            this.renderer.setAttribute(this.fileInput.nativeElement, 'capture', this.capture);
+        }
+    }
+    handleFiles(files) {
+        const response = this.uploader.validateFiles(files);
+        this.invalidFiles.emit(response.invalidFiles);
+        if (this.uploader.options.autoUpload && response.validFiles.length > 0) {
+            this.uploadFiles(response.validFiles);
+        }
+        else {
+            this.queuedFiles.emit(response.validFiles);
+        }
+    }
+    uploadFiles(files) {
+        // Reset progress
+        this.uploadProgress = 0;
+        this.uploadingFiles = files;
+        // upload
+        this.uploader.uploadFiles(files).subscribe((response) => {
+            if (response.progress) {
+                this.uploadProgress = Math.floor(response.progress * 100);
+            }
+            if (response.data) {
+                this.uploadedFiles.emit(response.data);
+            }
+        }, (err) => {
+            console.log(err);
+        });
+    }
+    fileListToArray(list) {
+        return Array.from(list);
+    }
+    preventAndStop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    uploadedFilesToString() {
+        console.log('UPLOADS TO STRING');
+        return this.fileInput.nativeElement.files.map((file) => file.name).join('');
+    }
+}
+/** @nocollapse */ UploadZoneComponent.ɵfac = function UploadZoneComponent_Factory(t) { return new (t || UploadZoneComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
+/** @nocollapse */ UploadZoneComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: UploadZoneComponent, selectors: [["aui-upload-zone"]], viewQuery: function UploadZoneComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$2, 5);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
+        }
+    }, hostBindings: function UploadZoneComponent_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("dragover", function UploadZoneComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function UploadZoneComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); })("drop", function UploadZoneComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); });
+        }
+    }, inputs: { uploader: "uploader", id: "id", accept: "accept", capture: "capture", ariaId: "ariaId", disabled: "disabled", multiple: "multiple", label: "label", description: "description" }, outputs: { uploadedFiles: "uploadedFiles", queuedFiles: "queuedFiles", invalidFiles: "invalidFiles" }, ngContentSelectors: _c2, decls: 2, vars: 2, consts: [["class", "m-upload", 3, "is-disabled", 4, "ngIf"], ["class", "a-button m-upload__button", "type", "button", 3, "disabled", "click", 4, "ngIf"], [1, "m-upload"], [1, "m-upload__inner"], [1, "m-upload__dropzone"], ["type", "file", 1, "m-upload__input", 3, "id", "click", "change"], ["fileInput", ""], ["class", "m-upload__content", 4, "ngIf"], [4, "ngIf"], [1, "m-upload__description"], [1, "m-upload__content"], [1, "m-upload__message", 3, "for"], [1, "m-upload__uploads", "u-text-bold"], [1, "m-upload__uploads", "u-text-bold", "u-margin-bottom-xs"], [4, "ngFor", "ngForOf"], ["max", "100", 3, "value"], ["type", "button", 1, "a-button", "m-upload__button", 3, "disabled", "click"], [3, "id"]], template: function UploadZoneComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1$2);
+            i0.ɵɵtemplate(0, UploadZoneComponent_div_0_Template, 9, 7, "div", 0);
+            i0.ɵɵtemplate(1, UploadZoneComponent_button_1_Template, 5, 4, "button", 1);
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.uploader.options.type === "drop");
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.uploader.options.type === "button");
+        }
+    }, dependencies: [i1.NgForOf, i1.NgIf, i2.ProgressBarComponent], encapsulation: 2 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UploadZoneComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-upload-zone', template: "<div *ngIf=\"uploader.options.type === 'drop'\" [class.is-disabled]=\"disabled\" class=\"m-upload\">\n  <div class=\"m-upload__inner\">\n    <div class=\"m-upload__dropzone\">\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"m-upload__input\"\n        [id]=\"id\"\n        [attr.aria-labelledby]=\"ariaId\"\n        (click)=\"onFileClick($event)\"\n        (change)=\"updateFiles()\"\n      />\n\n      <div *ngIf=\"!uploadProgress || uploadProgress === 0\" class=\"m-upload__content\">\n        <label [for]=\"ariaId\" class=\"m-upload__message\">\n          {{ label }}\n        </label>\n        <p class=\"m-upload__uploads u-text-bold\">{{ uploadedFilesString }}</p>\n      </div>\n\n      <ng-container *ngIf=\"uploadProgress > 0\">\n        <p class=\"m-upload__uploads u-text-bold u-margin-bottom-xs\">\n          <ng-container *ngFor=\"let file of uploadingFiles; let last = last\">\n            {{ file.name }}\n            <ng-container *ngIf=\"!last\">,</ng-container>\n          </ng-container>\n        </p>\n        <aui-progress-bar [value]=\"uploadProgress\" max=\"100\"></aui-progress-bar>\n      </ng-container>\n    </div>\n  </div>\n\n  <small class=\"m-upload__description\">\n    {{ description }}\n  </small>\n</div>\n\n<button\n  (click)=\"triggerFile()\"\n  *ngIf=\"uploader.options.type === 'button'\"\n  [disabled]=\"disabled\"\n  class=\"a-button m-upload__button\"\n  type=\"button\"\n>\n  <span [id]=\"ariaId\"><ng-content select=\".m-upload__button\"></ng-content></span>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"m-upload__input\"\n    [id]=\"id\"\n    [attr.aria-labelledby]=\"ariaId\"\n    (click)=\"onFileClick($event)\"\n    (change)=\"updateFiles()\"\n  />\n</button>\n" }]
+        }], function () { return [{ type: i0.Renderer2 }]; }, { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: false }]
+            }], uploader: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], capture: [{
+                type: Input
+            }], ariaId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], uploadedFiles: [{
+                type: Output
+            }], queuedFiles: [{
+                type: Output
+            }], invalidFiles: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] });
+})();
+
+class ValidationMessagesService {
+    constructor(initValues) {
+        this.initValues = initValues;
+        this.INVALID_FILE_TYPE = 'INVALID_FILE_TYPE';
+        this.INVALID_FILE_SIZE = 'INVALID_FILE_SIZE';
+        this.INVALID_MIME_TYPE = 'INVALID_MIME_TYPE';
+        if (initValues.INVALID_FILE_TYPE) {
+            this.INVALID_FILE_TYPE = initValues.INVALID_FILE_TYPE;
+        }
+        if (initValues.INVALID_FILE_SIZE) {
+            this.INVALID_FILE_SIZE = initValues.INVALID_FILE_SIZE;
+        }
+        if (initValues.INVALID_MIME_TYPE) {
+            this.INVALID_MIME_TYPE = initValues.INVALID_MIME_TYPE;
+        }
+    }
+}
+/** @nocollapse */ ValidationMessagesService.ɵfac = function ValidationMessagesService_Factory(t) { return new (t || ValidationMessagesService)(i0.ɵɵinject(UPLOAD_VALIDATION_MESSAGES)); };
+/** @nocollapse */ ValidationMessagesService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ValidationMessagesService, factory: ValidationMessagesService.ɵfac });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ValidationMessagesService, [{
+            type: Injectable
+        }], function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [UPLOAD_VALIDATION_MESSAGES]
+                    }] }];
+    }, null);
+})();
+
+function ValidationListComponent_li_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r4 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "li", 2);
+        i0.ɵɵelement(1, "aui-icon", 3);
+        i0.ɵɵelementStart(2, "span", 4);
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "span", 5);
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "button", 6);
+        i0.ɵɵlistener("click", function ValidationListComponent_li_1_Template_button_click_6_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const i_r2 = restoredCtx.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.remove(i_r2)); });
+        i0.ɵɵelement(7, "aui-icon", 7);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const invalidFile_r1 = ctx.$implicit;
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate(invalidFile_r1.file.name);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(ctx_r0.formatReasons(invalidFile_r1.reasons));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ariaLabel", ctx_r0.ariaLabelRemove);
+    }
+}
+class ValidationListComponent {
+    constructor(messagesService) {
+        this.messagesService = messagesService;
+        this.invalidFiles = [];
+        this.ariaLabelRemove = 'Verwijder';
+    }
+    remove(index) {
+        this.invalidFiles.splice(index, 1);
+    }
+    formatReasons(reasons) {
+        const result = [];
+        for (const reason of reasons) {
+            result.push(this.messagesService[reason]);
+        }
+        return result.join(', ');
+    }
+}
+/** @nocollapse */ ValidationListComponent.ɵfac = function ValidationListComponent_Factory(t) { return new (t || ValidationListComponent)(i0.ɵɵdirectiveInject(ValidationMessagesService)); };
+/** @nocollapse */ ValidationListComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ValidationListComponent, selectors: [["aui-validation-list"]], inputs: { invalidFiles: "invalidFiles", ariaLabelRemove: "ariaLabelRemove" }, decls: 2, vars: 1, consts: [[1, "m-upload__files"], ["class", "is-error", 4, "ngFor", "ngForOf"], [1, "is-error"], ["name", "ai-alert-triangle"], [1, "m-upload__filename"], [1, "m-upload__error"], ["type", "button", 1, "m-upload__delete", "a-button", "a-button--text", "a-button--danger", "a-button--s", "has-icon", 3, "click"], ["name", "ai-close", 3, "ariaLabel"]], template: function ValidationListComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "ul", 0);
+            i0.ɵɵtemplate(1, ValidationListComponent_li_1_Template, 8, 3, "li", 1);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.invalidFiles);
+        }
+    }, dependencies: [i1.NgForOf, i4$1.IconComponent], encapsulation: 2 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ValidationListComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-validation-list', template: "<ul class=\"m-upload__files\">\n  <li *ngFor=\"let invalidFile of invalidFiles; let i = index\" class=\"is-error\">\n    <aui-icon name=\"ai-alert-triangle\"></aui-icon>\n    <span class=\"m-upload__filename\">{{ invalidFile.file.name }}</span>\n    <span class=\"m-upload__error\">{{ formatReasons(invalidFile.reasons) }}</span>\n\n    <button\n      (click)=\"remove(i)\"\n      class=\"m-upload__delete a-button a-button--text a-button--danger a-button--s has-icon\"\n      type=\"button\"\n    >\n      <aui-icon name=\"ai-close\" [ariaLabel]=\"ariaLabelRemove\"></aui-icon>\n    </button>\n  </li>\n</ul>\n" }]
+        }], function () { return [{ type: ValidationMessagesService }]; }, { invalidFiles: [{
+                type: Input
+            }], ariaLabelRemove: [{
+                type: Input
+            }] });
+})();
+
+function UploadComponent_aui_upload_queue_5_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r2 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "aui-upload-queue", 5);
+        i0.ɵɵlistener("uploadedFiles", function UploadComponent_aui_upload_queue_5_Template_aui_upload_queue_uploadedFiles_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadedFiles($event)); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ariaLabelRemove", ctx_r0.ariaLabelRemove)("files", ctx_r0.queuedFiles)("uploader", ctx_r0.uploader);
+    }
+}
+const _c0$1 = [[["", 8, "m-upload__button"]]];
+const _c1$1 = [".m-upload__button"];
+class UploadComponent {
+    constructor() {
+        this.id = '';
+        this.accept = [];
+        this.capture = '';
+        this.ariaLabelRemove = 'Verwijder';
+        this.disabled = false;
+        this.multiple = true;
+        this.label = '';
+        this.description = '';
+        this.options = UPLOAD_OPTIONS_DEFAULT;
+        this.selectUploadedFiles = new EventEmitter();
+        this.uploadedFiles = [];
+        this.invalidFiles = [];
+        this.queuedFiles = [];
+    }
+    ngOnInit() {
+        if (!this.id) {
+            this.ariaId = 'aui-upload-' + Math.random().toString(36).substring(2);
+            this.id = this.ariaId;
+        }
+        this.uploader = new Uploader(this.options);
+    }
+    onUploadedFiles(files) {
+        this.uploadedFiles = this.uploadedFiles.concat(files);
+        this.selectUploadedFiles.emit(this.uploadedFiles);
+    }
+    onInvalidFiles(files) {
+        this.invalidFiles = files;
+    }
+    onQueuedFiles(files) {
+        this.queuedFiles = this.queuedFiles.concat(files);
+    }
+}
+/** @nocollapse */ UploadComponent.ɵfac = function UploadComponent_Factory(t) { return new (t || UploadComponent)(); };
+/** @nocollapse */ UploadComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: UploadComponent, selectors: [["aui-upload"]], inputs: { id: "id", accept: "accept", capture: "capture", ariaLabelRemove: "ariaLabelRemove", disabled: "disabled", multiple: "multiple", label: "label", description: "description", options: "options" }, outputs: { selectUploadedFiles: "selectUploadedFiles" }, ngContentSelectors: _c1$1, decls: 6, vars: 12, consts: [[1, "m-upload", "aui-upload"], [3, "id", "accept", "capture", "ariaId", "disabled", "multiple", "uploader", "label", "description", "invalidFiles", "queuedFiles", "uploadedFiles"], [1, "m-upload__button"], [3, "ariaLabelRemove", "invalidFiles"], [3, "ariaLabelRemove", "files", "uploader", "uploadedFiles", 4, "ngIf"], [3, "ariaLabelRemove", "files", "uploader", "uploadedFiles"]], template: function UploadComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$1);
+            i0.ɵɵelementStart(0, "div", 0)(1, "aui-upload-zone", 1);
+            i0.ɵɵlistener("invalidFiles", function UploadComponent_Template_aui_upload_zone_invalidFiles_1_listener($event) { return ctx.onInvalidFiles($event); })("queuedFiles", function UploadComponent_Template_aui_upload_zone_queuedFiles_1_listener($event) { return ctx.onQueuedFiles($event); })("uploadedFiles", function UploadComponent_Template_aui_upload_zone_uploadedFiles_1_listener($event) { return ctx.onUploadedFiles($event); });
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵprojection(3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(4, "aui-validation-list", 3);
+            i0.ɵɵtemplate(5, UploadComponent_aui_upload_queue_5_Template, 1, 3, "aui-upload-queue", 4);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("id", ctx.id)("accept", ctx.accept)("capture", ctx.capture)("ariaId", ctx.ariaId)("disabled", ctx.disabled)("multiple", ctx.multiple)("uploader", ctx.uploader)("label", ctx.label)("description", ctx.description);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ariaLabelRemove", ctx.ariaLabelRemove)("invalidFiles", ctx.invalidFiles);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !(ctx.options == null ? null : ctx.options.autoUpload));
+        }
+    }, dependencies: [i1.NgIf, UploadQueueComponent, UploadZoneComponent, ValidationListComponent], styles: [".m-upload__button[_ngcontent-%COMP%] > .m-upload__input[_ngcontent-%COMP%]{display:none}"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UploadComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-upload', template: "<div class=\"m-upload aui-upload\">\n  <aui-upload-zone\n    [id]=\"id\"\n    [accept]=\"accept\"\n    [capture]=\"capture\"\n    [ariaId]=\"ariaId\"\n    [disabled]=\"disabled\"\n    [multiple]=\"multiple\"\n    [uploader]=\"uploader\"\n    (invalidFiles)=\"onInvalidFiles($event)\"\n    (queuedFiles)=\"onQueuedFiles($event)\"\n    (uploadedFiles)=\"onUploadedFiles($event)\"\n    [label]=\"label\"\n    [description]=\"description\"\n  >\n    <div class=\"m-upload__button\">\n      <ng-content select=\".m-upload__button\"></ng-content>\n    </div>\n  </aui-upload-zone>\n  <aui-validation-list [ariaLabelRemove]=\"ariaLabelRemove\" [invalidFiles]=\"invalidFiles\"></aui-validation-list>\n  <aui-upload-queue\n    (uploadedFiles)=\"onUploadedFiles($event)\"\n    *ngIf=\"!options?.autoUpload\"\n    [ariaLabelRemove]=\"ariaLabelRemove\"\n    [files]=\"queuedFiles\"\n    [uploader]=\"uploader\"\n  ></aui-upload-queue>\n</div>\n", styles: [".m-upload__button>.m-upload__input{display:none}\n"] }]
+        }], null, { id: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], capture: [{
+                type: Input
+            }], ariaLabelRemove: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectUploadedFiles: [{
+                type: Output
+            }] });
+})();
+
+const _c0 = [[["", 8, "m-upload__message"]], [["", 8, "m-upload__description"]], [["", 8, "m-upload__button"]]];
+const _c1 = [".m-upload__message", ".m-upload__description", ".m-upload__button"];
+class UploadInputComponent {
+    constructor() {
+        this.propagateChange = (_) => undefined;
+    }
+    writeValue(value) {
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched() {
+    }
+    onUpload(files) {
+        const data = (this.format ? this.format(files) : files);
+        this.propagateChange(data);
+    }
+}
+/** @nocollapse */ UploadInputComponent.ɵfac = function UploadInputComponent_Factory(t) { return new (t || UploadInputComponent)(); };
+/** @nocollapse */ UploadInputComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: UploadInputComponent, selectors: [["aui-upload-input"]], inputs: { options: "options", format: "format" }, features: [i0.ɵɵProvidersFeature([{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: UploadInputComponent,
+                multi: true,
+            }])], ngContentSelectors: _c1, decls: 7, vars: 1, consts: [[3, "options", "selectUploadedFiles"], [1, "m-upload__message"], [1, "m-upload__description"], [1, "m-upload__button"]], template: function UploadInputComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "aui-upload", 0);
+            i0.ɵɵlistener("selectUploadedFiles", function UploadInputComponent_Template_aui_upload_selectUploadedFiles_0_listener($event) { return ctx.onUpload($event); });
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 2);
+            i0.ɵɵprojection(4, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 3);
+            i0.ɵɵprojection(6, 2);
+            i0.ɵɵelementEnd()();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("options", ctx.options);
+        }
+    }, dependencies: [UploadComponent], encapsulation: 2 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UploadInputComponent, [{
+            type: Component,
+            args: [{ selector: 'aui-upload-input', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: UploadInputComponent,
+                            multi: true,
+                        }], template: "<aui-upload (selectUploadedFiles)=\"onUpload($event)\" [options]=\"options\">\n  <div class=\"m-upload__message\">\n    <ng-content select=\".m-upload__message\"></ng-content>\n  </div>\n  <div class=\"m-upload__description\">\n    <ng-content select=\".m-upload__description\"></ng-content>\n  </div>\n  <div class=\"m-upload__button\">\n    <ng-content select=\".m-upload__button\"></ng-content>\n  </div>\n</aui-upload>\n" }]
+        }], null, { options: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }] });
+})();
+
+class UploadModule {
+    static forChild(validationMessages = {}) {
+        return {
+            ngModule: UploadModule,
+            providers: [{ provide: UPLOAD_VALIDATION_MESSAGES, useValue: validationMessages }],
+        };
+    }
+}
+/** @nocollapse */ UploadModule.ɵfac = function UploadModule_Factory(t) { return new (t || UploadModule)(); };
+/** @nocollapse */ UploadModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: UploadModule });
+/** @nocollapse */ UploadModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [ValidationMessagesService, { provide: UPLOAD_VALIDATION_MESSAGES, useValue: {} }], imports: [CommonModule, ProgressBarModule, FormsModule, IconModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UploadModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ProgressBarModule, FormsModule, IconModule],
+                    declarations: [
+                        UploadComponent,
+                        UploadInputComponent,
+                        UploadQueueComponent,
+                        UploadZoneComponent,
+                        ValidationListComponent,
+                    ],
+                    exports: [UploadComponent, UploadInputComponent, UploadQueueComponent, UploadZoneComponent, ValidationListComponent],
+                    providers: [ValidationMessagesService, { provide: UPLOAD_VALIDATION_MESSAGES, useValue: {} }],
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(UploadModule, { declarations: [UploadComponent,
+            UploadInputComponent,
+            UploadQueueComponent,
+            UploadZoneComponent,
+            ValidationListComponent], imports: [CommonModule, ProgressBarModule, FormsModule, IconModule], exports: [UploadComponent, UploadInputComponent, UploadQueueComponent, UploadZoneComponent, ValidationListComponent] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutoCompleteComponent, AutoCompleteModule, DATEPICKER_DEFAULT_ERROR_LABELS, DATEPICKER_ERROR_LABELS, DATEPICKER_SEPARATOR_CHAR, DatepickerComponent, DatepickerModule, MaskDirective, MaskModule, RangeSliderComponent, RangeSliderModule, SearchFilterComponent, SearchFilterModule, TimePickerValidators, TimepickerComponent, TimepickerInputSize, TimepickerModule, UPLOAD_OPTIONS_DEFAULT, UPLOAD_VALIDATION_MESSAGES, UploadComponent, UploadInputComponent, UploadModule, UploadQueueComponent, UploadZoneComponent, Uploader, ValidationListComponent, ValidationMessagesService };
+//# sourceMappingURL=acpaas-ui-ngx-forms.mjs.map