monkey-style-guide 2.0.103 → 2.0.104

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.
@@ -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%;
@@ -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: { i18n: [{
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