@progress/kendo-angular-dropdowns 11.6.0 → 12.0.0-develop.10

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

@@ -0,0 +1,243 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { animationDuration } from './util';
+import { xIcon } from '@progress/kendo-svg-icons';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-navigation";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-icons";
+import * as i6 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ResponsiveRendererComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.closePopup = new EventEmitter();
+        this.textInputChange = new EventEmitter();
+        this.navigate = new EventEmitter();
+        this.onExpand = new EventEmitter();
+        this.onCollapse = new EventEmitter();
+        this.onApply = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.searchBarValue = '';
+        this.animationDuration = animationDuration;
+        this.xIcon = xIcon;
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onValueChange(value) {
+        this.searchBarValue = value;
+        this.textInputChange.emit(value);
+    }
+}
+ResponsiveRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ResponsiveRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: { title: "title", showActionButtons: "showActionButtons", subtitle: "subtitle", size: "size", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", text: "text", placeholder: "placeholder" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
+        <kendo-actionsheet
+            #actionSheet
+            [animation]="{ duration: animationDuration }"
+            [expanded]="isActionSheetExpanded"
+            (overlayClick)="closePopup.emit()"
+            (keydown)="navigate.emit($event)"
+            (expand)="onExpand.emit()"
+            (collapse)="onCollapse.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-text-center k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="messageFor('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                [size]="size"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
+                                innerCssClass="k-button-icon"
+                                (click)="closePopup.emit()"
+                            ></button>
+                        </div>
+                    </div>
+                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
+                        <kendo-textbox
+                            *ngIf="showTextInput"
+                            #actionSheetSearchBar
+                            [value]="searchBarValue"
+                            [size]="size"
+                            placeholder="Filter"
+                            class="k-searchbox"
+                            autocomplete="off"
+                            (valueChange)="onValueChange($event)"
+                        >
+                            <ng-template kendoTextBoxPrefixTemplate>
+                                <kendo-icon name="search"></kendo-icon>
+                            </ng-template>
+                        </kendo-textbox>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <div class="k-list-container">
+                        <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+                    </div>
+                </div>
+
+                <div *ngIf="showActionButtons" class="k-actionsheet-footer k-actions k-actions-stretched">
+                    <button kendoButton 
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="base"
+                        (click)="onCancel.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('cancelButton')}}
+                    </button>
+                    <button kendoButton
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="primary"
+                        (click)="onApply.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('applyButton')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `, isInline: true, components: [{ type: i2.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["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", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'responsive-renderer',
+                    template: `
+        <kendo-actionsheet
+            #actionSheet
+            [animation]="{ duration: animationDuration }"
+            [expanded]="isActionSheetExpanded"
+            (overlayClick)="closePopup.emit()"
+            (keydown)="navigate.emit($event)"
+            (expand)="onExpand.emit()"
+            (collapse)="onCollapse.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-text-center k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="messageFor('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                [size]="size"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
+                                innerCssClass="k-button-icon"
+                                (click)="closePopup.emit()"
+                            ></button>
+                        </div>
+                    </div>
+                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
+                        <kendo-textbox
+                            *ngIf="showTextInput"
+                            #actionSheetSearchBar
+                            [value]="searchBarValue"
+                            [size]="size"
+                            placeholder="Filter"
+                            class="k-searchbox"
+                            autocomplete="off"
+                            (valueChange)="onValueChange($event)"
+                        >
+                            <ng-template kendoTextBoxPrefixTemplate>
+                                <kendo-icon name="search"></kendo-icon>
+                            </ng-template>
+                        </kendo-textbox>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <div class="k-list-container">
+                        <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+                    </div>
+                </div>
+
+                <div *ngIf="showActionButtons" class="k-actionsheet-footer k-actions k-actions-stretched">
+                    <button kendoButton 
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="base"
+                        (click)="onCancel.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('cancelButton')}}
+                    </button>
+                    <button kendoButton
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="primary"
+                        (click)="onApply.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('applyButton')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
+                type: Input
+            }], showActionButtons: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showTextInput: [{
+                type: Input
+            }], sharedPopupActionSheetTemplate: [{
+                type: Input
+            }], isActionSheetExpanded: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], closePopup: [{
+                type: Output
+            }], textInputChange: [{
+                type: Output
+            }], navigate: [{
+                type: Output
+            }], onExpand: [{
+                type: Output
+            }], onCollapse: [{
+                type: Output
+            }], onApply: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }], actionSheet: [{
+                type: ViewChild,
+                args: [ActionSheetComponent]
+            }], actionSheetSearchBar: [{
+                type: ViewChild,
+                args: ['actionSheetSearchBar']
+            }] } });

package/esm2020/common/list.component.mjs

@@ -377,13 +377,16 @@ export class ListComponent {
                 this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
             }
         }
+        if (this.type === 'dropdowngrid') {
+            this.renderer.setStyle(this.wrapper.nativeElement, 'overflow-y', 'scroll');
+        }
         if (isPresent(this.virtual)) {
             this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
         }
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -450,6 +453,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
+                #li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
                 [class]="listGroupItemClass"
@@ -472,6 +476,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     </span>
             </li>
             <li
+                #li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -509,7 +514,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
     </div>
     </div>
-  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: i8.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: i8.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -581,6 +586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
+                #li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
                 [class]="listGroupItemClass"
@@ -603,6 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </span>
             </li>
             <li
+                #li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -676,6 +683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isMultiselect: [{
                 type: Input
+            }], isActionSheetExpanded: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{

package/esm2020/common/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { noDataText: [{
@@ -26,4 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], popupLabel: [{
                 type: Input
+            }], applyButton: [{
+                type: Input
+            }], cancelButton: [{
+                type: Input
             }] } });

package/esm2020/common/selection/selectable.directive.mjs

@@ -12,8 +12,6 @@ import * as i1 from "./selection.service";
 export class SelectableDirective {
     constructor(selectionService) {
         this.checkboxes = { enabled: false };
-        // @HostBinding('attr.offset-index')
-        // @Input() public offsetIndex: number;
         this.multipleSelection = false;
         this.selectionService = selectionService;
     }
@@ -43,7 +41,7 @@ export class SelectableDirective {
     }
 }
 SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -64,6 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['style.minHeight.px']
             }, {
                 type: Input
+            }], isMultiselect: [{
+                type: Input
             }], multipleSelection: [{
                 type: Input
             }], focusedClassName: [{

package/esm2020/common/shared.module.mjs

@@ -17,6 +17,10 @@ import { TemplateContextDirective } from './templates/template-context.directive
 import { CheckDirective } from '../dropdowntrees/checked-state/check.directive';
 import { CheckAllDirective } from '../dropdowntrees/checked-state/check-all.directive';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { ActionSheetModule } from '@progress/kendo-angular-navigation';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { TextBoxModule } from '@progress/kendo-angular-inputs';
+import { ResponsiveRendererComponent } from './action-sheet.component';
 import * as i0 from "@angular/core";
 const INTERNAL_DIRECTIVES = [
     ListComponent,
@@ -26,7 +30,8 @@ const INTERNAL_DIRECTIVES = [
     TemplateContextDirective,
     TagListComponent,
     CheckDirective,
-    CheckAllDirective
+    CheckAllDirective,
+    ResponsiveRendererComponent
 ];
 /**
  * @hidden
@@ -41,20 +46,22 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], exports: [ListComponent,
+        CheckAllDirective,
+        ResponsiveRendererComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule], exports: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
+        CheckAllDirective,
+        ResponsiveRendererComponent, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_DIRECTIVES],
-                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule]
+                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule]
                 }]
         }] });

package/esm2020/common/util.mjs

@@ -356,10 +356,76 @@ export const getTextField = (field, level) => {
 /**
  * @hidden
  */
-export const getSearchableItems = (treeViewId, popupElement) => {
+export const getSearchableItems = (treeViewId, element) => {
     const nodeSeletor = `kendo-treeview[id='${treeViewId}'] li.k-treeview-item`;
-    const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
+    const liElements = Array.from(element.querySelectorAll(nodeSeletor));
     return liElements.map((liElement) => {
         return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
     });
 };
+/**
+ * @hidden
+ */
+export const windowSize = () => {
+    if (typeof window !== 'undefined') {
+        if (window.innerWidth > 768) {
+            return 'large';
+        }
+        else if (window.innerWidth > 500) {
+            return 'medium';
+        }
+        else {
+            return 'small';
+        }
+    }
+};
+/**
+ * @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
+ */
+export const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
+    const listBox = optionsList.wrapper.nativeElement.querySelector('kendo-list ul');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    if (ariaLabel) {
+        renderer.setAttribute(listBox, 'aria-labelledby', ariaLabel);
+    }
+};
+/**
+ * @hidden
+ */
+export const setActionSheetTitle = (element, actionSheetTitle) => {
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    if (!actionSheetTitle && ariaLabel) {
+        return document.getElementById(ariaLabel).innerText;
+    }
+    return actionSheetTitle;
+};
+/**
+ * @hidden
+ */
+export const animationDuration = 300;