@bnsights/bbsf-controls 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,7 +13,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
13
13
  import { TranslateService } from '@ngx-translate/core';
14
14
  import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
15
15
  import * as i5$1 from '@danielmoncada/angular-datetime-picker';
16
- import { OwlDateTimeIntl, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE } from '@danielmoncada/angular-datetime-picker';
16
+ import { OwlDateTimeIntl, OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from '@danielmoncada/angular-datetime-picker';
17
17
  import * as i7 from 'ng-inline-svg-2';
18
18
  import { InlineSVGModule } from 'ng-inline-svg-2';
19
19
  import * as i3 from '@bnsights/bbsf-utilities/ui';
@@ -2196,6 +2196,16 @@ class DateFormatter {
2196
2196
  }
2197
2197
  }
2198
2198
 
2199
+ // Custom date/time formats for the picker
2200
+ const BBSF_DATE_TIME_FORMATS = {
2201
+ parseInput: 'MM/DD/YYYY HH:mm',
2202
+ fullPickerInput: 'MM/DD/YYYY HH:mm',
2203
+ datePickerInput: 'MM/DD/YYYY',
2204
+ timePickerInput: 'HH:mm',
2205
+ monthYearLabel: 'MMM YYYY',
2206
+ dateA11yLabel: 'LL',
2207
+ monthYearA11yLabel: 'MMMM YYYY',
2208
+ };
2199
2209
  class DateInputComponent {
2200
2210
  static { this.controlContainerStatic = null; }
2201
2211
  constructor(onChangeService, controlUtility, controlContainer, DateInputControlHost, utilityService, controlValidationService, dateTimeAdapter) {
@@ -2261,16 +2271,8 @@ class DateInputComponent {
2261
2271
  }
2262
2272
  //#region events
2263
2273
  ngOnInit() {
2264
- this.textDir = this.options.forceDirection
2265
- ? this.options.forceDirection == ForceDirection.Arabic
2266
- ? 'rtl'
2267
- : 'ltr'
2268
- : localStorage.getItem('language') == 'ar'
2269
- ? 'rtl'
2270
- : 'ltr';
2271
- this.startView = (this.options.startView == StartView.MultiYear
2272
- ? 'multi-year'
2273
- : StartView[this.options.startView].toLowerCase());
2274
+ this.textDir = this.options.forceDirection ? this.options.forceDirection == ForceDirection.Arabic ? 'rtl' : 'ltr' : localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
2275
+ this.startView = (this.options.startView == StartView.MultiYear ? 'multi-year' : StartView[this.options.startView].toLowerCase());
2274
2276
  // Update the DateTimeAdapter Language with the current thread langauge
2275
2277
  this.dateTimeAdapter.setLocale(this.utilityService.getCurrentLanguage() == 'ar' ? 'ar' : 'en-UK');
2276
2278
  this.controlValidationService.isCreatedBefor = false;
@@ -2375,10 +2377,35 @@ class DateInputComponent {
2375
2377
  this.datePickerFormControl.updateValueAndValidity();
2376
2378
  });
2377
2379
  }
2378
- checkIsPickerInFilter() {
2380
+ onPickerClosed() {
2379
2381
  if (this.DropdownTemplateVariable)
2380
2382
  this.DropdownTemplateVariable.toggle();
2381
2383
  }
2384
+ onDateSelected(picker) {
2385
+ // For calendar-only pickers, we need to confirm selection and close
2386
+ if (picker && picker.pickerType === 'calendar') {
2387
+ // Wait for the selection to be fully processed
2388
+ setTimeout(() => {
2389
+ // Get the selected date from the picker
2390
+ const selectedDate = picker.selected;
2391
+ if (selectedDate) {
2392
+ // Manually update the form control value
2393
+ const dateValue = DateFormatter.toISOWithMillis(selectedDate);
2394
+ this.datePickerFormControl.setValue(dateValue);
2395
+ this.onChangeService.ChangeValue(this.options.name);
2396
+ this.options.value = selectedDate; // Keep as Date object for options
2397
+ this.onChange.emit(dateValue);
2398
+ // Confirm and close the picker
2399
+ picker.confirmSelect();
2400
+ setTimeout(() => {
2401
+ if (picker.opened) {
2402
+ picker.close();
2403
+ }
2404
+ }, 50);
2405
+ }
2406
+ }, 100);
2407
+ }
2408
+ }
2382
2409
  //#region helpers
2383
2410
  translateByKey(key) {
2384
2411
  return this.utilityService.getResourceValue(key);
@@ -2389,8 +2416,16 @@ class DateInputComponent {
2389
2416
  {
2390
2417
  provide: OwlDateTimeIntl,
2391
2418
  useClass: DefaultIntl
2419
+ },
2420
+ {
2421
+ provide: OWL_DATE_TIME_FORMATS,
2422
+ useValue: BBSF_DATE_TIME_FORMATS
2423
+ },
2424
+ {
2425
+ provide: OWL_DATE_TIME_LOCALE,
2426
+ useValue: ControlUtility.getLocal()
2392
2427
  }
2393
- ], 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 }] }); }
2428
+ ], 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'\"\r\n [attr.aria-describedby]=\"options.name + '-error'\"\r\n [attr.aria-invalid]=\"datePickerFormControl.invalid && datePickerFormControl.touched\"\r\n [formControlName]=\"options.name\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\" [class.is-invalid]=\"datePickerFormControl.invalid &&\r\n datePickerFormControl.touched\" [min]=\"options.startDate\" [max]=\"options.endDate\"\r\n [selectMode]=\"getSelectMode(options.selectMode)\" [placeholder]=\"options.placeholder\" [attr.id]=\"options.name\">\r\n\r\n <owl-date-time [pickerType]=\"getPickerType(options.pickerType)\" (afterPickerClosed)=\"onPickerClosed()\"\r\n (dateSelected)=\"onDateSelected(dt1)\" [startView]=\"startView\" [firstDayOfWeek]=\"options.firstDayOfWeek\"\r\n [hour12Timer]=\"options.hour12Timer\" #dt1>\r\n </owl-date-time>\r\n\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\"\r\n viewBox=\"0 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>", 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 }] }); }
2394
2429
  }
2395
2430
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, decorators: [{
2396
2431
  type: Component,
@@ -2405,8 +2440,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
2405
2440
  {
2406
2441
  provide: OwlDateTimeIntl,
2407
2442
  useClass: DefaultIntl
2443
+ },
2444
+ {
2445
+ provide: OWL_DATE_TIME_FORMATS,
2446
+ useValue: BBSF_DATE_TIME_FORMATS
2447
+ },
2448
+ {
2449
+ provide: OWL_DATE_TIME_LOCALE,
2450
+ useValue: ControlUtility.getLocal()
2408
2451
  }
2409
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 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" }]
2452
+ ], 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'\"\r\n [attr.aria-describedby]=\"options.name + '-error'\"\r\n [attr.aria-invalid]=\"datePickerFormControl.invalid && datePickerFormControl.touched\"\r\n [formControlName]=\"options.name\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\" [class.is-invalid]=\"datePickerFormControl.invalid &&\r\n datePickerFormControl.touched\" [min]=\"options.startDate\" [max]=\"options.endDate\"\r\n [selectMode]=\"getSelectMode(options.selectMode)\" [placeholder]=\"options.placeholder\" [attr.id]=\"options.name\">\r\n\r\n <owl-date-time [pickerType]=\"getPickerType(options.pickerType)\" (afterPickerClosed)=\"onPickerClosed()\"\r\n (dateSelected)=\"onDateSelected(dt1)\" [startView]=\"startView\" [firstDayOfWeek]=\"options.firstDayOfWeek\"\r\n [hour12Timer]=\"options.hour12Timer\" #dt1>\r\n </owl-date-time>\r\n\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\"\r\n viewBox=\"0 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>" }]
2410
2453
  }], ctorParameters: () => [{ type: OnPagingFiltersChangeService }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
2411
2454
  type: Optional
2412
2455
  }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: i5$1.DateTimeAdapter }], propDecorators: { group: [{
@@ -12487,5 +12530,5 @@ var ToolbarButtons;
12487
12530
  * Generated bundle index. Do not edit.
12488
12531
  */
12489
12532
 
12490
- export { AddButton, AppBaseComponent, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFCoreModule, BBSFDatePipe, BBSFDateTimeModule, BBSFDateTimePipe, BBSFDropdownModule, BBSFEditorsModule, BBSFFormsBasicModule, BBSFMultilingualModule, BBSFPhoneModule, BBSFSpecializedModule, BBSFUploadsModule, BBSFUtilityModule, BTagsInputComponent, BreadCrumb, BreadCrumbModel, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlFilterItem, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DeleteButton, DropdownActionItem, DropdownActions, DropdownListComponent, DropdownListItem, DropdownOptions, EditButton, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, ExportButton, FileDTO, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterOptions, FilterType, FiltersButton, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, GridViewModel, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MapSearchTypes, MapZoomLevel, MarkDownIcons, MarkdownEditorComponent, MarkdownEditorOptions, MarkdownMode, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, PreventDoubleClickDirective, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxModel, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, ToolbarButtons, UploadPersonalImage, environment, options };
12533
+ export { AddButton, AppBaseComponent, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFCoreModule, BBSFDatePipe, BBSFDateTimeModule, BBSFDateTimePipe, BBSFDropdownModule, BBSFEditorsModule, BBSFFormsBasicModule, BBSFMultilingualModule, BBSFPhoneModule, BBSFSpecializedModule, BBSFUploadsModule, BBSFUtilityModule, BBSF_DATE_TIME_FORMATS, BTagsInputComponent, BreadCrumb, BreadCrumbModel, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlFilterItem, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DeleteButton, DropdownActionItem, DropdownActions, DropdownListComponent, DropdownListItem, DropdownOptions, EditButton, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, ExportButton, FileDTO, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterOptions, FilterType, FiltersButton, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, GridViewModel, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MapSearchTypes, MapZoomLevel, MarkDownIcons, MarkdownEditorComponent, MarkdownEditorOptions, MarkdownMode, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, PreventDoubleClickDirective, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxModel, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, ToolbarButtons, UploadPersonalImage, environment, options };
12491
12534
  //# sourceMappingURL=bnsights-bbsf-controls.mjs.map