@progress/kendo-angular-navigation 21.1.1-develop.2 → 21.2.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/actionsheet/actionsheet-view.component.mjs +71 -53
- package/esm2022/actionsheet/actionsheet.component.mjs +217 -181
- package/esm2022/actionsheet/item.component.mjs +63 -45
- package/esm2022/actionsheet/list.component.mjs +8 -6
- package/esm2022/bottomnavigation/bottomnavigation-item.component.mjs +39 -27
- package/esm2022/bottomnavigation/bottomnavigation.component.mjs +20 -19
- package/esm2022/breadcrumb/breadcrumb-item.component.mjs +73 -61
- package/esm2022/breadcrumb/breadcrumb.component.mjs +33 -31
- package/esm2022/breadcrumb/list.component.mjs +23 -20
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-navigation.mjs +542 -437
- package/package.json +7 -7
|
@@ -8,7 +8,7 @@ import * as i1 from '@progress/kendo-angular-l10n';
|
|
|
8
8
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import { focusableSelector, closestInScope as closestInScope$1, isPresent as isPresent$1, isDocumentAvailable, Keys, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
11
|
-
import {
|
|
11
|
+
import { NgTemplateOutlet, NgClass, NgStyle, AsyncPipe } from '@angular/common';
|
|
12
12
|
import { Subscription, fromEvent, merge, ReplaySubject, Subject } from 'rxjs';
|
|
13
13
|
import * as i2 from '@angular/animations';
|
|
14
14
|
import { style, animate } from '@angular/animations';
|
|
@@ -25,8 +25,8 @@ const packageMetadata = {
|
|
|
25
25
|
productName: 'Kendo UI for Angular',
|
|
26
26
|
productCode: 'KENDOUIANGULAR',
|
|
27
27
|
productCodes: ['KENDOUIANGULAR'],
|
|
28
|
-
publishDate:
|
|
29
|
-
version: '21.
|
|
28
|
+
publishDate: 1764002056,
|
|
29
|
+
version: '21.2.0-develop.2',
|
|
30
30
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -560,32 +560,41 @@ class ActionSheetItemComponent {
|
|
|
560
560
|
return styles;
|
|
561
561
|
}
|
|
562
562
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
564
|
-
|
|
563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionSheetItemComponent, isStandalone: true, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
|
|
564
|
+
@if (itemTemplate) {
|
|
565
|
+
<ng-template
|
|
565
566
|
[ngTemplateOutlet]="itemTemplate"
|
|
566
567
|
[ngTemplateOutletContext]="{
|
|
567
568
|
$implicit: item
|
|
568
569
|
}">
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
</
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
570
|
+
</ng-template>
|
|
571
|
+
} @else {
|
|
572
|
+
<span class="k-actionsheet-action">
|
|
573
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
574
|
+
<span class="k-icon-wrap">
|
|
575
|
+
<kendo-icon-wrapper
|
|
576
|
+
[name]="item.icon"
|
|
577
|
+
[customFontClass]="item.iconClass"
|
|
578
|
+
[class]="manageIconClasses(item)"
|
|
579
|
+
[svgIcon]="item.svgIcon"
|
|
580
|
+
[style]="manageIconStyles(item)"
|
|
581
|
+
>
|
|
582
|
+
</kendo-icon-wrapper>
|
|
583
|
+
</span>
|
|
584
|
+
}
|
|
585
|
+
@if (item.title || item.description) {
|
|
586
|
+
<span class="k-actionsheet-item-text">
|
|
587
|
+
@if (item.title) {
|
|
588
|
+
<span class="k-actionsheet-item-title">{{item.title}}</span>
|
|
589
|
+
}
|
|
590
|
+
@if (item.description) {
|
|
591
|
+
<span class="k-actionsheet-item-description">{{item.description}}</span>
|
|
592
|
+
}
|
|
593
|
+
</span>
|
|
594
|
+
}
|
|
595
|
+
</span>
|
|
596
|
+
}
|
|
597
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
589
598
|
}
|
|
590
599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
|
|
591
600
|
type: Component,
|
|
@@ -593,33 +602,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
593
602
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
594
603
|
selector: '[kendoActionSheetItem]',
|
|
595
604
|
template: `
|
|
596
|
-
|
|
605
|
+
@if (itemTemplate) {
|
|
606
|
+
<ng-template
|
|
597
607
|
[ngTemplateOutlet]="itemTemplate"
|
|
598
608
|
[ngTemplateOutletContext]="{
|
|
599
609
|
$implicit: item
|
|
600
610
|
}">
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
</
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
611
|
+
</ng-template>
|
|
612
|
+
} @else {
|
|
613
|
+
<span class="k-actionsheet-action">
|
|
614
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
615
|
+
<span class="k-icon-wrap">
|
|
616
|
+
<kendo-icon-wrapper
|
|
617
|
+
[name]="item.icon"
|
|
618
|
+
[customFontClass]="item.iconClass"
|
|
619
|
+
[class]="manageIconClasses(item)"
|
|
620
|
+
[svgIcon]="item.svgIcon"
|
|
621
|
+
[style]="manageIconStyles(item)"
|
|
622
|
+
>
|
|
623
|
+
</kendo-icon-wrapper>
|
|
624
|
+
</span>
|
|
625
|
+
}
|
|
626
|
+
@if (item.title || item.description) {
|
|
627
|
+
<span class="k-actionsheet-item-text">
|
|
628
|
+
@if (item.title) {
|
|
629
|
+
<span class="k-actionsheet-item-title">{{item.title}}</span>
|
|
630
|
+
}
|
|
631
|
+
@if (item.description) {
|
|
632
|
+
<span class="k-actionsheet-item-description">{{item.description}}</span>
|
|
633
|
+
}
|
|
634
|
+
</span>
|
|
635
|
+
}
|
|
636
|
+
</span>
|
|
637
|
+
}
|
|
638
|
+
`,
|
|
621
639
|
standalone: true,
|
|
622
|
-
imports: [
|
|
640
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
623
641
|
}]
|
|
624
642
|
}], propDecorators: { itemTemplate: [{
|
|
625
643
|
type: Input
|
|
@@ -680,7 +698,7 @@ class ActionSheetListComponent {
|
|
|
680
698
|
return this.allItems.indexOf(item);
|
|
681
699
|
}
|
|
682
700
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
701
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionSheetListComponent, isStandalone: true, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n @for (item of groupItems; track item) {\n <span 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 }\n ", isInline: true, dependencies: [{ 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"] }] });
|
|
684
702
|
}
|
|
685
703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetListComponent, decorators: [{
|
|
686
704
|
type: Component,
|
|
@@ -688,7 +706,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
688
706
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
689
707
|
selector: '[kendoActionSheetList]',
|
|
690
708
|
template: `
|
|
691
|
-
|
|
709
|
+
@for (item of groupItems; track item) {
|
|
710
|
+
<span kendoActionSheetItem
|
|
692
711
|
tabindex="0"
|
|
693
712
|
role="button"
|
|
694
713
|
[attr.aria-disabled]="item.disabled"
|
|
@@ -699,10 +718,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
699
718
|
[ngStyle]="item.cssStyle"
|
|
700
719
|
[itemTemplate]="itemTemplate"
|
|
701
720
|
[item]="item">
|
|
702
|
-
|
|
703
|
-
|
|
721
|
+
</span>
|
|
722
|
+
}
|
|
723
|
+
`,
|
|
704
724
|
standalone: true,
|
|
705
|
-
imports: [
|
|
725
|
+
imports: [ActionSheetItemComponent, NgClass, NgStyle]
|
|
706
726
|
}]
|
|
707
727
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { groupItems: [{
|
|
708
728
|
type: Input
|
|
@@ -1082,106 +1102,124 @@ class ActionSheetComponent {
|
|
|
1082
1102
|
this.player.play();
|
|
1083
1103
|
}
|
|
1084
1104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1085
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId", initialFocus: "initialFocus" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
|
|
1086
1106
|
LocalizationService,
|
|
1087
1107
|
{
|
|
1088
1108
|
provide: L10N_PREFIX,
|
|
1089
1109
|
useValue: 'kendo.actionsheet.component'
|
|
1090
1110
|
}
|
|
1091
1111
|
], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetViews", predicate: i0.forwardRef(() => ActionSheetViewComponent) }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1112
|
+
@if (expanded) {
|
|
1113
|
+
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
1114
|
+
<div class="k-animation-container k-animation-container-shown">
|
|
1115
|
+
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
1116
|
+
<div
|
|
1117
|
+
class="k-actionsheet k-actionsheet-bottom"
|
|
1118
|
+
[ngClass]="cssClass"
|
|
1119
|
+
[ngStyle]="cssStyle"
|
|
1120
|
+
role="dialog"
|
|
1121
|
+
aria-modal="true"
|
|
1122
|
+
[attr.aria-labelledby]="titleId"
|
|
1123
|
+
[style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
|
|
1124
|
+
>
|
|
1125
|
+
@if (actionSheetViews?.length > 0) {
|
|
1126
|
+
<ng-content select="kendo-actionsheet-view"></ng-content>
|
|
1127
|
+
}
|
|
1128
|
+
@if (actionSheetViews?.length === 0) {
|
|
1129
|
+
<div class="k-actionsheet-view">
|
|
1130
|
+
@if (actionSheetTemplate) {
|
|
1131
|
+
<ng-template
|
|
1132
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
1133
|
+
</ng-template>
|
|
1134
|
+
} @else {
|
|
1135
|
+
@if (title || subtitle || headerTemplate) {
|
|
1136
|
+
<div class="k-actionsheet-titlebar">
|
|
1137
|
+
@if (headerTemplate) {
|
|
1138
|
+
<ng-template
|
|
1139
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
1110
1140
|
</ng-template>
|
|
1111
|
-
|
|
1112
|
-
<
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
1131
|
-
</ng-template>
|
|
1132
|
-
<ng-template #defaultContentTemplate>
|
|
1133
|
-
<div *ngIf="topGroupItems" kendoActionSheetList
|
|
1134
|
-
class="k-list-ul"
|
|
1135
|
-
role="group"
|
|
1136
|
-
[groupItems]="topGroupItems"
|
|
1137
|
-
[allItems]="items"
|
|
1138
|
-
[itemTemplate]="itemTemplate?.templateRef"
|
|
1139
|
-
(itemClick)="onItemClick($event)">
|
|
1140
|
-
</div>
|
|
1141
|
-
|
|
1142
|
-
<hr *ngIf="shouldRenderSeparator" class="k-hr"/>
|
|
1143
|
-
|
|
1144
|
-
<div *ngIf="bottomGroupItems" kendoActionSheetList
|
|
1145
|
-
class="k-list-ul"
|
|
1146
|
-
role="group"
|
|
1147
|
-
[groupItems]="bottomGroupItems"
|
|
1148
|
-
[allItems]="items"
|
|
1149
|
-
[itemTemplate]="itemTemplate?.templateRef"
|
|
1150
|
-
(itemClick)="onItemClick($event)">
|
|
1151
|
-
</div>
|
|
1152
|
-
</ng-template>
|
|
1153
|
-
</div>
|
|
1154
|
-
<div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
1155
|
-
<ng-template
|
|
1156
|
-
*ngIf="footerTemplate"
|
|
1157
|
-
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
1158
|
-
</ng-template>
|
|
1159
|
-
|
|
1160
|
-
<ng-container *ngIf="!footerTemplate && actions">
|
|
1161
|
-
<button
|
|
1162
|
-
*ngFor="let actionButton of actions"
|
|
1163
|
-
kendoButton
|
|
1164
|
-
type="button"
|
|
1165
|
-
[icon]="actionButton.icon"
|
|
1166
|
-
[title]="actionButton.title"
|
|
1167
|
-
[svgIcon]="actionButton.svgIcon"
|
|
1168
|
-
[themeColor]="actionButton.themeColor"
|
|
1169
|
-
[fillMode]="actionButton.fillMode"
|
|
1170
|
-
[size]="actionButton.size"
|
|
1171
|
-
[attr.aria-label]="actionButton.text"
|
|
1172
|
-
(click)="action.emit(actionButton)"
|
|
1173
|
-
>
|
|
1174
|
-
{{ actionButton.text }}
|
|
1175
|
-
</button>
|
|
1176
|
-
</ng-container>
|
|
1177
|
-
</div>
|
|
1141
|
+
} @else {
|
|
1142
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
1143
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
1144
|
+
@if (title) {
|
|
1145
|
+
<div class="k-text-center">{{title}}</div>
|
|
1146
|
+
}
|
|
1147
|
+
@if (subtitle) {
|
|
1148
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
1149
|
+
}
|
|
1150
|
+
</div>
|
|
1151
|
+
</div>
|
|
1152
|
+
}
|
|
1153
|
+
</div>
|
|
1154
|
+
}
|
|
1155
|
+
@if (items || contentTemplate) {
|
|
1156
|
+
<div class="k-actionsheet-content">
|
|
1157
|
+
@if (contentTemplate) {
|
|
1158
|
+
<ng-template
|
|
1159
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
1178
1160
|
</ng-template>
|
|
1161
|
+
} @else {
|
|
1162
|
+
@if (topGroupItems) {
|
|
1163
|
+
<div kendoActionSheetList
|
|
1164
|
+
class="k-list-ul"
|
|
1165
|
+
role="group"
|
|
1166
|
+
[groupItems]="topGroupItems"
|
|
1167
|
+
[allItems]="items"
|
|
1168
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
1169
|
+
(itemClick)="onItemClick($event)">
|
|
1170
|
+
</div>
|
|
1171
|
+
}
|
|
1172
|
+
@if (shouldRenderSeparator) {
|
|
1173
|
+
<hr class="k-hr"/>
|
|
1174
|
+
}
|
|
1175
|
+
@if (bottomGroupItems) {
|
|
1176
|
+
<div kendoActionSheetList
|
|
1177
|
+
class="k-list-ul"
|
|
1178
|
+
role="group"
|
|
1179
|
+
[groupItems]="bottomGroupItems"
|
|
1180
|
+
[allItems]="items"
|
|
1181
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
1182
|
+
(itemClick)="onItemClick($event)">
|
|
1183
|
+
</div>
|
|
1184
|
+
}
|
|
1185
|
+
}
|
|
1179
1186
|
</div>
|
|
1180
|
-
|
|
1181
|
-
|
|
1187
|
+
}
|
|
1188
|
+
@if (footerTemplate || actions) {
|
|
1189
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
1190
|
+
@if (footerTemplate) {
|
|
1191
|
+
<ng-template
|
|
1192
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
1193
|
+
</ng-template>
|
|
1194
|
+
}
|
|
1195
|
+
@if (!footerTemplate && actions) {
|
|
1196
|
+
@for (actionButton of actions; track actionButton) {
|
|
1197
|
+
<button
|
|
1198
|
+
kendoButton
|
|
1199
|
+
type="button"
|
|
1200
|
+
[icon]="actionButton.icon"
|
|
1201
|
+
[title]="actionButton.title"
|
|
1202
|
+
[svgIcon]="actionButton.svgIcon"
|
|
1203
|
+
[themeColor]="actionButton.themeColor"
|
|
1204
|
+
[fillMode]="actionButton.fillMode"
|
|
1205
|
+
[size]="actionButton.size"
|
|
1206
|
+
[attr.aria-label]="actionButton.text"
|
|
1207
|
+
(click)="action.emit(actionButton)"
|
|
1208
|
+
>
|
|
1209
|
+
{{ actionButton.text }}
|
|
1210
|
+
</button>
|
|
1211
|
+
}
|
|
1212
|
+
}
|
|
1213
|
+
</div>
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
</div>
|
|
1217
|
+
}
|
|
1218
|
+
</div>
|
|
1182
1219
|
</div>
|
|
1183
|
-
|
|
1184
|
-
|
|
1220
|
+
</div>
|
|
1221
|
+
}
|
|
1222
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
1185
1223
|
}
|
|
1186
1224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetComponent, decorators: [{
|
|
1187
1225
|
type: Component,
|
|
@@ -1189,99 +1227,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1189
1227
|
exportAs: 'kendoActionSheet',
|
|
1190
1228
|
selector: 'kendo-actionsheet',
|
|
1191
1229
|
template: `
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1230
|
+
@if (expanded) {
|
|
1231
|
+
<div class="k-overlay" (click)="onOverlayClick()"></div>
|
|
1232
|
+
<div class="k-animation-container k-animation-container-shown">
|
|
1233
|
+
<div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
|
|
1234
|
+
<div
|
|
1235
|
+
class="k-actionsheet k-actionsheet-bottom"
|
|
1236
|
+
[ngClass]="cssClass"
|
|
1237
|
+
[ngStyle]="cssStyle"
|
|
1238
|
+
role="dialog"
|
|
1239
|
+
aria-modal="true"
|
|
1240
|
+
[attr.aria-labelledby]="titleId"
|
|
1241
|
+
[style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
|
|
1242
|
+
>
|
|
1243
|
+
@if (actionSheetViews?.length > 0) {
|
|
1244
|
+
<ng-content select="kendo-actionsheet-view"></ng-content>
|
|
1245
|
+
}
|
|
1246
|
+
@if (actionSheetViews?.length === 0) {
|
|
1247
|
+
<div class="k-actionsheet-view">
|
|
1248
|
+
@if (actionSheetTemplate) {
|
|
1249
|
+
<ng-template
|
|
1250
|
+
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
1251
|
+
</ng-template>
|
|
1252
|
+
} @else {
|
|
1253
|
+
@if (title || subtitle || headerTemplate) {
|
|
1254
|
+
<div class="k-actionsheet-titlebar">
|
|
1255
|
+
@if (headerTemplate) {
|
|
1256
|
+
<ng-template
|
|
1257
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
1210
1258
|
</ng-template>
|
|
1211
|
-
|
|
1212
|
-
<
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
1231
|
-
</ng-template>
|
|
1232
|
-
<ng-template #defaultContentTemplate>
|
|
1233
|
-
<div *ngIf="topGroupItems" kendoActionSheetList
|
|
1234
|
-
class="k-list-ul"
|
|
1235
|
-
role="group"
|
|
1236
|
-
[groupItems]="topGroupItems"
|
|
1237
|
-
[allItems]="items"
|
|
1238
|
-
[itemTemplate]="itemTemplate?.templateRef"
|
|
1239
|
-
(itemClick)="onItemClick($event)">
|
|
1240
|
-
</div>
|
|
1241
|
-
|
|
1242
|
-
<hr *ngIf="shouldRenderSeparator" class="k-hr"/>
|
|
1243
|
-
|
|
1244
|
-
<div *ngIf="bottomGroupItems" kendoActionSheetList
|
|
1245
|
-
class="k-list-ul"
|
|
1246
|
-
role="group"
|
|
1247
|
-
[groupItems]="bottomGroupItems"
|
|
1248
|
-
[allItems]="items"
|
|
1249
|
-
[itemTemplate]="itemTemplate?.templateRef"
|
|
1250
|
-
(itemClick)="onItemClick($event)">
|
|
1251
|
-
</div>
|
|
1252
|
-
</ng-template>
|
|
1253
|
-
</div>
|
|
1254
|
-
<div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
1255
|
-
<ng-template
|
|
1256
|
-
*ngIf="footerTemplate"
|
|
1257
|
-
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
1258
|
-
</ng-template>
|
|
1259
|
-
|
|
1260
|
-
<ng-container *ngIf="!footerTemplate && actions">
|
|
1261
|
-
<button
|
|
1262
|
-
*ngFor="let actionButton of actions"
|
|
1263
|
-
kendoButton
|
|
1264
|
-
type="button"
|
|
1265
|
-
[icon]="actionButton.icon"
|
|
1266
|
-
[title]="actionButton.title"
|
|
1267
|
-
[svgIcon]="actionButton.svgIcon"
|
|
1268
|
-
[themeColor]="actionButton.themeColor"
|
|
1269
|
-
[fillMode]="actionButton.fillMode"
|
|
1270
|
-
[size]="actionButton.size"
|
|
1271
|
-
[attr.aria-label]="actionButton.text"
|
|
1272
|
-
(click)="action.emit(actionButton)"
|
|
1273
|
-
>
|
|
1274
|
-
{{ actionButton.text }}
|
|
1275
|
-
</button>
|
|
1276
|
-
</ng-container>
|
|
1277
|
-
</div>
|
|
1259
|
+
} @else {
|
|
1260
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
1261
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
1262
|
+
@if (title) {
|
|
1263
|
+
<div class="k-text-center">{{title}}</div>
|
|
1264
|
+
}
|
|
1265
|
+
@if (subtitle) {
|
|
1266
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
1267
|
+
}
|
|
1268
|
+
</div>
|
|
1269
|
+
</div>
|
|
1270
|
+
}
|
|
1271
|
+
</div>
|
|
1272
|
+
}
|
|
1273
|
+
@if (items || contentTemplate) {
|
|
1274
|
+
<div class="k-actionsheet-content">
|
|
1275
|
+
@if (contentTemplate) {
|
|
1276
|
+
<ng-template
|
|
1277
|
+
[ngTemplateOutlet]="contentTemplate?.templateRef">
|
|
1278
1278
|
</ng-template>
|
|
1279
|
+
} @else {
|
|
1280
|
+
@if (topGroupItems) {
|
|
1281
|
+
<div kendoActionSheetList
|
|
1282
|
+
class="k-list-ul"
|
|
1283
|
+
role="group"
|
|
1284
|
+
[groupItems]="topGroupItems"
|
|
1285
|
+
[allItems]="items"
|
|
1286
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
1287
|
+
(itemClick)="onItemClick($event)">
|
|
1288
|
+
</div>
|
|
1289
|
+
}
|
|
1290
|
+
@if (shouldRenderSeparator) {
|
|
1291
|
+
<hr class="k-hr"/>
|
|
1292
|
+
}
|
|
1293
|
+
@if (bottomGroupItems) {
|
|
1294
|
+
<div kendoActionSheetList
|
|
1295
|
+
class="k-list-ul"
|
|
1296
|
+
role="group"
|
|
1297
|
+
[groupItems]="bottomGroupItems"
|
|
1298
|
+
[allItems]="items"
|
|
1299
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
1300
|
+
(itemClick)="onItemClick($event)">
|
|
1301
|
+
</div>
|
|
1302
|
+
}
|
|
1303
|
+
}
|
|
1279
1304
|
</div>
|
|
1280
|
-
|
|
1281
|
-
|
|
1305
|
+
}
|
|
1306
|
+
@if (footerTemplate || actions) {
|
|
1307
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
1308
|
+
@if (footerTemplate) {
|
|
1309
|
+
<ng-template
|
|
1310
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
1311
|
+
</ng-template>
|
|
1312
|
+
}
|
|
1313
|
+
@if (!footerTemplate && actions) {
|
|
1314
|
+
@for (actionButton of actions; track actionButton) {
|
|
1315
|
+
<button
|
|
1316
|
+
kendoButton
|
|
1317
|
+
type="button"
|
|
1318
|
+
[icon]="actionButton.icon"
|
|
1319
|
+
[title]="actionButton.title"
|
|
1320
|
+
[svgIcon]="actionButton.svgIcon"
|
|
1321
|
+
[themeColor]="actionButton.themeColor"
|
|
1322
|
+
[fillMode]="actionButton.fillMode"
|
|
1323
|
+
[size]="actionButton.size"
|
|
1324
|
+
[attr.aria-label]="actionButton.text"
|
|
1325
|
+
(click)="action.emit(actionButton)"
|
|
1326
|
+
>
|
|
1327
|
+
{{ actionButton.text }}
|
|
1328
|
+
</button>
|
|
1329
|
+
}
|
|
1330
|
+
}
|
|
1331
|
+
</div>
|
|
1332
|
+
}
|
|
1333
|
+
}
|
|
1334
|
+
</div>
|
|
1335
|
+
}
|
|
1336
|
+
</div>
|
|
1282
1337
|
</div>
|
|
1283
|
-
|
|
1284
|
-
|
|
1338
|
+
</div>
|
|
1339
|
+
}
|
|
1340
|
+
`,
|
|
1285
1341
|
providers: [
|
|
1286
1342
|
LocalizationService,
|
|
1287
1343
|
{
|
|
@@ -1290,7 +1346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1290
1346
|
}
|
|
1291
1347
|
],
|
|
1292
1348
|
standalone: true,
|
|
1293
|
-
imports: [
|
|
1349
|
+
imports: [NgStyle, NgClass, NgTemplateOutlet, ActionSheetListComponent, ButtonDirective]
|
|
1294
1350
|
}]
|
|
1295
1351
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
|
|
1296
1352
|
type: HostBinding,
|
|
@@ -1398,75 +1454,93 @@ class ActionSheetViewComponent {
|
|
|
1398
1454
|
return this.actionSheet?.alignmentClass;
|
|
1399
1455
|
}
|
|
1400
1456
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: ActionSheetComponent, host: true, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1402
|
-
|
|
1457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
|
|
1458
|
+
@if (actionSheetTemplate) {
|
|
1459
|
+
<ng-template
|
|
1403
1460
|
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
<div
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
<ng-template #defaultHeaderTemplate>
|
|
1412
|
-
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
1413
|
-
<div class="k-actionsheet-title" [id]="titleId">
|
|
1414
|
-
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
1415
|
-
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
1416
|
-
</div>
|
|
1417
|
-
</div>
|
|
1461
|
+
</ng-template>
|
|
1462
|
+
} @else {
|
|
1463
|
+
@if (title || subtitle || headerTemplate) {
|
|
1464
|
+
<div class="k-actionsheet-titlebar">
|
|
1465
|
+
@if (headerTemplate) {
|
|
1466
|
+
<ng-template [ngTemplateOutlet]="headerTemplate.templateRef">
|
|
1418
1467
|
</ng-template>
|
|
1468
|
+
} @else {
|
|
1469
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
1470
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
1471
|
+
@if (title) {
|
|
1472
|
+
<div class="k-text-center">{{title}}</div>
|
|
1473
|
+
}
|
|
1474
|
+
@if (subtitle) {
|
|
1475
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
1476
|
+
}
|
|
1477
|
+
</div>
|
|
1478
|
+
</div>
|
|
1479
|
+
}
|
|
1419
1480
|
</div>
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1481
|
+
}
|
|
1482
|
+
@if (contentTemplate) {
|
|
1483
|
+
<div class="k-actionsheet-content">
|
|
1484
|
+
<ng-template [ngTemplateOutlet]="contentTemplate.templateRef">
|
|
1485
|
+
</ng-template>
|
|
1424
1486
|
</div>
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1487
|
+
}
|
|
1488
|
+
@if (footerTemplate) {
|
|
1489
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
1490
|
+
<ng-template [ngTemplateOutlet]="footerTemplate.templateRef">
|
|
1491
|
+
</ng-template>
|
|
1429
1492
|
</div>
|
|
1430
|
-
|
|
1431
|
-
|
|
1493
|
+
}
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1432
1497
|
}
|
|
1433
1498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
|
|
1434
1499
|
type: Component,
|
|
1435
1500
|
args: [{
|
|
1436
1501
|
selector: 'kendo-actionsheet-view',
|
|
1437
1502
|
template: `
|
|
1438
|
-
|
|
1503
|
+
@if (actionSheetTemplate) {
|
|
1504
|
+
<ng-template
|
|
1439
1505
|
[ngTemplateOutlet]="actionSheetTemplate?.templateRef">
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
<div
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
<ng-template #defaultHeaderTemplate>
|
|
1448
|
-
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
1449
|
-
<div class="k-actionsheet-title" [id]="titleId">
|
|
1450
|
-
<div *ngIf="title" class="k-text-center">{{title}}</div>
|
|
1451
|
-
<div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
1452
|
-
</div>
|
|
1453
|
-
</div>
|
|
1506
|
+
</ng-template>
|
|
1507
|
+
} @else {
|
|
1508
|
+
@if (title || subtitle || headerTemplate) {
|
|
1509
|
+
<div class="k-actionsheet-titlebar">
|
|
1510
|
+
@if (headerTemplate) {
|
|
1511
|
+
<ng-template [ngTemplateOutlet]="headerTemplate.templateRef">
|
|
1454
1512
|
</ng-template>
|
|
1513
|
+
} @else {
|
|
1514
|
+
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
1515
|
+
<div class="k-actionsheet-title" [id]="titleId">
|
|
1516
|
+
@if (title) {
|
|
1517
|
+
<div class="k-text-center">{{title}}</div>
|
|
1518
|
+
}
|
|
1519
|
+
@if (subtitle) {
|
|
1520
|
+
<div class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
|
|
1521
|
+
}
|
|
1522
|
+
</div>
|
|
1523
|
+
</div>
|
|
1524
|
+
}
|
|
1455
1525
|
</div>
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1526
|
+
}
|
|
1527
|
+
@if (contentTemplate) {
|
|
1528
|
+
<div class="k-actionsheet-content">
|
|
1529
|
+
<ng-template [ngTemplateOutlet]="contentTemplate.templateRef">
|
|
1530
|
+
</ng-template>
|
|
1460
1531
|
</div>
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1532
|
+
}
|
|
1533
|
+
@if (footerTemplate) {
|
|
1534
|
+
<div [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
|
|
1535
|
+
<ng-template [ngTemplateOutlet]="footerTemplate.templateRef">
|
|
1536
|
+
</ng-template>
|
|
1465
1537
|
</div>
|
|
1466
|
-
|
|
1467
|
-
|
|
1538
|
+
}
|
|
1539
|
+
}
|
|
1540
|
+
|
|
1541
|
+
`,
|
|
1468
1542
|
standalone: true,
|
|
1469
|
-
imports: [
|
|
1543
|
+
imports: [NgClass, NgTemplateOutlet]
|
|
1470
1544
|
}]
|
|
1471
1545
|
}], ctorParameters: () => [{ type: ActionSheetComponent, decorators: [{
|
|
1472
1546
|
type: Optional
|
|
@@ -1650,21 +1724,27 @@ class BottomNavigationItemComponent {
|
|
|
1650
1724
|
return `${kendoIcon} ${customIcon}`;
|
|
1651
1725
|
}
|
|
1652
1726
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1653
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
1728
|
+
@if (!itemTemplate) {
|
|
1729
|
+
@if (itemIcon) {
|
|
1730
|
+
<kendo-icon-wrapper
|
|
1731
|
+
innerCssClass="k-bottom-nav-item-icon"
|
|
1732
|
+
size="xlarge"
|
|
1733
|
+
[name]="item.icon"
|
|
1734
|
+
[customFontClass]="item.iconClass"
|
|
1735
|
+
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
1736
|
+
}
|
|
1737
|
+
@if (item.text) {
|
|
1738
|
+
<span class="k-bottom-nav-item-text">{{item.text}}</span>
|
|
1739
|
+
}
|
|
1740
|
+
}
|
|
1741
|
+
@if (itemTemplate) {
|
|
1742
|
+
<ng-template
|
|
1664
1743
|
[ngTemplateOutlet]="itemTemplate?.templateRef"
|
|
1665
1744
|
[ngTemplateOutletContext]="{ $implicit: item }">
|
|
1666
|
-
|
|
1667
|
-
|
|
1745
|
+
</ng-template>
|
|
1746
|
+
}
|
|
1747
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
1668
1748
|
}
|
|
1669
1749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
|
|
1670
1750
|
type: Component,
|
|
@@ -1672,22 +1752,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1672
1752
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
1673
1753
|
selector: '[kendoBottomNavigationItem]',
|
|
1674
1754
|
template: `
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1755
|
+
@if (!itemTemplate) {
|
|
1756
|
+
@if (itemIcon) {
|
|
1757
|
+
<kendo-icon-wrapper
|
|
1758
|
+
innerCssClass="k-bottom-nav-item-icon"
|
|
1759
|
+
size="xlarge"
|
|
1760
|
+
[name]="item.icon"
|
|
1761
|
+
[customFontClass]="item.iconClass"
|
|
1762
|
+
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
1763
|
+
}
|
|
1764
|
+
@if (item.text) {
|
|
1765
|
+
<span class="k-bottom-nav-item-text">{{item.text}}</span>
|
|
1766
|
+
}
|
|
1767
|
+
}
|
|
1768
|
+
@if (itemTemplate) {
|
|
1769
|
+
<ng-template
|
|
1685
1770
|
[ngTemplateOutlet]="itemTemplate?.templateRef"
|
|
1686
1771
|
[ngTemplateOutletContext]="{ $implicit: item }">
|
|
1687
|
-
|
|
1688
|
-
|
|
1772
|
+
</ng-template>
|
|
1773
|
+
}
|
|
1774
|
+
`,
|
|
1689
1775
|
standalone: true,
|
|
1690
|
-
imports: [
|
|
1776
|
+
imports: [IconWrapperComponent, NgTemplateOutlet]
|
|
1691
1777
|
}]
|
|
1692
1778
|
}], propDecorators: { itemTemplate: [{
|
|
1693
1779
|
type: Input
|
|
@@ -1960,13 +2046,13 @@ class BottomNavigationComponent {
|
|
|
1960
2046
|
}
|
|
1961
2047
|
}
|
|
1962
2048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1963
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2049
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
1964
2050
|
LocalizationService,
|
|
1965
2051
|
{
|
|
1966
2052
|
provide: L10N_PREFIX,
|
|
1967
2053
|
useValue: 'kendo.bottomnavigation'
|
|
1968
2054
|
}
|
|
1969
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n
|
|
2055
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n @if (items) {\n @for (item of items; track item; let idx = $index) {\n <span kendoBottomNavigationItem\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 }\n }\n ", isInline: true, dependencies: [{ 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"] }] });
|
|
1970
2056
|
}
|
|
1971
2057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationComponent, decorators: [{
|
|
1972
2058
|
type: Component,
|
|
@@ -1981,25 +2067,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1981
2067
|
}
|
|
1982
2068
|
],
|
|
1983
2069
|
template: `
|
|
1984
|
-
|
|
2070
|
+
@if (items) {
|
|
2071
|
+
@for (item of items; track item; let idx = $index) {
|
|
1985
2072
|
<span kendoBottomNavigationItem
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
[orientation]="itemFlow">
|
|
2073
|
+
role="link"
|
|
2074
|
+
class="k-bottom-nav-item"
|
|
2075
|
+
[disabledComponent]="disabled"
|
|
2076
|
+
[item]="item"
|
|
2077
|
+
[index]="idx"
|
|
2078
|
+
[selectedIdx]="selectedIdx"
|
|
2079
|
+
[itemTemplate]="itemTemplate"
|
|
2080
|
+
[attr.${BOTTOMNAVIGATION_ITEM_INDEX}]="idx"
|
|
2081
|
+
[ngClass]="item.cssClass"
|
|
2082
|
+
[ngStyle]="item.cssStyle"
|
|
2083
|
+
[orientation]="itemFlow">
|
|
1998
2084
|
</span>
|
|
1999
|
-
|
|
2000
|
-
|
|
2085
|
+
}
|
|
2086
|
+
}
|
|
2087
|
+
`,
|
|
2001
2088
|
standalone: true,
|
|
2002
|
-
imports: [
|
|
2089
|
+
imports: [BottomNavigationItemComponent, NgClass, NgStyle]
|
|
2003
2090
|
}]
|
|
2004
2091
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
|
|
2005
2092
|
type: Input
|
|
@@ -2140,18 +2227,18 @@ class BreadCrumbItemComponent {
|
|
|
2140
2227
|
}
|
|
2141
2228
|
}
|
|
2142
2229
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2143
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
2144
2231
|
<ng-template #separator>
|
|
2145
|
-
|
|
2232
|
+
<ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
|
|
2146
2233
|
</ng-template>
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2234
|
+
|
|
2235
|
+
@if (collapseMode === 'wrap') {
|
|
2236
|
+
<ng-container *ngTemplateOutlet="separator"></ng-container>
|
|
2237
|
+
}
|
|
2238
|
+
|
|
2239
|
+
@if (!item.context.collapsed) {
|
|
2240
|
+
@if (!itemTemplate) {
|
|
2153
2241
|
<span
|
|
2154
|
-
*ngIf="!itemTemplate"
|
|
2155
2242
|
[ngClass]="{
|
|
2156
2243
|
'k-breadcrumb-root-link': item.context.isFirst,
|
|
2157
2244
|
'k-breadcrumb-link': index !== 0,
|
|
@@ -2159,35 +2246,41 @@ class BreadCrumbItemComponent {
|
|
|
2159
2246
|
'k-breadcrumb-icon-link': (!!item.data.icon || !!item.data.svgIcon) && !item.data.text,
|
|
2160
2247
|
'k-disabled': disabled
|
|
2161
2248
|
}"
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
<
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2249
|
+
[title]="item.data.title || ''"
|
|
2250
|
+
[tabindex]="disabled ? -1 : 0"
|
|
2251
|
+
[attr.aria-disabled]="disabled"
|
|
2252
|
+
[attr.aria-current]="item.context.isLast ? 'page' : null"
|
|
2253
|
+
role="link"
|
|
2254
|
+
>
|
|
2255
|
+
@if (item.data.imageUrl) {
|
|
2256
|
+
<img (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
|
|
2257
|
+
}
|
|
2258
|
+
@if (item.data.icon || item.data.iconClass || item.data.svgIcon) {
|
|
2259
|
+
<kendo-icon-wrapper
|
|
2260
|
+
[name]="item.data.icon"
|
|
2261
|
+
[customFontClass]="item.data.iconClass"
|
|
2262
|
+
[svgIcon]="item.data.svgIcon"
|
|
2263
|
+
>
|
|
2174
2264
|
</kendo-icon-wrapper>
|
|
2175
|
-
|
|
2265
|
+
}
|
|
2266
|
+
<span class="k-breadcrumb-item-text">{{ item.data.text }}</span>
|
|
2176
2267
|
</span>
|
|
2268
|
+
}
|
|
2269
|
+
@if (itemTemplate) {
|
|
2177
2270
|
<ng-template
|
|
2178
|
-
|
|
2179
|
-
[ngTemplateOutlet]="itemTemplate"
|
|
2271
|
+
[ngTemplateOutlet]="itemTemplate"
|
|
2180
2272
|
[ngTemplateOutletContext]="{
|
|
2181
2273
|
$implicit: item.data,
|
|
2182
2274
|
index: index
|
|
2183
2275
|
}"
|
|
2184
2276
|
></ng-template>
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2277
|
+
}
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
@if (collapseMode !== 'wrap') {
|
|
2281
|
+
<ng-container *ngTemplateOutlet="separator"></ng-container>
|
|
2282
|
+
}
|
|
2283
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
2191
2284
|
}
|
|
2192
2285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
|
|
2193
2286
|
type: Component,
|
|
@@ -2196,16 +2289,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2196
2289
|
selector: '[kendoBreadCrumbItem]',
|
|
2197
2290
|
template: `
|
|
2198
2291
|
<ng-template #separator>
|
|
2199
|
-
|
|
2292
|
+
<ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
|
|
2200
2293
|
</ng-template>
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2294
|
+
|
|
2295
|
+
@if (collapseMode === 'wrap') {
|
|
2296
|
+
<ng-container *ngTemplateOutlet="separator"></ng-container>
|
|
2297
|
+
}
|
|
2298
|
+
|
|
2299
|
+
@if (!item.context.collapsed) {
|
|
2300
|
+
@if (!itemTemplate) {
|
|
2207
2301
|
<span
|
|
2208
|
-
*ngIf="!itemTemplate"
|
|
2209
2302
|
[ngClass]="{
|
|
2210
2303
|
'k-breadcrumb-root-link': item.context.isFirst,
|
|
2211
2304
|
'k-breadcrumb-link': index !== 0,
|
|
@@ -2213,37 +2306,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2213
2306
|
'k-breadcrumb-icon-link': (!!item.data.icon || !!item.data.svgIcon) && !item.data.text,
|
|
2214
2307
|
'k-disabled': disabled
|
|
2215
2308
|
}"
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
<
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2309
|
+
[title]="item.data.title || ''"
|
|
2310
|
+
[tabindex]="disabled ? -1 : 0"
|
|
2311
|
+
[attr.aria-disabled]="disabled"
|
|
2312
|
+
[attr.aria-current]="item.context.isLast ? 'page' : null"
|
|
2313
|
+
role="link"
|
|
2314
|
+
>
|
|
2315
|
+
@if (item.data.imageUrl) {
|
|
2316
|
+
<img (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
|
|
2317
|
+
}
|
|
2318
|
+
@if (item.data.icon || item.data.iconClass || item.data.svgIcon) {
|
|
2319
|
+
<kendo-icon-wrapper
|
|
2320
|
+
[name]="item.data.icon"
|
|
2321
|
+
[customFontClass]="item.data.iconClass"
|
|
2322
|
+
[svgIcon]="item.data.svgIcon"
|
|
2323
|
+
>
|
|
2228
2324
|
</kendo-icon-wrapper>
|
|
2229
|
-
|
|
2325
|
+
}
|
|
2326
|
+
<span class="k-breadcrumb-item-text">{{ item.data.text }}</span>
|
|
2230
2327
|
</span>
|
|
2328
|
+
}
|
|
2329
|
+
@if (itemTemplate) {
|
|
2231
2330
|
<ng-template
|
|
2232
|
-
|
|
2233
|
-
[ngTemplateOutlet]="itemTemplate"
|
|
2331
|
+
[ngTemplateOutlet]="itemTemplate"
|
|
2234
2332
|
[ngTemplateOutletContext]="{
|
|
2235
2333
|
$implicit: item.data,
|
|
2236
2334
|
index: index
|
|
2237
2335
|
}"
|
|
2238
2336
|
></ng-template>
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2337
|
+
}
|
|
2338
|
+
}
|
|
2339
|
+
|
|
2340
|
+
@if (collapseMode !== 'wrap') {
|
|
2341
|
+
<ng-container *ngTemplateOutlet="separator"></ng-container>
|
|
2342
|
+
}
|
|
2343
|
+
`,
|
|
2245
2344
|
standalone: true,
|
|
2246
|
-
imports: [
|
|
2345
|
+
imports: [NgTemplateOutlet, NgClass, IconWrapperComponent]
|
|
2247
2346
|
}]
|
|
2248
2347
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { item: [{
|
|
2249
2348
|
type: Input
|
|
@@ -2406,7 +2505,7 @@ class BreadCrumbListComponent {
|
|
|
2406
2505
|
}
|
|
2407
2506
|
}
|
|
2408
2507
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2409
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 @for (item of items; track item; let i = $index; let isFirst = $first; let isLast = $last) {\n @if (!(collapseMode === 'wrap' && isFirst) || isRootItemContainer) {\n <li\n #renderedItem\n kendoBreadCrumbItem\n [attr.data-kendo-breadcrumb-index]=\"i\"\n [item]=\"item\"\n [index]=\"i\"\n [collapseMode]=\"collapseMode\"\n [itemTemplate]=\"itemTemplate\"\n >\n @if (collapseMode === 'wrap' && !isFirst) {\n <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" [svgIcon]=\"separatorSVGIcon\"></span>\n }\n @if (collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)) {\n <span\n kendoBreadCrumbSeparator\n [icon]=\"separatorIcon\"\n [svgIcon]=\"separatorSVGIcon\"\n ></span>\n }\n </li>\n }\n }\n ", isInline: true, dependencies: [{ kind: "component", type: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { kind: "component", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }] });
|
|
2410
2509
|
}
|
|
2411
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
|
|
2412
2511
|
type: Component,
|
|
@@ -2414,29 +2513,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2414
2513
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2415
2514
|
selector: '[kendoBreadCrumbList]',
|
|
2416
2515
|
template: `
|
|
2417
|
-
|
|
2516
|
+
@for (item of items; track item; let i = $index; let isFirst = $first; let isLast = $last) {
|
|
2517
|
+
@if (!(collapseMode === 'wrap' && isFirst) || isRootItemContainer) {
|
|
2418
2518
|
<li
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
<span kendoBreadCrumbSeparator [icon]="separatorIcon" [svgIcon]="separatorSVGIcon"
|
|
2519
|
+
#renderedItem
|
|
2520
|
+
kendoBreadCrumbItem
|
|
2521
|
+
[attr.${BREADCRUMB_ITEM_INDEX}]="i"
|
|
2522
|
+
[item]="item"
|
|
2523
|
+
[index]="i"
|
|
2524
|
+
[collapseMode]="collapseMode"
|
|
2525
|
+
[itemTemplate]="itemTemplate"
|
|
2526
|
+
>
|
|
2527
|
+
@if (collapseMode === 'wrap' && !isFirst) {
|
|
2528
|
+
<span kendoBreadCrumbSeparator [icon]="separatorIcon" [svgIcon]="separatorSVGIcon"></span>
|
|
2529
|
+
}
|
|
2530
|
+
@if (collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)) {
|
|
2429
2531
|
<span
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
*ngIf="collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)"
|
|
2532
|
+
kendoBreadCrumbSeparator
|
|
2533
|
+
[icon]="separatorIcon"
|
|
2534
|
+
[svgIcon]="separatorSVGIcon"
|
|
2434
2535
|
></span>
|
|
2536
|
+
}
|
|
2435
2537
|
</li>
|
|
2436
|
-
|
|
2437
|
-
|
|
2538
|
+
}
|
|
2539
|
+
}
|
|
2540
|
+
`,
|
|
2438
2541
|
standalone: true,
|
|
2439
|
-
imports: [
|
|
2542
|
+
imports: [BreadCrumbItemComponent, BreadCrumbSeparatorDirective]
|
|
2440
2543
|
}]
|
|
2441
2544
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { items: [{
|
|
2442
2545
|
type: Input
|
|
@@ -2702,39 +2805,40 @@ class BreadCrumbComponent {
|
|
|
2702
2805
|
}));
|
|
2703
2806
|
};
|
|
2704
2807
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
2706
2809
|
LocalizationService,
|
|
2707
2810
|
{
|
|
2708
2811
|
provide: L10N_PREFIX,
|
|
2709
2812
|
useValue: 'kendo.breadcrumb'
|
|
2710
2813
|
}
|
|
2711
2814
|
], 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: `
|
|
2712
|
-
|
|
2815
|
+
@if (collapseMode === 'wrap') {
|
|
2816
|
+
<ol
|
|
2713
2817
|
#itemsContainer
|
|
2714
2818
|
kendoBreadCrumbList
|
|
2715
2819
|
class="k-breadcrumb-root-item-container"
|
|
2716
|
-
*ngIf="collapseMode === 'wrap'"
|
|
2717
2820
|
[items]="firstItem$ | async"
|
|
2718
2821
|
[itemTemplate]="itemTemplate?.templateRef"
|
|
2719
2822
|
[collapseMode]="collapseMode"
|
|
2720
2823
|
[separatorIcon]="separatorIcon"
|
|
2721
2824
|
[separatorSVGIcon]="separatorSVGIcon"
|
|
2722
2825
|
(itemClick)="itemClick.emit($event)"
|
|
2723
|
-
|
|
2826
|
+
></ol>
|
|
2827
|
+
}
|
|
2724
2828
|
<ol
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2829
|
+
#itemsContainer
|
|
2830
|
+
kendoBreadCrumbList
|
|
2831
|
+
class="k-breadcrumb-container"
|
|
2832
|
+
[items]="itemsData$ | async"
|
|
2833
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
2834
|
+
[collapseMode]="collapseMode"
|
|
2835
|
+
[separatorIcon]="separatorIcon"
|
|
2836
|
+
[separatorSVGIcon]="separatorSVGIcon"
|
|
2837
|
+
(itemClick)="itemClick.emit($event)"
|
|
2838
|
+
[ngClass]="{ '!k-flex-wrap': collapseMode === 'wrap', 'k-flex-none': collapseMode === 'none' }"
|
|
2735
2839
|
></ol>
|
|
2736
2840
|
<kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
|
|
2737
|
-
|
|
2841
|
+
`, isInline: true, dependencies: [{ 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" }] });
|
|
2738
2842
|
}
|
|
2739
2843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadCrumbComponent, decorators: [{
|
|
2740
2844
|
type: Component,
|
|
@@ -2749,34 +2853,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2749
2853
|
}
|
|
2750
2854
|
],
|
|
2751
2855
|
template: `
|
|
2752
|
-
|
|
2856
|
+
@if (collapseMode === 'wrap') {
|
|
2857
|
+
<ol
|
|
2753
2858
|
#itemsContainer
|
|
2754
2859
|
kendoBreadCrumbList
|
|
2755
2860
|
class="k-breadcrumb-root-item-container"
|
|
2756
|
-
*ngIf="collapseMode === 'wrap'"
|
|
2757
2861
|
[items]="firstItem$ | async"
|
|
2758
2862
|
[itemTemplate]="itemTemplate?.templateRef"
|
|
2759
2863
|
[collapseMode]="collapseMode"
|
|
2760
2864
|
[separatorIcon]="separatorIcon"
|
|
2761
2865
|
[separatorSVGIcon]="separatorSVGIcon"
|
|
2762
2866
|
(itemClick)="itemClick.emit($event)"
|
|
2763
|
-
|
|
2867
|
+
></ol>
|
|
2868
|
+
}
|
|
2764
2869
|
<ol
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2870
|
+
#itemsContainer
|
|
2871
|
+
kendoBreadCrumbList
|
|
2872
|
+
class="k-breadcrumb-container"
|
|
2873
|
+
[items]="itemsData$ | async"
|
|
2874
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
2875
|
+
[collapseMode]="collapseMode"
|
|
2876
|
+
[separatorIcon]="separatorIcon"
|
|
2877
|
+
[separatorSVGIcon]="separatorSVGIcon"
|
|
2878
|
+
(itemClick)="itemClick.emit($event)"
|
|
2879
|
+
[ngClass]="{ '!k-flex-wrap': collapseMode === 'wrap', 'k-flex-none': collapseMode === 'none' }"
|
|
2775
2880
|
></ol>
|
|
2776
2881
|
<kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
|
|
2777
|
-
|
|
2882
|
+
`,
|
|
2778
2883
|
standalone: true,
|
|
2779
|
-
imports: [
|
|
2884
|
+
imports: [BreadCrumbListComponent, NgClass, ResizeSensorComponent, AsyncPipe]
|
|
2780
2885
|
}]
|
|
2781
2886
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { items: [{
|
|
2782
2887
|
type: Input
|