@progress/kendo-angular-inputs 9.0.0-next.202204011519 → 9.0.0

package/checkbox/checkbox.directive.d.ts

@@ -23,10 +23,10 @@ export declare class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size: InputSize);
     get size(): InputSize;
@@ -35,10 +35,10 @@ export declare class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded: CheckBoxRounded);
     get rounded(): CheckBoxRounded;

package/colorpicker/colorpicker.component.d.ts

@@ -151,10 +151,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size: InputSize);
     get size(): InputSize;
@@ -163,11 +163,11 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded: InputRounded);
     get rounded(): InputRounded;
@@ -176,10 +176,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode: InputFillMode);
     get fillMode(): InputFillMode;

package/common/models/fillmode.d.ts

@@ -4,10 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Represents the possible fillMode options of the inputs.
- *
- * The possible values are:
- * - `solid`
- * - `flat`
- * - `outline`
+ * @default `solid`
  */
-export declare type InputFillMode = 'solid' | 'flat' | 'outline';
+export declare type InputFillMode = 'solid' | 'flat' | 'outline' | 'none';

package/common/models/rounded.d.ts

@@ -4,20 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Represents the possible rounded options of the inputs.
- *
- * The possible values are:
- * - `'small'`
- * - `'medium'`
- * - `'large'`
- * - `'full'`
+ * @default `medium`
  */
-export declare type InputRounded = 'small' | 'medium' | 'large' | 'full';
+export declare type InputRounded = 'small' | 'medium' | 'large' | 'full' | 'none';
 /**
  * Represents the possible rounded options of the CheckBox.
- *
- * The possible values are:
- * - `'small'`
- * - `'medium'`
- * - `'large'`
+ * @default `medium`
  */
-export declare type CheckBoxRounded = 'small' | 'medium' | 'large';
+export declare type CheckBoxRounded = 'small' | 'medium' | 'large' | 'none';

package/common/models/size.d.ts

@@ -4,5 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Represents the possible size options of the inputs.
+ * @default `medium`
  */
-export declare type InputSize = 'small' | 'medium' | 'large' | null;
+export declare type InputSize = 'small' | 'medium' | 'large' | 'none';

package/esm2015/checkbox/checkbox.directive.js

@@ -5,6 +5,8 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 import { getStylingClasses } from '../common/utils';
 import * as i0 from "@angular/core";
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -27,14 +29,15 @@ export class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -44,14 +47,15 @@ export class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;

package/esm2015/colorpicker/colorpicker.component.js

@@ -23,6 +23,9 @@ import * as i3 from "./flatcolorpicker.component";
 import * as i4 from "./localization/localized-colorpicker-messages.directive";
 import * as i5 from "@angular/common";
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -232,14 +235,15 @@ export class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -249,15 +253,16 @@ export class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -267,14 +272,15 @@ export class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/esm2015/common/utils.js

@@ -53,17 +53,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;

package/esm2015/maskedtextbox/maskedtextbox.component.js

@@ -16,6 +16,9 @@ import * as i1 from "./masking.service";
 import * as i2 from "@progress/kendo-angular-common";
 const resolvedPromise = Promise.resolve(null);
 const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -207,14 +210,15 @@ export class MaskedTextBoxComponent {
      * The size property specifies the padding of the MaskedTextBox internal input element
      * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -223,14 +227,15 @@ export class MaskedTextBoxComponent {
      * The rounded property specifies the border radius of the MaskedTextBox
      * ([see example]({% slug appearance_maskedtextbox %}#toc-rounded)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -242,11 +247,12 @@ export class MaskedTextBoxComponent {
      * * `flat`
      * * `solid` (default)
      * * `outline`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/esm2015/numerictextbox/numerictextbox.component.js

@@ -31,6 +31,9 @@ const PARSABLE_DEFAULTS = {
     step: 1
 };
 const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -328,14 +331,15 @@ export class NumericTextBoxComponent {
      * The size property specifies padding of the NumericTextBox internal input element
      * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -344,14 +348,15 @@ export class NumericTextBoxComponent {
      * The rounded property specifies the border radius of the NumericTextBox
      * ([see example]({% slug appearance_numerictextbox %}#toc-rounded)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -360,14 +365,15 @@ export class NumericTextBoxComponent {
      * The fillMode property specifies the background and border styles of the NumericTextBox
      * ([see example]({% slug appearance_numerictextbox %}#toc-fillMode)).
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648826206,
+    publishDate: 1650440790,
     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/radiobutton/radiobutton.directive.js

@@ -7,6 +7,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { getStylingClasses } from '../common/utils';
 import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
+const DEFAULT_SIZE = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -28,14 +29,15 @@ export class RadioButtonDirective {
      * The size property specifies the width and height of the RadioButton
      * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;

package/esm2015/slider/slider.component.js

@@ -395,7 +395,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
             dragHandle="Drag"
         >
-        <div class="k-slider-track-wrap" #wrap
+        <div class="k-slider-wrap" #wrap
             [class.k-slider-buttons]="showButtons"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
@@ -484,7 +484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
             dragHandle="Drag"
         >
-        <div class="k-slider-track-wrap" #wrap
+        <div class="k-slider-wrap" #wrap
             [class.k-slider-buttons]="showButtons"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"

package/esm2015/switch/switch.component.js

@@ -17,6 +17,9 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./localization/localized-switch-messages.directive";
 import * as i3 from "@progress/kendo-angular-common";
 const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THUMB_ROUNDED = 'full';
+const DEFAULT_TRACK_ROUNDED = 'full';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
@@ -118,14 +121,15 @@ export class SwitchComponent {
      * Specifies the width and height of the Switch.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -134,15 +138,16 @@ export class SwitchComponent {
      * Specifies the border radius of the Switch thumb.
      *
      * The possible values are:
-     * * `'full'` (default)
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `null`
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
      */
     set thumbRounded(thumbRounded) {
-        this.handleThumbClasses(thumbRounded);
-        this._thumbRounded = thumbRounded;
+        const newThumbRounded = thumbRounded ? thumbRounded : DEFAULT_THUMB_ROUNDED;
+        this.handleThumbClasses(newThumbRounded);
+        this._thumbRounded = newThumbRounded;
     }
     get thumbRounded() {
         return this._thumbRounded;
@@ -151,15 +156,16 @@ export class SwitchComponent {
      * Specifies the border radius of the Switch track.
      *
      * The possible values are:
-     * * `'full'` (default)
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `null`
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
      */
     set trackRounded(trackRounded) {
-        this.handleTrackClasses(trackRounded);
-        this._trackRounded = trackRounded;
+        const newTrackRounded = trackRounded ? trackRounded : DEFAULT_TRACK_ROUNDED;
+        this.handleTrackClasses(newTrackRounded);
+        this._trackRounded = newTrackRounded;
     }
     get trackRounded() {
         return this._trackRounded;

package/esm2015/textarea/textarea.component.js

@@ -26,6 +26,9 @@ const resizeClasses = {
     'auto': 'k-resize-none'
 };
 const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -179,14 +182,15 @@ export class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -196,14 +200,15 @@ export class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -213,14 +218,15 @@ export class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;