monkey-style-guide 2.0.102 → 2.0.106
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 +22 -15
- 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-phone/input-phone.component.js +17 -23
- package/fesm2015/monkey-style-guide.js +39 -24
- package/fesm2015/monkey-style-guide.js.map +1 -1
- package/lib/components/date-range-picker/date-range-picker.component.d.ts +3 -1
- package/lib/components/input-phone/input-phone.component.d.ts +2 -2
- package/monkey-style-guide-2.0.106.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.102.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
|
|
@@ -3765,6 +3770,7 @@
|
|
|
3765
3770
|
this.helperMessage = '';
|
|
3766
3771
|
this.placeholder = '';
|
|
3767
3772
|
this.maxLength = 255;
|
|
3773
|
+
this.internationalNumber = 55;
|
|
3768
3774
|
this.onChange = new i0.EventEmitter();
|
|
3769
3775
|
this.onModelChange = function (value) { };
|
|
3770
3776
|
this.onModelTouched = function (value) { };
|
|
@@ -3772,7 +3778,6 @@
|
|
|
3772
3778
|
this._disabled = false;
|
|
3773
3779
|
this._regionCodes = [];
|
|
3774
3780
|
this._countryCodes = [];
|
|
3775
|
-
this._internationalNumber = 55;
|
|
3776
3781
|
this._formControl = null;
|
|
3777
3782
|
if (this.ngControl != null) {
|
|
3778
3783
|
this.ngControl.valueAccessor = this;
|
|
@@ -3785,29 +3790,29 @@
|
|
|
3785
3790
|
return ("" + value).replace(new RegExp(/0/, 'g'), '');
|
|
3786
3791
|
};
|
|
3787
3792
|
MonkeyInputPhoneComponent.prototype.formatValue = function (value) {
|
|
3788
|
-
return MonkeyUtils.getPhoneNumberFormated(value, this.
|
|
3793
|
+
return MonkeyUtils.getPhoneNumberFormated(value, this.internationalNumber);
|
|
3789
3794
|
};
|
|
3790
3795
|
MonkeyInputPhoneComponent.prototype.getValue = function () {
|
|
3791
|
-
var _d = this,
|
|
3796
|
+
var _d = this, internationalNumber = _d.internationalNumber, _handledValue = _d._handledValue;
|
|
3792
3797
|
if (_handledValue)
|
|
3793
|
-
return "+" +
|
|
3798
|
+
return "+" + internationalNumber + _handledValue;
|
|
3794
3799
|
return '';
|
|
3795
3800
|
};
|
|
3796
3801
|
MonkeyInputPhoneComponent.prototype.ngOnInit = function () {
|
|
3797
3802
|
var _a, _b;
|
|
3798
3803
|
this._countryCodes = MonkeyUtils.getPhoneRegions();
|
|
3799
3804
|
this.onHandleInternationalNumber();
|
|
3800
|
-
this.onHandleCountryCode(this.
|
|
3805
|
+
this.onHandleCountryCode(this.internationalNumber);
|
|
3801
3806
|
this._formControl =
|
|
3802
3807
|
this.ngControl && (((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngControl) === null || _b === void 0 ? void 0 : _b.control));
|
|
3803
3808
|
};
|
|
3804
3809
|
MonkeyInputPhoneComponent.prototype.onHandleInternationalNumber = function (value) {
|
|
3805
|
-
this.
|
|
3806
|
-
MonkeyUtils.getPhoneCountryCode(value || this._handledValue) || this.
|
|
3810
|
+
this.internationalNumber =
|
|
3811
|
+
MonkeyUtils.getPhoneCountryCode(value || this._handledValue) || this.internationalNumber;
|
|
3807
3812
|
};
|
|
3808
3813
|
MonkeyInputPhoneComponent.prototype.onHandleInternationalNumberFormated = function () {
|
|
3809
|
-
var
|
|
3810
|
-
return "+" +
|
|
3814
|
+
var internationalNumber = this.internationalNumber;
|
|
3815
|
+
return "+" + internationalNumber;
|
|
3811
3816
|
};
|
|
3812
3817
|
MonkeyInputPhoneComponent.prototype.onHandleCountryCode = function (event) {
|
|
3813
3818
|
var maxLength = MonkeyUtils.getPhoneHandle(event).maxLength;
|
|
@@ -3871,12 +3876,12 @@
|
|
|
3871
3876
|
return MonkeyInputPhoneComponent;
|
|
3872
3877
|
}());
|
|
3873
3878
|
MonkeyInputPhoneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneComponent, deps: [{ token: i1__namespace$2.NgControl, optional: true, self: true }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3874
|
-
MonkeyInputPhoneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyInputPhoneComponent, selector: "monkey-input-phone", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", maxLength: "maxLength", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0__namespace, template: "\n <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n <monkey-icon\n [icon]=\"icon\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"icon\"\n ></monkey-icon>\n <monkey-select\n [(ngModel)]=\"
|
|
3879
|
+
MonkeyInputPhoneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyInputPhoneComponent, selector: "monkey-input-phone", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", maxLength: "maxLength", internationalNumber: "internationalNumber", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0__namespace, template: "\n <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n <monkey-icon\n [icon]=\"icon\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"icon\"\n ></monkey-icon>\n <monkey-select\n [(ngModel)]=\"internationalNumber\"\n [labelSelect]=\"onHandleInternationalNumberFormated()\"\n (onChange)=\"onHandleCountryCode($event)\"\n >\n <monkey-option *ngFor=\"let cc of _countryCodes\" [label]=\"'+' + cc\" [value]=\"cc\">\n </monkey-option>\n </monkey-select>\n <input\n [name]=\"name\"\n type=\"string\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n (keypress)=\"onKeyPress($event)\"\n [disabled]=\"_disabled\"\n [maxLength]=\"maxLength\"\n phoneNumberValidate\n [ctrl]=\"_formControl\"\n [phoneNumber]=\"_handledValue\"\n [internationalNumber]=\"internationalNumber\"\n #monkeyInput\n />\n </mecx-form-field-body>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MonkeySelectComponent, selector: "monkey-select", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "onHandleOptions", "value"], outputs: ["onChange"] }, { type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$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: PhoneNumberValidDirective, selector: "[phoneNumberValidate]", inputs: ["phoneNumber", "internationalNumber", "ctrl"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
3875
3880
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneComponent, decorators: [{
|
|
3876
3881
|
type: i0.Component,
|
|
3877
3882
|
args: [{
|
|
3878
3883
|
selector: 'monkey-input-phone',
|
|
3879
|
-
template: "\n <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n <monkey-icon\n [icon]=\"icon\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"icon\"\n ></monkey-icon>\n <monkey-select\n [(ngModel)]=\"
|
|
3884
|
+
template: "\n <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n <monkey-icon\n [icon]=\"icon\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"icon\"\n ></monkey-icon>\n <monkey-select\n [(ngModel)]=\"internationalNumber\"\n [labelSelect]=\"onHandleInternationalNumberFormated()\"\n (onChange)=\"onHandleCountryCode($event)\"\n >\n <monkey-option *ngFor=\"let cc of _countryCodes\" [label]=\"'+' + cc\" [value]=\"cc\">\n </monkey-option>\n </monkey-select>\n <input\n [name]=\"name\"\n type=\"string\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n (keypress)=\"onKeyPress($event)\"\n [disabled]=\"_disabled\"\n [maxLength]=\"maxLength\"\n phoneNumberValidate\n [ctrl]=\"_formControl\"\n [phoneNumber]=\"_handledValue\"\n [internationalNumber]=\"internationalNumber\"\n #monkeyInput\n />\n </mecx-form-field-body>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
3880
3885
|
encapsulation: i0.ViewEncapsulation.None,
|
|
3881
3886
|
}]
|
|
3882
3887
|
}], ctorParameters: function () {
|
|
@@ -3901,6 +3906,8 @@
|
|
|
3901
3906
|
type: i0.Input
|
|
3902
3907
|
}], maxLength: [{
|
|
3903
3908
|
type: i0.Input
|
|
3909
|
+
}], internationalNumber: [{
|
|
3910
|
+
type: i0.Input
|
|
3904
3911
|
}], onChange: [{
|
|
3905
3912
|
type: i0.Output
|
|
3906
3913
|
}], value: [{
|