@progress/kendo-vue-scheduler 9.3.0-develop.5 → 9.3.0-develop.7

package/components/footer/bussiness-hours/BusinessHours.mjs

@@ -5,16 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as l, createVNode as e, isVNode as r } from "vue";
-import { showFullDay as i, showWorkDay as s, messages as n } from "../../../messages/main.mjs";
-import { ToolbarItem as a, Button as c } from "@progress/kendo-vue-buttons";
+import { defineComponent as s, createVNode as l, isVNode as r } from "vue";
+import { showFullDay as t, showWorkDay as e, messages as n } from "../../../messages/main.mjs";
 import { getDefaultSlots as u } from "@progress/kendo-vue-common";
-import { provideLocalizationService as h } from "@progress/kendo-vue-intl";
-import { clockIcon as m } from "@progress/kendo-svg-icons";
-function d(o) {
+import { Button as a } from "@progress/kendo-vue-buttons";
+import { provideLocalizationService as c } from "@progress/kendo-vue-intl";
+import { clockIcon as h } from "@progress/kendo-svg-icons";
+function m(o) {
   return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !r(o);
 }
-const w = /* @__PURE__ */ l({
+const g = /* @__PURE__ */ s({
   name: "KendoBusinessHours",
   emits: {
     click: null
@@ -32,19 +32,14 @@ const w = /* @__PURE__ */ l({
   },
   render() {
     let o;
-    const t = u(this);
-    return this.localization = h(this), this.slotDuration && this.slotDuration < 1440 ? e(a, {
-      class: "k-scheduler-navigation"
-    }, {
-      default: () => [t || e(c, {
-        tabIndex: -1,
-        class: "k-scheduler-fullday",
-        icon: "clock",
-        svgIcon: m,
-        onClick: this.handleShowWorkHoursClick
-      }, d(o = this.localization.toLanguageString(this.ks.showWorkHours ? i : s, n[this.ks.showWorkHours ? i : s])) ? o : {
-        default: () => [o]
-      })]
+    const i = u(this);
+    return this.localization = c(this), this.slotDuration && this.slotDuration < 1440 ? i || l(a, {
+      tabIndex: -1,
+      class: "k-toolbar-button k-scheduler-fullday",
+      svgIcon: h,
+      onClick: this.handleShowWorkHoursClick
+    }, m(o = this.localization.toLanguageString(this.ks.showWorkHours ? t : e, n[this.ks.showWorkHours ? t : e])) ? o : {
+      default: () => [o]
     }) : null;
   },
   methods: {
@@ -54,5 +49,5 @@ const w = /* @__PURE__ */ l({
   }
 });
 export {
-  w as BusinessHours
+  g as BusinessHours
 };

package/components/header/SchedulerAdaptiveHeader.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@progress/kendo-vue-buttons"),a=require("@progress/kendo-vue-intl"),l=require("../../messages/main.js"),o=require("@progress/kendo-svg-icons"),u=require("./view-selector/ViewSelectorList.js");function d(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}const v=e.defineComponent({name:"KendoSchedulerAdaptiveHeader",props:{isRtl:Boolean,onPrevclick:Function,onNextclick:Function,onTodayclick:Function,onCreateclick:Function,onCalendarclick:Function,onPdfclick:Function},inject:{ks:{default:null},kendoLocalizationService:{default:null},kendoIntlService:{default:null}},render(){const n=a.provideLocalizationService(this),s=a.provideIntlService(this),i=n.toLanguageString(l.previousTitle,l.messages[l.previousTitle]),r=n.toLanguageString(l.nextTitle,l.messages[l.nextTitle]),c=s.formatDate(this.ks.currentDate,this.ks.shortDateFormat);return e.createVNode("div",null,[e.createVNode(t.Toolbar,{overflow:"none",class:"k-scheduler-toolbar"},{default:()=>[e.createVNode(t.ButtonGroup,{class:"k-scheduler-tools"},{default:()=>[e.createVNode(t.Button,{class:"k-pdf",icon:"file-pdf",svgIcon:o.filePdfIcon,tabIndex:-1,onClick:this.$props.onPdfclick},null),e.createVNode(t.Button,{class:"k-nav-calendar",icon:"calendar",svgIcon:o.calendarIcon,tabIndex:-1,onClick:this.$props.onCalendarclick},null),e.createVNode(t.Button,{class:"k-create-event",icon:"plus",svgIcon:o.plusIcon,tabIndex:-1,onClick:this.$props.onCreateclick},null)]}),e.createVNode(t.ToolbarSpacer,null,null),e.createVNode(u.ViewSelectorList,null,null)]}),e.createVNode(t.Toolbar,{overflow:"none",class:"k-scheduler-toolbar"},{default:()=>[e.createVNode(t.Button,{class:"k-nav-prev",icon:this.isRtl?"chevron-right":"chevron-left",svgIcon:this.isRtl?o.chevronRightIcon:o.chevronLeftIcon,title:i,"aria-label":i,tabIndex:-1,onClick:this.handlePrevClick},null),e.createVNode(t.ToolbarSpacer,null,null),e.createVNode(t.Button,{class:"k-nav-current",fillMode:"flat",tabIndex:-1},d(c)?c:{default:()=>[c]}),e.createVNode(t.ToolbarSpacer,null,null),e.createVNode(t.Button,{class:"k-nav-next",icon:this.isRtl?"chevron-left":"chevron-right",svgIcon:this.isRtl?o.chevronLeftIcon:o.chevronRightIcon,title:r,"aria-label":r,tabIndex:-1,onClick:this.handleNextClick},null)]})])},methods:{handlePrevClick(n){this.$emit("prevclick",n)},handleNextClick(n){this.$emit("nextclick",n)}}});exports.SchedulerAdaptiveHeader=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@progress/kendo-vue-buttons"),s=require("@progress/kendo-vue-intl"),r=require("../../messages/main.js"),c=require("@progress/kendo-svg-icons"),u=require("./view-selector/ViewSelectorList.js");function d(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}const v=e.defineComponent({name:"KendoSchedulerAdaptiveHeader",props:{isRtl:Boolean,onPrevclick:Function,onNextclick:Function,onTodayclick:Function,onCreateclick:Function,onCalendarclick:Function,onPdfclick:Function},inject:{ks:{default:null},kendoLocalizationService:{default:null},kendoIntlService:{default:null}},render(){const n=s.provideLocalizationService(this),l=s.provideIntlService(this),o=n.toLanguageString(r.previousTitle,r.messages[r.previousTitle]),a=n.toLanguageString(r.nextTitle,r.messages[r.nextTitle]),i=l.formatDate(this.ks.currentDate,this.ks.shortDateFormat);return e.createVNode("div",null,[e.createVNode(t.Toolbar,{overflow:"none",class:"k-scheduler-toolbar"},{default:()=>[e.createVNode(t.ButtonGroup,{class:"k-scheduler-tools"},{default:()=>[e.createVNode(t.Button,{class:"k-pdf",icon:"file-pdf",svgIcon:c.filePdfIcon,tabIndex:-1,onClick:this.$props.onPdfclick},null),e.createVNode(t.Button,{class:"k-nav-calendar",icon:"calendar",svgIcon:c.calendarIcon,tabIndex:-1,onClick:this.$props.onCalendarclick},null),e.createVNode(t.Button,{class:"k-create-event",icon:"plus",svgIcon:c.plusIcon,tabIndex:-1,onClick:this.$props.onCreateclick},null)]}),e.createVNode(t.ToolbarSpacer,null,null),e.createVNode(u.ViewSelectorList,null,null)]}),e.createVNode(t.Toolbar,{overflow:"none",class:"k-scheduler-toolbar"},{default:()=>[e.createVNode(t.Button,{class:"k-nav-prev",icon:this.isRtl?"chevron-right":"chevron-left",svgIcon:this.isRtl?c.chevronRightIcon:c.chevronLeftIcon,title:o,"aria-label":o,tabIndex:-1,onClick:this.handlePrevClick},null),e.createVNode(t.ToolbarSpacer,null,null),e.createVNode(t.Button,{class:"k-nav-current",fillMode:"flat",tabIndex:-1},d(i)?i:{default:()=>[i]}),e.createVNode(t.ToolbarSpacer,null,null),e.createVNode(t.Button,{class:"k-nav-next",icon:this.isRtl?"chevron-left":"chevron-right",svgIcon:this.isRtl?c.chevronLeftIcon:c.chevronRightIcon,title:a,"aria-label":a,tabIndex:-1,onClick:this.handleNextClick},null)]})])},methods:{handlePrevClick(n){var l,o;(o=(l=this.$props).onPrevclick)==null||o.call(l,n)},handleNextClick(n){var l,o;(o=(l=this.$props).onNextclick)==null||o.call(l,n)}}});exports.SchedulerAdaptiveHeader=v;

package/components/header/SchedulerAdaptiveHeader.mjs

@@ -5,16 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as v, createVNode as e, isVNode as p } from "vue";
-import { Toolbar as r, ButtonGroup as f, Button as t, ToolbarSpacer as o } from "@progress/kendo-vue-buttons";
+import { defineComponent as k, createVNode as e, isVNode as v } from "vue";
+import { Toolbar as a, ButtonGroup as f, Button as o, ToolbarSpacer as i } from "@progress/kendo-vue-buttons";
 import { provideLocalizationService as m, provideIntlService as I } from "@progress/kendo-vue-intl";
-import { previousTitle as a, messages as s, nextTitle as u } from "../../messages/main.mjs";
-import { filePdfIcon as x, calendarIcon as g, plusIcon as b, chevronRightIcon as d, chevronLeftIcon as h } from "@progress/kendo-svg-icons";
+import { previousTitle as s, messages as u, nextTitle as d } from "../../messages/main.mjs";
+import { filePdfIcon as x, calendarIcon as g, plusIcon as b, chevronRightIcon as p, chevronLeftIcon as h } from "@progress/kendo-svg-icons";
 import { ViewSelectorList as C } from "./view-selector/ViewSelectorList.mjs";
 function S(n) {
-  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !p(n);
+  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !v(n);
 }
-const $ = /* @__PURE__ */ v({
+const $ = /* @__PURE__ */ k({
   name: "KendoSchedulerAdaptiveHeader",
   props: {
     isRtl: Boolean,
@@ -37,58 +37,58 @@ const $ = /* @__PURE__ */ v({
     }
   },
   render() {
-    const n = m(this), k = I(this), c = n.toLanguageString(a, s[a]), i = n.toLanguageString(u, s[u]), l = k.formatDate(this.ks.currentDate, this.ks.shortDateFormat);
-    return e("div", null, [e(r, {
+    const n = m(this), l = I(this), t = n.toLanguageString(s, u[s]), r = n.toLanguageString(d, u[d]), c = l.formatDate(this.ks.currentDate, this.ks.shortDateFormat);
+    return e("div", null, [e(a, {
       overflow: "none",
       class: "k-scheduler-toolbar"
     }, {
       default: () => [e(f, {
         class: "k-scheduler-tools"
       }, {
-        default: () => [e(t, {
+        default: () => [e(o, {
           class: "k-pdf",
           icon: "file-pdf",
           svgIcon: x,
           tabIndex: -1,
           onClick: this.$props.onPdfclick
-        }, null), e(t, {
+        }, null), e(o, {
           class: "k-nav-calendar",
           icon: "calendar",
           svgIcon: g,
           tabIndex: -1,
           onClick: this.$props.onCalendarclick
-        }, null), e(t, {
+        }, null), e(o, {
           class: "k-create-event",
           icon: "plus",
           svgIcon: b,
           tabIndex: -1,
           onClick: this.$props.onCreateclick
         }, null)]
-      }), e(o, null, null), e(C, null, null)]
-    }), e(r, {
+      }), e(i, null, null), e(C, null, null)]
+    }), e(a, {
       overflow: "none",
       class: "k-scheduler-toolbar"
     }, {
-      default: () => [e(t, {
+      default: () => [e(o, {
         class: "k-nav-prev",
         icon: this.isRtl ? "chevron-right" : "chevron-left",
-        svgIcon: this.isRtl ? d : h,
-        title: c,
-        "aria-label": c,
+        svgIcon: this.isRtl ? p : h,
+        title: t,
+        "aria-label": t,
         tabIndex: -1,
         onClick: this.handlePrevClick
-      }, null), e(o, null, null), e(t, {
+      }, null), e(i, null, null), e(o, {
         class: "k-nav-current",
         fillMode: "flat",
         tabIndex: -1
-      }, S(l) ? l : {
-        default: () => [l]
-      }), e(o, null, null), e(t, {
+      }, S(c) ? c : {
+        default: () => [c]
+      }), e(i, null, null), e(o, {
         class: "k-nav-next",
         icon: this.isRtl ? "chevron-left" : "chevron-right",
-        svgIcon: this.isRtl ? h : d,
-        title: i,
-        "aria-label": i,
+        svgIcon: this.isRtl ? h : p,
+        title: r,
+        "aria-label": r,
         tabIndex: -1,
         onClick: this.handleNextClick
       }, null)]
@@ -96,10 +96,12 @@ const $ = /* @__PURE__ */ v({
   },
   methods: {
     handlePrevClick(n) {
-      this.$emit("prevclick", n);
+      var l, t;
+      (t = (l = this.$props).onPrevclick) == null || t.call(l, n);
     },
     handleNextClick(n) {
-      this.$emit("nextclick", n);
+      var l, t;
+      (t = (l = this.$props).onNextclick) == null || t.call(l, n);
     }
   }
 });

package/components/header/SchedulerHeader.d.ts

@@ -19,5 +19,9 @@ export interface SchedulerHeaderHandle {
 /**
  * @hidden
  */
-declare const SchedulerHeader: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const SchedulerHeader: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    ariaLabel: StringConstructor;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    ariaLabel: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { SchedulerHeader };

package/components/header/SchedulerHeader.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),t=require("@progress/kendo-vue-common"),r=require("@progress/kendo-vue-buttons");function n(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const u=o.defineComponent({name:"KendoSchedulerHeader",render(){const e=t.getDefaultSlots(this);return o.createVNode(r.Toolbar,{overflow:"none",class:"k-scheduler-toolbar"},n(e)?e:{default:()=>[e]})}});exports.SchedulerHeader=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("@progress/kendo-vue-common"),r=require("@progress/kendo-vue-buttons");function n(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const a=t.defineComponent({name:"KendoSchedulerHeader",props:{ariaLabel:String},render(){const e=o.getDefaultSlots(this);return t.createVNode(r.Toolbar,{overflow:"none",class:"k-scheduler-toolbar",ariaLabel:this.ariaLabel},n(e)?e:{default:()=>[e]})}});exports.SchedulerHeader=a;

package/components/header/SchedulerHeader.mjs

@@ -6,23 +6,27 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as o, createVNode as t, isVNode as r } from "vue";
-import { getDefaultSlots as n } from "@progress/kendo-vue-common";
+import { getDefaultSlots as a } from "@progress/kendo-vue-common";
 import { Toolbar as l } from "@progress/kendo-vue-buttons";
-function c(e) {
+function n(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !r(e);
 }
-const i = /* @__PURE__ */ o({
+const f = /* @__PURE__ */ o({
   name: "KendoSchedulerHeader",
+  props: {
+    ariaLabel: String
+  },
   render() {
-    const e = n(this);
+    const e = a(this);
     return t(l, {
       overflow: "none",
-      class: "k-scheduler-toolbar"
-    }, c(e) ? e : {
+      class: "k-scheduler-toolbar",
+      ariaLabel: this.ariaLabel
+    }, n(e) ? e : {
       default: () => [e]
     });
   }
 });
 export {
-  i as SchedulerHeader
+  f as SchedulerHeader
 };

package/components/header/navigation/NavigationDatePicker.d.ts

@@ -5,18 +5,32 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { DatePickerProps } from '@progress/kendo-vue-dateinputs';
 import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface NavigationDatePickerProps extends DatePickerProps {
+    /**
+     * Responsive collapse level from the parent toolbar.
+     * When >= 2 the short date format is used.
+     */
+    level?: number;
+}
 /**
  * @hidden
  */
 declare const NavigationDatePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     value: PropType<Date>;
     onChange: PropType<(event: import('@progress/kendo-vue-dateinputs').DatePickerChangeEvent) => void>;
+    level: {
+        type: PropType<number>;
+        default: number;
+    };
 }>, {}, {
     hasMounted: boolean;
     show: boolean;
     focused: boolean;
-    media: string;
 }, {}, {
     handleChange(event: any): void;
     handleClick(): void;
@@ -26,9 +40,14 @@ declare const NavigationDatePicker: import('vue').DefineComponent<import('vue').
     createBlurTimeout(): void;
     calendarKeydown(e: any): void;
     hideAndFocusButton(): void;
-    calculateMedia(): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     value: PropType<Date>;
     onChange: PropType<(event: import('@progress/kendo-vue-dateinputs').DatePickerChangeEvent) => void>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    level: {
+        type: PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    level: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { NavigationDatePicker };

package/components/header/navigation/NavigationDatePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),c=require("@progress/kendo-vue-dateinputs"),i=require("@progress/kendo-date-math"),h=require("@progress/kendo-vue-popup"),l=require("@progress/kendo-vue-intl"),m=require("@progress/kendo-vue-buttons"),f=require("../../../utils/main.js"),t=require("@progress/kendo-vue-common"),k=require("@progress/kendo-svg-icons"),p=n.defineComponent({name:"KendoNavigationDatePicker",props:{value:[Date,Object],onChange:Function},inject:{kendoIntlService:{default:null},ks:{default:null}},created(){this.buttonId=t.guid(),this._popupId="popup"+t.guid()},data(){return{hasMounted:!1,show:!1,focused:!1,media:"desktop"}},mounted(){this.buttonRef=this.$refs.button,this.calculateMedia(),t.canUseDOM&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(this.calculateMedia),this.ks.scheduler&&this.ks.scheduler.$el&&this.observer.observe(this.ks.scheduler.$el)),this.hasMounted=!0},unmounted(){this.observer&&this.observer.disconnect()},updated(){this.show&&this.focused&&this.$refs.calendar&&this.$refs.calendar.focus()},render(){const e=i.ZonedDate.fromLocalDate(this.$props.value||this.ks.currentDate,this.ks.timezone),s=i.getDate(e),a=this.show,o=this.ks.dateRange.end.getTime()-this.ks.dateRange.start.getTime()>i.MS_PER_DAY*27,d=l.provideIntlService(this),r=d.format(this.ks.dateFormat,o?this.ks.currentDate:this.ks.dateRange.zonedStart,o?this.ks.currentDate:this.ks.dateRange.zonedEnd.addDays(-1)),u=d.format(this.ks.shortDateFormat,o?this.ks.currentDate:this.ks.dateRange.zonedStart,o?this.ks.currentDate:this.ks.dateRange.zonedEnd.addDays(-1));return n.createVNode(m.Button,{ref:"button",id:this.buttonId,onFocus:this.onFocus,onBlur:this.onBlur,fillMode:"flat",class:"k-nav-current","aria-live":"polite",tabIndex:-1,icon:"calendar",svgIcon:k.calendarIcon,onClick:this.handleClick},{default:()=>[this.media==="desktop"?r:u,n.createVNode(h.Popup,{id:this._popupId,anchor:this.buttonId,show:a},{default:()=>[this.hasMounted&&n.createVNode(c.Calendar,{ref:"calendar",onBlur:this.onCalendarBlur,onChange:this.handleChange,onKeydown:this.calendarKeydown,value:s},null)]})]})},methods:{handleChange(e){const s=i.ZonedDate.fromUTCDate(f.toUTCDateTime(e.value),this.ks.timezone);this.$emit("change",{...e,value:s}),this.hideAndFocusButton()},handleClick(){this.show=!this.show},onFocus(){clearTimeout(this._blurTimeout),this.focused=!0},onBlur(){this.focused=!1},onCalendarBlur(){clearTimeout(this._blurTimeout),this.createBlurTimeout()},createBlurTimeout(){const e=this;this._blurTimeout=setTimeout(()=>{this.focused=!1;const s=document.activeElement&&document.activeElement.closest(`#${e._popupId}`);t.canUseDOM&&document.activeElement!==e.$refs.button.$el&&!s&&(e.show=!1)},200)},calendarKeydown(e){e.keyCode===t.Keys.esc&&this.hideAndFocusButton()},hideAndFocusButton(){this.show=!1,this.$refs.button.focus()},calculateMedia(){t.canUseDOM&&window.matchMedia&&(this.media=window.matchMedia("(min-width: 1024px)").matches?"desktop":"mobile")}}});exports.NavigationDatePicker=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),c=require("@progress/kendo-vue-dateinputs"),n=require("@progress/kendo-date-math"),h=require("@progress/kendo-vue-popup"),l=require("@progress/kendo-vue-intl"),f=require("@progress/kendo-vue-buttons"),m=require("../../../utils/main.js"),a=require("@progress/kendo-vue-common"),k=require("@progress/kendo-svg-icons"),p=s.defineComponent({name:"KendoNavigationDatePicker",props:{value:[Date,Object],onChange:Function,level:{type:Number,default:0}},inject:{kendoIntlService:{default:null},ks:{default:null}},created(){this.buttonId=a.guid(),this._popupId="popup"+a.guid()},data(){return{hasMounted:!1,show:!1,focused:!1}},mounted(){this.buttonRef=this.$refs.button,this.hasMounted=!0},updated(){this.show&&this.focused&&this.$refs.calendar&&this.$refs.calendar.focus()},render(){const e=n.ZonedDate.fromLocalDate(this.$props.value||this.ks.currentDate,this.ks.timezone),t=n.getDate(e),i=this.show,o=this.ks.dateRange.end.getTime()-this.ks.dateRange.start.getTime()>n.MS_PER_DAY*27,u=l.provideIntlService(this),r=u.format(this.ks.dateFormat,o?this.ks.currentDate:this.ks.dateRange.zonedStart,o?this.ks.currentDate:this.ks.dateRange.zonedEnd.addDays(-1)),d=u.format(this.ks.shortDateFormat,o?this.ks.currentDate:this.ks.dateRange.zonedStart,o?this.ks.currentDate:this.ks.dateRange.zonedEnd.addDays(-1));return s.createVNode(f.Button,{ref:"button",id:this.buttonId,onFocus:this.onFocus,onBlur:this.onBlur,fillMode:"flat",class:"k-nav-current k-toolbar-button","aria-live":"polite",tabIndex:-1,icon:"calendar",svgIcon:k.calendarIcon,onClick:this.handleClick},{default:()=>[this.$props.level>=2?d:r,s.createVNode(h.Popup,{id:this._popupId,anchor:this.buttonId,show:i},{default:()=>[this.hasMounted&&s.createVNode(c.Calendar,{ref:"calendar",onBlur:this.onCalendarBlur,onChange:this.handleChange,onKeydown:this.calendarKeydown,value:t},null)]})]})},methods:{handleChange(e){const t=n.ZonedDate.fromUTCDate(m.toUTCDateTime(e.value),this.ks.timezone);this.$emit("change",{...e,value:t}),this.hideAndFocusButton()},handleClick(){this.show=!this.show},onFocus(){clearTimeout(this._blurTimeout),this.focused=!0},onBlur(){this.focused=!1},onCalendarBlur(){clearTimeout(this._blurTimeout),this.createBlurTimeout()},createBlurTimeout(){const e=this;this._blurTimeout=setTimeout(()=>{this.focused=!1;const t=document.activeElement&&document.activeElement.closest(`#${e._popupId}`);a.canUseDOM&&document.activeElement!==e.$refs.button.$el&&!t&&(e.show=!1)},200)},calendarKeydown(e){e.keyCode===a.Keys.esc&&this.hideAndFocusButton()},hideAndFocusButton(){this.show=!1,this.$refs.button.focus()}}});exports.NavigationDatePicker=p;

package/components/header/navigation/NavigationDatePicker.mjs

@@ -5,20 +5,24 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as c, createVNode as o } from "vue";
+import { defineComponent as h, createVNode as s } from "vue";
 import { Calendar as l } from "@progress/kendo-vue-dateinputs";
-import { ZonedDate as r, getDate as m, MS_PER_DAY as f } from "@progress/kendo-date-math";
-import { Popup as p } from "@progress/kendo-vue-popup";
-import { provideIntlService as k } from "@progress/kendo-vue-intl";
-import { Button as v } from "@progress/kendo-vue-buttons";
-import { toUTCDateTime as w } from "../../../utils/main.mjs";
-import { canUseDOM as i, Keys as b, guid as d } from "@progress/kendo-vue-common";
-import { calendarIcon as g } from "@progress/kendo-svg-icons";
-const F = /* @__PURE__ */ c({
+import { ZonedDate as i, getDate as c, MS_PER_DAY as m } from "@progress/kendo-date-math";
+import { Popup as f } from "@progress/kendo-vue-popup";
+import { provideIntlService as p } from "@progress/kendo-vue-intl";
+import { Button as k } from "@progress/kendo-vue-buttons";
+import { toUTCDateTime as v } from "../../../utils/main.mjs";
+import { Keys as g, canUseDOM as D, guid as r } from "@progress/kendo-vue-common";
+import { calendarIcon as b } from "@progress/kendo-svg-icons";
+const R = /* @__PURE__ */ h({
   name: "KendoNavigationDatePicker",
   props: {
     value: [Date, Object],
-    onChange: Function
+    onChange: Function,
+    level: {
+      type: Number,
+      default: 0
+    }
   },
   inject: {
     kendoIntlService: {
@@ -29,46 +33,42 @@ const F = /* @__PURE__ */ c({
     }
   },
   created() {
-    this.buttonId = d(), this._popupId = "popup" + d();
+    this.buttonId = r(), this._popupId = "popup" + r();
   },
   data() {
     return {
       hasMounted: !1,
       show: !1,
-      focused: !1,
-      media: "desktop"
+      focused: !1
     };
   },
   mounted() {
-    this.buttonRef = this.$refs.button, this.calculateMedia(), i && window.ResizeObserver && (this.observer = new window.ResizeObserver(this.calculateMedia), this.ks.scheduler && this.ks.scheduler.$el && this.observer.observe(this.ks.scheduler.$el)), this.hasMounted = !0;
-  },
-  unmounted() {
-    this.observer && this.observer.disconnect();
+    this.buttonRef = this.$refs.button, this.hasMounted = !0;
   },
   updated() {
     this.show && this.focused && this.$refs.calendar && this.$refs.calendar.focus();
   },
   render() {
-    const t = r.fromLocalDate(this.$props.value || this.ks.currentDate, this.ks.timezone), e = m(t), n = this.show, s = this.ks.dateRange.end.getTime() - this.ks.dateRange.start.getTime() > f * 27, a = k(this), h = a.format(this.ks.dateFormat, s ? this.ks.currentDate : this.ks.dateRange.zonedStart, s ? this.ks.currentDate : this.ks.dateRange.zonedEnd.addDays(-1)), u = a.format(this.ks.shortDateFormat, s ? this.ks.currentDate : this.ks.dateRange.zonedStart, s ? this.ks.currentDate : this.ks.dateRange.zonedEnd.addDays(-1));
-    return o(v, {
+    const t = i.fromLocalDate(this.$props.value || this.ks.currentDate, this.ks.timezone), e = c(t), n = this.show, o = this.ks.dateRange.end.getTime() - this.ks.dateRange.start.getTime() > m * 27, a = p(this), u = a.format(this.ks.dateFormat, o ? this.ks.currentDate : this.ks.dateRange.zonedStart, o ? this.ks.currentDate : this.ks.dateRange.zonedEnd.addDays(-1)), d = a.format(this.ks.shortDateFormat, o ? this.ks.currentDate : this.ks.dateRange.zonedStart, o ? this.ks.currentDate : this.ks.dateRange.zonedEnd.addDays(-1));
+    return s(k, {
       ref: "button",
       id: this.buttonId,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       fillMode: "flat",
-      class: "k-nav-current",
+      class: "k-nav-current k-toolbar-button",
       "aria-live": "polite",
       tabIndex: -1,
       icon: "calendar",
-      svgIcon: g,
+      svgIcon: b,
       onClick: this.handleClick
     }, {
-      default: () => [this.media === "desktop" ? h : u, o(p, {
+      default: () => [this.$props.level >= 2 ? d : u, s(f, {
         id: this._popupId,
         anchor: this.buttonId,
         show: n
       }, {
-        default: () => [this.hasMounted && o(l, {
+        default: () => [this.hasMounted && s(l, {
           ref: "calendar",
           onBlur: this.onCalendarBlur,
           onChange: this.handleChange,
@@ -80,7 +80,7 @@ const F = /* @__PURE__ */ c({
   },
   methods: {
     handleChange(t) {
-      const e = r.fromUTCDate(w(t.value), this.ks.timezone);
+      const e = i.fromUTCDate(v(t.value), this.ks.timezone);
       this.$emit("change", {
         ...t,
         value: e
@@ -103,20 +103,17 @@ const F = /* @__PURE__ */ c({
       this._blurTimeout = setTimeout(() => {
         this.focused = !1;
         const e = document.activeElement && document.activeElement.closest(`#${t._popupId}`);
-        i && document.activeElement !== t.$refs.button.$el && !e && (t.show = !1);
+        D && document.activeElement !== t.$refs.button.$el && !e && (t.show = !1);
       }, 200);
     },
     calendarKeydown(t) {
-      t.keyCode === b.esc && this.hideAndFocusButton();
+      t.keyCode === g.esc && this.hideAndFocusButton();
     },
     hideAndFocusButton() {
       this.show = !1, this.$refs.button.focus();
-    },
-    calculateMedia() {
-      i && window.matchMedia && (this.media = window.matchMedia("(min-width: 1024px)").matches ? "desktop" : "mobile");
     }
   }
 });
 export {
-  F as NavigationDatePicker
+  R as NavigationDatePicker
 };

package/components/header/view-selector/ViewSelectorList.d.ts

@@ -5,14 +5,34 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { PropType } from 'vue';
 /**
  * @hidden
  */
-declare const ViewSelectorList: import('vue').DefineComponent<{}, {}, {
-    media: string;
-}, {}, {
+export interface ViewSelectorListProps {
+    /**
+     * Responsive collapse level from the parent toolbar.
+     * When >= 1 the SegmentedControl collapses to a MenuButton.
+     */
+    level?: number;
+}
+/**
+ * @hidden
+ */
+declare const ViewSelectorList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    level: {
+        type: PropType<number>;
+        default: number;
+    };
+}>, {}, {}, {}, {
     handleViewChange(value: string): void;
-    ddlChange(event: any): void;
-    calculateMedia(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    handleItemClick(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    level: {
+        type: PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    level: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { ViewSelectorList };

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

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),u=require("@progress/kendo-vue-buttons"),m=require("@progress/kendo-vue-intl"),i=require("../../../messages/main.js"),r=require("@progress/kendo-vue-common"),h=s.defineComponent({name:"KendoViewSelectorList",inject:{kendoLocalizationService:{default:null},ks:{default:null},setActiveViewName:{default:null}},mounted(){this.calculateMedia(),r.canUseDOM&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(this.calculateMedia),this.ks.scheduler&&this.ks.scheduler.$el&&this.observer.observe(this.ks.scheduler.$el))},unmounted(){this.observer&&this.observer.disconnect()},data(){return{media:"desktop"}},render(){const t=this.ks.views;this.localization=m.provideLocalizationService(this);const o=t.find(e=>e.name===this.ks.activeViewName),l="scheduler."+o.name+"ViewTitle";this.localization.toLanguageString(l,i.messages[l])||o.name;const c=function(){return s.createVNode("select",{"tab-index":-1,class:"k-views-dropdown k-dropdown k-picker k-picker-solid k-rounded-md k-picker-md","aria-label":this.localization.toLanguageString(i.dropdownlistSelectViewAriaLabel,i.messages[i.dropdownlistSelectViewAriaLabel]),onChange:this.ddlChange},[t.map(function(e){const a="scheduler."+e.name+"ViewTitle",n=this.localization.toLanguageString(a,i.messages[a])||e.name;return s.createVNode("option",{value:e.name||e.title||n,selected:e.name===this.ks.activeViewName},[e.title||n])},this)])},d=t.map(e=>{const a="scheduler."+e.name+"ViewTitle",n=this.localization.toLanguageString(a,i.messages[a])||e.name;return{value:e.name,text:e.title||n}});return o&&this.media==="mobile"?c.call(this):s.createVNode(u.SegmentedControl,{class:"k-toolbar-button-group k-scheduler-views",items:d,value:this.ks.activeViewName,onChange:this.handleViewChange},null)},methods:{handleViewChange(t){this.setActiveViewName(t)},ddlChange(t){this.setActiveViewName(t.target.value)},calculateMedia(){r.canUseDOM&&window.matchMedia&&(this.media=window.matchMedia("(min-width: 1024px)").matches?"desktop":"mobile")}}});exports.ViewSelectorList=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),c=require("@progress/kendo-vue-buttons"),m=require("@progress/kendo-vue-intl"),s=require("../../../messages/main.js"),d=require("@progress/kendo-vue-common"),h=require("@progress/kendo-svg-icons"),V=n.defineComponent({name:"KendoViewSelectorList",props:{level:{type:Number,default:0}},inject:{kendoLocalizationService:{default:null},ks:{default:null},setActiveViewName:{default:null}},render(){const e=this.ks.views;this.localization=m.provideLocalizationService(this);const a=e.find(t=>t.name===this.ks.activeViewName);if(this.$props.level>=1&&a){const t="scheduler."+a.name+"ViewTitle",o=this.localization.toLanguageString(t,s.messages[t])||a.name;return n.createVNode(c.DropDownButton,{class:"k-toolbar-menu-button",fillMode:"flat",onItemclick:this.handleItemClick,popupSettings:{popupClass:"k-scheduler-toolbar"},textField:"title",items:e.map(i=>{const l="scheduler."+i.name+"ViewTitle",u=this.localization.toLanguageString(l,s.messages[l])||i.name;return{...i,selected:i.name===this.ks.activeViewName,title:i.title||u}}),text:a.title||o},{default:()=>[n.createVNode("span",{class:"k-menu-button-arrow k-button-arrow"},[n.createVNode(d.SvgIcon,{icon:h.chevronDownIcon},null)])]})}const r=e.map(t=>{const o="scheduler."+t.name+"ViewTitle",i=this.localization.toLanguageString(o,s.messages[o])||t.name;return{value:t.name,text:t.title||i}});return n.createVNode(c.SegmentedControl,{class:"k-scheduler-views",items:r,value:this.ks.activeViewName,onChange:this.handleViewChange},null)},methods:{handleViewChange(e){this.setActiveViewName(e)},handleItemClick(e){this.setActiveViewName&&(e.event&&e.event.preventDefault(),this.setActiveViewName(e.item.name))}}});exports.ViewSelectorList=V;

package/components/header/view-selector/ViewSelectorList.mjs

@@ -5,13 +5,20 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as h, createVNode as o } from "vue";
-import { SegmentedControl as u } from "@progress/kendo-vue-buttons";
-import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
-import { messages as n, dropdownlistSelectViewAriaLabel as r } from "../../../messages/main.mjs";
-import { canUseDOM as c } from "@progress/kendo-vue-common";
-const V = /* @__PURE__ */ h({
+import { defineComponent as c, createVNode as o } from "vue";
+import { DropDownButton as u, SegmentedControl as h } from "@progress/kendo-vue-buttons";
+import { provideLocalizationService as d } from "@progress/kendo-vue-intl";
+import { messages as l } from "../../../messages/main.mjs";
+import { SvgIcon as p } from "@progress/kendo-vue-common";
+import { chevronDownIcon as f } from "@progress/kendo-svg-icons";
+const S = /* @__PURE__ */ c({
   name: "KendoViewSelectorList",
+  props: {
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
   inject: {
     kendoLocalizationService: {
       default: null
@@ -23,61 +30,60 @@ const V = /* @__PURE__ */ h({
       default: null
     }
   },
-  mounted() {
-    this.calculateMedia(), c && window.ResizeObserver && (this.observer = new window.ResizeObserver(this.calculateMedia), this.ks.scheduler && this.ks.scheduler.$el && this.observer.observe(this.ks.scheduler.$el));
-  },
-  unmounted() {
-    this.observer && this.observer.disconnect();
-  },
-  data() {
-    return {
-      media: "desktop"
-    };
-  },
   render() {
-    const t = this.ks.views;
-    this.localization = w(this);
-    const s = t.find((e) => e.name === this.ks.activeViewName), l = "scheduler." + s.name + "ViewTitle";
-    this.localization.toLanguageString(l, n[l]) || s.name;
-    const d = function() {
-      return o("select", {
-        "tab-index": -1,
-        class: "k-views-dropdown k-dropdown k-picker k-picker-solid k-rounded-md k-picker-md",
-        "aria-label": this.localization.toLanguageString(r, n[r]),
-        onChange: this.ddlChange
-      }, [t.map(function(e) {
-        const i = "scheduler." + e.name + "ViewTitle", a = this.localization.toLanguageString(i, n[i]) || e.name;
-        return o("option", {
-          value: e.name || e.title || a,
-          selected: e.name === this.ks.activeViewName
-        }, [e.title || a]);
-      }, this)]);
-    }, m = t.map((e) => {
-      const i = "scheduler." + e.name + "ViewTitle", a = this.localization.toLanguageString(i, n[i]) || e.name;
+    const e = this.ks.views;
+    this.localization = d(this);
+    const n = e.find((t) => t.name === this.ks.activeViewName);
+    if (this.$props.level >= 1 && n) {
+      const t = "scheduler." + n.name + "ViewTitle", a = this.localization.toLanguageString(t, l[t]) || n.name;
+      return o(u, {
+        class: "k-toolbar-menu-button",
+        fillMode: "flat",
+        onItemclick: this.handleItemClick,
+        popupSettings: {
+          popupClass: "k-scheduler-toolbar"
+        },
+        textField: "title",
+        items: e.map((i) => {
+          const s = "scheduler." + i.name + "ViewTitle", m = this.localization.toLanguageString(s, l[s]) || i.name;
+          return {
+            ...i,
+            selected: i.name === this.ks.activeViewName,
+            title: i.title || m
+          };
+        }),
+        text: n.title || a
+      }, {
+        default: () => [o("span", {
+          class: "k-menu-button-arrow k-button-arrow"
+        }, [o(p, {
+          icon: f
+        }, null)])]
+      });
+    }
+    const r = e.map((t) => {
+      const a = "scheduler." + t.name + "ViewTitle", i = this.localization.toLanguageString(a, l[a]) || t.name;
       return {
-        value: e.name,
-        text: e.title || a
+        value: t.name,
+        text: t.title || i
       };
     });
-    return s && this.media === "mobile" ? d.call(this) : o(u, {
-      class: "k-toolbar-button-group k-scheduler-views",
-      items: m,
+    return o(h, {
+      class: "k-scheduler-views",
+      items: r,
       value: this.ks.activeViewName,
       onChange: this.handleViewChange
     }, null);
   },
   methods: {
-    handleViewChange(t) {
-      this.setActiveViewName(t);
-    },
-    ddlChange(t) {
-      this.setActiveViewName(t.target.value);
+    handleViewChange(e) {
+      this.setActiveViewName(e);
     },
-    calculateMedia() {
-      c && window.matchMedia && (this.media = window.matchMedia("(min-width: 1024px)").matches ? "desktop" : "mobile");
+    handleItemClick(e) {
+      this.setActiveViewName && (e.event && e.event.preventDefault(), this.setActiveViewName(e.item.name));
     }
   }
 });
 export {
-  V as ViewSelectorList
+  S as ViewSelectorList
 };