@progress/kendo-angular-inputs 7.5.2-dev.202111191702 → 8.0.0-dev.202112251033

package/dist/es/colorpicker/localization/localized-colorpicker-messages.directive.js

@@ -26,7 +26,7 @@ var LocalizedColorPickerMessagesDirective = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return LocalizedColorPickerMessagesDirective_1; }) // tslint:disable-line:no-forward-ref
                 }
             ],
-            selector: '[kendoColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
+            selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], LocalizedColorPickerMessagesDirective);

package/dist/es/colorpicker/localization/messages.js

@@ -21,6 +21,14 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerMessages.prototype, "colorGradientNoColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "flatColorPickerNoColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "colorPickerNoColor", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -69,6 +77,34 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerMessages.prototype, "contrastRatio", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "previewColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "revertSelection", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "gradientView", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "paletteView", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "formatButton", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "applyButton", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "cancelButton", void 0);
     return ColorPickerMessages;
 }(ComponentMessages));
 export { ColorPickerMessages };

package/dist/es/colorpicker/models.js

@@ -2,5 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './models/preventable-event';
-export * from './models/active-color-click-event';
+export * from './models/palette-presets';

package/dist/es/colorpicker/services/flatcolorpicker.service.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from "@angular/core";
+import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from "../constants";
+import { PALETTEPRESETS } from "../models";
+/**
+ * @hidden
+ */
+var FlatColorPickerService = /** @class */ (function () {
+    function FlatColorPickerService() {
+    }
+    FlatColorPickerService.prototype.getPaletteSettings = function (settings, format) {
+        var defaultPreset = (format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        var settingsPalette = settings.palette;
+        var presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        return {
+            palette: settingsPalette || defaultPreset,
+            tileSize: settings.tileSize || 24,
+            columns: settings.columns || presetColumns || 10
+        };
+    };
+    FlatColorPickerService.prototype.paletteTileLayout = function (tileSize) {
+        if (typeof tileSize === 'number') {
+            return { width: tileSize, height: tileSize };
+        }
+        return {
+            width: tileSize.width ? tileSize.width : tileSize.height,
+            height: tileSize.height ? tileSize.height : tileSize.width
+        };
+    };
+    FlatColorPickerService = tslib_1.__decorate([
+        Injectable()
+    ], FlatColorPickerService);
+    return FlatColorPickerService;
+}());
+export { FlatColorPickerService };

package/dist/es/colorpicker/utils/color-parser.js

@@ -9,7 +9,8 @@ import { isPresent, fitIntoBounds } from '../../common/utils';
  *
  * Returns the hex or rgba string representation of the color.
  */
-export var parseColor = function (value, format, safe) {
+export var parseColor = function (value, format, opacityEnabled, safe) {
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     if (safe === void 0) { safe = true; }
     var allowedFormats = ['hex', 'rgba', 'name'];
     if (allowedFormats.indexOf(format) === -1) {
@@ -25,7 +26,8 @@ export var parseColor = function (value, format, safe) {
     if (!isPresent(parsedColor)) {
         return;
     }
-    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+    var parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+    return parsedColorResult;
 };
 /**
  * @hidden
@@ -58,12 +60,23 @@ export var getRGBA = function (value, safe) {
  *
  * Returns the RGBA string representation of the color.
  */
-export var getColorFromHSV = function (hsva) {
+export var getColorFromHSV = function (hsva, format, opacityEnabled) {
+    if (format === void 0) { format = 'rgba'; }
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     var hue = fitIntoBounds(hsva.h, 0, 359.9);
     var saturation = fitIntoBounds(hsva.s, 0, 1);
     var value = fitIntoBounds(hsva.v, 0, 1);
     var alpha = fitIntoBounds(hsva.a, 0, 1);
-    return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
+    var color = Color.fromHSV(hue, saturation, value, alpha);
+    return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export var getHexValue = function (color, opacity) {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
 };
 /**
  * @hidden
@@ -99,7 +112,7 @@ export function nameFormat(value, safe) {
     }
     var key = Object.keys(colors).find(function (key) { return colors[key] === value; });
     if (!key && !safe) {
-        throw new Error("The provided color " + value + " is not supported for 'format=\"name\"' property.To display " + value + " color, the component 'format' property shoud be set to 'hex' or 'rgba' ");
+        throw new Error("The provided color " + value + " is not supported for 'format=\"name\"' property.To display " + value + " color, the component 'format' property should be set to 'hex' or 'rgba' ");
     }
     return key;
 }

package/dist/es/colorpicker/utils/contrast-curve.js

@@ -0,0 +1,91 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export var bezierCommand = function (controlPointCalc) { return function (point, i, a) {
+    // start control point
+    var _a = controlPointCalc(a[i - 1], a[i - 2], point), cpsX = _a[0], cpsY = _a[1];
+    // end control point
+    var _b = controlPointCalc(point, a[i - 1], a[i + 1], true), cpeX = _b[0], cpeY = _b[1];
+    return "C " + cpsX + "," + cpsY + " " + cpeX + "," + cpeY + " " + point[0] + "," + point[1];
+}; };
+/**
+ * @hidden
+ */
+export var controlPoint = function (lineCalc) {
+    return function (current, previous, next, reverse) {
+        // when 'current' is the first or last point of the array
+        // 'previous' and 'next' are undefined
+        // replace with 'current'
+        var p = previous || current;
+        var n = next || current;
+        var smooth = 0.1;
+        // properties of the line between previous and next
+        var l = lineCalc(p, n);
+        // If is end-control-point, add PI to the angle to go backward
+        var angle = l.angle + (reverse ? Math.PI : 0);
+        var length = l.length * smooth;
+        // The control point position is relative to the current point
+        var x = current[0] + Math.cos(angle) * length;
+        var y = current[1] + Math.sin(angle) * length;
+        return [x, y];
+    };
+};
+/**
+ * @hidden
+ */
+export var line = function (pointA, pointB) {
+    var lengthX = pointB[0] - pointA[0];
+    var lengthY = pointB[1] - pointA[1];
+    return {
+        length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+        angle: Math.atan2(lengthY, lengthX)
+    };
+};
+/**
+ * @hidden
+ */
+export var d = function (points, command) {
+    if (points.length === 0) {
+        return '';
+    }
+    // build the d attributes by looping over the points
+    var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ?
+            // if first point
+            "M " + point[0] + "," + point[1] :
+            // else
+            acc + " " + command(point, i, a);
+    }, '');
+    return d;
+};
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+export var svgPath = function (points, command) {
+    if (points.length === 0) {
+        return '';
+    }
+    // build the d attributes by looping over the points
+    var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ?
+            // if first point
+            "M " + point[0] + "," + point[1] :
+            // else
+            acc + " " + command(point, i, a);
+    }, '');
+    return d;
+};

package/dist/es/colorpicker/utils.js

@@ -2,5 +2,5 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './utils/palette-presets';
 export * from './utils/color-parser';
+export * from './utils/contrast-curve';

package/dist/es/colorpicker.module.js

@@ -13,15 +13,20 @@ import { ColorPickerComponent } from './colorpicker/colorpicker.component';
 import { ColorPaletteComponent } from './colorpicker/color-palette.component';
 import { ColorGradientComponent } from './colorpicker/color-gradient.component';
 import { ColorInputComponent } from './colorpicker/color-input.component';
+import { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
+import { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
+import { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
 import { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
 import { LocalizedColorPickerMessagesDirective } from './colorpicker/localization/localized-colorpicker-messages.directive';
 import { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
 import { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
 import { ContrastComponent } from './colorpicker/contrast.component';
+import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
 var PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
     ColorGradientComponent,
+    FlatColorPickerComponent,
     LocalizedColorPickerMessagesDirective,
     ColorPickerCustomMessagesComponent
 ];
@@ -29,7 +34,10 @@ var INTERNAL_DIRECTIVES = [
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
-    ContrastValidationComponent
+    ContrastValidationComponent,
+    FlatColorPickerHeaderComponent,
+    FlatColorPickerActionButtonsComponent,
+    ColorContrastSvgComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})

package/dist/es/common/models/fillmode.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/models/rounded.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/models/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/models/styling-classes.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/utils.js

@@ -34,3 +34,40 @@ export var fitIntoBounds = function (contender, min, max) {
     }
     return contender <= min ? min : contender >= max ? max : contender;
 };
+var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+var ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export var getStylingClasses = function (componentType, stylingOption, previousValue, newValue) {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: "k-" + componentType + "-" + SIZES[previousValue],
+                toAdd: newValue ? "k-" + componentType + "-" + SIZES[newValue] : null
+            };
+        case 'rounded':
+            return {
+                toRemove: "k-rounded-" + ROUNDNESS[previousValue],
+                toAdd: newValue ? "k-rounded-" + ROUNDNESS[newValue] : null
+            };
+        case 'fillMode':
+            return {
+                toRemove: "k-" + componentType + "-" + previousValue,
+                toAdd: newValue ? "k-" + componentType + "-" + newValue : null
+            };
+        default:
+            break;
+    }
+};

package/dist/es/index.js

@@ -7,16 +7,21 @@
  */
 export * from './main';
 export { CheckBoxModule } from './checkbox.module';
+export { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
 export { ColorInputComponent } from './colorpicker/color-input.component';
 export { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
 export { ContrastComponent } from './colorpicker/contrast.component';
+export { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
+export { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
 export { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
 export { ColorGradientLocalizationService } from './colorpicker/localization/colorgradient-localization.service';
 export { ColorPaletteLocalizationService } from './colorpicker/localization/colorpalette-localization.service';
 export { ColorPickerLocalizationService } from './colorpicker/localization/colorpicker-localization.service';
 export { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
+export { FlatColorPickerLocalizationService } from './colorpicker/localization/flatcolorpicker-localization.service';
 export { ColorPickerMessages } from './colorpicker/localization/messages';
 export { ColorPaletteService } from './colorpicker/services/color-palette.service';
+export { FlatColorPickerService } from './colorpicker/services/flatcolorpicker.service';
 export { MaskingService } from './maskedtextbox/masking.service';
 export { NumericTextBoxMessages } from './numerictextbox/localization/messages';
 export { RadioButtonModule } from './radiobutton.module';

package/dist/es/main.js

@@ -6,7 +6,6 @@ export { SliderComponent } from './slider/slider.component';
 export { RangeSliderComponent } from './rangeslider/rangeslider.component';
 export { LabelTemplateDirective } from './sliders-common/label-template.directive';
 export { SwitchComponent } from './switch/switch.component';
-export { TextBoxContainerComponent } from './textbox/textbox-container.component';
 export { TextBoxDirective } from './textbox/textbox.directive';
 export { TextAreaDirective } from './shared/textarea.directive';
 export { NumericTextBoxComponent } from './numerictextbox/numerictextbox.component';
@@ -21,11 +20,14 @@ export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';
 export { TextAreaModule } from './textarea.module';
+// All ColorPicker Components
 export { ColorPickerComponent } from './colorpicker/colorpicker.component';
 export { ColorPaletteComponent } from './colorpicker/color-palette.component';
 export { ColorGradientComponent } from './colorpicker/color-gradient.component';
 export { ColorPickerModule } from './colorpicker.module';
-export { ActiveColorClickEvent } from './colorpicker/models';
+export * from './colorpicker/events';
+export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
+export { ColorPickerCancelEvent } from './colorpicker/events';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 export { HintComponent } from './formfield/hint.component';

package/dist/es/maskedtextbox/maskedtextbox.component.js

@@ -11,9 +11,9 @@ 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 } from '../common/utils';
+import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
 var resolvedPromise = Promise.resolve(null);
-var FOCUSED = 'k-state-focused';
+var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -147,6 +147,9 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         };
         this.isPasted = false;
         this.selection = [0, 0];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -200,6 +203,66 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         this.updateService();
     }
     MaskedTextBoxComponent_1 = MaskedTextBoxComponent;
+    Object.defineProperty(MaskedTextBoxComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the font size and line height of the MaskedTextBox
+         * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MaskedTextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MaskedTextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the MaskedTexBox
+         * ([see example]({% slug appearance_maskedtextbox %}#toc-fillMode)).
+         * The possible values are:
+         * * `flat`
+         * * `solid` (default)
+         * * `outline`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MaskedTextBoxComponent.prototype, "hostDisabledClass", {
         get: function () {
             return this.disabled;
@@ -239,9 +302,16 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         this.control = this.injector.get(NgControl, null);
     };
+    MaskedTextBoxComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the MaskedTextBox is empty.
+     * Used by the FloatingLabel to determine if the MaskedTextBox is empty.
      */
     MaskedTextBoxComponent.prototype.isEmpty = function () {
         if (this.input) {
@@ -493,6 +563,16 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         return present ? value : '';
     };
+    MaskedTextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     var MaskedTextBoxComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -510,17 +590,32 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], MaskedTextBoxComponent.prototype, "title", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MaskedTextBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MaskedTextBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        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-widget'),
+        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-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
@@ -615,7 +710,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-maskedtextbox',
-            template: "\n        <input type=\"text\"\n            #input\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            class=\"k-textbox\"\n            [id]=\"focusableId\"\n            [tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur,\n                click: handleClick,\n                dragstart: handleDragDrop,\n                drop: handleDragDrop\n            }\"\n        />\n    "
+            template: "\n        <input type=\"text\"\n            #input\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            class=\"k-input-inner\"\n            [id]=\"focusableId\"\n            [tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur,\n                click: handleClick,\n                dragstart: handleDragDrop,\n                drop: handleDragDrop\n            }\"\n        />\n    "
         }),
         tslib_1.__param(6, Optional()), tslib_1.__param(6, Inject(RTL)),
         tslib_1.__metadata("design:paramtypes", [MaskingService,