@progress/kendo-angular-inputs 8.0.0-dev.202112161434 → 8.0.0-dev.202201121416

package/dist/npm/colorpicker/flatcolorpicker.component.js

@@ -10,8 +10,10 @@ var forms_1 = require("@angular/forms");
 var rxjs_1 = require("rxjs");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
 var flatcolorpicker_localization_service_1 = require("./localization/flatcolorpicker-localization.service");
 var flatcolorpicker_service_1 = require("./services/flatcolorpicker.service");
+var package_metadata_1 = require("../package-metadata");
 var events_1 = require("./events");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
@@ -26,10 +28,10 @@ var flatcolorpicker_actions_component_1 = require("./flatcolorpicker-actions.com
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 var FlatColorPickerComponent = /** @class */ (function () {
-    function FlatColorPickerComponent(service, host, localizationService, cdr, renderer, ngZone) {
+    function FlatColorPickerComponent(host, service, localizationService, cdr, renderer, ngZone) {
         var _this = this;
-        this.service = service;
         this.host = host;
+        this.service = service;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.renderer = renderer;
@@ -112,6 +114,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
         this.subscriptions = new rxjs_1.Subscription();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -543,8 +546,8 @@ var FlatColorPickerComponent = /** @class */ (function () {
             ],
             template: "\n        <ng-container kendoFlatColorPickerLocalizedMessages\n            i18n-flatColorPickerNoColor=\"kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.flatcolorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.flatcolorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.flatcolorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.flatcolorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.flatcolorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.flatcolorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.flatcolorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.flatcolorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <div kendoFlatColorPickerHeader\n            *ngIf=\"headerHasContent\"\n            #header\n            [clearButton]=\"clearButton\"\n            [activeView]=\"activeView\"\n            [views]=\"views\"\n            [value]=\"value\"\n            [selection]=\"selection\"\n            [preview]=\"preview\"\n            (clearButtonClick)=\"onClearButtonClick()\"\n            (viewChange)=\"onViewChange($event)\"\n            (valuePaneClick)=\"resetSelection($event)\">\n        </div>\n        <div class=\"k-coloreditor-views k-vstack\">\n            <kendo-colorgradient #gradient\n                *ngIf=\"activeView === 'gradient'\"\n                [tabindex]=\"null\"\n                [value]=\"selection\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [delay]=\"gradientSettings.delay\"\n                [contrastTool]=\"gradientSettings.contrastTool\"\n                [readonly]=\"readonly\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette #palette\n                *ngIf=\"activeView === 'palette'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"selection\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorpalette>\n        </div>\n        <div kendoFlatColorPickerActionButtons *ngIf=\"preview\"\n            #footer\n            [ngClass]=\"'k-justify-content-' + actionsLayout\"\n            (actionButtonClick)=\"onAction($event)\">\n        </div>\n"
         }),
-        tslib_1.__metadata("design:paramtypes", [flatcolorpicker_service_1.FlatColorPickerService,
-            core_1.ElementRef,
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
+            flatcolorpicker_service_1.FlatColorPickerService,
             kendo_angular_l10n_1.LocalizationService,
             core_1.ChangeDetectorRef,
             core_1.Renderer2,

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

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/common/models.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/common/utils.js

@@ -36,3 +36,40 @@ exports.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
+ */
+exports.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/npm/main.js

@@ -13,8 +13,6 @@ var label_template_directive_1 = require("./sliders-common/label-template.direct
 exports.LabelTemplateDirective = label_template_directive_1.LabelTemplateDirective;
 var switch_component_1 = require("./switch/switch.component");
 exports.SwitchComponent = switch_component_1.SwitchComponent;
-var textbox_container_component_1 = require("./textbox/textbox-container.component");
-exports.TextBoxContainerComponent = textbox_container_component_1.TextBoxContainerComponent;
 var textbox_directive_1 = require("./textbox/textbox.directive");
 exports.TextBoxDirective = textbox_directive_1.TextBoxDirective;
 var textarea_directive_1 = require("./shared/textarea.directive");

package/dist/npm/maskedtextbox/maskedtextbox.component.js

@@ -15,7 +15,7 @@ var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var dom_utils_1 = require("../common/dom-utils");
 var utils_1 = require("../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 %}).
  *
@@ -149,6 +149,9 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         };
         this.isPasted = false;
         this.selection = [0, 0];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -202,6 +205,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;
@@ -241,9 +304,16 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         this.control = this.injector.get(forms_1.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) {
@@ -495,6 +565,16 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         return present ? value : '';
     };
+    MaskedTextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = utils_1.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([
         core_1.Input(),
@@ -512,17 +592,32 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], MaskedTextBoxComponent.prototype, "title", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MaskedTextBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MaskedTextBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MaskedTextBoxComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], MaskedTextBoxComponent.prototype, "direction", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
+        core_1.HostBinding('class.k-input'),
         core_1.HostBinding('class.k-maskedtextbox'),
         tslib_1.__metadata("design:type", Boolean)
     ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
@@ -617,7 +712,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, core_1.Optional()), tslib_1.__param(6, core_1.Inject(kendo_angular_l10n_1.RTL)),
         tslib_1.__metadata("design:paramtypes", [masking_service_1.MaskingService,

package/dist/npm/numerictextbox/numerictextbox.component.js

@@ -28,8 +28,7 @@ var PARSABLE_DEFAULTS = {
     min: null,
     step: 1
 };
-var FOCUSED = 'k-state-focused';
-var FORMATTED_VALUE = 'k-formatted-value';
+var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -125,15 +124,20 @@ var NumericTextBoxComponent = /** @class */ (function () {
          * @hidden
          */
         this.arrowDirection = arrow_direction_1.ArrowDirection.None;
+        this.hostClasses = true;
         this.inputValue = '';
         this.minValidateFn = utils_2.noop;
         this.maxValidateFn = utils_2.noop;
         this._format = "n2";
         this.isPasted = false;
         this.mouseDown = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.ngChange = utils_2.noop;
         this.ngTouched = utils_2.noop;
         this.ngValidatorChange = utils_2.noop;
+        this.domEvents = [];
         /**
          * @hidden
          */
@@ -328,9 +332,69 @@ var NumericTextBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(NumericTextBoxComponent.prototype, "widgetClasses", {
+    Object.defineProperty(NumericTextBoxComponent.prototype, "size", {
         get: function () {
-            return true;
+            return this._size;
+        },
+        /**
+         * The size property specifies the font size and line height of the NumericTextBox
+         * ([see example]({% slug appearance_numerictextbox %}#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(NumericTextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the NumericTextBox
+         * ([see example]({% slug appearance_numerictextbox %}#toc-rounded)).
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumericTextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the NumericTextBox
+         * ([see example]({% slug appearance_numerictextbox %}#toc-fillMode)).
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumericTextBoxComponent.prototype, "disableClass", {
+        get: function () {
+            return this.disabled;
         },
         enumerable: true,
         configurable: true
@@ -348,6 +412,17 @@ var NumericTextBoxComponent = /** @class */ (function () {
             this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
         }
         this.control = this.injector.get(forms_1.NgControl, null);
+        this.ngZone.runOutsideAngular(function () {
+            _this.domEvents.push(_this.renderer.listen(_this.hostElement.nativeElement, 'mousewheel', _this.handleWheel.bind(_this)));
+            _this.domEvents.push(_this.renderer.listen(_this.hostElement.nativeElement, 'DOMMouseScroll', _this.handleWheel.bind(_this)));
+        });
+    };
+    NumericTextBoxComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     /**
      * @hidden
@@ -381,6 +456,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
             this.subscriptions.unsubscribe();
         }
         clearTimeout(this.spinTimeout);
+        this.domEvents.forEach(function (unbindHandler) { return unbindHandler(); });
     };
     /**
      * @hidden
@@ -500,18 +576,13 @@ var NumericTextBoxComponent = /** @class */ (function () {
             return this.isFocused;
         },
         set: function (value) {
-            if (this.isFocused !== value && this.numericWrap) {
-                var wrap = this.numericWrap.nativeElement;
-                var input = this.numericInput.nativeElement;
+            if (this.isFocused !== value && this.hostElement) {
+                var wrap = this.hostElement.nativeElement;
                 if (value) {
                     this.renderer.addClass(wrap, FOCUSED);
-                    if (!this.isDisabled) {
-                        this.renderer.removeClass(input, FORMATTED_VALUE);
-                    }
                 }
                 else {
                     this.renderer.removeClass(wrap, FOCUSED);
-                    this.renderer.addClass(input, FORMATTED_VALUE);
                 }
                 this.isFocused = value;
             }
@@ -820,6 +891,16 @@ var NumericTextBoxComponent = /** @class */ (function () {
         }
         return significantChars;
     };
+    NumericTextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = utils_1.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 NumericTextBoxComponent_1;
     tslib_1.__decorate([
         core_1.Input(),
@@ -899,6 +980,21 @@ var NumericTextBoxComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Number)
     ], NumericTextBoxComponent.prototype, "maxlength", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], NumericTextBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], NumericTextBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], NumericTextBoxComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -915,20 +1011,20 @@ var NumericTextBoxComponent = /** @class */ (function () {
         core_1.ViewChild('numericInput', { static: true }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
     ], NumericTextBoxComponent.prototype, "numericInput", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('numericWrap', { static: true }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], NumericTextBoxComponent.prototype, "numericWrap", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], NumericTextBoxComponent.prototype, "direction", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
-        core_1.HostBinding('class.k-numerictextbox'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
-    ], NumericTextBoxComponent.prototype, "widgetClasses", null);
+    ], NumericTextBoxComponent.prototype, "disableClass", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-input'),
+        core_1.HostBinding('class.k-numerictextbox'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], NumericTextBoxComponent.prototype, "hostClasses", void 0);
     NumericTextBoxComponent = NumericTextBoxComponent_1 = tslib_1.__decorate([
         core_1.Component({
             exportAs: 'kendoNumericTextBox',
@@ -940,7 +1036,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
                 { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return NumericTextBoxComponent_1; }) }
             ],
             selector: 'kendo-numerictextbox',
-            template: "\n        <ng-container kendoNumericTextBoxLocalizedMessages\n            i18n-increment=\"kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox\"\n            increment=\"Increase value\"\n            i18n-decrement=\"kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox\"\n            decrement=\"Decrease value\"\n        >\n        </ng-container>\n        <span\n            class=\"k-numeric-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n            [kendoEventsOutsideAngular]=\"{ mousewheel: handleWheel, DOMMouseScroll: handleWheel }\"\n            #numericWrap>\n            <input\n            role=\"spinbutton\"\n            class=\"k-input k-formatted-value\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            [id]=\"focusableId\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.title]=\"title\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.maxLength]=\"maxlength\"\n            [tabindex]=\"tabIndex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: handleMouseDown,\n                dragenter: handleDragEnter,\n                keydown: handleKeyDown,\n                input: handleInput,\n                focus: handleFocus,\n                blur: handleBlur,\n                paste: handlePaste\n            }\"\n            #numericInput />\n            <span class=\"k-select\" *ngIf=\"spinners\" [kendoEventsOutsideAngular]=\"{ mouseup: releaseArrow, mouseleave: releaseArrow }\">\n                <span\n                    role=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: increasePress }\"\n                    [attr.aria-label]=\"incrementTitle\"\n                    [title]=\"incrementTitle\"\n                    [class.k-state-active]=\"arrowDirection === ArrowDirection.Up\"\n                    class=\"k-link k-link-increase\"\n                >\n                    <span class=\"k-icon k-i-arrow-n\"></span>\n                </span>\n                <span\n                    role=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: decreasePress }\"\n                    [attr.aria-label]=\"decrementTitle\"\n                    [title]=\"decrementTitle\"\n                    [class.k-state-active]=\"arrowDirection === ArrowDirection.Down\"\n                    class=\"k-link k-link-decrease\"\n                >\n                    <span class=\"k-icon k-i-arrow-s\"></span>\n                </span>\n            </span>\n        </span>\n      "
+            template: "\n        <ng-container kendoNumericTextBoxLocalizedMessages\n            i18n-increment=\"kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox\"\n            increment=\"Increase value\"\n            i18n-decrement=\"kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox\"\n            decrement=\"Decrease value\"\n        >\n        </ng-container>\n            <input\n            role=\"spinbutton\"\n            class=\"k-input-inner\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            [id]=\"focusableId\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.title]=\"title\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.maxLength]=\"maxlength\"\n            [tabindex]=\"tabIndex\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: handleMouseDown,\n                dragenter: handleDragEnter,\n                keydown: handleKeyDown,\n                input: handleInput,\n                focus: handleFocus,\n                blur: handleBlur,\n                paste: handlePaste\n            }\"\n            #numericInput />\n            <span\n                class=\"k-input-spinner k-spin-button\" *ngIf=\"spinners\"\n                [kendoEventsOutsideAngular]=\"{ mouseup: releaseArrow, mouseleave: releaseArrow }\"\n            >\n               <button\n                    type=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: increasePress }\"\n                    [attr.aria-hidden]=\"true\"\n                    [attr.aria-label]=\"incrementTitle\"\n                    [title]=\"incrementTitle\"\n                    [class.k-active]=\"arrowDirection === ArrowDirection.Up\"\n                    class=\"k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base\"\n                    tabindex=\"-1\"\n                >\n                    <span class=\"k-button-icon k-icon k-i-arrow-n\"></span>\n               </button>\n               <button\n                    type=\"button\"\n                    [kendoEventsOutsideAngular]=\"{ mousedown: decreasePress }\"\n                    [attr.aria-hidden]=\"true\"\n                    [attr.aria-label]=\"decrementTitle\"\n                    [title]=\"decrementTitle\"\n                    [class.k-active]=\"arrowDirection === ArrowDirection.Down\"\n                    class=\"k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base\"\n                    tabindex=\"-1\"\n               >\n                    <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n               </button>\n            </span>\n      "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_intl_1.IntlService,
             core_1.Renderer2,

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639665048,
+    publishDate: 1641996688,
     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/npm/radiobutton/radiobutton.directive.js

@@ -6,6 +6,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+var utils_1 = require("../common/utils");
+var package_metadata_1 = require("../package-metadata");
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -16,17 +19,66 @@ var core_1 = require("@angular/core");
  * ```
  */
 var RadioButtonDirective = /** @class */ (function () {
-    function RadioButtonDirective() {
+    function RadioButtonDirective(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
         this.kendoClass = true;
+        this._size = 'medium';
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
     }
+    Object.defineProperty(RadioButtonDirective.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the width and height of the RadioButton
+         * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    RadioButtonDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        // kept in sync with other inputs for easier refactoring
+        // to a common base class
+        var stylingInputs = ['size'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
+    RadioButtonDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = utils_1.getStylingClasses('radio', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     tslib_1.__decorate([
         core_1.HostBinding('class.k-radio'),
         tslib_1.__metadata("design:type", Boolean)
     ], RadioButtonDirective.prototype, "kendoClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], RadioButtonDirective.prototype, "size", null);
     RadioButtonDirective = tslib_1.__decorate([
         core_1.Directive({
             selector: 'input[kendoRadioButton]'
-        })
+        }),
+        tslib_1.__metadata("design:paramtypes", [core_1.Renderer2, core_1.ElementRef])
     ], RadioButtonDirective);
     return RadioButtonDirective;
 }());

package/dist/npm/shared/textarea.directive.js

@@ -28,7 +28,7 @@ var TextAreaDirective = /** @class */ (function () {
         this.zone = zone;
         this.changeDetector = changeDetector;
         this.injector = injector;
-        this.elementClass = true;
+        this.elementClasses = true;
         this.autofillClass = true;
         /**
          * Fires each time the textarea value is changed.
@@ -220,8 +220,9 @@ var TextAreaDirective = /** @class */ (function () {
     var TextAreaDirective_1;
     tslib_1.__decorate([
         core_1.HostBinding('class.k-textarea'),
+        core_1.HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextAreaDirective.prototype, "elementClass", void 0);
+    ], TextAreaDirective.prototype, "elementClasses", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-autofill'),
         tslib_1.__metadata("design:type", Boolean)