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

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -25,20 +25,22 @@ 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";
 /**
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
 export class MultiColumnComboBoxComponent extends ComboBoxComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled, injector) {
-        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled, injector);
+    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled, injector, hostElement) {
+        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled, injector, hostElement);
+        this.hostElement = hostElement;
         /**
          * @hidden
          */
@@ -161,7 +163,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         });
     }
 }
-MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ 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: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ 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: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiColumnComboBoxComponent, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
         SelectionService,
         DataService,
@@ -202,65 +204,84 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             "
             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"
-            [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="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"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            >
+            </kendo-searchbar>
 
-        <span
-            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && 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"> </kendo-icon-wrapper>
-        </span>
+            <span
+                *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && 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"> </kendo-icon-wrapper>
+            </span>
 
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            aria-hidden="true"
-            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"
+            <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"
+                aria-hidden="true"
+                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>
             <!--popup/actionsheet content-->
@@ -415,7 +436,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </ng-container>
             </div>
         </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"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, 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"] }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -461,65 +482,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"
-            [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="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"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            >
+            </kendo-searchbar>
 
-        <span
-            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && 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"> </kendo-icon-wrapper>
-        </span>
+            <span
+                *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && 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"> </kendo-icon-wrapper>
+            </span>
 
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            aria-hidden="true"
-            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"
+            <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"
+                aria-hidden="true"
+                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>
             <!--popup/actionsheet content-->
@@ -679,7 +719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowngrid']
             }], isDisabled: [{

package/esm2020/common/action-sheet.component.mjs

@@ -121,7 +121,7 @@ ResponsiveRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, components: [{ type: i2.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i5.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i5.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
             type: Component,
             args: [{

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

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

package/esm2020/common/shared-events.module.mjs

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* 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';
+import { SharedDropDownEventsDirective } from './shared-events.directive';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class SharedEventsModule {
+}
+SharedEventsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedEventsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, declarations: [SharedDropDownEventsDirective], exports: [SharedDropDownEventsDirective] });
+SharedEventsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SharedDropDownEventsDirective],
+                    exports: [SharedDropDownEventsDirective],
+                }]
+        }] });

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -1601,31 +1601,32 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [focused]="focusedTagIndex"
-                [textField]="textField"
-                [valueField]="valueField"
-                [valueDepth]="valueDepth"
-                [disabled]="disabled"
-                [tagPrefix]="tagPrefix"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-        </div>
-        <span
-            *ngIf="!tags || !tags.length"
-            class="k-input-inner k-readonly"
+        <kendo-taglist
+            class="k-input-values"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <span class="k-input-value-text">{{ placeholder }}</span>
+        </kendo-taglist>
+        <span class="k-input-inner k-readonly">
+            <span 
+                *ngIf="!tags || !tags.length"
+                class="k-input-value-text"
+            >
+                {{ placeholder }}
+            </span>
         </span>
         <span
             *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
@@ -1857,31 +1858,32 @@ 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"
-                [focused]="focusedTagIndex"
-                [textField]="textField"
-                [valueField]="valueField"
-                [valueDepth]="valueDepth"
-                [disabled]="disabled"
-                [tagPrefix]="tagPrefix"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-        </div>
-        <span
-            *ngIf="!tags || !tags.length"
-            class="k-input-inner k-readonly"
+        <kendo-taglist
+            class="k-input-values"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <span class="k-input-value-text">{{ placeholder }}</span>
+        </kendo-taglist>
+        <span class="k-input-inner k-readonly">
+            <span 
+                *ngIf="!tags || !tags.length"
+                class="k-input-value-text"
+            >
+                {{ placeholder }}
+            </span>
         </span>
         <span
             *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"

package/esm2020/index.mjs

@@ -8,6 +8,9 @@ export { DropDownListComponent } from './dropdownlist/dropdownlist.component';
 export { MultiSelectComponent } from './multiselect/multiselect.component';
 export { SearchBarComponent } from './common/searchbar.component';
 export { TagListComponent } from './common/taglist.component';
+export { PrefixTemplateDirective } from '@progress/kendo-angular-common';
+export { SuffixTemplateDirective } from '@progress/kendo-angular-common';
+export { SeparatorComponent } from '@progress/kendo-angular-common';
 export { MultiColumnComboBoxComponent } from './comboboxes/multicolumncombobox.component';
 export { ComboBoxColumnComponent } from './comboboxes/combobox-column/combobox-column.component';
 export { ColumnCellTemplateDirective } from './comboboxes/combobox-column/column-cell-template.directive';