@progress/kendo-angular-navigation 17.0.0-develop.9 → 17.0.0
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/README.md +38 -18
- package/actionsheet/actionsheet.component.d.ts +1 -1
- package/actionsheet/item.component.d.ts +1 -1
- package/actionsheet/list.component.d.ts +1 -1
- package/actionsheet/models/group.d.ts +1 -1
- package/appbar/appbar-spacer.component.d.ts +1 -1
- package/appbar/appbar.component.d.ts +1 -1
- package/appbar/models/position-mode.d.ts +1 -1
- package/appbar/models/position.d.ts +1 -1
- package/appbar/models/theme-color.d.ts +1 -1
- package/bottomnavigation/bottomnavigation-item.component.d.ts +1 -1
- package/bottomnavigation/bottomnavigation.component.d.ts +1 -1
- package/bottomnavigation/types/bottomnavigation-fill.d.ts +1 -1
- package/bottomnavigation/types/bottomnavigation-item-flow.d.ts +1 -1
- package/bottomnavigation/types/bottomnavigation-position-mode.d.ts +1 -1
- package/bottomnavigation/types/bottomnavigation-theme-color.d.ts +1 -1
- package/breadcrumb/breadcrumb-item.component.d.ts +2 -2
- package/breadcrumb/breadcrumb.component.d.ts +1 -1
- package/breadcrumb/list.component.d.ts +1 -1
- package/breadcrumb/models/breadcrumb-size.d.ts +1 -1
- package/breadcrumb/models/collapse-mode.d.ts +1 -1
- package/breadcrumb/template-directives/separator.directive.d.ts +1 -2
- package/common/direction.d.ts +1 -1
- package/{esm2020 → esm2022}/actionsheet/actionsheet.component.mjs +113 -60
- package/{esm2020 → esm2022}/actionsheet/item.component.mjs +7 -7
- package/{esm2020 → esm2022}/actionsheet/list.component.mjs +11 -7
- package/{esm2020 → esm2022}/actionsheet/models/item-click.event.mjs +8 -0
- package/{esm2020 → esm2022}/actionsheet/templates/actionsheet-template.mjs +4 -3
- package/{esm2020 → esm2022}/actionsheet/templates/content-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/actionsheet/templates/footer-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/actionsheet/templates/header-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/actionsheet/templates/item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/actionsheet.module.mjs +4 -4
- package/{esm2020 → esm2022}/appbar/appbar-section.component.mjs +5 -7
- package/{esm2020 → esm2022}/appbar/appbar-spacer.component.mjs +15 -7
- package/{esm2020 → esm2022}/appbar/appbar.component.mjs +33 -25
- package/{esm2020 → esm2022}/appbar.module.mjs +4 -4
- package/{esm2020 → esm2022}/bottomnavigation/bottomnavigation-item.component.mjs +10 -4
- package/{esm2020 → esm2022}/bottomnavigation/bottomnavigation.component.mjs +75 -52
- package/{esm2020 → esm2022}/bottomnavigation/events/select-event.mjs +16 -0
- package/{esm2020 → esm2022}/bottomnavigation/templates/item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/bottomnavigation.module.mjs +4 -4
- package/{esm2020 → esm2022}/breadcrumb/breadcrumb-item.component.mjs +19 -14
- package/{esm2020 → esm2022}/breadcrumb/breadcrumb.component.mjs +87 -56
- package/{esm2020 → esm2022}/breadcrumb/list.component.mjs +14 -6
- package/{esm2020 → esm2022}/breadcrumb/template-directives/item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/breadcrumb/template-directives/separator.directive.mjs +20 -18
- package/{esm2020 → esm2022}/breadcrumb.module.mjs +4 -4
- package/{esm2020 → esm2022}/common/preventable-event.mjs +7 -7
- package/{esm2020 → esm2022}/navigation.module.mjs +4 -4
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{fesm2020 → fesm2022}/progress-kendo-angular-navigation.mjs +490 -313
- package/package.json +13 -19
- package/schematics/ngAdd/index.js +1 -1
- package/fesm2015/progress-kendo-angular-navigation.mjs +0 -2613
- /package/{esm2020 → esm2022}/actionsheet/animation/animations.mjs +0 -0
- /package/{esm2020 → esm2022}/actionsheet/models/actionsheet-item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/actionsheet/models/animation.mjs +0 -0
- /package/{esm2020 → esm2022}/actionsheet/models/group.mjs +0 -0
- /package/{esm2020 → esm2022}/actionsheet/models/index.mjs +0 -0
- /package/{esm2020 → esm2022}/appbar/models/position-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/appbar/models/position.mjs +0 -0
- /package/{esm2020 → esm2022}/appbar/models/theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/bottomnavigation/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/bottomnavigation/types/bottomnavigation-fill.mjs +0 -0
- /package/{esm2020 → esm2022}/bottomnavigation/types/bottomnavigation-item-flow.mjs +0 -0
- /package/{esm2020 → esm2022}/bottomnavigation/types/bottomnavigation-item.mjs +0 -0
- /package/{esm2020 → esm2022}/bottomnavigation/types/bottomnavigation-position-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/bottomnavigation/types/bottomnavigation-theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/breadcrumb/models/breadcrumb-item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/breadcrumb/models/breadcrumb-size.mjs +0 -0
- /package/{esm2020 → esm2022}/breadcrumb/models/collapse-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/breadcrumb/models/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/breadcrumb/util.mjs +0 -0
- /package/{esm2020 → esm2022}/common/direction.mjs +0 -0
- /package/{esm2020 → esm2022}/common/dom-queries.mjs +0 -0
- /package/{esm2020 → esm2022}/common/util.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-navigation.mjs +0 -0
|
@@ -23,8 +23,8 @@ const packageMetadata = {
|
|
|
23
23
|
name: '@progress/kendo-angular-navigation',
|
|
24
24
|
productName: 'Kendo UI for Angular',
|
|
25
25
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
26
|
-
publishDate:
|
|
27
|
-
version: '17.0.0
|
|
26
|
+
publishDate: 1731413932,
|
|
27
|
+
version: '17.0.0',
|
|
28
28
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
29
29
|
};
|
|
30
30
|
|
|
@@ -36,21 +36,14 @@ const DEFAULT_POSITION_MODE = 'static';
|
|
|
36
36
|
* Used to display information, actions, branding titles and additional navigation on the current screen.
|
|
37
37
|
*/
|
|
38
38
|
class AppBarComponent {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
this._positionMode = DEFAULT_POSITION_MODE;
|
|
48
|
-
validatePackage(packageMetadata);
|
|
49
|
-
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
50
|
-
this.rtl = rtl;
|
|
51
|
-
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
52
|
-
});
|
|
53
|
-
}
|
|
39
|
+
localizationService;
|
|
40
|
+
host;
|
|
41
|
+
renderer;
|
|
42
|
+
hostClass = true;
|
|
43
|
+
/**
|
|
44
|
+
* @hidden
|
|
45
|
+
*/
|
|
46
|
+
direction;
|
|
54
47
|
/**
|
|
55
48
|
* Specifies the position of the AppBar
|
|
56
49
|
* ([see example]({% slug positioning_appbar %}#toc-position)).
|
|
@@ -110,6 +103,21 @@ class AppBarComponent {
|
|
|
110
103
|
get themeColor() {
|
|
111
104
|
return this._themeColor;
|
|
112
105
|
}
|
|
106
|
+
dynamicRTLSubscription;
|
|
107
|
+
rtl = false;
|
|
108
|
+
_themeColor = DEFAULT_THEME_COLOR;
|
|
109
|
+
_position = DEFAULT_POSITION;
|
|
110
|
+
_positionMode = DEFAULT_POSITION_MODE;
|
|
111
|
+
constructor(localizationService, host, renderer) {
|
|
112
|
+
this.localizationService = localizationService;
|
|
113
|
+
this.host = host;
|
|
114
|
+
this.renderer = renderer;
|
|
115
|
+
validatePackage(packageMetadata);
|
|
116
|
+
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
117
|
+
this.rtl = rtl;
|
|
118
|
+
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
119
|
+
});
|
|
120
|
+
}
|
|
113
121
|
ngAfterViewInit() {
|
|
114
122
|
const stylingOptions = ['position', 'positionMode', 'themeColor'];
|
|
115
123
|
stylingOptions.forEach(input => {
|
|
@@ -133,18 +141,18 @@ class AppBarComponent {
|
|
|
133
141
|
this.renderer.addClass(elem, `k-appbar-${newValue}`);
|
|
134
142
|
}
|
|
135
143
|
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
], exportAs: ["kendoAppBar"], ngImport: i0, template: `
|
|
144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppBarComponent, isStandalone: true, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
|
|
146
|
+
LocalizationService,
|
|
147
|
+
{
|
|
148
|
+
provide: L10N_PREFIX,
|
|
149
|
+
useValue: 'kendo.appbar.component'
|
|
150
|
+
}
|
|
151
|
+
], exportAs: ["kendoAppBar"], ngImport: i0, template: `
|
|
145
152
|
<ng-content></ng-content>
|
|
146
153
|
`, isInline: true });
|
|
147
|
-
|
|
154
|
+
}
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
148
156
|
type: Component,
|
|
149
157
|
args: [{
|
|
150
158
|
exportAs: 'kendoAppBar',
|
|
@@ -194,15 +202,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
194
202
|
* class AppComponent {}
|
|
195
203
|
*/
|
|
196
204
|
class AppBarSectionComponent {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
AppBarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
-
AppBarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarSectionComponent, isStandalone: true, selector: "kendo-appbar-section", host: { properties: { "class.k-appbar-section": "this.hostClass" } }, ngImport: i0, template: `
|
|
205
|
+
hostClass = true;
|
|
206
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppBarSectionComponent, isStandalone: true, selector: "kendo-appbar-section", host: { properties: { "class.k-appbar-section": "this.hostClass" } }, ngImport: i0, template: `
|
|
203
208
|
<ng-content></ng-content>
|
|
204
209
|
`, isInline: true });
|
|
205
|
-
|
|
210
|
+
}
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSectionComponent, decorators: [{
|
|
206
212
|
type: Component,
|
|
207
213
|
args: [{
|
|
208
214
|
selector: 'kendo-appbar-section',
|
|
@@ -304,13 +310,21 @@ const closestItem$1 = (target, targetAttr, scope) => closestInScope$1(target, el
|
|
|
304
310
|
* ```
|
|
305
311
|
*/
|
|
306
312
|
class AppBarSpacerComponent {
|
|
313
|
+
renderer;
|
|
314
|
+
element;
|
|
315
|
+
hostClass = true;
|
|
316
|
+
get sizedClass() {
|
|
317
|
+
return isPresent(this.width);
|
|
318
|
+
}
|
|
319
|
+
/**
|
|
320
|
+
* Specifies the width of the AppBarSpacer.
|
|
321
|
+
*
|
|
322
|
+
* If not set, the AppBarSpacer will take all the available space.
|
|
323
|
+
*/
|
|
324
|
+
width;
|
|
307
325
|
constructor(renderer, element) {
|
|
308
326
|
this.renderer = renderer;
|
|
309
327
|
this.element = element;
|
|
310
|
-
this.hostClass = true;
|
|
311
|
-
}
|
|
312
|
-
get sizedClass() {
|
|
313
|
-
return isPresent(this.width);
|
|
314
328
|
}
|
|
315
329
|
ngAfterViewInit() {
|
|
316
330
|
if (isPresent(this.width)) {
|
|
@@ -318,10 +332,10 @@ class AppBarSpacerComponent {
|
|
|
318
332
|
this.renderer.setStyle(element, 'flexBasis', this.width);
|
|
319
333
|
}
|
|
320
334
|
}
|
|
335
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
336
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppBarSpacerComponent, isStandalone: true, selector: "kendo-appbar-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass" } }, ngImport: i0, template: ``, isInline: true });
|
|
321
337
|
}
|
|
322
|
-
|
|
323
|
-
AppBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppBarSpacerComponent, isStandalone: true, selector: "kendo-appbar-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass" } }, ngImport: i0, template: ``, isInline: true });
|
|
324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
|
|
338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
|
|
325
339
|
type: Component,
|
|
326
340
|
args: [{
|
|
327
341
|
selector: 'kendo-appbar-spacer',
|
|
@@ -342,6 +356,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
342
356
|
* Arguments for the `itemClick` event of the ActionSheet.
|
|
343
357
|
*/
|
|
344
358
|
class ActionSheetItemClickEvent {
|
|
359
|
+
/**
|
|
360
|
+
* The ActionSheet item that was clicked.
|
|
361
|
+
*/
|
|
362
|
+
item;
|
|
363
|
+
/**
|
|
364
|
+
* The DOM event that triggered the `itemClick` event.
|
|
365
|
+
*/
|
|
366
|
+
originalEvent;
|
|
345
367
|
}
|
|
346
368
|
|
|
347
369
|
/**
|
|
@@ -350,13 +372,14 @@ class ActionSheetItemClickEvent {
|
|
|
350
372
|
* with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
351
373
|
*/
|
|
352
374
|
class ActionSheetHeaderTemplateDirective {
|
|
375
|
+
templateRef;
|
|
353
376
|
constructor(templateRef) {
|
|
354
377
|
this.templateRef = templateRef;
|
|
355
378
|
}
|
|
379
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
380
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
|
|
356
381
|
}
|
|
357
|
-
|
|
358
|
-
ActionSheetHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetHeaderTemplateDirective, isStandalone: true, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
|
|
359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
|
|
360
383
|
type: Directive,
|
|
361
384
|
args: [{
|
|
362
385
|
selector: '[kendoActionSheetHeaderTemplate]',
|
|
@@ -372,13 +395,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
372
395
|
* with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
373
396
|
*/
|
|
374
397
|
class ActionSheetItemTemplateDirective {
|
|
398
|
+
templateRef;
|
|
375
399
|
constructor(templateRef) {
|
|
376
400
|
this.templateRef = templateRef;
|
|
377
401
|
}
|
|
402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
403
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
|
|
378
404
|
}
|
|
379
|
-
|
|
380
|
-
ActionSheetItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetItemTemplateDirective, isStandalone: true, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
|
|
382
406
|
type: Directive,
|
|
383
407
|
args: [{
|
|
384
408
|
selector: '[kendoActionSheetItemTemplate]',
|
|
@@ -394,13 +418,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
394
418
|
* with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
395
419
|
*/
|
|
396
420
|
class ActionSheetContentTemplateDirective {
|
|
421
|
+
templateRef;
|
|
397
422
|
constructor(templateRef) {
|
|
398
423
|
this.templateRef = templateRef;
|
|
399
424
|
}
|
|
425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
426
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
|
|
400
427
|
}
|
|
401
|
-
|
|
402
|
-
ActionSheetContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetContentTemplateDirective, isStandalone: true, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
|
|
403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
|
|
428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
|
|
404
429
|
type: Directive,
|
|
405
430
|
args: [{
|
|
406
431
|
selector: '[kendoActionSheetContentTemplate]',
|
|
@@ -416,13 +441,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
416
441
|
* with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
417
442
|
*/
|
|
418
443
|
class ActionSheetFooterTemplateDirective {
|
|
444
|
+
templateRef;
|
|
419
445
|
constructor(templateRef) {
|
|
420
446
|
this.templateRef = templateRef;
|
|
421
447
|
}
|
|
448
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
449
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
|
|
422
450
|
}
|
|
423
|
-
|
|
424
|
-
ActionSheetFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetFooterTemplateDirective, isStandalone: true, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
|
|
425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
|
|
451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
|
|
426
452
|
type: Directive,
|
|
427
453
|
args: [{
|
|
428
454
|
selector: '[kendoActionSheetFooterTemplate]',
|
|
@@ -438,13 +464,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
438
464
|
* with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
439
465
|
*/
|
|
440
466
|
class ActionSheetTemplateDirective {
|
|
467
|
+
templateRef;
|
|
441
468
|
constructor(templateRef) {
|
|
442
469
|
this.templateRef = templateRef;
|
|
443
470
|
}
|
|
471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
472
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
|
|
444
473
|
}
|
|
445
|
-
|
|
446
|
-
ActionSheetTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetTemplateDirective, isStandalone: true, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
|
|
447
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
|
|
474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
|
|
448
475
|
type: Directive,
|
|
449
476
|
args: [{
|
|
450
477
|
selector: '[kendoActionSheetTemplate]',
|
|
@@ -477,9 +504,9 @@ function slideDown(duration, height) {
|
|
|
477
504
|
* @hidden
|
|
478
505
|
*/
|
|
479
506
|
class ActionSheetItemComponent {
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
507
|
+
itemTemplate;
|
|
508
|
+
item;
|
|
509
|
+
pointerClass = true;
|
|
483
510
|
manageIconClasses(item) {
|
|
484
511
|
const classes = ['k-actionsheet-item-icon'];
|
|
485
512
|
const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
|
|
@@ -501,9 +528,8 @@ class ActionSheetItemComponent {
|
|
|
501
528
|
}
|
|
502
529
|
return styles;
|
|
503
530
|
}
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetItemComponent, isStandalone: true, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
|
|
531
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetItemComponent, isStandalone: true, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
|
|
507
533
|
<ng-template *ngIf="itemTemplate; else defaultTemplate"
|
|
508
534
|
[ngTemplateOutlet]="itemTemplate"
|
|
509
535
|
[ngTemplateOutletContext]="{
|
|
@@ -529,7 +555,8 @@ ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
|
|
|
529
555
|
</span>
|
|
530
556
|
</ng-template>
|
|
531
557
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
532
|
-
|
|
558
|
+
}
|
|
559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
|
|
533
560
|
type: Component,
|
|
534
561
|
args: [{
|
|
535
562
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -576,14 +603,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
576
603
|
* @hidden
|
|
577
604
|
*/
|
|
578
605
|
class ActionSheetListComponent {
|
|
606
|
+
renderer;
|
|
607
|
+
ngZone;
|
|
608
|
+
element;
|
|
609
|
+
groupItems = [];
|
|
610
|
+
allItems = [];
|
|
611
|
+
itemTemplate;
|
|
612
|
+
itemClick = new EventEmitter();
|
|
613
|
+
subscriptions = new Subscription();
|
|
579
614
|
constructor(renderer, ngZone, element) {
|
|
580
615
|
this.renderer = renderer;
|
|
581
616
|
this.ngZone = ngZone;
|
|
582
617
|
this.element = element;
|
|
583
|
-
this.groupItems = [];
|
|
584
|
-
this.allItems = [];
|
|
585
|
-
this.itemClick = new EventEmitter();
|
|
586
|
-
this.subscriptions = new Subscription();
|
|
587
618
|
}
|
|
588
619
|
ngAfterViewInit() {
|
|
589
620
|
this.initDomEvents();
|
|
@@ -617,10 +648,10 @@ class ActionSheetListComponent {
|
|
|
617
648
|
setAttrIndex(item) {
|
|
618
649
|
return this.allItems.indexOf(item);
|
|
619
650
|
}
|
|
651
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetListComponent, isStandalone: true, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"item.disabled\"\n [class.k-actionsheet-item]=\"true\"\n [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n [class.k-disabled]=\"item.disabled\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n [itemTemplate]=\"itemTemplate\"\n [item]=\"item\">\n </span>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
620
653
|
}
|
|
621
|
-
|
|
622
|
-
ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionSheetListComponent, isStandalone: true, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-disabled]=\"item.disabled\"\n [class.k-actionsheet-item]=\"true\"\n [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n [class.k-disabled]=\"item.disabled\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n [itemTemplate]=\"itemTemplate\"\n [item]=\"item\">\n </span>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetListComponent, decorators: [{
|
|
654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetListComponent, decorators: [{
|
|
624
655
|
type: Component,
|
|
625
656
|
args: [{
|
|
626
657
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -658,6 +689,109 @@ const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
|
|
|
658
689
|
* Used to display a set of choices related to a task the user initiates.
|
|
659
690
|
*/
|
|
660
691
|
class ActionSheetComponent {
|
|
692
|
+
element;
|
|
693
|
+
ngZone;
|
|
694
|
+
renderer;
|
|
695
|
+
localizationService;
|
|
696
|
+
builder;
|
|
697
|
+
cdr;
|
|
698
|
+
/**
|
|
699
|
+
* @hidden
|
|
700
|
+
*/
|
|
701
|
+
get hostClass() {
|
|
702
|
+
return this.expanded;
|
|
703
|
+
}
|
|
704
|
+
/**
|
|
705
|
+
* @hidden
|
|
706
|
+
*/
|
|
707
|
+
direction;
|
|
708
|
+
/**
|
|
709
|
+
* Specifies the text that is rendered as title.
|
|
710
|
+
*/
|
|
711
|
+
title;
|
|
712
|
+
/**
|
|
713
|
+
* Specifies the text that is rendered under the title.
|
|
714
|
+
*/
|
|
715
|
+
subtitle;
|
|
716
|
+
/**
|
|
717
|
+
* The collection of items that will be rendered in the ActionSheet.
|
|
718
|
+
*/
|
|
719
|
+
items;
|
|
720
|
+
/**
|
|
721
|
+
* The CSS classes that will be rendered on the inner ActionSheet element.
|
|
722
|
+
* Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
|
|
723
|
+
*/
|
|
724
|
+
cssClass;
|
|
725
|
+
/**
|
|
726
|
+
* Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
|
|
727
|
+
* By default the animations are turned off. The default animations' duration is `300ms`.
|
|
728
|
+
*
|
|
729
|
+
* @default true
|
|
730
|
+
*/
|
|
731
|
+
animation = true;
|
|
732
|
+
/**
|
|
733
|
+
* Specifies the state of the ActionSheet.
|
|
734
|
+
*
|
|
735
|
+
* @default false
|
|
736
|
+
*/
|
|
737
|
+
expanded = false;
|
|
738
|
+
/**
|
|
739
|
+
* Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
|
|
740
|
+
* Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`]({% slug api_navigation_actionsheetheadertemplatedirective %})
|
|
741
|
+
* or [`ActionSheetContentTemplate`]({% slug api_navigation_actionsheetcontenttemplatedirective %}).
|
|
742
|
+
*
|
|
743
|
+
*/
|
|
744
|
+
titleId = getId('k-actionsheet-title');
|
|
745
|
+
/**
|
|
746
|
+
* Fires when the `expanded` property of the component is updated.
|
|
747
|
+
* Used to provide a two-way binding for the `expanded` property.
|
|
748
|
+
*/
|
|
749
|
+
expandedChange = new EventEmitter();
|
|
750
|
+
/**
|
|
751
|
+
* Fires when the ActionSheet is expanded and its animation is complete.
|
|
752
|
+
*/
|
|
753
|
+
expand = new EventEmitter();
|
|
754
|
+
/**
|
|
755
|
+
* Fires when the ActionSheet is collapsed and its animation is complete.
|
|
756
|
+
*/
|
|
757
|
+
collapse = new EventEmitter();
|
|
758
|
+
/**
|
|
759
|
+
* Fires when an ActionSheet item is clicked.
|
|
760
|
+
*/
|
|
761
|
+
itemClick = new EventEmitter();
|
|
762
|
+
/**
|
|
763
|
+
* Fires when the modal overlay is clicked.
|
|
764
|
+
*/
|
|
765
|
+
overlayClick = new EventEmitter();
|
|
766
|
+
/**
|
|
767
|
+
* @hidden
|
|
768
|
+
*/
|
|
769
|
+
childContainer;
|
|
770
|
+
/**
|
|
771
|
+
* @hidden
|
|
772
|
+
*/
|
|
773
|
+
actionSheetTemplate;
|
|
774
|
+
/**
|
|
775
|
+
* @hidden
|
|
776
|
+
*/
|
|
777
|
+
headerTemplate;
|
|
778
|
+
/**
|
|
779
|
+
* @hidden
|
|
780
|
+
*/
|
|
781
|
+
contentTemplate;
|
|
782
|
+
/**
|
|
783
|
+
* @hidden
|
|
784
|
+
*/
|
|
785
|
+
itemTemplate;
|
|
786
|
+
/**
|
|
787
|
+
* @hidden
|
|
788
|
+
*/
|
|
789
|
+
footerTemplate;
|
|
790
|
+
dynamicRTLSubscription;
|
|
791
|
+
rtl = false;
|
|
792
|
+
domSubs = new Subscription();
|
|
793
|
+
player;
|
|
794
|
+
animationEnd = new EventEmitter();
|
|
661
795
|
constructor(element, ngZone, renderer, localizationService, builder, cdr) {
|
|
662
796
|
this.element = element;
|
|
663
797
|
this.ngZone = ngZone;
|
|
@@ -665,62 +799,12 @@ class ActionSheetComponent {
|
|
|
665
799
|
this.localizationService = localizationService;
|
|
666
800
|
this.builder = builder;
|
|
667
801
|
this.cdr = cdr;
|
|
668
|
-
/**
|
|
669
|
-
* Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
|
|
670
|
-
* By default the animations are turned off. The default animations' duration is `300ms`.
|
|
671
|
-
*
|
|
672
|
-
* @default true
|
|
673
|
-
*/
|
|
674
|
-
this.animation = true;
|
|
675
|
-
/**
|
|
676
|
-
* Specifies the state of the ActionSheet.
|
|
677
|
-
*
|
|
678
|
-
* @default false
|
|
679
|
-
*/
|
|
680
|
-
this.expanded = false;
|
|
681
|
-
/**
|
|
682
|
-
* Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
|
|
683
|
-
* Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`]({% slug api_navigation_actionsheetheadertemplatedirective %})
|
|
684
|
-
* or [`ActionSheetContentTemplate`]({% slug api_navigation_actionsheetcontenttemplatedirective %}).
|
|
685
|
-
*
|
|
686
|
-
*/
|
|
687
|
-
this.titleId = getId('k-actionsheet-title');
|
|
688
|
-
/**
|
|
689
|
-
* Fires when the `expanded` property of the component is updated.
|
|
690
|
-
* Used to provide a two-way binding for the `expanded` property.
|
|
691
|
-
*/
|
|
692
|
-
this.expandedChange = new EventEmitter();
|
|
693
|
-
/**
|
|
694
|
-
* Fires when the ActionSheet is expanded and its animation is complete.
|
|
695
|
-
*/
|
|
696
|
-
this.expand = new EventEmitter();
|
|
697
|
-
/**
|
|
698
|
-
* Fires when the ActionSheet is collapsed and its animation is complete.
|
|
699
|
-
*/
|
|
700
|
-
this.collapse = new EventEmitter();
|
|
701
|
-
/**
|
|
702
|
-
* Fires when an ActionSheet item is clicked.
|
|
703
|
-
*/
|
|
704
|
-
this.itemClick = new EventEmitter();
|
|
705
|
-
/**
|
|
706
|
-
* Fires when the modal overlay is clicked.
|
|
707
|
-
*/
|
|
708
|
-
this.overlayClick = new EventEmitter();
|
|
709
|
-
this.rtl = false;
|
|
710
|
-
this.domSubs = new Subscription();
|
|
711
|
-
this.animationEnd = new EventEmitter();
|
|
712
802
|
validatePackage(packageMetadata);
|
|
713
803
|
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
714
804
|
this.rtl = rtl;
|
|
715
805
|
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
716
806
|
});
|
|
717
807
|
}
|
|
718
|
-
/**
|
|
719
|
-
* @hidden
|
|
720
|
-
*/
|
|
721
|
-
get hostClass() {
|
|
722
|
-
return this.expanded;
|
|
723
|
-
}
|
|
724
808
|
ngAfterViewInit() {
|
|
725
809
|
this.initDomEvents();
|
|
726
810
|
this.setCssVariables();
|
|
@@ -891,15 +975,14 @@ class ActionSheetComponent {
|
|
|
891
975
|
});
|
|
892
976
|
this.player.play();
|
|
893
977
|
}
|
|
894
|
-
}
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
}
|
|
902
|
-
], 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: `
|
|
978
|
+
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 });
|
|
979
|
+
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: [
|
|
980
|
+
LocalizationService,
|
|
981
|
+
{
|
|
982
|
+
provide: L10N_PREFIX,
|
|
983
|
+
useValue: 'kendo.actionsheet.component'
|
|
984
|
+
}
|
|
985
|
+
], 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: `
|
|
903
986
|
<ng-container *ngIf="expanded">
|
|
904
987
|
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
905
988
|
<div class="k-animation-container k-animation-container-shown">
|
|
@@ -967,7 +1050,8 @@ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
967
1050
|
</div>
|
|
968
1051
|
</ng-container>
|
|
969
1052
|
`, 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"] }] });
|
|
970
|
-
|
|
1053
|
+
}
|
|
1054
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
971
1055
|
type: Component,
|
|
972
1056
|
args: [{
|
|
973
1057
|
exportAs: 'kendoActionSheet',
|
|
@@ -1104,13 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1104
1188
|
* @hidden
|
|
1105
1189
|
*/
|
|
1106
1190
|
class PreventableEvent {
|
|
1107
|
-
|
|
1108
|
-
* @hidden
|
|
1109
|
-
*/
|
|
1110
|
-
constructor(args) {
|
|
1111
|
-
this.prevented = false;
|
|
1112
|
-
Object.assign(this, args);
|
|
1113
|
-
}
|
|
1191
|
+
prevented = false;
|
|
1114
1192
|
/**
|
|
1115
1193
|
* Prevents the default action for a specified event.
|
|
1116
1194
|
* In this way, the source component suppresses
|
|
@@ -1129,12 +1207,34 @@ class PreventableEvent {
|
|
|
1129
1207
|
isDefaultPrevented() {
|
|
1130
1208
|
return this.prevented;
|
|
1131
1209
|
}
|
|
1210
|
+
/**
|
|
1211
|
+
* @hidden
|
|
1212
|
+
*/
|
|
1213
|
+
constructor(args) {
|
|
1214
|
+
Object.assign(this, args);
|
|
1215
|
+
}
|
|
1132
1216
|
}
|
|
1133
1217
|
|
|
1134
1218
|
/**
|
|
1135
1219
|
* Arguments for the `select` event of the BottomNavigation.
|
|
1136
1220
|
*/
|
|
1137
1221
|
class BottomNavigationSelectEvent extends PreventableEvent {
|
|
1222
|
+
/**
|
|
1223
|
+
* The index of the selected item in the `items` collection.
|
|
1224
|
+
*/
|
|
1225
|
+
index;
|
|
1226
|
+
/**
|
|
1227
|
+
* The selected BottomNavigation item.
|
|
1228
|
+
*/
|
|
1229
|
+
item;
|
|
1230
|
+
/**
|
|
1231
|
+
* The DOM event that triggered the selection.
|
|
1232
|
+
*/
|
|
1233
|
+
originalEvent;
|
|
1234
|
+
/**
|
|
1235
|
+
* The BottomNavigation that triggered the event.
|
|
1236
|
+
*/
|
|
1237
|
+
sender;
|
|
1138
1238
|
}
|
|
1139
1239
|
|
|
1140
1240
|
/**
|
|
@@ -1143,13 +1243,14 @@ class BottomNavigationSelectEvent extends PreventableEvent {
|
|
|
1143
1243
|
* with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
|
|
1144
1244
|
*/
|
|
1145
1245
|
class BottomNavigationItemTemplateDirective {
|
|
1246
|
+
templateRef;
|
|
1146
1247
|
constructor(templateRef) {
|
|
1147
1248
|
this.templateRef = templateRef;
|
|
1148
1249
|
}
|
|
1250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1251
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
|
|
1149
1252
|
}
|
|
1150
|
-
|
|
1151
|
-
BottomNavigationItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
|
|
1152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
|
|
1253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
|
|
1153
1254
|
type: Directive,
|
|
1154
1255
|
args: [{
|
|
1155
1256
|
selector: '[kendoBottomNavigationItemTemplate]',
|
|
@@ -1190,6 +1291,12 @@ const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning'
|
|
|
1190
1291
|
* @hidden
|
|
1191
1292
|
*/
|
|
1192
1293
|
class BottomNavigationItemComponent {
|
|
1294
|
+
itemTemplate;
|
|
1295
|
+
item;
|
|
1296
|
+
index;
|
|
1297
|
+
disabledComponent;
|
|
1298
|
+
selectedIdx;
|
|
1299
|
+
orientation;
|
|
1193
1300
|
get disabledClass() {
|
|
1194
1301
|
return this.item.disabled;
|
|
1195
1302
|
}
|
|
@@ -1210,9 +1317,8 @@ class BottomNavigationItemComponent {
|
|
|
1210
1317
|
const customIcon = this.item.iconClass ? this.item.iconClass : '';
|
|
1211
1318
|
return `${kendoIcon} ${customIcon}`;
|
|
1212
1319
|
}
|
|
1213
|
-
}
|
|
1214
|
-
|
|
1215
|
-
BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationItemComponent, isStandalone: true, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
|
|
1320
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BottomNavigationItemComponent, isStandalone: true, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
|
|
1216
1322
|
<ng-container *ngIf="!itemTemplate">
|
|
1217
1323
|
<kendo-icon-wrapper *ngIf="itemIcon"
|
|
1218
1324
|
innerCssClass="k-bottom-nav-item-icon"
|
|
@@ -1227,7 +1333,8 @@ BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
|
|
|
1227
1333
|
[ngTemplateOutletContext]="{ $implicit: item }">
|
|
1228
1334
|
</ng-template>
|
|
1229
1335
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1230
|
-
|
|
1336
|
+
}
|
|
1337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
|
|
1231
1338
|
type: Component,
|
|
1232
1339
|
args: [{
|
|
1233
1340
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -1303,49 +1410,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1303
1410
|
* ```
|
|
1304
1411
|
*/
|
|
1305
1412
|
class BottomNavigationComponent {
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
this.select = new EventEmitter();
|
|
1328
|
-
/**
|
|
1329
|
-
* @hidden
|
|
1330
|
-
*/
|
|
1331
|
-
this.hostClass = true;
|
|
1332
|
-
/**
|
|
1333
|
-
* @hidden
|
|
1334
|
-
*/
|
|
1335
|
-
this.role = 'navigation';
|
|
1336
|
-
this._fill = 'flat';
|
|
1337
|
-
this._itemFlow = 'vertical';
|
|
1338
|
-
this._positionMode = 'fixed';
|
|
1339
|
-
this._themeColor = 'primary';
|
|
1340
|
-
this._nativeHostElement = this.hostElement.nativeElement;
|
|
1341
|
-
this.subscriptions = new Subscription();
|
|
1342
|
-
this.rtl = false;
|
|
1343
|
-
validatePackage(packageMetadata);
|
|
1344
|
-
this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
|
|
1345
|
-
this.rtl = rtl;
|
|
1346
|
-
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
1347
|
-
});
|
|
1348
|
-
}
|
|
1413
|
+
localization;
|
|
1414
|
+
hostElement;
|
|
1415
|
+
ngZone;
|
|
1416
|
+
changeDetector;
|
|
1417
|
+
renderer;
|
|
1418
|
+
/**
|
|
1419
|
+
* The collection of items that will be rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
|
|
1420
|
+
*/
|
|
1421
|
+
items;
|
|
1422
|
+
/**
|
|
1423
|
+
* Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
1424
|
+
*
|
|
1425
|
+
* @default false
|
|
1426
|
+
*/
|
|
1427
|
+
border = false;
|
|
1428
|
+
/**
|
|
1429
|
+
* Disables the whole BottomNavigation.
|
|
1430
|
+
*
|
|
1431
|
+
* @default false
|
|
1432
|
+
*/
|
|
1433
|
+
disabled = false;
|
|
1349
1434
|
/**
|
|
1350
1435
|
* The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
|
|
1351
1436
|
*
|
|
@@ -1419,6 +1504,14 @@ class BottomNavigationComponent {
|
|
|
1419
1504
|
get themeColor() {
|
|
1420
1505
|
return this._themeColor;
|
|
1421
1506
|
}
|
|
1507
|
+
/**
|
|
1508
|
+
* Fires each time an item is selected. This event is preventable.
|
|
1509
|
+
*/
|
|
1510
|
+
select = new EventEmitter();
|
|
1511
|
+
/**
|
|
1512
|
+
* @hidden
|
|
1513
|
+
*/
|
|
1514
|
+
hostClass = true;
|
|
1422
1515
|
/**
|
|
1423
1516
|
* @hidden
|
|
1424
1517
|
*/
|
|
@@ -1431,6 +1524,43 @@ class BottomNavigationComponent {
|
|
|
1431
1524
|
get disabledClass() {
|
|
1432
1525
|
return this.disabled;
|
|
1433
1526
|
}
|
|
1527
|
+
/**
|
|
1528
|
+
* @hidden
|
|
1529
|
+
*/
|
|
1530
|
+
role = 'navigation';
|
|
1531
|
+
/**
|
|
1532
|
+
* @hidden
|
|
1533
|
+
*/
|
|
1534
|
+
direction;
|
|
1535
|
+
/**
|
|
1536
|
+
* @hidden
|
|
1537
|
+
*/
|
|
1538
|
+
itemTemplate;
|
|
1539
|
+
/**
|
|
1540
|
+
* @hidden
|
|
1541
|
+
*/
|
|
1542
|
+
selectedIdx;
|
|
1543
|
+
_fill = 'flat';
|
|
1544
|
+
_itemFlow = 'vertical';
|
|
1545
|
+
_positionMode = 'fixed';
|
|
1546
|
+
_themeColor = 'primary';
|
|
1547
|
+
_nativeHostElement;
|
|
1548
|
+
dynamicRTLSubscription;
|
|
1549
|
+
subscriptions = new Subscription();
|
|
1550
|
+
rtl = false;
|
|
1551
|
+
constructor(localization, hostElement, ngZone, changeDetector, renderer) {
|
|
1552
|
+
this.localization = localization;
|
|
1553
|
+
this.hostElement = hostElement;
|
|
1554
|
+
this.ngZone = ngZone;
|
|
1555
|
+
this.changeDetector = changeDetector;
|
|
1556
|
+
this.renderer = renderer;
|
|
1557
|
+
validatePackage(packageMetadata);
|
|
1558
|
+
this._nativeHostElement = this.hostElement.nativeElement;
|
|
1559
|
+
this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
|
|
1560
|
+
this.rtl = rtl;
|
|
1561
|
+
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
1562
|
+
});
|
|
1563
|
+
}
|
|
1434
1564
|
/**
|
|
1435
1565
|
* @hidden
|
|
1436
1566
|
*/
|
|
@@ -1511,16 +1641,16 @@ class BottomNavigationComponent {
|
|
|
1511
1641
|
return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
|
|
1512
1642
|
}
|
|
1513
1643
|
}
|
|
1644
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BottomNavigationComponent, isStandalone: true, selector: "kendo-bottomnavigation", inputs: { items: "items", border: "border", disabled: "disabled", fill: "fill", itemFlow: "itemFlow", positionMode: "positionMode", themeColor: "themeColor" }, outputs: { select: "select" }, host: { properties: { "class.k-bottom-nav": "this.hostClass", "class.k-bottom-nav-border": "this.borderClass", "class.k-disabled": "this.disabledClass", "attr.role": "this.role", "attr.dir": "this.direction" } }, providers: [
|
|
1646
|
+
LocalizationService,
|
|
1647
|
+
{
|
|
1648
|
+
provide: L10N_PREFIX,
|
|
1649
|
+
useValue: 'kendo.bottomnavigation'
|
|
1650
|
+
}
|
|
1651
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n <ng-container *ngIf=\"items\">\n <span kendoBottomNavigationItem\n *ngFor=\"let item of items; let idx=index\"\n role=\"link\"\n class=\"k-bottom-nav-item\"\n [disabledComponent]=\"disabled\"\n [item]=\"item\"\n [index]=\"idx\"\n [selectedIdx]=\"selectedIdx\"\n [itemTemplate]=\"itemTemplate\"\n [attr.data-kendo-bottomnavigation-index]=\"idx\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n [orientation]=\"itemFlow\">\n </span>\n </ng-container>\n ", 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: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1514
1652
|
}
|
|
1515
|
-
|
|
1516
|
-
BottomNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BottomNavigationComponent, isStandalone: true, selector: "kendo-bottomnavigation", inputs: { items: "items", border: "border", disabled: "disabled", fill: "fill", itemFlow: "itemFlow", positionMode: "positionMode", themeColor: "themeColor" }, outputs: { select: "select" }, host: { properties: { "class.k-bottom-nav": "this.hostClass", "class.k-bottom-nav-border": "this.borderClass", "class.k-disabled": "this.disabledClass", "attr.role": "this.role", "attr.dir": "this.direction" } }, providers: [
|
|
1517
|
-
LocalizationService,
|
|
1518
|
-
{
|
|
1519
|
-
provide: L10N_PREFIX,
|
|
1520
|
-
useValue: 'kendo.bottomnavigation'
|
|
1521
|
-
}
|
|
1522
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n <ng-container *ngIf=\"items\">\n <span kendoBottomNavigationItem\n *ngFor=\"let item of items; let idx=index\"\n role=\"link\"\n class=\"k-bottom-nav-item\"\n [disabledComponent]=\"disabled\"\n [item]=\"item\"\n [index]=\"idx\"\n [selectedIdx]=\"selectedIdx\"\n [itemTemplate]=\"itemTemplate\"\n [attr.data-kendo-bottomnavigation-index]=\"idx\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n [orientation]=\"itemFlow\">\n </span>\n </ng-container>\n ", 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: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationComponent, decorators: [{
|
|
1653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationComponent, decorators: [{
|
|
1524
1654
|
type: Component,
|
|
1525
1655
|
args: [{
|
|
1526
1656
|
exportAs: 'kendoBottomNavigation',
|
|
@@ -1596,13 +1726,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1596
1726
|
* For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
|
|
1597
1727
|
*/
|
|
1598
1728
|
class BreadCrumbItemTemplateDirective {
|
|
1729
|
+
templateRef;
|
|
1599
1730
|
constructor(templateRef) {
|
|
1600
1731
|
this.templateRef = templateRef;
|
|
1601
1732
|
}
|
|
1733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1734
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
|
|
1602
1735
|
}
|
|
1603
|
-
|
|
1604
|
-
BreadCrumbItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbItemTemplateDirective, isStandalone: true, selector: "[kendoBreadCrumbItemTemplate]", ngImport: i0 });
|
|
1605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
|
|
1736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemTemplateDirective, decorators: [{
|
|
1606
1737
|
type: Directive,
|
|
1607
1738
|
args: [{
|
|
1608
1739
|
selector: '[kendoBreadCrumbItemTemplate]',
|
|
@@ -1646,12 +1777,12 @@ const getStylingClasses = (stylingOption, previousValue, newValue) => {
|
|
|
1646
1777
|
* @hidden
|
|
1647
1778
|
*/
|
|
1648
1779
|
class BreadCrumbItemComponent {
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1780
|
+
el;
|
|
1781
|
+
item;
|
|
1782
|
+
collapseMode;
|
|
1783
|
+
index = -1;
|
|
1784
|
+
itemTemplate;
|
|
1785
|
+
hostClasses = true;
|
|
1655
1786
|
get isRootItem() {
|
|
1656
1787
|
return this.item.context.isFirst;
|
|
1657
1788
|
}
|
|
@@ -1661,6 +1792,11 @@ class BreadCrumbItemComponent {
|
|
|
1661
1792
|
get isLastItem() {
|
|
1662
1793
|
return this.item.context.isLast;
|
|
1663
1794
|
}
|
|
1795
|
+
width;
|
|
1796
|
+
disabled = false;
|
|
1797
|
+
constructor(el) {
|
|
1798
|
+
this.el = el;
|
|
1799
|
+
}
|
|
1664
1800
|
ngOnInit() {
|
|
1665
1801
|
this.disabled = this.item.data && (this.item.data.disabled || this.item.context.isLast);
|
|
1666
1802
|
}
|
|
@@ -1674,9 +1810,8 @@ class BreadCrumbItemComponent {
|
|
|
1674
1810
|
this.width = outerWidth(this.el.nativeElement);
|
|
1675
1811
|
}
|
|
1676
1812
|
}
|
|
1677
|
-
}
|
|
1678
|
-
|
|
1679
|
-
BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbItemComponent, isStandalone: true, selector: "[kendoBreadCrumbItem]", inputs: { item: "item", collapseMode: "collapseMode", index: "index", itemTemplate: "itemTemplate" }, host: { properties: { "class.k-breadcrumb-item": "this.hostClasses", "class.k-breadcrumb-root-item": "this.isRootItem", "attr.aria-disabled": "this.isDisabled", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
|
|
1813
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbItemComponent, isStandalone: true, selector: "[kendoBreadCrumbItem]", inputs: { item: "item", collapseMode: "collapseMode", index: "index", itemTemplate: "itemTemplate" }, host: { properties: { "class.k-breadcrumb-item": "this.hostClasses", "class.k-breadcrumb-root-item": "this.isRootItem", "attr.aria-disabled": "this.isDisabled", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
|
|
1680
1815
|
<ng-template #separator>
|
|
1681
1816
|
<ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
|
|
1682
1817
|
</ng-template>
|
|
@@ -1691,8 +1826,8 @@ BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
1691
1826
|
[ngClass]="{
|
|
1692
1827
|
'k-breadcrumb-root-link': item.context.isFirst,
|
|
1693
1828
|
'k-breadcrumb-link': index !== 0,
|
|
1694
|
-
'k-breadcrumb-icontext-link': !!item.data.icon && !!item.data.text,
|
|
1695
|
-
'k-breadcrumb-icon-link': !!item.data.icon && !item.data.text,
|
|
1829
|
+
'k-breadcrumb-icontext-link': (!!item.data.icon || !!item.data.svgIcon) && !!item.data.text,
|
|
1830
|
+
'k-breadcrumb-icon-link': (!!item.data.icon || !!item.data.svgIcon) && !item.data.text,
|
|
1696
1831
|
'k-disabled': disabled
|
|
1697
1832
|
}"
|
|
1698
1833
|
[title]="item.data.title || ''"
|
|
@@ -1724,7 +1859,8 @@ BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
1724
1859
|
<ng-container *ngTemplateOutlet="separator"></ng-container>
|
|
1725
1860
|
</ng-container>
|
|
1726
1861
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
1727
|
-
|
|
1862
|
+
}
|
|
1863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
|
|
1728
1864
|
type: Component,
|
|
1729
1865
|
args: [{
|
|
1730
1866
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -1744,8 +1880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1744
1880
|
[ngClass]="{
|
|
1745
1881
|
'k-breadcrumb-root-link': item.context.isFirst,
|
|
1746
1882
|
'k-breadcrumb-link': index !== 0,
|
|
1747
|
-
'k-breadcrumb-icontext-link': !!item.data.icon && !!item.data.text,
|
|
1748
|
-
'k-breadcrumb-icon-link': !!item.data.icon && !item.data.text,
|
|
1883
|
+
'k-breadcrumb-icontext-link': (!!item.data.icon || !!item.data.svgIcon) && !!item.data.text,
|
|
1884
|
+
'k-breadcrumb-icon-link': (!!item.data.icon || !!item.data.svgIcon) && !item.data.text,
|
|
1749
1885
|
'k-disabled': disabled
|
|
1750
1886
|
}"
|
|
1751
1887
|
[title]="item.data.title || ''"
|
|
@@ -1810,14 +1946,8 @@ const DEFAULT_RTL_SVG_ICON = chevronLeftIcon;
|
|
|
1810
1946
|
* @hidden
|
|
1811
1947
|
*/
|
|
1812
1948
|
class BreadCrumbSeparatorDirective {
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
this.localization = localization;
|
|
1816
|
-
this.defaultClasses = true;
|
|
1817
|
-
this.ariaHidden = true;
|
|
1818
|
-
this.direction = 'ltr';
|
|
1819
|
-
this.direction = this.localization.rtl ? 'rtl' : 'ltr';
|
|
1820
|
-
}
|
|
1949
|
+
el;
|
|
1950
|
+
localization;
|
|
1821
1951
|
set icon(icon) {
|
|
1822
1952
|
if (isPresent(icon)) {
|
|
1823
1953
|
this._icon = icon;
|
|
@@ -1844,6 +1974,18 @@ class BreadCrumbSeparatorDirective {
|
|
|
1844
1974
|
get svgIcon() {
|
|
1845
1975
|
return this._svgIcon;
|
|
1846
1976
|
}
|
|
1977
|
+
ariaHidden = true;
|
|
1978
|
+
_icon;
|
|
1979
|
+
_svgIcon;
|
|
1980
|
+
hasDefaultIcon;
|
|
1981
|
+
hasDefaultSvgIcon;
|
|
1982
|
+
direction = 'ltr';
|
|
1983
|
+
localizationChangesSubscription;
|
|
1984
|
+
constructor(el, localization) {
|
|
1985
|
+
this.el = el;
|
|
1986
|
+
this.localization = localization;
|
|
1987
|
+
this.direction = this.localization.rtl ? 'rtl' : 'ltr';
|
|
1988
|
+
}
|
|
1847
1989
|
ngOnInit() {
|
|
1848
1990
|
this.localizationChangesSubscription = this.localization.changes.subscribe(({ rtl }) => {
|
|
1849
1991
|
this.direction = rtl ? 'rtl' : 'ltr';
|
|
@@ -1858,17 +2000,18 @@ class BreadCrumbSeparatorDirective {
|
|
|
1858
2000
|
ngOnDestroy() {
|
|
1859
2001
|
this.localizationChangesSubscription.unsubscribe();
|
|
1860
2002
|
}
|
|
1861
|
-
}
|
|
1862
|
-
|
|
1863
|
-
BreadCrumbSeparatorDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbSeparatorDirective, isStandalone: true, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-breadcrumb-delimiter-icon": "this.defaultClasses", "class.k-icon": "this.defaultClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
|
|
2003
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2004
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbSeparatorDirective, isStandalone: true, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
|
|
1864
2005
|
<kendo-icon-wrapper
|
|
1865
2006
|
size='xsmall'
|
|
1866
2007
|
[name]="icon"
|
|
1867
2008
|
[svgIcon]="svgIcon"
|
|
2009
|
+
innerCssClass="k-breadcrumb-delimiter-icon"
|
|
1868
2010
|
>
|
|
1869
2011
|
</kendo-icon-wrapper>
|
|
1870
2012
|
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
1871
|
-
|
|
2013
|
+
}
|
|
2014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
|
|
1872
2015
|
type: Component,
|
|
1873
2016
|
args: [{
|
|
1874
2017
|
selector: '[kendoBreadCrumbSeparator]',
|
|
@@ -1877,6 +2020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1877
2020
|
size='xsmall'
|
|
1878
2021
|
[name]="icon"
|
|
1879
2022
|
[svgIcon]="svgIcon"
|
|
2023
|
+
innerCssClass="k-breadcrumb-delimiter-icon"
|
|
1880
2024
|
>
|
|
1881
2025
|
</kendo-icon-wrapper>
|
|
1882
2026
|
`,
|
|
@@ -1887,12 +2031,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1887
2031
|
type: Input
|
|
1888
2032
|
}], svgIcon: [{
|
|
1889
2033
|
type: Input
|
|
1890
|
-
}], defaultClasses: [{
|
|
1891
|
-
type: HostBinding,
|
|
1892
|
-
args: ['class.k-breadcrumb-delimiter-icon']
|
|
1893
|
-
}, {
|
|
1894
|
-
type: HostBinding,
|
|
1895
|
-
args: ['class.k-icon']
|
|
1896
2034
|
}], ariaHidden: [{
|
|
1897
2035
|
type: HostBinding,
|
|
1898
2036
|
args: ['attr.aria-hidden']
|
|
@@ -1902,12 +2040,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1902
2040
|
* @hidden
|
|
1903
2041
|
*/
|
|
1904
2042
|
class BreadCrumbListComponent {
|
|
2043
|
+
el;
|
|
2044
|
+
zone;
|
|
2045
|
+
items = [];
|
|
2046
|
+
itemTemplate;
|
|
2047
|
+
collapseMode = 'auto';
|
|
2048
|
+
separatorIcon;
|
|
2049
|
+
separatorSVGIcon;
|
|
2050
|
+
itemClick = new EventEmitter();
|
|
2051
|
+
renderedItems;
|
|
2052
|
+
isRootItemContainer;
|
|
2053
|
+
domEventsSubscription;
|
|
1905
2054
|
constructor(el, zone) {
|
|
1906
2055
|
this.el = el;
|
|
1907
2056
|
this.zone = zone;
|
|
1908
|
-
this.items = [];
|
|
1909
|
-
this.collapseMode = 'auto';
|
|
1910
|
-
this.itemClick = new EventEmitter();
|
|
1911
2057
|
const element = this.el.nativeElement;
|
|
1912
2058
|
this.isRootItemContainer = element.classList.contains('k-breadcrumb-root-item-container');
|
|
1913
2059
|
this.zone.runOutsideAngular(() => {
|
|
@@ -1930,10 +2076,10 @@ class BreadCrumbListComponent {
|
|
|
1930
2076
|
return itemIndex(item, BREADCRUMB_ITEM_INDEX);
|
|
1931
2077
|
}
|
|
1932
2078
|
}
|
|
2079
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2080
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbListComponent, isStandalone: true, selector: "[kendoBreadCrumbList]", inputs: { items: "items", itemTemplate: "itemTemplate", collapseMode: "collapseMode", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "renderedItems", predicate: BreadCrumbItemComponent, descendants: true }], ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let i = index; let isFirst = first; let isLast = last\">\n <li\n #renderedItem\n kendoBreadCrumbItem\n *ngIf=\"!(collapseMode === 'wrap' && isFirst) || isRootItemContainer\"\n [attr.data-kendo-breadcrumb-index]=\"i\"\n [item]=\"item\"\n [index]=\"i\"\n [collapseMode]=\"collapseMode\"\n [itemTemplate]=\"itemTemplate\"\n >\n <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" [svgIcon]=\"separatorSVGIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n <span\n kendoBreadCrumbSeparator\n [icon]=\"separatorIcon\"\n [svgIcon]=\"separatorSVGIcon\"\n *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n ></span>\n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { kind: "component", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }] });
|
|
1933
2081
|
}
|
|
1934
|
-
|
|
1935
|
-
BreadCrumbListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BreadCrumbListComponent, isStandalone: true, selector: "[kendoBreadCrumbList]", inputs: { items: "items", itemTemplate: "itemTemplate", collapseMode: "collapseMode", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "renderedItems", predicate: BreadCrumbItemComponent, descendants: true }], ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let i = index; let isFirst = first; let isLast = last\">\n <li\n #renderedItem\n kendoBreadCrumbItem\n *ngIf=\"!(collapseMode === 'wrap' && isFirst) || isRootItemContainer\"\n [attr.data-kendo-breadcrumb-index]=\"i\"\n [item]=\"item\"\n [index]=\"i\"\n [collapseMode]=\"collapseMode\"\n [itemTemplate]=\"itemTemplate\"\n >\n <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" [svgIcon]=\"separatorSVGIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n <span\n kendoBreadCrumbSeparator\n [icon]=\"separatorIcon\"\n [svgIcon]=\"separatorSVGIcon\"\n *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n ></span>\n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { kind: "component", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }] });
|
|
1936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
|
|
2082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
|
|
1937
2083
|
type: Component,
|
|
1938
2084
|
args: [{
|
|
1939
2085
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -2031,52 +2177,11 @@ const expandFirst = toggleFirst(true);
|
|
|
2031
2177
|
* ```
|
|
2032
2178
|
*/
|
|
2033
2179
|
class BreadCrumbComponent {
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
this.renderer = renderer;
|
|
2040
|
-
/**
|
|
2041
|
-
* Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
|
|
2042
|
-
*/
|
|
2043
|
-
this.itemClick = new EventEmitter();
|
|
2044
|
-
this.hostClasses = true;
|
|
2045
|
-
this.hostAriaLabel = 'Breadcrumb';
|
|
2046
|
-
this._items = [];
|
|
2047
|
-
this._collapseMode = 'auto';
|
|
2048
|
-
this._size = DEFAULT_SIZE;
|
|
2049
|
-
this.updateItems = new ReplaySubject();
|
|
2050
|
-
this.afterViewInit = new Subject();
|
|
2051
|
-
this.subscriptions = new Subscription();
|
|
2052
|
-
this.direction = 'ltr';
|
|
2053
|
-
validatePackage(packageMetadata);
|
|
2054
|
-
const updateItems$ = this.updateItems.asObservable().pipe(startWith([]));
|
|
2055
|
-
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
2056
|
-
this.itemsData$ = updateItems$.pipe(map(items => items.filter(Boolean)), map(items => items.map((item, index, collection) => ({
|
|
2057
|
-
context: {
|
|
2058
|
-
collapsed: false,
|
|
2059
|
-
isLast: index === collection.length - 1,
|
|
2060
|
-
isFirst: index === 0
|
|
2061
|
-
},
|
|
2062
|
-
data: item
|
|
2063
|
-
}))), share());
|
|
2064
|
-
this.firstItem$ = updateItems$.pipe(map(items => {
|
|
2065
|
-
if (items.length > 0) {
|
|
2066
|
-
return [
|
|
2067
|
-
{
|
|
2068
|
-
context: {
|
|
2069
|
-
collapsed: false,
|
|
2070
|
-
isLast: items.length === 1,
|
|
2071
|
-
isFirst: true
|
|
2072
|
-
},
|
|
2073
|
-
data: items[0]
|
|
2074
|
-
}
|
|
2075
|
-
];
|
|
2076
|
-
}
|
|
2077
|
-
return [];
|
|
2078
|
-
}), share());
|
|
2079
|
-
}
|
|
2180
|
+
localization;
|
|
2181
|
+
el;
|
|
2182
|
+
cdr;
|
|
2183
|
+
zone;
|
|
2184
|
+
renderer;
|
|
2080
2185
|
/**
|
|
2081
2186
|
* The collection of items that will be rendered in the Breadcrumb.
|
|
2082
2187
|
*/
|
|
@@ -2087,6 +2192,14 @@ class BreadCrumbComponent {
|
|
|
2087
2192
|
get items() {
|
|
2088
2193
|
return this._items;
|
|
2089
2194
|
}
|
|
2195
|
+
/**
|
|
2196
|
+
* Defines a name of a [built-in icon]({% slug icons %}) in a Kendo UI theme.
|
|
2197
|
+
*/
|
|
2198
|
+
separatorIcon;
|
|
2199
|
+
/**
|
|
2200
|
+
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered as a separator.
|
|
2201
|
+
*/
|
|
2202
|
+
separatorSVGIcon;
|
|
2090
2203
|
/**
|
|
2091
2204
|
* Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
|
|
2092
2205
|
*
|
|
@@ -2124,12 +2237,76 @@ class BreadCrumbComponent {
|
|
|
2124
2237
|
get size() {
|
|
2125
2238
|
return this._size;
|
|
2126
2239
|
}
|
|
2240
|
+
/**
|
|
2241
|
+
* Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
|
|
2242
|
+
*/
|
|
2243
|
+
itemClick = new EventEmitter();
|
|
2244
|
+
/**
|
|
2245
|
+
* @hidden
|
|
2246
|
+
*/
|
|
2247
|
+
resizeSensor;
|
|
2248
|
+
/**
|
|
2249
|
+
* @hidden
|
|
2250
|
+
*/
|
|
2251
|
+
itemsContainers;
|
|
2252
|
+
/**
|
|
2253
|
+
* @hidden
|
|
2254
|
+
*/
|
|
2255
|
+
listComponent;
|
|
2256
|
+
/**
|
|
2257
|
+
* @hidden
|
|
2258
|
+
*/
|
|
2259
|
+
itemTemplate;
|
|
2260
|
+
hostClasses = true;
|
|
2127
2261
|
get wrapMode() {
|
|
2128
2262
|
return this.collapseMode === 'wrap';
|
|
2129
2263
|
}
|
|
2264
|
+
hostAriaLabel = 'Breadcrumb';
|
|
2130
2265
|
get getDir() {
|
|
2131
2266
|
return this.direction;
|
|
2132
2267
|
}
|
|
2268
|
+
itemsData$;
|
|
2269
|
+
firstItem$;
|
|
2270
|
+
_items = [];
|
|
2271
|
+
_collapseMode = 'auto';
|
|
2272
|
+
_size = DEFAULT_SIZE;
|
|
2273
|
+
updateItems = new ReplaySubject();
|
|
2274
|
+
afterViewInit = new Subject();
|
|
2275
|
+
subscriptions = new Subscription();
|
|
2276
|
+
direction = 'ltr';
|
|
2277
|
+
constructor(localization, el, cdr, zone, renderer) {
|
|
2278
|
+
this.localization = localization;
|
|
2279
|
+
this.el = el;
|
|
2280
|
+
this.cdr = cdr;
|
|
2281
|
+
this.zone = zone;
|
|
2282
|
+
this.renderer = renderer;
|
|
2283
|
+
validatePackage(packageMetadata);
|
|
2284
|
+
const updateItems$ = this.updateItems.asObservable().pipe(startWith([]));
|
|
2285
|
+
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
2286
|
+
this.itemsData$ = updateItems$.pipe(map(items => items.filter(Boolean)), map(items => items.map((item, index, collection) => ({
|
|
2287
|
+
context: {
|
|
2288
|
+
collapsed: false,
|
|
2289
|
+
isLast: index === collection.length - 1,
|
|
2290
|
+
isFirst: index === 0
|
|
2291
|
+
},
|
|
2292
|
+
data: item
|
|
2293
|
+
}))), share());
|
|
2294
|
+
this.firstItem$ = updateItems$.pipe(map(items => {
|
|
2295
|
+
if (items.length > 0) {
|
|
2296
|
+
return [
|
|
2297
|
+
{
|
|
2298
|
+
context: {
|
|
2299
|
+
collapsed: false,
|
|
2300
|
+
isLast: items.length === 1,
|
|
2301
|
+
isFirst: true
|
|
2302
|
+
},
|
|
2303
|
+
data: items[0]
|
|
2304
|
+
}
|
|
2305
|
+
];
|
|
2306
|
+
}
|
|
2307
|
+
return [];
|
|
2308
|
+
}), share());
|
|
2309
|
+
}
|
|
2133
2310
|
ngOnInit() {
|
|
2134
2311
|
this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
|
|
2135
2312
|
this.handleClasses(this.size, 'size');
|
|
@@ -2197,15 +2374,14 @@ class BreadCrumbComponent {
|
|
|
2197
2374
|
this.renderer.addClass(elem, classes.toAdd);
|
|
2198
2375
|
}
|
|
2199
2376
|
}
|
|
2200
|
-
}
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
}
|
|
2208
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: BreadCrumbItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true, static: true }, { propertyName: "listComponent", first: true, predicate: BreadCrumbListComponent, descendants: true, static: true }, { propertyName: "itemsContainers", predicate: ["itemsContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoBreadCrumb"], ngImport: i0, template: `
|
|
2377
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbComponent, isStandalone: true, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
|
|
2379
|
+
LocalizationService,
|
|
2380
|
+
{
|
|
2381
|
+
provide: L10N_PREFIX,
|
|
2382
|
+
useValue: 'kendo.breadcrumb'
|
|
2383
|
+
}
|
|
2384
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: BreadCrumbItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true, static: true }, { propertyName: "listComponent", first: true, predicate: BreadCrumbListComponent, descendants: true, static: true }, { propertyName: "itemsContainers", predicate: ["itemsContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoBreadCrumb"], ngImport: i0, template: `
|
|
2209
2385
|
<ol
|
|
2210
2386
|
#itemsContainer
|
|
2211
2387
|
kendoBreadCrumbList
|
|
@@ -2232,7 +2408,8 @@ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
2232
2408
|
></ol>
|
|
2233
2409
|
<kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
|
|
2234
2410
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon", "separatorSVGIcon"], outputs: ["itemClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
2235
|
-
|
|
2411
|
+
}
|
|
2412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbComponent, decorators: [{
|
|
2236
2413
|
type: Component,
|
|
2237
2414
|
args: [{
|
|
2238
2415
|
exportAs: 'kendoBreadCrumb',
|
|
@@ -2389,11 +2566,11 @@ const KENDO_NAVIGATION = [
|
|
|
2389
2566
|
* ```
|
|
2390
2567
|
*/
|
|
2391
2568
|
class AppBarModule {
|
|
2569
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2570
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
|
|
2571
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule });
|
|
2392
2572
|
}
|
|
2393
|
-
|
|
2394
|
-
AppBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent], exports: [AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent] });
|
|
2395
|
-
AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, imports: [KENDO_APPBAR] });
|
|
2396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppBarModule, decorators: [{
|
|
2573
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarModule, decorators: [{
|
|
2397
2574
|
type: NgModule,
|
|
2398
2575
|
args: [{
|
|
2399
2576
|
exports: [...KENDO_APPBAR],
|
|
@@ -2434,11 +2611,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2434
2611
|
* ```
|
|
2435
2612
|
*/
|
|
2436
2613
|
class NavigationModule {
|
|
2614
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2615
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
|
|
2616
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, BottomNavigationComponent, BreadCrumbComponent] });
|
|
2437
2617
|
}
|
|
2438
|
-
|
|
2439
|
-
NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
|
|
2440
|
-
NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BreadCrumbComponent] });
|
|
2441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationModule, decorators: [{
|
|
2618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, decorators: [{
|
|
2442
2619
|
type: NgModule,
|
|
2443
2620
|
args: [{
|
|
2444
2621
|
imports: [...KENDO_NAVIGATION],
|
|
@@ -2480,11 +2657,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2480
2657
|
* ```
|
|
2481
2658
|
*/
|
|
2482
2659
|
class BreadCrumbModule {
|
|
2660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2661
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
|
|
2662
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
|
|
2483
2663
|
}
|
|
2484
|
-
|
|
2485
|
-
BreadCrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, imports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
|
|
2486
|
-
BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, providers: [IconsService, ResizeBatchService], imports: [BreadCrumbComponent] });
|
|
2487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadCrumbModule, decorators: [{
|
|
2664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbModule, decorators: [{
|
|
2488
2665
|
type: NgModule,
|
|
2489
2666
|
args: [{
|
|
2490
2667
|
exports: [...KENDO_BREADCRUMB],
|
|
@@ -2526,11 +2703,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2526
2703
|
* ```
|
|
2527
2704
|
*/
|
|
2528
2705
|
class BottomNavigationModule {
|
|
2706
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2707
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
|
|
2708
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
|
|
2529
2709
|
}
|
|
2530
|
-
|
|
2531
|
-
BottomNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, imports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
|
|
2532
|
-
BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [BottomNavigationComponent] });
|
|
2533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BottomNavigationModule, decorators: [{
|
|
2710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationModule, decorators: [{
|
|
2534
2711
|
type: NgModule,
|
|
2535
2712
|
args: [{
|
|
2536
2713
|
exports: [...KENDO_BOTTOMNAVIGATION],
|
|
@@ -2573,11 +2750,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2573
2750
|
* ```
|
|
2574
2751
|
*/
|
|
2575
2752
|
class ActionSheetModule {
|
|
2753
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2754
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
|
|
2755
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
|
|
2576
2756
|
}
|
|
2577
|
-
|
|
2578
|
-
ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
|
|
2579
|
-
ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
|
|
2580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionSheetModule, decorators: [{
|
|
2757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, decorators: [{
|
|
2581
2758
|
type: NgModule,
|
|
2582
2759
|
args: [{
|
|
2583
2760
|
exports: [...KENDO_ACTIONSHEET],
|