@progress/kendo-angular-inputs 8.0.8-dev.202203101143 → 8.0.9-dev.202203220940

package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts

@@ -83,9 +83,6 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * * `null`
      */
     fillMode: InputFillMode;
-    direction: string;
-    hostClasses: boolean;
-    readonly 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.
@@ -183,6 +180,9 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * Fires each time the value changes.
      */
     valueChange: EventEmitter<string>;
+    direction: string;
+    hostClasses: boolean;
+    readonly hostDisabledClass: boolean;
     /**
      * Represents the `ElementRef` of the visible `input` element.
      */
@@ -284,9 +284,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;

package/dist/es2015/maskedtextbox/maskedtextbox.component.js

@@ -6,14 +6,14 @@ import * as tslib_1 from "tslib";
 var MaskedTextBoxComponent_1;
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { take } from 'rxjs/operators';
+import { anyChanged, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
 import { RTL } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { MaskingService } from './masking.service';
-import { isChanged, anyChanged, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
 import { invokeElementMethod } from '../common/dom-utils';
 import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
-const resolvedPromise = Promise.resolve(null);
 const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -57,7 +57,6 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
          * 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 `_`
@@ -133,6 +132,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
          * Fires each time the value changes.
          */
         this.valueChange = new EventEmitter();
+        this.hostClasses = true;
         this.focusClick = false;
         this.defaultRules = {
             "#": /[\d\s\+\-]/,
@@ -250,18 +250,15 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     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
      */
@@ -271,6 +268,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     get tabIndex() {
         return this.tabindex;
     }
+    get hostDisabledClass() {
+        return this.disabled;
+    }
     ngOnInit() {
         if (this.hostElement) {
             this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
@@ -347,7 +347,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         const value = e.target.value;
         const [start, end] = this.selection;
         if (!this.mask) {
-            this.updateValue(value);
+            this.updateValueWithEvents(value);
             this.isPasted = false;
             return;
         }
@@ -362,35 +362,38 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
             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
      */
     ngOnChanges(changes) {
-        if (changes.value) {
-            this.value = this.normalizeValue();
-        }
         if (!this.mask) {
+            if (changes.value) {
+                this.value = this.normalizeValue();
+            }
             this.updateInput(this.value);
             return;
         }
         const next = this.extractChanges(changes);
         this.updateService(next);
-        if (isChanged('value', changes)) {
+        if (changes.value) {
+            this.value = this.normalizeValue();
             const maskedValue = this.service.maskRaw(this.value);
             if (maskedValue !== this.maskedValue) {
                 this.updateInput(maskedValue);
             }
-        }
-        else if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            resolvedPromise.then(() => {
+            if (this.includeLiterals) {
                 this.updateValue(this.maskedValue);
-            });
+            }
         }
-        else {
-            this.updateInput(this.service.maskRaw(this.value));
+        if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.updateValueWithEvents(this.maskedValue);
+            });
+            return;
         }
+        this.updateInput(this.service.maskRaw(this.value));
     }
     /**
      * @hidden
@@ -449,15 +452,18 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     /**
      * @hidden
      */
-    updateValue(maskedValue) {
-        if (this.mask && !this.service.validationValue(maskedValue)) {
+    updateValueWithEvents(maskedValue) {
+        this.updateValue(maskedValue);
+        this.valueChange.emit(this.value);
+    }
+    updateValue(value) {
+        if (this.mask && !this.service.validationValue(value)) {
             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) {
         this.maskedValue = maskedValue;
@@ -566,20 +572,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [String])
 ], MaskedTextBoxComponent.prototype, "fillMode", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], MaskedTextBoxComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-input'),
-    HostBinding('class.k-maskedtextbox'),
-    tslib_1.__metadata("design:type", Boolean)
-], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -634,6 +626,20 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], MaskedTextBoxComponent.prototype, "valueChange", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.dir'),
+    tslib_1.__metadata("design:type", String)
+], MaskedTextBoxComponent.prototype, "direction", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-input'),
+    HostBinding('class.k-maskedtextbox'),
+    tslib_1.__metadata("design:type", Boolean)
+], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-disabled'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
 tslib_1.__decorate([
     ViewChild('input', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646912457,
+    publishDate: 1647941853,
     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/dist/es2015/rangeslider/rangeslider.component.js

@@ -217,9 +217,13 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
         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())]);
@@ -227,8 +231,8 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
         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) {
                 activeStartHandle ? moveStartHandle() : moveBothHandles();
             }

package/dist/es2015/shared/utils.js

@@ -9,8 +9,9 @@ import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
  * Returns true if the used browser is Safari.
  */
 export const isSafari = (userAgent) => {
-    return detectDesktopBrowser(userAgent).safari ||
-        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+    const desktopBrowser = detectDesktopBrowser(userAgent);
+    const mobileOS = detectMobileOS(userAgent);
+    return (desktopBrowser && desktopBrowser.safari) || (mobileOS && mobileOS.browser === 'mobilesafari');
 };
 /**
  * @hidden

package/dist/es2015/textarea/textarea-suffix.component.d.ts

@@ -3,8 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
- *  @example
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/dist/es2015/textarea/textarea-suffix.component.js

@@ -5,8 +5,7 @@
 import * as tslib_1 from "tslib";
 import { Component, HostBinding } from '@angular/core';
 /**
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
- *  @example
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -23,8 +22,7 @@ import { Component, HostBinding } from '@angular/core';
  */
 let TextAreaSuffixComponent = class TextAreaSuffixComponent {
     /**
-     * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
-     *  @example
+     * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
      * ```ts-no-run
      * _@Component({
      * selector: 'my-app',

package/dist/es2015/textbox/textbox-suffix.directive.d.ts

@@ -5,7 +5,6 @@
 import { TemplateRef } from '@angular/core';
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
- *  @example
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/dist/es2015/textbox/textbox-suffix.directive.js

@@ -6,7 +6,6 @@ import * as tslib_1 from "tslib";
 import { Directive, Optional, TemplateRef } from '@angular/core';
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
- *  @example
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/dist/fesm2015/index.js

@@ -8,7 +8,7 @@ import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, closest } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, isChanged, closest } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -481,7 +481,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646912457,
+    publishDate: 1647941853,
     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'
 };
@@ -1552,9 +1552,13 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
         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())]);
@@ -1562,8 +1566,8 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
         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) {
                 activeStartHandle ? moveStartHandle() : moveBothHandles();
             }
@@ -4376,7 +4380,6 @@ MaskingService = __decorate([
 ], MaskingService);
 
 var MaskedTextBoxComponent_1;
-const resolvedPromise = Promise.resolve(null);
 const FOCUSED$2 = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -4420,7 +4423,6 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
          * 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 `_`
@@ -4496,6 +4498,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
          * Fires each time the value changes.
          */
         this.valueChange = new EventEmitter();
+        this.hostClasses = true;
         this.focusClick = false;
         this.defaultRules = {
             "#": /[\d\s\+\-]/,
@@ -4613,18 +4616,15 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     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
      */
@@ -4634,6 +4634,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     get tabIndex() {
         return this.tabindex;
     }
+    get hostDisabledClass() {
+        return this.disabled;
+    }
     ngOnInit() {
         if (this.hostElement) {
             this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
@@ -4710,7 +4713,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         const value = e.target.value;
         const [start, end] = this.selection;
         if (!this.mask) {
-            this.updateValue(value);
+            this.updateValueWithEvents(value);
             this.isPasted = false;
             return;
         }
@@ -4725,35 +4728,38 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
             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
      */
     ngOnChanges(changes) {
-        if (changes.value) {
-            this.value = this.normalizeValue();
-        }
         if (!this.mask) {
+            if (changes.value) {
+                this.value = this.normalizeValue();
+            }
             this.updateInput(this.value);
             return;
         }
         const next = this.extractChanges(changes);
         this.updateService(next);
-        if (isChanged('value', changes)) {
+        if (changes.value) {
+            this.value = this.normalizeValue();
             const maskedValue = this.service.maskRaw(this.value);
             if (maskedValue !== this.maskedValue) {
                 this.updateInput(maskedValue);
             }
-        }
-        else if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            resolvedPromise.then(() => {
+            if (this.includeLiterals) {
                 this.updateValue(this.maskedValue);
-            });
+            }
         }
-        else {
-            this.updateInput(this.service.maskRaw(this.value));
+        if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.updateValueWithEvents(this.maskedValue);
+            });
+            return;
         }
+        this.updateInput(this.service.maskRaw(this.value));
     }
     /**
      * @hidden
@@ -4812,15 +4818,18 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     /**
      * @hidden
      */
-    updateValue(maskedValue) {
-        if (this.mask && !this.service.validationValue(maskedValue)) {
+    updateValueWithEvents(maskedValue) {
+        this.updateValue(maskedValue);
+        this.valueChange.emit(this.value);
+    }
+    updateValue(value) {
+        if (this.mask && !this.service.validationValue(value)) {
             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) {
         this.maskedValue = maskedValue;
@@ -4929,20 +4938,6 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], MaskedTextBoxComponent.prototype, "fillMode", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], MaskedTextBoxComponent.prototype, "direction", void 0);
-__decorate([
-    HostBinding('class.k-input'),
-    HostBinding('class.k-maskedtextbox'),
-    __metadata("design:type", Boolean)
-], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
-__decorate([
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -4997,6 +4992,20 @@ __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], MaskedTextBoxComponent.prototype, "valueChange", void 0);
+__decorate([
+    HostBinding('attr.dir'),
+    __metadata("design:type", String)
+], MaskedTextBoxComponent.prototype, "direction", void 0);
+__decorate([
+    HostBinding('class.k-input'),
+    HostBinding('class.k-maskedtextbox'),
+    __metadata("design:type", Boolean)
+], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
+__decorate([
+    HostBinding('class.k-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
 __decorate([
     ViewChild('input', { static: true }),
     __metadata("design:type", ElementRef)
@@ -5668,8 +5677,9 @@ MaskedTextBoxModule = __decorate([
  * Returns true if the used browser is Safari.
  */
 const isSafari = (userAgent) => {
-    return detectDesktopBrowser(userAgent).safari ||
-        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+    const desktopBrowser = detectDesktopBrowser(userAgent);
+    const mobileOS$$1 = detectMobileOS(userAgent);
+    return (desktopBrowser && desktopBrowser.safari) || (mobileOS$$1 && mobileOS$$1.browser === 'mobilesafari');
 };
 /**
  * @hidden
@@ -5683,7 +5693,6 @@ const isJapanese = (input) => {
 
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
- *  @example
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -7365,8 +7374,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
 ], TextAreaComponent);
 
 /**
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
- *  @example
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -7383,8 +7391,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
  */
 let TextAreaSuffixComponent = class TextAreaSuffixComponent {
     /**
-     * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
-     *  @example
+     * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
      * ```ts-no-run
      * _@Component({
      * selector: 'my-app',