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

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

@@ -1,17 +1,23 @@
 /**-----------------------------------------------------------------------------------------
-* 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, HostBinding, Input, Output, EventEmitter, isDevMode } from '@angular/core';
+import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { closest, getStylingClasses, getThemeColorClasses, isPresent } from '../util';
+import { closest, getStylingClasses, getThemeColorClasses } from '../util';
+import { xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_THEME_COLOR = 'base';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
@@ -47,6 +53,10 @@ export class ChipComponent {
         this.contentClick = new EventEmitter();
         this.tabIndex = 0;
         this.hostClass = true;
+        /**
+         * @hidden
+         */
+        this.defaultRemoveIcon = xCircleIcon;
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -67,10 +77,9 @@ export class ChipComponent {
      * * `none`
      */
     set size(size) {
-        if (isPresent(size)) {
-            this._size = size;
-        }
-        this.handleClasses(this._size, 'size');
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -87,10 +96,9 @@ export class ChipComponent {
      * * `none`
      */
     set rounded(rounded) {
-        if (isPresent(rounded)) {
-            this._rounded = rounded;
-        }
-        this.handleClasses(this._rounded, 'rounded');
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -105,10 +113,9 @@ export class ChipComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        if (isPresent(fillMode)) {
-            this._fillMode = fillMode;
-        }
-        this.handleClasses(this._fillMode, 'fillMode');
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -127,16 +134,15 @@ export class ChipComponent {
      * * `none`
      */
     set themeColor(themeColor) {
-        if (isPresent(themeColor)) {
-            this._themeColor = themeColor;
-        }
-        this.handleThemeColor(this._themeColor);
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+        this.handleThemeColor(newThemeColor);
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
     }
     get hasIconClass() {
-        return this.icon || this.iconClass || this.avatarClass ? true : false;
+        return Boolean(this.icon || this.iconClass || this.avatarClass);
     }
     get disabledClass() {
         return this.disabled;
@@ -183,23 +189,20 @@ export class ChipComponent {
      */
     get customIconClass() {
         this.verifyIconSettings([this.icon, this.avatarClass]);
-        return `${this.iconClass}`;
+        return this.iconClass;
     }
     /**
      * @hidden
      */
     get chipAvatarClass() {
         this.verifyIconSettings([this.icon, this.iconClass]);
-        return `${this.avatarClass}`;
+        return this.avatarClass;
     }
     /**
      * @hidden
      */
     get removeIconClass() {
-        if (this.removeIcon) {
-            return `${this.removeIcon}`;
-        }
-        return `k-i-x-circle`;
+        return this.removeIcon ? this.removeIcon : 'k-i-x-circle';
     }
     /**
      * Focuses the Chip component.
@@ -298,32 +301,28 @@ export class ChipComponent {
         }
     }
 }
-ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.chip'
         }
     ], usesOnChanges: true, ngImport: i0, template: `
-        <span
-            *ngIf="icon"
-            class="k-chip-icon k-icon"
-            [ngClass]="kendoIconClass"
-        >
-        </span>
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-chip-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
 
-        <span
+        <kendo-icon-wrapper
             *ngIf="iconClass"
-            class="k-chip-icon"
-            [ngClass]="customIconClass"
-        >
-        </span>
+            innerCssClass="k-chip-icon"
+            [customFontClass]="customIconClass"></kendo-icon-wrapper>
 
         <span
             *ngIf="avatarClass"
-            class="k-chip-avatar k-avatar k-rounded-full"
-        >
+            class="k-chip-avatar k-avatar k-rounded-full">
             <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
         </span>
 
@@ -337,39 +336,34 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <span class="k-chip-actions">
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
-                (click)="onRemoveClick($event)"
-                >
-                <span
-                    class="k-icon"
-                    [ngClass]="removeIconClass"
-                >
-                </span>
+                (click)="onRemoveClick($event)">
+                <kendo-icon-wrapper
+                    name="x-circle"
+                    [svgIcon]="defaultRemoveIcon || removeSvgIcon"
+                    [customFontClass]="removeIcon"></kendo-icon-wrapper>
+
             </span>
         </span>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chip',
                     template: `
-        <span
-            *ngIf="icon"
-            class="k-chip-icon k-icon"
-            [ngClass]="kendoIconClass"
-        >
-        </span>
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-chip-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
 
-        <span
+        <kendo-icon-wrapper
             *ngIf="iconClass"
-            class="k-chip-icon"
-            [ngClass]="customIconClass"
-        >
-        </span>
+            innerCssClass="k-chip-icon"
+            [customFontClass]="customIconClass"></kendo-icon-wrapper>
 
         <span
             *ngIf="avatarClass"
-            class="k-chip-avatar k-avatar k-rounded-full"
-        >
+            class="k-chip-avatar k-avatar k-rounded-full">
             <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
         </span>
 
@@ -383,13 +377,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span class="k-chip-actions">
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
-                (click)="onRemoveClick($event)"
-                >
-                <span
-                    class="k-icon"
-                    [ngClass]="removeIconClass"
-                >
-                </span>
+                (click)="onRemoveClick($event)">
+                <kendo-icon-wrapper
+                    name="x-circle"
+                    [svgIcon]="defaultRemoveIcon || removeSvgIcon"
+                    [customFontClass]="removeIcon"></kendo-icon-wrapper>
+
             </span>
         </span>
     `,
@@ -405,6 +398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], avatarClass: [{
@@ -415,6 +410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], removeIcon: [{
                 type: Input
+            }], removeSvgIcon: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], size: [{

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

@@ -1,11 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { CommonModule } from '@angular/common';
 import { ChipComponent } from '../chip/chip.component';
 import { ChipListComponent } from './chip-list.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const exportedModules = [
     ChipComponent,
@@ -44,16 +45,16 @@ const declarations = [
  */
 export class ChipModule {
 }
-ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, declarations: [ChipComponent,
-        ChipListComponent], imports: [CommonModule], exports: [ChipComponent,
+ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, declarations: [ChipComponent,
+        ChipListComponent], imports: [CommonModule, IconsModule], exports: [ChipComponent,
         ChipListComponent] });
-ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, decorators: [{
+ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, imports: [[CommonModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/chip/models/selection.mjs

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

package/esm2020/common/models/fillmode.mjs

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

package/esm2020/common/models/rounded.mjs

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

package/esm2020/common/models/size.mjs

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

package/esm2020/common/models/styling-classes.mjs

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

package/esm2020/common/models/theme-color.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* 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/common/models.js → esm2020/common/models.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 * from './models/size';

package/esm2020/direction.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* 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/dropdownbutton/dropdownbutton.component.js → esm2020/dropdownbutton/dropdownbutton.component.mjs}

@@ -1,13 +1,15 @@
 /**-----------------------------------------------------------------------------------------
-* 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, ContentChild, ViewChild, ViewContainerRef, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
+import { Component, ContentChild, TemplateRef, ViewChild, ViewContainerRef, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { PopupService } from '@progress/kendo-angular-popup';
 import { isDocumentAvailable, guid, Keys } from '@progress/kendo-angular-common';
 import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
 import { closest } from '../util';
 import { ListButton } from '../listbutton/list-button';
+import { ListComponent } from '../listbutton/list.component';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
 import { NAVIGATION_CONFIG } from '../navigation/navigation-config';
@@ -18,8 +20,8 @@ import * as i2 from "../navigation/navigation.service";
 import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "@progress/kendo-angular-l10n";
 import * as i5 from "../listbutton/container.service";
-import * as i6 from "../listbutton/list.component";
-import * as i7 from "../button/button.directive";
+import * as i6 from "../button/button.component";
+import * as i7 from "../listbutton/list.component";
 import * as i8 from "@angular/common";
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
@@ -62,7 +64,7 @@ export class DropDownButtonComponent extends ListButton {
         super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
         this.containerService = containerService;
         /**
-         * Defines the name of an existing icon in a Kendo UI theme.
+         * Defines the name of an existing icon in the Kendo UI theme.
          */
         this.icon = '';
         /**
@@ -274,8 +276,8 @@ export class DropDownButtonComponent extends ListButton {
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
 }
-DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -285,7 +287,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useValue: 'kendo.dropdownbutton'
         },
         PopupContainerService
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <button kendoButton #button
             type="button"
             [id]="buttonId"
@@ -293,6 +295,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -327,8 +330,8 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i6.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i7.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+    `, isInline: true, components: [{ type: i6.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoDropDownButton',
@@ -352,6 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -390,6 +394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupContainerService }]; }, propDecorators: { icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
@@ -428,7 +434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [ButtonItemTemplateDirective]
             }], button: [{
                 type: ViewChild,
-                args: ['button']
+                args: ['button', { read: ElementRef }]
             }], buttonList: [{
                 type: ViewChild,
                 args: ['buttonList']

package/{esm2015/dropdownbutton/dropdownbutton.module.js → esm2020/dropdownbutton/dropdownbutton.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';
@@ -19,10 +19,10 @@ import * as i0 from "@angular/core";
  */
 export class DropDownButtonModule {
 }
-DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, declarations: [DropDownButtonComponent], imports: [CommonModule, PopupModule, ListModule, ButtonModule], exports: [DropDownButtonComponent, ListModule] });
-DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, imports: [[CommonModule, PopupModule, ListModule, ButtonModule], ListModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, decorators: [{
+DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, declarations: [DropDownButtonComponent], imports: [CommonModule, PopupModule, ListModule, ButtonModule], exports: [DropDownButtonComponent, ListModule] });
+DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, imports: [[CommonModule, PopupModule, ListModule, ButtonModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DropDownButtonComponent],

package/{esm2015/floatingactionbutton/animations/animations.js → esm2020/floatingactionbutton/animations/animations.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 { animate, query, sequence, stagger, style } from '@angular/animations';

package/{esm2015/floatingactionbutton/dial-item.component.js → esm2020/floatingactionbutton/dial-item.component.mjs}

@@ -1,11 +1,13 @@
 /**-----------------------------------------------------------------------------------------
-* 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, HostBinding, Input } from "@angular/core";
+import { Component, ElementRef, HostBinding, Input, Renderer2, TemplateRef } from "@angular/core";
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
@@ -22,7 +24,7 @@ export class DialItemComponent {
     }
     get title() {
         const label = this.item.label;
-        return label ? label : this.itemTitle;
+        return label || this.itemTitle;
     }
     get indexAttr() {
         return this.index;
@@ -58,8 +60,8 @@ export class DialItemComponent {
         return directions[dir][align];
     }
 }
-DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialItemComponent, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialItemComponent, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
         <ng-template *ngIf="dialItemTemplate"
             [ngTemplateOutlet]="dialItemTemplate"
             [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
@@ -68,10 +70,15 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
         <ng-container *ngIf="!dialItemTemplate">
             <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
-            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.icon || item.iconClass || item.svgIcon"
+                [name]="item.icon"
+                innerCssClass="k-fab-item-icon"
+                [customFontClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
         </ng-container>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -85,7 +92,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         <ng-container *ngIf="!dialItemTemplate">
             <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
-            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.icon || item.iconClass || item.svgIcon"
+                [name]="item.icon"
+                innerCssClass="k-fab-item-icon"
+                [customFontClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
         </ng-container>
     `
                 }]

package/{esm2015/floatingactionbutton/dial-list.component.js → esm2020/floatingactionbutton/dial-list.component.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 { Component, HostBinding, Input } from "@angular/core";
+import { ChangeDetectorRef, Component, HostBinding, Input, TemplateRef } from "@angular/core";
 import { Subscription } from 'rxjs';
+import { FocusService } from '../focusable/focus.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../focusable/focus.service";
 import * as i2 from "./dial-item.component";
@@ -33,8 +34,8 @@ export class DialListComponent {
         this.subscriptions.unsubscribe();
     }
 }
-DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialListComponent, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialListComponent, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
         <ng-container *ngFor='let item of dialItems; let idx = index'>
             <li
                 kendoButtonFocusable
@@ -50,7 +51,7 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </li>
         </ng-container>
     `, isInline: true, components: [{ type: i2.DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector