@progress/kendo-angular-navigation 18.6.0-develop.1 → 19.0.0-develop.2
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.
- package/actionsheet/actionsheet-view.component.d.ts +32 -0
- package/actionsheet/actionsheet.component.d.ts +55 -2
- package/actionsheet/models/actionsheet-action-layout.d.ts +34 -0
- package/actionsheet/models/actionsheet-action.d.ts +43 -0
- package/actionsheet/models/index.d.ts +2 -0
- package/actionsheet.module.d.ts +7 -6
- package/directives.d.ts +3 -2
- package/esm2022/actionsheet/actionsheet-view.component.mjs +145 -0
- package/esm2022/actionsheet/actionsheet.component.mjs +241 -106
- package/esm2022/actionsheet/models/actionsheet-action-layout.mjs +5 -0
- package/esm2022/actionsheet/models/actionsheet-action.mjs +5 -0
- package/esm2022/actionsheet.module.mjs +7 -6
- package/esm2022/directives.mjs +2 -0
- package/esm2022/index.mjs +1 -0
- package/esm2022/navigation.module.mjs +15 -14
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-navigation.mjs +388 -118
- package/index.d.ts +2 -1
- package/navigation.module.d.ts +14 -13
- package/package.json +6 -6
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* Copyright © 2025 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 { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
|
|
6
|
-
import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
5
|
+
import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, QueryList, forwardRef } from '@angular/core';
|
|
6
|
+
import { NgIf, NgClass, NgTemplateOutlet, NgFor, NgStyle } from '@angular/common';
|
|
7
7
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
8
|
import { packageMetadata } from '../package-metadata';
|
|
9
9
|
import { Subscription } from 'rxjs';
|
|
@@ -15,6 +15,8 @@ import { AnimationBuilder } from '@angular/animations';
|
|
|
15
15
|
import { slideDown, slideUp } from './animation/animations';
|
|
16
16
|
import { take } from 'rxjs/operators';
|
|
17
17
|
import { ActionSheetListComponent } from './list.component';
|
|
18
|
+
import { ButtonDirective } from '@progress/kendo-angular-buttons';
|
|
19
|
+
import { ActionSheetViewComponent } from './actionsheet-view.component';
|
|
18
20
|
import * as i0 from "@angular/core";
|
|
19
21
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
20
22
|
import * as i2 from "@angular/animations";
|
|
@@ -30,6 +32,10 @@ export class ActionSheetComponent {
|
|
|
30
32
|
localizationService;
|
|
31
33
|
builder;
|
|
32
34
|
cdr;
|
|
35
|
+
/**
|
|
36
|
+
* @hidden
|
|
37
|
+
*/
|
|
38
|
+
currentView = 1;
|
|
33
39
|
/**
|
|
34
40
|
* @hidden
|
|
35
41
|
*/
|
|
@@ -40,6 +46,24 @@ export class ActionSheetComponent {
|
|
|
40
46
|
* @hidden
|
|
41
47
|
*/
|
|
42
48
|
direction;
|
|
49
|
+
/**
|
|
50
|
+
* Specifies the ActionSheet action buttons.
|
|
51
|
+
*/
|
|
52
|
+
actions;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies the layout of the action buttons.
|
|
55
|
+
* By default, the action buttons are rendered horizontally and stretched.
|
|
56
|
+
*/
|
|
57
|
+
actionsLayout = {
|
|
58
|
+
orientation: 'horizontal',
|
|
59
|
+
alignment: 'stretched'
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Specifies if the ActionSheet is closed on overlay click.
|
|
63
|
+
*
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
overlayClickClose = false;
|
|
43
67
|
/**
|
|
44
68
|
* Specifies the text that is rendered as title.
|
|
45
69
|
*/
|
|
@@ -57,6 +81,11 @@ export class ActionSheetComponent {
|
|
|
57
81
|
* Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
|
|
58
82
|
*/
|
|
59
83
|
cssClass;
|
|
84
|
+
/**
|
|
85
|
+
* The inline styles that will be rendered on the inner ActionSheet element.
|
|
86
|
+
* Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
|
|
87
|
+
*/
|
|
88
|
+
cssStyle;
|
|
60
89
|
/**
|
|
61
90
|
* Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
|
|
62
91
|
* By default the animations are turned off. The default animations' duration is `300ms`.
|
|
@@ -82,6 +111,10 @@ export class ActionSheetComponent {
|
|
|
82
111
|
* Used to provide a two-way binding for the `expanded` property.
|
|
83
112
|
*/
|
|
84
113
|
expandedChange = new EventEmitter();
|
|
114
|
+
/**
|
|
115
|
+
* Fires when any of the ActionSheet action buttons is clicked.
|
|
116
|
+
*/
|
|
117
|
+
action = new EventEmitter();
|
|
85
118
|
/**
|
|
86
119
|
* Fires when the ActionSheet is expanded and its animation is complete.
|
|
87
120
|
*/
|
|
@@ -102,6 +135,10 @@ export class ActionSheetComponent {
|
|
|
102
135
|
* @hidden
|
|
103
136
|
*/
|
|
104
137
|
childContainer;
|
|
138
|
+
/**
|
|
139
|
+
* @hidden
|
|
140
|
+
*/
|
|
141
|
+
actionSheetViews;
|
|
105
142
|
/**
|
|
106
143
|
* @hidden
|
|
107
144
|
*/
|
|
@@ -158,6 +195,24 @@ export class ActionSheetComponent {
|
|
|
158
195
|
this.player.destroy();
|
|
159
196
|
}
|
|
160
197
|
}
|
|
198
|
+
/**
|
|
199
|
+
* @hidden
|
|
200
|
+
* Navigates to the next view.
|
|
201
|
+
*/
|
|
202
|
+
nextView() {
|
|
203
|
+
if (this.currentView < this.actionSheetViews.length) {
|
|
204
|
+
this.currentView += 1;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* @hidden
|
|
209
|
+
* Navigates to the previous view.
|
|
210
|
+
*/
|
|
211
|
+
prevView() {
|
|
212
|
+
if (this.currentView > 1) {
|
|
213
|
+
this.currentView -= 1;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
161
216
|
/**
|
|
162
217
|
* Toggles the visibility of the ActionSheet.
|
|
163
218
|
*
|
|
@@ -184,6 +239,18 @@ export class ActionSheetComponent {
|
|
|
184
239
|
this[current ? 'expand' : 'collapse'].emit();
|
|
185
240
|
}
|
|
186
241
|
}
|
|
242
|
+
/**
|
|
243
|
+
* @hidden
|
|
244
|
+
*/
|
|
245
|
+
get orientationClass() {
|
|
246
|
+
return this.actionsLayout.orientation ? `k-actions-${this.actionsLayout.orientation}` : '';
|
|
247
|
+
}
|
|
248
|
+
/**
|
|
249
|
+
* @hidden
|
|
250
|
+
*/
|
|
251
|
+
get alignmentClass() {
|
|
252
|
+
return this.actionsLayout.alignment ? `k-actions-${this.actionsLayout.alignment}` : '';
|
|
253
|
+
}
|
|
187
254
|
/**
|
|
188
255
|
* @hidden
|
|
189
256
|
*/
|
|
@@ -207,6 +274,9 @@ export class ActionSheetComponent {
|
|
|
207
274
|
*/
|
|
208
275
|
onOverlayClick() {
|
|
209
276
|
this.overlayClick.emit();
|
|
277
|
+
if (this.overlayClickClose) {
|
|
278
|
+
this.toggle(false);
|
|
279
|
+
}
|
|
210
280
|
}
|
|
211
281
|
/**
|
|
212
282
|
* @hidden
|
|
@@ -311,80 +381,106 @@ export class ActionSheetComponent {
|
|
|
311
381
|
this.player.play();
|
|
312
382
|
}
|
|
313
383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
|
|
314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
|
|
384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
|
|
315
385
|
LocalizationService,
|
|
316
386
|
{
|
|
317
387
|
provide: L10N_PREFIX,
|
|
318
388
|
useValue: 'kendo.actionsheet.component'
|
|
319
389
|
}
|
|
320
|
-
], 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: `
|
|
390
|
+
], 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 }, { propertyName: "actionSheetViews", predicate: i0.forwardRef(function () { return ActionSheetViewComponent; }) }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
|
|
321
391
|
<ng-container *ngIf="expanded">
|
|
322
392
|
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
323
393
|
<div class="k-animation-container k-animation-container-shown">
|
|
324
394
|
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
325
|
-
<div
|
|
395
|
+
<div
|
|
396
|
+
class="k-actionsheet k-actionsheet-bottom"
|
|
326
397
|
[ngClass]="cssClass"
|
|
398
|
+
[ngStyle]="cssStyle"
|
|
327
399
|
role="dialog"
|
|
328
400
|
aria-modal="true"
|
|
329
|
-
[attr.aria-labelledby]="titleId"
|
|
401
|
+
[attr.aria-labelledby]="titleId"
|
|
402
|
+
[style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
|
|
403
|
+
>
|
|
404
|
+
<ng-content *ngIf="actionSheetViews?.length > 0" select="kendo-actionsheet-view"></ng-content>
|
|
405
|
+
|
|
406
|
+
<div *ngIf="actionSheetViews?.length === 0" class="k-actionsheet-view">
|
|
407
|
+
<ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
|
|
408
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
409
|
+
</ng-template>
|
|
330
410
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
411
|
+
<ng-template #defaultTemplate>
|
|
412
|
+
<div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
|
|
413
|
+
<ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
|
|
414
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
415
|
+
</ng-template>
|
|
334
416
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
417
|
+
<ng-template #defaultHeaderTemplate>
|
|
418
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
419
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
420
|
+
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
421
|
+
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
</ng-template>
|
|
425
|
+
</div>
|
|
340
426
|
|
|
341
|
-
<
|
|
342
|
-
<
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
427
|
+
<div *ngIf="items || contentTemplate" class="k-actionsheet-content">
|
|
428
|
+
<ng-template *ngIf="contentTemplate; else defaultContentTemplate"
|
|
429
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
430
|
+
</ng-template>
|
|
431
|
+
<ng-template #defaultContentTemplate>
|
|
432
|
+
<div *ngIf="topGroupItems" kendoActionSheetList
|
|
433
|
+
class="k-list-ul"
|
|
434
|
+
role="group"
|
|
435
|
+
[groupItems]="topGroupItems"
|
|
436
|
+
[allItems]="items"
|
|
437
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
438
|
+
(itemClick)="onItemClick($event)">
|
|
346
439
|
</div>
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
440
|
+
|
|
441
|
+
<hr *ngIf="shouldRenderSeparator" class="k-hr"/>
|
|
442
|
+
|
|
443
|
+
<div *ngIf="bottomGroupItems" kendoActionSheetList
|
|
444
|
+
class="k-list-ul"
|
|
445
|
+
role="group"
|
|
446
|
+
[groupItems]="bottomGroupItems"
|
|
447
|
+
[allItems]="items"
|
|
448
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
449
|
+
(itemClick)="onItemClick($event)">
|
|
450
|
+
</div>
|
|
451
|
+
</ng-template>
|
|
452
|
+
</div>
|
|
453
|
+
<div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
454
|
+
<ng-template
|
|
455
|
+
*ngIf="footerTemplate"
|
|
456
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
457
|
+
</ng-template>
|
|
350
458
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
[allItems]="items"
|
|
372
|
-
[itemTemplate]="itemTemplate?.templateRef"
|
|
373
|
-
(itemClick)="onItemClick($event)">
|
|
374
|
-
</div>
|
|
375
|
-
</ng-template>
|
|
376
|
-
</div>
|
|
377
|
-
<div *ngIf="footerTemplate" class="k-actionsheet-footer">
|
|
378
|
-
<ng-template
|
|
379
|
-
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
380
|
-
</ng-template>
|
|
381
|
-
</div>
|
|
382
|
-
</ng-template>
|
|
459
|
+
<ng-container *ngIf="!footerTemplate && actions">
|
|
460
|
+
<button
|
|
461
|
+
*ngFor="let actionButton of actions"
|
|
462
|
+
kendoButton
|
|
463
|
+
type="button"
|
|
464
|
+
[icon]="actionButton.icon"
|
|
465
|
+
[title]="actionButton.title"
|
|
466
|
+
[svgIcon]="actionButton.svgIcon"
|
|
467
|
+
[themeColor]="actionButton.themeColor"
|
|
468
|
+
[fillMode]="actionButton.fillMode"
|
|
469
|
+
[size]="actionButton.size"
|
|
470
|
+
[attr.aria-label]="actionButton.text"
|
|
471
|
+
(click)="action.emit(actionButton)"
|
|
472
|
+
>
|
|
473
|
+
{{ actionButton.text }}
|
|
474
|
+
</button>
|
|
475
|
+
</ng-container>
|
|
476
|
+
</div>
|
|
477
|
+
</ng-template>
|
|
478
|
+
</div>
|
|
383
479
|
</div>
|
|
384
480
|
</div>
|
|
385
481
|
</div>
|
|
386
482
|
</ng-container>
|
|
387
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }] });
|
|
483
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
388
484
|
}
|
|
389
485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
390
486
|
type: Component,
|
|
@@ -396,64 +492,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
396
492
|
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
397
493
|
<div class="k-animation-container k-animation-container-shown">
|
|
398
494
|
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
399
|
-
<div
|
|
495
|
+
<div
|
|
496
|
+
class="k-actionsheet k-actionsheet-bottom"
|
|
400
497
|
[ngClass]="cssClass"
|
|
498
|
+
[ngStyle]="cssStyle"
|
|
401
499
|
role="dialog"
|
|
402
500
|
aria-modal="true"
|
|
403
|
-
[attr.aria-labelledby]="titleId"
|
|
501
|
+
[attr.aria-labelledby]="titleId"
|
|
502
|
+
[style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
|
|
503
|
+
>
|
|
504
|
+
<ng-content *ngIf="actionSheetViews?.length > 0" select="kendo-actionsheet-view"></ng-content>
|
|
505
|
+
|
|
506
|
+
<div *ngIf="actionSheetViews?.length === 0" class="k-actionsheet-view">
|
|
507
|
+
<ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
|
|
508
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
509
|
+
</ng-template>
|
|
404
510
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
511
|
+
<ng-template #defaultTemplate>
|
|
512
|
+
<div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
|
|
513
|
+
<ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
|
|
514
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
515
|
+
</ng-template>
|
|
408
516
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
517
|
+
<ng-template #defaultHeaderTemplate>
|
|
518
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
519
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
520
|
+
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
521
|
+
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
</ng-template>
|
|
525
|
+
</div>
|
|
414
526
|
|
|
415
|
-
<
|
|
416
|
-
<
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
527
|
+
<div *ngIf="items || contentTemplate" class="k-actionsheet-content">
|
|
528
|
+
<ng-template *ngIf="contentTemplate; else defaultContentTemplate"
|
|
529
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
530
|
+
</ng-template>
|
|
531
|
+
<ng-template #defaultContentTemplate>
|
|
532
|
+
<div *ngIf="topGroupItems" kendoActionSheetList
|
|
533
|
+
class="k-list-ul"
|
|
534
|
+
role="group"
|
|
535
|
+
[groupItems]="topGroupItems"
|
|
536
|
+
[allItems]="items"
|
|
537
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
538
|
+
(itemClick)="onItemClick($event)">
|
|
420
539
|
</div>
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
540
|
+
|
|
541
|
+
<hr *ngIf="shouldRenderSeparator" class="k-hr"/>
|
|
542
|
+
|
|
543
|
+
<div *ngIf="bottomGroupItems" kendoActionSheetList
|
|
544
|
+
class="k-list-ul"
|
|
545
|
+
role="group"
|
|
546
|
+
[groupItems]="bottomGroupItems"
|
|
547
|
+
[allItems]="items"
|
|
548
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
549
|
+
(itemClick)="onItemClick($event)">
|
|
550
|
+
</div>
|
|
551
|
+
</ng-template>
|
|
552
|
+
</div>
|
|
553
|
+
<div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
554
|
+
<ng-template
|
|
555
|
+
*ngIf="footerTemplate"
|
|
556
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
557
|
+
</ng-template>
|
|
424
558
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
[allItems]="items"
|
|
446
|
-
[itemTemplate]="itemTemplate?.templateRef"
|
|
447
|
-
(itemClick)="onItemClick($event)">
|
|
448
|
-
</div>
|
|
449
|
-
</ng-template>
|
|
450
|
-
</div>
|
|
451
|
-
<div *ngIf="footerTemplate" class="k-actionsheet-footer">
|
|
452
|
-
<ng-template
|
|
453
|
-
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
454
|
-
</ng-template>
|
|
455
|
-
</div>
|
|
456
|
-
</ng-template>
|
|
559
|
+
<ng-container *ngIf="!footerTemplate && actions">
|
|
560
|
+
<button
|
|
561
|
+
*ngFor="let actionButton of actions"
|
|
562
|
+
kendoButton
|
|
563
|
+
type="button"
|
|
564
|
+
[icon]="actionButton.icon"
|
|
565
|
+
[title]="actionButton.title"
|
|
566
|
+
[svgIcon]="actionButton.svgIcon"
|
|
567
|
+
[themeColor]="actionButton.themeColor"
|
|
568
|
+
[fillMode]="actionButton.fillMode"
|
|
569
|
+
[size]="actionButton.size"
|
|
570
|
+
[attr.aria-label]="actionButton.text"
|
|
571
|
+
(click)="action.emit(actionButton)"
|
|
572
|
+
>
|
|
573
|
+
{{ actionButton.text }}
|
|
574
|
+
</button>
|
|
575
|
+
</ng-container>
|
|
576
|
+
</div>
|
|
577
|
+
</ng-template>
|
|
578
|
+
</div>
|
|
457
579
|
</div>
|
|
458
580
|
</div>
|
|
459
581
|
</div>
|
|
@@ -467,7 +589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
467
589
|
}
|
|
468
590
|
],
|
|
469
591
|
standalone: true,
|
|
470
|
-
imports: [NgIf, NgClass, NgTemplateOutlet, ActionSheetListComponent]
|
|
592
|
+
imports: [NgIf, NgFor, NgStyle, NgClass, NgTemplateOutlet, ActionSheetListComponent, ButtonDirective]
|
|
471
593
|
}]
|
|
472
594
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
|
|
473
595
|
type: HostBinding,
|
|
@@ -475,6 +597,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
475
597
|
}], direction: [{
|
|
476
598
|
type: HostBinding,
|
|
477
599
|
args: ['attr.dir']
|
|
600
|
+
}], actions: [{
|
|
601
|
+
type: Input
|
|
602
|
+
}], actionsLayout: [{
|
|
603
|
+
type: Input
|
|
604
|
+
}], overlayClickClose: [{
|
|
605
|
+
type: Input
|
|
478
606
|
}], title: [{
|
|
479
607
|
type: Input
|
|
480
608
|
}], subtitle: [{
|
|
@@ -483,6 +611,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
483
611
|
type: Input
|
|
484
612
|
}], cssClass: [{
|
|
485
613
|
type: Input
|
|
614
|
+
}], cssStyle: [{
|
|
615
|
+
type: Input
|
|
486
616
|
}], animation: [{
|
|
487
617
|
type: Input
|
|
488
618
|
}], expanded: [{
|
|
@@ -491,6 +621,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
491
621
|
type: Input
|
|
492
622
|
}], expandedChange: [{
|
|
493
623
|
type: Output
|
|
624
|
+
}], action: [{
|
|
625
|
+
type: Output
|
|
494
626
|
}], expand: [{
|
|
495
627
|
type: Output
|
|
496
628
|
}], collapse: [{
|
|
@@ -502,6 +634,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
502
634
|
}], childContainer: [{
|
|
503
635
|
type: ViewChild,
|
|
504
636
|
args: ['childContainer']
|
|
637
|
+
}], actionSheetViews: [{
|
|
638
|
+
type: ContentChildren,
|
|
639
|
+
args: [forwardRef(() => ActionSheetViewComponent)]
|
|
505
640
|
}], actionSheetTemplate: [{
|
|
506
641
|
type: ContentChild,
|
|
507
642
|
args: [ActionSheetTemplateDirective]
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
export {};
|
|
@@ -7,11 +7,12 @@ import { IconsService } from '@progress/kendo-angular-icons';
|
|
|
7
7
|
import { KENDO_ACTIONSHEET } from './directives';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "./actionsheet/actionsheet.component";
|
|
10
|
-
import * as i2 from "./actionsheet/
|
|
11
|
-
import * as i3 from "./actionsheet/templates/
|
|
12
|
-
import * as i4 from "./actionsheet/templates/
|
|
13
|
-
import * as i5 from "./actionsheet/templates/
|
|
14
|
-
import * as i6 from "./actionsheet/templates/
|
|
10
|
+
import * as i2 from "./actionsheet/actionsheet-view.component";
|
|
11
|
+
import * as i3 from "./actionsheet/templates/header-template.directive";
|
|
12
|
+
import * as i4 from "./actionsheet/templates/item-template.directive";
|
|
13
|
+
import * as i5 from "./actionsheet/templates/content-template.directive";
|
|
14
|
+
import * as i6 from "./actionsheet/templates/footer-template.directive";
|
|
15
|
+
import * as i7 from "./actionsheet/templates/actionsheet-template";
|
|
15
16
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
16
17
|
/**
|
|
17
18
|
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
@@ -47,7 +48,7 @@ import * as i6 from "./actionsheet/templates/actionsheet-template";
|
|
|
47
48
|
*/
|
|
48
49
|
export class ActionSheetModule {
|
|
49
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
50
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [i1.ActionSheetComponent, i2.
|
|
51
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [i1.ActionSheetComponent, i2.ActionSheetViewComponent, i3.ActionSheetHeaderTemplateDirective, i4.ActionSheetItemTemplateDirective, i5.ActionSheetContentTemplateDirective, i6.ActionSheetFooterTemplateDirective, i7.ActionSheetTemplateDirective], exports: [i1.ActionSheetComponent, i2.ActionSheetViewComponent, i3.ActionSheetHeaderTemplateDirective, i4.ActionSheetItemTemplateDirective, i5.ActionSheetContentTemplateDirective, i6.ActionSheetFooterTemplateDirective, i7.ActionSheetTemplateDirective] });
|
|
51
52
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [i1.ActionSheetComponent] });
|
|
52
53
|
}
|
|
53
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, decorators: [{
|
package/esm2022/directives.mjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Copyright © 2025 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 { ActionSheetViewComponent } from "./actionsheet/actionsheet-view.component";
|
|
5
6
|
import { ActionSheetComponent } from "./actionsheet/actionsheet.component";
|
|
6
7
|
import { ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetTemplateDirective } from "./actionsheet/models";
|
|
7
8
|
import { AppBarSectionComponent } from "./appbar/appbar-section.component";
|
|
@@ -16,6 +17,7 @@ import { BreadCrumbItemTemplateDirective } from "./breadcrumb/template-directive
|
|
|
16
17
|
*/
|
|
17
18
|
export const KENDO_ACTIONSHEET = [
|
|
18
19
|
ActionSheetComponent,
|
|
20
|
+
ActionSheetViewComponent,
|
|
19
21
|
ActionSheetHeaderTemplateDirective,
|
|
20
22
|
ActionSheetItemTemplateDirective,
|
|
21
23
|
ActionSheetContentTemplateDirective,
|
package/esm2022/index.mjs
CHANGED
|
@@ -21,6 +21,7 @@ export { BreadCrumbItemComponent } from './breadcrumb/breadcrumb-item.component'
|
|
|
21
21
|
export { BreadCrumbListComponent } from './breadcrumb/list.component';
|
|
22
22
|
//ActionSheet exports
|
|
23
23
|
export { ActionSheetComponent } from './actionsheet/actionsheet.component';
|
|
24
|
+
export { ActionSheetViewComponent } from './actionsheet/actionsheet-view.component';
|
|
24
25
|
export { ActionSheetItemClickEvent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './actionsheet/models';
|
|
25
26
|
export { ActionSheetModule } from './actionsheet.module';
|
|
26
27
|
export * from './directives';
|
|
@@ -8,18 +8,19 @@ import { ResizeBatchService } from '@progress/kendo-angular-common';
|
|
|
8
8
|
import { KENDO_NAVIGATION } from './directives';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
import * as i1 from "./actionsheet/actionsheet.component";
|
|
11
|
-
import * as i2 from "./actionsheet/
|
|
12
|
-
import * as i3 from "./actionsheet/templates/
|
|
13
|
-
import * as i4 from "./actionsheet/templates/
|
|
14
|
-
import * as i5 from "./actionsheet/templates/
|
|
15
|
-
import * as i6 from "./actionsheet/templates/
|
|
16
|
-
import * as i7 from "./
|
|
17
|
-
import * as i8 from "./appbar/appbar
|
|
18
|
-
import * as i9 from "./appbar/appbar-
|
|
19
|
-
import * as i10 from "./
|
|
20
|
-
import * as i11 from "./bottomnavigation/
|
|
21
|
-
import * as i12 from "./
|
|
22
|
-
import * as i13 from "./breadcrumb/
|
|
11
|
+
import * as i2 from "./actionsheet/actionsheet-view.component";
|
|
12
|
+
import * as i3 from "./actionsheet/templates/header-template.directive";
|
|
13
|
+
import * as i4 from "./actionsheet/templates/item-template.directive";
|
|
14
|
+
import * as i5 from "./actionsheet/templates/content-template.directive";
|
|
15
|
+
import * as i6 from "./actionsheet/templates/footer-template.directive";
|
|
16
|
+
import * as i7 from "./actionsheet/templates/actionsheet-template";
|
|
17
|
+
import * as i8 from "./appbar/appbar.component";
|
|
18
|
+
import * as i9 from "./appbar/appbar-section.component";
|
|
19
|
+
import * as i10 from "./appbar/appbar-spacer.component";
|
|
20
|
+
import * as i11 from "./bottomnavigation/bottomnavigation.component";
|
|
21
|
+
import * as i12 from "./bottomnavigation/templates/item-template.directive";
|
|
22
|
+
import * as i13 from "./breadcrumb/breadcrumb.component";
|
|
23
|
+
import * as i14 from "./breadcrumb/template-directives/item-template.directive";
|
|
23
24
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
24
25
|
/**
|
|
25
26
|
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
@@ -54,8 +55,8 @@ import * as i13 from "./breadcrumb/template-directives/item-template.directive";
|
|
|
54
55
|
*/
|
|
55
56
|
export class NavigationModule {
|
|
56
57
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
57
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, imports: [i1.ActionSheetComponent, i2.
|
|
58
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [i1.ActionSheetComponent,
|
|
58
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, imports: [i1.ActionSheetComponent, i2.ActionSheetViewComponent, i3.ActionSheetHeaderTemplateDirective, i4.ActionSheetItemTemplateDirective, i5.ActionSheetContentTemplateDirective, i6.ActionSheetFooterTemplateDirective, i7.ActionSheetTemplateDirective, i8.AppBarComponent, i9.AppBarSectionComponent, i10.AppBarSpacerComponent, i11.BottomNavigationComponent, i12.BottomNavigationItemTemplateDirective, i13.BreadCrumbComponent, i14.BreadCrumbItemTemplateDirective], exports: [i1.ActionSheetComponent, i2.ActionSheetViewComponent, i3.ActionSheetHeaderTemplateDirective, i4.ActionSheetItemTemplateDirective, i5.ActionSheetContentTemplateDirective, i6.ActionSheetFooterTemplateDirective, i7.ActionSheetTemplateDirective, i8.AppBarComponent, i9.AppBarSectionComponent, i10.AppBarSpacerComponent, i11.BottomNavigationComponent, i12.BottomNavigationItemTemplateDirective, i13.BreadCrumbComponent, i14.BreadCrumbItemTemplateDirective] });
|
|
59
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [i1.ActionSheetComponent, i11.BottomNavigationComponent, i13.BreadCrumbComponent] });
|
|
59
60
|
}
|
|
60
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, decorators: [{
|
|
61
62
|
type: NgModule,
|