@progress/kendo-vue-scheduler 3.5.3 → 3.5.4

package/dist/es/Scheduler.js

@@ -135,7 +135,6 @@ var SchedulerVue2 = {
         'k-rtl': this.$props.rtl !== undefined ? this.$props.rtl : this.dir === 'rtl',
         'k-widget': true,
         'k-scheduler': true,
-        'k-scheduler-flex': true,
         'k-floatwrap': true
       };
     },

package/dist/es/components/footer/bussiness-hours/BusinessHours.js

@@ -52,35 +52,31 @@ var BusinessHoursVue2 = {
       h(Button, {
         tabIndex: -1,
         attrs: _this.v3 ? undefined : {
-          tabIndex: -1
+          tabIndex: -1,
+          icon: 'clock'
         },
+        icon: 'clock',
         onClick: _this.handleShowWorkHoursClick,
         on: _this.v3 ? undefined : {
           "click": _this.handleShowWorkHoursClick
         }
       }, _this.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-clock"
-        }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
-      } : [h("span", {
-        "class": "k-icon k-i-clock"
-      }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])];
+        return [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
+      } : [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])];
     } : [defaultSlot ? defaultSlot : h(Button, {
       tabIndex: -1,
       attrs: _this.v3 ? undefined : {
-        tabIndex: -1
+        tabIndex: -1,
+        icon: 'clock'
       },
+      icon: 'clock',
       onClick: _this.handleShowWorkHoursClick,
       on: _this.v3 ? undefined : {
         "click": _this.handleShowWorkHoursClick
       }
     }, _this.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-clock"
-      }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
-    } : [h("span", {
-      "class": "k-icon k-i-clock"
-    }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])]) : null;
+      return [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
+    } : [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])]) : null;
   },
   methods: {
     handleShowWorkHoursClick: function handleShowWorkHoursClick(e) {

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

@@ -19,10 +19,14 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { DatePicker } from '@progress/kendo-vue-dateinputs';
-import { DatePickerToggleButton } from './DatePickerToggleButton';
+import { Calendar } from '@progress/kendo-vue-dateinputs';
 import { ZonedDate, getDate } from '@progress/kendo-date-math';
+import { Popup } from '@progress/kendo-vue-popup';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { MS_PER_DAY } from '../../../constants/main';
+import { Button } from '@progress/kendo-vue-buttons';
 import { toUTCDateTime } from '../../../utils/main';
+import { canUseDOM, guid, Keys } from '@progress/kendo-vue-common';
 
 var EMPTY_DATE_INPUT = function EMPTY_DATE_INPUT() {
   return null;
@@ -34,14 +38,52 @@ var EMPTY_DATE_INPUT = function EMPTY_DATE_INPUT() {
 
 var NavigationDatePickerVue2 = {
   name: 'KendoNavigationDatePicker',
-  props: __assign(__assign({}, DatePicker.props), {
+  props: {
     value: [Date, Object]
-  }),
+  },
   inject: {
+    kendoIntlService: {
+      default: null
+    },
     ks: {
       default: null
     }
   },
+  created: function created() {
+    this.buttonId = guid();
+    this._popupId = 'popup' + 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;
@@ -51,27 +93,120 @@ var NavigationDatePickerVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
+
     var h = gh || createElement;
     var normalized = ZonedDate.fromLocalDate(this.$props.value || this.ks.currentDate, this.ks.timezone);
     var value = getDate(normalized);
-    return (// @ts-ignore
-      h(DatePicker, {
-        style: {
-          width: 'auto'
-        },
-        dateInput: EMPTY_DATE_INPUT,
+    var show = this.show;
+    var isMonthView = this.ks.dateRange.end.getTime() - this.ks.dateRange.start.getTime() > MS_PER_DAY * 27;
+    var intl = 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(Button, {
+        ref: 'button',
+        id: this.buttonId,
         attrs: this.v3 ? undefined : {
-          dateInput: EMPTY_DATE_INPUT,
-          toggleButton: DatePickerToggleButton,
-          value: value
+          id: this.buttonId,
+          fillMode: 'flat',
+          tabIndex: -1,
+          icon: "calendar"
         },
-        toggleButton: 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(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(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(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(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(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(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: {
@@ -80,6 +215,47 @@ var NavigationDatePickerVue2 = {
       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 = canUseDOM && document.activeElement !== that.$refs.button.$el;
+
+        if (isButtonActive && !isInPopup) {
+          that.show = false;
+        }
+      }, 200);
+    },
+    calendarKeydown: function calendarKeydown(e) {
+      if (e.keyCode === 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/es/components/header/navigation/SchedulerNavigation.js

@@ -85,12 +85,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(Button, {
             role: "button",
@@ -112,12 +112,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(Button, {
           role: "button",
@@ -156,12 +156,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(Button, {
           role: "button",
           attrs: _this.v3 ? undefined : {
@@ -182,12 +182,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(ButtonGroup, {
         "class": "k-scheduler-navigation"
@@ -229,12 +229,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(Button, {
           role: "button",
           attrs: _this.v3 ? undefined : {
@@ -255,12 +255,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(Button, {
         role: "button",
@@ -299,12 +299,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(Button, {
         role: "button",
         attrs: _this.v3 ? undefined : {
@@ -325,12 +325,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/es/components/header/view-selector/ViewSelectorList.js

@@ -125,10 +125,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(ButtonGroup, {
       "class": "k-scheduler-views"

package/dist/es/items/SchedulerItem.js

@@ -308,11 +308,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, {
           dataItem: _this2.formItem,
           attrs: _this2.v3 ? undefined : {
@@ -375,7 +375,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(Draggable, {
           onPress: _this2.handleResizePress,
@@ -501,11 +501,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, {
         dataItem: _this2.formItem,
         attrs: _this2.v3 ? undefined : {
@@ -568,7 +568,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(Draggable, {
         onPress: _this2.handleResizePress,
         on: _this2.v3 ? undefined : {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var 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/es/tasks/SchedulerTask.js

@@ -137,9 +137,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/es/views/agenda/AgendaViewBody.js

@@ -123,9 +123,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(allDay, messages[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/dist/esm/Scheduler.js

@@ -135,7 +135,6 @@ var SchedulerVue2 = {
         'k-rtl': this.$props.rtl !== undefined ? this.$props.rtl : this.dir === 'rtl',
         'k-widget': true,
         'k-scheduler': true,
-        'k-scheduler-flex': true,
         'k-floatwrap': true
       };
     },

package/dist/esm/components/footer/bussiness-hours/BusinessHours.js

@@ -52,35 +52,31 @@ var BusinessHoursVue2 = {
       h(Button, {
         tabIndex: -1,
         attrs: _this.v3 ? undefined : {
-          tabIndex: -1
+          tabIndex: -1,
+          icon: 'clock'
         },
+        icon: 'clock',
         onClick: _this.handleShowWorkHoursClick,
         on: _this.v3 ? undefined : {
           "click": _this.handleShowWorkHoursClick
         }
       }, _this.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-clock"
-        }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
-      } : [h("span", {
-        "class": "k-icon k-i-clock"
-      }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])];
+        return [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
+      } : [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])];
     } : [defaultSlot ? defaultSlot : h(Button, {
       tabIndex: -1,
       attrs: _this.v3 ? undefined : {
-        tabIndex: -1
+        tabIndex: -1,
+        icon: 'clock'
       },
+      icon: 'clock',
       onClick: _this.handleShowWorkHoursClick,
       on: _this.v3 ? undefined : {
         "click": _this.handleShowWorkHoursClick
       }
     }, _this.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-clock"
-      }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
-    } : [h("span", {
-      "class": "k-icon k-i-clock"
-    }), _this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])]) : null;
+      return [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])];
+    } : [_this.localization.toLanguageString(_this.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this.ks.showWorkHours ? showFullDay : showWorkDay])])]) : null;
   },
   methods: {
     handleShowWorkHoursClick: function handleShowWorkHoursClick(e) {