@progress/kendo-angular-buttons 8.2.2 → 11.0.0-develop.80

package/{esm2015/button/button.directive.js → esm2020/button/button.component.mjs}

@@ -1,19 +1,22 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, Optional } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Renderer2, Output, Optional, NgZone, isDevMode } from '@angular/core';
+import { KendoButtonService } from './button.service';
 import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
-import { take } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { getStylingClasses, getThemeColorClasses, isFirefox } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "./button.service";
 import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@angular/common";
 const SPAN_TAG_NAME = 'SPAN';
+const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_THEME_COLOR = 'base';
@@ -21,7 +24,7 @@ const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  */
-export class ButtonDirective {
+export class ButtonComponent {
     constructor(element, renderer, service, localization, ngZone) {
         this.renderer = renderer;
         this.service = service;
@@ -46,8 +49,6 @@ export class ButtonDirective {
          */
         this.click = new EventEmitter();
         this.isDisabled = false;
-        this.isIcon = false;
-        this.isIconClass = false;
         this._size = DEFAULT_SIZE;
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
@@ -91,51 +92,31 @@ export class ButtonDirective {
     get tabIndex() {
         return this.element.tabIndex;
     }
-    /**
-     * Defines the name for an existing icon in a Kendo UI theme.
-     * The icon is rendered inside the Button by a `span.k-icon` element.
-     */
-    set icon(icon) {
-        if (icon) {
-            this.iconSetter(icon, () => {
-                this.isIcon = true;
-                const classes = 'k-button-icon k-icon k-i-' + icon;
-                this.addIcon(classes);
-            });
-        }
-        else {
-            this.isIcon = false;
-            this.updateIconNode();
-        }
-    }
     /**
      * Defines a CSS class—or multiple classes separated by spaces—
      * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
      */
-    set iconClass(iconClassName) {
-        if (iconClassName) {
-            this.iconSetter(iconClassName, () => {
-                this.isIconClass = true;
-                const classes = 'k-button-icon ' + iconClassName;
-                this.addIcon(classes);
-            });
-        }
-        else {
-            this.isIconClass = false;
-            this.updateIconNode();
+    set iconClass(value) {
+        if (isDevMode() && value && (this.icon || this.svgIcon)) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
+        this._iconClass = value;
+    }
+    get iconClass() {
+        return this._iconClass;
     }
     /**
-     * Defines a URL which is used for an `img` element inside the Button.
-     * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
+     * Defines the name for an existing font icon in the Kendo UI theme.
      */
-    set imageUrl(imageUrl) {
-        if (imageUrl) {
-            this.iconSetter(imageUrl, this.addImgIcon.bind(this));
-        }
-        else {
-            this.removeImageNode();
+    set icon(name) {
+        if (isDevMode() && name && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
+        this._icon = name;
+    }
+    ;
+    get icon() {
+        return this._icon;
     }
     /**
      * If set to `true`, it disables the Button.
@@ -235,6 +216,18 @@ export class ButtonDirective {
     get themeColor() {
         return this._themeColor;
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     set isFocused(isFocused) {
         this.toggleClass('k-focus', isFocused);
         this._focused = isFocused;
@@ -248,6 +241,10 @@ export class ButtonDirective {
     get isToggleable() {
         return this.toggleable;
     }
+    get iconButtonClass() {
+        const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
+        return hasIcon && !this.hasText;
+    }
     get roleSetter() {
         return this.role;
     }
@@ -292,8 +289,8 @@ export class ButtonDirective {
         }
     }
     ngOnInit() {
-        const isSpan = this.element.tagName === SPAN_TAG_NAME;
-        this.addTextSpan();
+        const elementTagName = this.element.tagName;
+        const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
         }
@@ -304,7 +301,7 @@ export class ButtonDirective {
             this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
             this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
                 const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
-                if (isSpan && isSpaceOrEnter) {
+                if (isSpanOrKendoButton && isSpaceOrEnter) {
                     this.click.emit(event);
                     this._onButtonClick();
                 }
@@ -322,15 +319,14 @@ export class ButtonDirective {
             this.handleClasses(this[input], input);
         });
     }
-    ngAfterViewChecked() {
-        this.setIconTextClasses();
-    }
     ngOnDestroy() {
-        this.imageNode = null;
-        this.iconNode = null;
-        this.iconSpanNode = null;
         this.subs.unsubscribe();
-        clearTimeout(this.deferTimeout);
+    }
+    /**
+     * @hidden
+     */
+    get hasText() {
+        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
     }
     /**
      * Focuses the Button component.
@@ -389,95 +385,6 @@ export class ButtonDirective {
             this.removeAttribute('aria-pressed');
         }
     }
-    hasText() {
-        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
-    }
-    addImgIcon(imageUrl) {
-        let renderer = this.renderer;
-        if (!this.iconSpanNode) {
-            this.iconSpanNode = renderer.createElement('span');
-            renderer.setProperty(this.iconSpanNode, 'className', 'k-button-icon k-icon');
-        }
-        if (this.imageNode) {
-            renderer.setProperty(this.imageNode, 'src', imageUrl);
-        }
-        else if (isDocumentAvailable()) {
-            this.imageNode = renderer.createElement('img');
-            renderer.setProperty(this.imageNode, 'src', imageUrl);
-            renderer.setProperty(this.imageNode, 'className', 'k-image');
-            renderer.setAttribute(this.imageNode, 'role', 'presentation');
-        }
-        this.iconSpanNode.appendChild(this.imageNode);
-        this.prependChild(this.iconSpanNode);
-    }
-    addIcon(classNames) {
-        let renderer = this.renderer;
-        if (this.iconNode) {
-            renderer.setProperty(this.iconNode, 'className', classNames);
-        }
-        else if (isDocumentAvailable()) {
-            this.iconNode = renderer.createElement('span');
-            renderer.setProperty(this.iconNode, 'className', classNames);
-            renderer.setAttribute(this.iconNode, 'role', 'presentation');
-            this.prependChild(this.iconNode);
-        }
-    }
-    addTextSpan() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            if (isDocumentAvailable() && this.hasText()) {
-                const span = this.renderer.createElement('span');
-                this.renderer.addClass(span, 'k-button-text');
-                const buttonContentNodes = Array.from(this.element.childNodes);
-                buttonContentNodes.forEach(node => this.renderer.appendChild(span, node));
-                this.renderer.appendChild(this.element, span);
-            }
-        });
-    }
-    prependChild(node) {
-        this.defer(() => {
-            if (this.renderer && node !== this.element.firstChild) {
-                this.renderer.insertBefore(this.element, node, this.element.firstChild);
-            }
-        });
-    }
-    defer(callback) {
-        this.ngZone.runOutsideAngular(() => {
-            this.deferTimeout = setTimeout(callback, 0);
-        });
-    }
-    iconSetter(icon, insertIcon) {
-        if (icon) {
-            insertIcon(icon);
-        }
-        this.setIconTextClasses();
-    }
-    removeImageNode() {
-        if (this.imageNode && this.renderer.parentNode(this.imageNode)) {
-            this.renderer.removeChild(this.element, this.imageNode);
-            this.renderer.removeChild(this.element, this.iconSpanNode);
-            this.imageNode = null;
-            this.iconSpanNode = null;
-        }
-    }
-    removeIconNode() {
-        if (this.iconNode && this.renderer.parentNode(this.iconNode)) {
-            this.renderer.removeChild(this.element, this.iconNode);
-            this.iconNode = null;
-        }
-        if (this.iconSpanNode) {
-            this.renderer.removeChild(this.element, this.iconSpanNode);
-            this.iconSpanNode = null;
-        }
-    }
-    updateIconNode() {
-        if (!this.isIcon && !this.isIconClass) {
-            this.removeIconNode();
-        }
-    }
-    setIconTextClasses() {
-        const hasIcon = this.isIcon || this.isIconClass || this.imageNode;
-        this.toggleClass('k-icon-button', hasIcon && !this.hasText());
-    }
     toggleClass(className, add) {
         if (add) {
             this.renderer.addClass(this.element, className);
@@ -522,16 +429,27 @@ export class ButtonDirective {
         }
     }
 }
-ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.KendoButtonService, optional: true }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.KendoButtonService, optional: true }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.button'
         }
-    ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, decorators: [{
-            type: Directive,
+    ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-button-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+            <img [src]="imageUrl" class="k-image" role="presentation" />
+        </span>
+        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
             args: [{
                     exportAs: 'kendoButton',
                     providers: [
@@ -541,7 +459,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             useValue: 'kendo.button'
                         }
                     ],
-                    selector: 'button[kendoButton], span[kendoButton]' // eslint-disable-line
+                    selector: 'button[kendoButton], span[kendoButton], kendo-button',
+                    template: `
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-button-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+            <img [src]="imageUrl" class="k-image" role="presentation" />
+        </span>
+        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.KendoButtonService, decorators: [{
                     type: Optional
@@ -553,11 +483,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
-            }], icon: [{
+            }], imageUrl: [{
                 type: Input
             }], iconClass: [{
                 type: Input
-            }], imageUrl: [{
+            }], icon: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -569,6 +499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], role: [{
                 type: Input
             }], selectedChange: [{
@@ -581,6 +513,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isToggleable: [{
                 type: HostBinding,
                 args: ['class.k-toggle-button']
+            }], iconButtonClass: [{
+                type: HostBinding,
+                args: ['class.k-icon-button']
             }], roleSetter: [{
                 type: HostBinding,
                 args: ['attr.role']

package/{esm2015/button/button.module.js → esm2020/button/button.module.mjs}

@@ -1,9 +1,10 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
-import { ButtonDirective } from './button.directive';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { ButtonComponent } from './button.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
@@ -38,13 +39,14 @@ import * as i0 from "@angular/core";
  */
 export class ButtonModule {
 }
-ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective], exports: [ButtonDirective] });
-ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, decorators: [{
+ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [IconsModule], exports: [ButtonComponent] });
+ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, imports: [[IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ButtonDirective],
-                    exports: [ButtonDirective]
+                    declarations: [ButtonComponent],
+                    imports: [IconsModule],
+                    exports: [ButtonComponent]
                 }]
         }] });

package/{esm2015/button/button.service.js → esm2020/button/button.service.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
@@ -17,8 +17,8 @@ export class KendoButtonService {
         this.buttonClicked.next(button);
     }
 }
-KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService, decorators: [{
+KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KendoButtonService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KendoButtonService, decorators: [{
             type: Injectable
         }] });

package/{esm2015/button/selection-settings.js → esm2020/button/selection-settings.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export {};

package/{esm2015/buttongroup/buttongroup.component.js → esm2020/buttongroup/buttongroup.component.mjs}

@@ -1,9 +1,9 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ButtonDirective } from '../button/button.directive';
-import { Component, EventEmitter, Output, Input, ContentChildren, HostBinding, isDevMode } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
@@ -133,7 +133,7 @@ export class ButtonGroupComponent {
             });
         }
         if (isChanged('navigable', changes)) {
-            if (changes.navigable.currentValue) {
+            if (changes['navigable'].currentValue) {
                 this.setButtonsTabIndex();
                 this.currentTabIndex = 0;
             }
@@ -162,7 +162,7 @@ export class ButtonGroupComponent {
         this.verifySettings();
     }
     navigateFocus(event) {
-        let focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
         const firstIndex = 0;
         const lastIndex = this.buttons.length - 1;
         const eventArgs = new PreventableEvent();
@@ -239,18 +239,18 @@ export class ButtonGroupComponent {
             .subscribe(handler));
     }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.buttongroup'
         }
-    ], queries: [{ propertyName: "buttons", predicate: ButtonDirective }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kendoButton]"></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoButtonGroup',
@@ -284,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], buttons: [{
                 type: ContentChildren,
-                args: [ButtonDirective]
+                args: [ButtonComponent]
             }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-button-group']

package/{esm2015/buttongroup/buttongroup.module.js → esm2020/buttongroup/buttongroup.module.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
@@ -17,10 +17,10 @@ import * as i0 from "@angular/core";
  */
 export class ButtonGroupModule {
 }
-ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonGroupComponent] });
-ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, imports: [[CommonModule, ButtonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, decorators: [{
+ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonGroupComponent] });
+ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, imports: [[CommonModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ButtonGroupComponent],

package/{esm2015/buttons.module.js → esm2020/buttons.module.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
@@ -43,10 +43,10 @@ import * as i0 from "@angular/core";
  */
 export class ButtonsModule {
 }
-ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
-ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, imports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, decorators: [{
+ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
+ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, imports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule]

package/{esm2015/chip/chip-content-click-event-args.interface.js → esm2020/chip/chip-content-click-event-args.interface.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export {};

package/{esm2015/chip/chip-list-remove-event-args.interface.js → esm2020/chip/chip-list-remove-event-args.interface.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export {};

package/{esm2015/chip/chip-list.component.js → esm2020/chip/chip-list.component.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, HostBinding, ContentChildren, EventEmitter, Output, HostListener } from '@angular/core';
+import { Component, Input, HostBinding, ContentChildren, QueryList, EventEmitter, Output, HostListener, Renderer2, ElementRef, NgZone } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { ChipComponent } from './chip.component';
@@ -176,8 +176,8 @@ export class ChipListComponent {
         }
     }
 }
-ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
+ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -186,7 +186,7 @@ ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
     ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chiplist, kendo-chip-list',

package/{esm2015/chip/chip-remove-event-args.interface.js → esm2020/chip/chip-remove-event-args.interface.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export {};