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

package/dist/npm/textbox/textbox.component.js

@@ -18,7 +18,7 @@ var textbox_suffix_directive_1 = require("./textbox-suffix.directive");
 var textbox_prefix_directive_1 = require("./textbox-prefix.directive");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var utils_3 = require("../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;
@@ -153,9 +153,12 @@ var TextBoxComponent = /** @class */ (function () {
          * ```
          */
         this.onBlur = new core_1.EventEmitter();
-        this.hostClass = true;
+        this.hostClasses = true;
         this._isFocused = false;
         this.focusChangedProgrammatically = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -210,6 +213,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;
@@ -286,6 +353,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) {
@@ -419,8 +490,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
@@ -431,8 +502,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
@@ -444,7 +515,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
@@ -523,6 +594,16 @@ var TextBoxComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
+    TextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = utils_2.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([
         core_1.Input(),
@@ -576,6 +657,21 @@ var TextBoxComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], TextBoxComponent.prototype, "clearButtonIcon", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Number),
@@ -622,14 +718,15 @@ var TextBoxComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", textbox_prefix_directive_1.TextBoxPrefixTemplateDirective)
     ], TextBoxComponent.prototype, "prefixTemplate", 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", [])
     ], TextBoxComponent.prototype, "disabledClass", null);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-textbox'),
+        core_1.HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextBoxComponent.prototype, "hostClass", void 0);
+    ], TextBoxComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
@@ -648,7 +745,7 @@ var TextBoxComponent = /** @class */ (function () {
                 { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.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 #input\n            class=\"k-input-inner\"\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        />\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                <span [ngClass]=\"clearButtonClasses\"></span>\n        </span>\n        <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n        <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n        <span class=\"k-input-suffix\">\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.NgZone,

package/dist/npm/textbox/textbox.directive.js

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

package/dist/npm/textbox.module.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var textbox_directive_1 = require("./textbox/textbox.directive");
-var textbox_container_component_1 = require("./textbox/textbox-container.component");
 var textbox_component_1 = require("./textbox/textbox.component");
 var common_1 = require("@angular/common");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
@@ -54,7 +53,6 @@ var TextBoxModule = /** @class */ (function () {
         core_1.NgModule({
             declarations: [
                 textbox_directive_1.TextBoxDirective,
-                textbox_container_component_1.TextBoxContainerComponent,
                 textbox_component_1.TextBoxComponent,
                 textbox_suffix_directive_1.TextBoxSuffixTemplateDirective,
                 textbox_prefix_directive_1.TextBoxPrefixTemplateDirective,
@@ -63,7 +61,6 @@ var TextBoxModule = /** @class */ (function () {
             ],
             exports: [
                 textbox_directive_1.TextBoxDirective,
-                textbox_container_component_1.TextBoxContainerComponent,
                 textbox_component_1.TextBoxComponent,
                 textbox_suffix_directive_1.TextBoxSuffixTemplateDirective,
                 textbox_prefix_directive_1.TextBoxPrefixTemplateDirective,