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

package/esm2020/colorpicker/color-input.component.mjs

@@ -270,7 +270,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/index.mjs

@@ -44,10 +44,14 @@ export { TextBoxPrefixTemplateDirective } from './textbox/textbox-prefix.directi
 export { TextBoxSuffixTemplateDirective } from './textbox/textbox-suffix.directive';
 //TextArea Component
 export { TextAreaComponent } from './textarea/textarea.component';
+export { TextAreaPrefixComponent } from './textarea/textarea-prefix.component';
 export { TextAreaSuffixComponent } from './textarea/textarea-suffix.component';
 //Shared
 export { InputSeparatorComponent } from './shared/input-separator.component';
 export { SharedModule } from './shared.module';
+export { PrefixTemplateDirective } from '@progress/kendo-angular-common';
+export { SuffixTemplateDirective } from '@progress/kendo-angular-common';
+export { SeparatorComponent } from '@progress/kendo-angular-common';
 export { LocalizedColorPickerMessagesDirective } from './colorpicker/localization/localized-colorpicker-messages.directive';
 export { LocalizedNumericTextBoxMessagesDirective } from './numerictextbox/localization/localized-numerictextbox-messages.directive';
 export { LocalizedTextBoxMessagesDirective } from './textbox/localization/localized-textbox-messages.directive';

package/esm2020/maskedtextbox/maskedtextbox.component.mjs

@@ -2,9 +2,9 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef, ContentChild } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { guid, hasObservers, isChanged, KendoInput } from '@progress/kendo-angular-common';
+import { guid, hasObservers, isChanged, KendoInput, PrefixTemplateDirective, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { RTL } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -13,7 +13,10 @@ import { invokeElementMethod } from '../common/dom-utils';
 import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./masking.service";
-import * as i2 from "@progress/kendo-angular-common";
+import * as i2 from "../shared/input-separator.component";
+import * as i3 from "../shared/shared-events.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-common";
 const resolvedPromise = Promise.resolve(null);
 const FOCUSED = 'k-focus';
 const DEFAULT_SIZE = 'medium';
@@ -91,7 +94,7 @@ export class MaskedTextBoxComponent {
          */
         this.tabindex = 0;
         /**
-         * Fires each time the user focuses the `input` element.
+         * Fires each time the user focuses the MaskedTextBox component.
          *
          * > To wire the event programmatically, use the `onFocus` property.
          *
@@ -112,7 +115,7 @@ export class MaskedTextBoxComponent {
          */
         this.onFocus = new EventEmitter();
         /**
-         * Fires each time the `input` element gets blurred.
+         * Fires each time the MaskedTextBox component gets blurred.
          *
          * > To wire the event programmatically, use the `onBlur` property.
          *
@@ -132,6 +135,14 @@ export class MaskedTextBoxComponent {
          * ```
          */
         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();
         /**
          * Fires each time the value changes.
          */
@@ -158,16 +169,27 @@ export class MaskedTextBoxComponent {
          * @hidden
          */
         this.handleFocus = () => {
-            this.focused = true;
+            this.ngZone.run(() => {
+                if (!this.focused && hasObservers(this.onFocus)) {
+                    this.onFocus.emit();
+                }
+                this.focused = true;
+            });
             if (this.maskOnFocus && this.emptyMask) {
                 this.updateInput(this.service.maskRaw(this.value));
                 this.ngZone.runOutsideAngular(() => {
                     setTimeout(() => { this.setSelection(0, 0); }, 0);
                 });
             }
-            if (hasObservers(this.onFocus)) {
+        };
+        /**
+         * @hidden
+         */
+        this.handleInputFocus = () => {
+            this.handleFocus();
+            if (hasObservers(this.inputFocus)) {
                 this.ngZone.run(() => {
-                    this.onFocus.emit();
+                    this.inputFocus.emit();
                 });
             }
         };
@@ -193,13 +215,25 @@ export class MaskedTextBoxComponent {
             if (this.maskOnFocus && this.emptyMask) {
                 this.updateInput(this.maskedValue);
             }
-            if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
+            if (hasObservers(this.onBlur)) {
                 this.ngZone.run(() => {
                     this.onTouched();
                     this.onBlur.emit();
                 });
             }
         };
+        /**
+         * @hidden
+         */
+        this.handleInputBlur = () => {
+            this.changeDetector.markForCheck();
+            if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.onTouched();
+                    this.inputBlur.emit();
+                });
+            }
+        };
         this.onChange = (_) => { };
         this.onTouched = () => { };
         validatePackage(packageMetadata);
@@ -325,6 +359,7 @@ export class MaskedTextBoxComponent {
             return;
         }
         this.input.nativeElement.focus();
+        this.focused = true;
         this.setFocusSelection();
     }
     /**
@@ -335,6 +370,7 @@ export class MaskedTextBoxComponent {
             return;
         }
         this.input.nativeElement.blur();
+        this.focused = false;
     }
     /**
      * @hidden
@@ -516,9 +552,15 @@ export class MaskedTextBoxComponent {
             this.setSelection();
         }
     }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
+    /**
+     * @hidden
+     */
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
             const element = this.hostElement.nativeElement;
@@ -553,7 +595,7 @@ export class MaskedTextBoxComponent {
     }
 }
 MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: i1.MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
         MaskingService,
         {
             multi: true,
@@ -569,30 +611,48 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: KendoInput,
             useExisting: forwardRef(() => MaskedTextBoxComponent)
         }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
-        <input type="text"
-            #input
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            class="k-input-inner"
-            [id]="focusableId"
-            [tabindex]="tabIndex"
-            [attr.title]="title"
-            [attr.aria-placeholder]="mask"
-            [attr.aria-invalid]="isControlInvalid"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur,
-                click: handleClick,
-                dragstart: handleDragDrop,
-                drop: handleDragDrop
-            }"
-        />
-    `, isInline: true, directives: [{ type: i2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
+        <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 type="text"
+                #input
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                class="k-input-inner"
+                [id]="focusableId"
+                [tabindex]="tabIndex"
+                [attr.title]="title"
+                [attr.aria-placeholder]="mask"
+                [attr.aria-invalid]="isControlInvalid"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [kendoEventsOutsideAngular]="{
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
+                    click: handleClick,
+                    dragstart: handleDragDrop,
+                    drop: handleDragDrop
+                }"
+            />
+            <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>
+        </ng-container>
+    `, isInline: true, components: [{ type: i2.InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: i3.SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -616,28 +676,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     selector: 'kendo-maskedtextbox',
                     template: `
-        <input type="text"
-            #input
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            class="k-input-inner"
-            [id]="focusableId"
-            [tabindex]="tabIndex"
-            [attr.title]="title"
-            [attr.aria-placeholder]="mask"
-            [attr.aria-invalid]="isControlInvalid"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur,
-                click: handleClick,
-                dragstart: handleDragDrop,
-                drop: handleDragDrop
-            }"
-        />
+        <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 type="text"
+                #input
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                class="k-input-inner"
+                [id]="focusableId"
+                [tabindex]="tabIndex"
+                [attr.title]="title"
+                [attr.aria-placeholder]="mask"
+                [attr.aria-invalid]="isControlInvalid"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [kendoEventsOutsideAngular]="{
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
+                    click: handleClick,
+                    dragstart: handleDragDrop,
+                    drop: handleDragDrop
+                }"
+            />
+            <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>
+        </ng-container>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.MaskingService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
@@ -685,6 +763,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], valueChange: [{
                 type: Output
             }], direction: [{
@@ -702,6 +784,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], pasteHandler: [{
                 type: HostListener,
                 args: ['paste', ['$event']]

package/esm2020/maskedtextbox.module.mjs

@@ -5,7 +5,9 @@
 import { NgModule } from '@angular/core';
 import { MaskedTextBoxComponent } from './maskedtextbox/maskedtextbox.component';
 import { CommonModule } from '@angular/common';
-import { EventsModule } from '@progress/kendo-angular-common';
+import { AdornmentsModule, EventsModule } from '@progress/kendo-angular-common';
+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'])
@@ -41,13 +43,35 @@ import * as i0 from "@angular/core";
 export class MaskedTextBoxModule {
 }
 MaskedTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaskedTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, declarations: [MaskedTextBoxComponent], imports: [CommonModule, EventsModule], exports: [MaskedTextBoxComponent] });
-MaskedTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, imports: [[CommonModule, EventsModule]] });
+MaskedTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, declarations: [MaskedTextBoxComponent], imports: [CommonModule,
+        EventsModule,
+        SharedModule,
+        AdornmentsModule,
+        SharedEventsModule], exports: [MaskedTextBoxComponent,
+        AdornmentsModule] });
+MaskedTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, imports: [[
+            CommonModule,
+            EventsModule,
+            SharedModule,
+            AdornmentsModule,
+            SharedEventsModule
+        ], AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MaskedTextBoxComponent],
-                    exports: [MaskedTextBoxComponent],
-                    imports: [CommonModule, EventsModule]
+                    declarations: [
+                        MaskedTextBoxComponent
+                    ],
+                    exports: [
+                        MaskedTextBoxComponent,
+                        AdornmentsModule
+                    ],
+                    imports: [
+                        CommonModule,
+                        EventsModule,
+                        SharedModule,
+                        AdornmentsModule,
+                        SharedEventsModule
+                    ],
                 }]
         }] });