monkey-style-guide 2.0.103 → 2.0.107
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 +24 -0
- package/assets/scss/partials/components/_input-phone.scss +9 -0
- package/bundles/monkey-style-guide.umd.js +10 -5
- package/bundles/monkey-style-guide.umd.js.map +1 -1
- package/esm2015/lib/components/date-range-picker/date-range-picker.component.js +24 -3
- package/esm2015/lib/components/input/input.component.js +2 -2
- package/fesm2015/monkey-style-guide.js +24 -3
- 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.107.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.103.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
|
|
@@ -22,6 +22,30 @@ monkey-date-range-picker {
|
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
width: 100%;
|
|
24
24
|
|
|
25
|
+
mecx-date-range-picker-group-header {
|
|
26
|
+
width: 100%;
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: row;
|
|
29
|
+
justify-content: space-between;
|
|
30
|
+
align-items: center;
|
|
31
|
+
margin-bottom: 16px;
|
|
32
|
+
|
|
33
|
+
label {
|
|
34
|
+
color: #4b4a53;
|
|
35
|
+
font-size: 18px;
|
|
36
|
+
line-height: 21px;
|
|
37
|
+
font-weight: 500;
|
|
38
|
+
text-align: left;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
helper {
|
|
42
|
+
color: #adadad;
|
|
43
|
+
font-size: 12px;
|
|
44
|
+
line-height: 14px;
|
|
45
|
+
font-weight: 400;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
25
49
|
mecx-date-range-picker-group-body {
|
|
26
50
|
display: flex;
|
|
27
51
|
width: 100%;
|
|
@@ -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
|
}
|
|
@@ -2791,6 +2791,7 @@
|
|
|
2791
2791
|
function MonkeyDateRangePickerComponent(fb, cdr) {
|
|
2792
2792
|
this.fb = fb;
|
|
2793
2793
|
this.cdr = cdr;
|
|
2794
|
+
this.helperMessage = '';
|
|
2794
2795
|
this.onChange = new i0.EventEmitter();
|
|
2795
2796
|
this.today = moment().format('YYYY-MM-DD');
|
|
2796
2797
|
this.onModelChange = function (value) { };
|
|
@@ -2981,19 +2982,19 @@
|
|
|
2981
2982
|
return MonkeyDateRangePickerComponent;
|
|
2982
2983
|
}());
|
|
2983
2984
|
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 });
|
|
2984
|
-
MonkeyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyDateRangePickerComponent, selector: "monkey-date-range-picker", inputs: { i18n: "i18n", infoMessage: "infoMessage", errorMessage: "errorMessage", value: "value" }, outputs: { onChange: "onChange" }, providers: [
|
|
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: [
|
|
2985
2986
|
{
|
|
2986
2987
|
provide: i1$2.NG_VALUE_ACCESSOR,
|
|
2987
2988
|
useExisting: i0.forwardRef(function () { return MonkeyDateRangePickerComponent; }),
|
|
2988
2989
|
multi: true,
|
|
2989
2990
|
},
|
|
2990
2991
|
i1$1.CurrencyPipe,
|
|
2991
|
-
], ngImport: i0__namespace, template: "\n <mecx-date-range-picker-group [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\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 });
|
|
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 });
|
|
2992
2993
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerComponent, decorators: [{
|
|
2993
2994
|
type: i0.Component,
|
|
2994
2995
|
args: [{
|
|
2995
2996
|
selector: 'monkey-date-range-picker',
|
|
2996
|
-
template: "\n <mecx-date-range-picker-group [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\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 ",
|
|
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 ",
|
|
2997
2998
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2998
2999
|
providers: [
|
|
2999
3000
|
{
|
|
@@ -3004,7 +3005,11 @@
|
|
|
3004
3005
|
i1$1.CurrencyPipe,
|
|
3005
3006
|
],
|
|
3006
3007
|
}]
|
|
3007
|
-
}], ctorParameters: function () { return [{ type: i1__namespace$2.FormBuilder }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: {
|
|
3008
|
+
}], ctorParameters: function () { return [{ type: i1__namespace$2.FormBuilder }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { label: [{
|
|
3009
|
+
type: i0.Input
|
|
3010
|
+
}], helperMessage: [{
|
|
3011
|
+
type: i0.Input
|
|
3012
|
+
}], i18n: [{
|
|
3008
3013
|
type: i0.Input
|
|
3009
3014
|
}], infoMessage: [{
|
|
3010
3015
|
type: i0.Input
|
|
@@ -3161,7 +3166,7 @@
|
|
|
3161
3166
|
var inputChar = String.fromCharCode(event.charCode);
|
|
3162
3167
|
if (this.currency || this.onlyNumber || this.percent) {
|
|
3163
3168
|
pattern = /[0-9]/;
|
|
3164
|
-
if (inputChar === '0' && !this.replaceZero(cmp)) {
|
|
3169
|
+
if (!this.onlyNumber && inputChar === '0' && !this.replaceZero(cmp)) {
|
|
3165
3170
|
event.preventDefault();
|
|
3166
3171
|
return;
|
|
3167
3172
|
}
|