@progress/kendo-angular-navigation 21.1.1-develop.2 → 21.2.0-develop.1
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/esm2022/actionsheet/actionsheet-view.component.mjs +71 -53
- package/esm2022/actionsheet/actionsheet.component.mjs +217 -181
- package/esm2022/actionsheet/item.component.mjs +63 -45
- package/esm2022/actionsheet/list.component.mjs +8 -6
- package/esm2022/bottomnavigation/bottomnavigation-item.component.mjs +39 -27
- package/esm2022/bottomnavigation/bottomnavigation.component.mjs +20 -19
- package/esm2022/breadcrumb/breadcrumb-item.component.mjs +73 -61
- package/esm2022/breadcrumb/breadcrumb.component.mjs +33 -31
- package/esm2022/breadcrumb/list.component.mjs +23 -20
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-navigation.mjs +542 -437
- package/package.json +7 -7
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, ContentChild, ElementRef, Host, HostBinding, Input, NgZone, Optional, Renderer2 } from '@angular/core';
|
|
6
6
|
import { ActionSheetHeaderTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './models';
|
|
7
|
-
import { NgClass,
|
|
7
|
+
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
8
8
|
import { getId } from '../common/util';
|
|
9
9
|
import { ActionSheetComponent } from './actionsheet.component';
|
|
10
10
|
import { take } from 'rxjs/operators';
|
|
@@ -51,75 +51,93 @@ export class ActionSheetViewComponent {
|
|
|
51
51
|
return this.actionSheet?.alignmentClass;
|
|
52
52
|
}
|
|
53
53
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: i1.ActionSheetComponent, host: true, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
55
|
-
|
|
54
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
|
|
55
|
+
@if (actionSheetTemplate) {
|
|
56
|
+
<ng-template
|
|
56
57
|
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<div
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<ng-template #defaultHeaderTemplate>
|
|
65
|
-
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
66
|
-
<div class="k-actionsheet-title" [id]="titleId">
|
|
67
|
-
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
68
|
-
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
58
|
+
</ng-template>
|
|
59
|
+
} @else {
|
|
60
|
+
@if (title || subtitle || headerTemplate) {
|
|
61
|
+
<div class="k-actionsheet-titlebar">
|
|
62
|
+
@if (headerTemplate) {
|
|
63
|
+
<ng-template [ngTemplateOutlet]="headerTemplate.templateRef">
|
|
71
64
|
</ng-template>
|
|
65
|
+
} @else {
|
|
66
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
67
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
68
|
+
@if (title) {
|
|
69
|
+
<div class="k-text-center">{{title}}</div>
|
|
70
|
+
}
|
|
71
|
+
@if (subtitle) {
|
|
72
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
73
|
+
}
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
}
|
|
72
77
|
</div>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
}
|
|
79
|
+
@if (contentTemplate) {
|
|
80
|
+
<div class="k-actionsheet-content">
|
|
81
|
+
<ng-template [ngTemplateOutlet]="contentTemplate.templateRef">
|
|
82
|
+
</ng-template>
|
|
77
83
|
</div>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
84
|
+
}
|
|
85
|
+
@if (footerTemplate) {
|
|
86
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
87
|
+
<ng-template [ngTemplateOutlet]="footerTemplate.templateRef">
|
|
88
|
+
</ng-template>
|
|
82
89
|
</div>
|
|
83
|
-
|
|
84
|
-
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
85
94
|
}
|
|
86
95
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
|
|
87
96
|
type: Component,
|
|
88
97
|
args: [{
|
|
89
98
|
selector: 'kendo-actionsheet-view',
|
|
90
99
|
template: `
|
|
91
|
-
|
|
100
|
+
@if (actionSheetTemplate) {
|
|
101
|
+
<ng-template
|
|
92
102
|
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<div
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<ng-template #defaultHeaderTemplate>
|
|
101
|
-
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
102
|
-
<div class="k-actionsheet-title" [id]="titleId">
|
|
103
|
-
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
104
|
-
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
103
|
+
</ng-template>
|
|
104
|
+
} @else {
|
|
105
|
+
@if (title || subtitle || headerTemplate) {
|
|
106
|
+
<div class="k-actionsheet-titlebar">
|
|
107
|
+
@if (headerTemplate) {
|
|
108
|
+
<ng-template [ngTemplateOutlet]="headerTemplate.templateRef">
|
|
107
109
|
</ng-template>
|
|
110
|
+
} @else {
|
|
111
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
112
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
113
|
+
@if (title) {
|
|
114
|
+
<div class="k-text-center">{{title}}</div>
|
|
115
|
+
}
|
|
116
|
+
@if (subtitle) {
|
|
117
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
118
|
+
}
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
}
|
|
108
122
|
</div>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
123
|
+
}
|
|
124
|
+
@if (contentTemplate) {
|
|
125
|
+
<div class="k-actionsheet-content">
|
|
126
|
+
<ng-template [ngTemplateOutlet]="contentTemplate.templateRef">
|
|
127
|
+
</ng-template>
|
|
113
128
|
</div>
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
129
|
+
}
|
|
130
|
+
@if (footerTemplate) {
|
|
131
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
132
|
+
<ng-template [ngTemplateOutlet]="footerTemplate.templateRef">
|
|
133
|
+
</ng-template>
|
|
118
134
|
</div>
|
|
119
|
-
|
|
120
|
-
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
`,
|
|
121
139
|
standalone: true,
|
|
122
|
-
imports: [
|
|
140
|
+
imports: [NgClass, NgTemplateOutlet]
|
|
123
141
|
}]
|
|
124
142
|
}], ctorParameters: () => [{ type: i1.ActionSheetComponent, decorators: [{
|
|
125
143
|
type: Optional
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, QueryList, forwardRef } from '@angular/core';
|
|
6
|
-
import {
|
|
6
|
+
import { NgClass, NgTemplateOutlet, 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';
|
|
@@ -388,106 +388,124 @@ export class ActionSheetComponent {
|
|
|
388
388
|
this.player.play();
|
|
389
389
|
}
|
|
390
390
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
|
|
391
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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", initialFocus: "initialFocus" }, 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: [
|
|
392
392
|
LocalizationService,
|
|
393
393
|
{
|
|
394
394
|
provide: L10N_PREFIX,
|
|
395
395
|
useValue: 'kendo.actionsheet.component'
|
|
396
396
|
}
|
|
397
397
|
], 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(() => ActionSheetViewComponent) }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
398
|
+
@if (expanded) {
|
|
399
|
+
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
400
|
+
<div class="k-animation-container k-animation-container-shown">
|
|
401
|
+
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
402
|
+
<div
|
|
403
|
+
class="k-actionsheet k-actionsheet-bottom"
|
|
404
|
+
[ngClass]="cssClass"
|
|
405
|
+
[ngStyle]="cssStyle"
|
|
406
|
+
role="dialog"
|
|
407
|
+
aria-modal="true"
|
|
408
|
+
[attr.aria-labelledby]="titleId"
|
|
409
|
+
[style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
|
|
410
|
+
>
|
|
411
|
+
@if (actionSheetViews?.length > 0) {
|
|
412
|
+
<ng-content select="kendo-actionsheet-view"></ng-content>
|
|
413
|
+
}
|
|
414
|
+
@if (actionSheetViews?.length === 0) {
|
|
415
|
+
<div class="k-actionsheet-view">
|
|
416
|
+
@if (actionSheetTemplate) {
|
|
417
|
+
<ng-template
|
|
418
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
419
|
+
</ng-template>
|
|
420
|
+
} @else {
|
|
421
|
+
@if (title || subtitle || headerTemplate) {
|
|
422
|
+
<div class="k-actionsheet-titlebar">
|
|
423
|
+
@if (headerTemplate) {
|
|
424
|
+
<ng-template
|
|
425
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
416
426
|
</ng-template>
|
|
417
|
-
|
|
418
|
-
<
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
kendoButton
|
|
470
|
-
type="button"
|
|
471
|
-
[icon]="actionButton.icon"
|
|
472
|
-
[title]="actionButton.title"
|
|
473
|
-
[svgIcon]="actionButton.svgIcon"
|
|
474
|
-
[themeColor]="actionButton.themeColor"
|
|
475
|
-
[fillMode]="actionButton.fillMode"
|
|
476
|
-
[size]="actionButton.size"
|
|
477
|
-
[attr.aria-label]="actionButton.text"
|
|
478
|
-
(click)="action.emit(actionButton)"
|
|
479
|
-
>
|
|
480
|
-
{{ actionButton.text }}
|
|
481
|
-
</button>
|
|
482
|
-
</ng-container>
|
|
483
|
-
</div>
|
|
427
|
+
} @else {
|
|
428
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
429
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
430
|
+
@if (title) {
|
|
431
|
+
<div class="k-text-center">{{title}}</div>
|
|
432
|
+
}
|
|
433
|
+
@if (subtitle) {
|
|
434
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
435
|
+
}
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
}
|
|
439
|
+
</div>
|
|
440
|
+
}
|
|
441
|
+
@if (items || contentTemplate) {
|
|
442
|
+
<div class="k-actionsheet-content">
|
|
443
|
+
@if (contentTemplate) {
|
|
444
|
+
<ng-template
|
|
445
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
446
|
+
</ng-template>
|
|
447
|
+
} @else {
|
|
448
|
+
@if (topGroupItems) {
|
|
449
|
+
<div kendoActionSheetList
|
|
450
|
+
class="k-list-ul"
|
|
451
|
+
role="group"
|
|
452
|
+
[groupItems]="topGroupItems"
|
|
453
|
+
[allItems]="items"
|
|
454
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
455
|
+
(itemClick)="onItemClick($event)">
|
|
456
|
+
</div>
|
|
457
|
+
}
|
|
458
|
+
@if (shouldRenderSeparator) {
|
|
459
|
+
<hr class="k-hr"/>
|
|
460
|
+
}
|
|
461
|
+
@if (bottomGroupItems) {
|
|
462
|
+
<div kendoActionSheetList
|
|
463
|
+
class="k-list-ul"
|
|
464
|
+
role="group"
|
|
465
|
+
[groupItems]="bottomGroupItems"
|
|
466
|
+
[allItems]="items"
|
|
467
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
468
|
+
(itemClick)="onItemClick($event)">
|
|
469
|
+
</div>
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
</div>
|
|
473
|
+
}
|
|
474
|
+
@if (footerTemplate || actions) {
|
|
475
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
476
|
+
@if (footerTemplate) {
|
|
477
|
+
<ng-template
|
|
478
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
484
479
|
</ng-template>
|
|
480
|
+
}
|
|
481
|
+
@if (!footerTemplate && actions) {
|
|
482
|
+
@for (actionButton of actions; track actionButton) {
|
|
483
|
+
<button
|
|
484
|
+
kendoButton
|
|
485
|
+
type="button"
|
|
486
|
+
[icon]="actionButton.icon"
|
|
487
|
+
[title]="actionButton.title"
|
|
488
|
+
[svgIcon]="actionButton.svgIcon"
|
|
489
|
+
[themeColor]="actionButton.themeColor"
|
|
490
|
+
[fillMode]="actionButton.fillMode"
|
|
491
|
+
[size]="actionButton.size"
|
|
492
|
+
[attr.aria-label]="actionButton.text"
|
|
493
|
+
(click)="action.emit(actionButton)"
|
|
494
|
+
>
|
|
495
|
+
{{ actionButton.text }}
|
|
496
|
+
</button>
|
|
497
|
+
}
|
|
498
|
+
}
|
|
485
499
|
</div>
|
|
486
|
-
|
|
487
|
-
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
</div>
|
|
503
|
+
}
|
|
504
|
+
</div>
|
|
488
505
|
</div>
|
|
489
|
-
|
|
490
|
-
|
|
506
|
+
</div>
|
|
507
|
+
}
|
|
508
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
491
509
|
}
|
|
492
510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
493
511
|
type: Component,
|
|
@@ -495,99 +513,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
495
513
|
exportAs: 'kendoActionSheet',
|
|
496
514
|
selector: 'kendo-actionsheet',
|
|
497
515
|
template: `
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
+
@if (expanded) {
|
|
517
|
+
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
518
|
+
<div class="k-animation-container k-animation-container-shown">
|
|
519
|
+
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
520
|
+
<div
|
|
521
|
+
class="k-actionsheet k-actionsheet-bottom"
|
|
522
|
+
[ngClass]="cssClass"
|
|
523
|
+
[ngStyle]="cssStyle"
|
|
524
|
+
role="dialog"
|
|
525
|
+
aria-modal="true"
|
|
526
|
+
[attr.aria-labelledby]="titleId"
|
|
527
|
+
[style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
|
|
528
|
+
>
|
|
529
|
+
@if (actionSheetViews?.length > 0) {
|
|
530
|
+
<ng-content select="kendo-actionsheet-view"></ng-content>
|
|
531
|
+
}
|
|
532
|
+
@if (actionSheetViews?.length === 0) {
|
|
533
|
+
<div class="k-actionsheet-view">
|
|
534
|
+
@if (actionSheetTemplate) {
|
|
535
|
+
<ng-template
|
|
536
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
537
|
+
</ng-template>
|
|
538
|
+
} @else {
|
|
539
|
+
@if (title || subtitle || headerTemplate) {
|
|
540
|
+
<div class="k-actionsheet-titlebar">
|
|
541
|
+
@if (headerTemplate) {
|
|
542
|
+
<ng-template
|
|
543
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
516
544
|
</ng-template>
|
|
517
|
-
|
|
518
|
-
<
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
kendoButton
|
|
570
|
-
type="button"
|
|
571
|
-
[icon]="actionButton.icon"
|
|
572
|
-
[title]="actionButton.title"
|
|
573
|
-
[svgIcon]="actionButton.svgIcon"
|
|
574
|
-
[themeColor]="actionButton.themeColor"
|
|
575
|
-
[fillMode]="actionButton.fillMode"
|
|
576
|
-
[size]="actionButton.size"
|
|
577
|
-
[attr.aria-label]="actionButton.text"
|
|
578
|
-
(click)="action.emit(actionButton)"
|
|
579
|
-
>
|
|
580
|
-
{{ actionButton.text }}
|
|
581
|
-
</button>
|
|
582
|
-
</ng-container>
|
|
583
|
-
</div>
|
|
545
|
+
} @else {
|
|
546
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
547
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
548
|
+
@if (title) {
|
|
549
|
+
<div class="k-text-center">{{title}}</div>
|
|
550
|
+
}
|
|
551
|
+
@if (subtitle) {
|
|
552
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
553
|
+
}
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
556
|
+
}
|
|
557
|
+
</div>
|
|
558
|
+
}
|
|
559
|
+
@if (items || contentTemplate) {
|
|
560
|
+
<div class="k-actionsheet-content">
|
|
561
|
+
@if (contentTemplate) {
|
|
562
|
+
<ng-template
|
|
563
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
564
|
+
</ng-template>
|
|
565
|
+
} @else {
|
|
566
|
+
@if (topGroupItems) {
|
|
567
|
+
<div kendoActionSheetList
|
|
568
|
+
class="k-list-ul"
|
|
569
|
+
role="group"
|
|
570
|
+
[groupItems]="topGroupItems"
|
|
571
|
+
[allItems]="items"
|
|
572
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
573
|
+
(itemClick)="onItemClick($event)">
|
|
574
|
+
</div>
|
|
575
|
+
}
|
|
576
|
+
@if (shouldRenderSeparator) {
|
|
577
|
+
<hr class="k-hr"/>
|
|
578
|
+
}
|
|
579
|
+
@if (bottomGroupItems) {
|
|
580
|
+
<div kendoActionSheetList
|
|
581
|
+
class="k-list-ul"
|
|
582
|
+
role="group"
|
|
583
|
+
[groupItems]="bottomGroupItems"
|
|
584
|
+
[allItems]="items"
|
|
585
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
586
|
+
(itemClick)="onItemClick($event)">
|
|
587
|
+
</div>
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
</div>
|
|
591
|
+
}
|
|
592
|
+
@if (footerTemplate || actions) {
|
|
593
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
594
|
+
@if (footerTemplate) {
|
|
595
|
+
<ng-template
|
|
596
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
584
597
|
</ng-template>
|
|
598
|
+
}
|
|
599
|
+
@if (!footerTemplate && actions) {
|
|
600
|
+
@for (actionButton of actions; track actionButton) {
|
|
601
|
+
<button
|
|
602
|
+
kendoButton
|
|
603
|
+
type="button"
|
|
604
|
+
[icon]="actionButton.icon"
|
|
605
|
+
[title]="actionButton.title"
|
|
606
|
+
[svgIcon]="actionButton.svgIcon"
|
|
607
|
+
[themeColor]="actionButton.themeColor"
|
|
608
|
+
[fillMode]="actionButton.fillMode"
|
|
609
|
+
[size]="actionButton.size"
|
|
610
|
+
[attr.aria-label]="actionButton.text"
|
|
611
|
+
(click)="action.emit(actionButton)"
|
|
612
|
+
>
|
|
613
|
+
{{ actionButton.text }}
|
|
614
|
+
</button>
|
|
615
|
+
}
|
|
616
|
+
}
|
|
585
617
|
</div>
|
|
586
|
-
|
|
587
|
-
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
</div>
|
|
621
|
+
}
|
|
622
|
+
</div>
|
|
588
623
|
</div>
|
|
589
|
-
|
|
590
|
-
|
|
624
|
+
</div>
|
|
625
|
+
}
|
|
626
|
+
`,
|
|
591
627
|
providers: [
|
|
592
628
|
LocalizationService,
|
|
593
629
|
{
|
|
@@ -596,7 +632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
596
632
|
}
|
|
597
633
|
],
|
|
598
634
|
standalone: true,
|
|
599
|
-
imports: [
|
|
635
|
+
imports: [NgStyle, NgClass, NgTemplateOutlet, ActionSheetListComponent, ButtonDirective]
|
|
600
636
|
}]
|
|
601
637
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
|
|
602
638
|
type: HostBinding,
|