monkey-style-guide 2.0.88 → 2.0.92
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.
- package/assets/scss/partials/components/_date-range-picker.scss +4 -5
- package/bundles/monkey-style-guide.umd.js +29 -20
- package/bundles/monkey-style-guide.umd.js.map +1 -1
- package/esm2015/lib/components/date-range-picker/date-range-picker.component.js +32 -23
- package/esm2015/lib/components/date-range-picker/date-range-picker.component.ngfactory.js +20 -21
- package/esm2015/lib/components/date-range-picker/date-range-picker.component.ngsummary.json +1 -1
- package/esm2015/lib/components/date-range-picker/date-range-picker.module.ngfactory.js +1 -1
- package/esm2015/lib/components/date-range-picker/index.ngsummary.json +1 -1
- package/esm2015/lib/components/index.ngsummary.json +1 -1
- package/esm2015/monkey-style-guide.ngsummary.json +1 -1
- package/esm2015/public-api.ngsummary.json +1 -1
- package/fesm2015/monkey-style-guide.js +32 -22
- package/fesm2015/monkey-style-guide.js.map +1 -1
- package/lib/components/date-range-picker/date-range-picker.component.d.ts +1 -0
- package/monkey-style-guide-2.0.92.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.88.tgz +0 -0
|
@@ -22,11 +22,6 @@ monkey-date-range-picker {
|
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
width: 100%;
|
|
24
24
|
|
|
25
|
-
&.error {
|
|
26
|
-
border: 1px solid #fa3838;
|
|
27
|
-
padding: 4px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
25
|
mecx-date-range-picker-group-body {
|
|
31
26
|
display: flex;
|
|
32
27
|
width: 100%;
|
|
@@ -81,6 +76,10 @@ monkey-date-range-picker {
|
|
|
81
76
|
padding-top: 16px;
|
|
82
77
|
align-items: flex-end;
|
|
83
78
|
|
|
79
|
+
&.error {
|
|
80
|
+
border-top: 1px solid #fa3838;
|
|
81
|
+
}
|
|
82
|
+
|
|
84
83
|
.action-days > * {
|
|
85
84
|
margin-right: 24px;
|
|
86
85
|
}
|
|
@@ -2247,12 +2247,6 @@
|
|
|
2247
2247
|
];
|
|
2248
2248
|
|
|
2249
2249
|
var moment = moment___namespace;
|
|
2250
|
-
var ɵ0 = function () {
|
|
2251
|
-
var isMobileWidth = window.screen.width <= 640 ||
|
|
2252
|
-
(window.matchMedia && window.matchMedia('only screen and (max-width: 640px)').matches);
|
|
2253
|
-
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile/i.test(navigator.userAgent) || isMobileWidth);
|
|
2254
|
-
};
|
|
2255
|
-
var isMobile = (ɵ0)();
|
|
2256
2250
|
var MonkeyDateRangePickerComponent = /** @class */ (function () {
|
|
2257
2251
|
function MonkeyDateRangePickerComponent(fb, cdr) {
|
|
2258
2252
|
this.fb = fb;
|
|
@@ -2310,9 +2304,11 @@
|
|
|
2310
2304
|
};
|
|
2311
2305
|
MonkeyDateRangePickerComponent.prototype.build = function () {
|
|
2312
2306
|
this._daysArrFirst = this.createCalendar(this._dateFirst);
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2307
|
+
this._daysArrSecond = this.createCalendar(this._dateSecond);
|
|
2308
|
+
};
|
|
2309
|
+
MonkeyDateRangePickerComponent.prototype.clearDates = function () {
|
|
2310
|
+
this._dateForm.setValue({ startDate: null, endDate: null });
|
|
2311
|
+
this.writeValue(this._dateForm.value);
|
|
2316
2312
|
};
|
|
2317
2313
|
MonkeyDateRangePickerComponent.prototype.navigateToToday = function () {
|
|
2318
2314
|
this._dateFirst = moment();
|
|
@@ -2333,13 +2329,17 @@
|
|
|
2333
2329
|
return this._dateForm.value;
|
|
2334
2330
|
},
|
|
2335
2331
|
set: function (value) {
|
|
2336
|
-
if (
|
|
2332
|
+
if (value &&
|
|
2333
|
+
Object.prototype.hasOwnProperty.call(value, 'startDate') &&
|
|
2337
2334
|
Object.prototype.hasOwnProperty.call(value, 'endDate')) {
|
|
2338
2335
|
this._dateForm.setValue(value);
|
|
2339
2336
|
this.cdr.detectChanges();
|
|
2340
2337
|
this.onModelChange(this._dateForm.value);
|
|
2341
2338
|
this.onModelTouched(this._dateForm.value);
|
|
2342
2339
|
}
|
|
2340
|
+
else {
|
|
2341
|
+
this.clearDates();
|
|
2342
|
+
}
|
|
2343
2343
|
},
|
|
2344
2344
|
enumerable: false,
|
|
2345
2345
|
configurable: true
|
|
@@ -2393,17 +2393,27 @@
|
|
|
2393
2393
|
var _dateForm = this._dateForm;
|
|
2394
2394
|
var dayFormatted = day.format('YYYY-MM-DD');
|
|
2395
2395
|
if (_dateForm.valid) {
|
|
2396
|
-
|
|
2397
|
-
this.writeValue(_dateForm.value);
|
|
2398
|
-
return;
|
|
2396
|
+
this.clearDates();
|
|
2399
2397
|
}
|
|
2400
|
-
|
|
2401
|
-
|
|
2398
|
+
var _a = _dateForm.value, startDate = _a.startDate, endDate = _a.endDate;
|
|
2399
|
+
if (startDate) {
|
|
2400
|
+
if (moment(startDate).isAfter(moment(dayFormatted))) {
|
|
2401
|
+
endDate = startDate;
|
|
2402
|
+
startDate = dayFormatted;
|
|
2403
|
+
}
|
|
2404
|
+
else {
|
|
2405
|
+
endDate = dayFormatted;
|
|
2406
|
+
}
|
|
2402
2407
|
}
|
|
2403
|
-
else
|
|
2404
|
-
|
|
2405
|
-
|
|
2408
|
+
else
|
|
2409
|
+
startDate = dayFormatted;
|
|
2410
|
+
if (startDate) {
|
|
2411
|
+
_dateForm.get('startDate').patchValue(startDate);
|
|
2412
|
+
}
|
|
2413
|
+
if (endDate) {
|
|
2414
|
+
_dateForm.get('endDate').patchValue(endDate);
|
|
2406
2415
|
}
|
|
2416
|
+
this.writeValue(_dateForm.value);
|
|
2407
2417
|
};
|
|
2408
2418
|
MonkeyDateRangePickerComponent.prototype.selectRangeOfDays = function (days) {
|
|
2409
2419
|
var _a = this, _dateForm = _a._dateForm, today = _a.today;
|
|
@@ -2419,7 +2429,7 @@
|
|
|
2419
2429
|
MonkeyDateRangePickerComponent.decorators = [
|
|
2420
2430
|
{ type: core.Component, args: [{
|
|
2421
2431
|
selector: 'monkey-date-range-picker',
|
|
2422
|
-
template: "\n <mecx-date-range-picker-group
|
|
2432
|
+
template: "\n <mecx-date-range-picker-group>\n <mecx-date-range-picker-group-body>\n <mecx-date-range-picker class=\"first-date-range\">\n <mecx-date-range-picker-header>\n <div class=\"calendar-title\">\n <monkey-button\n class=\"calendar-previous\"\n color=\"theme\"\n icon=\"arrow-left-16\"\n type=\"tertiary\"\n (click)=\"previousMonth()\"\n size=\"sm\"\n >\n </monkey-button>\n <div class=\"month-year-title\">\n {{ i18n?.months?.[_dateFirst.format('M')] }}\n {{ _dateFirst.format('YYYY') }}\n </div>\n <monkey-button\n class=\"calendar-next\"\n color=\"theme\"\n icon=\"arrow-right-16\"\n type=\"tertiary\"\n (click)=\"nextMonth()\"\n size=\"sm\"\n >\n </monkey-button>\n </div>\n <div class=\"week\">\n <span class=\"week-day\" *ngFor=\"let day of [1, 2, 3, 4, 5, 6, 7]\">\n {{ i18n?.days?.[day]}}\n </span>\n </div>\n </mecx-date-range-picker-header>\n <mecx-date-range-picker-body>\n <div class=\"month-week\" *ngFor=\"let week of _daysArrFirst\">\n <div\n class=\"month-day\"\n (click)=\"selectedDate(day)\"\n [ngClass]=\"{\n inactive: !day,\n selected: isSelected(day),\n today: todayCheck(day),\n 'first-selected': isFirstSelected(day),\n 'last-selected': isLastSelected(day)\n }\"\n *ngFor=\"let day of week\"\n #divOne\n >\n {{ day?.date() }}\n </div>\n </div>\n </mecx-date-range-picker-body>\n </mecx-date-range-picker>\n\n <mecx-date-range-picker class=\"second-date-range\">\n <mecx-date-range-picker-header>\n <div class=\"calendar-title\">\n <div class=\"month-year-title\">\n {{ i18n?.months?.[_dateSecond.format('M')] }}\n {{ _dateSecond.format('YYYY') }}\n </div>\n <monkey-button\n class=\"calendar-previous\"\n color=\"theme\"\n icon=\"arrow-right-16\"\n type=\"tertiary\"\n (click)=\"nextMonth()\"\n size=\"sm\"\n >\n </monkey-button>\n </div>\n <div class=\"week\">\n <span class=\"week-day\" *ngFor=\"let day of [1, 2, 3, 4, 5, 6, 7]\">\n {{ i18n?.days?.[day]}}\n </span>\n </div>\n </mecx-date-range-picker-header>\n <mecx-date-range-picker-body>\n <div class=\"month-week\" *ngFor=\"let week of _daysArrSecond\">\n <div\n class=\"month-day\"\n (click)=\"selectedDate(day)\"\n [ngClass]=\"{\n inactive: !day,\n selected: isSelected(day),\n today: todayCheck(day),\n 'first-selected': isFirstSelected(day),\n 'last-selected': isLastSelected(day)\n }\"\n *ngFor=\"let day of week\"\n >\n {{ day?.date() }}\n </div>\n </div>\n </mecx-date-range-picker-body>\n </mecx-date-range-picker>\n </mecx-date-range-picker-group-body>\n <mecx-date-range-picker-group-info>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-date-range-picker-group-info>\n <mecx-date-range-picker-group-action [class.error]=\"errorMessage?.trim()\">\n <div class=\"action-days\">\n <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(30)\">\n {{ i18n?.actions?.['30'] }}\n </monkey-button>\n <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(60)\">\n {{ i18n?.actions?.['60'] }}\n </monkey-button>\n <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(90)\">\n {{ i18n?.actions?.['90'] }}\n </monkey-button>\n </div>\n <monkey-button color=\"theme\" type=\"primary\" (click)=\"navigateToToday()\">\n {{ i18n?.today }}\n </monkey-button>\n </mecx-date-range-picker-group-action>\n </mecx-date-range-picker-group>\n ",
|
|
2423
2433
|
encapsulation: core.ViewEncapsulation.None,
|
|
2424
2434
|
providers: [
|
|
2425
2435
|
{
|
|
@@ -5225,7 +5235,6 @@
|
|
|
5225
5235
|
exports.MonkeyUtils = MonkeyUtils;
|
|
5226
5236
|
exports.MonkeyWizardComponent = MonkeyWizardComponent;
|
|
5227
5237
|
exports.MonkeyWizardModule = MonkeyWizardModule;
|
|
5228
|
-
exports.ɵ0 = ɵ0;
|
|
5229
5238
|
exports.ɵa = MonkeyStyleGuideService;
|
|
5230
5239
|
exports.ɵb = MonkeyStyleGuideSettingsService;
|
|
5231
5240
|
exports.ɵc = MonkeyStyleGuideThemeSettingsService;
|