@progress/kendo-angular-inputs 9.0.0-next.202203230846 → 9.0.0-next.202204060721

package/esm2015/textbox/textbox.component.js

@@ -227,11 +227,12 @@ export class TextBoxComponent {
      * * `'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;
@@ -245,11 +246,12 @@ export class TextBoxComponent {
      * * `'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;
@@ -262,11 +264,12 @@ export class TextBoxComponent {
      * * `'flat'`
      * * `'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;

package/fesm2015/kendo-angular-inputs.js

@@ -71,17 +71,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;
@@ -519,7 +519,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648025032,
+    publishDate: 1649229539,
     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'
 };
@@ -1830,9 +1830,13 @@ class RangeSliderComponent extends SliderBase {
         const lastCoords = this.draggedHandle.getBoundingClientRect();
         this.lastHandlePosition = { x: lastCoords.left, y: lastCoords.top };
         this.dragging = { value: true, target };
-        const left = args.pageX < this.lastHandlePosition.x;
-        const right = args.pageX > this.lastHandlePosition.x;
-        const up = args.pageY > this.lastHandlePosition.y;
+        const mousePos = {
+            x: (args.pageX - 0.5) - (lastCoords.width / 2),
+            y: (args.pageY - (lastCoords.width / 2))
+        };
+        const left = mousePos.x < this.lastHandlePosition.x;
+        const right = mousePos.x > this.lastHandlePosition.x;
+        const up = mousePos.y > this.lastHandlePosition.y;
         const moveStartHandle = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), this.value[1]]);
         const moveEndHandle = () => this.changeValue([this.value[0], eventValue(args, this.track.nativeElement, this.getProps())]);
         const moveBothHandles = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), eventValue(args, this.track.nativeElement, this.getProps())]);
@@ -1840,8 +1844,8 @@ class RangeSliderComponent extends SliderBase {
         const vertical = this.vertical;
         const horizontal = !vertical;
         const forward = (vertical && up) || (this.reverse ? horizontal && right : horizontal && left);
-        // const forward = (this.reverse ? (!this.vertical && !left) : (!this.vertical && left)) || (this.vertical && up);
-        if (this.value[0] === this.value[1]) {
+        const incorrectValueState = this.value[0] > this.value[1];
+        if (this.value[0] === this.value[1] || incorrectValueState) {
             if (forward) {
                 // eslint-disable-next-line no-unused-expressions
                 activeStartHandle ? moveStartHandle() : moveBothHandles();
@@ -2351,11 +2355,12 @@ class SwitchComponent {
      * * `'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;
@@ -2368,11 +2373,12 @@ class SwitchComponent {
      * * `'small'`
      * * `'medium'`
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set thumbRounded(thumbRounded) {
-        this.handleThumbClasses(thumbRounded);
-        this._thumbRounded = thumbRounded;
+        const thumbRoundedValue = thumbRounded ? thumbRounded : 'full';
+        this.handleThumbClasses(thumbRoundedValue);
+        this._thumbRounded = thumbRoundedValue;
     }
     get thumbRounded() {
         return this._thumbRounded;
@@ -2385,11 +2391,12 @@ class SwitchComponent {
      * * `'small'`
      * * `'medium'`
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set trackRounded(trackRounded) {
-        this.handleTrackClasses(trackRounded);
-        this._trackRounded = trackRounded;
+        const trackRoundedValue = trackRounded ? trackRounded : 'full';
+        this.handleTrackClasses(trackRoundedValue);
+        this._trackRounded = trackRoundedValue;
     }
     get trackRounded() {
         return this._trackRounded;
@@ -3653,11 +3660,12 @@ class NumericTextBoxComponent {
      * * `'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;
@@ -3669,11 +3677,12 @@ class NumericTextBoxComponent {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `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;
@@ -3685,11 +3694,12 @@ class NumericTextBoxComponent {
      * * `'flat'`
      * * `'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;
@@ -4882,7 +4892,6 @@ class MaskedTextBoxComponent {
          * Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
          */
         this.readonly = false;
-        this.hostClasses = true;
         /**
          * Represents a prompt character for the masked value.
          * @default `_`
@@ -4958,6 +4967,7 @@ class MaskedTextBoxComponent {
          * Fires each time the value changes.
          */
         this.valueChange = new EventEmitter();
+        this.hostClasses = true;
         this.focusClick = false;
         this.defaultRules = {
             "#": /[\d\s\+\-]/,
@@ -5034,11 +5044,12 @@ class MaskedTextBoxComponent {
      * * `'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;
@@ -5050,11 +5061,12 @@ class MaskedTextBoxComponent {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `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;
@@ -5066,27 +5078,25 @@ class MaskedTextBoxComponent {
      * * `flat`
      * * `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;
     }
-    get hostDisabledClass() {
-        return this.disabled;
-    }
     /**
      * Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
      */
-    get rules() {
-        return this._rules || this.defaultRules;
-    }
     set rules(value) {
         this._rules = Object.assign({}, this.defaultRules, value);
     }
+    get rules() {
+        return this._rules || this.defaultRules;
+    }
     /**
      * @hidden
      */
@@ -5096,6 +5106,9 @@ class MaskedTextBoxComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    get hostDisabledClass() {
+        return this.disabled;
+    }
     ngOnInit() {
         if (this.hostElement) {
             this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
@@ -5172,7 +5185,7 @@ class MaskedTextBoxComponent {
         const value = e.target.value;
         const [start, end] = this.selection;
         if (!this.mask) {
-            this.updateValue(value);
+            this.updateValueWithEvents(value);
             this.isPasted = false;
             return;
         }
@@ -5184,10 +5197,10 @@ class MaskedTextBoxComponent {
             result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
         }
         else {
-            result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
         }
         this.updateInput(result.value, result.selection);
-        this.updateValue(result.value);
+        this.updateValueWithEvents(result.value);
     }
     /**
      * @hidden
@@ -5202,20 +5215,13 @@ class MaskedTextBoxComponent {
         }
         const next = this.extractChanges(changes);
         this.updateService(next);
-        if (isChanged('value', changes)) {
-            const maskedValue = this.service.maskRaw(this.value);
-            if (maskedValue !== this.maskedValue) {
-                this.updateInput(maskedValue);
-            }
-        }
-        else if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
+        const maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
             resolvedPromise.then(() => {
-                this.updateValue(this.maskedValue);
+                this.updateValueWithEvents(this.maskedValue);
             });
         }
-        else {
-            this.updateInput(this.service.maskRaw(this.value));
-        }
     }
     /**
      * @hidden
@@ -5224,6 +5230,9 @@ class MaskedTextBoxComponent {
     writeValue(value) {
         this.value = this.normalizeValue(value);
         this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
     }
     /**
      * @hidden
@@ -5274,17 +5283,25 @@ class MaskedTextBoxComponent {
     /**
      * @hidden
      */
-    updateValue(maskedValue) {
-        if (this.mask && !this.service.validationValue(maskedValue)) {
+    updateValueWithEvents(maskedValue) {
+        this.updateValue(maskedValue);
+        if (hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
+    }
+    updateValue(value) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
         }
         else {
-            this.value = this.service.rawValue(maskedValue);
+            this.value = this.service.rawValue(value);
         }
         this.onChange(this.value);
-        this.valueChange.emit(this.value);
     }
-    updateInput(maskedValue = '', selection) {
+    updateInput(maskedValue = '', selection, isFromOnChanges) {
+        if (isFromOnChanges && maskedValue === this.maskedValue) {
+            return;
+        }
         this.maskedValue = maskedValue;
         const value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
         this.renderer.setProperty(this.input.nativeElement, "value", value);
@@ -5463,18 +5480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
-            }], direction: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-input']
-            }, {
-                type: HostBinding,
-                args: ['class.k-maskedtextbox']
-            }], hostDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], mask: [{
                 type: Input
             }], value: [{
@@ -5503,6 +5508,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['blur']
             }], valueChange: [{
                 type: Output
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-input']
+            }, {
+                type: HostBinding,
+                args: ['class.k-maskedtextbox']
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
@@ -6261,11 +6278,12 @@ class TextBoxComponent {
      * * `'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;
@@ -6279,11 +6297,12 @@ class TextBoxComponent {
      * * `'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;
@@ -6296,11 +6315,12 @@ class TextBoxComponent {
      * * `'flat'`
      * * `'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;
@@ -7239,11 +7259,12 @@ class TextAreaComponent extends TextFieldsBase {
      * * `'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;
@@ -7256,11 +7277,12 @@ class TextAreaComponent extends TextFieldsBase {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `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;
@@ -7273,11 +7295,12 @@ class TextAreaComponent extends TextFieldsBase {
      * * `'flat'`
      * * `'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;
@@ -11421,11 +11444,12 @@ class ColorPickerComponent {
      * * `'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;
@@ -11439,11 +11463,12 @@ class ColorPickerComponent {
      * * `'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;
@@ -11456,11 +11481,12 @@ class ColorPickerComponent {
      * * `'flat'`
      * * `'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;
@@ -12267,11 +12293,12 @@ class CheckBoxDirective {
      * * `'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;
@@ -12284,11 +12311,12 @@ class CheckBoxDirective {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `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;
@@ -12395,11 +12423,12 @@ class RadioButtonDirective {
      * * `'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/maskedtextbox/maskedtextbox.component.d.ts

@@ -61,7 +61,7 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size: InputSize);
     get size(): InputSize;
@@ -72,7 +72,7 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set rounded(rounded: InputRounded);
     get rounded(): InputRounded;
@@ -83,13 +83,10 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * * `flat`
      * * `solid` (default)
      * * `outline`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode: InputFillMode);
     get fillMode(): InputFillMode;
-    direction: string;
-    hostClasses: boolean;
-    get hostDisabledClass(): boolean;
     /**
      * Represents the current mask ([see example]({% slug value_maskedtextbox %})).
      * If no mask is set, the component behaves as a standard `type="text"` input.
@@ -105,12 +102,12 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     /**
      * Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
      */
-    get rules(): {
-        [key: string]: RegExp;
-    };
     set rules(value: {
         [key: string]: RegExp;
     });
+    get rules(): {
+        [key: string]: RegExp;
+    };
     /**
      * Represents a prompt character for the masked value.
      * @default `_`
@@ -191,6 +188,9 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * Fires each time the value changes.
      */
     valueChange: EventEmitter<string>;
+    direction: string;
+    hostClasses: boolean;
+    get hostDisabledClass(): boolean;
     /**
      * Represents the `ElementRef` of the visible `input` element.
      */
@@ -292,9 +292,10 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     /**
      * @hidden
      */
-    updateValue(maskedValue: string): void;
+    updateValueWithEvents(maskedValue: string): void;
     protected onChange: (_: any) => void;
     protected onTouched: () => void;
+    private updateValue;
     private updateInput;
     private extractChanges;
     private updateService;