@progress/kendo-vue-scheduler 3.5.3 → 3.5.4

package/dist/npm/components/header/navigation/NavigationDatePicker.js

@@ -29,11 +29,19 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 
 var kendo_vue_dateinputs_1 = require("@progress/kendo-vue-dateinputs");
 
-var DatePickerToggleButton_1 = require("./DatePickerToggleButton");
-
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 
-var main_1 = require("../../../utils/main");
+var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
+
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+
+var main_1 = require("../../../constants/main");
+
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
+var main_2 = require("../../../utils/main");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
 var EMPTY_DATE_INPUT = function EMPTY_DATE_INPUT() {
   return null;
@@ -45,14 +53,52 @@ var EMPTY_DATE_INPUT = function EMPTY_DATE_INPUT() {
 
 var NavigationDatePickerVue2 = {
   name: 'KendoNavigationDatePicker',
-  props: __assign(__assign({}, kendo_vue_dateinputs_1.DatePicker.props), {
+  props: {
     value: [Date, Object]
-  }),
+  },
   inject: {
+    kendoIntlService: {
+      default: null
+    },
     ks: {
       default: null
     }
   },
+  created: function created() {
+    this.buttonId = (0, kendo_vue_common_1.guid)();
+    this._popupId = 'popup' + (0, kendo_vue_common_1.guid)();
+  },
+  data: function data() {
+    return {
+      show: false,
+      focused: false,
+      media: 'desktop'
+    };
+  },
+  mounted: function mounted() {
+    this.buttonRef = this.$refs.button;
+    this.calculateMedia();
+    this.observer = new window.ResizeObserver(this.calculateMedia);
+    this.observer.observe(this.ks.scheduler.$el);
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  updated: function updated() {
+    if (this.show && this.focused) {
+      if (this.$refs.calendar) {
+        this.$refs.calendar.focus();
+      }
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -62,35 +108,169 @@ var NavigationDatePickerVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
+
     var h = gh || createElement;
     var normalized = kendo_date_math_1.ZonedDate.fromLocalDate(this.$props.value || this.ks.currentDate, this.ks.timezone);
     var value = (0, kendo_date_math_1.getDate)(normalized);
-    return (// @ts-ignore
-      h(kendo_vue_dateinputs_1.DatePicker, {
-        style: {
-          width: 'auto'
-        },
-        dateInput: EMPTY_DATE_INPUT,
+    var show = this.show;
+    var isMonthView = this.ks.dateRange.end.getTime() - this.ks.dateRange.start.getTime() > main_1.MS_PER_DAY * 27;
+    var intl = (0, kendo_vue_intl_1.provideIntlService)(this);
+    var text = intl.format(this.ks.dateFormat, isMonthView ? this.ks.currentDate : this.ks.dateRange.zonedStart, isMonthView ? this.ks.currentDate : this.ks.dateRange.zonedEnd.addDays(-1));
+    var shortText = intl.format(this.ks.shortDateFormat, isMonthView ? this.ks.currentDate : this.ks.dateRange.zonedStart, isMonthView ? this.ks.currentDate : this.ks.dateRange.zonedEnd.addDays(-1));
+    return (// @ts-ignore function children
+      h(kendo_vue_buttons_1.Button, {
+        ref: 'button',
+        id: this.buttonId,
         attrs: this.v3 ? undefined : {
-          dateInput: EMPTY_DATE_INPUT,
-          toggleButton: DatePickerToggleButton_1.DatePickerToggleButton,
-          value: value
+          id: this.buttonId,
+          fillMode: 'flat',
+          tabIndex: -1,
+          icon: "calendar"
         },
-        toggleButton: DatePickerToggleButton_1.DatePickerToggleButton,
-        value: value,
-        onChange: this.handleChange,
+        onFocus: this.onFocus,
         on: this.v3 ? undefined : {
-          "change": this.handleChange
+          "focus": this.onFocus,
+          "blur": this.onBlur,
+          "click": this.handleClick
+        },
+        onBlur: this.onBlur,
+        fillMode: 'flat',
+        "class": 'k-nav-current',
+        tabIndex: -1,
+        icon: "calendar",
+        onClick: this.handleClick
+      }, this.v3 ? function () {
+        return [_this2.media === 'desktop' ? text : shortText, // @ts-ignore function children
+        h(kendo_vue_popup_1.Popup, {
+          id: _this2._popupId,
+          attrs: _this2.v3 ? undefined : {
+            id: _this2._popupId,
+            anchor: _this2.buttonId,
+            show: show
+          },
+          anchor: _this2.buttonId,
+          show: show
+        }, _this2.v3 ? function () {
+          return [h(kendo_vue_dateinputs_1.Calendar, {
+            ref: 'calendar',
+            onBlur: _this2.onCalendarBlur,
+            on: _this2.v3 ? undefined : {
+              "blur": _this2.onCalendarBlur,
+              "change": _this2.handleChange,
+              "keydown": _this2.calendarKeydown
+            },
+            onChange: _this2.handleChange,
+            onKeydown: _this2.calendarKeydown,
+            value: value,
+            attrs: _this2.v3 ? undefined : {
+              value: value
+            }
+          })];
+        } : [h(kendo_vue_dateinputs_1.Calendar, {
+          ref: 'calendar',
+          onBlur: _this2.onCalendarBlur,
+          on: _this2.v3 ? undefined : {
+            "blur": _this2.onCalendarBlur,
+            "change": _this2.handleChange,
+            "keydown": _this2.calendarKeydown
+          },
+          onChange: _this2.handleChange,
+          onKeydown: _this2.calendarKeydown,
+          value: value,
+          attrs: _this2.v3 ? undefined : {
+            value: value
+          }
+        })])];
+      } : [_this2.media === 'desktop' ? text : shortText, h(kendo_vue_popup_1.Popup, {
+        id: _this2._popupId,
+        attrs: _this2.v3 ? undefined : {
+          id: _this2._popupId,
+          anchor: _this2.buttonId,
+          show: show
+        },
+        anchor: _this2.buttonId,
+        show: show
+      }, _this2.v3 ? function () {
+        return [h(kendo_vue_dateinputs_1.Calendar, {
+          ref: 'calendar',
+          onBlur: _this2.onCalendarBlur,
+          on: _this2.v3 ? undefined : {
+            "blur": _this2.onCalendarBlur,
+            "change": _this2.handleChange,
+            "keydown": _this2.calendarKeydown
+          },
+          onChange: _this2.handleChange,
+          onKeydown: _this2.calendarKeydown,
+          value: value,
+          attrs: _this2.v3 ? undefined : {
+            value: value
+          }
+        })];
+      } : [h(kendo_vue_dateinputs_1.Calendar, {
+        ref: 'calendar',
+        onBlur: _this2.onCalendarBlur,
+        on: _this2.v3 ? undefined : {
+          "blur": _this2.onCalendarBlur,
+          "change": _this2.handleChange,
+          "keydown": _this2.calendarKeydown
+        },
+        onChange: _this2.handleChange,
+        onKeydown: _this2.calendarKeydown,
+        value: value,
+        attrs: _this2.v3 ? undefined : {
+          value: value
         }
-      })
+      })])])
     );
   },
   methods: {
     handleChange: function handleChange(event) {
-      var normalizedValue = kendo_date_math_1.ZonedDate.fromUTCDate((0, main_1.toUTCDateTime)(event.value), this.ks.timezone);
+      var normalizedValue = kendo_date_math_1.ZonedDate.fromUTCDate((0, main_2.toUTCDateTime)(event.value), this.ks.timezone);
       this.$emit('change', __assign(__assign({}, event), {
         value: normalizedValue
       }));
+      this.hideAndFocusButton();
+    },
+    handleClick: function handleClick() {
+      this.show = !this.show;
+    },
+    onFocus: function onFocus() {
+      clearTimeout(this._blurTimeout);
+      this.focused = true;
+    },
+    onBlur: function onBlur() {
+      this.focused = false;
+    },
+    onCalendarBlur: function onCalendarBlur() {
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout();
+    },
+    createBlurTimeout: function createBlurTimeout() {
+      var _this = this;
+
+      var that = this;
+      this._blurTimeout = setTimeout(function () {
+        _this.focused = false;
+        var isInPopup = document.activeElement && document.activeElement.closest("#".concat(that._popupId));
+        var isButtonActive = kendo_vue_common_1.canUseDOM && document.activeElement !== that.$refs.button.$el;
+
+        if (isButtonActive && !isInPopup) {
+          that.show = false;
+        }
+      }, 200);
+    },
+    calendarKeydown: function calendarKeydown(e) {
+      if (e.keyCode === kendo_vue_common_1.Keys.esc) {
+        this.hideAndFocusButton();
+      }
+    },
+    hideAndFocusButton: function hideAndFocusButton() {
+      this.show = false;
+      this.$refs.button.focus();
+    },
+    calculateMedia: function calculateMedia() {
+      this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
     }
   }
 };

package/dist/npm/components/header/navigation/SchedulerNavigation.js

@@ -98,12 +98,12 @@ var SchedulerNavigationVue2 = {
             return [h("span", {
               "class": "k-button-text"
             }, [h("span", {
-              "class": "k-icon k-i-arrow-60-left"
+              "class": "k-icon k-i-caret-alt-left"
             })])];
           } : [h("span", {
             "class": "k-button-text"
           }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
+            "class": "k-icon k-i-caret-alt-left"
           })])]), // @ts-ignore  function children
           h(kendo_vue_buttons_1.Button, {
             role: "button",
@@ -125,12 +125,12 @@ var SchedulerNavigationVue2 = {
             return [h("span", {
               "class": "k-button-text"
             }, [h("span", {
-              "class": "k-icon k-i-arrow-60-right"
+              "class": "k-icon k-i-caret-alt-right"
             })])];
           } : [h("span", {
             "class": "k-button-text"
           }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
+            "class": "k-icon k-i-caret-alt-right"
           })])])];
         } : [h(kendo_vue_buttons_1.Button, {
           role: "button",
@@ -169,12 +169,12 @@ var SchedulerNavigationVue2 = {
           return [h("span", {
             "class": "k-button-text"
           }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
+            "class": "k-icon k-i-caret-alt-left"
           })])];
         } : [h("span", {
           "class": "k-button-text"
         }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
+          "class": "k-icon k-i-caret-alt-left"
         })])]), h(kendo_vue_buttons_1.Button, {
           role: "button",
           attrs: _this.v3 ? undefined : {
@@ -195,12 +195,12 @@ var SchedulerNavigationVue2 = {
           return [h("span", {
             "class": "k-button-text"
           }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
+            "class": "k-icon k-i-caret-alt-right"
           })])];
         } : [h("span", {
           "class": "k-button-text"
         }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
+          "class": "k-icon k-i-caret-alt-right"
         })])])])];
       } : [h(kendo_vue_buttons_1.ButtonGroup, {
         "class": "k-scheduler-navigation"
@@ -242,12 +242,12 @@ var SchedulerNavigationVue2 = {
           return [h("span", {
             "class": "k-button-text"
           }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
+            "class": "k-icon k-i-caret-alt-left"
           })])];
         } : [h("span", {
           "class": "k-button-text"
         }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
+          "class": "k-icon k-i-caret-alt-left"
         })])]), h(kendo_vue_buttons_1.Button, {
           role: "button",
           attrs: _this.v3 ? undefined : {
@@ -268,12 +268,12 @@ var SchedulerNavigationVue2 = {
           return [h("span", {
             "class": "k-button-text"
           }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
+            "class": "k-icon k-i-caret-alt-right"
           })])];
         } : [h("span", {
           "class": "k-button-text"
         }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
+          "class": "k-icon k-i-caret-alt-right"
         })])])];
       } : [h(kendo_vue_buttons_1.Button, {
         role: "button",
@@ -312,12 +312,12 @@ var SchedulerNavigationVue2 = {
         return [h("span", {
           "class": "k-button-text"
         }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
+          "class": "k-icon k-i-caret-alt-left"
         })])];
       } : [h("span", {
         "class": "k-button-text"
       }, [h("span", {
-        "class": "k-icon k-i-arrow-60-left"
+        "class": "k-icon k-i-caret-alt-left"
       })])]), h(kendo_vue_buttons_1.Button, {
         role: "button",
         attrs: _this.v3 ? undefined : {
@@ -338,12 +338,12 @@ var SchedulerNavigationVue2 = {
         return [h("span", {
           "class": "k-button-text"
         }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
+          "class": "k-icon k-i-caret-alt-right"
         })])];
       } : [h("span", {
         "class": "k-button-text"
       }, [h("span", {
-        "class": "k-icon k-i-arrow-60-right"
+        "class": "k-icon k-i-caret-alt-right"
       })])])])])
     );
   },

package/dist/npm/components/header/view-selector/ViewSelectorList.js

@@ -137,10 +137,10 @@ var ViewSelectorListVue2 = {
       text: activeView.title || activeName
     }, this.v3 ? function () {
       return [h("span", {
-        "class": "k-icon k-i-arrow-60-down"
+        "class": "k-icon k-i-caret-alt-down"
       })];
     } : [h("span", {
-      "class": "k-icon k-i-arrow-60-down"
+      "class": "k-icon k-i-caret-alt-down"
     })]), this.media === 'desktop' && // @ts-ignore  function children
     h(kendo_vue_buttons_1.ButtonGroup, {
       "class": "k-scheduler-views"

package/dist/npm/items/SchedulerItem.js

@@ -325,11 +325,11 @@ var SchedulerItemVue2 = {
         }, [!_this2.$props.resizeHint && h("span", {
           "class": "k-event-actions"
         }, [_this2.$props.tail && h("span", {
-          "class": "k-icon k-i-arrow-60-left"
+          "class": "k-icon k-i-caret-alt-left"
         }), _this2.$props.isRecurring && !_this2.$props.isException && h("span", {
-          "class": "k-icon k-i-reload"
+          "class": "k-icon k-i-arrow-rotate-cw"
         }), !_this2.$props.isRecurring && _this2.$props.isException && h("span", {
-          "class": "k-icon k-i-non-recurrence"
+          "class": "k-icon k-i-arrows-no-repeat"
         })]), _this2.formItem && !_this2.showOccurrenceDialog && _this2.currentEditable.edit && h(SchedulerForm_1.SchedulerForm, {
           dataItem: _this2.formItem,
           attrs: _this2.v3 ? undefined : {
@@ -392,7 +392,7 @@ var SchedulerItemVue2 = {
         }, [h("span", {
           "class": "k-icon k-i-close"
         })]), _this2.$props.head && h("span", {
-          "class": "k-icon k-i-arrow-60-right"
+          "class": "k-icon k-i-caret-alt-right"
         })]), _this2.currentEditable.resize && _this2.$props.vertical && [// @ts-ignore  function children
         h(kendo_vue_common_1.Draggable, {
           onPress: _this2.handleResizePress,
@@ -518,11 +518,11 @@ var SchedulerItemVue2 = {
       }, [!_this2.$props.resizeHint && h("span", {
         "class": "k-event-actions"
       }, [_this2.$props.tail && h("span", {
-        "class": "k-icon k-i-arrow-60-left"
+        "class": "k-icon k-i-caret-alt-left"
       }), _this2.$props.isRecurring && !_this2.$props.isException && h("span", {
-        "class": "k-icon k-i-reload"
+        "class": "k-icon k-i-arrow-rotate-cw"
       }), !_this2.$props.isRecurring && _this2.$props.isException && h("span", {
-        "class": "k-icon k-i-non-recurrence"
+        "class": "k-icon k-i-arrows-no-repeat"
       })]), _this2.formItem && !_this2.showOccurrenceDialog && _this2.currentEditable.edit && h(SchedulerForm_1.SchedulerForm, {
         dataItem: _this2.formItem,
         attrs: _this2.v3 ? undefined : {
@@ -585,7 +585,7 @@ var SchedulerItemVue2 = {
       }, [h("span", {
         "class": "k-icon k-i-close"
       })]), _this2.$props.head && h("span", {
-        "class": "k-icon k-i-arrow-60-right"
+        "class": "k-icon k-i-caret-alt-right"
       })]), _this2.currentEditable.resize && _this2.$props.vertical && [h(kendo_vue_common_1.Draggable, {
         onPress: _this2.handleResizePress,
         on: _this2.v3 ? undefined : {

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-scheduler',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662389197,
+    publishDate: 1662729534,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/tasks/SchedulerTask.js

@@ -151,9 +151,9 @@ var SchedulerTaskVue2 = {
         backgroundColor: color
       }
     }), this.$props.isRecurring && h("span", {
-      "class": "k-icon k-i-reload"
+      "class": "k-icon k-i-arrow-rotate-cw"
     }), this.$props.isException && h("span", {
-      "class": "k-icon k-i-non-recurrence"
+      "class": "k-icon k-i-arrows-no-repeat"
     }), this.$props.title, defaultSlot, editable.remove && h("a", {
       "class": "k-link k-event-delete",
       title: deleteMessage,

package/dist/npm/views/agenda/AgendaViewBody.js

@@ -135,9 +135,9 @@ var AgendaViewBodyVue2 = {
         }, [h("div", {
           "class": "k-scheduler-cell k-scheduler-timecolumn"
         }, [h("div", [item.tail && h("span", {
-          "class": "k-icon k-i-arrow-60-left"
+          "class": "k-icon k-i-caret-alt-left"
         }), item.isAllDay ? localization.toLanguageString(main_1.allDay, main_1.messages[main_1.allDay]) : getTimeFormat(this.intl, item), item.head && h("span", {
-          "class": "k-icon k-i-arrow-60-right"
+          "class": "k-icon k-i-caret-alt-right"
         })])]), h("div", {
           "class": "k-scheduler-cell"
         }, [h(EditTask, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-scheduler",
   "description": "Kendo UI for Vue Scheduler package",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -49,7 +49,7 @@
     "@progress/kendo-data-query": "^1.5.1",
     "@progress/kendo-draggable": "^3.0.1",
     "@progress/kendo-recurrence": "^1.0.1",
-    "@progress/kendo-vue-common": "3.5.3"
+    "@progress/kendo-vue-common": "3.5.4"
   },
   "@progress": {
     "friendlyName": "Scheduler",
@@ -64,16 +64,16 @@
     "@progress/kendo-date-math": "^1.4.1",
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.0.1",
-    "@progress/kendo-vue-buttons": "3.5.3",
-    "@progress/kendo-vue-dateinputs": "3.5.3",
-    "@progress/kendo-vue-dialogs": "3.5.3",
-    "@progress/kendo-vue-dropdowns": "3.5.3",
-    "@progress/kendo-vue-form": "3.5.3",
-    "@progress/kendo-vue-inputs": "3.5.3",
-    "@progress/kendo-vue-intl": "3.5.3",
-    "@progress/kendo-vue-labels": "3.5.3",
-    "@progress/kendo-vue-popup": "3.5.3",
-    "@progress/kendo-vue-progressbars": "3.5.3",
+    "@progress/kendo-vue-buttons": "3.5.4",
+    "@progress/kendo-vue-dateinputs": "3.5.4",
+    "@progress/kendo-vue-dialogs": "3.5.4",
+    "@progress/kendo-vue-dropdowns": "3.5.4",
+    "@progress/kendo-vue-form": "3.5.4",
+    "@progress/kendo-vue-inputs": "3.5.4",
+    "@progress/kendo-vue-intl": "3.5.4",
+    "@progress/kendo-vue-labels": "3.5.4",
+    "@progress/kendo-vue-popup": "3.5.4",
+    "@progress/kendo-vue-progressbars": "3.5.4",
     "cldr-core": "^41.0.0",
     "cldr-dates-full": "^41.0.0",
     "cldr-numbers-full": "^41.0.0"