@progress/kendo-angular-dialog 5.2.3 → 6.0.0-dev.202201190911

package/dist/es2015/window/window.component.js

@@ -355,14 +355,14 @@ let WindowComponent = class WindowComponent {
      * @hidden
      */
     onComponentFocus() {
-        this.renderer.addClass(this.el.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.el.nativeElement, 'k-focus');
         this.setNextZIndex();
     }
     /**
      * @hidden
      */
     onComponentBlur() {
-        this.renderer.removeClass(this.el.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.el.nativeElement, 'k-focus');
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {

package/dist/fesm2015/index.js

@@ -5,15 +5,205 @@
 import { __decorate, __metadata, __param } from 'tslib';
 import { EventEmitter, TemplateRef, Input, Output, 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 { LocalizationService, L10N_PREFIX, RTL, MessageService, 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 { LocalizationService, L10N_PREFIX, RTL, MessageService, 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
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+const isTruthy = (value) => !!value;
+const toClassList = (classNames) => String(classNames).trim().split(' ');
+const 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
+ */
+const DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-dialog-buttongroup k-dialog-action';
+/**
+ * @hidden
+ */
+const DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-dialog-buttongroup';
+/**
+ * @hidden
+ */
+const WINDOW_CLASSES = 'k-window';
+/**
+ * @hidden
+ */
+const hasClasses = (element, classNames) => {
+    const namesList = toClassList(classNames);
+    return Boolean(toClassList(element.className).find((className) => namesList.indexOf(className) >= 0));
+};
+/**
+ * @hidden
+ */
+const isVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    return !!(rect.width && rect.height) && window.getComputedStyle(element).visibility !== 'hidden';
+};
+/**
+ * @hidden
+ */
+const isFocusable = (element, checkVisibility = true) => {
+    if (element.tagName) {
+        const tagName = element.tagName.toLowerCase();
+        const tabIndex = element.getAttribute('tabIndex');
+        const validTabIndex = tabIndex !== null && !isNaN(tabIndex) && tabIndex > -1;
+        let focusable = false;
+        if (focusableRegex.test(tagName)) {
+            focusable = !element.disabled;
+        }
+        else {
+            focusable = validTabIndex;
+        }
+        return focusable && (!checkVisibility || isVisible(element));
+    }
+    return false;
+};
+/**
+ * @hidden
+ */
+const setHTMLAttributes = (attributes, renderer, element) => {
+    for (const 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
+ */
+const parseCSSClassNames = (value) => {
+    if (isObject(value)) {
+        return parseObjectClassNames(value);
+    }
+    if (isString(value)) {
+        return parseStringClassNames(value);
+    }
+    if (Array.isArray(value)) {
+        return parseArrayClassNames(value);
+    }
+};
+const parseObjectClassNames = (value) => {
+    const classes = [];
+    Object.keys(value).forEach(className => {
+        const currentClassName = splitStringToArray(className);
+        if (value[className] && currentClassName[0]) {
+            classes.push(...currentClassName);
+        }
+    });
+    return classes;
+};
+const parseStringClassNames = (value) => {
+    const classes = [];
+    const classesArray = splitStringToArray(value);
+    classesArray.forEach(className => {
+        classes.push(className);
+    });
+    return classes;
+};
+const parseArrayClassNames = (value) => {
+    const classes = [];
+    value.forEach((className) => {
+        const current = splitStringToArray(className);
+        if (current[0]) {
+            classes.push(...current);
+        }
+    });
+    return classes;
+};
+/**
+ * @hidden
+ */
+const focusableSelector = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'iframe',
+    'object',
+    'embed',
+    '*[tabindex]',
+    '*[contenteditable]'
+].join(',');
+/**
+ * @hidden
+ */
+const preventDefault = ({ originalEvent: event }) => {
+    event.stopPropagation();
+    event.preventDefault();
+};
+/**
+ * @hidden
+ */
+const RESIZE_DIRECTIONS = ['n', 'e', 's', 'w', 'se', 'sw', 'ne', 'nw'];
+/**
+ * @hidden
+ */
+const OFFSET_STYLES = ['top', 'left', 'width', 'height'];
+/**
+ * @hidden
+ */
+const isString = (value) => value instanceof String || typeof value === 'string';
+/**
+ * @hidden
+ */
+const isObject = (value) => isPresent(value) && !Array.isArray(value) && typeof value === 'object';
+/**
+ * @hidden
+ */
+const isNumber = (value) => typeof value === 'number' && isFinite(value);
+/**
+ * @hidden
+ */
+const createValueWithUnit = (value) => value + (isNumber(value) ? 'px' : '');
+/**
+ * @hidden
+ */
+const splitStringToArray = (value) => value.trim().replace(/\s+/g, " ").split(' ');
+/**
+ * @hidden
+ */
+const findPrimaryButton = (buttons) => {
+    for (let i = buttons.length - 1; i >= 0; i--) {
+        const classList = buttons[i].classList;
+        for (let 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 %})).
@@ -50,9 +240,13 @@ let DialogActionsComponent = class DialogActionsComponent {
      * @hidden
      */
     buttonClass(action) {
-        const classes = ['k-button'];
-        if (action.primary) {
-            classes.push('k-primary');
+        let classes = ['k-button k-button-md k-rounded-md'];
+        const fillMode = action.fillMode ? action.fillMode : 'solid';
+        const themeColor = action.themeColor ? action.themeColor : 'base';
+        const 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(' ');
     }
@@ -232,16 +426,15 @@ DialogTitleBarComponent = __decorate([
             </div>
 
             <div class="k-window-actions k-dialog-actions">
-                <a
-                    href="#"
+                <button
                     role="button"
                     [attr.title]="closeButtonTitle"
                     [attr.aria-label]="closeButtonTitle"
-                    class="k-button k-flat k-button-icon k-window-action k-dialog-action k-dialog-close"
+                    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"
                     (click)="onCloseClick($event)"
                 >
-                    <span class="k-icon k-i-x"></span>
-                </a>
+                    <span class="k-button-icon k-icon k-i-x"></span>
+                </button>
             </div>
         </ng-container>
     `
@@ -257,188 +450,11 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576271,
+    publishDate: 1642583375,
     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
- */
-const isPresent = (value) => value !== null && value !== undefined;
-/**
- * @hidden
- */
-const isTruthy = (value) => !!value;
-const toClassList = (classNames) => String(classNames).trim().split(' ');
-const 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
- */
-const DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-dialog-buttongroup k-dialog-action';
-/**
- * @hidden
- */
-const DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-dialog-buttongroup';
-/**
- * @hidden
- */
-const WINDOW_CLASSES = 'k-window';
-/**
- * @hidden
- */
-const hasClasses = (element, classNames) => {
-    const namesList = toClassList(classNames);
-    return Boolean(toClassList(element.className).find((className) => namesList.indexOf(className) >= 0));
-};
-/**
- * @hidden
- */
-const isVisible = (element) => {
-    const rect = element.getBoundingClientRect();
-    return !!(rect.width && rect.height) && window.getComputedStyle(element).visibility !== 'hidden';
-};
-/**
- * @hidden
- */
-const isFocusable = (element, checkVisibility = true) => {
-    if (element.tagName) {
-        const tagName = element.tagName.toLowerCase();
-        const tabIndex = element.getAttribute('tabIndex');
-        const validTabIndex = tabIndex !== null && !isNaN(tabIndex) && tabIndex > -1;
-        let focusable = false;
-        if (focusableRegex.test(tagName)) {
-            focusable = !element.disabled;
-        }
-        else {
-            focusable = validTabIndex;
-        }
-        return focusable && (!checkVisibility || isVisible(element));
-    }
-    return false;
-};
-/**
- * @hidden
- */
-const setHTMLAttributes = (attributes, renderer, element) => {
-    for (const 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
- */
-const parseCSSClassNames = (value) => {
-    if (isObject(value)) {
-        return parseObjectClassNames(value);
-    }
-    if (isString(value)) {
-        return parseStringClassNames(value);
-    }
-    if (Array.isArray(value)) {
-        return parseArrayClassNames(value);
-    }
-};
-const parseObjectClassNames = (value) => {
-    const classes = [];
-    Object.keys(value).forEach(className => {
-        const currentClassName = splitStringToArray(className);
-        if (value[className] && currentClassName[0]) {
-            classes.push(...currentClassName);
-        }
-    });
-    return classes;
-};
-const parseStringClassNames = (value) => {
-    const classes = [];
-    const classesArray = splitStringToArray(value);
-    classesArray.forEach(className => {
-        classes.push(className);
-    });
-    return classes;
-};
-const parseArrayClassNames = (value) => {
-    const classes = [];
-    value.forEach((className) => {
-        const current = splitStringToArray(className);
-        if (current[0]) {
-            classes.push(...current);
-        }
-    });
-    return classes;
-};
-/**
- * @hidden
- */
-const focusableSelector = [
-    'a[href]',
-    'area[href]',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'button:not([disabled])',
-    'iframe',
-    'object',
-    'embed',
-    '*[tabindex]',
-    '*[contenteditable]'
-].join(',');
-/**
- * @hidden
- */
-const preventDefault = ({ originalEvent: event }) => {
-    event.stopPropagation();
-    event.preventDefault();
-};
-/**
- * @hidden
- */
-const RESIZE_DIRECTIONS = ['n', 'e', 's', 'w', 'se', 'sw', 'ne', 'nw'];
-/**
- * @hidden
- */
-const OFFSET_STYLES = ['top', 'left', 'width', 'height'];
-/**
- * @hidden
- */
-const isString = (value) => value instanceof String || typeof value === 'string';
-/**
- * @hidden
- */
-const isObject = (value) => isPresent(value) && !Array.isArray(value) && typeof value === 'object';
-/**
- * @hidden
- */
-const isNumber = (value) => typeof value === 'number' && isFinite(value);
-/**
- * @hidden
- */
-const createValueWithUnit = (value) => value + (isNumber(value) ? 'px' : '');
-/**
- * @hidden
- */
-const splitStringToArray = (value) => 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)).
@@ -649,7 +665,7 @@ let DialogComponent = class DialogComponent {
      */
     handleInitialFocus() {
         const wrapper = this.wrapper.nativeElement;
-        const primaryButton = wrapper.querySelector('.k-primary');
+        const primaryButton = this.findPrimary(wrapper);
         if (this.autoFocusedElement) {
             const initiallyFocusedElement = wrapper.querySelector(this.autoFocusedElement);
             if (initiallyFocusedElement) {
@@ -663,6 +679,13 @@ let DialogComponent = class DialogComponent {
             wrapper.focus();
         }
     }
+    /**
+     * @hidden
+     */
+    findPrimary(wrapper) {
+        const actionBtns = wrapper.querySelectorAll('.k-actions .k-button');
+        return findPrimaryButton(actionBtns);
+    }
     /**
      * @hidden
      */
@@ -998,7 +1021,7 @@ let DialogService = class DialogService {
      *           content: "Are you sure?",
      *           actions: [
      *             { text: "No" },
-     *             { text: "Yes", primary: true }
+     *             { text: "Yes", themeColor: 'primary' }
      *           ]
      *         });
      *
@@ -2139,14 +2162,14 @@ let WindowComponent = class WindowComponent {
      * @hidden
      */
     onComponentFocus() {
-        this.renderer.addClass(this.el.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.el.nativeElement, 'k-focus');
         this.setNextZIndex();
     }
     /**
      * @hidden
      */
     onComponentBlur() {
-        this.renderer.removeClass(this.el.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.el.nativeElement, 'k-focus');
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -2528,7 +2551,7 @@ let WindowMaximizeActionDirective = class WindowMaximizeActionDirective extends
         super(el, renderer, null, localization, ngZone);
         this.buttonType = 'button';
         this.window = _service;
-        this.look = 'bare';
+        this.fillMode = 'flat';
         this.icon = 'window-maximize';
     }
     /**
@@ -2587,7 +2610,7 @@ let WindowMinimizeActionDirective = class WindowMinimizeActionDirective extends
         super(el, renderer, null, localization, ngZone);
         this.buttonType = 'button';
         this.window = _service;
-        this.look = 'bare';
+        this.fillMode = 'flat';
         this.icon = 'window-minimize';
     }
     /**
@@ -2646,7 +2669,7 @@ let WindowCloseActionDirective = class WindowCloseActionDirective extends Button
         super(el, renderer, null, localization, ngZone);
         this.buttonType = 'button';
         this.window = _service;
-        this.look = 'bare';
+        this.fillMode = 'flat';
         this.icon = 'close';
     }
     /**
@@ -2697,7 +2720,7 @@ let WindowRestoreActionDirective = class WindowRestoreActionDirective extends Bu
         super(el, renderer, null, localization, ngZone);
         this.buttonType = 'button';
         this.window = _service;
-        this.look = 'bare';
+        this.fillMode = 'flat';
         this.icon = 'window-restore';
     }
     /**