@progress/kendo-angular-dropdowns 12.0.0-develop.7 → 12.0.0-develop.8

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -14,7 +14,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { NavigationService } from '../common/navigation/navigation.service';
 import { SelectionService } from '../common/selection/selection.service';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
-import { getSizeClass, getter, isObject, isPresent, noop } from '../common/util';
+import { animationDuration, getSizeClass, getter, isObject, isPresent, noop, windowSize } from '../common/util';
 import { getRowWidthFromColumnsMeta, scrollbarWidth } from './combobox-column/util';
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { MultiColumnComboBoxMessages } from '../common/constants/error-messages';
@@ -27,17 +27,22 @@ 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 "../common/list.component";
-import * as i10 from "@progress/kendo-angular-common";
-import * as i11 from "../common/localization/localized-messages.directive";
-import * as i12 from "@angular/common";
-import * as i13 from "../common/templates/template-context.directive";
+import * as i9 from "@progress/kendo-angular-common";
+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";
 /**
  * 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) {
         super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled);
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -78,14 +83,14 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     get listContainerClasses() {
-        return [
-            'k-popup',
-            'k-dropdowngrid-popup'
-        ].concat(this.popupSettings.popupClass || []);
+        return ['k-popup', 'k-dropdowngrid-popup'].concat(this.popupSettings.popupClass || []);
     }
     ngAfterViewInit() {
         this.updateColumnsMediaState();
         this.addWindowResizeListener();
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -121,7 +126,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         if (!isDevMode()) {
             return;
         }
-        if (isPresent(this.data) && this.data.length > 0 && this.data.some(item => !isObject(item))) {
+        if (isPresent(this.data) && this.data.length > 0 && this.data.some((item) => !isObject(item))) {
             throw new Error(MultiColumnComboBoxMessages.data);
         }
         if (!isPresent(this.valueField) || !isPresent(this.textField)) {
@@ -133,20 +138,20 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.zone.runOutsideAngular(() => this.removeWindowResizeListener = this.renderer.listen(window, 'resize', this.updateColumnsMediaState.bind(this)));
+        this.zone.runOutsideAngular(() => (this.removeWindowResizeListener = this.renderer.listen(window, 'resize', this.updateColumnsMediaState.bind(this))));
     }
     updateColumnsMediaState() {
-        if (!(isPresent(this.columns) && isDocumentAvailable())) {
+        if (!(isPresent(this.columns) && isDocumentAvailable()) || this.isActionSheetExpanded) {
             return;
         }
-        this.columns.forEach(column => {
+        this.columns.forEach((column) => {
             const matchesMedia = !column.media || window.matchMedia(column.media).matches;
             if (column.matchesMedia !== matchesMedia) {
                 column.matchesMedia = matchesMedia;
                 if (this.isOpen) {
                     // enter the zone only if the popup is actually open
                     // update its width in case it's dependent on the columns' width
-                    this.zone.run(() => this.popupRef.popupElement.style.width = this.popupWidth.max);
+                    this.zone.run(() => (this.popupRef.popupElement.style.width = this.popupWidth.max));
                 }
             }
         });
@@ -161,35 +166,36 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         LocalizationService,
         {
             provide: L10N_PREFIX,
-            useValue: 'kendo.multicolumncombobox'
+            useValue: 'kendo.multicolumncombobox',
         },
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
         },
         {
             provide: KendoInput,
-            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
         },
         {
             provide: FilterableComponent,
-            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
-        }
+            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
+        },
     ], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container
             kendoMultiColumnComboBoxLocalizedMessages
-
-            i18n-noDataText="kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items"
+            i18n-noDataText="
+                kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items
+            "
             noDataText="NO DATA FOUND"
-
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
-
             i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
             selectButtonText="Select"
-
-            i18n-popupLabel="kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            i18n-popupLabel="
+                kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options
+                when its role is 'region'
+            "
             popupLabel="Options list"
         ></ng-container>
         <kendo-searchbar
@@ -212,11 +218,12 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         >
         </kendo-searchbar>
 
         <span
-            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
@@ -226,11 +233,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
-            >
-            </kendo-icon-wrapper>
+            <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
         </span>
 
         <button
@@ -246,16 +249,36 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                *ngIf="!loading && !iconClass"
-                name="caret-alt-down"
-                [svgIcon]="caretAltDownIcon"
-            >
+            <kendo-icon-wrapper *ngIf="!loading && !iconClass" name="caret-alt-down" [svgIcon]="caretAltDownIcon">
             </kendo-icon-wrapper>
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
 
         <ng-template #popupTemplate>
+            <!--popup/actionsheet content-->
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"> </kendo-resize-sensor>
+
+        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
             <ng-template
                 *ngIf="headerTemplate"
@@ -264,23 +287,15 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 }"
             >
             </ng-template>
-
             <!--data table-->
             <div class="k-data-table" [ngClass]="tableSizeClass">
-
                 <!--grid header-->
-                <div
-                    #header
-                    class="k-table-header"
-                >
+                <div #header class="k-table-header">
                     <div class="k-table-header-wrap">
                         <table class="k-table" role="presentation">
                             <colgroup>
                                 <ng-container *ngFor="let column of columns">
-                                    <col
-                                        *ngIf="!column.hidden && column.matchesMedia"
-                                        [style.width.px]="column.width"
-                                    />
+                                    <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
                                 </ng-container>
                             </colgroup>
                             <thead class="k-table-thead">
@@ -311,7 +326,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                         </table>
                     </div>
                 </div>
-
                 <!-- item template -->
                 <ng-template #rowTemplate let-dataItem>
                     <ng-container *ngFor="let column of columns">
@@ -338,8 +352,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                         </span>
                     </ng-container>
                 </ng-template>
-
-                <!--list-->
                 <kendo-list
                     #optionsList
                     [optionPrefix]="optionPrefix"
@@ -359,10 +371,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </kendo-list>
 
                 <!--no-data template-->
-                <div
-                    class="k-no-data"
-                    *ngIf="data.length === 0"
-                >
+                <div class="k-no-data" *ngIf="data.length === 0">
                     <ng-template
                         [ngIf]="noDataTemplate"
                         [templateContext]="{
@@ -393,21 +402,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                             </tfoot>
                         </table>
                     </div>
-                </ng-container>
-
+                </ng-container>    
             </div>
-
         </ng-template>
-
-        <kendo-resize-sensor
-            *ngIf="isOpen"
-            (resize)="onResize()"
-        >
-        </kendo-resize-sensor>
-
-        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
-        <ng-container #container></ng-container>
-    `, 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"], exportAs: ["kendoIconWrapper"] }, { type: i9.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, 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"], 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -419,37 +417,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         LocalizationService,
                         {
                             provide: L10N_PREFIX,
-                            useValue: 'kendo.multicolumncombobox'
+                            useValue: 'kendo.multicolumncombobox',
                         },
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+                            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
                         },
                         {
                             provide: KendoInput,
-                            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+                            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
                         },
                         {
                             provide: FilterableComponent,
-                            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
-                        }
+                            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
+                        },
                     ],
                     selector: 'kendo-multicolumncombobox',
                     template: `
         <ng-container
             kendoMultiColumnComboBoxLocalizedMessages
-
-            i18n-noDataText="kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items"
+            i18n-noDataText="
+                kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items
+            "
             noDataText="NO DATA FOUND"
-
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
-
             i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
             selectButtonText="Select"
-
-            i18n-popupLabel="kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            i18n-popupLabel="
+                kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options
+                when its role is 'region'
+            "
             popupLabel="Options list"
         ></ng-container>
         <kendo-searchbar
@@ -472,11 +471,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         >
         </kendo-searchbar>
 
         <span
-            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
@@ -486,11 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
-            >
-            </kendo-icon-wrapper>
+            <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
         </span>
 
         <button
@@ -506,16 +502,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                *ngIf="!loading && !iconClass"
-                name="caret-alt-down"
-                [svgIcon]="caretAltDownIcon"
-            >
+            <kendo-icon-wrapper *ngIf="!loading && !iconClass" name="caret-alt-down" [svgIcon]="caretAltDownIcon">
             </kendo-icon-wrapper>
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
 
         <ng-template #popupTemplate>
+            <!--popup/actionsheet content-->
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"> </kendo-resize-sensor>
+
+        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
             <ng-template
                 *ngIf="headerTemplate"
@@ -524,23 +540,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }"
             >
             </ng-template>
-
             <!--data table-->
             <div class="k-data-table" [ngClass]="tableSizeClass">
-
                 <!--grid header-->
-                <div
-                    #header
-                    class="k-table-header"
-                >
+                <div #header class="k-table-header">
                     <div class="k-table-header-wrap">
                         <table class="k-table" role="presentation">
                             <colgroup>
                                 <ng-container *ngFor="let column of columns">
-                                    <col
-                                        *ngIf="!column.hidden && column.matchesMedia"
-                                        [style.width.px]="column.width"
-                                    />
+                                    <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
                                 </ng-container>
                             </colgroup>
                             <thead class="k-table-thead">
@@ -571,7 +579,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </table>
                     </div>
                 </div>
-
                 <!-- item template -->
                 <ng-template #rowTemplate let-dataItem>
                     <ng-container *ngFor="let column of columns">
@@ -598,8 +605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </span>
                     </ng-container>
                 </ng-template>
-
-                <!--list-->
                 <kendo-list
                     #optionsList
                     [optionPrefix]="optionPrefix"
@@ -619,10 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </kendo-list>
 
                 <!--no-data template-->
-                <div
-                    class="k-no-data"
-                    *ngIf="data.length === 0"
-                >
+                <div class="k-no-data" *ngIf="data.length === 0">
                     <ng-template
                         [ngIf]="noDataTemplate"
                         [templateContext]="{
@@ -653,21 +655,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             </tfoot>
                         </table>
                     </div>
-                </ng-container>
-
+                </ng-container>    
             </div>
-
         </ng-template>
-
-        <kendo-resize-sensor
-            *ngIf="isOpen"
-            (resize)="onResize()"
-        >
-        </kendo-resize-sensor>
-
-        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
-        <ng-container #container></ng-container>
-    `
+    `,
                 }]
         }], 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,