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

package/esm2020/multiselect/multiselect.component.mjs

@@ -7,7 +7,7 @@ import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
 import { catchError, filter, map, tap } 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 { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -45,16 +45,17 @@ import * as i3 from "../common/data.service";
 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/taglist.component";
-import * as i8 from "../common/searchbar.component";
-import * as i9 from "@progress/kendo-angular-icons";
-import * as i10 from "@progress/kendo-angular-common";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "../common/taglist.component";
+import * as i9 from "../common/searchbar.component";
+import * as i10 from "@progress/kendo-angular-icons";
 import * as i11 from "../common/action-sheet.component";
 import * as i12 from "../common/list.component";
 import * as i13 from "../common/localization/localized-messages.directive";
-import * as i14 from "@angular/common";
-import * as i15 from "../common/templates/template-context.directive";
-import * as i16 from "../common/selection/selectable.directive";
+import * as i14 from "../common/shared-events.directive";
+import * as i15 from "@angular/common";
+import * as i16 from "../common/templates/template-context.directive";
+import * as i17 from "../common/selection/selectable.directive";
 const MULTISELECT_VALUE_ACCESSOR = {
     multi: true,
     provide: NG_VALUE_ACCESSOR,
@@ -81,7 +82,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class MultiSelectComponent {
-    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector, hostElement) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -95,6 +96,7 @@ export class MultiSelectComponent {
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        this.hostElement = hostElement;
         /**
          * @hidden
          */
@@ -271,6 +273,14 @@ export class MultiSelectComponent {
          * Fires each time the MultiSelect 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();
         /**
          * Fires each time a tag is about to be removed([see examples]({% slug summarytagmode_multiselecttree %}#toc-notifying-on-removing-group-tags)).
          * This event is preventable. If you cancel it, the tag will not be removed.
@@ -355,14 +365,12 @@ export class MultiSelectComponent {
     /**
      * @hidden
      */
-    onSearchBarFocus() {
-        if (!this.isFocused) {
-            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();
+            });
         }
     }
     /**
@@ -386,13 +394,53 @@ export class MultiSelectComponent {
     /**
      * @hidden
      */
-    onSearchBarBlur() {
+    handleFocus() {
+        this._zone.run(() => {
+            if (!this.isFocused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleBlur() {
         if (!this.isActionSheetExpanded) {
             if (!this.isFocused) {
                 return;
             }
             this.isFocused = false;
             if (hasObservers(this.onBlur) ||
+                hasObservers(this.filterChange) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.closePopup();
+                    if (!(this.isOpen && this.allowCustom)) {
+                        this.clearFilter();
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
+            else {
+                if (!this.allowCustom) {
+                    this.clearFilter();
+                }
+                this.closePopup();
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputBlur() {
+        if (!this.isActionSheetExpanded) {
+            if (!this.isFocused) {
+                return;
+            }
+            if (hasObservers(this.inputBlur) ||
                 hasObservers(this.filterChange) ||
                 hasObservers(this.close) ||
                 isUntouched(this.wrapper.nativeElement) ||
@@ -402,7 +450,7 @@ export class MultiSelectComponent {
                     if (!(this.isOpen && this.allowCustom)) {
                         this.clearFilter();
                     }
-                    this.onBlur.emit();
+                    this.inputBlur.emit();
                     this.onTouchedCallback();
                 });
             }
@@ -1028,7 +1076,7 @@ export class MultiSelectComponent {
         this.windowSize = windowSize();
         this.cdr.detectChanges();
         this.searchbar.setInputSize();
-        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.subs.add(this.renderer.listen(this.searchbar.input.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
         if (this.actionSheet && isDocumentAvailable()) {
             // The following syntax is used as it does not violate CSP compliance
@@ -1684,8 +1732,8 @@ export class MultiSelectComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1702,7 +1750,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {
             provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, 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: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectLocalizedMessages
             i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1720,69 +1768,89 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [textField]="textField"
-                [valueField]="valueField"
-                [focused]="focusedTagIndex"
-                [disabled]="disabled"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [tagPrefix]="tagPrefix"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-            <kendo-searchbar
-                #searchbar
-                [ariaExpanded]="isOpen"
-                [ariaControls]="ariaControls"
-                [id]="focusableId"
-                [role]="'combobox'"
-                [tagListId]="tagListId"
-                [isLoading]="loading"
-                [isFilterable]="filterable"
-                [activeDescendant]="activeDescendant"
-                [userInput]="text"
-                [disabled]="disabled"
-                [readonly]="readonly || this.isAdaptive"
-                [tabIndex]="tabIndex"
-                [placeholder]="placeholder"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="handleFilter($event)"
-                (onBlur)="onSearchBarBlur()"
-                (onFocus)="onSearchBarFocus()"
-                (click)="handleClick()"
-            >
-            </kendo-searchbar>
-        </div>
 
-        <span
-            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (mousedown)="clearAll($event)"
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
         >
-            <kendo-icon-wrapper
-                class="k-icon"
-                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>
+            <div class="k-input-values">
+                <kendo-taglist
+                    [size]="size"
+                    [rounded]="rounded"
+                    [fillMode]="fillMode"
+                    [id]="tagListId"
+                    [tags]="tags"
+                    [textField]="textField"
+                    [valueField]="valueField"
+                    [focused]="focusedTagIndex"
+                    [disabled]="disabled"
+                    [template]="tagTemplate"
+                    [groupTemplate]="groupTagTemplate"
+                    [tagPrefix]="tagPrefix"
+                    [disabledIndices]="disabledIndices"
+                    (removeTag)="handleRemoveTag($event)"
+                >
+                </kendo-taglist>
+                <kendo-searchbar
+                    #searchbar
+                    [ariaExpanded]="isOpen"
+                    [ariaControls]="ariaControls"
+                    [id]="focusableId"
+                    [role]="'combobox'"
+                    [tagListId]="tagListId"
+                    [isLoading]="loading"
+                    [isFilterable]="filterable"
+                    [activeDescendant]="activeDescendant"
+                    [userInput]="text"
+                    [disabled]="disabled"
+                    [readonly]="readonly || this.isAdaptive"
+                    [tabIndex]="tabIndex"
+                    [placeholder]="placeholder"
+                    (onNavigate)="handleNavigate($event)"
+                    (valueChange)="handleFilter($event)"
+                    (onBlur)="handleInputBlur()"
+                    (onFocus)="handleInputFocus()"
+                    (click)="handleClick()"
+                >
+                </kendo-searchbar>
+            </div>
+
+            <span
+                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (mousedown)="clearAll($event)"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span
-            *ngIf="loading"
-            class="k-icon k-i-loading k-input-loading-icon"
-        >
-        </span>
+                <kendo-icon-wrapper
+                    class="k-icon"
+                    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>
@@ -1877,7 +1945,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i11.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i12.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: i13.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i9.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: i10.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: i11.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i12.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: i13.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i17.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -1919,69 +1987,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [textField]="textField"
-                [valueField]="valueField"
-                [focused]="focusedTagIndex"
-                [disabled]="disabled"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [tagPrefix]="tagPrefix"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-            <kendo-searchbar
-                #searchbar
-                [ariaExpanded]="isOpen"
-                [ariaControls]="ariaControls"
-                [id]="focusableId"
-                [role]="'combobox'"
-                [tagListId]="tagListId"
-                [isLoading]="loading"
-                [isFilterable]="filterable"
-                [activeDescendant]="activeDescendant"
-                [userInput]="text"
-                [disabled]="disabled"
-                [readonly]="readonly || this.isAdaptive"
-                [tabIndex]="tabIndex"
-                [placeholder]="placeholder"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="handleFilter($event)"
-                (onBlur)="onSearchBarBlur()"
-                (onFocus)="onSearchBarFocus()"
-                (click)="handleClick()"
-            >
-            </kendo-searchbar>
-        </div>
 
-        <span
-            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (mousedown)="clearAll($event)"
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
         >
-            <kendo-icon-wrapper
-                class="k-icon"
-                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>
+            <div class="k-input-values">
+                <kendo-taglist
+                    [size]="size"
+                    [rounded]="rounded"
+                    [fillMode]="fillMode"
+                    [id]="tagListId"
+                    [tags]="tags"
+                    [textField]="textField"
+                    [valueField]="valueField"
+                    [focused]="focusedTagIndex"
+                    [disabled]="disabled"
+                    [template]="tagTemplate"
+                    [groupTemplate]="groupTagTemplate"
+                    [tagPrefix]="tagPrefix"
+                    [disabledIndices]="disabledIndices"
+                    (removeTag)="handleRemoveTag($event)"
+                >
+                </kendo-taglist>
+                <kendo-searchbar
+                    #searchbar
+                    [ariaExpanded]="isOpen"
+                    [ariaControls]="ariaControls"
+                    [id]="focusableId"
+                    [role]="'combobox'"
+                    [tagListId]="tagListId"
+                    [isLoading]="loading"
+                    [isFilterable]="filterable"
+                    [activeDescendant]="activeDescendant"
+                    [userInput]="text"
+                    [disabled]="disabled"
+                    [readonly]="readonly || this.isAdaptive"
+                    [tabIndex]="tabIndex"
+                    [placeholder]="placeholder"
+                    (onNavigate)="handleNavigate($event)"
+                    (valueChange)="handleFilter($event)"
+                    (onBlur)="handleInputBlur()"
+                    (onFocus)="handleInputFocus()"
+                    (click)="handleClick()"
+                >
+                </kendo-searchbar>
+            </div>
+
+            <span
+                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (mousedown)="clearAll($event)"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span
-            *ngIf="loading"
-            class="k-icon k-i-loading k-input-loading-icon"
-        >
-        </span>
+                <kendo-icon-wrapper
+                    class="k-icon"
+                    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>
@@ -2083,7 +2171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { responsiveRendererComponent: [{
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
             }], showStickyHeader: [{
@@ -2165,6 +2253,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], removeTag: [{
                 type: Output
             }], container: [{
@@ -2206,6 +2298,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-multiselect']

package/esm2020/multiselect/multiselect.module.mjs

@@ -10,6 +10,8 @@ import { SummaryTagDirective } from './summary-tag.directive';
 import { SharedModule } from '../common/shared.module';
 import { SharedDirectivesModule } from '../common/shared-directives.module';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
+import { AdornmentsModule } from '@progress/kendo-angular-common';
+import { SharedEventsModule } from '../common/shared-events.module';
 import * as i0 from "@angular/core";
 const MULTISELECT_DIRECTIVES = [
     MultiSelectComponent,
@@ -37,16 +39,16 @@ export class MultiSelectModule {
 MultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelectComponent,
         SummaryTagDirective,
-        CustomItemTemplateDirective], imports: [SharedModule], exports: [MultiSelectComponent,
+        CustomItemTemplateDirective], imports: [SharedModule, AdornmentsModule, SharedEventsModule], exports: [MultiSelectComponent,
         SummaryTagDirective,
-        CustomItemTemplateDirective, SharedDirectivesModule] });
-MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
+        CustomItemTemplateDirective, SharedDirectivesModule, AdornmentsModule] });
+MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, 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: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MULTISELECT_DIRECTIVES],
-                    exports: [MULTISELECT_DIRECTIVES, SharedDirectivesModule],
-                    imports: [SharedModule],
+                    exports: [MULTISELECT_DIRECTIVES, SharedDirectivesModule, AdornmentsModule],
+                    imports: [SharedModule, AdornmentsModule, SharedEventsModule],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
         }] });

package/esm2020/package-metadata.mjs

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