@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.
- package/actionsheet/actionsheet.component.d.ts +49 -6
- package/actionsheet/animation/animations.d.ts +13 -0
- package/actionsheet/models/animation.d.ts +13 -0
- package/actionsheet/models/index.d.ts +1 -0
- package/esm2020/actionsheet/actionsheet.component.mjs +241 -128
- package/esm2020/actionsheet/animation/animations.mjs +23 -0
- package/esm2020/actionsheet/models/animation.mjs +5 -0
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-navigation.mjs +258 -128
- package/fesm2020/progress-kendo-angular-navigation.mjs +258 -128
- package/index.d.ts +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,5 @@
|
|
|
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
|
+
export {};
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-navigation',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '11.2.0-develop.
|
|
12
|
+
publishDate: 1675417326,
|
|
13
|
+
version: '11.2.0-develop.3',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -12,10 +12,12 @@ import { closestInScope as closestInScope$1, isDocumentAvailable, Keys, ResizeSe
|
|
|
12
12
|
import * as i2 from '@angular/common';
|
|
13
13
|
import { CommonModule } from '@angular/common';
|
|
14
14
|
import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
|
|
15
|
-
import { filter, map, startWith, share } from 'rxjs/operators';
|
|
15
|
+
import { filter, map, startWith, share, take } from 'rxjs/operators';
|
|
16
16
|
import * as i1$1 from '@progress/kendo-angular-icons';
|
|
17
17
|
import { IconsModule } from '@progress/kendo-angular-icons';
|
|
18
18
|
import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
|
|
19
|
+
import * as i2$1 from '@angular/animations';
|
|
20
|
+
import { style, animate } from '@angular/animations';
|
|
19
21
|
|
|
20
22
|
/**
|
|
21
23
|
* @hidden
|
|
@@ -24,8 +26,8 @@ const packageMetadata = {
|
|
|
24
26
|
name: '@progress/kendo-angular-navigation',
|
|
25
27
|
productName: 'Kendo UI for Angular',
|
|
26
28
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
27
|
-
publishDate:
|
|
28
|
-
version: '11.2.0-develop.
|
|
29
|
+
publishDate: 1675417326,
|
|
30
|
+
version: '11.2.0-develop.3',
|
|
29
31
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
30
32
|
};
|
|
31
33
|
|
|
@@ -1802,6 +1804,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1802
1804
|
}] }];
|
|
1803
1805
|
} });
|
|
1804
1806
|
|
|
1807
|
+
/**
|
|
1808
|
+
* @hidden
|
|
1809
|
+
*/
|
|
1810
|
+
function slideUp(duration, height) {
|
|
1811
|
+
return [
|
|
1812
|
+
style({ overflow: 'hidden', display: 'block', height: 0 }),
|
|
1813
|
+
animate(`${duration}ms ease-in`, style({ height: `${height}` }))
|
|
1814
|
+
];
|
|
1815
|
+
}
|
|
1816
|
+
/**
|
|
1817
|
+
* @hidden
|
|
1818
|
+
*/
|
|
1819
|
+
function slideDown(duration, height) {
|
|
1820
|
+
return [
|
|
1821
|
+
style({ overflow: 'hidden', height: `${height}` }),
|
|
1822
|
+
animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
|
|
1823
|
+
];
|
|
1824
|
+
}
|
|
1825
|
+
|
|
1805
1826
|
/**
|
|
1806
1827
|
* @hidden
|
|
1807
1828
|
*/
|
|
@@ -1977,20 +1998,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1977
1998
|
type: Output
|
|
1978
1999
|
}] } });
|
|
1979
2000
|
|
|
2001
|
+
const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
|
|
1980
2002
|
/**
|
|
1981
2003
|
* Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
|
|
1982
2004
|
* Used to display a set of choices related to a task the user initiates.
|
|
1983
2005
|
*/
|
|
1984
2006
|
class ActionSheetComponent {
|
|
1985
|
-
constructor(element, ngZone, renderer, localizationService) {
|
|
2007
|
+
constructor(element, ngZone, renderer, localizationService, builder, cdr) {
|
|
1986
2008
|
this.element = element;
|
|
1987
2009
|
this.ngZone = ngZone;
|
|
1988
2010
|
this.renderer = renderer;
|
|
1989
2011
|
this.localizationService = localizationService;
|
|
2012
|
+
this.builder = builder;
|
|
2013
|
+
this.cdr = cdr;
|
|
1990
2014
|
/**
|
|
1991
|
-
*
|
|
2015
|
+
* Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
|
|
2016
|
+
* By default the animations are turned off. The default animations' duration is `300ms`.
|
|
2017
|
+
*
|
|
2018
|
+
* @default true
|
|
1992
2019
|
*/
|
|
1993
|
-
this.
|
|
2020
|
+
this.animation = true;
|
|
2021
|
+
/**
|
|
2022
|
+
* Specifies the state of the ActionSheet.
|
|
2023
|
+
*
|
|
2024
|
+
* @default false
|
|
2025
|
+
*/
|
|
2026
|
+
this.expanded = false;
|
|
2027
|
+
/**
|
|
2028
|
+
* Fires when the `expanded` property of the component is updated.
|
|
2029
|
+
* Used to provide a two-way binding for the `expanded` property.
|
|
2030
|
+
*/
|
|
2031
|
+
this.expandedChange = new EventEmitter();
|
|
2032
|
+
/**
|
|
2033
|
+
* Fires when the ActionSheet is expanded and its animation is complete.
|
|
2034
|
+
*/
|
|
2035
|
+
this.expand = new EventEmitter();
|
|
2036
|
+
/**
|
|
2037
|
+
* Fires when the ActionSheet is collapsed and its animation is complete.
|
|
2038
|
+
*/
|
|
2039
|
+
this.collapse = new EventEmitter();
|
|
1994
2040
|
/**
|
|
1995
2041
|
* Fires when an ActionSheet item is clicked.
|
|
1996
2042
|
*/
|
|
@@ -2005,6 +2051,7 @@ class ActionSheetComponent {
|
|
|
2005
2051
|
this.titleId = null;
|
|
2006
2052
|
this.rtl = false;
|
|
2007
2053
|
this.domSubs = new Subscription();
|
|
2054
|
+
this.animationEnd = new EventEmitter();
|
|
2008
2055
|
validatePackage(packageMetadata);
|
|
2009
2056
|
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
2010
2057
|
this.rtl = rtl;
|
|
@@ -2012,15 +2059,49 @@ class ActionSheetComponent {
|
|
|
2012
2059
|
});
|
|
2013
2060
|
this.titleId = getId('k-actionsheet-title');
|
|
2014
2061
|
}
|
|
2062
|
+
/**
|
|
2063
|
+
* @hidden
|
|
2064
|
+
*/
|
|
2065
|
+
get hostClass() {
|
|
2066
|
+
return this.expanded;
|
|
2067
|
+
}
|
|
2068
|
+
;
|
|
2015
2069
|
ngAfterViewInit() {
|
|
2016
|
-
this.handleInitialFocus();
|
|
2017
2070
|
this.initDomEvents();
|
|
2018
2071
|
}
|
|
2072
|
+
ngOnChanges(changes) {
|
|
2073
|
+
if (changes['expanded'] && this.expanded) {
|
|
2074
|
+
this.setExpanded(true);
|
|
2075
|
+
}
|
|
2076
|
+
}
|
|
2019
2077
|
ngOnDestroy() {
|
|
2020
2078
|
this.domSubs.unsubscribe();
|
|
2021
2079
|
if (this.dynamicRTLSubscription) {
|
|
2022
2080
|
this.dynamicRTLSubscription.unsubscribe();
|
|
2023
2081
|
}
|
|
2082
|
+
if (this.player) {
|
|
2083
|
+
this.player.destroy();
|
|
2084
|
+
}
|
|
2085
|
+
}
|
|
2086
|
+
/**
|
|
2087
|
+
* Toggles the visibility of the ActionSheet.
|
|
2088
|
+
*/
|
|
2089
|
+
toggle() {
|
|
2090
|
+
const current = !this.expanded;
|
|
2091
|
+
if (current === true) {
|
|
2092
|
+
this.setExpanded(true);
|
|
2093
|
+
}
|
|
2094
|
+
else if (current === false && !this.animation) {
|
|
2095
|
+
this.setExpanded(false);
|
|
2096
|
+
}
|
|
2097
|
+
if (this.animation) {
|
|
2098
|
+
this.animationEnd.pipe(take(1))
|
|
2099
|
+
.subscribe(() => { this.onAnimationEnd(current); });
|
|
2100
|
+
this.playAnimation(current);
|
|
2101
|
+
}
|
|
2102
|
+
else {
|
|
2103
|
+
this[current ? 'expand' : 'collapse'].emit();
|
|
2104
|
+
}
|
|
2024
2105
|
}
|
|
2025
2106
|
/**
|
|
2026
2107
|
* @hidden
|
|
@@ -2111,152 +2192,188 @@ class ActionSheetComponent {
|
|
|
2111
2192
|
}
|
|
2112
2193
|
this.itemClick.emit({ item, originalEvent: event });
|
|
2113
2194
|
}
|
|
2195
|
+
setExpanded(value) {
|
|
2196
|
+
this.expanded = value;
|
|
2197
|
+
this.expandedChange.emit(value);
|
|
2198
|
+
if (this.expanded) {
|
|
2199
|
+
this.cdr.detectChanges();
|
|
2200
|
+
this.handleInitialFocus();
|
|
2201
|
+
}
|
|
2202
|
+
}
|
|
2203
|
+
onAnimationEnd(currentExpanded) {
|
|
2204
|
+
if (currentExpanded) {
|
|
2205
|
+
this.expand.emit();
|
|
2206
|
+
}
|
|
2207
|
+
else {
|
|
2208
|
+
this.setExpanded(false);
|
|
2209
|
+
this.collapse.emit();
|
|
2210
|
+
}
|
|
2211
|
+
}
|
|
2212
|
+
playAnimation(expanded) {
|
|
2213
|
+
const duration = typeof this.animation !== 'boolean' && this.animation.duration ? this.animation.duration : DEFAULT_ANIMATION_CONFIG.duration;
|
|
2214
|
+
const contentHeight = getComputedStyle(this.childContainer.nativeElement).height;
|
|
2215
|
+
const animation = expanded ? slideUp(duration, contentHeight) : slideDown(duration, contentHeight);
|
|
2216
|
+
const factory = this.builder.build(animation);
|
|
2217
|
+
this.player = factory.create(this.childContainer.nativeElement);
|
|
2218
|
+
this.player.onDone(() => {
|
|
2219
|
+
if (this.player) {
|
|
2220
|
+
this.animationEnd.emit();
|
|
2221
|
+
this.player.destroy();
|
|
2222
|
+
this.player = null;
|
|
2223
|
+
}
|
|
2224
|
+
});
|
|
2225
|
+
this.player.play();
|
|
2226
|
+
}
|
|
2114
2227
|
}
|
|
2115
|
-
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 });
|
|
2116
|
-
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: [
|
|
2228
|
+
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$1.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2229
|
+
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: [
|
|
2117
2230
|
LocalizationService,
|
|
2118
2231
|
{
|
|
2119
2232
|
provide: L10N_PREFIX,
|
|
2120
2233
|
useValue: 'kendo.actionsheet.component'
|
|
2121
2234
|
}
|
|
2122
|
-
], 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: `
|
|
2123
|
-
<
|
|
2124
|
-
|
|
2125
|
-
<div class="k-
|
|
2126
|
-
<div class="k-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2235
|
+
], 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: `
|
|
2236
|
+
<ng-container *ngIf="expanded">
|
|
2237
|
+
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
2238
|
+
<div class="k-animation-container">
|
|
2239
|
+
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
2240
|
+
<div class="k-actionsheet k-actionsheet-bottom"
|
|
2241
|
+
[style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
|
|
2242
|
+
[ngClass]="cssClass"
|
|
2243
|
+
role="dialog"
|
|
2244
|
+
aria-modal="true"
|
|
2245
|
+
[attr.aria-labelledby]="titleId">
|
|
2132
2246
|
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2247
|
+
<ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
|
|
2248
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
2249
|
+
</ng-template>
|
|
2136
2250
|
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2251
|
+
<ng-template #defaultTemplate>
|
|
2252
|
+
<div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
|
|
2253
|
+
<ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
|
|
2254
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
2255
|
+
</ng-template>
|
|
2142
2256
|
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2257
|
+
<ng-template #defaultHeaderTemplate>
|
|
2258
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
2259
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
2260
|
+
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
2261
|
+
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
2262
|
+
</div>
|
|
2148
2263
|
</div>
|
|
2149
|
-
</
|
|
2150
|
-
</
|
|
2151
|
-
</div>
|
|
2264
|
+
</ng-template>
|
|
2265
|
+
</div>
|
|
2152
2266
|
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2267
|
+
<div *ngIf="items || contentTemplate" class="k-actionsheet-content">
|
|
2268
|
+
<ng-template *ngIf="contentTemplate; else defaultContentTemplate"
|
|
2269
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
2270
|
+
</ng-template>
|
|
2271
|
+
<ng-template #defaultContentTemplate>
|
|
2272
|
+
<div *ngIf="topGroupItems" kendoActionSheetList
|
|
2273
|
+
class="k-list-ul"
|
|
2274
|
+
role="group"
|
|
2275
|
+
[groupItems]="topGroupItems"
|
|
2276
|
+
[allItems]="items"
|
|
2277
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
2278
|
+
(itemClick)="onItemClick($event)">
|
|
2279
|
+
</div>
|
|
2280
|
+
|
|
2281
|
+
<hr *ngIf="shouldRenderSeparator" class="k-hr"/>
|
|
2282
|
+
|
|
2283
|
+
<div *ngIf="bottomGroupItems" kendoActionSheetList
|
|
2284
|
+
class="k-list-ul"
|
|
2285
|
+
role="group"
|
|
2286
|
+
[groupItems]="bottomGroupItems"
|
|
2287
|
+
[allItems]="items"
|
|
2288
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
2289
|
+
(itemClick)="onItemClick($event)">
|
|
2290
|
+
</div>
|
|
2291
|
+
</ng-template>
|
|
2292
|
+
</div>
|
|
2293
|
+
<div *ngIf="footerTemplate" class="k-actionsheet-footer">
|
|
2294
|
+
<ng-template
|
|
2295
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
2296
|
+
</ng-template>
|
|
2297
|
+
</div>
|
|
2298
|
+
</ng-template>
|
|
2299
|
+
</div>
|
|
2185
2300
|
</div>
|
|
2186
2301
|
</div>
|
|
2187
|
-
</
|
|
2188
|
-
`, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i2.
|
|
2302
|
+
</ng-container>
|
|
2303
|
+
`, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
2189
2304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
2190
2305
|
type: Component,
|
|
2191
2306
|
args: [{
|
|
2192
2307
|
exportAs: 'kendoActionSheet',
|
|
2193
2308
|
selector: 'kendo-actionsheet',
|
|
2194
2309
|
template: `
|
|
2195
|
-
<
|
|
2196
|
-
|
|
2197
|
-
<div class="k-
|
|
2198
|
-
<div class="k-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2310
|
+
<ng-container *ngIf="expanded">
|
|
2311
|
+
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
2312
|
+
<div class="k-animation-container">
|
|
2313
|
+
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
2314
|
+
<div class="k-actionsheet k-actionsheet-bottom"
|
|
2315
|
+
[style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
|
|
2316
|
+
[ngClass]="cssClass"
|
|
2317
|
+
role="dialog"
|
|
2318
|
+
aria-modal="true"
|
|
2319
|
+
[attr.aria-labelledby]="titleId">
|
|
2204
2320
|
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2321
|
+
<ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
|
|
2322
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
2323
|
+
</ng-template>
|
|
2208
2324
|
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2325
|
+
<ng-template #defaultTemplate>
|
|
2326
|
+
<div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
|
|
2327
|
+
<ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
|
|
2328
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
2329
|
+
</ng-template>
|
|
2214
2330
|
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2331
|
+
<ng-template #defaultHeaderTemplate>
|
|
2332
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
2333
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
2334
|
+
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
2335
|
+
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
2336
|
+
</div>
|
|
2220
2337
|
</div>
|
|
2221
|
-
</
|
|
2222
|
-
</
|
|
2223
|
-
</div>
|
|
2338
|
+
</ng-template>
|
|
2339
|
+
</div>
|
|
2224
2340
|
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2341
|
+
<div *ngIf="items || contentTemplate" class="k-actionsheet-content">
|
|
2342
|
+
<ng-template *ngIf="contentTemplate; else defaultContentTemplate"
|
|
2343
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
2344
|
+
</ng-template>
|
|
2345
|
+
<ng-template #defaultContentTemplate>
|
|
2346
|
+
<div *ngIf="topGroupItems" kendoActionSheetList
|
|
2347
|
+
class="k-list-ul"
|
|
2348
|
+
role="group"
|
|
2349
|
+
[groupItems]="topGroupItems"
|
|
2350
|
+
[allItems]="items"
|
|
2351
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
2352
|
+
(itemClick)="onItemClick($event)">
|
|
2353
|
+
</div>
|
|
2354
|
+
|
|
2355
|
+
<hr *ngIf="shouldRenderSeparator" class="k-hr"/>
|
|
2356
|
+
|
|
2357
|
+
<div *ngIf="bottomGroupItems" kendoActionSheetList
|
|
2358
|
+
class="k-list-ul"
|
|
2359
|
+
role="group"
|
|
2360
|
+
[groupItems]="bottomGroupItems"
|
|
2361
|
+
[allItems]="items"
|
|
2362
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
2363
|
+
(itemClick)="onItemClick($event)">
|
|
2364
|
+
</div>
|
|
2365
|
+
</ng-template>
|
|
2366
|
+
</div>
|
|
2367
|
+
<div *ngIf="footerTemplate" class="k-actionsheet-footer">
|
|
2368
|
+
<ng-template
|
|
2369
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
2370
|
+
</ng-template>
|
|
2371
|
+
</div>
|
|
2372
|
+
</ng-template>
|
|
2373
|
+
</div>
|
|
2257
2374
|
</div>
|
|
2258
2375
|
</div>
|
|
2259
|
-
</
|
|
2376
|
+
</ng-container>
|
|
2260
2377
|
`,
|
|
2261
2378
|
providers: [
|
|
2262
2379
|
LocalizationService,
|
|
@@ -2266,7 +2383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
2266
2383
|
}
|
|
2267
2384
|
]
|
|
2268
2385
|
}]
|
|
2269
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
|
|
2386
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2$1.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
|
|
2270
2387
|
type: HostBinding,
|
|
2271
2388
|
args: ['class.k-actionsheet-container']
|
|
2272
2389
|
}], direction: [{
|
|
@@ -2280,10 +2397,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
2280
2397
|
type: Input
|
|
2281
2398
|
}], cssClass: [{
|
|
2282
2399
|
type: Input
|
|
2400
|
+
}], animation: [{
|
|
2401
|
+
type: Input
|
|
2402
|
+
}], expanded: [{
|
|
2403
|
+
type: Input
|
|
2404
|
+
}], expandedChange: [{
|
|
2405
|
+
type: Output
|
|
2406
|
+
}], expand: [{
|
|
2407
|
+
type: Output
|
|
2408
|
+
}], collapse: [{
|
|
2409
|
+
type: Output
|
|
2283
2410
|
}], itemClick: [{
|
|
2284
2411
|
type: Output
|
|
2285
2412
|
}], overlayClick: [{
|
|
2286
2413
|
type: Output
|
|
2414
|
+
}], childContainer: [{
|
|
2415
|
+
type: ViewChild,
|
|
2416
|
+
args: ['childContainer']
|
|
2287
2417
|
}], actionSheetTemplate: [{
|
|
2288
2418
|
type: ContentChild,
|
|
2289
2419
|
args: [ActionSheetTemplateDirective]
|