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

package/dist/es/textarea/textarea.component.js

@@ -10,7 +10,7 @@ import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { KendoInput, guid, isDocumentAvailable, hasObservers, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { TextFieldsBase } from '../text-fields-common/text-fields-base';
-import { areSame, isPresent } from '../common/utils';
+import { areSame, isPresent, getStylingClasses } from '../common/utils';
 import { invokeElementMethod } from '../common/dom-utils';
 import { closest } from './../common/dom-utils';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -22,7 +22,7 @@ var resizeClasses = {
     'none': 'k-resize-none',
     'auto': 'k-resize-none'
 };
-var FOCUSED = 'k-state-focus';
+var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -40,7 +40,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
          * @hidden
          */
         _this.focusableId = "k-" + guid();
-        _this.hostClass = true;
+        _this.hostClasses = true;
         /**
          * Specifies the flow direction of the TextArea sections. This property is useful when adornments are used, in order to specify
          * their position in relation to the textarea element.
@@ -114,6 +114,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
          * When the component value is changed programmatically or via its form control binding, the valueChange event is not emitted.
          */
         _this.valueChange = new EventEmitter();
+        _this._size = 'medium';
+        _this._rounded = 'medium';
+        _this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -183,6 +186,69 @@ var TextAreaComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TextAreaComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the font size and line height of the TextArea
+         * ([see example]({% slug appearance_textarea %}#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(TextAreaComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the TextArea
+         * ([see example]({% slug appearance_textarea %}#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(TextAreaComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the TextArea
+         * ([see example]({% slug appearance_textarea %}#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
+    });
     TextAreaComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         var hostElement = this.hostElement.nativeElement;
@@ -230,6 +296,10 @@ var TextAreaComponent = /** @class */ (function (_super) {
                 }
             }));
         });
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     TextAreaComponent.prototype.ngOnInit = function () {
         var _this = this;
@@ -403,6 +473,16 @@ var TextAreaComponent = /** @class */ (function (_super) {
             this.setSelection(0, this.value.length);
         }
     };
+    TextAreaComponent.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 TextAreaComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -410,8 +490,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
     ], TextAreaComponent.prototype, "focusableId", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-textarea'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextAreaComponent.prototype, "hostClass", void 0);
+    ], TextAreaComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-flex-col'),
         tslib_1.__metadata("design:type", Boolean),
@@ -451,6 +532,21 @@ var TextAreaComponent = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], TextAreaComponent.prototype, "resizable", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextAreaComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextAreaComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextAreaComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Output('focus'),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -477,7 +573,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: forwardRef(function () { return TextAreaComponent_1; }) }
             ],
             selector: 'kendo-textarea',
-            template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    "
+            template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             NgZone,

package/dist/es/textbox/textbox.component.js

@@ -10,13 +10,13 @@ import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBin
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { invokeElementMethod } from '../common/dom-utils';
-import { areSame, requiresZoneOnBlur } from '../common/utils';
+import { areSame, requiresZoneOnBlur, getStylingClasses } from '../common/utils';
 import { guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isSafari } from '../shared/utils';
-var FOCUSED = 'k-state-focused';
+var FOCUSED = 'k-focus';
 var TextBoxComponent = /** @class */ (function () {
     function TextBoxComponent(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         var _this = this;
@@ -151,9 +151,12 @@ var TextBoxComponent = /** @class */ (function () {
          * ```
          */
         this.onBlur = new EventEmitter();
-        this.hostClass = true;
+        this.hostClasses = true;
         this._isFocused = false;
         this.focusChangedProgrammatically = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -208,6 +211,70 @@ var TextBoxComponent = /** @class */ (function () {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     TextBoxComponent_1 = TextBoxComponent;
+    Object.defineProperty(TextBoxComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the font size and line height of the TextBox
+         * ([see example]({% slug appearance_textbox %}#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(TextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the TextBox
+         * ([see example]({% slug appearance_textbox %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the TextBox
+         * ([see example]({% slug appearance_textbox %}#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(TextBoxComponent.prototype, "tabIndex", {
         get: function () {
             return this.tabindex;
@@ -284,6 +351,10 @@ var TextBoxComponent = /** @class */ (function () {
                 }
             }));
         });
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     TextBoxComponent.prototype.ngOnChanges = function (changes) {
         if (changes.disabled || changes.readonly || changes.value) {
@@ -417,8 +488,8 @@ var TextBoxComponent = /** @class */ (function () {
          */
         get: function () {
             return this.successIcon
-                ? "k-text-success " + this.successIcon
-                : "k-text-success k-icon k-i-check-outline";
+                ? "" + this.successIcon
+                : "k-validation-icon k-icon k-i-check";
         },
         enumerable: true,
         configurable: true
@@ -429,8 +500,8 @@ var TextBoxComponent = /** @class */ (function () {
          */
         get: function () {
             return this.errorIcon
-                ? "k-text-error " + this.errorIcon
-                : "k-text-error k-icon k-i-warning";
+                ? "" + this.errorIcon
+                : "k-validation-icon k-icon k-i-warning";
         },
         enumerable: true,
         configurable: true
@@ -442,7 +513,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.clearButtonIcon
                 ? this.clearButtonIcon
-                : "k-icon k-i-close-circle";
+                : "k-icon k-i-x";
         },
         enumerable: true,
         configurable: true
@@ -521,6 +592,16 @@ var TextBoxComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
+    TextBoxComponent.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 TextBoxComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -574,6 +655,21 @@ var TextBoxComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], TextBoxComponent.prototype, "clearButtonIcon", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Number),
@@ -620,14 +716,15 @@ var TextBoxComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", TextBoxPrefixTemplateDirective)
     ], TextBoxComponent.prototype, "prefixTemplate", 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", [])
     ], TextBoxComponent.prototype, "disabledClass", null);
     tslib_1.__decorate([
         HostBinding('class.k-textbox'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextBoxComponent.prototype, "hostClass", void 0);
+    ], TextBoxComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
@@ -646,7 +743,7 @@ var TextBoxComponent = /** @class */ (function () {
                 { provide: KendoInput, useExisting: forwardRef(function () { return TextBoxComponent_1; }) }
             ],
             selector: 'kendo-textbox',
-            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input\n            class=\"k-input\"\n            #input\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"/>\n        <span class=\"k-input-suffix\">\n            <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n            <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n            <span\n                role=\"button\"\n                class=\"k-clear-value\"\n                *ngIf=\"showClearButton\"\n                (click)=\"clearValue()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [tabindex]=\"tabIndex\"\n                [attr.aria-label]=\"clearTitle()\"\n                [title]=\"clearTitle()\"\n                (keydown.enter)=\"clearValue($event)\"\n                (keydown.space)=\"clearValue($event)\"\n                >\n                <span [ngClass]=\"clearButtonClasses\"></span>\n            </span>\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
+            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input\n            class=\"k-input-inner\"\n            #input\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"/>\n        <span class=\"k-input-suffix\">\n            <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n            <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n            <span\n                role=\"button\"\n                class=\"k-clear-value\"\n                *ngIf=\"showClearButton\"\n                (click)=\"clearValue()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [tabindex]=\"tabIndex\"\n                [attr.aria-label]=\"clearTitle()\"\n                [title]=\"clearTitle()\"\n                (keydown.enter)=\"clearValue($event)\"\n                (keydown.space)=\"clearValue($event)\"\n                >\n                <span [ngClass]=\"clearButtonClasses\"></span>\n            </span>\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             NgZone,

package/dist/es/textbox/textbox.directive.js

@@ -21,7 +21,7 @@ var TextBoxDirective = /** @class */ (function () {
         this.renderer = renderer;
         this.inputElement = inputElement;
         this.ngZone = ngZone;
-        this.hostClass = true;
+        this.hostClasses = true;
         /**
          * @hidden
          */
@@ -99,8 +99,9 @@ var TextBoxDirective = /** @class */ (function () {
     var TextBoxDirective_1;
     tslib_1.__decorate([
         HostBinding('class.k-textbox'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextBoxDirective.prototype, "hostClass", void 0);
+    ], TextBoxDirective.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String),

package/dist/es/textbox.module.js

@@ -5,7 +5,6 @@
 import * as tslib_1 from "tslib";
 import { NgModule } from "@angular/core";
 import { TextBoxDirective } from "./textbox/textbox.directive";
-import { TextBoxContainerComponent } from "./textbox/textbox-container.component";
 import { TextBoxComponent } from "./textbox/textbox.component";
 import { CommonModule } from "@angular/common";
 import { EventsModule } from "@progress/kendo-angular-common";
@@ -52,7 +51,6 @@ var TextBoxModule = /** @class */ (function () {
         NgModule({
             declarations: [
                 TextBoxDirective,
-                TextBoxContainerComponent,
                 TextBoxComponent,
                 TextBoxSuffixTemplateDirective,
                 TextBoxPrefixTemplateDirective,
@@ -61,7 +59,6 @@ var TextBoxModule = /** @class */ (function () {
             ],
             exports: [
                 TextBoxDirective,
-                TextBoxContainerComponent,
                 TextBoxComponent,
                 TextBoxSuffixTemplateDirective,
                 TextBoxPrefixTemplateDirective,

package/dist/es2015/checkbox/checkbox.directive.d.ts

@@ -2,6 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2 } from '@angular/core';
+import { CheckBoxRounded, InputSize } from '../common/models';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -12,5 +14,34 @@
  * ```
  */
 export declare class CheckBoxDirective {
+    private renderer;
+    private hostElement;
     kendoClass: boolean;
+    /**
+     * The size property specifies the width and height of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    rounded: CheckBoxRounded;
+    private _size;
+    private _rounded;
+    constructor(renderer: Renderer2, hostElement: ElementRef);
+    ngAfterViewInit(): void;
+    private handleClasses;
 }

package/dist/es2015/checkbox/checkbox.directive.js

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { getStylingClasses } from '../common/utils';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -14,26 +15,83 @@ import { Directive, HostBinding } from '@angular/core';
  * ```
  */
 let CheckBoxDirective = class CheckBoxDirective {
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.kendoClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
+    }
     /**
-     * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
-     * The directive is placed on input type="checkbox" elements.
+     * The size property specifies the width and height of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
-     * @example
-     * ```ts-no-run
-     * <input type="checkbox" kendoCheckBox />
-     * ```
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
      */
-    constructor() {
-        this.kendoClass = true;
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('checkbox', 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([
     HostBinding('class.k-checkbox'),
     tslib_1.__metadata("design:type", Boolean)
 ], CheckBoxDirective.prototype, "kendoClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], CheckBoxDirective.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], CheckBoxDirective.prototype, "rounded", null);
 CheckBoxDirective = tslib_1.__decorate([
     Directive({
         selector: 'input[kendoCheckBox]'
-    })
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2,
+        ElementRef])
 ], CheckBoxDirective);
 export { CheckBoxDirective };

package/dist/es2015/colorpicker/color-contrast-svg.component.d.ts

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SimpleChanges, AfterViewInit, OnChanges } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { HSVA } from './models';
+/**
+ * @hidden
+ */
+export declare class ColorContrastSvgComponent implements AfterViewInit, OnChanges {
+    hostClass: boolean;
+    wrapper: any;
+    hsva: BehaviorSubject<HSVA>;
+    backgroundColor: string;
+    paths: any[];
+    oldHsva: HSVA;
+    oldH: number;
+    oldA: number;
+    metrics: any;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    setPaths(): void;
+    private findValue;
+    private getPaths;
+}