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

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-gradient.component.js

@@ -642,7 +642,7 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                 </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-flat k-button-icon"
+                <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
                     *ngIf="clearButton"
                     (click)="reset()"
                     (keydown.enter)="reset()"

package/dist/es2015/colorpicker/color-input.component.js

@@ -172,7 +172,7 @@ ColorInputComponent = tslib_1.__decorate([
         template: `
         <div class="k-vstack">
             <button #toggleFormatButton
-                class="k-colorgradient-toggle-mode k-button k-icon-button k-flat"
+                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
             >

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

@@ -2,23 +2,26 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone, OnChanges, OnInit } from '@angular/core';
+import { EventEmitter, ElementRef, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone, OnChanges, OnInit, AfterViewInit, Renderer2 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupSettings, PaletteSettings, OutputFormat, ColorPickerView, GradientSettings, ColorPickerActionsLayout } from './models';
 import { ActiveColorClickEvent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
+import { InputFillMode, InputRounded, InputSize } from '../common/models';
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
  * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
-export declare class ColorPickerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
+export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
+    private host;
     private popupService;
     private cdr;
     private localizationService;
     private ngZone;
+    private renderer;
     hostClasses: boolean;
     direction: string;
     /**
@@ -126,6 +129,40 @@ export declare class ColorPickerComponent implements OnInit, OnChanges, OnDestro
      * * `stretch`
      */
     actionsLayout: ColorPickerActionsLayout;
+    /**
+     * The size property specifies the font size and line height of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    /**
+     * The rounded property specifies the border radius of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    rounded: InputRounded;
+    /**
+     * The fillMode property specifies the background and border styles of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     */
+    fillMode: InputFillMode;
     /**
      * Fires each time the value is changed.
      */
@@ -195,9 +232,13 @@ export declare class ColorPickerComponent implements OnInit, OnChanges, OnDestro
     private _popupSettings;
     private _paletteSettings;
     private _gradientSettings;
+    private _size;
+    private _rounded;
+    private _fillMode;
     private dynamicRTLSubscription;
-    constructor(popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone);
+    constructor(host: ElementRef, popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone, renderer: Renderer2);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     /**
@@ -280,6 +321,7 @@ export declare class ColorPickerComponent implements OnInit, OnChanges, OnDestro
      * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty(): boolean;
+    private handleClasses;
     private popupBlurInvalid;
     private toggleWithEvents;
     private focusFirstElement;