ngx-techlify-core 11.3.7 → 11.3.8

package/fesm2015/ngx-techlify-core.js

@@ -4,7 +4,7 @@ import { __decorate, __awaiter } from 'tslib';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import { Location, CommonModule } from '@angular/common';
+import { Location, DatePipe, CommonModule } from '@angular/common';
 import { Validators, FormBuilder, FormControl, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpResponse, HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
 import { throwError, Observable, Subject, of, from, fromEvent } from 'rxjs';
@@ -2290,7 +2290,7 @@ function calculateTimeline(value) {
         }
         case 4: { // This Week
             var first = date.getDate() - date.getDay() + 1; // First day is the day of the month - the day of the week
-            var last = first + 6; // last day is the first day + 6   
+            var last = first + 6; // last day is the first day + 6
             data.date_from = new Date(date.setDate(first));
             data.date_to = new Date(date.setDate(last));
             break;
@@ -2369,8 +2369,11 @@ Timeline.THIS_YEAR = 10;
 Timeline.LAST_YEAR = 11;
 Timeline.ALL = 12;
 
-let TimelineFilterComponent = class TimelineFilterComponent {
-    constructor() {
+var TimelineFilterComponent_1;
+let TimelineFilterComponent = TimelineFilterComponent_1 = class TimelineFilterComponent {
+    constructor(formBuilder, ngControl, datePipe) {
+        this.ngControl = ngControl;
+        this.datePipe = datePipe;
         this.timelineValue = new FormControl('');
         this.timelines = [
             { value: 1, viewValue: 'Custom' },
@@ -2386,20 +2389,73 @@ let TimelineFilterComponent = class TimelineFilterComponent {
             { value: 11, viewValue: 'Last Year' },
             { value: 12, viewValue: 'All dates' },
         ];
-        this.labelText = 'Select Timeline';
         this.dateFrom = 'date_from';
         this.dateTo = 'date_to';
         this.appearance = "legacy";
         this.showClearbutton = false;
+        /**
+         * @deprecated  The form input is deprated
+         */
+        this.form = null;
+        this.labelText = 'Select Timeline';
+        this.touchUi = true;
+        this.selectedValueChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.stateChanges = new Subject();
+        this.controlType = 'timeline-filter';
+        this.id = `timeline-filter-${TimelineFilterComponent_1.nextId++}`;
+        this.describedBy = '';
         this.showCustomDateFields = false;
+        this._required = false;
+        this._disabled = false;
+        this.selectorForm = formBuilder.group({
+            select_value: [null],
+        });
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
     }
     set defaultValue(value) {
         this.timelineValue.setValue(value);
         this.changeTimeline(value);
     }
-    ngOnInit() {
-        this.timelineValue.valueChanges.
-            pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.changeTimeline(value));
+    get required() { return this._required; }
+    set required(value) {
+        this.selectorForm.get('select_value').setValidators(Validators.required);
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.selectorForm.disable() : this.selectorForm.enable();
+        this.stateChanges.next();
+    }
+    get value() {
+        if (this.selectorForm.valid) {
+            return this.selectorForm.value.select_value;
+        }
+        return '';
+    }
+    set value(data) {
+        this.selectorForm.patchValue({ select_value: data || '' });
+        this._handleInput();
+        this.stateChanges.next();
+    }
+    getDateRangeString() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let str = "";
+        if ((_a = this.selectedRange) === null || _a === void 0 ? void 0 : _a.show_custom_field) {
+            if (((_b = this.selectedRange) === null || _b === void 0 ? void 0 : _b.date_from.toUTCString()) != 'Invalid Date') {
+                str += ' - ' + this.datePipe.transform((_d = (_c = this.selectedRange) === null || _c === void 0 ? void 0 : _c.date_from) === null || _d === void 0 ? void 0 : _d.toUTCString());
+            }
+            if (((_e = this.selectedRange) === null || _e === void 0 ? void 0 : _e.date_to.toUTCString()) != 'Invalid Date') {
+                str += ' - ' + this.datePipe.transform((_g = (_f = this.selectedRange) === null || _f === void 0 ? void 0 : _f.date_to) === null || _g === void 0 ? void 0 : _g.toUTCString());
+            }
+        }
+        return str;
     }
     resetFieldValue(field) {
         this.form.get(field).setValue('');
@@ -2418,27 +2474,97 @@ let TimelineFilterComponent = class TimelineFilterComponent {
             this.showCustomDateFields = timeline.show_custom_field;
         }
     }
+    _handleInput() {
+        if (this.value == 1) {
+            this.picker.open();
+            return;
+        }
+        const range = calculateTimeline(this.value);
+        this.selectedRange = range;
+        this.onChange(this.value);
+        this.selectedValueChange.emit(this.selectedValue);
+        this.selectionChange.emit(range);
+    }
+    dateRangeChange(dateRangeStart, dateRangeEnd) {
+        const range = {
+            date_from: new Date(dateRangeStart.value),
+            date_to: new Date(dateRangeEnd.value),
+            show_custom_field: true
+        };
+        this.selectedRange = range;
+        this.onChange(this.value);
+        this.selectedValueChange.emit(this.selectedValue);
+        this.selectionChange.emit(range);
+    }
+    onCustomDateChange(event) {
+        console.log(event);
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(event) {
+        event.stopPropagation();
+    }
+    writeValue(data) {
+        this.value = data;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        console.log(this.form);
+        this.timelineValue.valueChanges.
+            pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.changeTimeline(value));
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
 };
+TimelineFilterComponent.nextId = 0;
 TimelineFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-timeline-filter',
-                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field [appearance]=\"appearance\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select [formControl]=\"timelineValue\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button mat-button *ngIf=\"showClearbutton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field [appearance]=\"appearance\">\n            <mat-label>From Date</mat-label>\n            <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field [appearance]=\"appearance\">\n            <mat-label>To Date</mat-label>\n            <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
+                template: "<ng-container *ngIf=\"form\" [formGroup]=\"form\">\n  <mat-form-field [appearance]=\"appearance\">\n      <mat-label>{{labelText}}</mat-label>\n      <mat-select [formControl]=\"timelineValue\">\n          <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n              {{timeline.viewValue}}\n          </mat-option>\n      </mat-select>\n      <button mat-button *ngIf=\"showClearbutton && timelineValue.value\" matSuffix mat-icon-button\n          (click)=\"timelineValue.setValue('')\">\n          <mat-icon>close</mat-icon>\n      </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"showCustomDateFields\">\n      <mat-form-field [appearance]=\"appearance\">\n          <mat-label>From Date</mat-label>\n          <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n              placeholder=\"From Date\" readonly />\n          <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n          <mat-datepicker #fromPicker></mat-datepicker>\n          <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n              (click)=\"resetFieldValue(dateFrom)\">\n              <mat-icon>close</mat-icon>\n          </button>\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"appearance\">\n          <mat-label>To Date</mat-label>\n          <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n              placeholder=\"To Date\" readonly />\n          <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n          <mat-datepicker #toPicker></mat-datepicker>\n          <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n              (click)=\"resetFieldValue(dateTo)\">\n              <mat-icon>close</mat-icon>\n          </button>\n      </mat-form-field>\n\n  </ng-container>\n</ng-container>\n<div *ngIf=\"!form\" [formGroup]=\"selectorForm\">\n  <mat-select formControlName=\"select_value\" focused=\"false\" [required]=\"required\"\n      autocomplete=\"off\" (selectionChange)=\"_handleInput()\">\n      <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline?.value\">\n          {{ timeline?.viewValue }} {{ selectedRange?.show_custom_field && timeline?.value == 1 ? getDateRangeString() : '' }}\n      </mat-option>\n  </mat-select>\n  <mat-date-range-input hidden (dateChange)=\"onCustomDateChange($event)\" [rangePicker]=\"picker\">\n      <input matStartDate #customStartDate>\n      <input matEndDate (dateChange)=\"dateRangeChange(customStartDate, customEndDate)\" #customEndDate>\n  </mat-date-range-input>\n  <mat-date-range-picker #picker [touchUi]=\"touchUi\"></mat-date-range-picker>\n</div>\n",
+                providers: [
+                    {
+                        provide: MatFormFieldControl,
+                        useExisting: TimelineFilterComponent_1
+                    }
+                ],
                 styles: [""]
             },] }
 ];
-TimelineFilterComponent.ctorParameters = () => [];
+TimelineFilterComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] },
+    { type: DatePipe }
+];
 TimelineFilterComponent.propDecorators = {
+    picker: [{ type: ViewChild, args: ['picker',] }],
     timelineValue: [{ type: Input }],
     timelines: [{ type: Input }],
-    labelText: [{ type: Input }],
     dateFrom: [{ type: Input }],
     dateTo: [{ type: Input }],
     appearance: [{ type: Input }],
     showClearbutton: [{ type: Input }],
     form: [{ type: Input }],
-    defaultValue: [{ type: Input }]
+    labelText: [{ type: Input }],
+    selectedValue: [{ type: Input }],
+    touchUi: [{ type: Input }],
+    selectedValueChange: [{ type: Output }],
+    selectionChange: [{ type: Output }],
+    defaultValue: [{ type: Input }],
+    required: [{ type: Input }],
+    disabled: [{ type: Input }],
+    value: [{ type: Input }]
 };
-TimelineFilterComponent = __decorate([
+TimelineFilterComponent = TimelineFilterComponent_1 = __decorate([
     UntilDestroy()
 ], TimelineFilterComponent);
 
@@ -3442,7 +3568,7 @@ let EmailSubscriptionUserListFilterComponent = class EmailSubscriptionUserListFi
 EmailSubscriptionUserListFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-email-subscription-user-list-filter',
-                template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button mat-button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button mat-button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>",
+                template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button mat-button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button mat-button *ngIf=\"getFieldValue('email_type_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('email_type_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>",
                 styles: [""]
             },] }
 ];
@@ -3762,7 +3888,7 @@ let EmailSubscriptionTypeListComponent = class EmailSubscriptionTypeListComponen
 EmailSubscriptionTypeListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-email-subscription-type-list',
-                template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n        <mat-form-field>\n            <input matInput [formControl]=\"search\" placeholder=\"Email Type\" autocomplete=\"off\" />\n            <button mat-button matSuffix mat-icon-button>\n                <mat-icon>search</mat-icon>\n            </button>\n            <button mat-button *ngIf=\"search.value\" matSuffix mat-icon-button (click)=\"search.setValue('')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionType()\">+ Email\n                Type</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"emailSubscriptionTypeList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-type-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.title }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"code\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.code }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"frequency.title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.frequency?.title }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"description\">\n                    <th mat-header-cell *matHeaderCellDef> Description </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.description }}\n                    </td>\n                </ng-container>\n\n                <!-- Actions Column -->\n                <ng-container matColumnDef=\"actions\">\n                    <th mat-header-cell *matHeaderCellDef> Actions </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType\">\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"deleteEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"editEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>edit</mat-icon>\n                        </button>\n                    </td>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n    </section>\n</div>",
+                template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n        <mat-form-field>\n            <input matInput [formControl]=\"search\" placeholder=\"Email Type\" autocomplete=\"off\" />\n            <button mat-button matSuffix mat-icon-button>\n                <mat-icon>search</mat-icon>\n            </button>\n            <button mat-button *ngIf=\"search.value\" matSuffix mat-icon-button (click)=\"search.setValue('')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionType()\">+ Email\n                Type</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"emailSubscriptionTypeList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-type-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.title }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"code\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.code }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"frequency.title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.frequency?.title }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"description\">\n                    <th mat-header-cell *matHeaderCellDef> Description </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.description }}\n                    </td>\n                </ng-container>\n\n                <!-- Actions Column -->\n                <ng-container matColumnDef=\"actions\">\n                    <th mat-header-cell *matHeaderCellDef> Actions </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType\">\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"deleteEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"editEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>edit</mat-icon>\n                        </button>\n                    </td>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n    </section>\n</div>",
                 styles: [".scroll-container{max-height:800px;overflow-y:auto}"]
             },] }
 ];
@@ -5605,6 +5731,7 @@ let LoginHistoryForUserComponent = class LoginHistoryForUserComponent {
         };
         this.displayedColumns = ['index', 'created_at'];
         this.historyFilterForm = this.fb.group({
+            'duration': [''],
             'date_from': [''],
             'date_to': ['']
         });
@@ -5620,6 +5747,14 @@ let LoginHistoryForUserComponent = class LoginHistoryForUserComponent {
         });
         this.initializeData();
     }
+    onTimelineChange(range) {
+        let date_from = (range === null || range === void 0 ? void 0 : range.date_from) ? new Date(range.date_from) : '';
+        let date_to = (range === null || range === void 0 ? void 0 : range.date_to) ? new Date(range.date_to) : '';
+        this.historyFilterForm.patchValue({
+            date_from,
+            date_to
+        });
+    }
     initializeData() {
         this.http.get(`api/user-login-history`, { params: Object.assign(Object.assign({}, this.filters), this.pageEvent) })
             .pipe(untilDestroyed(this))
@@ -5651,7 +5786,7 @@ let LoginHistoryForUserComponent = class LoginHistoryForUserComponent {
 LoginHistoryForUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-login-history-for-user',
-                template: "<div class=\"mat-typography m-4\">\n    <form fxLayoutAlign=\" start center\">\n        <app-timeline-filter [form]=\"historyFilterForm\"></app-timeline-filter>\n    </form>\n\n\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"loginHistoryList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"login-history-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let loginHistory; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>\n                    <td mat-cell *matCellDef=\"let loginHistory;\">\n                        {{loginHistory?.created_at | date:'medium' }}\n                    </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns;\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n\n    </section>\n</div>",
+                template: "<div class=\"mat-typography m-4\">\n    <form [formGroup]=\"historyFilterForm\" fxLayoutAlign=\" start center\">\n        <app-timeline-filter formControlName=\"duration\" (selectionChange)=\"onTimelineChange($event)\"></app-timeline-filter>\n    </form>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"loginHistoryList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"login-history-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let loginHistory; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>\n                    <td mat-cell *matCellDef=\"let loginHistory;\">\n                        {{loginHistory?.created_at | date:'medium' }}\n                    </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns;\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n\n    </section>\n</div>\n",
                 styles: [".scroll-container{max-height:800px;overflow-y:auto}"]
             },] }
 ];