@progress/kendo-angular-dropdowns 14.4.0-develop.9 → 15.0.0-develop.2

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2, forwardRef, ElementRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, TemplateRef, HostBinding, isDevMode, ChangeDetectorRef, NgZone, Optional, Inject, Injector } from '@angular/core';
-import { isDocumentAvailable, KendoInput, hasObservers } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, KendoInput, hasObservers, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -37,14 +37,15 @@ import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "../common/selection/selection.service";
 import * as i5 from "../common/navigation/navigation.service";
 import * as i6 from "../common/disabled-items/disabled-items.service";
-import * as i7 from "../common/searchbar.component";
-import * as i8 from "@progress/kendo-angular-icons";
-import * as i9 from "@progress/kendo-angular-common";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "../common/searchbar.component";
+import * as i9 from "@progress/kendo-angular-icons";
 import * as i10 from "../common/action-sheet.component";
 import * as i11 from "../common/list.component";
 import * as i12 from "../common/localization/localized-messages.directive";
-import * as i13 from "@angular/common";
-import * as i14 from "../common/templates/template-context.directive";
+import * as i13 from "../common/shared-events.directive";
+import * as i14 from "@angular/common";
+import * as i15 from "../common/templates/template-context.directive";
 const NO_VALUE = "";
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -192,6 +193,14 @@ export class AutoCompleteComponent {
          * Fires each time the AutoComplete gets blurred.
          */
         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();
         this.widgetClasses = true;
         this.listBoxId = `k-${guid()}`;
         this.optionPrefix = `k-${guid()}`;
@@ -814,18 +823,55 @@ export class AutoCompleteComponent {
     /**
      * @hidden
      */
-    handleFocus() {
-        this.isFocused = true;
-        if (hasObservers(this.onFocus)) {
+    handleInputFocus() {
+        this.handleFocus();
+        if (hasObservers(this.inputFocus)) {
             this._zone.run(() => {
-                this.onFocus.emit();
+                this.inputFocus.emit();
             });
         }
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this._zone.run(() => {
+            if (!this.isFocused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
     /**
      * @hidden
      */
     handleBlur() {
+        if (!this.isActionSheetExpanded) {
+            this.isFocused = false;
+            const valueHasChanged = this.value !== this.text;
+            const runInZone = hasObservers(this.onBlur) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper) ||
+                valueHasChanged;
+            if (runInZone) {
+                this._zone.run(() => {
+                    if (valueHasChanged) {
+                        this.change(this.searchbar.value);
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
+                this.togglePopup(false);
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputBlur() {
         if (!this.isActionSheetExpanded) {
             const focused = this.filterable ? this.selectionService.focused : -1;
             this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
@@ -843,9 +889,8 @@ export class AutoCompleteComponent {
             if (!exactMatch && insensitiveMatch) {
                 this.selectionService.resetSelection([]);
             }
-            this.isFocused = false;
             const valueHasChanged = this.value !== this.text;
-            const runInZone = hasObservers(this.onBlur) ||
+            const runInZone = hasObservers(this.inputBlur) ||
                 hasObservers(this.close) ||
                 isUntouched(this.wrapper) ||
                 valueHasChanged ||
@@ -855,7 +900,7 @@ export class AutoCompleteComponent {
                     if (valueHasChanged) {
                         this.change(this.searchbar.value);
                     }
-                    this.onBlur.emit();
+                    this.inputBlur.emit();
                     this.onTouchedCallback();
                     this.togglePopup(false);
                 });
@@ -1079,7 +1124,7 @@ export class AutoCompleteComponent {
     }
 }
 AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: i2.DataService }, { token: i3.PopupService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         AUTOCOMPLETE_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1098,7 +1143,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: KendoInput,
             useExisting: forwardRef(() => AutoCompleteComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAutoCompleteLocalizedMessages
             i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1110,44 +1155,64 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [isLoading]="isLoading"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="suggestion"
-            [disabled]="disabled"
-            [readonly]="readonly || this.isAdaptive"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
-        ></kendo-searchbar>
-        <span
-            *ngIf="!loading && !readonly && (clearButton && text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (click)="clearValue($event)"
-            (mousedown)="$event.preventDefault()"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [isLoading]="isLoading"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="suggestion"
+                [disabled]="disabled"
+                [readonly]="readonly || this.isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="!loading && !readonly && (clearButton && text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (click)="clearValue($event)"
+                (mousedown)="$event.preventDefault()"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -1213,7 +1278,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1251,44 +1316,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [isLoading]="isLoading"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="suggestion"
-            [disabled]="disabled"
-            [readonly]="readonly || this.isAdaptive"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
-        ></kendo-searchbar>
-        <span
-            *ngIf="!loading && !readonly && (clearButton && text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (click)="clearValue($event)"
-            (mousedown)="$event.preventDefault()"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [isLoading]="isLoading"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="suggestion"
+                [disabled]="disabled"
+                [readonly]="readonly || this.isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="!loading && !readonly && (clearButton && text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (click)="clearValue($event)"
+                (mousedown)="$event.preventDefault()"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -1433,6 +1518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], template: [{
                 type: ContentChild,
                 args: [ItemTemplateDirective, { static: false }]
@@ -1451,6 +1540,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], fixedGroupTemplate: [{
                 type: ContentChild,
                 args: [FixedGroupTemplateDirective, { static: false }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]

package/esm2020/autocomplete/autocomplete.module.mjs

@@ -6,6 +6,8 @@ import { NgModule } from '@angular/core';
 import { AutoCompleteComponent } from './autocomplete.component';
 import { SharedModule } from '../common/shared.module';
 import { SharedDirectivesModule } from '../common/shared-directives.module';
+import { AdornmentsModule } from '@progress/kendo-angular-common';
+import { SharedEventsModule } from '../common/shared-events.module';
 import * as i0 from "@angular/core";
 const AUTOCOMPLETE_DIRECTIVES = [
     AutoCompleteComponent
@@ -24,13 +26,13 @@ const AUTOCOMPLETE_DIRECTIVES = [
 export class AutoCompleteModule {
 }
 AutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteComponent], imports: [SharedModule], exports: [AutoCompleteComponent, SharedDirectivesModule] });
-AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, imports: [[SharedModule], SharedDirectivesModule] });
+AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteComponent], imports: [SharedModule, AdornmentsModule, SharedEventsModule], exports: [AutoCompleteComponent, SharedDirectivesModule, AdornmentsModule] });
+AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, imports: [[SharedModule, AdornmentsModule, SharedEventsModule], SharedDirectivesModule, AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AUTOCOMPLETE_DIRECTIVES],
-                    exports: [AUTOCOMPLETE_DIRECTIVES, SharedDirectivesModule],
-                    imports: [SharedModule]
+                    exports: [AUTOCOMPLETE_DIRECTIVES, SharedDirectivesModule, AdornmentsModule],
+                    imports: [SharedModule, AdornmentsModule, SharedEventsModule]
                 }]
         }] });