@progress/kendo-angular-dialog 5.2.3 → 6.0.1

package/dist/fesm5/index.js

@@ -5,15 +5,207 @@
 import { __decorate, __metadata, __extends, __param } from 'tslib';
 import { TemplateRef, Input, Output, EventEmitter, HostBinding, Component, ElementRef, InjectionToken, Inject, Optional, NgZone, ContentChildren, QueryList, ViewChildren, ViewChild, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, HostListener, ContentChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { L10N_PREFIX, RTL, MessageService, LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
+import { Subscription, Subject, merge, of } from 'rxjs';
 import { take, filter, map, share, tap, switchMap, takeUntil } from 'rxjs/operators';
+import { L10N_PREFIX, RTL, MessageService, LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Subscription, Subject, merge, of } from 'rxjs';
 import { DraggableDirective, isChanged, isDocumentAvailable, DraggableModule } from '@progress/kendo-angular-common';
 import { offset, scrollPosition, positionWithScroll, getDocumentElement, getWindowViewPort } from '@progress/kendo-popup-common';
 import { Button } from '@progress/kendo-angular-buttons';
 import { CommonModule } from '@angular/common';
 
+/**
+ * @hidden
+ */
+var isPresent = function (value) { return value !== null && value !== undefined; };
+/**
+ * @hidden
+ */
+var isTruthy = function (value) { return !!value; };
+var toClassList = function (classNames) { return String(classNames).trim().split(' '); };
+var focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
+/**
+ * @hidden
+ */
+var Keys;
+(function (Keys) {
+    Keys[Keys["esc"] = 27] = "esc";
+    Keys[Keys["tab"] = 9] = "tab";
+    Keys[Keys["enter"] = 13] = "enter";
+    Keys[Keys["space"] = 32] = "space";
+    Keys[Keys["ctrl"] = 17] = "ctrl";
+    Keys[Keys["shift"] = 16] = "shift";
+    Keys[Keys["left"] = 37] = "left";
+    Keys[Keys["up"] = 38] = "up";
+    Keys[Keys["right"] = 39] = "right";
+    Keys[Keys["down"] = 40] = "down";
+})(Keys || (Keys = {}));
+/**
+ * @hidden
+ */
+var DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-dialog-buttongroup k-dialog-action';
+/**
+ * @hidden
+ */
+var DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-dialog-buttongroup';
+/**
+ * @hidden
+ */
+var WINDOW_CLASSES = 'k-window';
+/**
+ * @hidden
+ */
+var hasClasses = function (element, classNames) {
+    var namesList = toClassList(classNames);
+    return Boolean(toClassList(element.className).find(function (className) { return namesList.indexOf(className) >= 0; }));
+};
+/**
+ * @hidden
+ */
+var isVisible = function (element) {
+    var rect = element.getBoundingClientRect();
+    return !!(rect.width && rect.height) && window.getComputedStyle(element).visibility !== 'hidden';
+};
+/**
+ * @hidden
+ */
+var isFocusable = function (element, checkVisibility) {
+    if (checkVisibility === void 0) { checkVisibility = true; }
+    if (element.tagName) {
+        var tagName = element.tagName.toLowerCase();
+        var tabIndex = element.getAttribute('tabIndex');
+        var validTabIndex = tabIndex !== null && !isNaN(tabIndex) && tabIndex > -1;
+        var focusable = false;
+        if (focusableRegex.test(tagName)) {
+            focusable = !element.disabled;
+        }
+        else {
+            focusable = validTabIndex;
+        }
+        return focusable && (!checkVisibility || isVisible(element));
+    }
+    return false;
+};
+/**
+ * @hidden
+ */
+var setHTMLAttributes = function (attributes, renderer, element) {
+    for (var attribute in attributes) {
+        if (attribute) {
+            renderer.setAttribute(element, attribute, attributes[attribute]);
+        }
+    }
+};
+/**
+ * Receives CSS class declarations either as an object, string or array and returns an array of the class names.
+ *
+ * @hidden
+ */
+var parseCSSClassNames = function (value) {
+    if (isObject(value)) {
+        return parseObjectClassNames(value);
+    }
+    if (isString(value)) {
+        return parseStringClassNames(value);
+    }
+    if (Array.isArray(value)) {
+        return parseArrayClassNames(value);
+    }
+};
+var parseObjectClassNames = function (value) {
+    var classes = [];
+    Object.keys(value).forEach(function (className) {
+        var currentClassName = splitStringToArray(className);
+        if (value[className] && currentClassName[0]) {
+            classes.push.apply(classes, currentClassName);
+        }
+    });
+    return classes;
+};
+var parseStringClassNames = function (value) {
+    var classes = [];
+    var classesArray = splitStringToArray(value);
+    classesArray.forEach(function (className) {
+        classes.push(className);
+    });
+    return classes;
+};
+var parseArrayClassNames = function (value) {
+    var classes = [];
+    value.forEach(function (className) {
+        var current = splitStringToArray(className);
+        if (current[0]) {
+            classes.push.apply(classes, current);
+        }
+    });
+    return classes;
+};
+/**
+ * @hidden
+ */
+var focusableSelector = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'iframe',
+    'object',
+    'embed',
+    '*[tabindex]',
+    '*[contenteditable]'
+].join(',');
+/**
+ * @hidden
+ */
+var preventDefault = function (_a) {
+    var event = _a.originalEvent;
+    event.stopPropagation();
+    event.preventDefault();
+};
+/**
+ * @hidden
+ */
+var RESIZE_DIRECTIONS = ['n', 'e', 's', 'w', 'se', 'sw', 'ne', 'nw'];
+/**
+ * @hidden
+ */
+var OFFSET_STYLES = ['top', 'left', 'width', 'height'];
+/**
+ * @hidden
+ */
+var isString = function (value) { return value instanceof String || typeof value === 'string'; };
+/**
+ * @hidden
+ */
+var isObject = function (value) { return isPresent(value) && !Array.isArray(value) && typeof value === 'object'; };
+/**
+ * @hidden
+ */
+var isNumber = function (value) { return typeof value === 'number' && isFinite(value); };
+/**
+ * @hidden
+ */
+var createValueWithUnit = function (value) { return value + (isNumber(value) ? 'px' : ''); };
+/**
+ * @hidden
+ */
+var splitStringToArray = function (value) { return value.trim().replace(/\s+/g, " ").split(' '); };
+/**
+ * @hidden
+ */
+var findPrimaryButton = function (buttons) {
+    for (var i = buttons.length - 1; i >= 0; i--) {
+        var classList = buttons[i].classList;
+        for (var j = 0; j < classList.length; j++) {
+            if (classList[j].endsWith('-primary')) {
+                return buttons[i];
+            }
+        }
+    }
+};
+
 /**
  * Specifies the action buttons of the Dialog
  * ([see example]({% slug actionbuttons_dialog %})).
@@ -54,9 +246,13 @@ var DialogActionsComponent = /** @class */ (function () {
      * @hidden
      */
     DialogActionsComponent.prototype.buttonClass = function (action) {
-        var classes = ['k-button'];
-        if (action.primary) {
-            classes.push('k-primary');
+        var classes = ['k-button k-button-md k-rounded-md'];
+        var fillMode = action.fillMode ? action.fillMode : 'solid';
+        var themeColor = action.themeColor ? action.themeColor : 'base';
+        var cssClasses = action.cssClass ? parseCSSClassNames(action.cssClass) : [];
+        classes.push("k-button-" + fillMode + " k-button-" + fillMode + "-" + themeColor);
+        if (cssClasses.length > 0) {
+            classes = classes.concat(cssClasses);
         }
         return classes.join(' ');
     };
@@ -224,7 +420,7 @@ var DialogTitleBarComponent = /** @class */ (function () {
                     useValue: 'kendo.dialog'
                 }
             ],
-            template: "\n         <ng-container\n            kendoDialogTitleBarLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n            <div class=\"k-window-title k-dialog-title\">\n                <ng-content></ng-content>\n            </div>\n\n            <div class=\"k-window-actions k-dialog-actions\">\n                <a\n                    href=\"#\"\n                    role=\"button\"\n                    [attr.title]=\"closeButtonTitle\"\n                    [attr.aria-label]=\"closeButtonTitle\"\n                    class=\"k-button k-flat k-button-icon k-window-action k-dialog-action k-dialog-close\"\n                    (click)=\"onCloseClick($event)\"\n                >\n                    <span class=\"k-icon k-i-x\"></span>\n                </a>\n            </div>\n        </ng-container>\n    "
+            template: "\n         <ng-container\n            kendoDialogTitleBarLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n            <div class=\"k-window-title k-dialog-title\">\n                <ng-content></ng-content>\n            </div>\n\n            <div class=\"k-window-actions k-dialog-actions\">\n                <button\n                    role=\"button\"\n                    [attr.title]=\"closeButtonTitle\"\n                    [attr.aria-label]=\"closeButtonTitle\"\n                    class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-window-action k-dialog-action k-dialog-close\"\n                    (click)=\"onCloseClick($event)\"\n                >\n                    <span class=\"k-button-icon k-icon k-i-x\"></span>\n                </button>\n            </div>\n        </ng-container>\n    "
         }),
         __param(2, Optional()),
         __metadata("design:paramtypes", [NgZone, ElementRef, LocalizationService])
@@ -239,190 +435,11 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576271,
+    publishDate: 1643116783,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
-/**
- * @hidden
- */
-var isPresent = function (value) { return value !== null && value !== undefined; };
-/**
- * @hidden
- */
-var isTruthy = function (value) { return !!value; };
-var toClassList = function (classNames) { return String(classNames).trim().split(' '); };
-var focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
-/**
- * @hidden
- */
-var Keys;
-(function (Keys) {
-    Keys[Keys["esc"] = 27] = "esc";
-    Keys[Keys["tab"] = 9] = "tab";
-    Keys[Keys["enter"] = 13] = "enter";
-    Keys[Keys["space"] = 32] = "space";
-    Keys[Keys["ctrl"] = 17] = "ctrl";
-    Keys[Keys["shift"] = 16] = "shift";
-    Keys[Keys["left"] = 37] = "left";
-    Keys[Keys["up"] = 38] = "up";
-    Keys[Keys["right"] = 39] = "right";
-    Keys[Keys["down"] = 40] = "down";
-})(Keys || (Keys = {}));
-/**
- * @hidden
- */
-var DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-dialog-buttongroup k-dialog-action';
-/**
- * @hidden
- */
-var DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-dialog-buttongroup';
-/**
- * @hidden
- */
-var WINDOW_CLASSES = 'k-window';
-/**
- * @hidden
- */
-var hasClasses = function (element, classNames) {
-    var namesList = toClassList(classNames);
-    return Boolean(toClassList(element.className).find(function (className) { return namesList.indexOf(className) >= 0; }));
-};
-/**
- * @hidden
- */
-var isVisible = function (element) {
-    var rect = element.getBoundingClientRect();
-    return !!(rect.width && rect.height) && window.getComputedStyle(element).visibility !== 'hidden';
-};
-/**
- * @hidden
- */
-var isFocusable = function (element, checkVisibility) {
-    if (checkVisibility === void 0) { checkVisibility = true; }
-    if (element.tagName) {
-        var tagName = element.tagName.toLowerCase();
-        var tabIndex = element.getAttribute('tabIndex');
-        var validTabIndex = tabIndex !== null && !isNaN(tabIndex) && tabIndex > -1;
-        var focusable = false;
-        if (focusableRegex.test(tagName)) {
-            focusable = !element.disabled;
-        }
-        else {
-            focusable = validTabIndex;
-        }
-        return focusable && (!checkVisibility || isVisible(element));
-    }
-    return false;
-};
-/**
- * @hidden
- */
-var setHTMLAttributes = function (attributes, renderer, element) {
-    for (var attribute in attributes) {
-        if (attribute) {
-            renderer.setAttribute(element, attribute, attributes[attribute]);
-        }
-    }
-};
-/**
- * Receives CSS class declarations either as an object, string or array and returns an array of the class names.
- *
- * @hidden
- */
-var parseCSSClassNames = function (value) {
-    if (isObject(value)) {
-        return parseObjectClassNames(value);
-    }
-    if (isString(value)) {
-        return parseStringClassNames(value);
-    }
-    if (Array.isArray(value)) {
-        return parseArrayClassNames(value);
-    }
-};
-var parseObjectClassNames = function (value) {
-    var classes = [];
-    Object.keys(value).forEach(function (className) {
-        var currentClassName = splitStringToArray(className);
-        if (value[className] && currentClassName[0]) {
-            classes.push.apply(classes, currentClassName);
-        }
-    });
-    return classes;
-};
-var parseStringClassNames = function (value) {
-    var classes = [];
-    var classesArray = splitStringToArray(value);
-    classesArray.forEach(function (className) {
-        classes.push(className);
-    });
-    return classes;
-};
-var parseArrayClassNames = function (value) {
-    var classes = [];
-    value.forEach(function (className) {
-        var current = splitStringToArray(className);
-        if (current[0]) {
-            classes.push.apply(classes, current);
-        }
-    });
-    return classes;
-};
-/**
- * @hidden
- */
-var focusableSelector = [
-    'a[href]',
-    'area[href]',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'button:not([disabled])',
-    'iframe',
-    'object',
-    'embed',
-    '*[tabindex]',
-    '*[contenteditable]'
-].join(',');
-/**
- * @hidden
- */
-var preventDefault = function (_a) {
-    var event = _a.originalEvent;
-    event.stopPropagation();
-    event.preventDefault();
-};
-/**
- * @hidden
- */
-var RESIZE_DIRECTIONS = ['n', 'e', 's', 'w', 'se', 'sw', 'ne', 'nw'];
-/**
- * @hidden
- */
-var OFFSET_STYLES = ['top', 'left', 'width', 'height'];
-/**
- * @hidden
- */
-var isString = function (value) { return value instanceof String || typeof value === 'string'; };
-/**
- * @hidden
- */
-var isObject = function (value) { return isPresent(value) && !Array.isArray(value) && typeof value === 'object'; };
-/**
- * @hidden
- */
-var isNumber = function (value) { return typeof value === 'number' && isFinite(value); };
-/**
- * @hidden
- */
-var createValueWithUnit = function (value) { return value + (isNumber(value) ? 'px' : ''); };
-/**
- * @hidden
- */
-var splitStringToArray = function (value) { return value.trim().replace(/\s+/g, " ").split(' '); };
-
 /**
  * The settings for the Dialog actions when the Dialog is opened through `DialogService`
  * ([see example]({% slug api_dialog_dialogservice %}#toc-open)).
@@ -520,10 +537,10 @@ var DialogComponent = /** @class */ (function () {
             var el = this.wrapper.nativeElement;
             var dir = el.getAttribute('dir');
             var tIndex = el.getAttribute('tabindex');
-            if (this.direction !== dir) {
+            if (this.direction !== dir && dir) {
                 this.direction = dir;
             }
-            if (this.tabIndex !== tIndex) {
+            if (this.tabIndex !== tIndex && tIndex) {
                 this.tabIndex = tIndex;
             }
             this._htmlAttributes = attributes;
@@ -666,7 +683,7 @@ var DialogComponent = /** @class */ (function () {
      */
     DialogComponent.prototype.handleInitialFocus = function () {
         var wrapper = this.wrapper.nativeElement;
-        var primaryButton = wrapper.querySelector('.k-primary');
+        var primaryButton = this.findPrimary(wrapper);
         if (this.autoFocusedElement) {
             var initiallyFocusedElement = wrapper.querySelector(this.autoFocusedElement);
             if (initiallyFocusedElement) {
@@ -680,6 +697,13 @@ var DialogComponent = /** @class */ (function () {
             wrapper.focus();
         }
     };
+    /**
+     * @hidden
+     */
+    DialogComponent.prototype.findPrimary = function (wrapper) {
+        var actionBtns = wrapper.querySelectorAll('.k-actions .k-button');
+        return findPrimaryButton(actionBtns);
+    };
     /**
      * @hidden
      */
@@ -1015,7 +1039,7 @@ var DialogService = /** @class */ (function () {
      *           content: "Are you sure?",
      *           actions: [
      *             { text: "No" },
-     *             { text: "Yes", primary: true }
+     *             { text: "Yes", themeColor: 'primary' }
      *           ]
      *         });
      *
@@ -2287,14 +2311,14 @@ var WindowComponent = /** @class */ (function () {
      * @hidden
      */
     WindowComponent.prototype.onComponentFocus = function () {
-        this.renderer.addClass(this.el.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.el.nativeElement, 'k-focus');
         this.setNextZIndex();
     };
     /**
      * @hidden
      */
     WindowComponent.prototype.onComponentBlur = function () {
-        this.renderer.removeClass(this.el.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.el.nativeElement, 'k-focus');
     };
     WindowComponent.prototype.subscribeEvents = function () {
         var _this = this;
@@ -2644,7 +2668,7 @@ var WindowMaximizeActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'window-maximize';
         return _this;
     }
@@ -2710,7 +2734,7 @@ var WindowMinimizeActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'window-minimize';
         return _this;
     }
@@ -2776,7 +2800,7 @@ var WindowCloseActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'close';
         return _this;
     }
@@ -2830,7 +2854,7 @@ var WindowRestoreActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'window-restore';
         return _this;
     }

package/dist/npm/common/util.js

@@ -204,3 +204,16 @@ exports.createValueWithUnit = function (value) { return value + (exports.isNumbe
  * @hidden
  */
 exports.splitStringToArray = function (value) { return value.trim().replace(/\s+/g, " ").split(' '); };
+/**
+ * @hidden
+ */
+exports.findPrimaryButton = function (buttons) {
+    for (var i = buttons.length - 1; i >= 0; i--) {
+        var classList = buttons[i].classList;
+        for (var j = 0; j < classList.length; j++) {
+            if (classList[j].endsWith('-primary')) {
+                return buttons[i];
+            }
+        }
+    }
+};

package/dist/npm/dialog/dialog-actions.component.js

@@ -6,6 +6,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
+var util_1 = require("../common/util");
 /**
  * Specifies the action buttons of the Dialog
  * ([see example]({% slug actionbuttons_dialog %})).
@@ -46,9 +47,13 @@ var DialogActionsComponent = /** @class */ (function () {
      * @hidden
      */
     DialogActionsComponent.prototype.buttonClass = function (action) {
-        var classes = ['k-button'];
-        if (action.primary) {
-            classes.push('k-primary');
+        var classes = ['k-button k-button-md k-rounded-md'];
+        var fillMode = action.fillMode ? action.fillMode : 'solid';
+        var themeColor = action.themeColor ? action.themeColor : 'base';
+        var cssClasses = action.cssClass ? util_1.parseCSSClassNames(action.cssClass) : [];
+        classes.push("k-button-" + fillMode + " k-button-" + fillMode + "-" + themeColor);
+        if (cssClasses.length > 0) {
+            classes = classes.concat(cssClasses);
         }
         return classes.join(' ');
     };

package/dist/npm/dialog/dialog-titlebar.component.js

@@ -86,7 +86,7 @@ var DialogTitleBarComponent = /** @class */ (function () {
                     useValue: 'kendo.dialog'
                 }
             ],
-            template: "\n         <ng-container\n            kendoDialogTitleBarLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n            <div class=\"k-window-title k-dialog-title\">\n                <ng-content></ng-content>\n            </div>\n\n            <div class=\"k-window-actions k-dialog-actions\">\n                <a\n                    href=\"#\"\n                    role=\"button\"\n                    [attr.title]=\"closeButtonTitle\"\n                    [attr.aria-label]=\"closeButtonTitle\"\n                    class=\"k-button k-flat k-button-icon k-window-action k-dialog-action k-dialog-close\"\n                    (click)=\"onCloseClick($event)\"\n                >\n                    <span class=\"k-icon k-i-x\"></span>\n                </a>\n            </div>\n        </ng-container>\n    "
+            template: "\n         <ng-container\n            kendoDialogTitleBarLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n            <div class=\"k-window-title k-dialog-title\">\n                <ng-content></ng-content>\n            </div>\n\n            <div class=\"k-window-actions k-dialog-actions\">\n                <button\n                    role=\"button\"\n                    [attr.title]=\"closeButtonTitle\"\n                    [attr.aria-label]=\"closeButtonTitle\"\n                    class=\"k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-window-action k-dialog-action k-dialog-close\"\n                    (click)=\"onCloseClick($event)\"\n                >\n                    <span class=\"k-button-icon k-icon k-i-x\"></span>\n                </button>\n            </div>\n        </ng-container>\n    "
         }),
         tslib_1.__param(2, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [core_1.NgZone, core_1.ElementRef, kendo_angular_l10n_1.LocalizationService])

package/dist/npm/dialog/dialog.component.js

@@ -75,10 +75,10 @@ var DialogComponent = /** @class */ (function () {
             var el = this.wrapper.nativeElement;
             var dir = el.getAttribute('dir');
             var tIndex = el.getAttribute('tabindex');
-            if (this.direction !== dir) {
+            if (this.direction !== dir && dir) {
                 this.direction = dir;
             }
-            if (this.tabIndex !== tIndex) {
+            if (this.tabIndex !== tIndex && tIndex) {
                 this.tabIndex = tIndex;
             }
             this._htmlAttributes = attributes;
@@ -221,7 +221,7 @@ var DialogComponent = /** @class */ (function () {
      */
     DialogComponent.prototype.handleInitialFocus = function () {
         var wrapper = this.wrapper.nativeElement;
-        var primaryButton = wrapper.querySelector('.k-primary');
+        var primaryButton = this.findPrimary(wrapper);
         if (this.autoFocusedElement) {
             var initiallyFocusedElement = wrapper.querySelector(this.autoFocusedElement);
             if (initiallyFocusedElement) {
@@ -235,6 +235,13 @@ var DialogComponent = /** @class */ (function () {
             wrapper.focus();
         }
     };
+    /**
+     * @hidden
+     */
+    DialogComponent.prototype.findPrimary = function (wrapper) {
+        var actionBtns = wrapper.querySelectorAll('.k-actions .k-button');
+        return util_1.findPrimaryButton(actionBtns);
+    };
     /**
      * @hidden
      */

package/dist/npm/dialog/dialog.service.js

@@ -71,7 +71,7 @@ var DialogService = /** @class */ (function () {
      *           content: "Are you sure?",
      *           actions: [
      *             { text: "No" },
-     *             { text: "Yes", primary: true }
+     *             { text: "Yes", themeColor: 'primary' }
      *           ]
      *         });
      *

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576271,
+    publishDate: 1643116783,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/window/actions/window-close-action.directive.js

@@ -15,7 +15,7 @@ var WindowCloseActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'close';
         return _this;
     }

package/dist/npm/window/actions/window-maximize-action.directive.js

@@ -15,7 +15,7 @@ var WindowMaximizeActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'window-maximize';
         return _this;
     }

package/dist/npm/window/actions/window-minimize-action.directive.js

@@ -15,7 +15,7 @@ var WindowMinimizeActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'window-minimize';
         return _this;
     }

package/dist/npm/window/actions/window-restore-action.directive.js

@@ -15,7 +15,7 @@ var WindowRestoreActionDirective = /** @class */ (function (_super) {
         var _this = _super.call(this, el, renderer, null, localization, ngZone) || this;
         _this.buttonType = 'button';
         _this.window = _service;
-        _this.look = 'bare';
+        _this.fillMode = 'flat';
         _this.icon = 'window-restore';
         return _this;
     }