@c8y/ngx-components 1017.0.378 → 1017.0.383

package/fesm2020/c8y-ngx-components.mjs

@@ -27,7 +27,7 @@ import * as i1$2 from '@c8y/client';
 import { TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, OperationStatus, InventoryService, UserService, ApplicationService, TenantService, FetchClient, Client, PasswordStrength, QueriesUtil, ApplicationAvailability, Service } from '@c8y/client';
 import { satisfies, compare, coerce } from 'semver';
 import * as i6 from 'ngx-bootstrap/datepicker';
-import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
 import { defineLocale, enGbLocale, zhCnLocale, ruLocale, ptBrLocale, plLocale, nlLocale, koLocale, jaLocale, frLocale, esLocale, deLocale } from 'ngx-bootstrap/chronos';
 import { saveAs } from 'file-saver';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
@@ -20943,8 +20943,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Output
             }] } });
 
+class CloseDatePickerDirective {
+    constructor(el) {
+        this.el = el;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        const element = this.el.nativeElement.closest('.dropdown-menu');
+        const clickEvent$ = element
+            ? merge(fromEvent(element, 'click'), fromEvent(document, 'click'))
+            : fromEvent(document, 'click');
+        clickEvent$
+            .pipe(map((event) => event.target), filter(target => !this.el.nativeElement.contains(target)), // i.e. anything which is not inside this `c8y-date-time-picker`
+        takeUntil(this.destroy$))
+            .subscribe(() => this.closeDatepicker.hide());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+CloseDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CloseDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CloseDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: { closeDatepicker: "closeDatepicker" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CloseDatePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[closeDatepicker]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { closeDatepicker: [{
+                type: Input
+            }] } });
+
 class DateTimePickerComponent {
-    constructor() {
+    constructor(cd) {
+        this.cd = cd;
         this.defaultPlaceholder = gettext('Select a date…');
         this.destroy$ = new Subject();
         this.form = new FormGroup({});
@@ -20971,6 +21003,9 @@ class DateTimePickerComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
     /**
      * Control Value Accessor - If form value changes by external factor, update date property and internal form with new value.
      */
@@ -21014,12 +21049,23 @@ class DateTimePickerComponent {
         }
     }
     previousDay() {
+        const isOpen = this.datepicker.isOpen;
         this.date.setDate(this.date.getDate() - 1);
         this.setDatetime({ date: this.date, time: this.form.get('time').value });
+        if (isOpen) {
+            this.datepicker.show();
+        }
     }
     nextDay() {
+        const isOpen = this.datepicker.isOpen;
         this.date.setDate(this.date.getDate() + 1);
         this.setDatetime({ date: this.date, time: this.form.get('time').value });
+        if (isOpen) {
+            this.datepicker.show();
+        }
+    }
+    hide() {
+        this.datepicker.hide();
     }
     /**
      * If internal form changes its value, then combine date and time into one Date and pass its ISO string value to onChange method
@@ -21047,7 +21093,7 @@ class DateTimePickerComponent {
         this.onChange(this.date.toISOString());
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: { _minDate: ["minDate", "_minDate"], _maxDate: ["maxDate", "_maxDate"], placeholder: "placeholder" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -21059,7 +21105,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: forwardRef(() => DateTimePickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"datetime-picker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: TimePickerComponent, selector: "c8y-time-picker", inputs: ["minDate", "maxDate", "placeholder"], outputs: ["dayForward", "dayBackward"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: BsDatepickerDirective, descendants: true }], ngImport: i0, template: "<div class=\"datetime-picker\" [closeDatepicker]=\"datepicker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [outsideClick]=\"false\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n", dependencies: [{ kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: TimePickerComponent, selector: "c8y-time-picker", inputs: ["minDate", "maxDate", "placeholder"], outputs: ["dayForward", "dayBackward"] }, { kind: "directive", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: ["closeDatepicker"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-date-time-picker', providers: [
@@ -21073,8 +21119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             useExisting: forwardRef(() => DateTimePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"datetime-picker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _minDate: [{
+                    ], template: "<div class=\"datetime-picker\" [closeDatepicker]=\"datepicker\">\n  <div class=\"form-group datepicker\">\n    <input\n      class=\"form-control\"\n      [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n      bsDatepicker\n      [outsideClick]=\"false\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: 'YYYY-MM-DD' }\"\n      [formControl]=\"form.get('date')\"\n      (blur)=\"onTouched()\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    />\n  </div>\n  <c8y-time-picker\n    [formControl]=\"form.get('time')\"\n    (dayBackward)=\"previousDay()\"\n    (dayForward)=\"nextDay()\"\n  ></c8y-time-picker>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _minDate: [{
                 type: Input,
                 args: ['minDate']
             }], _maxDate: [{
@@ -21082,6 +21128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 args: ['maxDate']
             }], placeholder: [{
                 type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: [BsDatepickerDirective]
             }] } });
 
 class FieldDateTime extends FieldType {
@@ -21141,7 +21190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 class DateTimePickerModule {
 }
 DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent], imports: [FormsModule,
+DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent, CloseDatePickerDirective], imports: [FormsModule,
         CommonModule$1,
         FormsModule$1,
         ReactiveFormsModule, i6.BsDatepickerModule, CommonModule,
@@ -21166,7 +21215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                         TimePickerModule
                     ],
                     exports: [DateTimePickerComponent],
-                    declarations: [DateTimePickerComponent]
+                    declarations: [DateTimePickerComponent, CloseDatePickerDirective]
                 }]
         }] });