monkey-style-guide 2.0.101 → 2.0.105
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 +24 -0
- package/assets/scss/partials/components/_input-phone.scss +9 -0
- package/bundles/monkey-style-guide.umd.js +25 -17
- 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 +20 -25
- package/fesm2015/monkey-style-guide.js +42 -26
- 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.105.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.101.tgz +0 -0
|
@@ -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,28 +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
|
-
var _a;
|
|
3802
|
+
var _a, _b;
|
|
3798
3803
|
this._countryCodes = MonkeyUtils.getPhoneRegions();
|
|
3799
3804
|
this.onHandleInternationalNumber();
|
|
3800
|
-
this.onHandleCountryCode(this.
|
|
3801
|
-
this._formControl =
|
|
3805
|
+
this.onHandleCountryCode(this.internationalNumber);
|
|
3806
|
+
this._formControl =
|
|
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));
|
|
3802
3808
|
};
|
|
3803
3809
|
MonkeyInputPhoneComponent.prototype.onHandleInternationalNumber = function (value) {
|
|
3804
|
-
this.
|
|
3805
|
-
MonkeyUtils.getPhoneCountryCode(value || this._handledValue) || this.
|
|
3810
|
+
this.internationalNumber =
|
|
3811
|
+
MonkeyUtils.getPhoneCountryCode(value || this._handledValue) || this.internationalNumber;
|
|
3806
3812
|
};
|
|
3807
3813
|
MonkeyInputPhoneComponent.prototype.onHandleInternationalNumberFormated = function () {
|
|
3808
|
-
var
|
|
3809
|
-
return "+" +
|
|
3814
|
+
var internationalNumber = this.internationalNumber;
|
|
3815
|
+
return "+" + internationalNumber;
|
|
3810
3816
|
};
|
|
3811
3817
|
MonkeyInputPhoneComponent.prototype.onHandleCountryCode = function (event) {
|
|
3812
3818
|
var maxLength = MonkeyUtils.getPhoneHandle(event).maxLength;
|
|
@@ -3870,12 +3876,12 @@
|
|
|
3870
3876
|
return MonkeyInputPhoneComponent;
|
|
3871
3877
|
}());
|
|
3872
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 });
|
|
3873
|
-
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 });
|
|
3874
3880
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneComponent, decorators: [{
|
|
3875
3881
|
type: i0.Component,
|
|
3876
3882
|
args: [{
|
|
3877
3883
|
selector: 'monkey-input-phone',
|
|
3878
|
-
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 ",
|
|
3879
3885
|
encapsulation: i0.ViewEncapsulation.None,
|
|
3880
3886
|
}]
|
|
3881
3887
|
}], ctorParameters: function () {
|
|
@@ -3900,6 +3906,8 @@
|
|
|
3900
3906
|
type: i0.Input
|
|
3901
3907
|
}], maxLength: [{
|
|
3902
3908
|
type: i0.Input
|
|
3909
|
+
}], internationalNumber: [{
|
|
3910
|
+
type: i0.Input
|
|
3903
3911
|
}], onChange: [{
|
|
3904
3912
|
type: i0.Output
|
|
3905
3913
|
}], value: [{
|