@progress/kendo-angular-inputs 14.4.0-develop.17 → 14.4.0-develop.19

package/esm2020/numerictextbox/numerictextbox.component.mjs

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild, forwardRef, isDevMode, NgZone, ChangeDetectorRef, Injector } from '@angular/core';
-import { anyChanged, hasObservers, Keys, guid, KendoInput } from '@progress/kendo-angular-common';
+import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild, forwardRef, isDevMode, NgZone, ChangeDetectorRef, Injector, ContentChild } from '@angular/core';
+import { anyChanged, hasObservers, Keys, guid, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
 import { areSame, getStylingClasses, requiresZoneOnBlur } from '../common/utils';
 import { invokeElementMethod } from '../common/dom-utils';
 import { add, toFixedPrecision, limitPrecision } from '../common/math';
@@ -23,10 +23,12 @@ import { caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "@progress/kendo-angular-icons";
-import * as i4 from "./localization/localized-numerictextbox-messages.directive";
-import * as i5 from "@progress/kendo-angular-common";
-import * as i6 from "@angular/common";
+import * as i3 from "../shared/input-separator.component";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./localization/localized-numerictextbox-messages.directive";
+import * as i6 from "../shared/shared-events.directive";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-common";
 const PARSABLE_OPTIONS = ['min', 'max', 'step', 'decimals'];
 const PARSABLE_DEFAULTS = {
     decimals: null,
@@ -117,13 +119,21 @@ export class NumericTextBoxComponent {
          */
         this.valueChange = new EventEmitter();
         /**
-         * Fires each time the user focuses the `input` element ([see example]({% slug overview_numerictextbox %}#toc-events)).
+         * Fires each time the user focuses the NumericTextBox element ([see example]({% slug overview_numerictextbox %}#toc-events)).
          */
         this.onFocus = new EventEmitter();
         /**
-         * Fires each time the `input` element gets blurred ([see example]({% slug overview_numerictextbox %}#toc-events)).
+         * Fires each time the NumericTextBox component gets blurred. ([see example]({% slug overview_numerictextbox %}#toc-events)).
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user focuses the `input` element.
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         */
+        this.inputBlur = new EventEmitter();
         /**
          * @hidden
          */
@@ -238,7 +248,7 @@ export class NumericTextBoxComponent {
         /**
          * @hidden
          */
-        this.handleFocus = () => {
+        this.handleInputFocus = () => {
             if (!this.focused) {
                 this.focused = true;
                 if (!this.isDisabled) {
@@ -254,11 +264,16 @@ export class NumericTextBoxComponent {
                         }, 0);
                     });
                 }
+                if (hasObservers(this.onFocus)) {
+                    this.ngZone.run(() => {
+                        this.onFocus.emit();
+                    });
+                }
             }
             this.mouseDown = false;
-            if (hasObservers(this.onFocus)) {
+            if (hasObservers(this.inputFocus)) {
                 this.ngZone.run(() => {
-                    this.onFocus.emit();
+                    this.inputFocus.emit();
                 });
             }
         };
@@ -273,13 +288,30 @@ export class NumericTextBoxComponent {
                 this.handleInput();
             }
             this.setInputValue();
-            if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
+            if (hasObservers(this.onBlur)) {
                 this.ngZone.run(() => {
                     this.ngTouched();
                     this.onBlur.emit();
                 });
             }
         };
+        /**
+         * @hidden
+         */
+        this.handleInputBlur = () => {
+            this.changeDetector.markForCheck();
+            //blur is thrown before input when dragging the input text in IE
+            if (this.inputValue !== this.elementValue) {
+                this.handleInput();
+            }
+            this.setInputValue();
+            if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.ngTouched();
+                    this.inputBlur.emit();
+                });
+            }
+        };
         /**
          * @hidden
          */
@@ -524,6 +556,17 @@ export class NumericTextBoxComponent {
     notifyValueChange() {
         this.setInputValue();
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.ngZone.run(() => {
+            if (!this.focused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.focused = true;
+        });
+    }
     /**
      * @hidden
      */
@@ -542,19 +585,15 @@ export class NumericTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
-    get decimalSeparator() {
-        const numberSymbols = this.intl.numberSymbols();
-        return numberSymbols.decimal;
-    }
-    get elementValue() {
-        return this.numericInput.nativeElement.value;
-    }
-    set elementValue(value) {
-        this.renderer.setProperty(this.numericInput.nativeElement, 'value', value);
-    }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
+    /**
+     * @hidden
+     */
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
             const wrap = this.hostElement.nativeElement;
@@ -567,6 +606,16 @@ export class NumericTextBoxComponent {
             this.isFocused = value;
         }
     }
+    get decimalSeparator() {
+        const numberSymbols = this.intl.numberSymbols();
+        return numberSymbols.decimal;
+    }
+    get elementValue() {
+        return this.numericInput.nativeElement.value;
+    }
+    set elementValue(value) {
+        this.renderer.setProperty(this.numericInput.nativeElement, 'value', value);
+    }
     get hasDecimals() {
         return this.decimals !== null && this.decimals >= 0;
     }
@@ -579,8 +628,8 @@ export class NumericTextBoxComponent {
             return;
         }
         if (!mobileOS) {
-            this.focused = true;
             this.focus();
+            this.focused = true;
         }
         if (this.arrowDirection !== direction) {
             this.arrowDirection = direction;
@@ -868,13 +917,13 @@ export class NumericTextBoxComponent {
     }
 }
 NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
+NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) }
-    ], viewQueries: [{ propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true, static: true }], exportAs: ["kendoNumericTextBox"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true, static: true }], exportAs: ["kendoNumericTextBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoNumericTextBoxLocalizedMessages
             i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox"
             increment="Increase value"
@@ -882,6 +931,18 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             decrement="Decrease value"
         >
         </ng-container>
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="focused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
             <input
                 role="spinbutton"
                 class="k-input-inner"
@@ -903,51 +964,57 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     dragenter: handleDragEnter,
                     keydown: handleKeyDown,
                     input: handleInput,
-                    focus: handleFocus,
-                    blur: handleBlur,
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
                     paste: handlePaste
                 }"
                 #numericInput />
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate?.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
             <span
                 class="k-input-spinner k-spin-button" *ngIf="spinners"
                 [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
             >
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="incrementTitle"
-                    [title]="incrementTitle"
-                    class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
-                    tabindex="-1"
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="incrementTitle"
+                [title]="incrementTitle"
+                class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                [class.k-active]="arrowDirection === ArrowDirection.Up"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowUpIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-up"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowUpIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </button>
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="decrementTitle"
-                    [title]="decrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Down"
-                    class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    tabindex="-1"
+                </kendo-icon-wrapper>
+            </button>
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="decrementTitle"
+                [title]="decrementTitle"
+                [class.k-active]="arrowDirection === ArrowDirection.Down"
+                class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowDownIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-down"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowDownIcon"
-                    >
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        </ng-container>
+    `, isInline: true, components: [{ type: i3.InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i6.SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -968,6 +1035,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             decrement="Decrease value"
         >
         </ng-container>
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="focused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
             <input
                 role="spinbutton"
                 class="k-input-inner"
@@ -989,51 +1068,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     dragenter: handleDragEnter,
                     keydown: handleKeyDown,
                     input: handleInput,
-                    focus: handleFocus,
-                    blur: handleBlur,
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
                     paste: handlePaste
                 }"
                 #numericInput />
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate?.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
             <span
                 class="k-input-spinner k-spin-button" *ngIf="spinners"
                 [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
             >
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="incrementTitle"
-                    [title]="incrementTitle"
-                    class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
-                    tabindex="-1"
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="incrementTitle"
+                [title]="incrementTitle"
+                class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                [class.k-active]="arrowDirection === ArrowDirection.Up"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowUpIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-up"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowUpIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </button>
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="decrementTitle"
-                    [title]="decrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Down"
-                    class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    tabindex="-1"
+                </kendo-icon-wrapper>
+            </button>
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="decrementTitle"
+                [title]="decrementTitle"
+                [class.k-active]="arrowDirection === ArrowDirection.Down"
+                class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowDownIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-down"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowDownIcon"
-                    >
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `
+        </ng-container>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
                 type: Input
@@ -1087,9 +1172,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], numericInput: [{
                 type: ViewChild,
                 args: ['numericInput', { static: true }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']

package/esm2020/numerictextbox.module.mjs

@@ -7,8 +7,10 @@ import { NumericTextBoxComponent } from './numerictextbox/numerictextbox.compone
 import { CommonModule } from '@angular/common';
 import { LocalizedNumericTextBoxMessagesDirective } from './numerictextbox/localization/localized-numerictextbox-messages.directive';
 import { NumericTextBoxCustomMessagesComponent } from './numerictextbox/localization/custom-messages.component';
-import { EventsModule } from '@progress/kendo-angular-common';
+import { AdornmentsModule, EventsModule } from '@progress/kendo-angular-common';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { SharedModule } from './shared.module';
+import { SharedEventsModule } from './shared-events.module';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -46,9 +48,10 @@ export class NumericTextBoxModule {
 NumericTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NumericTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, declarations: [LocalizedNumericTextBoxMessagesDirective,
         NumericTextBoxComponent,
-        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule, IconsModule], exports: [NumericTextBoxComponent,
-        NumericTextBoxCustomMessagesComponent] });
-NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule, IconsModule]] });
+        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule, IconsModule, SharedModule, AdornmentsModule, SharedEventsModule], exports: [NumericTextBoxComponent,
+        NumericTextBoxCustomMessagesComponent,
+        AdornmentsModule] });
+NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule, IconsModule, SharedModule, AdornmentsModule, SharedEventsModule], AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
@@ -59,8 +62,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     exports: [
                         NumericTextBoxComponent,
-                        NumericTextBoxCustomMessagesComponent
+                        NumericTextBoxCustomMessagesComponent,
+                        AdornmentsModule
                     ],
-                    imports: [CommonModule, EventsModule, IconsModule]
+                    imports: [CommonModule, EventsModule, IconsModule, SharedModule, AdornmentsModule, SharedEventsModule]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1706192685,
-    version: '14.4.0-develop.17',
+    publishDate: 1706287421,
+    version: '14.4.0-develop.19',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/shared/input-separator.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Specifies a separator in the content of components like the TextArea and the TextBox. ([see examples]({% slug adornments_textbox %}#toc-separator)).
@@ -24,18 +24,36 @@ import * as i0 from "@angular/core";
  */
 export class InputSeparatorComponent {
     constructor() {
+        /**
+         * Specifies the orientation of the separator.
+         */
+        this.orientation = 'vertical';
         this.hostClass = true;
     }
+    get vertical() {
+        return this.orientation === 'vertical';
+    }
+    get horizontal() {
+        return this.orientation === 'horizontal';
+    }
 }
 InputSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", host: { properties: { "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+InputSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: { orientation: "orientation" }, host: { properties: { "class.k-input-separator-vertical": "this.vertical", "class.k-input-separator-horizontal": "this.horizontal", "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-input-separator, kendo-textbox-separator',
                     template: ``
                 }]
-        }], propDecorators: { hostClass: [{
+        }], propDecorators: { orientation: [{
+                type: Input
+            }], vertical: [{
+                type: HostBinding,
+                args: ['class.k-input-separator-vertical']
+            }], horizontal: [{
+                type: HostBinding,
+                args: ['class.k-input-separator-horizontal']
+            }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-input-separator']
             }] } });

package/esm2020/shared/shared-events.directive.mjs

@@ -0,0 +1,95 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, EventEmitter, Input, NgZone, Output, Renderer2 } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { closest } from '../common/dom-utils';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class SharedInputEventsDirective {
+    constructor(ngZone, renderer, cdr) {
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.isFocusedChange = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.handleBlur = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        const hostElement = this.hostElement.nativeElement;
+        let cursorInsideWrapper = false;
+        let tabbing = false;
+        this.ngZone.runOutsideAngular(() => {
+            // focusIn and focusOut are relative to the host element
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                this.cdr.detectChanges();
+                if (!this.isFocused) {
+                    this.ngZone.run(() => {
+                        this.onFocus.emit();
+                        this.isFocused = true;
+                        this.isFocusedChange.emit(this.isFocused);
+                    });
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (args) => {
+                if (!this.isFocused) {
+                    return;
+                }
+                if (tabbing) {
+                    const closestTextbox = closest(args.relatedTarget, (element) => element === hostElement);
+                    if (!closestTextbox) {
+                        this.handleBlur.emit();
+                    }
+                    tabbing = false;
+                }
+                else {
+                    if (!cursorInsideWrapper && !this?.clearButtonClicked) {
+                        this.handleBlur.emit();
+                    }
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
+                cursorInsideWrapper = true;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'mouseleave', () => {
+                cursorInsideWrapper = false;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
+                if (args.keyCode === Keys.Tab) {
+                    tabbing = true;
+                }
+                else {
+                    tabbing = false;
+                }
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+}
+SharedInputEventsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedInputEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SharedInputEventsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedInputEventsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoInputSharedEvents]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostElement: [{
+                type: Input
+            }], clearButtonClicked: [{
+                type: Input
+            }], isFocused: [{
+                type: Input
+            }], isFocusedChange: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], handleBlur: [{
+                type: Output
+            }] } });