@progress/kendo-angular-dropdowns 19.0.0-develop.3 → 19.0.0-develop.31

package/esm2022/common/util.mjs

@@ -367,28 +367,6 @@ export const getSearchableItems = (treeViewId, element) => {
  * @hidden
  */
 export const isTruthy = (value) => !!value;
-/**
- * @hidden
- */
-export const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer) => {
-    const element = actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
-    const animationContainer = actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
-    if (windowSize === 'medium') {
-        renderer.removeClass(element, 'k-actionsheet-fullscreen');
-        renderer.addClass(element, 'k-actionsheet-bottom');
-        renderer.addClass(element, 'k-adaptive-actionsheet');
-        renderer.removeStyle(animationContainer, 'top');
-        renderer.removeStyle(animationContainer, 'height');
-        renderer.setStyle(animationContainer, 'bottom', '0px');
-    }
-    else if (windowSize === 'small') {
-        renderer.removeClass(element, 'k-actionsheet-bottom');
-        renderer.addClass(element, 'k-actionsheet-fullscreen');
-        renderer.addClass(element, 'k-adaptive-actionsheet');
-        renderer.setStyle(animationContainer, 'bottom', '0px');
-        renderer.setStyle(animationContainer, 'height', '100%');
-    }
-};
 /**
  * @hidden
  */

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -10,7 +10,7 @@ import { merge, interval, Subscription } from 'rxjs';
 import { concatMap, filter, map, skipWhile, take, takeUntil, tap } from 'rxjs/operators';
 import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, updateActionSheetAdaptiveAppearance, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
+import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService, NavigationEvent } from '../common/navigation/navigation.service';
 import { ItemTemplateDirective } from '../common/templates/item-template.directive';
@@ -31,8 +31,7 @@ import { FilterableComponent } from '../common/filtering/filterable-component';
 import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { caretAltDownIcon, searchIcon, xIcon } from '@progress/kendo-svg-icons';
-import { ResponsiveRendererComponent } from '../common/action-sheet.component';
-import { SelectableDirective } from '../common/selection/selectable.directive';
+import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { FilterInputDirective } from '../common/filter-input.directive';
 import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
@@ -115,18 +114,18 @@ export class DropDownListComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRenderer;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRenderer?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRenderer?.actionSheetSearchBar;
     }
     get width() {
         const wrapperWidth = isDocumentAvailable() ? this.wrapper.nativeElement.offsetWidth : 0;
@@ -252,14 +251,14 @@ export class DropDownListComponent {
     adaptiveMode = 'none';
     /**
      * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+     * By default the ActionSheet title uses the text provided for the label of the DropDownList.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+     * By default the ActionSheet does not render a subtitle.
     */
-    subtitle = '';
+    adaptiveSubtitle = '';
     /**
      * @hidden
      */
@@ -743,11 +742,6 @@ export class DropDownListComponent {
     }
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     /**
      * @hidden
@@ -944,12 +938,6 @@ export class DropDownListComponent {
     get filterInputClasses() {
         return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
     }
-    /**
-     * @hidden
-     */
-    get optionLabelSizeClass() {
-        return `${this.size ? getSizeClass('list', this.size) : ''}`;
-    }
     /**
      * @hidden
      */
@@ -960,24 +948,12 @@ export class DropDownListComponent {
         }
         return containerClasses;
     }
-    /**
-     * @hidden
-     */
-    get isDisabledDefaultItem() {
-        return this.disabledItemsService.isItemDisabled(this.defaultItem);
-    }
     /**
      * @hidden
      */
     getText() {
         return this.text;
     }
-    /**
-     * @hidden
-     */
-    getDefaultItemText() {
-        return getter(this.defaultItem, this.textField);
-    }
     createPopup() {
         if (this.virtual) {
             this.virtual.skip = 0;
@@ -1458,31 +1434,26 @@ export class DropDownListComponent {
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         if (this.filterable) {
-            this.responsiveRendererComponent.searchBarValue = '';
+            this.adaptiveRenderer.searchBarValue = '';
             this.filterChange.emit('');
         }
         this.closed.emit();
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
         setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
         this.setAriaactivedescendant();
-        this.title = setActionSheetTitle(this.wrapper, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
-        this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
-        if (this.filterable) {
-            this.actionSheetSearchBar.focus();
-        }
+        this.opened.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListComponent, 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.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
             DROPDOWNLIST_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1499,7 +1470,7 @@ export class DropDownListComponent {
             {
                 provide: KendoInput, useExisting: forwardRef(() => DropDownListComponent)
             }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, 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 }], 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: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, 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 }], viewQueries: [{ propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, 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: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownListLocalizedMessages
             i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1512,6 +1483,12 @@ export class DropDownListComponent {
 
             i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -1543,8 +1520,7 @@ export class DropDownListComponent {
                 [name]="icon || 'caret-alt-down'"
                 innerCssClass="k-button-icon"
                 [customFontClass]="customIconClass"
-                [svgIcon]="svgIcon || caretAltDownSVGIcon"
-            >
+                [svgIcon]="svgIcon || caretAltDownSVGIcon">
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
@@ -1553,17 +1529,15 @@ export class DropDownListComponent {
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
             (textInputChange)="onFilterChange($event)"
-            >
-        </responsive-renderer>
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
@@ -1598,32 +1572,6 @@ export class DropDownListComponent {
                     </span>
                 </div>
             </ng-template>
-            <!--default item-->
-            <ng-template [ngIf]="defaultItem && !itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        {{ getDefaultItemText() }}
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template [ngIf]="defaultItem && itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: itemTemplate.templateRef,
-                                $implicit: defaultItem
-                            }">
-                        </ng-template>
-                    </div>
-                </div>
-            </ng-template>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1634,7 +1582,7 @@ export class DropDownListComponent {
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -1648,7 +1596,8 @@ export class DropDownListComponent {
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
                 [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)">
+                (pageChange)="pageChange($event)"
+                [defaultItem]="defaultItem">
             </kendo-list>
             <!--no-data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -1668,7 +1617,7 @@ export class DropDownListComponent {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
@@ -1706,6 +1655,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -1737,8 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [name]="icon || 'caret-alt-down'"
                 innerCssClass="k-button-icon"
                 [customFontClass]="customIconClass"
-                [svgIcon]="svgIcon || caretAltDownSVGIcon"
-            >
+                [svgIcon]="svgIcon || caretAltDownSVGIcon">
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
@@ -1747,17 +1701,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
             (textInputChange)="onFilterChange($event)"
-            >
-        </responsive-renderer>
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
@@ -1792,32 +1744,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </span>
                 </div>
             </ng-template>
-            <!--default item-->
-            <ng-template [ngIf]="defaultItem && !itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        {{ getDefaultItemText() }}
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template [ngIf]="defaultItem && itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: itemTemplate.templateRef,
-                                $implicit: defaultItem
-                            }">
-                        </ng-template>
-                    </div>
-                </div>
-            </ng-template>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1828,7 +1754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -1842,7 +1768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
                 [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)">
+                (pageChange)="pageChange($event)"
+                [defaultItem]="defaultItem">
             </kendo-list>
             <!--no-data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -1864,13 +1791,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ResponsiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, SelectableDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, AdaptiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, ListComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i7.AdaptiveService }]; }, propDecorators: { customIconClass: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRenderer: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], showStickyHeader: [{
                 type: Input
             }], icon: [{
@@ -1889,9 +1816,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], popupSettings: [{
                 type: Input