@smartbit4all/ng-client 3.2.13 → 3.2.15

package/fesm2020/smartbit4all-ng-client.mjs

@@ -4525,7 +4525,7 @@ const YEARH_MONTH_FORMAT = {
         dateInput: 'MM/YYYY',
     },
     display: {
-        dateInput: 'MM/YYYY',
+        dateInput: 'MM/YYYY' || 'YYYY/MM',
         monthYearLabel: 'MMM YYYY',
         dateA11yLabel: 'LL',
         monthYearA11yLabel: 'MMMM YYYY',
@@ -4537,23 +4537,35 @@ class SmartMonthPickerComponent {
         this.SmartWidgetHintPosition = SmartWidgetHint.PositionEnum;
     }
     ngOnInit() {
-        if (this.widgetInstance.value && this.widgetInstance.value.length) {
-            let date = new Date(this.widgetInstance.value);
-            let valueInMoment = moment(date);
-            this.date = new FormControl(valueInMoment);
+        // if (this.widgetInstance.value && this.widgetInstance.value.length) {
+        //   let date = new Date(this.widgetInstance.value);
+        //   let valueInMoment = moment(date);
+        //   this.date = new FormControl(valueInMoment);
+        // } else {
+        //   this.date = new FormControl(moment());
+        //   this.valueChange.next(this.date.value);
+        // }
+        moment(this.widgetInstance.value || '');
+        if (this.widgetInstance.value) {
+            let momemtValue = moment(this.widgetInstance.value);
+            this.date = new FormControl(momemtValue);
         }
         else {
-            this.date = new FormControl(moment());
+            // let momemtValue = moment();
+            this.date = new FormControl('');
         }
     }
     chosenMonthHandler(moment, datepicker) {
-        const ctrlValue = this.date.value;
-        ctrlValue.month(moment.month());
-        ctrlValue.year(moment.year());
-        this.date.setValue(ctrlValue);
-        this.valueChange.next(ctrlValue);
+        // const ctrlValue = this.date.value;
+        // ctrlValue.month(moment.month());
+        // ctrlValue.year(moment.year());
+        this.date.setValue(moment);
+        this.valueChange.next(moment);
         datepicker.close();
     }
+    handleChange(event) {
+        this.valueChange.next(this.date.value);
+    }
 }
 SmartMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SmartMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: { widgetInstance: "widgetInstance" }, outputs: { valueChange: "valueChange" }, providers: [
@@ -4563,7 +4575,7 @@ SmartMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
         },
         { provide: MAT_DATE_FORMATS, useValue: YEARH_MONTH_FORMAT },
-    ], ngImport: i0, template: "<div class=\"smart-month-picker-container\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <input matInput [matDatepicker]=\"dp\" placeholder=\"Month and Year\" [formControl]=\"date\" />\r\n    <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      #dp\r\n      startView=\"multi-year\"\r\n      (monthSelected)=\"chosenMonthHandler($event, dp)\"\r\n      panelClass=\"example-month-picker\"\r\n    >\r\n    </mat-datepicker>\r\n  </mat-form-field>\r\n  <div class=\"smart-month-picker-hint\">\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.Input\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [""], components: [{ type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<div class=\"smart-month-picker-container\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <input\r\n      matInput\r\n      [matDatepicker]=\"dp\"\r\n      placeholder=\"Month and Year\"\r\n      [formControl]=\"date\"\r\n      (input)=\"handleChange($event)\"\r\n    />\r\n    <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      #dp\r\n      startView=\"multi-year\"\r\n      (monthSelected)=\"chosenMonthHandler($event, dp)\"\r\n      panelClass=\"example-month-picker\"\r\n    >\r\n    </mat-datepicker>\r\n  </mat-form-field>\r\n  <div class=\"smart-month-picker-hint\">\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.Input\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [""], components: [{ type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartMonthPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-smart-month-picker', providers: [
@@ -4573,7 +4585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
                         { provide: MAT_DATE_FORMATS, useValue: YEARH_MONTH_FORMAT },
-                    ], template: "<div class=\"smart-month-picker-container\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <input matInput [matDatepicker]=\"dp\" placeholder=\"Month and Year\" [formControl]=\"date\" />\r\n    <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      #dp\r\n      startView=\"multi-year\"\r\n      (monthSelected)=\"chosenMonthHandler($event, dp)\"\r\n      panelClass=\"example-month-picker\"\r\n    >\r\n    </mat-datepicker>\r\n  </mat-form-field>\r\n  <div class=\"smart-month-picker-hint\">\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.Input\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [""] }]
+                    ], template: "<div class=\"smart-month-picker-container\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <input\r\n      matInput\r\n      [matDatepicker]=\"dp\"\r\n      placeholder=\"Month and Year\"\r\n      [formControl]=\"date\"\r\n      (input)=\"handleChange($event)\"\r\n    />\r\n    <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      #dp\r\n      startView=\"multi-year\"\r\n      (monthSelected)=\"chosenMonthHandler($event, dp)\"\r\n      panelClass=\"example-month-picker\"\r\n    >\r\n    </mat-datepicker>\r\n  </mat-form-field>\r\n  <div class=\"smart-month-picker-hint\">\r\n    <mat-hint\r\n      *ngIf=\"\r\n        !widgetInstance?.hint || widgetInstance?.hint?.position === SmartWidgetHintPosition.Input\r\n      \"\r\n      >{{ widgetInstance.hint?.text }}</mat-hint\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [""] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], valueChange: [{
@@ -4826,11 +4838,13 @@ class SmartformwidgetComponent {
         }
     }
     setDateFormControl(dateFormControl, _moment, timeValue) {
-        let hour = timeValue.substring(0, 2);
-        let min = timeValue.substring(3, 5);
-        _moment.hour(hour);
-        _moment.minute(min);
-        dateFormControl.setValue(_moment);
+        if (_moment) {
+            let hour = timeValue.substring(0, 2);
+            let min = timeValue.substring(3, 5);
+            _moment.hour(hour);
+            _moment.minute(min);
+            dateFormControl.setValue(_moment);
+        }
     }
     getTime() {
         if (this.widgetInstance.type === SmartFormWidgetType.DATE_TIME_PICKER) {
@@ -5110,7 +5124,7 @@ class SmartformwidgetComponent {
                 return this.widgetInstance.valueList.filter((option) => option.label.toLowerCase().includes(filterValue));
             }
             else {
-                this.widgetInstance.valueList;
+                return this.widgetInstance.valueList;
             }
         }
         return [];
@@ -5131,7 +5145,6 @@ class SmartformwidgetComponent {
         });
     }
     handleYearMonthPicked(yearMonthValue) {
-        console.log(yearMonthValue);
         this.setDateFormControl(this.form.controls[this.widgetInstance.key], yearMonthValue, '00:00');
     }
     compareItems(o1, o2) {