@progress/kendo-vue-dialogs 3.7.4-dev.202212300853 → 3.7.4-dev.202301091431

package/dist/es/Dialog.d.ts

@@ -40,6 +40,10 @@ export interface DialogProps {
      * Specifies the minimum width of the Dialog.
      */
     minWidth?: number | string;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */
@@ -68,6 +72,7 @@ export interface DialogProps {
      * The styles that are applied to the content of the Dialog.
      */
     contentStyle?: any;
+    dialogClass?: string;
 }
 /**
  * @hidden

package/dist/es/Dialog.js

@@ -30,7 +30,14 @@ var DialogVue2 = {
     },
     width: [String, Number],
     height: [String, Number],
-    minWidth: [String, Number]
+    minWidth: [String, Number],
+    dialogClass: String,
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return ['primary', 'dark', 'light'].includes(value);
+      }
+    }
   },
   provide: function provide() {
     return {
@@ -48,6 +55,18 @@ var DialogVue2 = {
       v3: v3
     };
   },
+  computed: {
+    dialogElementClass: function dialogElementClass() {
+      var _a;
+      var _b = this.$props,
+        dialogClass = _b.dialogClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true,
+        'k-dialog': true
+      }, _a[dialogClass] = dialogClass, _a["k-window-".concat(themeColor)] = themeColor, _a;
+    }
+  },
   mounted: function mounted() {
     if (this.$props.appendTo) {
       var body = document.querySelector(this.$props.appendTo);
@@ -148,7 +167,7 @@ var DialogVue2 = {
         "aria-labelledby": title || titleRender ? id : undefined,
         role: "dialog"
       },
-      "class": "k-widget k-window k-dialog",
+      "class": "k-window k-dialog",
       role: "dialog",
       style: {
         width: width,
@@ -173,7 +192,7 @@ var DialogVue2 = {
       title: title,
       titleRender: titleRender
     }), h("div", {
-      "class": "k-content k-window-content k-dialog-content",
+      "class": "k-window-content k-dialog-content",
       style: contentStyle
     }, [content]), actions])]);
     return this.$props.appendTo ? h("div", [dialog]) : dialog;

package/dist/es/DialogActionsBar.d.ts

@@ -7,8 +7,25 @@ declare type DefaultMethods<V> = {
  * @hidden
  */
 export interface DialogActionsBarProps {
+    /**
+     * Set the layout of the actions.
+     *
+     * The supported values are:
+     * * (Default) `start`
+     * * `center`
+     * * `end`
+     * * `stretched`
+     */
     layout: string;
-    buttonGroupClass?: boolean;
+    /**
+     * Specifies the orientation of the Dialog action buttons.
+     *
+     * * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     *
+     */
+    orientation?: 'horizontal' | 'vertical' | string;
 }
 /**
  * @hidden

package/dist/es/DialogActionsBar.js

@@ -12,11 +12,17 @@ var DialogActionsBarVue2 = {
   props: {
     layout: {
       type: String,
-      default: 'stretched'
+      default: 'stretched',
+      validator: function validator(value) {
+        return ['stretched', 'start', 'center', 'end'].includes(value);
+      }
     },
-    buttonGroupClass: {
-      type: Boolean,
-      default: true
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
     }
   },
   // @ts-ignore
@@ -29,11 +35,14 @@ var DialogActionsBarVue2 = {
   computed: {
     wrapperClasses: function wrapperClasses() {
       var _a;
-      var layout = this.$props.layout;
+      var _b = this.$props,
+        layout = _b.layout,
+        orientation = _b.orientation;
       return _a = {
-        'k-dialog-buttongroup': this.buttonGroupClass,
-        'k-actions': true
-      }, _a["k-actions-".concat(layout)] = layout, _a;
+        'k-actions': true,
+        'k-dialog-actions': true,
+        'k-window-actions': true
+      }, _a["k-actions-".concat(orientation)] = orientation, _a["k-actions-".concat(layout)] = layout, _a;
     }
   },
   // @ts-ignore

package/dist/es/DialogTitleBar.js

@@ -5,6 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getTemplate } from '@progress/kendo-vue-common';
 import { Button } from '@progress/kendo-vue-buttons';
+import { xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -53,7 +54,7 @@ var DialogTitleBarVue2 = {
     }, [h("div", {
       "class": "k-window-title k-dialog-title"
     }, [titleElement]), h("div", {
-      "class": "k-window-actions k-dialog-actions"
+      "class": "k-window-titlebar-actions k-dialog-titlebar-actions"
     }, [closeIcon &&
     // @ts-ignore
     h(Button, {
@@ -62,16 +63,18 @@ var DialogTitleBarVue2 = {
         type: "button",
         fillMode: 'flat',
         "aria-label": "Close",
-        icon: 'x'
+        icon: 'x',
+        svgIcon: xIcon
       },
       fillMode: 'flat',
       "aria-label": "Close",
       icon: 'x',
+      svgIcon: xIcon,
       onClick: this.onCloseButtonClick,
       on: this.v3 ? undefined : {
         "click": this.onCloseButtonClick
       },
-      "class": "k-window-action k-dialog-action"
+      "class": "k-window-titlebar-action k-dialog-titlebar-action"
     })])]);
   }
 };

package/dist/es/Window.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { WindowTitleBar } from './WindowTitlebar';
-import { Keys, classNames, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
+import { Keys, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './WindowResizeHandlers';
 import { windowStage } from './StageEnum';
 import { packageMetadata } from './package-metadata';
@@ -105,6 +105,12 @@ var WindowVue2 = {
       validator: function validator(value) {
         return ['DEFAULT', 'MINIMIZED', 'FULLSCREEN'].indexOf(value) !== -1;
       }
+    },
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return [undefined, 'primary', 'dark', 'light'].includes(value);
+      }
     }
   },
   // @ts-ignore
@@ -171,6 +177,15 @@ var WindowVue2 = {
     }
   },
   computed: {
+    windowElementClass: function windowElementClass() {
+      var _a;
+      var _b = this.$props,
+        windowClass = _b.windowClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true
+      }, _a[windowClass] = windowClass, _a["k-window-".concat(themeColor)] = themeColor, _a['k-window-minimized'] = this.currentStage === 'MINIMIZED', _a;
+    },
     computedTop: function computedTop() {
       if (this.windowStage !== windowStage.FULLSCREEN) {
         return Math.max(this.$props.top || this.currentTop, 0);
@@ -479,9 +494,6 @@ var WindowVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var classNamesWindow = classNames('k-widget', 'k-window', this.$props.windowClass, {
-      'k-window-minimized': this.currentStage === 'MINIMIZED'
-    });
     var titleRender = templateRendering.call(this, this.$props.titleRender, getListeners.call(this));
     var closeButton = templateRendering.call(this, this.$props.closeButton, getListeners.call(this));
     var minimizeButton = templateRendering.call(this, this.$props.minimizeButton, getListeners.call(this));
@@ -520,7 +532,7 @@ var WindowVue2 = {
       },
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
-      "class": classNamesWindow,
+      "class": this.windowElementClass,
       role: 'dialog',
       "aria-labelledby": this.titleId,
       style: __assign({
@@ -608,7 +620,7 @@ var WindowVue2 = {
       maximizeButton: maximizeButton,
       restoreButton: restoreButton
     })]), this.windowStage !== windowStage.MINIMIZED ? h("div", {
-      "class": "k-content k-window-content"
+      "class": "k-window-content"
     }, [defaultSlot]) : null, this.windowStage === windowStage.DEFAULT && this.$props.resizable
     // @ts-ignore  function children
     ? h(ResizeHandlers, {

package/dist/es/WindowProps.d.ts

@@ -77,6 +77,10 @@ export interface WindowProps {
      * Specifies if the Window will be resizable ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
      */
     resizable?: boolean;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * Acccepts a named slot `string`, functional or class component for the restore button. If set to `false` the button is not rendered.
      * @default true

package/dist/es/WindowTitlebar.js

@@ -8,6 +8,7 @@ import { Button } from '@progress/kendo-vue-buttons';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { windowStage } from './StageEnum';
 import { dialogsWindowCloseButton, dialogsWindowMaximizeButton, dialogsWindowMinimizeButton, dialogsWindowRestoreButton, messages } from './messages/main';
+import { windowIcon, windowMinimizeIcon, windowRestoreIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -77,11 +78,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-minimize',
+        svgIcon: windowMinimizeIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowMinimizeButton, messages[dialogsWindowMinimizeButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-minimize',
+      svgIcon: windowMinimizeIcon,
       fillMode: 'flat',
       onClick: this.onMinimizeClick,
       on: this.v3 ? undefined : {
@@ -100,12 +103,14 @@ var WindowTitleBarVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        icon: 'window-maximize',
+        icon: 'window',
+        svgIcon: windowIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowMaximizeButton, messages[dialogsWindowMaximizeButton])
       },
-      "class": "k-window-action",
-      icon: 'window-maximize',
+      "class": "k-window-titlebar-action",
+      icon: 'window',
+      svgIcon: windowIcon,
       fillMode: 'flat',
       onClick: this.onFullScreenClick,
       on: this.v3 ? undefined : {
@@ -125,11 +130,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-restore',
+        svgIcon: windowRestoreIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowRestoreButton, messages[dialogsWindowRestoreButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-restore',
+      svgIcon: windowRestoreIcon,
       fillMode: 'flat',
       onClick: this.onRestoreClick,
       on: this.v3 ? undefined : {
@@ -149,11 +156,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'x',
+        svgIcon: xIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(dialogsWindowCloseButton, messages[dialogsWindowCloseButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'x',
+      svgIcon: xIcon,
       fillMode: 'flat',
       onClick: this.onCloseClick,
       on: this.v3 ? undefined : {
@@ -167,7 +176,7 @@ var WindowTitleBarVue2 = {
       defaultRendering: closeButtonDefault
     });
     return h("div", {
-      "class": "k-window-titlebar k-dialog-titlebar",
+      "class": "k-window-titlebar",
       style: {
         touchAction: 'none'
       },
@@ -182,7 +191,7 @@ var WindowTitleBarVue2 = {
         id: this.$props.titleId
       }
     }, [titleElement]), h("div", {
-      "class": "k-window-actions"
+      "class": "k-window-titlebar-actions"
     }, [stage === windowStage.DEFAULT && minimizeButtonRender, stage === windowStage.DEFAULT && maximizeButtonRender, stage !== windowStage.DEFAULT && restoreButtonRender, closeButtonRender])]);
   }
 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dialogs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1672389550,
+    publishDate: 1673273393,
     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/esm/Dialog.d.ts

@@ -40,6 +40,10 @@ export interface DialogProps {
      * Specifies the minimum width of the Dialog.
      */
     minWidth?: number | string;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
      */
@@ -68,6 +72,7 @@ export interface DialogProps {
      * The styles that are applied to the content of the Dialog.
      */
     contentStyle?: any;
+    dialogClass?: string;
 }
 /**
  * @hidden

package/dist/esm/Dialog.js

@@ -30,7 +30,14 @@ var DialogVue2 = {
     },
     width: [String, Number],
     height: [String, Number],
-    minWidth: [String, Number]
+    minWidth: [String, Number],
+    dialogClass: String,
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return ['primary', 'dark', 'light'].includes(value);
+      }
+    }
   },
   provide: function provide() {
     return {
@@ -48,6 +55,18 @@ var DialogVue2 = {
       v3: v3
     };
   },
+  computed: {
+    dialogElementClass: function dialogElementClass() {
+      var _a;
+      var _b = this.$props,
+        dialogClass = _b.dialogClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true,
+        'k-dialog': true
+      }, _a[dialogClass] = dialogClass, _a["k-window-".concat(themeColor)] = themeColor, _a;
+    }
+  },
   mounted: function mounted() {
     if (this.$props.appendTo) {
       var body = document.querySelector(this.$props.appendTo);
@@ -148,7 +167,7 @@ var DialogVue2 = {
         "aria-labelledby": title || titleRender ? id : undefined,
         role: "dialog"
       },
-      "class": "k-widget k-window k-dialog",
+      "class": "k-window k-dialog",
       role: "dialog",
       style: {
         width: width,
@@ -173,7 +192,7 @@ var DialogVue2 = {
       title: title,
       titleRender: titleRender
     }), h("div", {
-      "class": "k-content k-window-content k-dialog-content",
+      "class": "k-window-content k-dialog-content",
       style: contentStyle
     }, [content]), actions])]);
     return this.$props.appendTo ? h("div", [dialog]) : dialog;

package/dist/esm/DialogActionsBar.d.ts

@@ -7,8 +7,25 @@ declare type DefaultMethods<V> = {
  * @hidden
  */
 export interface DialogActionsBarProps {
+    /**
+     * Set the layout of the actions.
+     *
+     * The supported values are:
+     * * (Default) `start`
+     * * `center`
+     * * `end`
+     * * `stretched`
+     */
     layout: string;
-    buttonGroupClass?: boolean;
+    /**
+     * Specifies the orientation of the Dialog action buttons.
+     *
+     * * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     *
+     */
+    orientation?: 'horizontal' | 'vertical' | string;
 }
 /**
  * @hidden

package/dist/esm/DialogActionsBar.js

@@ -12,11 +12,17 @@ var DialogActionsBarVue2 = {
   props: {
     layout: {
       type: String,
-      default: 'stretched'
+      default: 'stretched',
+      validator: function validator(value) {
+        return ['stretched', 'start', 'center', 'end'].includes(value);
+      }
     },
-    buttonGroupClass: {
-      type: Boolean,
-      default: true
+    orientation: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
     }
   },
   // @ts-ignore
@@ -29,11 +35,14 @@ var DialogActionsBarVue2 = {
   computed: {
     wrapperClasses: function wrapperClasses() {
       var _a;
-      var layout = this.$props.layout;
+      var _b = this.$props,
+        layout = _b.layout,
+        orientation = _b.orientation;
       return _a = {
-        'k-dialog-buttongroup': this.buttonGroupClass,
-        'k-actions': true
-      }, _a["k-actions-".concat(layout)] = layout, _a;
+        'k-actions': true,
+        'k-dialog-actions': true,
+        'k-window-actions': true
+      }, _a["k-actions-".concat(orientation)] = orientation, _a["k-actions-".concat(layout)] = layout, _a;
     }
   },
   // @ts-ignore

package/dist/esm/DialogTitleBar.js

@@ -5,6 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getTemplate } from '@progress/kendo-vue-common';
 import { Button } from '@progress/kendo-vue-buttons';
+import { xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -53,7 +54,7 @@ var DialogTitleBarVue2 = {
     }, [h("div", {
       "class": "k-window-title k-dialog-title"
     }, [titleElement]), h("div", {
-      "class": "k-window-actions k-dialog-actions"
+      "class": "k-window-titlebar-actions k-dialog-titlebar-actions"
     }, [closeIcon &&
     // @ts-ignore
     h(Button, {
@@ -62,16 +63,18 @@ var DialogTitleBarVue2 = {
         type: "button",
         fillMode: 'flat',
         "aria-label": "Close",
-        icon: 'x'
+        icon: 'x',
+        svgIcon: xIcon
       },
       fillMode: 'flat',
       "aria-label": "Close",
       icon: 'x',
+      svgIcon: xIcon,
       onClick: this.onCloseButtonClick,
       on: this.v3 ? undefined : {
         "click": this.onCloseButtonClick
       },
-      "class": "k-window-action k-dialog-action"
+      "class": "k-window-titlebar-action k-dialog-titlebar-action"
     })])]);
   }
 };

package/dist/esm/Window.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { WindowTitleBar } from './WindowTitlebar.js';
-import { Keys, classNames, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
+import { Keys, guid, Draggable, templateDefinition, getDefaultSlots, templateRendering, getListeners, validatePackage } from '@progress/kendo-vue-common';
 import { ResizeHandlers } from './WindowResizeHandlers.js';
 import { windowStage } from './StageEnum.js';
 import { packageMetadata } from './package-metadata.js';
@@ -105,6 +105,12 @@ var WindowVue2 = {
       validator: function validator(value) {
         return ['DEFAULT', 'MINIMIZED', 'FULLSCREEN'].indexOf(value) !== -1;
       }
+    },
+    themeColor: {
+      type: String,
+      validator: function validator(value) {
+        return [undefined, 'primary', 'dark', 'light'].includes(value);
+      }
     }
   },
   // @ts-ignore
@@ -171,6 +177,15 @@ var WindowVue2 = {
     }
   },
   computed: {
+    windowElementClass: function windowElementClass() {
+      var _a;
+      var _b = this.$props,
+        windowClass = _b.windowClass,
+        themeColor = _b.themeColor;
+      return _a = {
+        'k-window': true
+      }, _a[windowClass] = windowClass, _a["k-window-".concat(themeColor)] = themeColor, _a['k-window-minimized'] = this.currentStage === 'MINIMIZED', _a;
+    },
     computedTop: function computedTop() {
       if (this.windowStage !== windowStage.FULLSCREEN) {
         return Math.max(this.$props.top || this.currentTop, 0);
@@ -479,9 +494,6 @@ var WindowVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var classNamesWindow = classNames('k-widget', 'k-window', this.$props.windowClass, {
-      'k-window-minimized': this.currentStage === 'MINIMIZED'
-    });
     var titleRender = templateRendering.call(this, this.$props.titleRender, getListeners.call(this));
     var closeButton = templateRendering.call(this, this.$props.closeButton, getListeners.call(this));
     var minimizeButton = templateRendering.call(this, this.$props.minimizeButton, getListeners.call(this));
@@ -520,7 +532,7 @@ var WindowVue2 = {
       },
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
-      "class": classNamesWindow,
+      "class": this.windowElementClass,
       role: 'dialog',
       "aria-labelledby": this.titleId,
       style: __assign({
@@ -608,7 +620,7 @@ var WindowVue2 = {
       maximizeButton: maximizeButton,
       restoreButton: restoreButton
     })]), this.windowStage !== windowStage.MINIMIZED ? h("div", {
-      "class": "k-content k-window-content"
+      "class": "k-window-content"
     }, [defaultSlot]) : null, this.windowStage === windowStage.DEFAULT && this.$props.resizable
     // @ts-ignore  function children
     ? h(ResizeHandlers, {

package/dist/esm/WindowProps.d.ts

@@ -77,6 +77,10 @@ export interface WindowProps {
      * Specifies if the Window will be resizable ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
      */
     resizable?: boolean;
+    /**
+     * Specifies the theme color of the Dialog.
+     */
+    themeColor?: 'promary' | 'dark' | 'light' | string;
     /**
      * Acccepts a named slot `string`, functional or class component for the restore button. If set to `false` the button is not rendered.
      * @default true