adb-shared 2.0.7 → 2.0.11

package/fesm2015/adb-shared.mjs

@@ -4,12 +4,12 @@ import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter, Component, Output, Input, Directive, HostListener, NgModule, HostBinding, Pipe, forwardRef } from '@angular/core';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { Subscription, Subject, BehaviorSubject } from 'rxjs';
+import { Subscription } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { startOfDay, subYears, endOfDay, addYears, subMonths, addMonths, getMonth, isSameYear, startOfMonth, endOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isWithinInterval, isSameDay, isValid, parseISO } from 'date-fns';
+import { isValid, parseISO, startOfDay, subYears, endOfDay, addYears, subMonths, addMonths, getMonth, isSameYear, startOfMonth, endOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isWithinInterval, isSameDay } from 'date-fns';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class EnvironmentService {
@@ -438,23 +438,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
         }] });
 
 class AdbDatePickerService {
-    constructor() {
-        this.dateSubject = new Subject();
-        this.date$ = this.dateSubject.asObservable();
-        this.hideSubject = new Subject();
-        this.hide$ = this.hideSubject.asObservable();
-        this.settingSubject = new BehaviorSubject(null);
-        this.settings$ = this.settingSubject.asObservable();
-    }
-    selectDate(date) {
-        this.dateSubject.next(date);
-    }
-    setSetting(settings) {
-        this.settingSubject.next(settings);
-    }
-    hide() {
-        this.hideSubject.next();
-    }
 }
 /** @nocollapse */ AdbDatePickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 /** @nocollapse */ AdbDatePickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerService });
@@ -462,6 +445,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             type: Injectable
         }] });
 
+class AdbDatePickerDirective {
+    constructor(viewContainerRef, renderer, elementRef, adbDatePickerService, translate) {
+        this.viewContainerRef = viewContainerRef;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.adbDatePickerService = adbDatePickerService;
+        this.translate = translate;
+        this.autocomplete = false;
+        this.subscriptions = new Subscription();
+        this.format = 'yyyy-MM-dd';
+        this.settings = null;
+        //ControlValueAccessor
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+    }
+    onClick() {
+        if (this.adbDatePickerService.viewRef) {
+            this.adbDatePickerService.viewRef.destroy();
+        }
+        const viewRef = this.viewContainerRef.createComponent(AdbDatePickerComponent);
+        viewRef.instance.settings = this.settings;
+        viewRef.instance.toLeft = this.toLeft;
+        this.id = this.getId();
+        viewRef.instance.id = this.id;
+        viewRef.instance.selectDate.subscribe((date) => {
+            this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
+            this.onChange(date);
+            this.onHide();
+        });
+        viewRef.instance.hide.subscribe(() => {
+            this.onHide();
+        });
+        this.adbDatePickerService.viewRef = viewRef;
+    }
+    onHide() {
+        this.adbDatePickerService.viewRef = null;
+        this.viewContainerRef.detach();
+        this.viewContainerRef.clear();
+    }
+    onCheckOutSideClick(target) {
+        var _a, _b;
+        const nativeElement = (_b = (_a = this.adbDatePickerService.viewRef) === null || _a === void 0 ? void 0 : _a.instance.elementRef.nativeElement) !== null && _b !== void 0 ? _b : null;
+        if (nativeElement) {
+            if (nativeElement.id === this.id) {
+                if (!target.hasAttribute('adbdatepicker')) {
+                    const clickedInside = nativeElement.contains(target);
+                    if (!clickedInside) {
+                        this.onHide();
+                    }
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    writeValue(value) {
+        if (value) {
+            let initialDate = AdbDatePickerDirective.parseDate(value);
+            if (initialDate) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(initialDate, this.format, this.translate.currentLang));
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.viewContainerRef.clear();
+    }
+    static parseDate(value) {
+        if (typeof value === 'string') {
+            if (isValid(parseISO(value))) {
+                return parseISO(value);
+            }
+            else {
+                return null;
+            }
+        }
+        else if (value instanceof Date) {
+            return value;
+        }
+        else {
+            return null;
+        }
+    }
+    getId() {
+        return '' + Math.floor(Math.random() * Date.now());
+    }
+}
+/** @nocollapse */ AdbDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AdbDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: { format: "format", toLeft: "toLeft", settings: "settings" }, host: { listeners: { "click": "onClick()", "keyup.esc": "onHide()", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
+            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
+            multi: true
+        }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[adbDatepicker]`,
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
+                            multi: true
+                        }]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i3.TranslateService }]; }, propDecorators: { autocomplete: [{
+                type: HostBinding,
+                args: ['autocomplete']
+            }], format: [{
+                type: Input
+            }], toLeft: [{
+                type: Input
+            }], settings: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onHide: [{
+                type: HostListener,
+                args: ['keyup.esc']
+            }], onCheckOutSideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
 class AdbDatePickerComponent {
     constructor(adbDatePickerService, elementRef) {
         this.adbDatePickerService = adbDatePickerService;
@@ -470,15 +582,22 @@ class AdbDatePickerComponent {
         this.currentdDate = new Date();
         this.selectedDate = new Date();
         this.weekDays = AdbDatePickerComponent.WEEK_DAYS;
+        this.selectDate = new EventEmitter();
+        this.hide = new EventEmitter();
     }
     ngOnInit() {
-        this.subscriptions.add(this.adbDatePickerService.settings$.subscribe(settings => {
-            this.range = (settings === null || settings === void 0 ? void 0 : settings.minDate) || (settings === null || settings === void 0 ? void 0 : settings.maxDate) ? {
-                start: settings.minDate ? startOfDay(settings.minDate) : subYears(new Date(), 1000),
-                end: settings.maxDate ? endOfDay(settings.maxDate) : addYears(new Date(), 1000)
-            } : null;
-            this.createCalendar();
-        }));
+        var _a, _b;
+        if (this.settings) {
+            if (((_a = this.settings) === null || _a === void 0 ? void 0 : _a.minDate) || ((_b = this.settings) === null || _b === void 0 ? void 0 : _b.maxDate)) {
+                const minDate = AdbDatePickerDirective.parseDate(this.settings.minDate);
+                const maxDate = AdbDatePickerDirective.parseDate(this.settings.maxDate);
+                this.range = {
+                    start: minDate ? startOfDay(minDate) : subYears(new Date(), 1000),
+                    end: maxDate ? endOfDay(maxDate) : addYears(new Date(), 1000)
+                };
+            }
+        }
+        this.createCalendar();
     }
     onShowYear() {
         this.months = null;
@@ -528,14 +647,14 @@ class AdbDatePickerComponent {
         }
     }
     // @HostListener('document:click', ['$event.target'])
-    // onHide(target: any) {
+    // onHide(target:any) {
     //     console.log('this.elementRef.nativeElement',this.elementRef.nativeElement);
     //     console.log('target',target)
     //     const clickedInside = this.elementRef.nativeElement.contains(target);
     //     console.log('target.id',target.id);
     //     if (!clickedInside) {
     //         if (!target.hasAttribute('adbdatepicker')) {
-    //             this.adbDatePickerService.hide();
+    //             this.hide.emit();
     //         }
     //     }
     // }
@@ -564,7 +683,7 @@ class AdbDatePickerComponent {
         this.years = years;
     }
     onSelectDate(day) {
-        this.adbDatePickerService.selectDate(day.value);
+        this.selectDate.emit(day.value);
     }
     createCalendar() {
         const weeks = [];
@@ -593,119 +712,23 @@ AdbDatePickerComponent.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 AdbDatePickerComponent.WEEK_DAYS = ['1', '2', '3', '4', '5', '6', '7'];
 AdbDatePickerComponent.YEAR_INTERVALL = 8;
 /** @nocollapse */ AdbDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: AdbDatePickerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AdbDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerComponent, selector: "adb-date-picker", ngImport: i0, template: "<nav class=\"bg-white shadow rounded\" style=\"width:350px\">\r\n    <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n        <button class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\"><span class=\"fa fa-chevron-left\"></span></button>\r\n        <ng-container *ngIf=\"!years&&!months\">\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        </ng-container>\r\n        <button *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n        <button *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\"><span class=\"fa fa-chevron-right\"></span></button>\r\n    </header>\r\n    <div class=\"p-0 border calendar\">\r\n        <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n            <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value)\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n            </li>\r\n        </ul>\r\n        <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n            <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value)\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                    {{'MONTHS.'+(month.value+1)|translate}}\r\n                </button>\r\n            </li>\r\n        </ul>\r\n        <div class=\"days\" *ngIf=\"!years&&!months\">\r\n            <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n            <ng-container *ngFor=\"let week of weeks\">\r\n                <button class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\"\r\n                    [class.border]=\"day.isToday\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                    <small>{{day.value|date:'d'}}</small>\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</nav>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "adbLocaleDate": LocaleDatePipe, "date": i2.DatePipe, "translate": i3.TranslatePipe } });
+/** @nocollapse */ AdbDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerComponent, selector: "adb-date-picker", inputs: { settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate", hide: "hide" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();;$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\"\r\n                        [class.border]=\"day.isToday\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "adbLocaleDate": LocaleDatePipe, "date": i2.DatePipe, "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-date-picker', template: "<nav class=\"bg-white shadow rounded\" style=\"width:350px\">\r\n    <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n        <button class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\"><span class=\"fa fa-chevron-left\"></span></button>\r\n        <ng-container *ngIf=\"!years&&!months\">\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        </ng-container>\r\n        <button *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n        <button *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\"><span class=\"fa fa-chevron-right\"></span></button>\r\n    </header>\r\n    <div class=\"p-0 border calendar\">\r\n        <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n            <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value)\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n            </li>\r\n        </ul>\r\n        <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n            <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value)\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                    {{'MONTHS.'+(month.value+1)|translate}}\r\n                </button>\r\n            </li>\r\n        </ul>\r\n        <div class=\"days\" *ngIf=\"!years&&!months\">\r\n            <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n            <ng-container *ngFor=\"let week of weeks\">\r\n                <button class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\"\r\n                    [class.border]=\"day.isToday\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                    <small>{{day.value|date:'d'}}</small>\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</nav>" }]
-        }], ctorParameters: function () { return [{ type: AdbDatePickerService }, { type: i0.ElementRef }]; } });
-
-class AdbDatePickerDirective {
-    constructor(viewContainerRef, renderer, elementRef, adbDatePickerService, translate) {
-        this.viewContainerRef = viewContainerRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.adbDatePickerService = adbDatePickerService;
-        this.translate = translate;
-        this.subscriptions = new Subscription();
-        this.format = 'yyyy-MM-dd';
-        //TODO: convert to getter if this would become dynamic from server 
-        this.settings = null;
-        //ControlValueAccessor
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    ngOnInit() {
-        var _a, _b;
-        this.subscriptions.add(this.adbDatePickerService.date$.subscribe({
-            next: date => {
-                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
-                this.onChange(date);
-                this.onHide();
-            }
-        }));
-        this.subscriptions.add(this.adbDatePickerService.hide$.subscribe({
-            next: () => {
-                this.onHide();
-            }
-        }));
-        if (((_a = this.settings) === null || _a === void 0 ? void 0 : _a.maxDate) || ((_b = this.settings) === null || _b === void 0 ? void 0 : _b.minDate)) {
-            this.adbDatePickerService.setSetting({
-                minDate: AdbDatePickerDirective.parseDate(this.settings.minDate),
-                maxDate: AdbDatePickerDirective.parseDate(this.settings.maxDate)
-            });
-        }
-    }
-    onClick() {
-        if (!this.viewRef) {
-            this.viewRef = this.viewContainerRef.createComponent(AdbDatePickerComponent);
-        }
-    }
-    onHide() {
-        this.viewRef = null;
-        this.viewContainerRef.detach();
-        this.viewContainerRef.clear();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    writeValue(value) {
-        if (value) {
-            let initialDate = AdbDatePickerDirective.parseDate(value);
-            if (initialDate) {
-                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(initialDate, this.format, this.translate.currentLang));
-            }
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.viewContainerRef.clear();
-    }
-    static parseDate(value) {
-        if (typeof value === 'string') {
-            if (isValid(parseISO(value))) {
-                return parseISO(value);
-            }
-            else {
-                return null;
-            }
-        }
-        else if (value instanceof Date) {
-            return value;
-        }
-        else {
-            return null;
-        }
-    }
-}
-/** @nocollapse */ AdbDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ AdbDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: { format: "format", settings: "settings" }, host: { listeners: { "click": "onClick()", "keyup.esc": "onHide()" } }, providers: [{
-            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
-            multi: true
-        }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `input[adbDatepicker]`,
-                    providers: [{
-                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
-                            multi: true
-                        }]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i3.TranslateService }]; }, propDecorators: { format: [{
+            args: [{ selector: 'adb-date-picker', template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();;$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\"\r\n                        [class.border]=\"day.isToday\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: AdbDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { settings: [{
                 type: Input
-            }], settings: [{
+            }], toLeft: [{
                 type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onHide: [{
-                type: HostListener,
-                args: ['keyup.esc']
+            }], id: [{
+                type: HostBinding,
+                args: ['id']
+            }, {
+                type: Input
+            }], selectDate: [{
+                type: Output
+            }], hide: [{
+                type: Output
             }] } });
 
 class AdbDatePickerModule {