@bnsights/bbsf-controls 1.2.1 → 1.2.2

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Optional, Injectable, EventEmitter, Output, Input, Component, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, Pipe, ViewChild, HostListener, Directive, Self, Inject, ViewEncapsulation, forwardRef, ViewContainerRef, ViewChildren } from '@angular/core';
+import { Optional, Injectable, EventEmitter, Output, Input, Component, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, ViewChild, Pipe, HostListener, Directive, Self, Inject, ViewEncapsulation, forwardRef, ViewContainerRef, ViewChildren } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, DatePipe, KeyValuePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -2362,6 +2362,8 @@ class DateInputComponent {
         //Use this line to enable two way binding.
         this.options.value = originalValue;
         this.onChange.emit(originalValue);
+        // Manually close the picker to trigger afterPickerClosed event
+        this.picker?.close();
     }
     subscribeDateChanges() {
         const startDateChanges = this.comparedControl.valueChanges;
@@ -2390,7 +2392,7 @@ class DateInputComponent {
                 provide: OwlDateTimeIntl,
                 useClass: DefaultIntl
             }
-        ], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-datetime-picker\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label\r\n      {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\" aria-required=\"true\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" [readonly]=\"true\" (dateTimeChange)=\"onDateSelect($event)\" [dir]=\"textDir\" class=\"form-control bnsights-control\r\n        {{options.extraClasses}} \" [ngClass]=\"(options.viewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\" formControlName=\"{{options.name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n        [class.is-invalid]=\"datePickerFormControl.invalid &&\r\n        datePickerFormControl.touched\" [min]=\"options.startDate\" [max]=\"options.endDate\"\r\n        [hour12Timer]=\"options.hour12Timer\" [selectMode]=\"getSelectMode(options.selectMode)\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.pickerType)\" (afterPickerClosed)=\"checkIsPickerInFilter()\"\r\n        [startView]=\"startView\" [firstDayOfWeek]=\"options.firstDayOfWeek\" [hour12Timer]=\"options.hour12Timer\"\r\n        #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0\r\n            0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\"\r\n              d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\">\r\n            </path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\"\r\n              d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\"\r\n              fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <span class=\"readonly-view\">{{options.value ? (options.value|date:'MMM d, y, h:mm a') :\r\n        translateByKey('NA')}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- labelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(datePickerFormControl.invalid &&\r\n      datePickerFormControl.touched)\">\r\n      {{getErrorValidation(datePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n    )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }] }); }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["dt1"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-datetime-picker\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label\r\n      {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\" aria-required=\"true\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" [readonly]=\"true\" (dateTimeChange)=\"onDateSelect($event)\" [dir]=\"textDir\" class=\"form-control bnsights-control\r\n        {{options.extraClasses}} \" [ngClass]=\"(options.viewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\" formControlName=\"{{options.name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n        [class.is-invalid]=\"datePickerFormControl.invalid &&\r\n        datePickerFormControl.touched\" [min]=\"options.startDate\" [max]=\"options.endDate\"\r\n        [hour12Timer]=\"options.hour12Timer\" [selectMode]=\"getSelectMode(options.selectMode)\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.pickerType)\" (afterPickerClosed)=\"checkIsPickerInFilter()\"\r\n        [startView]=\"startView\" [firstDayOfWeek]=\"options.firstDayOfWeek\" [hour12Timer]=\"options.hour12Timer\"\r\n        #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0\r\n            0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\"\r\n              d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\">\r\n            </path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\"\r\n              d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\"\r\n              fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\">\r\n      <span class=\"readonly-view\">{{options.value ? (options.value|date:'MMM d, y, h:mm a') :\r\n        translateByKey('NA')}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- labelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(datePickerFormControl.invalid &&\r\n      datePickerFormControl.touched)\">\r\n      {{getErrorValidation(datePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n    )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -2417,6 +2419,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], onChange: [{
                 type: Output
+            }], picker: [{
+                type: ViewChild,
+                args: ['dt1']
             }] } });
 
 class BBSFDateTimePipe {