monkey-style-guide 2.0.104 → 2.0.108
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/README.md +88 -4
- package/assets/scss/partials/components/_date-range-picker.scss +1 -0
- package/assets/scss/partials/components/_input-phone.scss +9 -0
- package/bundles/monkey-style-guide.umd.js +24 -8
- package/bundles/monkey-style-guide.umd.js.map +1 -1
- package/esm2015/lib/components/date-range-picker/date-range-picker.component.js +25 -9
- package/esm2015/lib/components/input/input.component.js +2 -2
- package/fesm2015/monkey-style-guide.js +25 -9
- package/fesm2015/monkey-style-guide.js.map +1 -1
- package/lib/components/date-range-picker/date-range-picker.component.d.ts +3 -1
- package/monkey-style-guide-2.0.108.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.104.tgz +0 -0
package/README.md
CHANGED
|
@@ -194,18 +194,101 @@ import { MonkeyCheckboxModule } from 'monkey-style-guide';
|
|
|
194
194
|
|
|
195
195
|
```HTML
|
|
196
196
|
<monkey-checkbox
|
|
197
|
-
description="I Agree to Terms"
|
|
197
|
+
description="I Agree to Terms"
|
|
198
198
|
errorMessage="Validation Message"
|
|
199
199
|
formControlName="terms"
|
|
200
200
|
helperMessage="Mandatory"
|
|
201
201
|
infoMessage="Info message"
|
|
202
202
|
label="Terms and Conditions"
|
|
203
|
-
type="single"
|
|
203
|
+
type="single">
|
|
204
204
|
</monkey-checkbox>
|
|
205
205
|
```
|
|
206
206
|
|
|
207
207
|
---
|
|
208
208
|
|
|
209
|
+
### **Date Range Picker**
|
|
210
|
+
|
|
211
|
+
![Date Range Picker Demo Screen Shot][date-range-picker]
|
|
212
|
+
|
|
213
|
+
Parameters:
|
|
214
|
+
|
|
215
|
+
- **errorMessage** (string) message to alert user
|
|
216
|
+
- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
|
|
217
|
+
- **infoMessage** (optional)(string) message to help user knows about this component purpose
|
|
218
|
+
- **label** (string) define the label that will be displayed inside
|
|
219
|
+
- **i18n** (Object) an i18n object (see example)
|
|
220
|
+
|
|
221
|
+
Events:
|
|
222
|
+
|
|
223
|
+
- **onChange** event emited when user select a range of dates or when clicked on some action
|
|
224
|
+
|
|
225
|
+
Example:
|
|
226
|
+
|
|
227
|
+
`example.module.ts`
|
|
228
|
+
|
|
229
|
+
```Typescript
|
|
230
|
+
import { MonkeyDateRangePicker } from 'monkey-style-guide';
|
|
231
|
+
|
|
232
|
+
...
|
|
233
|
+
|
|
234
|
+
@NgModule({
|
|
235
|
+
imports: [MonkeyDateRangePicker]
|
|
236
|
+
})
|
|
237
|
+
...
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
`example.component.html`
|
|
241
|
+
|
|
242
|
+
```HTML
|
|
243
|
+
<monkey-date-range-picker
|
|
244
|
+
errorMessage="Error Message"
|
|
245
|
+
helperMessage="Helper Message"
|
|
246
|
+
infoMessage="Info Message"
|
|
247
|
+
label="Label"
|
|
248
|
+
[i18n]="i18n">
|
|
249
|
+
</monkey-date-range-picker>
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
`example.component.ts`
|
|
253
|
+
|
|
254
|
+
```Typescript
|
|
255
|
+
...
|
|
256
|
+
i18n = {
|
|
257
|
+
months: {
|
|
258
|
+
'1': 'January',
|
|
259
|
+
'2': 'Febuary',
|
|
260
|
+
'3': 'March',
|
|
261
|
+
'4': 'April',
|
|
262
|
+
'5': 'May',
|
|
263
|
+
'6': 'June',
|
|
264
|
+
'7': 'July',
|
|
265
|
+
'8': 'August',
|
|
266
|
+
'9': 'September',
|
|
267
|
+
'10': 'October',
|
|
268
|
+
'11': 'November',
|
|
269
|
+
'12': 'December'
|
|
270
|
+
},
|
|
271
|
+
days: {
|
|
272
|
+
'1': 'Sun.',
|
|
273
|
+
'2': 'Mon.',
|
|
274
|
+
'3': 'Tue.',
|
|
275
|
+
'4': 'Wed.',
|
|
276
|
+
'5': 'Thu.',
|
|
277
|
+
'6': 'Fri.',
|
|
278
|
+
'7': 'Sat.'
|
|
279
|
+
},
|
|
280
|
+
actions: {
|
|
281
|
+
'30': '30 days',
|
|
282
|
+
'60': '60 days',
|
|
283
|
+
'90': '90 days'
|
|
284
|
+
},
|
|
285
|
+
today: 'Today'
|
|
286
|
+
};
|
|
287
|
+
...
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
209
292
|
### **Expansion**
|
|
210
293
|
|
|
211
294
|
![Expansion Demo Screen Shot][expansion-screenshot1]
|
|
@@ -501,13 +584,13 @@ import { MonkeyInputModule } from 'monkey-style-guide';
|
|
|
501
584
|
|
|
502
585
|
```HTML
|
|
503
586
|
<monkey-input
|
|
504
|
-
errorMessage="Validation Message"
|
|
587
|
+
errorMessage="Validation Message"
|
|
505
588
|
formControlName="name"
|
|
506
589
|
helperMessage="Mandatory"
|
|
507
590
|
icon="user-s20"
|
|
508
591
|
infoMessage="Info message"
|
|
509
592
|
label="Name"
|
|
510
|
-
placeholder="Input your full name"
|
|
593
|
+
placeholder="Input your full name">
|
|
511
594
|
</monkey-input>
|
|
512
595
|
```
|
|
513
596
|
|
|
@@ -1065,6 +1148,7 @@ export class AppComponent {
|
|
|
1065
1148
|
[input-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/input.png
|
|
1066
1149
|
[select-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/select.png
|
|
1067
1150
|
[checkbox-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/checkbox.png
|
|
1151
|
+
[date-range-picker]: https://user-images.githubusercontent.com/12416871/146080473-8543b9ae-7186-42ee-8ec8-bfd1eef09df6.png
|
|
1068
1152
|
[expansion-screenshot1]: https://user-images.githubusercontent.com/10110065/111636157-f8b08080-87d6-11eb-86ab-86839297d068.png
|
|
1069
1153
|
[expansion-screenshot2]: https://user-images.githubusercontent.com/10110065/111636340-24336b00-87d7-11eb-9f19-504ab96cc9af.png
|
|
1070
1154
|
[file-upload-screenshot1]: https://user-images.githubusercontent.com/10110065/111640018-8b065380-87da-11eb-8d47-87ddea29b943.png
|
|
@@ -8,12 +8,17 @@
|
|
|
8
8
|
//@import './select.scss';
|
|
9
9
|
|
|
10
10
|
monkey-input-phone {
|
|
11
|
+
mecx-form-field mecx-form-field-body {
|
|
12
|
+
height: 48px;
|
|
13
|
+
}
|
|
14
|
+
|
|
11
15
|
monkey-select {
|
|
12
16
|
width: unset !important;
|
|
13
17
|
|
|
14
18
|
mecx-form-field mecx-form-field-body {
|
|
15
19
|
width: unset !important;
|
|
16
20
|
border: unset !important;
|
|
21
|
+
height: 46px !important;
|
|
17
22
|
}
|
|
18
23
|
|
|
19
24
|
mecx-form-field mecx-form-field-header {
|
|
@@ -24,4 +29,8 @@ monkey-input-phone {
|
|
|
24
29
|
display: none !important;
|
|
25
30
|
}
|
|
26
31
|
}
|
|
32
|
+
|
|
33
|
+
mecx-form-field mecx-form-field-body > input {
|
|
34
|
+
height: 46px !important;
|
|
35
|
+
}
|
|
27
36
|
}
|
|
@@ -2792,6 +2792,7 @@
|
|
|
2792
2792
|
this.fb = fb;
|
|
2793
2793
|
this.cdr = cdr;
|
|
2794
2794
|
this.helperMessage = '';
|
|
2795
|
+
this.minDate = null;
|
|
2795
2796
|
this.onChange = new i0.EventEmitter();
|
|
2796
2797
|
this.today = moment().format('YYYY-MM-DD');
|
|
2797
2798
|
this.onModelChange = function (value) { };
|
|
@@ -2930,6 +2931,14 @@
|
|
|
2930
2931
|
return startDateMoment.isSame(day);
|
|
2931
2932
|
}
|
|
2932
2933
|
};
|
|
2934
|
+
MonkeyDateRangePickerComponent.prototype.isDisabled = function (day) {
|
|
2935
|
+
var minDate = this.minDate;
|
|
2936
|
+
if (minDate) {
|
|
2937
|
+
var firstDay = moment(minDate);
|
|
2938
|
+
return day.isBefore(firstDay.subtract(1, 'day'));
|
|
2939
|
+
}
|
|
2940
|
+
return false;
|
|
2941
|
+
};
|
|
2933
2942
|
MonkeyDateRangePickerComponent.prototype.isFirstSelected = function (day) {
|
|
2934
2943
|
var _dateForm = this._dateForm;
|
|
2935
2944
|
var startDate = _dateForm.value.startDate;
|
|
@@ -2943,12 +2952,17 @@
|
|
|
2943
2952
|
MonkeyDateRangePickerComponent.prototype.selectedDate = function (day) {
|
|
2944
2953
|
if (this._disabled)
|
|
2945
2954
|
return;
|
|
2946
|
-
var _dateForm =
|
|
2955
|
+
var _a = this, _dateForm = _a._dateForm, minDate = _a.minDate;
|
|
2947
2956
|
var dayFormatted = day.format('YYYY-MM-DD');
|
|
2957
|
+
if (minDate) {
|
|
2958
|
+
var firstDay = moment(minDate);
|
|
2959
|
+
if (day.isBefore(firstDay.subtract(1, 'day')))
|
|
2960
|
+
return;
|
|
2961
|
+
}
|
|
2948
2962
|
if (_dateForm.valid) {
|
|
2949
2963
|
this.clearDates();
|
|
2950
2964
|
}
|
|
2951
|
-
var
|
|
2965
|
+
var _b = _dateForm.value, startDate = _b.startDate, endDate = _b.endDate;
|
|
2952
2966
|
if (startDate) {
|
|
2953
2967
|
if (moment(startDate).isAfter(moment(dayFormatted))) {
|
|
2954
2968
|
endDate = startDate;
|
|
@@ -2971,9 +2985,9 @@
|
|
|
2971
2985
|
MonkeyDateRangePickerComponent.prototype.selectRangeOfDays = function (days) {
|
|
2972
2986
|
if (this._disabled)
|
|
2973
2987
|
return;
|
|
2974
|
-
var _a = this, _dateForm = _a._dateForm, today = _a.today;
|
|
2988
|
+
var _a = this, _dateForm = _a._dateForm, minDate = _a.minDate, today = _a.today;
|
|
2975
2989
|
var startDate = _dateForm.value.startDate;
|
|
2976
|
-
var firstDay = startDate || today;
|
|
2990
|
+
var firstDay = moment(startDate || minDate || today).format('YYYY-MM-DD');
|
|
2977
2991
|
var lastDay = moment(firstDay).add(days, 'day').format('YYYY-MM-DD');
|
|
2978
2992
|
_dateForm.get('startDate').patchValue(firstDay);
|
|
2979
2993
|
_dateForm.get('endDate').patchValue(lastDay);
|
|
@@ -2982,19 +2996,19 @@
|
|
|
2982
2996
|
return MonkeyDateRangePickerComponent;
|
|
2983
2997
|
}());
|
|
2984
2998
|
MonkeyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerComponent, deps: [{ token: i1__namespace$2.FormBuilder }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2985
|
-
MonkeyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyDateRangePickerComponent, selector: "monkey-date-range-picker", inputs: { label: "label", helperMessage: "helperMessage", i18n: "i18n", infoMessage: "infoMessage", errorMessage: "errorMessage", value: "value" }, outputs: { onChange: "onChange" }, providers: [
|
|
2999
|
+
MonkeyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyDateRangePickerComponent, selector: "monkey-date-range-picker", inputs: { label: "label", helperMessage: "helperMessage", i18n: "i18n", infoMessage: "infoMessage", errorMessage: "errorMessage", minDate: "minDate", value: "value" }, outputs: { onChange: "onChange" }, providers: [
|
|
2986
3000
|
{
|
|
2987
3001
|
provide: i1$2.NG_VALUE_ACCESSOR,
|
|
2988
3002
|
useExisting: i0.forwardRef(function () { return MonkeyDateRangePickerComponent; }),
|
|
2989
3003
|
multi: true,
|
|
2990
3004
|
},
|
|
2991
3005
|
i1$1.CurrencyPipe,
|
|
2992
|
-
], ngImport: i0__namespace, template: "\n <mecx-date-range-picker-group [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-date-range-picker-group-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-date-range-picker-group-header>\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 [disabled]=\"_disabled\"\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 [disabled]=\"_disabled\"\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 [disabled]=\"_disabled\"\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\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(30)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['30'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(60)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['60'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(90)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['90'] }}\n </monkey-button>\n </div>\n <monkey-button\n color=\"theme\"\n type=\"primary\"\n (click)=\"navigateToToday()\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.today }}\n </monkey-button>\n </mecx-date-range-picker-group-action>\n </mecx-date-range-picker-group>\n ", isInline: true, components: [{ type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
3006
|
+
], ngImport: i0__namespace, template: "\n <mecx-date-range-picker-group [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-date-range-picker-group-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-date-range-picker-group-header>\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 [disabled]=\"_disabled\"\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 [disabled]=\"_disabled\"\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 || isDisabled(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 [disabled]=\"_disabled\"\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 || isDisabled(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\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(30)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['30'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(60)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['60'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(90)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['90'] }}\n </monkey-button>\n </div>\n <monkey-button\n color=\"theme\"\n type=\"primary\"\n (click)=\"navigateToToday()\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.today }}\n </monkey-button>\n </mecx-date-range-picker-group-action>\n </mecx-date-range-picker-group>\n ", isInline: true, components: [{ type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2993
3007
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerComponent, decorators: [{
|
|
2994
3008
|
type: i0.Component,
|
|
2995
3009
|
args: [{
|
|
2996
3010
|
selector: 'monkey-date-range-picker',
|
|
2997
|
-
template: "\n <mecx-date-range-picker-group [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-date-range-picker-group-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-date-range-picker-group-header>\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 [disabled]=\"_disabled\"\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 [disabled]=\"_disabled\"\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 [disabled]=\"_disabled\"\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\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(30)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['30'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(60)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['60'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(90)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['90'] }}\n </monkey-button>\n </div>\n <monkey-button\n color=\"theme\"\n type=\"primary\"\n (click)=\"navigateToToday()\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.today }}\n </monkey-button>\n </mecx-date-range-picker-group-action>\n </mecx-date-range-picker-group>\n ",
|
|
3011
|
+
template: "\n <mecx-date-range-picker-group [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-date-range-picker-group-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-date-range-picker-group-header>\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 [disabled]=\"_disabled\"\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 [disabled]=\"_disabled\"\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 || isDisabled(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 [disabled]=\"_disabled\"\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 || isDisabled(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\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(30)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['30'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(60)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['60'] }}\n </monkey-button>\n <monkey-button\n color=\"theme\"\n type=\"secondary\"\n (click)=\"selectRangeOfDays(90)\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.actions?.['90'] }}\n </monkey-button>\n </div>\n <monkey-button\n color=\"theme\"\n type=\"primary\"\n (click)=\"navigateToToday()\"\n [disabled]=\"_disabled\"\n >\n {{ i18n?.today }}\n </monkey-button>\n </mecx-date-range-picker-group-action>\n </mecx-date-range-picker-group>\n ",
|
|
2998
3012
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2999
3013
|
providers: [
|
|
3000
3014
|
{
|
|
@@ -3015,6 +3029,8 @@
|
|
|
3015
3029
|
type: i0.Input
|
|
3016
3030
|
}], errorMessage: [{
|
|
3017
3031
|
type: i0.Input
|
|
3032
|
+
}], minDate: [{
|
|
3033
|
+
type: i0.Input
|
|
3018
3034
|
}], onChange: [{
|
|
3019
3035
|
type: i0.Output
|
|
3020
3036
|
}], value: [{
|
|
@@ -3166,7 +3182,7 @@
|
|
|
3166
3182
|
var inputChar = String.fromCharCode(event.charCode);
|
|
3167
3183
|
if (this.currency || this.onlyNumber || this.percent) {
|
|
3168
3184
|
pattern = /[0-9]/;
|
|
3169
|
-
if (inputChar === '0' && !this.replaceZero(cmp)) {
|
|
3185
|
+
if (!this.onlyNumber && inputChar === '0' && !this.replaceZero(cmp)) {
|
|
3170
3186
|
event.preventDefault();
|
|
3171
3187
|
return;
|
|
3172
3188
|
}
|