monkey-style-guide 2.0.135 → 2.0.136

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 (10) hide show
  1. package/assets/scss/partials/components/_date-range-picker.scss +36 -0
  2. package/esm2020/lib/components/date-range-picker/date-range-picker.component.mjs +78 -4
  3. package/fesm2015/monkey-style-guide.mjs +76 -3
  4. package/fesm2015/monkey-style-guide.mjs.map +1 -1
  5. package/fesm2020/monkey-style-guide.mjs +75 -3
  6. package/fesm2020/monkey-style-guide.mjs.map +1 -1
  7. package/lib/components/date-range-picker/date-range-picker.component.d.ts +7 -0
  8. package/monkey-style-guide-2.0.136.tgz +0 -0
  9. package/package.json +1 -1
  10. package/monkey-style-guide-2.0.135.tgz +0 -0
package/fesm2020/monkey-style-guide.mjs CHANGED
@@ -3075,16 +3075,24 @@ class MonkeyDateRangePickerComponent {
3075
3075
  this._daysArrSecond = [];
3076
3076
  this._disabled = false;
3077
3077
  this._minDate = null;
3078
+ this._startDate = null;
3079
+ this._endDate = null;
3080
+ this.unsubscribeAll = new Subject();
3078
3081
  this.initDateRange();
3079
3082
  }
3080
3083
  set minDate(value) {
3081
3084
  this._minDate = !this.moveDaysForward ? null : value;
3082
3085
  }
3083
3086
  initDateRange() {
3084
- return (this._dateForm = this.fb.group({
3087
+ this._dateForm = this.fb.group({
3085
3088
  startDate: [null, Validators.required],
3086
3089
  endDate: [null, Validators.required],
3087
- }));
3090
+ });
3091
+ this._dateForm?.valueChanges?.pipe(takeUntil(this.unsubscribeAll))?.subscribe((values) => {
3092
+ const { startDate, endDate } = values;
3093
+ this._startDate = startDate && moment(startDate);
3094
+ this._endDate = endDate && moment(endDate);
3095
+ });
3088
3096
  }
3089
3097
  createCalendar(month) {
3090
3098
  let firstDay = moment.default(month).startOf('M');
@@ -3289,6 +3297,38 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
3289
3297
  {{ helperMessage }}
3290
3298
  </helper>
3291
3299
  </mecx-date-range-picker-group-header>
3300
+ <mecx-date-range-picker-selected-dates>
3301
+ <div class="from"
3302
+ [class.actual]="!_startDate">
3303
+ <span class="title">
3304
+ {{ i18n?.from }}
3305
+ </span>
3306
+ <span class="data">
3307
+ <ng-container *ngIf="_startDate; else select">
3308
+ {{ _startDate?.format('DD') }}
3309
+ {{ i18n?.of }}
3310
+ {{ i18n?.months?.[_startDate.format('M')] }},
3311
+ {{ _startDate.format('YYYY') }}
3312
+ </ng-container>
3313
+ </span>
3314
+ </div>
3315
+ <div class="to" [class.actual]="_startDate">
3316
+ <span class="title">
3317
+ {{ i18n?.to }}
3318
+ </span>
3319
+ <span class="data">
3320
+ <ng-container *ngIf="_endDate; else select">
3321
+ {{ _endDate.format('DD') }}
3322
+ {{ i18n?.of }}
3323
+ {{ i18n?.months?.[_endDate.format('M')] }},
3324
+ {{ _endDate.format('YYYY') }}
3325
+ </ng-container>
3326
+ </span>
3327
+ </div>
3328
+ <ng-template #select>
3329
+ {{ i18n?.select }}
3330
+ </ng-template>
3331
+ </mecx-date-range-picker-selected-dates>
3292
3332
  <mecx-date-range-picker-group-body>
3293
3333
  <mecx-date-range-picker class="first-date-range">
3294
3334
  <mecx-date-range-picker-header>
@@ -3434,7 +3474,7 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
3434
3474
  </monkey-button>
3435
3475
  </mecx-date-range-picker-group-action>
3436
3476
  </mecx-date-range-picker-group>
3437
- `, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
3477
+ `, 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 });
3438
3478
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MonkeyDateRangePickerComponent, decorators: [{
3439
3479
  type: Component,
3440
3480
  args: [{
@@ -3449,6 +3489,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
3449
3489
  {{ helperMessage }}
3450
3490
  </helper>
3451
3491
  </mecx-date-range-picker-group-header>
3492
+ <mecx-date-range-picker-selected-dates>
3493
+ <div class="from"
3494
+ [class.actual]="!_startDate">
3495
+ <span class="title">
3496
+ {{ i18n?.from }}
3497
+ </span>
3498
+ <span class="data">
3499
+ <ng-container *ngIf="_startDate; else select">
3500
+ {{ _startDate?.format('DD') }}
3501
+ {{ i18n?.of }}
3502
+ {{ i18n?.months?.[_startDate.format('M')] }},
3503
+ {{ _startDate.format('YYYY') }}
3504
+ </ng-container>
3505
+ </span>
3506
+ </div>
3507
+ <div class="to" [class.actual]="_startDate">
3508
+ <span class="title">
3509
+ {{ i18n?.to }}
3510
+ </span>
3511
+ <span class="data">
3512
+ <ng-container *ngIf="_endDate; else select">
3513
+ {{ _endDate.format('DD') }}
3514
+ {{ i18n?.of }}
3515
+ {{ i18n?.months?.[_endDate.format('M')] }},
3516
+ {{ _endDate.format('YYYY') }}
3517
+ </ng-container>
3518
+ </span>
3519
+ </div>
3520
+ <ng-template #select>
3521
+ {{ i18n?.select }}
3522
+ </ng-template>
3523
+ </mecx-date-range-picker-selected-dates>
3452
3524
  <mecx-date-range-picker-group-body>
3453
3525
  <mecx-date-range-picker class="first-date-range">
3454
3526
  <mecx-date-range-picker-header>