@progress/kendo-angular-navigation 11.2.0-develop.1 → 11.2.0-develop.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/actionsheet/actionsheet.component.d.ts +49 -6
  2. package/actionsheet/animation/animations.d.ts +13 -0
  3. package/actionsheet/models/animation.d.ts +13 -0
  4. package/actionsheet/models/index.d.ts +1 -0
  5. package/esm2020/actionsheet/actionsheet.component.mjs +241 -128
  6. package/esm2020/actionsheet/animation/animations.mjs +23 -0
  7. package/esm2020/actionsheet/models/animation.mjs +5 -0
  8. package/esm2020/package-metadata.mjs +2 -2
  9. package/fesm2015/progress-kendo-angular-navigation.mjs +258 -128
  10. package/fesm2020/progress-kendo-angular-navigation.mjs +258 -128
  11. package/index.d.ts +1 -1
  12. package/package.json +5 -5
package/actionsheet/actionsheet.component.d.ts CHANGED
@@ -2,24 +2,27 @@
2
2
  * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
6
- import { ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './models';
5
+ import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
6
+ import { ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, ActionSheetAnimation } from './models';
7
7
  import { ActionSheetItem } from './models/actionsheet-item.interface';
8
8
  import { LocalizationService } from '@progress/kendo-angular-l10n';
9
+ import { AnimationBuilder } from '@angular/animations';
9
10
  import * as i0 from "@angular/core";
10
11
  /**
11
12
  * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
12
13
  * Used to display a set of choices related to a task the user initiates.
13
14
  */
14
- export declare class ActionSheetComponent implements AfterViewInit, OnDestroy {
15
+ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, OnChanges {
15
16
  private element;
16
17
  private ngZone;
17
18
  private renderer;
18
19
  private localizationService;
20
+ private builder;
21
+ private cdr;
19
22
  /**
20
23
  * @hidden
21
24
  */
22
- hostClass: boolean;
25
+ get hostClass(): boolean;
23
26
  /**
24
27
  * @hidden
25
28
  */
@@ -41,6 +44,32 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy {
41
44
  * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
42
45
  */
43
46
  cssClass: any;
47
+ /**
48
+ * Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
49
+ * By default the animations are turned off. The default animations' duration is `300ms`.
50
+ *
51
+ * @default true
52
+ */
53
+ animation: boolean | ActionSheetAnimation;
54
+ /**
55
+ * Specifies the state of the ActionSheet.
56
+ *
57
+ * @default false
58
+ */
59
+ expanded: boolean;
60
+ /**
61
+ * Fires when the `expanded` property of the component is updated.
62
+ * Used to provide a two-way binding for the `expanded` property.
63
+ */
64
+ expandedChange: EventEmitter<boolean>;
65
+ /**
66
+ * Fires when the ActionSheet is expanded and its animation is complete.
67
+ */
68
+ expand: EventEmitter<any>;
69
+ /**
70
+ * Fires when the ActionSheet is collapsed and its animation is complete.
71
+ */
72
+ collapse: EventEmitter<any>;
44
73
  /**
45
74
  * Fires when an ActionSheet item is clicked.
46
75
  */
@@ -49,6 +78,10 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy {
49
78
  * Fires when the modal overlay is clicked.
50
79
  */
51
80
  overlayClick: EventEmitter<any>;
81
+ /**
82
+ * @hidden
83
+ */
84
+ childContainer: ElementRef;
52
85
  /**
53
86
  * @hidden
54
87
  */
@@ -76,9 +109,16 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy {
76
109
  private dynamicRTLSubscription;
77
110
  private rtl;
78
111
  private domSubs;
79
- constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService);
112
+ private player;
113
+ private animationEnd;
114
+ constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService, builder: AnimationBuilder, cdr: ChangeDetectorRef);
80
115
  ngAfterViewInit(): void;
116
+ ngOnChanges(changes: SimpleChanges): void;
81
117
  ngOnDestroy(): void;
118
+ /**
119
+ * Toggles the visibility of the ActionSheet.
120
+ */
121
+ toggle(): void;
82
122
  /**
83
123
  * @hidden
84
124
  */
@@ -104,6 +144,9 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy {
104
144
  private handleInitialFocus;
105
145
  private keepFocusWithinComponent;
106
146
  private triggerItemClick;
147
+ private setExpanded;
148
+ private onAnimationEnd;
149
+ private playAnimation;
107
150
  static ɵfac: i0.ɵɵFactoryDeclaration<ActionSheetComponent, never>;
108
- static ɵcmp: i0.ɵɵComponentDeclaration<ActionSheetComponent, "kendo-actionsheet", ["kendoActionSheet"], { "title": "title"; "subtitle": "subtitle"; "items": "items"; "cssClass": "cssClass"; }, { "itemClick": "itemClick"; "overlayClick": "overlayClick"; }, ["actionSheetTemplate", "headerTemplate", "contentTemplate", "itemTemplate", "footerTemplate"], never>;
151
+ static ɵcmp: i0.ɵɵComponentDeclaration<ActionSheetComponent, "kendo-actionsheet", ["kendoActionSheet"], { "title": "title"; "subtitle": "subtitle"; "items": "items"; "cssClass": "cssClass"; "animation": "animation"; "expanded": "expanded"; }, { "expandedChange": "expandedChange"; "expand": "expand"; "collapse": "collapse"; "itemClick": "itemClick"; "overlayClick": "overlayClick"; }, ["actionSheetTemplate", "headerTemplate", "contentTemplate", "itemTemplate", "footerTemplate"], never>;
109
152
  }
package/actionsheet/animation/animations.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { AnimationMetadata } from '@angular/animations';
6
+ /**
7
+ * @hidden
8
+ */
9
+ export declare function slideUp(duration: number, height: string): AnimationMetadata[];
10
+ /**
11
+ * @hidden
12
+ */
13
+ export declare function slideDown(duration: number, height: string): AnimationMetadata[];
package/actionsheet/models/animation.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * The settings for the opening and closing animations of the ActionSheet ([see example]({% slug animations_actionsheet %})).
7
+ */
8
+ export interface ActionSheetAnimation {
9
+ /**
10
+ * Defines the duration of the ActionSheet opening and closing animations in milliseconds.
11
+ */
12
+ duration?: number;
13
+ }
package/actionsheet/models/index.d.ts CHANGED
@@ -9,4 +9,5 @@ export { ActionSheetHeaderTemplateDirective } from '../templates/header-template
9
9
  export { ActionSheetItemTemplateDirective } from '../templates/item-template.directive';
10
10
  export { ActionSheetContentTemplateDirective } from '../templates/content-template.directive';
11
11
  export { ActionSheetFooterTemplateDirective } from '../templates/footer-template.directive';
12
+ export { ActionSheetAnimation } from './animation';
12
13
  export { ActionSheetTemplateDirective } from '../templates/actionsheet-template';
package/esm2020/actionsheet/actionsheet.component.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2 } from '@angular/core';
5
+ import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
6
6
  import { validatePackage } from '@progress/kendo-licensing';
7
7
  import { packageMetadata } from '../package-metadata';
8
8
  import { Subscription } from 'rxjs';
@@ -10,24 +10,53 @@ import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, A
10
10
  import { Keys } from '@progress/kendo-angular-common';
11
11
  import { getId, getActionSheetItemIndex, getFirstAndLastFocusable, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE } from '../common/util';
12
12
  import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
13
+ import { AnimationBuilder } from '@angular/animations';
14
+ import { slideDown, slideUp } from './animation/animations';
15
+ import { take } from 'rxjs/operators';
13
16
  import * as i0 from "@angular/core";
14
17
  import * as i1 from "@progress/kendo-angular-l10n";
15
- import * as i2 from "./list.component";
16
- import * as i3 from "@angular/common";
18
+ import * as i2 from "@angular/animations";
19
+ import * as i3 from "./list.component";
20
+ import * as i4 from "@angular/common";
21
+ const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
17
22
  /**
18
23
  * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
19
24
  * Used to display a set of choices related to a task the user initiates.
20
25
  */
21
26
  export class ActionSheetComponent {
22
- constructor(element, ngZone, renderer, localizationService) {
27
+ constructor(element, ngZone, renderer, localizationService, builder, cdr) {
23
28
  this.element = element;
24
29
  this.ngZone = ngZone;
25
30
  this.renderer = renderer;
26
31
  this.localizationService = localizationService;
32
+ this.builder = builder;
33
+ this.cdr = cdr;
27
34
  /**
28
- * @hidden
35
+ * Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
36
+ * By default the animations are turned off. The default animations' duration is `300ms`.
37
+ *
38
+ * @default true
39
+ */
40
+ this.animation = true;
41
+ /**
42
+ * Specifies the state of the ActionSheet.
43
+ *
44
+ * @default false
45
+ */
46
+ this.expanded = false;
47
+ /**
48
+ * Fires when the `expanded` property of the component is updated.
49
+ * Used to provide a two-way binding for the `expanded` property.
29
50
  */
30
- this.hostClass = true;
51
+ this.expandedChange = new EventEmitter();
52
+ /**
53
+ * Fires when the ActionSheet is expanded and its animation is complete.
54
+ */
55
+ this.expand = new EventEmitter();
56
+ /**
57
+ * Fires when the ActionSheet is collapsed and its animation is complete.
58
+ */
59
+ this.collapse = new EventEmitter();
31
60
  /**
32
61
  * Fires when an ActionSheet item is clicked.
33
62
  */
@@ -42,6 +71,7 @@ export class ActionSheetComponent {
42
71
  this.titleId = null;
43
72
  this.rtl = false;
44
73
  this.domSubs = new Subscription();
74
+ this.animationEnd = new EventEmitter();
45
75
  validatePackage(packageMetadata);
46
76
  this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
47
77
  this.rtl = rtl;
@@ -49,15 +79,49 @@ export class ActionSheetComponent {
49
79
  });
50
80
  this.titleId = getId('k-actionsheet-title');
51
81
  }
82
+ /**
83
+ * @hidden
84
+ */
85
+ get hostClass() {
86
+ return this.expanded;
87
+ }
88
+ ;
52
89
  ngAfterViewInit() {
53
- this.handleInitialFocus();
54
90
  this.initDomEvents();
55
91
  }
92
+ ngOnChanges(changes) {
93
+ if (changes['expanded'] && this.expanded) {
94
+ this.setExpanded(true);
95
+ }
96
+ }
56
97
  ngOnDestroy() {
57
98
  this.domSubs.unsubscribe();
58
99
  if (this.dynamicRTLSubscription) {
59
100
  this.dynamicRTLSubscription.unsubscribe();
60
101
  }
102
+ if (this.player) {
103
+ this.player.destroy();
104
+ }
105
+ }
106
+ /**
107
+ * Toggles the visibility of the ActionSheet.
108
+ */
109
+ toggle() {
110
+ const current = !this.expanded;
111
+ if (current === true) {
112
+ this.setExpanded(true);
113
+ }
114
+ else if (current === false && !this.animation) {
115
+ this.setExpanded(false);
116
+ }
117
+ if (this.animation) {
118
+ this.animationEnd.pipe(take(1))
119
+ .subscribe(() => { this.onAnimationEnd(current); });
120
+ this.playAnimation(current);
121
+ }
122
+ else {
123
+ this[current ? 'expand' : 'collapse'].emit();
124
+ }
61
125
  }
62
126
  /**
63
127
  * @hidden
@@ -145,152 +209,188 @@ export class ActionSheetComponent {
145
209
  }
146
210
  this.itemClick.emit({ item, originalEvent: event });
147
211
  }
212
+ setExpanded(value) {
213
+ this.expanded = value;
214
+ this.expandedChange.emit(value);
215
+ if (this.expanded) {
216
+ this.cdr.detectChanges();
217
+ this.handleInitialFocus();
218
+ }
219
+ }
220
+ onAnimationEnd(currentExpanded) {
221
+ if (currentExpanded) {
222
+ this.expand.emit();
223
+ }
224
+ else {
225
+ this.setExpanded(false);
226
+ this.collapse.emit();
227
+ }
228
+ }
229
+ playAnimation(expanded) {
230
+ const duration = typeof this.animation !== 'boolean' && this.animation.duration ? this.animation.duration : DEFAULT_ANIMATION_CONFIG.duration;
231
+ const contentHeight = getComputedStyle(this.childContainer.nativeElement).height;
232
+ const animation = expanded ? slideUp(duration, contentHeight) : slideDown(duration, contentHeight);
233
+ const factory = this.builder.build(animation);
234
+ this.player = factory.create(this.childContainer.nativeElement);
235
+ this.player.onDone(() => {
236
+ if (this.player) {
237
+ this.animationEnd.emit();
238
+ this.player.destroy();
239
+ this.player = null;
240
+ }
241
+ });
242
+ this.player.play();
243
+ }
148
244
  }
149
- ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
150
- ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass" }, outputs: { itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
245
+ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
246
+ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded" }, outputs: { expandedChange: "expandedChange", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
151
247
  LocalizationService,
152
248
  {
153
249
  provide: L10N_PREFIX,
154
250
  useValue: 'kendo.actionsheet.component'
155
251
  }
156
- ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], exportAs: ["kendoActionSheet"], ngImport: i0, template: `
157
- <div class="k-overlay" (click)="onOverlayClick()"></div>
158
- <div class="k-animation-container">
159
- <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
160
- <div class="k-actionsheet k-actionsheet-bottom"
161
- [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
162
- [ngClass]="cssClass"
163
- role="dialog"
164
- aria-modal="true"
165
- [attr.aria-labelledby]="titleId">
252
+ ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
253
+ <ng-container *ngIf="expanded">
254
+ <div class="k-overlay" (click)="onOverlayClick()"></div>
255
+ <div class="k-animation-container">
256
+ <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
257
+ <div class="k-actionsheet k-actionsheet-bottom"
258
+ [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
259
+ [ngClass]="cssClass"
260
+ role="dialog"
261
+ aria-modal="true"
262
+ [attr.aria-labelledby]="titleId">
166
263
 
167
- <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
168
- [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
169
- </ng-template>
264
+ <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
265
+ [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
266
+ </ng-template>
170
267
 
171
- <ng-template #defaultTemplate>
172
- <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
173
- <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
174
- [ngTemplateOutlet]="headerTemplate?.templateRef">
175
- </ng-template>
268
+ <ng-template #defaultTemplate>
269
+ <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
270
+ <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
271
+ [ngTemplateOutlet]="headerTemplate?.templateRef">
272
+ </ng-template>
176
273
 
177
- <ng-template #defaultHeaderTemplate>
178
- <div class="k-actionsheet-titlebar-group k-hbox">
179
- <div class="k-actionsheet-title" [id]="titleId">
180
- <div *ngIf="title" class="k-text-center">{{title}}</div>
181
- <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
274
+ <ng-template #defaultHeaderTemplate>
275
+ <div class="k-actionsheet-titlebar-group k-hbox">
276
+ <div class="k-actionsheet-title" [id]="titleId">
277
+ <div *ngIf="title" class="k-text-center">{{title}}</div>
278
+ <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
279
+ </div>
182
280
  </div>
183
- </div>
184
- </ng-template>
185
- </div>
281
+ </ng-template>
282
+ </div>
186
283
 
187
- <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
188
- <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
189
- [ngTemplateOutlet]="contentTemplate?.templateRef">
190
- </ng-template>
191
- <ng-template #defaultContentTemplate>
192
- <div *ngIf="topGroupItems" kendoActionSheetList
193
- class="k-list-ul"
194
- role="group"
195
- [groupItems]="topGroupItems"
196
- [allItems]="items"
197
- [itemTemplate]="itemTemplate?.templateRef"
198
- (itemClick)="onItemClick($event)">
199
- </div>
200
-
201
- <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
202
-
203
- <div *ngIf="bottomGroupItems" kendoActionSheetList
204
- class="k-list-ul"
205
- role="group"
206
- [groupItems]="bottomGroupItems"
207
- [allItems]="items"
208
- [itemTemplate]="itemTemplate?.templateRef"
209
- (itemClick)="onItemClick($event)">
210
- </div>
211
- </ng-template>
212
- </div>
213
- <div *ngIf="footerTemplate" class="k-actionsheet-footer">
214
- <ng-template
215
- [ngTemplateOutlet]="footerTemplate?.templateRef">
216
- </ng-template>
217
- </div>
218
- </ng-template>
284
+ <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
285
+ <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
286
+ [ngTemplateOutlet]="contentTemplate?.templateRef">
287
+ </ng-template>
288
+ <ng-template #defaultContentTemplate>
289
+ <div *ngIf="topGroupItems" kendoActionSheetList
290
+ class="k-list-ul"
291
+ role="group"
292
+ [groupItems]="topGroupItems"
293
+ [allItems]="items"
294
+ [itemTemplate]="itemTemplate?.templateRef"
295
+ (itemClick)="onItemClick($event)">
296
+ </div>
297
+
298
+ <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
299
+
300
+ <div *ngIf="bottomGroupItems" kendoActionSheetList
301
+ class="k-list-ul"
302
+ role="group"
303
+ [groupItems]="bottomGroupItems"
304
+ [allItems]="items"
305
+ [itemTemplate]="itemTemplate?.templateRef"
306
+ (itemClick)="onItemClick($event)">
307
+ </div>
308
+ </ng-template>
309
+ </div>
310
+ <div *ngIf="footerTemplate" class="k-actionsheet-footer">
311
+ <ng-template
312
+ [ngTemplateOutlet]="footerTemplate?.templateRef">
313
+ </ng-template>
314
+ </div>
315
+ </ng-template>
316
+ </div>
219
317
  </div>
220
318
  </div>
221
- </div>
222
- `, isInline: true, components: [{ type: i2.ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
319
+ </ng-container>
320
+ `, isInline: true, components: [{ type: i3.ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
223
321
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, decorators: [{
224
322
  type: Component,
225
323
  args: [{
226
324
  exportAs: 'kendoActionSheet',
227
325
  selector: 'kendo-actionsheet',
228
326
  template: `
229
- <div class="k-overlay" (click)="onOverlayClick()"></div>
230
- <div class="k-animation-container">
231
- <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
232
- <div class="k-actionsheet k-actionsheet-bottom"
233
- [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
234
- [ngClass]="cssClass"
235
- role="dialog"
236
- aria-modal="true"
237
- [attr.aria-labelledby]="titleId">
327
+ <ng-container *ngIf="expanded">
328
+ <div class="k-overlay" (click)="onOverlayClick()"></div>
329
+ <div class="k-animation-container">
330
+ <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
331
+ <div class="k-actionsheet k-actionsheet-bottom"
332
+ [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
333
+ [ngClass]="cssClass"
334
+ role="dialog"
335
+ aria-modal="true"
336
+ [attr.aria-labelledby]="titleId">
238
337
 
239
- <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
240
- [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
241
- </ng-template>
338
+ <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
339
+ [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
340
+ </ng-template>
242
341
 
243
- <ng-template #defaultTemplate>
244
- <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
245
- <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
246
- [ngTemplateOutlet]="headerTemplate?.templateRef">
247
- </ng-template>
342
+ <ng-template #defaultTemplate>
343
+ <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
344
+ <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
345
+ [ngTemplateOutlet]="headerTemplate?.templateRef">
346
+ </ng-template>
248
347
 
249
- <ng-template #defaultHeaderTemplate>
250
- <div class="k-actionsheet-titlebar-group k-hbox">
251
- <div class="k-actionsheet-title" [id]="titleId">
252
- <div *ngIf="title" class="k-text-center">{{title}}</div>
253
- <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
348
+ <ng-template #defaultHeaderTemplate>
349
+ <div class="k-actionsheet-titlebar-group k-hbox">
350
+ <div class="k-actionsheet-title" [id]="titleId">
351
+ <div *ngIf="title" class="k-text-center">{{title}}</div>
352
+ <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
353
+ </div>
254
354
  </div>
255
- </div>
256
- </ng-template>
257
- </div>
355
+ </ng-template>
356
+ </div>
258
357
 
259
- <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
260
- <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
261
- [ngTemplateOutlet]="contentTemplate?.templateRef">
262
- </ng-template>
263
- <ng-template #defaultContentTemplate>
264
- <div *ngIf="topGroupItems" kendoActionSheetList
265
- class="k-list-ul"
266
- role="group"
267
- [groupItems]="topGroupItems"
268
- [allItems]="items"
269
- [itemTemplate]="itemTemplate?.templateRef"
270
- (itemClick)="onItemClick($event)">
271
- </div>
272
-
273
- <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
274
-
275
- <div *ngIf="bottomGroupItems" kendoActionSheetList
276
- class="k-list-ul"
277
- role="group"
278
- [groupItems]="bottomGroupItems"
279
- [allItems]="items"
280
- [itemTemplate]="itemTemplate?.templateRef"
281
- (itemClick)="onItemClick($event)">
282
- </div>
283
- </ng-template>
284
- </div>
285
- <div *ngIf="footerTemplate" class="k-actionsheet-footer">
286
- <ng-template
287
- [ngTemplateOutlet]="footerTemplate?.templateRef">
288
- </ng-template>
289
- </div>
290
- </ng-template>
358
+ <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
359
+ <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
360
+ [ngTemplateOutlet]="contentTemplate?.templateRef">
361
+ </ng-template>
362
+ <ng-template #defaultContentTemplate>
363
+ <div *ngIf="topGroupItems" kendoActionSheetList
364
+ class="k-list-ul"
365
+ role="group"
366
+ [groupItems]="topGroupItems"
367
+ [allItems]="items"
368
+ [itemTemplate]="itemTemplate?.templateRef"
369
+ (itemClick)="onItemClick($event)">
370
+ </div>
371
+
372
+ <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
373
+
374
+ <div *ngIf="bottomGroupItems" kendoActionSheetList
375
+ class="k-list-ul"
376
+ role="group"
377
+ [groupItems]="bottomGroupItems"
378
+ [allItems]="items"
379
+ [itemTemplate]="itemTemplate?.templateRef"
380
+ (itemClick)="onItemClick($event)">
381
+ </div>
382
+ </ng-template>
383
+ </div>
384
+ <div *ngIf="footerTemplate" class="k-actionsheet-footer">
385
+ <ng-template
386
+ [ngTemplateOutlet]="footerTemplate?.templateRef">
387
+ </ng-template>
388
+ </div>
389
+ </ng-template>
390
+ </div>
291
391
  </div>
292
392
  </div>
293
- </div>
393
+ </ng-container>
294
394
  `,
295
395
  providers: [
296
396
  LocalizationService,
@@ -300,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
300
400
  }
301
401
  ]
302
402
  }]
303
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
403
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
304
404
  type: HostBinding,
305
405
  args: ['class.k-actionsheet-container']
306
406
  }], direction: [{
@@ -314,10 +414,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
314
414
  type: Input
315
415
  }], cssClass: [{
316
416
  type: Input
417
+ }], animation: [{
418
+ type: Input
419
+ }], expanded: [{
420
+ type: Input
421
+ }], expandedChange: [{
422
+ type: Output
423
+ }], expand: [{
424
+ type: Output
425
+ }], collapse: [{
426
+ type: Output
317
427
  }], itemClick: [{
318
428
  type: Output
319
429
  }], overlayClick: [{
320
430
  type: Output
431
+ }], childContainer: [{
432
+ type: ViewChild,
433
+ args: ['childContainer']
321
434
  }], actionSheetTemplate: [{
322
435
  type: ContentChild,
323
436
  args: [ActionSheetTemplateDirective]
package/esm2020/actionsheet/animation/animations.mjs ADDED
@@ -0,0 +1,23 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { animate, style } from '@angular/animations';
6
+ /**
7
+ * @hidden
8
+ */
9
+ export function slideUp(duration, height) {
10
+ return [
11
+ style({ overflow: 'hidden', display: 'block', height: 0 }),
12
+ animate(`${duration}ms ease-in`, style({ height: `${height}` }))
13
+ ];
14
+ }
15
+ /**
16
+ * @hidden
17
+ */
18
+ export function slideDown(duration, height) {
19
+ return [
20
+ style({ overflow: 'hidden', height: `${height}` }),
21
+ animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
22
+ ];
23
+ }