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

package/esm2020/comboboxes/combobox.component.mjs

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, forwardRef, ElementRef, TemplateRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, HostBinding, isDevMode, Optional, Inject, ChangeDetectorRef, NgZone, Renderer2, Injector } from '@angular/core';
@@ -18,7 +18,7 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
-import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
 import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { Keys } from '@progress/kendo-angular-common';
@@ -41,14 +41,15 @@ import * as i3 from "../common/selection/selection.service";
 import * as i4 from "../common/navigation/navigation.service";
 import * as i5 from "../common/disabled-items/disabled-items.service";
 import * as i6 from "../common/data.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";
 /**
  * @hidden
  */
@@ -78,7 +79,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class ComboBoxComponent {
-    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled, injector) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled, injector, hostElement) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -91,6 +92,7 @@ export class ComboBoxComponent {
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        this.hostElement = hostElement;
         /**
          * @hidden
          */
@@ -190,7 +192,7 @@ export class ComboBoxComponent {
          */
         this.clearButton = true;
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the articles on [ComboBox Forms Support](slug:slug:formssupport_combobox#toc-managing-the-combobox-disabled-state-in-reactive-forms) and [MultiColumnComboBox Forms Support](slug:formssupport_multicolumncombobox#toc-managing-the-multicolumncombobox-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -252,6 +254,14 @@ export class ComboBoxComponent {
          * Fires each time the ComboBox 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._isFocused = false;
         /**
@@ -1149,6 +1159,17 @@ export class ComboBoxComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.zone.run(() => {
+            if (!this.isFocused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
     /**
      * @hidden
      */
@@ -1161,6 +1182,42 @@ export class ComboBoxComponent {
             const currentText = this.searchbar.value;
             const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
             const valueHasChanged = unresolvedSelection || textHasChanged;
+            const runInZone = valueHasChanged ||
+                hasObservers(this.onBlur) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper.nativeElement);
+            if (runInZone) {
+                this.zone.run(() => {
+                    if (valueHasChanged) {
+                        const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
+                        if (lowerCaseMatch || unresolvedSelection) {
+                            this.selectionService.change(this.selectionService.focused);
+                        }
+                        else {
+                            this.change(currentText, true);
+                        }
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
+                this.togglePopup(false);
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputBlur() {
+        if (!this.isActionSheetExpanded) {
+            this._filtering = false;
+            this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
+            const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
+            const currentText = this.searchbar.value;
+            const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
+            const valueHasChanged = unresolvedSelection || textHasChanged;
             const runInZone = valueHasChanged ||
                 hasObservers(this.onBlur) ||
                 hasObservers(this.close) ||
@@ -1177,7 +1234,7 @@ export class ComboBoxComponent {
                             this.change(currentText, true);
                         }
                     }
-                    this.onBlur.emit();
+                    this.inputBlur.emit();
                     this.onTouchedCallback();
                     this.togglePopup(false);
                 });
@@ -1228,10 +1285,10 @@ export class ComboBoxComponent {
     /**
      * @hidden
      */
-    handleFocus() {
-        this.isFocused = true;
-        if (hasObservers(this.onFocus)) {
-            this.zone.run(() => this.onFocus.emit());
+    handleInputFocus() {
+        this.handleFocus();
+        if (hasObservers(this.inputFocus)) {
+            this.zone.run(() => this.inputFocus.emit());
         }
     }
     /**
@@ -1263,6 +1320,7 @@ export class ComboBoxComponent {
     selectClick() {
         if (!this.touchEnabled) {
             this.searchbar.focus();
+            this.isFocused = true;
         }
         if (!this.isOpen) {
             this.restoreItemFocus();
@@ -1464,8 +1522,8 @@ export class ComboBoxComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         COMBOBOX_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1482,7 +1540,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         {
             provide: KendoInput, useExisting: forwardRef(() => ComboBoxComponent)
         }
-    ], 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 }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], 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 }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoComboBoxLocalizedMessages
             i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1497,64 +1555,84 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [isLoading]="loading"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="getSuggestion()"
-            [disabled]="disabled"
-            [readonly]="readonly || 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="clearButton && !loading && !disabled && !readonly && text?.length"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            aria-hidden="true"
-            [attr.title]="messageFor('clearTitle')"
-            (click)="clearValue($event)"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
         >
-            <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"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [isLoading]="loading"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="getSuggestion()"
+                [disabled]="disabled"
+                [readonly]="readonly || isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                aria-hidden="true"
+                [attr.title]="messageFor('clearTitle')"
+                (click)="clearValue($event)"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-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>
+            <button
+                #select
+                tabindex="-1"
+                unselectable="on"
+                type="button"
+                class="k-input-button k-button k-icon-button"
+                [ngClass]="selectButtonClasses"
+                [attr.aria-label]="messageFor('selectButtonText')"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </button>
+                <kendo-icon-wrapper
+                    [name]="icon || 'caret-alt-down'"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="svgIcon || caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
+            </button>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -1619,7 +1697,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1658,64 +1736,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [isLoading]="loading"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="getSuggestion()"
-            [disabled]="disabled"
-            [readonly]="readonly || 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="clearButton && !loading && !disabled && !readonly && text?.length"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            aria-hidden="true"
-            [attr.title]="messageFor('clearTitle')"
-            (click)="clearValue($event)"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
         >
-            <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"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [isLoading]="loading"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="getSuggestion()"
+                [disabled]="disabled"
+                [readonly]="readonly || isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                aria-hidden="true"
+                [attr.title]="messageFor('clearTitle')"
+                (click)="clearValue($event)"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-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>
+            <button
+                #select
+                tabindex="-1"
+                unselectable="on"
+                type="button"
+                class="k-input-button k-button k-icon-button"
+                [ngClass]="selectButtonClasses"
+                [attr.aria-label]="messageFor('selectButtonText')"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </button>
+                <kendo-icon-wrapper
+                    [name]="icon || 'caret-alt-down'"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="svgIcon || caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
+            </button>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -1787,7 +1885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { icon: [{
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { icon: [{
                 type: Input
             }], svgIcon: [{
                 type: Input
@@ -1871,6 +1969,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 }]
@@ -1889,6 +1991,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/comboboxes/combobox.module.mjs

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
@@ -12,6 +12,8 @@ import { SharedDirectivesModule } from '../common/shared-directives.module';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { ColumnHeaderTemplateDirective } from './combobox-column/column-header-template.directive';
 import { ColumnCellTemplateDirective } from './combobox-column/column-cell-template.directive';
+import { AdornmentsModule } from '@progress/kendo-angular-common';
+import { SharedEventsModule } from '../common/shared-events.module';
 import * as i0 from "@angular/core";
 const COMBOBOX_DIRECTIVES = [
     ComboBoxComponent,
@@ -41,18 +43,18 @@ ComboBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         MultiColumnComboBoxComponent,
         ComboBoxColumnComponent,
         ColumnHeaderTemplateDirective,
-        ColumnCellTemplateDirective], imports: [SharedModule], exports: [ComboBoxComponent,
+        ColumnCellTemplateDirective], imports: [SharedModule, AdornmentsModule, SharedEventsModule], exports: [ComboBoxComponent,
         MultiColumnComboBoxComponent,
         ComboBoxColumnComponent,
         ColumnHeaderTemplateDirective,
-        ColumnCellTemplateDirective, SharedDirectivesModule] });
-ComboBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
+        ColumnCellTemplateDirective, SharedDirectivesModule, AdornmentsModule] });
+ComboBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule, AdornmentsModule, SharedEventsModule], SharedDirectivesModule, AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMBOBOX_DIRECTIVES],
-                    exports: [COMBOBOX_DIRECTIVES, SharedDirectivesModule],
-                    imports: [SharedModule],
+                    exports: [COMBOBOX_DIRECTIVES, SharedDirectivesModule, AdornmentsModule],
+                    imports: [SharedModule, AdornmentsModule, SharedEventsModule],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
         }] });