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

package/dist/esm/WindowTitlebar.js

@@ -8,6 +8,7 @@ import { Button } from '@progress/kendo-vue-buttons';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { windowStage } from './StageEnum.js';
 import { dialogsWindowCloseButton, dialogsWindowMaximizeButton, dialogsWindowMinimizeButton, dialogsWindowRestoreButton, messages } from './messages/main.js';
+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/esm/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/npm/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/npm/Dialog.js

@@ -36,7 +36,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 {
@@ -54,6 +61,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);
@@ -154,7 +173,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,
@@ -179,7 +198,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/npm/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/npm/DialogActionsBar.js

@@ -18,11 +18,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
@@ -35,11 +41,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/npm/DialogTitleBar.js

@@ -11,6 +11,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -59,7 +60,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(kendo_vue_buttons_1.Button, {
@@ -68,16 +69,18 @@ var DialogTitleBarVue2 = {
         type: "button",
         fillMode: 'flat',
         "aria-label": "Close",
-        icon: 'x'
+        icon: 'x',
+        svgIcon: kendo_svg_icons_1.xIcon
       },
       fillMode: 'flat',
       "aria-label": "Close",
       icon: 'x',
+      svgIcon: kendo_svg_icons_1.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/npm/Window.js

@@ -111,6 +111,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
@@ -177,6 +183,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 !== StageEnum_1.windowStage.FULLSCREEN) {
         return Math.max(this.$props.top || this.currentTop, 0);
@@ -485,9 +500,6 @@ var WindowVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var classNamesWindow = (0, kendo_vue_common_1.classNames)('k-widget', 'k-window', this.$props.windowClass, {
-      'k-window-minimized': this.currentStage === 'MINIMIZED'
-    });
     var titleRender = kendo_vue_common_1.templateRendering.call(this, this.$props.titleRender, kendo_vue_common_1.getListeners.call(this));
     var closeButton = kendo_vue_common_1.templateRendering.call(this, this.$props.closeButton, kendo_vue_common_1.getListeners.call(this));
     var minimizeButton = kendo_vue_common_1.templateRendering.call(this, this.$props.minimizeButton, kendo_vue_common_1.getListeners.call(this));
@@ -526,7 +538,7 @@ var WindowVue2 = {
       },
       onKeydown: this.handleKeyDown,
       ref: 'windowElement',
-      "class": classNamesWindow,
+      "class": this.windowElementClass,
       role: 'dialog',
       "aria-labelledby": this.titleId,
       style: __assign({
@@ -614,7 +626,7 @@ var WindowVue2 = {
       maximizeButton: maximizeButton,
       restoreButton: restoreButton
     })]), this.windowStage !== StageEnum_1.windowStage.MINIMIZED ? h("div", {
-      "class": "k-content k-window-content"
+      "class": "k-window-content"
     }, [defaultSlot]) : null, this.windowStage === StageEnum_1.windowStage.DEFAULT && this.$props.resizable
     // @ts-ignore  function children
     ? h(WindowResizeHandlers_1.ResizeHandlers, {

package/dist/npm/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/npm/WindowTitlebar.js

@@ -14,6 +14,7 @@ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var StageEnum_1 = require("./StageEnum");
 var main_1 = require("./messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -83,11 +84,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-minimize',
+        svgIcon: kendo_svg_icons_1.windowMinimizeIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowMinimizeButton, main_1.messages[main_1.dialogsWindowMinimizeButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-minimize',
+      svgIcon: kendo_svg_icons_1.windowMinimizeIcon,
       fillMode: 'flat',
       onClick: this.onMinimizeClick,
       on: this.v3 ? undefined : {
@@ -106,12 +109,14 @@ var WindowTitleBarVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        icon: 'window-maximize',
+        icon: 'window',
+        svgIcon: kendo_svg_icons_1.windowIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowMaximizeButton, main_1.messages[main_1.dialogsWindowMaximizeButton])
       },
-      "class": "k-window-action",
-      icon: 'window-maximize',
+      "class": "k-window-titlebar-action",
+      icon: 'window',
+      svgIcon: kendo_svg_icons_1.windowIcon,
       fillMode: 'flat',
       onClick: this.onFullScreenClick,
       on: this.v3 ? undefined : {
@@ -131,11 +136,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'window-restore',
+        svgIcon: kendo_svg_icons_1.windowRestoreIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowRestoreButton, main_1.messages[main_1.dialogsWindowRestoreButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'window-restore',
+      svgIcon: kendo_svg_icons_1.windowRestoreIcon,
       fillMode: 'flat',
       onClick: this.onRestoreClick,
       on: this.v3 ? undefined : {
@@ -155,11 +162,13 @@ var WindowTitleBarVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'x',
+        svgIcon: kendo_svg_icons_1.xIcon,
         fillMode: 'flat',
         "aria-label": ls.toLanguageString(main_1.dialogsWindowCloseButton, main_1.messages[main_1.dialogsWindowCloseButton])
       },
-      "class": "k-window-action",
+      "class": "k-window-titlebar-action",
       icon: 'x',
+      svgIcon: kendo_svg_icons_1.xIcon,
       fillMode: 'flat',
       onClick: this.onCloseClick,
       on: this.v3 ? undefined : {
@@ -173,7 +182,7 @@ var WindowTitleBarVue2 = {
       defaultRendering: closeButtonDefault
     });
     return h("div", {
-      "class": "k-window-titlebar k-dialog-titlebar",
+      "class": "k-window-titlebar",
       style: {
         touchAction: 'none'
       },
@@ -188,7 +197,7 @@ var WindowTitleBarVue2 = {
         id: this.$props.titleId
       }
     }, [titleElement]), h("div", {
-      "class": "k-window-actions"
+      "class": "k-window-titlebar-actions"
     }, [stage === StageEnum_1.windowStage.DEFAULT && minimizeButtonRender, stage === StageEnum_1.windowStage.DEFAULT && maximizeButtonRender, stage !== StageEnum_1.windowStage.DEFAULT && restoreButtonRender, closeButtonRender])]);
   }
 };

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-dialogs",
   "description": "Kendo UI for Vue Dialogs package",
-  "version": "3.7.4-dev.202212300853",
+  "version": "3.7.4-dev.202301091431",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -38,17 +38,19 @@
     "framework": "Kendo UI for Vue"
   },
   "peerDependencies": {
-    "@progress/kendo-licensing": "^1.1.0",
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
     "@progress/kendo-vue-intl": "^3.6.0",
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-common": "3.7.4-dev.202212300853"
+    "@progress/kendo-vue-buttons": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-common": "3.7.4-dev.202301091431"
   },
   "devDependencies": {
-    "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-intl": "3.7.4-dev.202212300853"
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
+    "@progress/kendo-vue-intl": "3.7.4-dev.202301091431"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",