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

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

@@ -11,7 +11,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';
@@ -23,7 +23,7 @@ const resizeClasses = {
     'none': 'k-resize-none',
     'auto': 'k-resize-none'
 };
-const FOCUSED = 'k-state-focus';
+const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -40,7 +40,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
          * @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 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
          * 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
          */
@@ -169,6 +172,57 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * 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 size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * 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 rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * 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 fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     ngAfterViewInit() {
         const hostElement = this.hostElement.nativeElement;
         let cursorInsideWrapper = false;
@@ -215,6 +269,10 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
                 }
             }));
         });
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
     }
     ngOnInit() {
         this.control = this.injector.get(NgControl, null);
@@ -376,6 +434,16 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
             this.setSelection(0, this.value.length);
         }
     }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const 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);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -383,8 +451,9 @@ tslib_1.__decorate([
 ], 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),
@@ -424,6 +493,21 @@ tslib_1.__decorate([
     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)
@@ -456,7 +540,7 @@ TextAreaComponent = TextAreaComponent_1 = tslib_1.__decorate([
             [attr.aria-multiline]="true"
             [attr.aria-disabled]="disabled ? true : undefined"
             [attr.aria-readonly]="readonly ? true : undefined"
-            class="k-input"
+            class="k-input-inner"
             [ngClass]="resizableClass"
             [id]="focusableId"
             [value]="value"

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

@@ -9,6 +9,7 @@ import { IconShowOptions } from './models/icon-show-options';
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { InputSize, InputRounded, InputFillMode } from '../common/models';
 export declare class TextBoxComponent implements ControlValueAccessor {
     private localizationService;
     private ngZone;
@@ -94,6 +95,40 @@ export declare class TextBoxComponent implements ControlValueAccessor {
      * Sets a custom icon that will be rendered instead of the default one.
      */
     clearButtonIcon: string;
+    /**
+     * 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`
+     */
+    size: InputSize;
+    /**
+     * 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`
+     */
+    rounded: InputRounded;
+    /**
+     * 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`
+     */
+    fillMode: InputFillMode;
     /**
      * @hidden
      */
@@ -178,7 +213,7 @@ export declare class TextBoxComponent implements ControlValueAccessor {
      */
     prefixTemplate: TextBoxPrefixTemplateDirective;
     readonly disabledClass: boolean;
-    hostClass: boolean;
+    hostClasses: boolean;
     direction: string;
     /**
      * @hidden
@@ -189,6 +224,9 @@ export declare class TextBoxComponent implements ControlValueAccessor {
     private clearButtonClicked;
     private _isFocused;
     private focusChangedProgrammatically;
+    private _size;
+    private _rounded;
+    private _fillMode;
     constructor(localizationService: LocalizationService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, injector: Injector, hostElement: ElementRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -293,4 +331,5 @@ export declare class TextBoxComponent implements ControlValueAccessor {
     private updateValue;
     private isFocused;
     private handleBlur;
+    private handleClasses;
 }

package/dist/es2015/textbox/textbox.component.js

@@ -4,18 +4,20 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var TextBoxComponent_1;
+import { isJapanese } from './../shared/utils';
 import { closest } from './../common/dom-utils';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBinding, ViewChild, NgZone, ChangeDetectorRef, Injector, ContentChild, Renderer2 } from '@angular/core';
 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';
-const FOCUSED = 'k-state-focused';
+import { isSafari } from '../shared/utils';
+const FOCUSED = 'k-focus';
 let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -149,9 +151,12 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
          * ```
          */
         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
          */
@@ -197,7 +202,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
          * @hidden
          */
         this.handleInput = (ev) => {
-            let incomingValue = ev.target.value;
+            let incomingValue = isSafari(navigator.userAgent) && isJapanese(ev.target.value) ? ev.data : ev.target.value;
             this.updateValue(incomingValue);
         };
         this.ngChange = (_) => { };
@@ -205,6 +210,58 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    /**
+     * 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 size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * 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 rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * 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 fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -270,6 +327,10 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
                 }
             }));
         });
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
     }
     ngOnChanges(changes) {
         if (changes.disabled || changes.readonly || changes.value) {
@@ -402,16 +463,16 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
      */
     get successIconClasses() {
         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`;
     }
     /**
      * @hidden
      */
     get errorIconClasses() {
         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`;
     }
     /**
      * @hidden
@@ -419,7 +480,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     get clearButtonClasses() {
         return this.clearButtonIcon
             ? this.clearButtonIcon
-            : `k-icon k-i-close-circle`;
+            : `k-icon k-i-x`;
     }
     /**
      * @hidden
@@ -481,6 +542,16 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
             this.isFocused = false;
         });
     }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const 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);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -534,6 +605,21 @@ tslib_1.__decorate([
     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),
@@ -580,14 +666,15 @@ tslib_1.__decorate([
     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)
@@ -618,7 +705,7 @@ TextBoxComponent = TextBoxComponent_1 = tslib_1.__decorate([
             </ng-template>
         </span>
         <input
-            class="k-input"
+            class="k-input-inner"
             #input
             [id]="focusableId"
             [disabled]="disabled"

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

@@ -18,7 +18,7 @@ export declare class TextBoxDirective implements AfterViewInit, OnDestroy {
     private renderer;
     private inputElement;
     private ngZone;
-    hostClass: boolean;
+    hostClasses: boolean;
     /**
      * @hidden
      */

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

@@ -22,7 +22,7 @@ let TextBoxDirective = TextBoxDirective_1 = class TextBoxDirective {
         this.renderer = renderer;
         this.inputElement = inputElement;
         this.ngZone = ngZone;
-        this.hostClass = true;
+        this.hostClasses = true;
         /**
          * @hidden
          */
@@ -90,8 +90,9 @@ let TextBoxDirective = TextBoxDirective_1 = class TextBoxDirective {
 };
 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/es2015/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";
@@ -51,7 +50,6 @@ TextBoxModule = tslib_1.__decorate([
     NgModule({
         declarations: [
             TextBoxDirective,
-            TextBoxContainerComponent,
             TextBoxComponent,
             TextBoxSuffixTemplateDirective,
             TextBoxPrefixTemplateDirective,
@@ -60,7 +58,6 @@ TextBoxModule = tslib_1.__decorate([
         ],
         exports: [
             TextBoxDirective,
-            TextBoxContainerComponent,
             TextBoxComponent,
             TextBoxSuffixTemplateDirective,
             TextBoxPrefixTemplateDirective,