monkey-style-guide 2.0.207 → 2.0.208

package/fesm2020/monkey-style-guide.mjs

@@ -5343,8 +5343,8 @@ class MonkeyDateRangePickerComponent {
         });
         this._dateForm?.valueChanges?.pipe(takeUntil(this.unsubscribeAll))?.subscribe((values) => {
             const { startDate, endDate } = values;
-            this._startDate = startDate && moment$2.default(startDate);
-            this._endDate = endDate && moment$2.default(endDate);
+            this._startDate = startDate;
+            this._endDate = endDate;
         });
     }
     createCalendar(month) {
@@ -5531,6 +5531,23 @@ class MonkeyDateRangePickerComponent {
         }
         this.writeValue(_dateForm.value);
     }
+    onDataChange(event, isStart) {
+        const input = event.target;
+        const { value } = input;
+        const [year] = value.split('-');
+        if (`${Number(year)}`.length < 4)
+            return;
+        if (isStart) {
+            this._dateForm.setValue({ startDate: value, endDate: null });
+        }
+        else {
+            this._dateForm.setValue({ startDate: this._dateForm.value.startDate, endDate: value });
+        }
+        this.cdr.detectChanges();
+        this.onModelChange(this._dateForm.value);
+        this.onModelTouched(this._dateForm.value);
+        this.writeValue(this._dateForm.value);
+    }
     ngOnDestroy() {
         this.unsubscribeAll.next();
         this.unsubscribeAll.complete();
@@ -5561,12 +5578,12 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             {{ i18n?.from }}
           </span>
           <span class="data">
-            <ng-container *ngIf="_startDate; else select">
-              {{ _startDate?.format('DD') }}
-              {{ i18n?.of }}
-              {{ i18n?.months?.[_startDate.format('M')] }},
-              {{ _startDate.format('YYYY') }}
-            </ng-container>
+            <input
+              class="date-input"
+              type="date"
+              [(ngModel)]="_startDate"
+              (change)="onDataChange($event, true)"
+            />
           </span>
         </div>
         <div class="to" [class.actual]="_startDate">
@@ -5574,12 +5591,12 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             {{ i18n?.to }}
           </span>
           <span class="data">
-            <ng-container *ngIf="_endDate; else select">
-              {{ _endDate.format('DD') }}
-              {{ i18n?.of }}
-              {{ i18n?.months?.[_endDate.format('M')] }},
-              {{ _endDate.format('YYYY') }}
-            </ng-container>
+            <input
+              type="date"
+              class="date-input"
+              [(ngModel)]="_endDate"
+              (change)="onDataChange($event, false)"
+            />
           </span>
         </div>
         <ng-template #select>
@@ -5731,12 +5748,10 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </monkey-button>
       </mecx-date-range-picker-group-action>
     </mecx-date-range-picker-group>
-  `, isInline: true, components: [{ type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["monkey-date-range-picker .date-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}monkey-date-range-picker .date-input::-moz-calendar-picker-indicator{display:none}monkey-date-range-picker .date-input::-webkit-inner-spin-button,monkey-date-range-picker .date-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], components: [{ type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonkeyDateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'monkey-date-range-picker',
-                    template: `
+            args: [{ selector: 'monkey-date-range-picker', template: `
     <mecx-date-range-picker-group [ngClass]="{ disabled: _disabled }" [id]="_id">
       <mecx-date-range-picker-group-header>
         <label>
@@ -5753,12 +5768,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             {{ i18n?.from }}
           </span>
           <span class="data">
-            <ng-container *ngIf="_startDate; else select">
-              {{ _startDate?.format('DD') }}
-              {{ i18n?.of }}
-              {{ i18n?.months?.[_startDate.format('M')] }},
-              {{ _startDate.format('YYYY') }}
-            </ng-container>
+            <input
+              class="date-input"
+              type="date"
+              [(ngModel)]="_startDate"
+              (change)="onDataChange($event, true)"
+            />
           </span>
         </div>
         <div class="to" [class.actual]="_startDate">
@@ -5766,12 +5781,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             {{ i18n?.to }}
           </span>
           <span class="data">
-            <ng-container *ngIf="_endDate; else select">
-              {{ _endDate.format('DD') }}
-              {{ i18n?.of }}
-              {{ i18n?.months?.[_endDate.format('M')] }},
-              {{ _endDate.format('YYYY') }}
-            </ng-container>
+            <input
+              type="date"
+              class="date-input"
+              [(ngModel)]="_endDate"
+              (change)="onDataChange($event, false)"
+            />
           </span>
         </div>
         <ng-template #select>
@@ -5923,17 +5938,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </monkey-button>
       </mecx-date-range-picker-group-action>
     </mecx-date-range-picker-group>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [
+  `, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MonkeyDateRangePickerComponent),
                             multi: true,
                         },
                         CurrencyPipe,
-                    ],
-                }]
+                    ], styles: ["monkey-date-range-picker .date-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}monkey-date-range-picker .date-input::-moz-calendar-picker-indicator{display:none}monkey-date-range-picker .date-input::-webkit-inner-spin-button,monkey-date-range-picker .date-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                 type: Input
             }], helperMessage: [{