monkey-style-guide 2.0.207 → 2.0.209

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.
Files changed (11) hide show
  1. package/esm2020/lib/components/date-range-picker/date-range-picker.component.mjs +50 -38
  2. package/esm2020/lib/components/date-range-picker-v2/date-range-picker.component.mjs +48 -36
  3. package/fesm2015/monkey-style-guide.mjs +94 -70
  4. package/fesm2015/monkey-style-guide.mjs.map +1 -1
  5. package/fesm2020/monkey-style-guide.mjs +94 -70
  6. package/fesm2020/monkey-style-guide.mjs.map +1 -1
  7. package/lib/components/date-range-picker/date-range-picker.component.d.ts +2 -1
  8. package/lib/components/date-range-picker-v2/date-range-picker.component.d.ts +1 -0
  9. package/monkey-style-guide-2.0.209.tgz +0 -0
  10. package/package.json +1 -1
  11. package/monkey-style-guide-2.0.207.tgz +0 -0
package/fesm2020/monkey-style-guide.mjs CHANGED
@@ -5343,8 +5343,8 @@ class MonkeyDateRangePickerComponent {
5343
5343
  });
5344
5344
  this._dateForm?.valueChanges?.pipe(takeUntil(this.unsubscribeAll))?.subscribe((values) => {
5345
5345
  const { startDate, endDate } = values;
5346
- this._startDate = startDate && moment$2.default(startDate);
5347
- this._endDate = endDate && moment$2.default(endDate);
5346
+ this._startDate = startDate;
5347
+ this._endDate = endDate;
5348
5348
  });
5349
5349
  }
5350
5350
  createCalendar(month) {
@@ -5531,6 +5531,23 @@ class MonkeyDateRangePickerComponent {
5531
5531
  }
5532
5532
  this.writeValue(_dateForm.value);
5533
5533
  }
5534
+ onDataChange(event, isStart) {
5535
+ const input = event.target;
5536
+ const { value } = input;
5537
+ const [year] = value.split('-');
5538
+ if (`${Number(year)}`.length < 4)
5539
+ return;
5540
+ if (isStart) {
5541
+ this._dateForm.setValue({ startDate: value, endDate: null });
5542
+ }
5543
+ else {
5544
+ this._dateForm.setValue({ startDate: this._dateForm.value.startDate, endDate: value });
5545
+ }
5546
+ this.cdr.detectChanges();
5547
+ this.onModelChange(this._dateForm.value);
5548
+ this.onModelTouched(this._dateForm.value);
5549
+ this.writeValue(this._dateForm.value);
5550
+ }
5534
5551
  ngOnDestroy() {
5535
5552
  this.unsubscribeAll.next();
5536
5553
  this.unsubscribeAll.complete();
@@ -5561,12 +5578,12 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
5561
5578
  {{ i18n?.from }}
5562
5579
  </span>
5563
5580
  <span class="data">
5564
- <ng-container *ngIf="_startDate; else select">
5565
- {{ _startDate?.format('DD') }}
5566
- {{ i18n?.of }}
5567
- {{ i18n?.months?.[_startDate.format('M')] }},
5568
- {{ _startDate.format('YYYY') }}
5569
- </ng-container>
5581
+ <input
5582
+ class="date-input"
5583
+ type="date"
5584
+ [(ngModel)]="_startDate"
5585
+ (change)="onDataChange($event, true)"
5586
+ />
5570
5587
  </span>
5571
5588
  </div>
5572
5589
  <div class="to" [class.actual]="_startDate">
@@ -5574,12 +5591,12 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
5574
5591
  {{ i18n?.to }}
5575
5592
  </span>
5576
5593
  <span class="data">
5577
- <ng-container *ngIf="_endDate; else select">
5578
- {{ _endDate.format('DD') }}
5579
- {{ i18n?.of }}
5580
- {{ i18n?.months?.[_endDate.format('M')] }},
5581
- {{ _endDate.format('YYYY') }}
5582
- </ng-container>
5594
+ <input
5595
+ type="date"
5596
+ class="date-input"
5597
+ [(ngModel)]="_endDate"
5598
+ (change)="onDataChange($event, false)"
5599
+ />
5583
5600
  </span>
5584
5601
  </div>
5585
5602
  <ng-template #select>
@@ -5731,12 +5748,10 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
5731
5748
  </monkey-button>
5732
5749
  </mecx-date-range-picker-group-action>
5733
5750
  </mecx-date-range-picker-group>
5734
- `, 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 });
5751
+ `, 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 });
5735
5752
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonkeyDateRangePickerComponent, decorators: [{
5736
5753
  type: Component,
5737
- args: [{
5738
- selector: 'monkey-date-range-picker',
5739
- template: `
5754
+ args: [{ selector: 'monkey-date-range-picker', template: `
5740
5755
  <mecx-date-range-picker-group [ngClass]="{ disabled: _disabled }" [id]="_id">
5741
5756
  <mecx-date-range-picker-group-header>
5742
5757
  <label>
@@ -5753,12 +5768,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
5753
5768
  {{ i18n?.from }}
5754
5769
  </span>
5755
5770
  <span class="data">
5756
- <ng-container *ngIf="_startDate; else select">
5757
- {{ _startDate?.format('DD') }}
5758
- {{ i18n?.of }}
5759
- {{ i18n?.months?.[_startDate.format('M')] }},
5760
- {{ _startDate.format('YYYY') }}
5761
- </ng-container>
5771
+ <input
5772
+ class="date-input"
5773
+ type="date"
5774
+ [(ngModel)]="_startDate"
5775
+ (change)="onDataChange($event, true)"
5776
+ />
5762
5777
  </span>
5763
5778
  </div>
5764
5779
  <div class="to" [class.actual]="_startDate">
@@ -5766,12 +5781,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
5766
5781
  {{ i18n?.to }}
5767
5782
  </span>
5768
5783
  <span class="data">
5769
- <ng-container *ngIf="_endDate; else select">
5770
- {{ _endDate.format('DD') }}
5771
- {{ i18n?.of }}
5772
- {{ i18n?.months?.[_endDate.format('M')] }},
5773
- {{ _endDate.format('YYYY') }}
5774
- </ng-container>
5784
+ <input
5785
+ type="date"
5786
+ class="date-input"
5787
+ [(ngModel)]="_endDate"
5788
+ (change)="onDataChange($event, false)"
5789
+ />
5775
5790
  </span>
5776
5791
  </div>
5777
5792
  <ng-template #select>
@@ -5923,17 +5938,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
5923
5938
  </monkey-button>
5924
5939
  </mecx-date-range-picker-group-action>
5925
5940
  </mecx-date-range-picker-group>
5926
- `,
5927
- encapsulation: ViewEncapsulation.None,
5928
- providers: [
5941
+ `, encapsulation: ViewEncapsulation.None, providers: [
5929
5942
  {
5930
5943
  provide: NG_VALUE_ACCESSOR,
5931
5944
  useExisting: forwardRef(() => MonkeyDateRangePickerComponent),
5932
5945
  multi: true,
5933
5946
  },
5934
5947
  CurrencyPipe,
5935
- ],
5936
- }]
5948
+ ], 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"] }]
5937
5949
  }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
5938
5950
  type: Input
5939
5951
  }], helperMessage: [{
@@ -6010,8 +6022,8 @@ class MonkeyDateRangePickerV2Component {
6010
6022
  });
6011
6023
  this._dateForm?.valueChanges?.pipe(takeUntil(this.unsubscribeAll))?.subscribe((values) => {
6012
6024
  const { startDate, endDate } = values;
6013
- this._startDate = startDate && moment$1.default(startDate);
6014
- this._endDate = endDate && moment$1.default(endDate);
6025
+ this._startDate = startDate;
6026
+ this._endDate = endDate;
6015
6027
  });
6016
6028
  }
6017
6029
  createCalendar(month) {
@@ -6202,6 +6214,23 @@ class MonkeyDateRangePickerV2Component {
6202
6214
  }
6203
6215
  this.writeValue(_dateForm.value);
6204
6216
  }
6217
+ onDataChange(event, isStart) {
6218
+ const input = event.target;
6219
+ const { value } = input;
6220
+ const [year] = value.split('-');
6221
+ if (`${Number(year)}`.length < 4)
6222
+ return;
6223
+ if (isStart) {
6224
+ this._dateForm.setValue({ startDate: value, endDate: null });
6225
+ }
6226
+ else {
6227
+ this._dateForm.setValue({ startDate: this._dateForm.value.startDate, endDate: value });
6228
+ }
6229
+ this.cdr.detectChanges();
6230
+ this.onModelChange(this._dateForm.value);
6231
+ this.onModelTouched(this._dateForm.value);
6232
+ this.writeValue(this._dateForm.value);
6233
+ }
6205
6234
  ngOnDestroy() {
6206
6235
  this.unsubscribeAll.next();
6207
6236
  this.unsubscribeAll.complete();
@@ -6231,12 +6260,12 @@ MonkeyDateRangePickerV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
6231
6260
  {{ i18n?.from }}
6232
6261
  </span>
6233
6262
  <span class="data">
6234
- <ng-container *ngIf="_startDate; else select">
6235
- {{ _startDate?.format('DD') }}
6236
- {{ i18n?.of }}
6237
- {{ i18n?.months?.[_startDate.format('M')] }},
6238
- {{ _startDate.format('YYYY') }}
6239
- </ng-container>
6263
+ <input
6264
+ class="date-input"
6265
+ type="date"
6266
+ [(ngModel)]="_startDate"
6267
+ (change)="onDataChange($event, true)"
6268
+ />
6240
6269
  </span>
6241
6270
  </div>
6242
6271
  <div class="to" [class.actual]="_startDate">
@@ -6244,12 +6273,12 @@ MonkeyDateRangePickerV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
6244
6273
  {{ i18n?.to }}
6245
6274
  </span>
6246
6275
  <span class="data">
6247
- <ng-container *ngIf="_endDate; else select">
6248
- {{ _endDate.format('DD') }}
6249
- {{ i18n?.of }}
6250
- {{ i18n?.months?.[_endDate.format('M')] }},
6251
- {{ _endDate.format('YYYY') }}
6252
- </ng-container>
6276
+ <input
6277
+ type="date"
6278
+ class="date-input"
6279
+ [(ngModel)]="_endDate"
6280
+ (change)="onDataChange($event, false)"
6281
+ />
6253
6282
  </span>
6254
6283
  </div>
6255
6284
  <ng-template #select>
@@ -6401,12 +6430,10 @@ MonkeyDateRangePickerV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
6401
6430
  </div>
6402
6431
  </mecx-date-range-picker-group-action>
6403
6432
  </mecx-date-range-picker-group>
6404
- `, 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 });
6433
+ `, 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"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
6405
6434
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonkeyDateRangePickerV2Component, decorators: [{
6406
6435
  type: Component,
6407
- args: [{
6408
- selector: 'monkey-date-range-picker-v2',
6409
- template: `
6436
+ args: [{ selector: 'monkey-date-range-picker-v2', template: `
6410
6437
  <mecx-date-range-picker-group [ngClass]="{ disabled: _disabled }" [id]="_id">
6411
6438
  <mecx-date-range-picker-group-header>
6412
6439
  <label>
@@ -6422,12 +6449,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
6422
6449
  {{ i18n?.from }}
6423
6450
  </span>
6424
6451
  <span class="data">
6425
- <ng-container *ngIf="_startDate; else select">
6426
- {{ _startDate?.format('DD') }}
6427
- {{ i18n?.of }}
6428
- {{ i18n?.months?.[_startDate.format('M')] }},
6429
- {{ _startDate.format('YYYY') }}
6430
- </ng-container>
6452
+ <input
6453
+ class="date-input"
6454
+ type="date"
6455
+ [(ngModel)]="_startDate"
6456
+ (change)="onDataChange($event, true)"
6457
+ />
6431
6458
  </span>
6432
6459
  </div>
6433
6460
  <div class="to" [class.actual]="_startDate">
@@ -6435,12 +6462,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
6435
6462
  {{ i18n?.to }}
6436
6463
  </span>
6437
6464
  <span class="data">
6438
- <ng-container *ngIf="_endDate; else select">
6439
- {{ _endDate.format('DD') }}
6440
- {{ i18n?.of }}
6441
- {{ i18n?.months?.[_endDate.format('M')] }},
6442
- {{ _endDate.format('YYYY') }}
6443
- </ng-container>
6465
+ <input
6466
+ type="date"
6467
+ class="date-input"
6468
+ [(ngModel)]="_endDate"
6469
+ (change)="onDataChange($event, false)"
6470
+ />
6444
6471
  </span>
6445
6472
  </div>
6446
6473
  <ng-template #select>
@@ -6592,17 +6619,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
6592
6619
  </div>
6593
6620
  </mecx-date-range-picker-group-action>
6594
6621
  </mecx-date-range-picker-group>
6595
- `,
6596
- encapsulation: ViewEncapsulation.None,
6597
- providers: [
6622
+ `, encapsulation: ViewEncapsulation.None, providers: [
6598
6623
  {
6599
6624
  provide: NG_VALUE_ACCESSOR,
6600
6625
  useExisting: forwardRef(() => MonkeyDateRangePickerV2Component),
6601
6626
  multi: true
6602
6627
  },
6603
6628
  CurrencyPipe
6604
- ]
6605
- }]
6629
+ ], 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"] }]
6606
6630
  }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
6607
6631
  type: Input
6608
6632
  }], helperMessage: [{