@progress/kendo-angular-inputs 9.0.0-next.202204060721 → 9.0.1-dev.202204281117

package/checkbox/checkbox.directive.d.ts

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

package/colorpicker/colorpicker.component.d.ts

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

package/common/models/fillmode.d.ts

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

package/common/models/rounded.d.ts

@@ -4,9 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Represents the possible rounded options of the inputs.
+ * @default `medium`
  */
 export declare type InputRounded = 'small' | 'medium' | 'large' | 'full' | 'none';
 /**
  * Represents the possible rounded options of the CheckBox.
+ * @default `medium`
  */
 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' | '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,15 +29,15 @@ export class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -45,15 +47,15 @@ export class CheckBoxDirective {
      * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set rounded(rounded) {
-        const roundedValue = rounded ? rounded : 'medium';
-        this.handleClasses(roundedValue, 'rounded');
-        this._rounded = roundedValue;
+        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,15 +235,15 @@ export class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -250,16 +253,16 @@ export class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
      * * `none`
      */
     set rounded(rounded) {
-        const roundedValue = rounded ? rounded : 'medium';
-        this.handleClasses(roundedValue, 'rounded');
-        this._rounded = roundedValue;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -269,15 +272,15 @@ export class ColorPickerComponent {
      * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
      * * `none`
      */
     set fillMode(fillMode) {
-        const fillModeValue = fillMode ? fillMode : 'solid';
-        this.handleClasses(fillModeValue, 'fillMode');
-        this._fillMode = fillModeValue;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;

package/esm2015/formfield/formfield.component.js

@@ -107,6 +107,9 @@ export class FormFieldComponent {
     ngAfterViewInit() {
         this.setDescription();
     }
+    ngAfterViewChecked() {
+        this.updateDescription();
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -145,7 +148,12 @@ export class FormFieldComponent {
         controls.forEach((control) => {
             if (this.errorChildren.length > 0 || this.hintChildren.length > 0) {
                 const ariaIds = this.generateDescriptionIds(control);
-                this.renderer.setAttribute(control, 'aria-describedby', ariaIds);
+                if (ariaIds !== '') {
+                    this.renderer.setAttribute(control, 'aria-describedby', ariaIds);
+                }
+                else {
+                    this.renderer.removeAttribute(control, 'aria-describedby');
+                }
             }
         });
     }
@@ -161,8 +169,10 @@ export class FormFieldComponent {
     }
     generateDescriptionIds(control) {
         const ids = new Set();
+        let errorAttribute = '';
         if (control.hasAttribute('aria-describedby')) {
             const attributes = control.getAttribute('aria-describedby').split(' ');
+            errorAttribute = attributes.filter(attr => attr.includes('kendo-error-'))[0];
             attributes.forEach((attr) => {
                 if (attr.includes('kendo-hint-') || attr.includes('kendo-error-')) {
                     return;
@@ -173,9 +183,14 @@ export class FormFieldComponent {
         this.hintChildren.forEach((hint) => {
             ids.add(hint.id);
         });
-        this.errorChildren.forEach((error) => {
-            ids.add(error.id);
-        });
+        if (this.hasErrors) {
+            this.errorChildren.forEach((error) => {
+                ids.add(error.id);
+            });
+        }
+        else {
+            ids.delete(errorAttribute);
+        }
         return Array.from(ids).join(' ');
     }
     showHintsInitial() {

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,15 +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'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -224,15 +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'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set rounded(rounded) {
-        const roundedValue = rounded ? rounded : 'medium';
-        this.handleClasses(roundedValue, 'rounded');
-        this._rounded = roundedValue;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -247,9 +250,9 @@ export class MaskedTextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const fillModeValue = fillMode ? fillMode : 'solid';
-        this.handleClasses(fillModeValue, 'fillMode');
-        this._fillMode = fillModeValue;
+        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,15 +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'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -345,15 +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'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set rounded(rounded) {
-        const roundedValue = rounded ? rounded : 'medium';
-        this.handleClasses(roundedValue, 'rounded');
-        this._rounded = roundedValue;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -362,15 +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'`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
      * * `none`
      */
     set fillMode(fillMode) {
-        const fillModeValue = fillMode ? fillMode : 'solid';
-        this.handleClasses(fillModeValue, 'fillMode');
-        this._fillMode = fillModeValue;
+        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: 1649229539,
+    publishDate: 1651144627,
     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,15 +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'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        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,15 +121,15 @@ export class SwitchComponent {
      * Specifies the width and height of the Switch.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -135,16 +138,16 @@ export class SwitchComponent {
      * Specifies the border radius of the Switch thumb.
      *
      * The possible values are:
-     * * `'full'` (default)
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
      * * `none`
      */
     set thumbRounded(thumbRounded) {
-        const thumbRoundedValue = thumbRounded ? thumbRounded : 'full';
-        this.handleThumbClasses(thumbRoundedValue);
-        this._thumbRounded = thumbRoundedValue;
+        const newThumbRounded = thumbRounded ? thumbRounded : DEFAULT_THUMB_ROUNDED;
+        this.handleThumbClasses(newThumbRounded);
+        this._thumbRounded = newThumbRounded;
     }
     get thumbRounded() {
         return this._thumbRounded;
@@ -153,16 +156,16 @@ export class SwitchComponent {
      * Specifies the border radius of the Switch track.
      *
      * The possible values are:
-     * * `'full'` (default)
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
      * * `none`
      */
     set trackRounded(trackRounded) {
-        const trackRoundedValue = trackRounded ? trackRounded : 'full';
-        this.handleTrackClasses(trackRoundedValue);
-        this._trackRounded = trackRoundedValue;
+        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,15 +182,15 @@ export class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set size(size) {
-        const sizeValue = size ? size : 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this._size = sizeValue;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -197,15 +200,15 @@ export class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
      * * `none`
      */
     set rounded(rounded) {
-        const roundedValue = rounded ? rounded : 'medium';
-        this.handleClasses(roundedValue, 'rounded');
-        this._rounded = roundedValue;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -215,15 +218,15 @@ export class TextAreaComponent extends TextFieldsBase {
      * ([see example]({% slug appearance_textarea %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
      * * `none`
      */
     set fillMode(fillMode) {
-        const fillModeValue = fillMode ? fillMode : 'solid';
-        this.handleClasses(fillModeValue, 'fillMode');
-        this._fillMode = fillModeValue;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;