@leanix/components 0.4.3 → 0.4.4

package/fesm2020/leanix-components.mjs

@@ -22,9 +22,7 @@ import { Renderer, marked } from 'marked';
 import * as i1$4 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from 'ngx-bootstrap/datepicker';
-import { DatePickerComponent, DateFormatter, DatepickerModule } from 'ngx-bootstrap/datepicker';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i1$5 from '@angular/cdk/drag-drop';
@@ -3202,6 +3200,1133 @@ function isValidDateString(dateString) {
     return dateString !== null && /^\d\d\d\d-\d\d-\d\d$/.test(dateString) && !isNaN$1(Date.parse(dateString));
 }
 
+/* format method is monkey-patched in date-input component, leaving this implementation as dummy */
+class DateFormatter {
+    format(date, format$1, locale) {
+        return format(date, format$1, { locale });
+    }
+}
+
+/* tslint:disable: max-file-line-count */
+class DatePickerInnerComponent {
+    constructor() {
+        this.selectionDone = new EventEmitter(undefined);
+        this.update = new EventEmitter(false);
+        this.activeDateChange = new EventEmitter(undefined);
+        /* tslint:disable-next-line: no-any*/
+        this.stepDay = {};
+        /* tslint:disable-next-line: no-any*/
+        this.stepMonth = {};
+        /* tslint:disable-next-line: no-any*/
+        this.stepYear = {};
+        this.modes = ['day', 'month', 'year'];
+        this.dateFormatter = new DateFormatter();
+    }
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        this._activeDate = value;
+    }
+    // todo: add formatter value to Date object
+    ngOnInit() {
+        // todo: use date for unique value
+        this.uniqueId = `datepicker--${Math.floor(Math.random() * 10000)}`;
+        if (this.initDate) {
+            this.activeDate = this.initDate;
+            this.selectedDate = new Date(this.activeDate.valueOf());
+            this.update.emit(this.activeDate);
+        }
+        else if (this.activeDate === undefined) {
+            this.activeDate = new Date();
+        }
+    }
+    // this.refreshView should be called here to reflect the changes on the fly
+    // tslint:disable-next-line:no-unused-variable
+    ngOnChanges(changes) {
+        this.refreshView();
+        this.checkIfActiveDateGotUpdated(changes['activeDate']);
+    }
+    // Check if activeDate has been update and then emit the activeDateChange with the new date
+    /* tslint:disable-next-line: no-any */
+    checkIfActiveDateGotUpdated(activeDate) {
+        if (activeDate && !activeDate.firstChange) {
+            const previousValue = activeDate.previousValue;
+            if (previousValue && previousValue instanceof Date && previousValue.getTime() !== activeDate.currentValue.getTime()) {
+                this.activeDateChange.emit(this.activeDate);
+            }
+        }
+    }
+    setCompareHandler(handler, type) {
+        if (type === 'day') {
+            this.compareHandlerDay = handler;
+        }
+        if (type === 'month') {
+            this.compareHandlerMonth = handler;
+        }
+        if (type === 'year') {
+            this.compareHandlerYear = handler;
+        }
+    }
+    compare(date1, date2) {
+        if (date1 === undefined || date2 === undefined) {
+            return undefined;
+        }
+        if (this.datepickerMode === 'day' && this.compareHandlerDay) {
+            return this.compareHandlerDay(date1, date2);
+        }
+        if (this.datepickerMode === 'month' && this.compareHandlerMonth) {
+            return this.compareHandlerMonth(date1, date2);
+        }
+        if (this.datepickerMode === 'year' && this.compareHandlerYear) {
+            return this.compareHandlerYear(date1, date2);
+        }
+        return void 0;
+    }
+    setRefreshViewHandler(handler, type) {
+        if (type === 'day') {
+            this.refreshViewHandlerDay = handler;
+        }
+        if (type === 'month') {
+            this.refreshViewHandlerMonth = handler;
+        }
+        if (type === 'year') {
+            this.refreshViewHandlerYear = handler;
+        }
+    }
+    refreshView() {
+        if (this.datepickerMode === 'day' && this.refreshViewHandlerDay) {
+            this.refreshViewHandlerDay();
+        }
+        if (this.datepickerMode === 'month' && this.refreshViewHandlerMonth) {
+            this.refreshViewHandlerMonth();
+        }
+        if (this.datepickerMode === 'year' && this.refreshViewHandlerYear) {
+            this.refreshViewHandlerYear();
+        }
+    }
+    dateFilter(date, format) {
+        return this.dateFormatter.format(date, format, this.locale);
+    }
+    /* tslint:disable-next-line: no-any*/
+    isActive(dateObject) {
+        if (this.compare(dateObject.date, this.activeDate) === 0) {
+            this.activeDateId = dateObject.uid;
+            return true;
+        }
+        return false;
+    }
+    /* tslint:disable-next-line: no-any*/
+    createDateObject(date, format) {
+        /* tslint:disable-next-line: no-any*/
+        const dateObject = {};
+        dateObject.date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        dateObject.date = this.fixTimeZone(dateObject.date);
+        dateObject.label = this.dateFilter(date, format);
+        dateObject.selected = this.compare(date, this.selectedDate) === 0;
+        dateObject.disabled = this.isDisabled(date);
+        dateObject.current = this.compare(date, new Date()) === 0;
+        dateObject.customClass = this.getCustomClassForDate(dateObject.date);
+        return dateObject;
+    }
+    /* tslint:disable-next-line: no-any*/
+    split(arr, size) {
+        /* tslint:disable-next-line: no-any*/
+        const arrays = [];
+        while (arr.length > 0) {
+            arrays.push(arr.splice(0, size));
+        }
+        return arrays;
+    }
+    // Fix a hard-reproducible bug with timezones
+    // The bug depends on OS, browser, current timezone and current date
+    // i.e.
+    // var date = new Date(2014, 0, 1);
+    // console.log(date.getFullYear(), date.getMonth(), date.getDate(),
+    // date.getHours()); can result in "2013 11 31 23" because of the bug.
+    fixTimeZone(date) {
+        const hours = date.getHours();
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours === 23 ? hours + 2 : 0);
+    }
+    select(date, isManual = true) {
+        if (this.datepickerMode === this.minMode) {
+            if (!this.activeDate) {
+                this.activeDate = new Date(0, 0, 0, 0, 0, 0, 0);
+            }
+            this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+            this.activeDate = this.fixTimeZone(this.activeDate);
+            if (isManual) {
+                this.selectionDone.emit(this.activeDate);
+            }
+        }
+        else {
+            this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+            this.activeDate = this.fixTimeZone(this.activeDate);
+            if (isManual) {
+                this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) - 1];
+            }
+        }
+        this.selectedDate = new Date(this.activeDate.valueOf());
+        this.update.emit(this.activeDate);
+        this.refreshView();
+    }
+    move(direction) {
+        /* tslint:disable-next-line: no-any*/
+        let expectedStep;
+        if (this.datepickerMode === 'day') {
+            expectedStep = this.stepDay;
+        }
+        if (this.datepickerMode === 'month') {
+            expectedStep = this.stepMonth;
+        }
+        if (this.datepickerMode === 'year') {
+            expectedStep = this.stepYear;
+        }
+        if (expectedStep) {
+            const year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
+            const month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
+            this.activeDate = new Date(year, month, 1);
+            this.refreshView();
+            this.activeDateChange.emit(this.activeDate);
+        }
+    }
+    toggleMode(_direction) {
+        const direction = _direction || 1;
+        if ((this.datepickerMode === this.maxMode && direction === 1) || (this.datepickerMode === this.minMode && direction === -1)) {
+            return;
+        }
+        this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) + direction];
+        this.refreshView();
+    }
+    getCustomClassForDate(date) {
+        if (!this.customClass) {
+            return '';
+        }
+        // todo: build a hash of custom classes, it will work faster
+        const customClassObject = this.customClass.find((customClass) => {
+            return customClass.date.valueOf() === date.valueOf() && customClass.mode === this.datepickerMode;
+        }, this);
+        return customClassObject === undefined ? '' : customClassObject.clazz;
+    }
+    compareDateDisabled(date1Disabled, date2) {
+        if (date1Disabled === undefined || date2 === undefined) {
+            return undefined;
+        }
+        if (date1Disabled.mode === 'day' && this.compareHandlerDay) {
+            return this.compareHandlerDay(date1Disabled.date, date2);
+        }
+        if (date1Disabled.mode === 'month' && this.compareHandlerMonth) {
+            return this.compareHandlerMonth(date1Disabled.date, date2);
+        }
+        if (date1Disabled.mode === 'year' && this.compareHandlerYear) {
+            return this.compareHandlerYear(date1Disabled.date, date2);
+        }
+        return undefined;
+    }
+    isDisabled(date) {
+        let isDateDisabled = false;
+        if (this.dateDisabled) {
+            this.dateDisabled.forEach((disabledDate) => {
+                if (this.compareDateDisabled(disabledDate, date) === 0) {
+                    isDateDisabled = true;
+                }
+            });
+        }
+        if (this.dayDisabled) {
+            isDateDisabled = isDateDisabled || this.dayDisabled.indexOf(date.getDay()) > -1;
+        }
+        return (isDateDisabled || (this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0));
+    }
+}
+DatePickerInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatePickerInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatePickerInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: DatePickerInnerComponent, selector: "datepicker-inner", inputs: { locale: "locale", datepickerMode: "datepickerMode", startingDay: "startingDay", yearRange: "yearRange", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", initDate: "initDate", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", update: "update", activeDateChange: "activeDateChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
+    <div *ngIf="datepickerMode" class="well well-sm bg-faded p-a card" role="application">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatePickerInnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'datepicker-inner',
+                    template: `
+    <!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
+    <div *ngIf="datepickerMode" class="well well-sm bg-faded p-a card" role="application">
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], propDecorators: { locale: [{
+                type: Input
+            }], datepickerMode: [{
+                type: Input
+            }], startingDay: [{
+                type: Input
+            }], yearRange: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minMode: [{
+                type: Input
+            }], maxMode: [{
+                type: Input
+            }], showWeeks: [{
+                type: Input
+            }], formatDay: [{
+                type: Input
+            }], formatMonth: [{
+                type: Input
+            }], formatYear: [{
+                type: Input
+            }], formatDayHeader: [{
+                type: Input
+            }], formatDayTitle: [{
+                type: Input
+            }], formatMonthTitle: [{
+                type: Input
+            }], onlyCurrentMonth: [{
+                type: Input
+            }], shortcutPropagation: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], monthColLimit: [{
+                type: Input
+            }], yearColLimit: [{
+                type: Input
+            }], dateDisabled: [{
+                type: Input
+            }], dayDisabled: [{
+                type: Input
+            }], initDate: [{
+                type: Input
+            }], selectionDone: [{
+                type: Output
+            }], update: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], activeDate: [{
+                type: Input
+            }] } });
+
+class DatepickerConfig {
+    constructor() {
+        this.locale = 'en';
+        this.datepickerMode = 'day';
+        this.startingDay = 0;
+        this.yearRange = 20;
+        this.minMode = 'day';
+        this.maxMode = 'year';
+        this.showWeeks = true;
+        this.formatDay = 'DD';
+        this.formatMonth = 'MMMM';
+        this.formatYear = 'YYYY';
+        this.formatDayHeader = 'dd';
+        this.formatDayTitle = 'MMMM YYYY';
+        this.formatMonthTitle = 'YYYY';
+        this.onlyCurrentMonth = false;
+        this.monthColLimit = 3;
+        this.yearColLimit = 5;
+        this.shortcutPropagation = false;
+    }
+}
+DatepickerConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DatepickerConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatepickerConfig });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatepickerConfig, decorators: [{
+            type: Injectable
+        }] });
+
+const isBs3 = () => true;
+
+// @deprecated
+class DayPickerComponent {
+    constructor(datePicker) {
+        this.labels = [];
+        this.rows = [];
+        this.weekNumbers = [];
+        this.datePicker = datePicker;
+    }
+    get isBs4() {
+        return !isBs3();
+    }
+    /*protected getDaysInMonth(year:number, month:number) {
+     return ((month === 1) && (year % 4 === 0) &&
+     ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
+     }*/
+    ngOnInit() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        this.datePicker.stepDay = { months: 1 };
+        this.datePicker.setRefreshViewHandler(function () {
+            const year = this.activeDate.getFullYear();
+            const month = this.activeDate.getMonth();
+            const firstDayOfMonth = new Date(year, month, 1);
+            const difference = this.startingDay - firstDayOfMonth.getDay();
+            const numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
+            const firstDate = new Date(firstDayOfMonth.getTime());
+            if (numDisplayedFromPreviousMonth > 0) {
+                firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+            }
+            // 42 is the number of days on a six-week calendar
+            const _days = self.getDates(firstDate, 42);
+            const days = [];
+            for (let i = 0; i < 42; i++) {
+                const _dateObject = this.createDateObject(_days[i], this.formatDay);
+                _dateObject.secondary = _days[i]?.getMonth() !== month;
+                _dateObject.uid = this.uniqueId + '-' + i;
+                days[i] = _dateObject;
+            }
+            self.labels = [];
+            for (let j = 0; j < 7; j++) {
+                self.labels[j] = {};
+                self.labels[j].abbr = this.dateFilter(days[j].date, this.formatDayHeader);
+                self.labels[j].full = this.dateFilter(days[j].date, 'EEEE');
+            }
+            self.title = this.dateFilter(this.activeDate, this.formatDayTitle);
+            self.rows = this.split(days, 7);
+            if (this.showWeeks) {
+                self.weekNumbers = [];
+                const thursdayIndex = (4 + 7 - this.startingDay) % 7;
+                const numWeeks = self.rows.length;
+                for (let curWeek = 0; curWeek < numWeeks; curWeek++) {
+                    self.weekNumbers.push(self.getISO8601WeekNumber(self.rows[curWeek][thursdayIndex].date));
+                }
+            }
+        }, 'day');
+        this.datePicker.setCompareHandler(function (date1, date2) {
+            const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+            const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+            return d1.getTime() - d2.getTime();
+        }, 'day');
+        this.datePicker.refreshView();
+    }
+    getDates(startDate, n) {
+        const dates = new Array(n);
+        let current = new Date(startDate.getTime());
+        let i = 0;
+        let date;
+        while (i < n) {
+            date = new Date(current.getTime());
+            date = this.datePicker.fixTimeZone(date);
+            dates[i++] = date;
+            current = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
+        }
+        return dates;
+    }
+    getISO8601WeekNumber(date) {
+        const checkDate = new Date(date.getTime());
+        // Thursday
+        checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+        const time = checkDate.getTime();
+        // Compare with Jan 1
+        checkDate.setMonth(0);
+        checkDate.setDate(1);
+        return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
+    }
+}
+DayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DayPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+DayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: DayPickerComponent, selector: "daypicker", ngImport: i0, template: `
+    <table
+      *ngIf="datePicker.datepickerMode === 'day'"
+      role="grid"
+      [attr.aria-labelledby]="datePicker.uniqueId + '-title'"
+      aria-activedescendant="activeDateId"
+    >
+      <thead>
+        <tr>
+          <th>
+            <button
+              *ngIf="!isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-left float-left"
+              (click)="datePicker.move(-1)"
+              tabindex="-1"
+            >
+              ‹
+            </button>
+            <button
+              *ngIf="isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-left float-left"
+              (click)="datePicker.move(-1)"
+              tabindex="-1"
+            >
+              &lt;
+            </button>
+          </th>
+          <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
+            <button
+              [id]="datePicker.uniqueId + '-title'"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm"
+              (click)="datePicker.toggleMode(0)"
+              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+              tabindex="-1"
+              style="width:100%;"
+            >
+              <strong>{{ title }}</strong>
+            </button>
+          </th>
+          <th>
+            <button
+              *ngIf="!isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-right float-right"
+              (click)="datePicker.move(1)"
+              tabindex="-1"
+            >
+              ›
+            </button>
+            <button
+              *ngIf="isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-right float-right"
+              (click)="datePicker.move(1)"
+              tabindex="-1"
+            >
+              &gt;
+            </button>
+          </th>
+        </tr>
+        <tr>
+          <th *ngIf="datePicker.showWeeks"></th>
+          <th *ngFor="let labelz of labels" class="text-center">
+            <small aria-label="labelz.full"
+              ><b>{{ labelz.abbr }}</b></small
+            >
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
+          <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
+            <td *ngIf="datePicker.showWeeks" class="h6" class="text-center">
+              <em>{{ weekNumbers[index] }}</em>
+            </td>
+            <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
+              <button
+                type="button"
+                style="min-width:100%;"
+                class="btn btn-sm {{ dtz.customClass }}"
+                *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
+                [ngClass]="{
+                  'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
+                  'btn-info': dtz.selected,
+                  disabled: dtz.disabled,
+                  active: !isBs4 && datePicker.isActive(dtz),
+                  'btn-default': !isBs4
+                }"
+                [disabled]="dtz.disabled"
+                (click)="datePicker.select(dtz.date)"
+                tabindex="-1"
+              >
+                <span [ngClass]="{ 'text-muted': dtz.secondary || dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
+              </button>
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DayPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daypicker', template: `
+    <table
+      *ngIf="datePicker.datepickerMode === 'day'"
+      role="grid"
+      [attr.aria-labelledby]="datePicker.uniqueId + '-title'"
+      aria-activedescendant="activeDateId"
+    >
+      <thead>
+        <tr>
+          <th>
+            <button
+              *ngIf="!isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-left float-left"
+              (click)="datePicker.move(-1)"
+              tabindex="-1"
+            >
+              ‹
+            </button>
+            <button
+              *ngIf="isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-left float-left"
+              (click)="datePicker.move(-1)"
+              tabindex="-1"
+            >
+              &lt;
+            </button>
+          </th>
+          <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
+            <button
+              [id]="datePicker.uniqueId + '-title'"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm"
+              (click)="datePicker.toggleMode(0)"
+              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+              tabindex="-1"
+              style="width:100%;"
+            >
+              <strong>{{ title }}</strong>
+            </button>
+          </th>
+          <th>
+            <button
+              *ngIf="!isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-right float-right"
+              (click)="datePicker.move(1)"
+              tabindex="-1"
+            >
+              ›
+            </button>
+            <button
+              *ngIf="isBs4"
+              type="button"
+              class="btn btn-default btn-secondary btn-sm pull-right float-right"
+              (click)="datePicker.move(1)"
+              tabindex="-1"
+            >
+              &gt;
+            </button>
+          </th>
+        </tr>
+        <tr>
+          <th *ngIf="datePicker.showWeeks"></th>
+          <th *ngFor="let labelz of labels" class="text-center">
+            <small aria-label="labelz.full"
+              ><b>{{ labelz.abbr }}</b></small
+            >
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
+          <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
+            <td *ngIf="datePicker.showWeeks" class="h6" class="text-center">
+              <em>{{ weekNumbers[index] }}</em>
+            </td>
+            <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
+              <button
+                type="button"
+                style="min-width:100%;"
+                class="btn btn-sm {{ dtz.customClass }}"
+                *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
+                [ngClass]="{
+                  'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
+                  'btn-info': dtz.selected,
+                  disabled: dtz.disabled,
+                  active: !isBs4 && datePicker.isActive(dtz),
+                  'btn-default': !isBs4
+                }"
+                [disabled]="dtz.disabled"
+                (click)="datePicker.select(dtz.date)"
+                tabindex="-1"
+              >
+                <span [ngClass]="{ 'text-muted': dtz.secondary || dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
+              </button>
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+    </table>
+  `, styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DatePickerInnerComponent }]; } });
+
+// @deprecated
+class MonthPickerComponent {
+    constructor(datePicker) {
+        this.rows = [];
+        this.datePicker = datePicker;
+    }
+    get isBs4() {
+        return !isBs3();
+    }
+    ngOnInit() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        this.datePicker.stepMonth = { years: 1 };
+        this.datePicker.setRefreshViewHandler(function () {
+            const months = new Array(12);
+            const year = this.activeDate.getFullYear();
+            let date;
+            for (let i = 0; i < 12; i++) {
+                date = new Date(year, i, 1);
+                date = this.fixTimeZone(date);
+                months[i] = this.createDateObject(date, this.formatMonth);
+                months[i].uid = this.uniqueId + '-' + i;
+            }
+            self.title = this.dateFilter(this.activeDate, this.formatMonthTitle);
+            self.rows = this.split(months, self.datePicker.monthColLimit);
+        }, 'month');
+        this.datePicker.setCompareHandler(function (date1, date2) {
+            const d1 = new Date(date1.getFullYear(), date1.getMonth());
+            const d2 = new Date(date2.getFullYear(), date2.getMonth());
+            return d1.getTime() - d2.getTime();
+        }, 'month');
+        this.datePicker.refreshView();
+    }
+}
+MonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MonthPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+MonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: MonthPickerComponent, selector: "monthpicker", ngImport: i0, template: `
+    <table *ngIf="datePicker.datepickerMode === 'month'" role="grid">
+      <thead>
+        <tr>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
+          </th>
+          <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
+            <button
+              [id]="datePicker.uniqueId + '-title'"
+              type="button"
+              class="btn btn-default btn-sm"
+              (click)="datePicker.toggleMode(0)"
+              [disabled]="datePicker.datepickerMode === maxMode"
+              [ngClass]="{ disabled: datePicker.datepickerMode === maxMode }"
+              tabindex="-1"
+              style="width:100%;"
+            >
+              <strong>{{ title }}</strong>
+            </button>
+          </th>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+              ›
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let rowz of rows">
+          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
+            <button
+              type="button"
+              style="min-width:100%;"
+              class="btn btn-default"
+              [ngClass]="{
+                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
+                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
+                disabled: dtz.disabled,
+                active: !isBs4 && datePicker.isActive(dtz)
+              }"
+              [disabled]="dtz.disabled"
+              (click)="datePicker.select(dtz.date)"
+              tabindex="-1"
+            >
+              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MonthPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monthpicker', template: `
+    <table *ngIf="datePicker.datepickerMode === 'month'" role="grid">
+      <thead>
+        <tr>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
+          </th>
+          <th [attr.colspan]="datePicker.monthColLimit - 2 <= 0 ? 1 : datePicker.monthColLimit - 2">
+            <button
+              [id]="datePicker.uniqueId + '-title'"
+              type="button"
+              class="btn btn-default btn-sm"
+              (click)="datePicker.toggleMode(0)"
+              [disabled]="datePicker.datepickerMode === maxMode"
+              [ngClass]="{ disabled: datePicker.datepickerMode === maxMode }"
+              tabindex="-1"
+              style="width:100%;"
+            >
+              <strong>{{ title }}</strong>
+            </button>
+          </th>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+              ›
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let rowz of rows">
+          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
+            <button
+              type="button"
+              style="min-width:100%;"
+              class="btn btn-default"
+              [ngClass]="{
+                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
+                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
+                disabled: dtz.disabled,
+                active: !isBs4 && datePicker.isActive(dtz)
+              }"
+              [disabled]="dtz.disabled"
+              (click)="datePicker.select(dtz.date)"
+              tabindex="-1"
+            >
+              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DatePickerInnerComponent }]; } });
+
+// @deprecated
+class YearPickerComponent {
+    constructor(datePicker) {
+        this.rows = [];
+        this.datePicker = datePicker;
+    }
+    get isBs4() {
+        return !isBs3();
+    }
+    ngOnInit() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        this.datePicker.stepYear = { years: this.datePicker.yearRange };
+        this.datePicker.setRefreshViewHandler(function () {
+            const years = new Array(this.yearRange);
+            let date;
+            const start = self.getStartingYear(this.activeDate.getFullYear());
+            for (let i = 0; i < this.yearRange; i++) {
+                date = new Date(start + i, 0, 1);
+                date = this.fixTimeZone(date);
+                years[i] = this.createDateObject(date, this.formatYear);
+                years[i].uid = this.uniqueId + '-' + i;
+            }
+            self.title = [years[0].label, years[this.yearRange - 1].label].join(' - ');
+            self.rows = this.split(years, self.datePicker.yearColLimit);
+        }, 'year');
+        this.datePicker.setCompareHandler(function (date1, date2) {
+            return date1.getFullYear() - date2.getFullYear();
+        }, 'year');
+        this.datePicker.refreshView();
+    }
+    getStartingYear(year) {
+        // todo: parseInt
+        return ((year - 1) / this.datePicker.yearRange) * this.datePicker.yearRange + 1;
+    }
+}
+YearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: YearPickerComponent, deps: [{ token: DatePickerInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+YearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: YearPickerComponent, selector: "yearpicker", ngImport: i0, template: `
+    <table *ngIf="datePicker.datepickerMode === 'year'" role="grid">
+      <thead>
+        <tr>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
+          </th>
+          <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
+            <button
+              [id]="datePicker.uniqueId + '-title'"
+              role="heading"
+              type="button"
+              class="btn btn-default btn-sm"
+              (click)="datePicker.toggleMode(0)"
+              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+              tabindex="-1"
+              style="width:100%;"
+            >
+              <strong>{{ title }}</strong>
+            </button>
+          </th>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+              ›
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let rowz of rows">
+          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
+            <button
+              type="button"
+              style="min-width:100%;"
+              class="btn btn-default"
+              [ngClass]="{
+                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
+                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
+                disabled: dtz.disabled,
+                active: !isBs4 && datePicker.isActive(dtz)
+              }"
+              [disabled]="dtz.disabled"
+              (click)="datePicker.select(dtz.date)"
+              tabindex="-1"
+            >
+              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host .btn-info .text-success{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: YearPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yearpicker', template: `
+    <table *ngIf="datePicker.datepickerMode === 'year'" role="grid">
+      <thead>
+        <tr>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-left float-left" (click)="datePicker.move(-1)" tabindex="-1">‹</button>
+          </th>
+          <th [attr.colspan]="datePicker.yearColLimit - 2 <= 0 ? 1 : datePicker.yearColLimit - 2">
+            <button
+              [id]="datePicker.uniqueId + '-title'"
+              role="heading"
+              type="button"
+              class="btn btn-default btn-sm"
+              (click)="datePicker.toggleMode(0)"
+              [disabled]="datePicker.datepickerMode === datePicker.maxMode"
+              [ngClass]="{ disabled: datePicker.datepickerMode === datePicker.maxMode }"
+              tabindex="-1"
+              style="width:100%;"
+            >
+              <strong>{{ title }}</strong>
+            </button>
+          </th>
+          <th>
+            <button type="button" class="btn btn-default btn-sm pull-right float-right" (click)="datePicker.move(1)" tabindex="-1">
+              ›
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let rowz of rows">
+          <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
+            <button
+              type="button"
+              style="min-width:100%;"
+              class="btn btn-default"
+              [ngClass]="{
+                'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz),
+                'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)),
+                disabled: dtz.disabled,
+                active: !isBs4 && datePicker.isActive(dtz)
+              }"
+              [disabled]="dtz.disabled"
+              (click)="datePicker.select(dtz.date)"
+              tabindex="-1"
+            >
+              <span [ngClass]="{ 'text-success': isBs4 && dtz.current, 'text-info': !isBs4 && dtz.current }">{{ dtz.label }}</span>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DatePickerInnerComponent }]; } });
+
+const DATEPICKER_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatePickerComponent),
+    multi: true
+};
+/* tslint:enable:component-selector-name component-selector-type */
+class DatePickerComponent {
+    constructor(config) {
+        /** sets datepicker mode, supports: `day`, `month`, `year` */
+        this.datepickerMode = 'day';
+        /** if false week numbers will be hidden */
+        this.showWeeks = true;
+        this.selectionDone = new EventEmitter(undefined);
+        /** callback to invoke when the activeDate is changed. */
+        this.activeDateChange = new EventEmitter(undefined);
+        /* tslint:disable-next-line: no-any*/
+        this.onChange = Function.prototype;
+        /* tslint:disable-next-line: no-any*/
+        this.onTouched = Function.prototype;
+        this._now = new Date();
+        this.config = config;
+        this.configureOptions();
+    }
+    /** currently active date */
+    get activeDate() {
+        return this._activeDate || this._now;
+    }
+    set activeDate(value) {
+        this._activeDate = value;
+    }
+    configureOptions() {
+        Object.assign(this, this.config);
+    }
+    onUpdate(event) {
+        this.activeDate = event;
+        this.onChange(event);
+    }
+    onSelectionDone(event) {
+        this.selectionDone.emit(event);
+    }
+    onActiveDateChange(event) {
+        this.activeDateChange.emit(event);
+    }
+    // todo: support null value
+    /* tslint:disable-next-line: no-any*/
+    writeValue(value) {
+        if (this._datePicker.compare(value, this._activeDate) === 0) {
+            return;
+        }
+        if (value && value instanceof Date) {
+            this.activeDate = value;
+            this._datePicker.select(value, false);
+            return;
+        }
+        this.activeDate = (value ? new Date(value) : void 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+}
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: DatepickerConfig }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: DatePickerComponent, selector: "datepicker", inputs: { datepickerMode: "datepickerMode", initDate: "initDate", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", customClass: "customClass", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", activeDateChange: "activeDateChange" }, providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_datePicker", first: true, predicate: DatePickerInnerComponent, descendants: true, static: true }], ngImport: i0, template: `
+    <datepicker-inner
+      [activeDate]="activeDate"
+      (update)="onUpdate($event)"
+      [locale]="config.locale"
+      [datepickerMode]="datepickerMode"
+      [initDate]="initDate"
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [minMode]="minMode"
+      [maxMode]="maxMode"
+      [showWeeks]="showWeeks"
+      [formatDay]="formatDay"
+      [formatMonth]="formatMonth"
+      [formatYear]="formatYear"
+      [formatDayHeader]="formatDayHeader"
+      [formatDayTitle]="formatDayTitle"
+      [formatMonthTitle]="formatMonthTitle"
+      [startingDay]="startingDay"
+      [yearRange]="yearRange"
+      [customClass]="customClass"
+      [dateDisabled]="dateDisabled"
+      [dayDisabled]="dayDisabled"
+      [onlyCurrentMonth]="onlyCurrentMonth"
+      [shortcutPropagation]="shortcutPropagation"
+      [monthColLimit]="monthColLimit"
+      [yearColLimit]="yearColLimit"
+      (selectionDone)="onSelectionDone($event)"
+      (activeDateChange)="onActiveDateChange($event)"
+    >
+      <daypicker tabindex="0"></daypicker>
+      <monthpicker tabindex="0"></monthpicker>
+      <yearpicker tabindex="0"></yearpicker>
+    </datepicker-inner>
+  `, isInline: true, dependencies: [{ kind: "component", type: DatePickerInnerComponent, selector: "datepicker-inner", inputs: ["locale", "datepickerMode", "startingDay", "yearRange", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "onlyCurrentMonth", "shortcutPropagation", "customClass", "monthColLimit", "yearColLimit", "dateDisabled", "dayDisabled", "initDate", "activeDate"], outputs: ["selectionDone", "update", "activeDateChange"] }, { kind: "component", type: DayPickerComponent, selector: "daypicker" }, { kind: "component", type: MonthPickerComponent, selector: "monthpicker" }, { kind: "component", type: YearPickerComponent, selector: "yearpicker" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'datepicker',
+                    template: `
+    <datepicker-inner
+      [activeDate]="activeDate"
+      (update)="onUpdate($event)"
+      [locale]="config.locale"
+      [datepickerMode]="datepickerMode"
+      [initDate]="initDate"
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [minMode]="minMode"
+      [maxMode]="maxMode"
+      [showWeeks]="showWeeks"
+      [formatDay]="formatDay"
+      [formatMonth]="formatMonth"
+      [formatYear]="formatYear"
+      [formatDayHeader]="formatDayHeader"
+      [formatDayTitle]="formatDayTitle"
+      [formatMonthTitle]="formatMonthTitle"
+      [startingDay]="startingDay"
+      [yearRange]="yearRange"
+      [customClass]="customClass"
+      [dateDisabled]="dateDisabled"
+      [dayDisabled]="dayDisabled"
+      [onlyCurrentMonth]="onlyCurrentMonth"
+      [shortcutPropagation]="shortcutPropagation"
+      [monthColLimit]="monthColLimit"
+      [yearColLimit]="yearColLimit"
+      (selectionDone)="onSelectionDone($event)"
+      (activeDateChange)="onActiveDateChange($event)"
+    >
+      <daypicker tabindex="0"></daypicker>
+      <monthpicker tabindex="0"></monthpicker>
+      <yearpicker tabindex="0"></yearpicker>
+    </datepicker-inner>
+  `,
+                    providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR]
+                }]
+        }], ctorParameters: function () { return [{ type: DatepickerConfig }]; }, propDecorators: { datepickerMode: [{
+                type: Input
+            }], initDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minMode: [{
+                type: Input
+            }], maxMode: [{
+                type: Input
+            }], showWeeks: [{
+                type: Input
+            }], formatDay: [{
+                type: Input
+            }], formatMonth: [{
+                type: Input
+            }], formatYear: [{
+                type: Input
+            }], formatDayHeader: [{
+                type: Input
+            }], formatDayTitle: [{
+                type: Input
+            }], formatMonthTitle: [{
+                type: Input
+            }], startingDay: [{
+                type: Input
+            }], yearRange: [{
+                type: Input
+            }], onlyCurrentMonth: [{
+                type: Input
+            }], shortcutPropagation: [{
+                type: Input
+            }], monthColLimit: [{
+                type: Input
+            }], yearColLimit: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], dateDisabled: [{
+                type: Input
+            }], dayDisabled: [{
+                type: Input
+            }], activeDate: [{
+                type: Input
+            }], selectionDone: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], _datePicker: [{
+                type: ViewChild,
+                args: [DatePickerInnerComponent, { static: true }]
+            }] } });
+
 const DEFAULT_MIN_DATE = new Date('0000-01-01');
 const DEFAULT_MAX_DATE = new Date('9999-12-31');
 class DateInputComponent {
@@ -3373,7 +4498,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: DateInputComponent, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate : dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate : dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n       ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n      below the dateInput element -->\n    <input\n      #input\n      class=\"form-control dateControl\"\n      placeholder=\"{{ placeholder }}\"\n      [id]=\"inputId\"\n      [lxAutofocus]=\"autoFocus\"\n      [(ngModel)]=\"dateString\"\n      [disabled]=\"disabled\"\n      (ngModelChange)=\"onDateStringChange($event)\"\n      (focus)=\"showPopup()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"hidePopup()\"\n      (keydown.escape)=\"hidePopup()\"\n      (keydown.tab)=\"hidePopup()\"\n      (keydown.shift.tab)=\"hidePopup()\"\n      [class.text-danger]=\"hasError\"\n      *ngIf=\"renderingStyle === 'INPUT'\"\n    />\n    <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate : dateFormat }}</a>\n\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </ng-template>\n  </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      <input\n        #input\n        class=\"form-control dateControl\"\n        placeholder=\"{{ placeholder }}\"\n        [id]=\"inputId\"\n        [lxAutofocus]=\"autoFocus\"\n        [(ngModel)]=\"dateString\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onDateStringChange($event)\"\n        (focus)=\"showPopup()\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"hidePopup()\"\n        (keydown.escape)=\"hidePopup()\"\n        (keydown.tab)=\"hidePopup()\"\n        (keydown.shift.tab)=\"hidePopup()\"\n        [class.text-danger]=\"hasError\"\n        *ngIf=\"renderingStyle === 'INPUT'\"\n      />\n      <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate : dateFormat }}</a>\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            *ngIf=\"showDatepicker\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          >\n          </datepicker>\n        </div>\n      </div>\n    </span>\n  </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] });
 __decorate([
     Observe('initDateString')
 ], DateInputComponent.prototype, "initDateString$", void 0);
@@ -3458,6 +4583,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['input']
             }] } });
 
+class DatepickerUiModule {
+    static forRoot() {
+        return { ngModule: DatepickerUiModule, providers: [DatepickerConfig] };
+    }
+}
+DatepickerUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatepickerUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DatepickerUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: DatepickerUiModule, declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent], imports: [CommonModule, FormsModule], exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent] });
+DatepickerUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatepickerUiModule, imports: [CommonModule, FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DatepickerUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule],
+                    declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent],
+                    exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent],
+                    entryComponents: [DatePickerComponent]
+                }]
+        }] });
+
 class DragAndDropListItemComponent {
     constructor(element) {
         this.element = element;
@@ -6099,8 +7242,7 @@ LxFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ErrorMessageComponent,
         FormSubmitDirective], imports: [CommonModule,
         FormsModule,
-        ReactiveFormsModule, i1$2.TranslateModule, DatepickerModule,
-        InfiniteScrollModule,
+        ReactiveFormsModule, i1$2.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
         ClipboardModule,
         OverlayModule,
         LxCoreUiModule,
@@ -6149,7 +7291,7 @@ LxFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         FormsModule,
         ReactiveFormsModule,
         TranslateModule.forChild(),
-        DatepickerModule,
+        DatepickerUiModule.forRoot(),
         InfiniteScrollModule,
         ClipboardModule,
         OverlayModule,
@@ -6206,7 +7348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         TranslateModule.forChild(),
-                        DatepickerModule,
+                        DatepickerUiModule.forRoot(),
                         InfiniteScrollModule,
                         ClipboardModule,
                         OverlayModule,