adb-shared 2.0.32 → 2.0.35

package/fesm2020/adb-shared.mjs

@@ -4,13 +4,14 @@ import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter, Component, Output, Input, Directive, HostListener, NgModule, HostBinding, Pipe, forwardRef } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { Subscription, Subject } from 'rxjs';
+import { Subscription, Subject, of } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { isValid, parseISO, startOfDay, subYears, endOfDay, addYears, getMonth, subMonths, addMonths, isSameYear, startOfMonth, endOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isSameDay, isSameMonth, isWithinInterval } from 'date-fns';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { delay } from 'rxjs/operators';
 
 class EnvironmentService {
     constructor(environment) {
@@ -499,6 +500,7 @@ class AdbDatePickerDirective {
         this.subscriptions = new Subscription();
         this.format = 'yyyy-MM-dd';
         this.settings = null;
+        this.pickOnly = true;
         //ControlValueAccessor
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -516,6 +518,7 @@ class AdbDatePickerDirective {
         this.id = this.getId();
         viewRef.instance.id = this.id;
         viewRef.instance.selectDate.subscribe((date) => {
+            this.elementRef.nativeElement.classList.remove('ng-invalid');
             this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
             this.onChange(date);
             this.initialDate = date;
@@ -526,22 +529,32 @@ class AdbDatePickerDirective {
         });
         this.adbDatePickerService.viewRef = viewRef;
     }
+    onKeyup(event) {
+        const date = AdbDatePickerDirective.tryParse(event.target.value, this.format);
+        if (date) {
+            this.onChange(date);
+            this.initialDate = date;
+        }
+    }
     onHide() {
         this.adbDatePickerService.viewRef = null;
         this.viewContainerRef.detach();
         this.viewContainerRef.clear();
     }
+    onBlur() {
+        const date = AdbDatePickerDirective.tryParse(this.elementRef.nativeElement.value, this.format);
+        if (!date) {
+            this.elementRef.nativeElement.classList.add('ng-invalid');
+        }
+        else {
+            this.elementRef.nativeElement.classList.remove('ng-invalid');
+        }
+    }
     handleKeyboardEvent(event) {
         if (event.key === 'Tab') {
             this.onHide();
         }
-        else if (event.key === 'Backspace') {
-            this.initialDate = null;
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', null);
-            this.onChange();
-            this.onHide();
-        }
-        else {
+        else if (this.pickOnly) {
             event.preventDefault();
         }
     }
@@ -598,12 +611,16 @@ class AdbDatePickerDirective {
             return null;
         }
     }
+    static tryParse(dateString, format) {
+        const parsed = parseISO(dateString);
+        return isValid(parsed) && dateString?.length === 10 ? parsed : 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: i1$1.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()", "keydown": "handleKeyboardEvent($event)", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
+/** @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", pickOnly: "pickOnly" }, host: { listeners: { "click": "onClick()", "keyup": "onKeyup($event)", "keyup.esc": "onHide()", "blur": "onBlur()", "keydown": "handleKeyboardEvent($event)", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
             multi: true
         }], ngImport: i0 });
@@ -625,12 +642,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }], settings: [{
                 type: Input
+            }], pickOnly: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
+            }], onKeyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
             }], onHide: [{
                 type: HostListener,
                 args: ['keyup.esc']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
             }], handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -996,53 +1021,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class AdbToastService {
     constructor(componentFactoryResolver, rendererFactory, appRef, injector) {
         this.componentFactoryResolver = componentFactoryResolver;
+        this.rendererFactory = rendererFactory;
         this.appRef = appRef;
         this.injector = injector;
-        this.renderer = rendererFactory.createRenderer(null, null);
+        this.toasts = new Array();
+        this.toastsSubject = new Subject();
+        this.$toasts = this.toastsSubject.asObservable();
+    }
+    add(toastMessage, time = 4000) {
+        this.addContainer();
+        toastMessage.type = toastMessage.type ? toastMessage.type : ToastType.Success;
+        toastMessage.index = this.toasts.length;
+        toastMessage.delay = of(toastMessage).pipe(delay(time)).subscribe(toast => {
+            this.remove(toast);
+        });
+        this.toasts.push(toastMessage);
+        this.toastsSubject.next(this.toasts);
+    }
+    remove(toast) {
+        this.toasts = this.toasts?.filter(x => x.index !== toast.index);
+        this.toastsSubject.next(this.toasts);
     }
-    show(model) {
+    addContainer() {
         if (!this.container) {
+            this.renderer = this.rendererFactory.createRenderer(null, null);
+            //create container i top
             this.container = this.renderer.createElement('div');
-            this.container.setAttribute('adb-toast-container', '');
-            this.container.classList.add('position-fixed', 'bottom-0', 'end-0');
             this.renderer.appendChild(document.body, this.container);
+            let componentRef = this.componentFactoryResolver.resolveComponentFactory(AdbToast).create(this.injector);
+            this.appRef.attachView(componentRef.hostView);
+            const element = componentRef.hostView.rootNodes[0];
+            this.container.prepend(element);
         }
-        this.createToast(model);
-    }
-    createToast(model) {
-        if (!model.state)
-            model.state = 'info';
-        if (!model.timeInMs)
-            model.timeInMs = 4000;
-        let componentRef = this.componentFactoryResolver.resolveComponentFactory(AdbToast).create(this.injector);
-        componentRef.instance.model = model;
-        this.appRef.attachView(componentRef.hostView);
-        const element = componentRef.hostView.rootNodes[0];
-        this.container.prepend(element);
-        setTimeout(() => {
-            // element.remove();
-        }, model.timeInMs);
     }
 }
 /** @nocollapse */ AdbToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 /** @nocollapse */ AdbToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+var ToastType;
+(function (ToastType) {
+    ToastType[ToastType["Info"] = 1] = "Info";
+    ToastType[ToastType["Success"] = 2] = "Success";
+    ToastType[ToastType["Warn"] = 3] = "Warn";
+})(ToastType || (ToastType = {}));
 
 class AdbToast {
-    constructor(toastRef) {
-        this.toastRef = toastRef;
+    constructor(toastService) {
+        this.toastService = toastService;
+        this.toastType = ToastType;
+        this.toastService.$toasts.subscribe(toasts => {
+            this.toasts = toasts;
+        });
+    }
+    onRemoveToast(toast) {
+        this.toastService.remove(toast);
     }
 }
 /** @nocollapse */ AdbToast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToast, deps: [{ token: AdbToastService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AdbToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbToast, selector: "ng-component", inputs: { model: "model" }, ngImport: i0, template: "    <div #toast (click)=\"toast.remove()\" adb-toast class=\"text-white px-3 pb-3 pt-2 mb-2\" style=\"z-index: 50000;min-width: 15rem;\" [class]=\"'bg-' + model.state\">\r\n        <div *ngIf=\"model.header\" class=\"d-flex align-items-center justify-content-between pb-1\">\r\n            <div class=\"fw-bold\">{{model.header|translate}}</div>\r\n            <button class=\"btn p-0 ms-2 text-white\" (click)=\"toast.remove()\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div> {{model.body|translate}}</div>\r\n            <button *ngIf=\"!model.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"toast.remove()\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
+/** @nocollapse */ AdbToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbToast, selector: "ng-component", ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"text-white px-3 pb-3 pt-2 mb-2\" *ngFor=\"let toast of toasts\"\r\n        [class.bg-success]=\"toast.type===toastType.Success\" [class.bg-info]=\"toast.type===toastType.Info\" [class.bg-danger]=\"toast.type===toastType.Warn\">\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\" *ngIf=\"toast.header\">\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n            <button class=\"btn top-0 end-0 btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div>{{toast.message|translate}}</div>\r\n            <button  *ngIf=\"!toast.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToast, decorators: [{
             type: Component,
-            args: [{ template: "    <div #toast (click)=\"toast.remove()\" adb-toast class=\"text-white px-3 pb-3 pt-2 mb-2\" style=\"z-index: 50000;min-width: 15rem;\" [class]=\"'bg-' + model.state\">\r\n        <div *ngIf=\"model.header\" class=\"d-flex align-items-center justify-content-between pb-1\">\r\n            <div class=\"fw-bold\">{{model.header|translate}}</div>\r\n            <button class=\"btn p-0 ms-2 text-white\" (click)=\"toast.remove()\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div> {{model.body|translate}}</div>\r\n            <button *ngIf=\"!model.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"toast.remove()\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>" }]
-        }], ctorParameters: function () { return [{ type: AdbToastService }]; }, propDecorators: { model: [{
-                type: Input
-            }] } });
+            args: [{ template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"text-white px-3 pb-3 pt-2 mb-2\" *ngFor=\"let toast of toasts\"\r\n        [class.bg-success]=\"toast.type===toastType.Success\" [class.bg-info]=\"toast.type===toastType.Info\" [class.bg-danger]=\"toast.type===toastType.Warn\">\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\" *ngIf=\"toast.header\">\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n            <button class=\"btn top-0 end-0 btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div>{{toast.message|translate}}</div>\r\n            <button  *ngIf=\"!toast.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: AdbToastService }]; } });
 
 class AdbToastModule {
 }
@@ -1067,5 +1109,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADBHeaderComponent, ADBHeaderModule, AdbConfirmModal, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, AdbDirectivesModule, AdbDropdownDirective, AdbDropdownModule, AdbModalModule, AdbModalService, AdbPagersModule, AdbPipesModule, AdbToast, AdbToastModule, AdbToastService, ClickOutsideDirective, FileUploadDirective, FocusDirective, HighlightPipe, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent };
+export { ADBHeaderComponent, ADBHeaderModule, AdbConfirmModal, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, AdbDirectivesModule, AdbDropdownDirective, AdbDropdownModule, AdbModalModule, AdbModalService, AdbPagersModule, AdbPipesModule, AdbToast, AdbToastModule, AdbToastService, ClickOutsideDirective, FileUploadDirective, FocusDirective, HighlightPipe, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent, ToastType };
 //# sourceMappingURL=adb-shared.mjs.map