@progress/kendo-angular-buttons 8.0.0-next.202204010825 → 8.0.0-next.202204060705

package/button/button.directive.d.ts

@@ -66,7 +66,7 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size: ButtonSize);
     get size(): ButtonSize;
@@ -79,7 +79,7 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded: ButtonRounded);
     get rounded(): ButtonRounded;
@@ -93,7 +93,7 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * * `'outline'`
      * * `'clear'`
      * * `'link'`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode: ButtonFillMode);
     get fillMode(): ButtonFillMode;

package/chip/chip-list.component.d.ts

@@ -35,7 +35,7 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size: ChipListSize);
     get size(): ChipListSize;

package/chip/chip.component.d.ts

@@ -64,7 +64,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size: ChipSize);
     get size(): ChipSize;
@@ -77,7 +77,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded: ChipRounded);
     get rounded(): ChipRounded;
@@ -88,7 +88,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * The possible values are:
      * * `'solid'` (default)
      * * `'outline'`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode: ChipFillMode);
     get fillMode(): ChipFillMode;
@@ -103,7 +103,7 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * * `'success'`
      * * `'warning'`
      * * `'error'`
-     * * `null`
+     * * `none`
      */
     set themeColor(themeColor: ChipThemeColor);
     get themeColor(): ChipThemeColor;

package/common/models/fillmode.d.ts

@@ -5,8 +5,8 @@
 /**
  * Represents the possible fillMode options of the buttons.
  */
-export declare type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link' | 'clear';
+export declare type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link' | 'clear' | 'none';
 /**
  * Represents the possible fillMode options of the Chip.
  */
-export declare type ChipFillMode = 'solid' | 'outline';
+export declare type ChipFillMode = 'solid' | 'outline' | 'none';

package/common/models/rounded.d.ts

@@ -5,8 +5,8 @@
 /**
  * Represents the possible rounded options of the buttons.
  */
-export declare type ButtonRounded = 'small' | 'medium' | 'large' | 'full';
+export declare type ButtonRounded = 'small' | 'medium' | 'large' | 'full' | 'none';
 /**
  * Represents the possible rounded options of the Chip.
  */
-export declare type ChipRounded = 'small' | 'medium' | 'large' | 'full';
+export declare type ChipRounded = 'small' | 'medium' | 'large' | 'full' | 'none';

package/common/models/size.d.ts

@@ -6,11 +6,11 @@
  * Specifies the possible sizes of the buttons.
  *
  */
-export declare type ButtonSize = 'small' | 'medium' | 'large';
+export declare type ButtonSize = 'small' | 'medium' | 'large' | 'none';
 /**
  * Specifies the possible sizes of the Chip.
  */
-export declare type ChipSize = 'small' | 'medium' | 'large';
+export declare type ChipSize = 'small' | 'medium' | 'large' | 'none';
 /**
  * Specifies the possible gap between Chips in a ChipList.
  */

package/common/models/theme-color.d.ts

@@ -19,7 +19,7 @@
  * * `inverse`— Applies coloring based on the `inverse` theme color.
  *
  */
-export declare type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export declare type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'none';
 /**
  * Specifies the possible theme colors of the Chip.
  *
@@ -30,4 +30,4 @@ export declare type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'terti
  * * `warning`— Applies coloring based on the `warning` theme color.
  * * `error`— Applies coloring based on the `error` theme color.
  */
-export declare type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error';
+export declare type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error' | 'none';

package/dropdownbutton/dropdownbutton.component.d.ts

@@ -94,7 +94,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     size: ButtonSize;
     /**
@@ -106,7 +106,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * The possible values are:
      * * `'rectangle'` (default)
      * * `'square'`
-     * * `null`
+     * * `none`
      */
     shape: ButtonShape;
     /**
@@ -118,7 +118,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     rounded: ButtonRounded;
     /**
@@ -130,7 +130,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * * `flat`
      * * `outline`
      * * `link`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode: ButtonFillMode);
     get fillMode(): ButtonFillMode;
@@ -151,7 +151,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * * `dark`— Applies coloring based on the `dark` theme color.
      * * `light`— Applies coloring based on the `light` theme color.
      * * `inverse`— Applies coloring based on the `inverse` theme color.
-     * * `null` —Removes the default CSS class (no class would be rendered).
+     * * `none` —Removes the default CSS class (no class would be rendered).
      */
     themeColor: ButtonThemeColor;
     /**

package/esm2015/button/button.directive.js

@@ -154,11 +154,12 @@ export class ButtonDirective {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const sizeValue = size ? size : 'medium';
+        this.handleClasses(sizeValue, 'size');
+        this._size = sizeValue;
     }
     get size() {
         return this._size;
@@ -172,11 +173,12 @@ export class ButtonDirective {
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const roundedValue = rounded ? rounded : 'medium';
+        this.handleClasses(roundedValue, 'rounded');
+        this._rounded = roundedValue;
     }
     get rounded() {
         return this._rounded;
@@ -191,11 +193,12 @@ export class ButtonDirective {
      * * `'outline'`
      * * `'clear'`
      * * `'link'`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const fillModeValue = fillMode ? fillMode : 'solid';
+        this.handleClasses(fillModeValue, 'fillMode');
+        this._fillMode = fillModeValue;
     }
     get fillMode() {
         return this._fillMode;
@@ -219,8 +222,9 @@ export class ButtonDirective {
      * * `'inverse'`
      */
     set themeColor(themeColor) {
-        this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        const themeColorValue = themeColor ? themeColor : 'base';
+        this.handleThemeColor(themeColorValue);
+        this._themeColor = themeColorValue;
     }
     get themeColor() {
         return this._themeColor;
@@ -521,7 +525,7 @@ export class ButtonDirective {
         const addFillMode = fillMode ? fillMode : this.fillMode;
         const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== null && fillMode !== null) {
+        if (addFillMode !== 'none' && fillMode !== 'none') {
             if (themeColorClass.toAdd) {
                 this.renderer.addClass(elem, themeColorClass.toAdd);
             }

package/esm2015/chip/chip-list.component.js

@@ -46,11 +46,12 @@ export class ChipListComponent {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const sizeValue = size ? size : 'medium';
+        this.handleClasses(sizeValue, 'size');
+        this._size = sizeValue;
     }
     get size() {
         return this._size;

package/esm2015/chip/chip.component.js

@@ -62,11 +62,12 @@ export class ChipComponent {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const sizeValue = size ? size : 'medium';
+        this.handleClasses(sizeValue, 'size');
+        this._size = sizeValue;
     }
     get size() {
         return this._size;
@@ -80,11 +81,12 @@ export class ChipComponent {
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const roundedValue = rounded ? rounded : 'medium';
+        this.handleClasses(roundedValue, 'rounded');
+        this._rounded = roundedValue;
     }
     get rounded() {
         return this._rounded;
@@ -96,11 +98,12 @@ export class ChipComponent {
      * The possible values are:
      * * `'solid'` (default)
      * * `'outline'`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const fillModeValue = fillMode ? fillMode : 'solid';
+        this.handleClasses(fillModeValue, 'fillMode');
+        this._fillMode = fillModeValue;
     }
     get fillMode() {
         return this._fillMode;
@@ -116,11 +119,12 @@ export class ChipComponent {
      * * `'success'`
      * * `'warning'`
      * * `'error'`
-     * * `null`
+     * * `none`
      */
     set themeColor(themeColor) {
-        this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        const themeColorValue = themeColor ? themeColor : 'base';
+        this.handleThemeColor(themeColorValue);
+        this._themeColor = themeColorValue;
     }
     get themeColor() {
         return this._themeColor;
@@ -267,7 +271,7 @@ export class ChipComponent {
         const addFillMode = fillMode ? fillMode : this.fillMode;
         const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== null && fillMode !== null) {
+        if (addFillMode !== 'none' && fillMode !== 'none') {
             if (themeColorClass.toAdd) {
                 this.renderer.addClass(elem, themeColorClass.toAdd);
             }

package/esm2015/dropdownbutton/dropdownbutton.component.js

@@ -81,7 +81,7 @@ export class DropDownButtonComponent extends ListButton {
          * * `'small'`
          * * `'medium'` (default)
          * * `'large'`
-         * * `null`
+         * * `none`
          */
         this.size = 'medium';
         /**
@@ -93,7 +93,7 @@ export class DropDownButtonComponent extends ListButton {
          * The possible values are:
          * * `'rectangle'` (default)
          * * `'square'`
-         * * `null`
+         * * `none`
          */
         this.shape = 'rectangle';
         /**
@@ -105,7 +105,7 @@ export class DropDownButtonComponent extends ListButton {
          * * `'medium'` (default)
          * * `'large'`
          * * `'full'`
-         * * `null`
+         * * `none`
          */
         this.rounded = 'medium';
         /**
@@ -125,7 +125,7 @@ export class DropDownButtonComponent extends ListButton {
          * * `dark`— Applies coloring based on the `dark` theme color.
          * * `light`— Applies coloring based on the `light` theme color.
          * * `inverse`— Applies coloring based on the `inverse` theme color.
-         * * `null` —Removes the default CSS class (no class would be rendered).
+         * * `none` —Removes the default CSS class (no class would be rendered).
          */
         this.themeColor = 'base';
         /**
@@ -206,7 +206,7 @@ export class DropDownButtonComponent extends ListButton {
      * * `flat`
      * * `outline`
      * * `link`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;

package/esm2015/floatingactionbutton/dial-item.component.js

@@ -74,6 +74,7 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDialItem]',
                     template: `
         <ng-template *ngIf="dialItemTemplate"

package/esm2015/floatingactionbutton/dial-list.component.js

@@ -53,6 +53,7 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDialList]',
                     template: `
         <ng-container *ngFor='let item of dialItems; let idx = index'>

package/esm2015/floatingactionbutton/floatingactionbutton.component.js

@@ -166,8 +166,9 @@ export class FloatingActionButtonComponent {
      * * `'inverse'`— Applies coloring based on the `inverse` theme color.
      */
     set themeColor(themeColor) {
-        this.handleClasses(themeColor, 'themeColor');
-        this._themeColor = themeColor;
+        const themeColorValue = themeColor ? themeColor : 'primary';
+        this.handleClasses(themeColorValue, 'themeColor');
+        this._themeColor = themeColorValue;
     }
     get themeColor() {
         return this._themeColor;
@@ -182,8 +183,9 @@ export class FloatingActionButtonComponent {
      * * `'large'`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const sizeValue = size ? size : 'medium';
+        this.handleClasses(sizeValue, 'size');
+        this._size = sizeValue;
     }
     get size() {
         return this._size;
@@ -196,11 +198,12 @@ export class FloatingActionButtonComponent {
      * * `'medium'`
      * * `'large'`
      * * `'full'` (default)
-     * * `null`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const roundedValue = rounded ? rounded : 'medium';
+        this.handleClasses(roundedValue, 'rounded');
+        this._rounded = roundedValue;
     }
     get rounded() {
         return this._rounded;
@@ -313,7 +316,12 @@ export class FloatingActionButtonComponent {
         if (this.disabled || shouldOpen === this.isOpen) {
             return;
         }
-        shouldOpen ? setTimeout(() => this.openDial()) : this.closeDial();
+        if (shouldOpen) {
+            setTimeout(() => this.openDial());
+        }
+        else {
+            this.closeDial();
+        }
     }
     /**
      * @hidden
@@ -422,7 +430,7 @@ export class FloatingActionButtonComponent {
                 rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: inputValue ? `${FILLMODE_CLASS}-${inputValue}` : null,
+                themeColor: inputValue !== 'none' ? `${FILLMODE_CLASS}-${inputValue}` : '',
                 size: SIZE_CLASSES[inputValue],
                 rounded: ROUNDED_CLASSES[inputValue]
             };
@@ -489,11 +497,21 @@ export class FloatingActionButtonComponent {
             return;
         }
         const event = new PreventableEvent();
-        open ? this.open.emit(event) : this.close.emit(event);
+        if (open) {
+            this.open.emit(event);
+        }
+        else {
+            this.close.emit(event);
+        }
         if (event.isDefaultPrevented()) {
             return;
         }
-        open ? this.openDial() : this.closeDial();
+        if (open) {
+            this.openDial();
+        }
+        else {
+            this.closeDial();
+        }
     }
     openPopup() {
         if (this.isOpen) {

package/esm2015/package-metadata.js

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

package/esm2015/splitbutton/localization/messages.js

@@ -15,6 +15,7 @@ Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendo-splitbutton-messages-base'
                 }]
         }], propDecorators: { splitButtonLabel: [{

package/esm2015/splitbutton/splitbutton.component.js

@@ -109,7 +109,7 @@ export class SplitButtonComponent extends ListButton {
          * * `'small'`
          * * `'medium'` (default)
          * * `'large'`
-         * * `null`
+         * * `none`
          */
         this.size = 'medium';
         /**
@@ -229,11 +229,12 @@ export class SplitButtonComponent extends ListButton {
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const roundedValue = rounded ? rounded : 'medium';
+        this.handleClasses(roundedValue, 'rounded');
+        this._rounded = roundedValue;
     }
     get rounded() {
         return this._rounded;
@@ -249,7 +250,8 @@ export class SplitButtonComponent extends ListButton {
      * * `link`
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        const fillModeValue = fillMode ? fillMode : 'solid';
+        this._fillMode = fillMode === 'clear' ? 'flat' : fillModeValue;
     }
     get fillMode() {
         return this._fillMode;
@@ -431,6 +433,16 @@ export class SplitButtonComponent extends ListButton {
      * @hidden
      */
     ngOnChanges(changes) {
+        if (changes.size) {
+            if (!changes.size.currentValue) {
+                this.size = 'medium';
+            }
+        }
+        if (changes.themeColor) {
+            if (!changes.themeColor.currentValue) {
+                this.themeColor = 'base';
+            }
+        }
         if (changes.hasOwnProperty('text')) {
             this.updateButtonText();
         }

package/esm2015/util.js

@@ -67,17 +67,17 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
         case 'size':
             return {
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
         case 'rounded':
             return {
                 toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
             };
         case 'fillMode':
             return {
                 toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
             };
         default:
             break;
@@ -91,7 +91,7 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
 export const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
     return {
         toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
-        toAdd: newValue ? `k-${componentType}-${fillMode}-${newValue}` : null
+        toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
 /**