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

package/fesm2015/kendo-angular-buttons.js

@@ -26,7 +26,7 @@ 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'
 };
@@ -95,17 +95,17 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
         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;
@@ -119,7 +119,7 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
 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}` : ''
     };
 };
 /**
@@ -294,11 +294,12 @@ 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;
@@ -312,11 +313,12 @@ 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;
@@ -331,11 +333,12 @@ 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;
@@ -359,8 +362,9 @@ 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;
@@ -661,7 +665,7 @@ 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);
             }
@@ -1826,6 +1830,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: [{
@@ -1947,7 +1952,7 @@ class SplitButtonComponent extends ListButton {
          * * `'small'`
          * * `'medium'` (default)
          * * `'large'`
-         * * `null`
+         * * `none`
          */
         this.size = 'medium';
         /**
@@ -2067,11 +2072,12 @@ 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;
@@ -2087,7 +2093,8 @@ 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;
@@ -2269,6 +2276,16 @@ 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();
         }
@@ -2782,7 +2799,7 @@ class DropDownButtonComponent extends ListButton {
          * * `'small'`
          * * `'medium'` (default)
          * * `'large'`
-         * * `null`
+         * * `none`
          */
         this.size = 'medium';
         /**
@@ -2794,7 +2811,7 @@ class DropDownButtonComponent extends ListButton {
          * The possible values are:
          * * `'rectangle'` (default)
          * * `'square'`
-         * * `null`
+         * * `none`
          */
         this.shape = 'rectangle';
         /**
@@ -2806,7 +2823,7 @@ class DropDownButtonComponent extends ListButton {
          * * `'medium'` (default)
          * * `'large'`
          * * `'full'`
-         * * `null`
+         * * `none`
          */
         this.rounded = 'medium';
         /**
@@ -2826,7 +2843,7 @@ 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';
         /**
@@ -2907,7 +2924,7 @@ class DropDownButtonComponent extends ListButton {
      * * `flat`
      * * `outline`
      * * `link`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
@@ -3441,11 +3458,12 @@ 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;
@@ -3459,11 +3477,12 @@ 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;
@@ -3475,11 +3494,12 @@ 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;
@@ -3495,11 +3515,12 @@ 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;
@@ -3646,7 +3667,7 @@ 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);
             }
@@ -3849,11 +3870,12 @@ 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;
@@ -4214,6 +4236,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"
@@ -4309,6 +4332,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'>
@@ -4482,8 +4506,9 @@ class FloatingActionButtonComponent {
      * * `'inverse'`&mdash; 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;
@@ -4498,8 +4523,9 @@ 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;
@@ -4512,11 +4538,12 @@ 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;
@@ -4629,7 +4656,12 @@ class FloatingActionButtonComponent {
         if (this.disabled || shouldOpen === this.isOpen) {
             return;
         }
-        shouldOpen ? setTimeout(() => this.openDial()) : this.closeDial();
+        if (shouldOpen) {
+            setTimeout(() => this.openDial());
+        }
+        else {
+            this.closeDial();
+        }
     }
     /**
      * @hidden
@@ -4738,7 +4770,7 @@ 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]
             };
@@ -4805,11 +4837,21 @@ 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/floatingactionbutton/floatingactionbutton.component.d.ts

@@ -82,7 +82,7 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
      * * `'medium'`
      * * `'large'`
      * * `'full'` (default)
-     * * `null`
+     * * `none`
      */
     set rounded(rounded: ButtonRounded);
     get rounded(): ButtonRounded;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "8.0.0-next.202204010825",
+  "version": "8.0.0-next.202204060705",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@progress/kendo-common": "^0.2.1",
-    "@progress/kendo-schematics": "^2.0.0",
+    "@progress/kendo-schematics": "^3.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
@@ -33,9 +33,9 @@
     "@angular/common": "^12.0.0 || ^13.0.0",
     "@angular/core": "^12.0.0 || ^13.0.0",
     "@angular/forms": "^12.0.0 || ^13.0.0",
-    "@progress/kendo-angular-common": "next",
-    "@progress/kendo-angular-l10n": "next",
-    "@progress/kendo-angular-popup": "next",
+    "@progress/kendo-angular-common": ">3.0.0-next",
+    "@progress/kendo-angular-l10n": ">4.0.0-next",
+    "@progress/kendo-angular-popup": ">5.0.0-next",
     "@progress/kendo-licensing": "^1.0.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },

package/splitbutton/splitbutton.component.d.ts

@@ -90,7 +90,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     size: ButtonSize;
     /**
@@ -102,7 +102,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * * `'medium'` (default)
      * * `'large'`
      * * `'full'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded: ButtonRounded);
     get rounded(): ButtonRounded;