@progress/kendo-angular-layout 21.1.1-develop.2 → 21.2.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/avatar/avatar.component.mjs +63 -59
- package/esm2022/card/card-actions.component.mjs +51 -41
- package/esm2022/drawer/drawer-container.component.mjs +10 -8
- package/esm2022/drawer/drawer.component.mjs +69 -55
- package/esm2022/drawer/item.component.mjs +79 -69
- package/esm2022/drawer/list.component.mjs +28 -25
- package/esm2022/expansionpanel/expansionpanel.component.mjs +75 -65
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/panelbar/panelbar-item.component.mjs +169 -135
- package/esm2022/panelbar/panelbar.component.mjs +56 -45
- package/esm2022/splitter/splitter-bar.component.mjs +32 -25
- package/esm2022/splitter/splitter-pane.component.mjs +16 -10
- package/esm2022/splitter/splitter.component.mjs +29 -31
- package/esm2022/stepper/list.component.mjs +33 -33
- package/esm2022/stepper/step.component.mjs +141 -111
- package/esm2022/stepper/stepper.component.mjs +59 -55
- package/esm2022/tabstrip/rendering/tab.component.mjs +49 -39
- package/esm2022/tabstrip/tabstrip.component.mjs +251 -233
- package/esm2022/tabstrip/util.mjs +1 -1
- package/esm2022/tilelayout/tilelayout-item.component.mjs +28 -23
- package/esm2022/tilelayout/tilelayout.component.mjs +24 -21
- package/esm2022/timeline/timeline-card.component.mjs +185 -151
- package/esm2022/timeline/timeline-horizontal.component.mjs +197 -183
- package/esm2022/timeline/timeline-vertical.component.mjs +79 -67
- package/esm2022/timeline/timeline.component.mjs +36 -33
- package/fesm2022/progress-kendo-angular-layout.mjs +1747 -1498
- package/package.json +9 -9
|
@@ -14,7 +14,7 @@ import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular
|
|
|
14
14
|
import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
|
|
15
15
|
import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
16
16
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
17
|
-
import {
|
|
17
|
+
import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
|
|
18
18
|
import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
|
|
19
19
|
import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
|
|
20
20
|
import { Draggable } from '@progress/kendo-draggable';
|
|
@@ -29,8 +29,8 @@ const packageMetadata = {
|
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
30
|
productCode: 'KENDOUIANGULAR',
|
|
31
31
|
productCodes: ['KENDOUIANGULAR'],
|
|
32
|
-
publishDate:
|
|
33
|
-
version: '21.
|
|
32
|
+
publishDate: 1763998234,
|
|
33
|
+
version: '21.2.0-develop.1',
|
|
34
34
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
35
35
|
};
|
|
36
36
|
|
|
@@ -608,30 +608,35 @@ class PanelBarItemComponent {
|
|
|
608
608
|
this.wrapperFocused = focused;
|
|
609
609
|
}
|
|
610
610
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
611
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
611
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelBarItemComponent, isStandalone: true, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
|
|
612
612
|
<span
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
613
|
+
#header
|
|
614
|
+
[class.k-link]="true"
|
|
615
|
+
[class.k-selected]="!disabled && selected"
|
|
616
|
+
[class.k-focus]="focused && wrapperFocused"
|
|
617
|
+
[class.k-disabled]="disabled"
|
|
618
|
+
(click)="onItemClick($event)">
|
|
619
|
+
@if (icon || iconClass || svgIcon) {
|
|
619
620
|
<kendo-icon-wrapper
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
>
|
|
621
|
+
[name]="iconClasses"
|
|
622
|
+
[customFontClass]="customIconClasses"
|
|
623
|
+
[svgIcon]="svgIcon"
|
|
624
|
+
innerCssClass="k-panelbar-item-icon"
|
|
625
|
+
>
|
|
626
626
|
</kendo-icon-wrapper>
|
|
627
|
+
}
|
|
628
|
+
@if (imageUrl) {
|
|
627
629
|
<img
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
<
|
|
634
|
-
|
|
630
|
+
class="k-image k-panelbar-item-icon"
|
|
631
|
+
[src]="imageUrl"
|
|
632
|
+
alt="">
|
|
633
|
+
}
|
|
634
|
+
@if (!titleTemplate) {
|
|
635
|
+
<span class="k-panelbar-item-text">{{title}}</span>
|
|
636
|
+
}
|
|
637
|
+
@if (titleTemplate) {
|
|
638
|
+
<ng-template
|
|
639
|
+
[ngTemplateOutlet]="titleTemplate"
|
|
635
640
|
[ngTemplateOutletContext]="{
|
|
636
641
|
item: {
|
|
637
642
|
title: title,
|
|
@@ -647,36 +652,39 @@ class PanelBarItemComponent {
|
|
|
647
652
|
content: content
|
|
648
653
|
}
|
|
649
654
|
}"></ng-template>
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
+
}
|
|
656
|
+
@if (hasChildItems || hasContent) {
|
|
657
|
+
<kendo-icon-wrapper
|
|
658
|
+
[name]="expanded ? 'chevron-up' : 'chevron-down'"
|
|
659
|
+
[svgIcon]="expanderSVGIcon"
|
|
660
|
+
[innerCssClass]="dirInnerCssClasses"
|
|
655
661
|
>
|
|
656
|
-
|
|
662
|
+
</kendo-icon-wrapper>
|
|
663
|
+
}
|
|
657
664
|
</span>
|
|
658
|
-
|
|
665
|
+
@if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
|
|
666
|
+
<div
|
|
659
667
|
#contentWrapper
|
|
660
|
-
*ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
|
|
661
668
|
[@toggle]="state"
|
|
662
669
|
[attr.role]="'group'"
|
|
663
670
|
[attr.aria-hidden]="!disabled && !expanded"
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
671
|
+
>
|
|
672
|
+
@if (hasChildItems && !items?.length) {
|
|
673
|
+
<div
|
|
667
674
|
[style.overflow]="contentOverflow"
|
|
668
675
|
[style.height]="contentHeight"
|
|
669
676
|
class="k-panelbar-group"
|
|
670
|
-
|
|
677
|
+
>
|
|
671
678
|
<ng-content select="kendo-panelbar-item"></ng-content>
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
679
|
+
</div>
|
|
680
|
+
}
|
|
681
|
+
@if (hasContent && !content) {
|
|
682
|
+
<div
|
|
675
683
|
[style.overflow]="contentOverflow"
|
|
676
684
|
[style.height]="contentHeight"
|
|
677
685
|
class="k-panelbar-content">
|
|
678
686
|
<ng-template
|
|
679
|
-
|
|
687
|
+
[ngTemplateOutlet]="contentTemplate.first.templateRef"
|
|
680
688
|
[ngTemplateOutletContext]="{
|
|
681
689
|
$implicit: {
|
|
682
690
|
title: title,
|
|
@@ -687,36 +695,41 @@ class PanelBarItemComponent {
|
|
|
687
695
|
content: content
|
|
688
696
|
}
|
|
689
697
|
}">
|
|
690
|
-
|
|
698
|
+
</ng-template>
|
|
691
699
|
</div>
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
700
|
+
}
|
|
701
|
+
@if (hasItems) {
|
|
702
|
+
<div
|
|
703
|
+
[style.overflow]="contentOverflow"
|
|
704
|
+
[style.height]="contentHeight"
|
|
705
|
+
class="k-panelbar-group">
|
|
706
|
+
@for (item of items; track item) {
|
|
707
|
+
@if (!item.hidden) {
|
|
708
|
+
<kendo-panelbar-item
|
|
709
|
+
[title]="item.title"
|
|
710
|
+
[id]="item.id"
|
|
711
|
+
[icon]="item.icon"
|
|
712
|
+
[iconClass]="item.iconClass"
|
|
713
|
+
[svgIcon]="item.svgIcon"
|
|
714
|
+
[imageUrl]="item.imageUrl"
|
|
715
|
+
[selected]="!!item.selected"
|
|
716
|
+
[expanded]="!!item.expanded"
|
|
717
|
+
[disabled]="!!item.disabled"
|
|
718
|
+
[template]="template"
|
|
719
|
+
[items]="item.children"
|
|
720
|
+
[content]="item.content">
|
|
721
|
+
</kendo-panelbar-item>
|
|
722
|
+
}
|
|
723
|
+
}
|
|
712
724
|
</div>
|
|
725
|
+
}
|
|
726
|
+
@if (content) {
|
|
713
727
|
<div
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
[ngTemplateOutlet]="template"
|
|
728
|
+
[style.overflow]="contentOverflow"
|
|
729
|
+
[style.height]="contentHeight"
|
|
730
|
+
class="k-panelbar-content">
|
|
731
|
+
<ng-template
|
|
732
|
+
[ngTemplateOutlet]="template"
|
|
720
733
|
[ngTemplateOutletContext]="{
|
|
721
734
|
$implicit: {
|
|
722
735
|
title: title,
|
|
@@ -727,10 +740,14 @@ class PanelBarItemComponent {
|
|
|
727
740
|
content: content
|
|
728
741
|
}
|
|
729
742
|
}">
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
743
|
+
</ng-template>
|
|
744
|
+
@if (!template) {
|
|
745
|
+
{{content}}
|
|
746
|
+
}
|
|
747
|
+
</div>
|
|
748
|
+
}
|
|
749
|
+
</div>
|
|
750
|
+
}`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { 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"] }], animations: [
|
|
734
751
|
trigger('toggle', [
|
|
735
752
|
state('inactive', style({ display: 'none' })),
|
|
736
753
|
transition('* => active', [
|
|
@@ -764,28 +781,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
764
781
|
selector: "kendo-panelbar-item",
|
|
765
782
|
template: `
|
|
766
783
|
<span
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
784
|
+
#header
|
|
785
|
+
[class.k-link]="true"
|
|
786
|
+
[class.k-selected]="!disabled && selected"
|
|
787
|
+
[class.k-focus]="focused && wrapperFocused"
|
|
788
|
+
[class.k-disabled]="disabled"
|
|
789
|
+
(click)="onItemClick($event)">
|
|
790
|
+
@if (icon || iconClass || svgIcon) {
|
|
773
791
|
<kendo-icon-wrapper
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
>
|
|
792
|
+
[name]="iconClasses"
|
|
793
|
+
[customFontClass]="customIconClasses"
|
|
794
|
+
[svgIcon]="svgIcon"
|
|
795
|
+
innerCssClass="k-panelbar-item-icon"
|
|
796
|
+
>
|
|
780
797
|
</kendo-icon-wrapper>
|
|
798
|
+
}
|
|
799
|
+
@if (imageUrl) {
|
|
781
800
|
<img
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
<
|
|
788
|
-
|
|
801
|
+
class="k-image k-panelbar-item-icon"
|
|
802
|
+
[src]="imageUrl"
|
|
803
|
+
alt="">
|
|
804
|
+
}
|
|
805
|
+
@if (!titleTemplate) {
|
|
806
|
+
<span class="k-panelbar-item-text">{{title}}</span>
|
|
807
|
+
}
|
|
808
|
+
@if (titleTemplate) {
|
|
809
|
+
<ng-template
|
|
810
|
+
[ngTemplateOutlet]="titleTemplate"
|
|
789
811
|
[ngTemplateOutletContext]="{
|
|
790
812
|
item: {
|
|
791
813
|
title: title,
|
|
@@ -801,36 +823,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
801
823
|
content: content
|
|
802
824
|
}
|
|
803
825
|
}"></ng-template>
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
826
|
+
}
|
|
827
|
+
@if (hasChildItems || hasContent) {
|
|
828
|
+
<kendo-icon-wrapper
|
|
829
|
+
[name]="expanded ? 'chevron-up' : 'chevron-down'"
|
|
830
|
+
[svgIcon]="expanderSVGIcon"
|
|
831
|
+
[innerCssClass]="dirInnerCssClasses"
|
|
809
832
|
>
|
|
810
|
-
|
|
833
|
+
</kendo-icon-wrapper>
|
|
834
|
+
}
|
|
811
835
|
</span>
|
|
812
|
-
|
|
836
|
+
@if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
|
|
837
|
+
<div
|
|
813
838
|
#contentWrapper
|
|
814
|
-
*ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
|
|
815
839
|
[@toggle]="state"
|
|
816
840
|
[attr.role]="'group'"
|
|
817
841
|
[attr.aria-hidden]="!disabled && !expanded"
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
842
|
+
>
|
|
843
|
+
@if (hasChildItems && !items?.length) {
|
|
844
|
+
<div
|
|
821
845
|
[style.overflow]="contentOverflow"
|
|
822
846
|
[style.height]="contentHeight"
|
|
823
847
|
class="k-panelbar-group"
|
|
824
|
-
|
|
848
|
+
>
|
|
825
849
|
<ng-content select="kendo-panelbar-item"></ng-content>
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
850
|
+
</div>
|
|
851
|
+
}
|
|
852
|
+
@if (hasContent && !content) {
|
|
853
|
+
<div
|
|
829
854
|
[style.overflow]="contentOverflow"
|
|
830
855
|
[style.height]="contentHeight"
|
|
831
856
|
class="k-panelbar-content">
|
|
832
857
|
<ng-template
|
|
833
|
-
|
|
858
|
+
[ngTemplateOutlet]="contentTemplate.first.templateRef"
|
|
834
859
|
[ngTemplateOutletContext]="{
|
|
835
860
|
$implicit: {
|
|
836
861
|
title: title,
|
|
@@ -841,36 +866,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
841
866
|
content: content
|
|
842
867
|
}
|
|
843
868
|
}">
|
|
844
|
-
|
|
869
|
+
</ng-template>
|
|
845
870
|
</div>
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
871
|
+
}
|
|
872
|
+
@if (hasItems) {
|
|
873
|
+
<div
|
|
874
|
+
[style.overflow]="contentOverflow"
|
|
875
|
+
[style.height]="contentHeight"
|
|
876
|
+
class="k-panelbar-group">
|
|
877
|
+
@for (item of items; track item) {
|
|
878
|
+
@if (!item.hidden) {
|
|
879
|
+
<kendo-panelbar-item
|
|
880
|
+
[title]="item.title"
|
|
881
|
+
[id]="item.id"
|
|
882
|
+
[icon]="item.icon"
|
|
883
|
+
[iconClass]="item.iconClass"
|
|
884
|
+
[svgIcon]="item.svgIcon"
|
|
885
|
+
[imageUrl]="item.imageUrl"
|
|
886
|
+
[selected]="!!item.selected"
|
|
887
|
+
[expanded]="!!item.expanded"
|
|
888
|
+
[disabled]="!!item.disabled"
|
|
889
|
+
[template]="template"
|
|
890
|
+
[items]="item.children"
|
|
891
|
+
[content]="item.content">
|
|
892
|
+
</kendo-panelbar-item>
|
|
893
|
+
}
|
|
894
|
+
}
|
|
866
895
|
</div>
|
|
896
|
+
}
|
|
897
|
+
@if (content) {
|
|
867
898
|
<div
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
[ngTemplateOutlet]="template"
|
|
899
|
+
[style.overflow]="contentOverflow"
|
|
900
|
+
[style.height]="contentHeight"
|
|
901
|
+
class="k-panelbar-content">
|
|
902
|
+
<ng-template
|
|
903
|
+
[ngTemplateOutlet]="template"
|
|
874
904
|
[ngTemplateOutletContext]="{
|
|
875
905
|
$implicit: {
|
|
876
906
|
title: title,
|
|
@@ -881,12 +911,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
881
911
|
content: content
|
|
882
912
|
}
|
|
883
913
|
}">
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
914
|
+
</ng-template>
|
|
915
|
+
@if (!template) {
|
|
916
|
+
{{content}}
|
|
917
|
+
}
|
|
918
|
+
</div>
|
|
919
|
+
}
|
|
920
|
+
</div>
|
|
921
|
+
}`,
|
|
888
922
|
standalone: true,
|
|
889
|
-
imports: [
|
|
923
|
+
imports: [IconWrapperComponent, NgTemplateOutlet]
|
|
890
924
|
}]
|
|
891
925
|
}], ctorParameters: () => [{ type: PanelBarItemComponent, decorators: [{
|
|
892
926
|
type: SkipSelf
|
|
@@ -1605,7 +1639,7 @@ class PanelBarComponent {
|
|
|
1605
1639
|
return flattedItems;
|
|
1606
1640
|
}
|
|
1607
1641
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1642
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelBarComponent, isStandalone: true, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
|
|
1609
1643
|
PanelBarService,
|
|
1610
1644
|
LocalizationService,
|
|
1611
1645
|
{
|
|
@@ -1613,29 +1647,35 @@ class PanelBarComponent {
|
|
|
1613
1647
|
useValue: 'kendo.panelbar'
|
|
1614
1648
|
}
|
|
1615
1649
|
], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1650
|
+
@if (contentChildItems && !items) {
|
|
1651
|
+
<ng-content select="kendo-panelbar-item"></ng-content>
|
|
1652
|
+
}
|
|
1653
|
+
@if (items?.length) {
|
|
1654
|
+
@for (item of items; track item) {
|
|
1655
|
+
@if (!item.hidden) {
|
|
1656
|
+
<kendo-panelbar-item
|
|
1657
|
+
[title]="item.title"
|
|
1658
|
+
[id]="item.id"
|
|
1659
|
+
[icon]="item.icon"
|
|
1660
|
+
[iconClass]="item.iconClass"
|
|
1661
|
+
[svgIcon]="item.svgIcon"
|
|
1662
|
+
[imageUrl]="item.imageUrl"
|
|
1663
|
+
[selected]="!!item.selected"
|
|
1664
|
+
[expanded]="!!item.expanded"
|
|
1665
|
+
[disabled]="!!item.disabled"
|
|
1666
|
+
[template]="templateRef"
|
|
1667
|
+
[items]="item.children"
|
|
1668
|
+
[content]="item.content"
|
|
1632
1669
|
>
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1670
|
+
</kendo-panelbar-item>
|
|
1671
|
+
}
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1636
1674
|
|
|
1637
|
-
|
|
1638
|
-
|
|
1675
|
+
@if (showLicenseWatermark) {
|
|
1676
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
1677
|
+
}
|
|
1678
|
+
`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
|
|
1639
1679
|
}
|
|
1640
1680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarComponent, decorators: [{
|
|
1641
1681
|
type: Component,
|
|
@@ -1651,31 +1691,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1651
1691
|
],
|
|
1652
1692
|
selector: 'kendo-panelbar',
|
|
1653
1693
|
template: `
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1694
|
+
@if (contentChildItems && !items) {
|
|
1695
|
+
<ng-content select="kendo-panelbar-item"></ng-content>
|
|
1696
|
+
}
|
|
1697
|
+
@if (items?.length) {
|
|
1698
|
+
@for (item of items; track item) {
|
|
1699
|
+
@if (!item.hidden) {
|
|
1700
|
+
<kendo-panelbar-item
|
|
1701
|
+
[title]="item.title"
|
|
1702
|
+
[id]="item.id"
|
|
1703
|
+
[icon]="item.icon"
|
|
1704
|
+
[iconClass]="item.iconClass"
|
|
1705
|
+
[svgIcon]="item.svgIcon"
|
|
1706
|
+
[imageUrl]="item.imageUrl"
|
|
1707
|
+
[selected]="!!item.selected"
|
|
1708
|
+
[expanded]="!!item.expanded"
|
|
1709
|
+
[disabled]="!!item.disabled"
|
|
1710
|
+
[template]="templateRef"
|
|
1711
|
+
[items]="item.children"
|
|
1712
|
+
[content]="item.content"
|
|
1670
1713
|
>
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1714
|
+
</kendo-panelbar-item>
|
|
1715
|
+
}
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1674
1718
|
|
|
1675
|
-
|
|
1676
|
-
|
|
1719
|
+
@if (showLicenseWatermark) {
|
|
1720
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
1721
|
+
}
|
|
1722
|
+
`,
|
|
1677
1723
|
standalone: true,
|
|
1678
|
-
imports: [
|
|
1724
|
+
imports: [PanelBarItemComponent, WatermarkOverlayComponent]
|
|
1679
1725
|
}]
|
|
1680
1726
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: PanelBarService }, { type: i1.LocalizationService }], propDecorators: { expandMode: [{
|
|
1681
1727
|
type: Input
|
|
@@ -2225,10 +2271,14 @@ class SplitterPaneComponent {
|
|
|
2225
2271
|
}
|
|
2226
2272
|
}
|
|
2227
2273
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: SplitterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2228
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2274
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], usesOnChanges: true, ngImport: i0, template: `
|
|
2275
|
+
@if (!collapsed) {
|
|
2276
|
+
<ng-content></ng-content>
|
|
2277
|
+
}
|
|
2278
|
+
@if (overlayContent) {
|
|
2279
|
+
<div class="k-splitter-overlay k-overlay"></div>
|
|
2280
|
+
}
|
|
2281
|
+
`, isInline: true });
|
|
2232
2282
|
}
|
|
2233
2283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, decorators: [{
|
|
2234
2284
|
type: Component,
|
|
@@ -2236,11 +2286,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2236
2286
|
exportAs: 'kendoSplitterPane',
|
|
2237
2287
|
selector: 'kendo-splitter-pane',
|
|
2238
2288
|
template: `
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2289
|
+
@if (!collapsed) {
|
|
2290
|
+
<ng-content></ng-content>
|
|
2291
|
+
}
|
|
2292
|
+
@if (overlayContent) {
|
|
2293
|
+
<div class="k-splitter-overlay k-overlay"></div>
|
|
2294
|
+
}
|
|
2295
|
+
`,
|
|
2296
|
+
standalone: true
|
|
2244
2297
|
}]
|
|
2245
2298
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: SplitterService }], propDecorators: { order: [{
|
|
2246
2299
|
type: Input
|
|
@@ -2521,47 +2574,55 @@ class SplitterBarComponent {
|
|
|
2521
2574
|
setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
|
|
2522
2575
|
}
|
|
2523
2576
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2525
|
-
|
|
2577
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
|
|
2578
|
+
@if (shouldShowIcon('prev')) {
|
|
2579
|
+
<div class="k-collapse-prev" (click)="togglePrevious()">
|
|
2526
2580
|
<kendo-icon-wrapper
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2581
|
+
size="xsmall"
|
|
2582
|
+
[name]="previousArrowClass()"
|
|
2583
|
+
[svgIcon]="previousSVGArrowClass()"
|
|
2530
2584
|
></kendo-icon-wrapper>
|
|
2531
|
-
|
|
2585
|
+
</div>
|
|
2586
|
+
}
|
|
2532
2587
|
<div class="k-resize-handle"></div>
|
|
2533
|
-
|
|
2588
|
+
@if (shouldShowIcon('next')) {
|
|
2589
|
+
<div class="k-collapse-next" (click)="toggleNext()">
|
|
2534
2590
|
<kendo-icon-wrapper
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2591
|
+
size="xsmall"
|
|
2592
|
+
[name]="nextArrowClass()"
|
|
2593
|
+
[svgIcon]="nextSVGArrowClass()"
|
|
2538
2594
|
></kendo-icon-wrapper>
|
|
2539
|
-
|
|
2540
|
-
|
|
2595
|
+
</div>
|
|
2596
|
+
}
|
|
2597
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
2541
2598
|
}
|
|
2542
2599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterBarComponent, decorators: [{
|
|
2543
2600
|
type: Component,
|
|
2544
2601
|
args: [{
|
|
2545
2602
|
selector: 'kendo-splitter-bar',
|
|
2546
2603
|
template: `
|
|
2547
|
-
|
|
2604
|
+
@if (shouldShowIcon('prev')) {
|
|
2605
|
+
<div class="k-collapse-prev" (click)="togglePrevious()">
|
|
2548
2606
|
<kendo-icon-wrapper
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2607
|
+
size="xsmall"
|
|
2608
|
+
[name]="previousArrowClass()"
|
|
2609
|
+
[svgIcon]="previousSVGArrowClass()"
|
|
2552
2610
|
></kendo-icon-wrapper>
|
|
2553
|
-
|
|
2611
|
+
</div>
|
|
2612
|
+
}
|
|
2554
2613
|
<div class="k-resize-handle"></div>
|
|
2555
|
-
|
|
2614
|
+
@if (shouldShowIcon('next')) {
|
|
2615
|
+
<div class="k-collapse-next" (click)="toggleNext()">
|
|
2556
2616
|
<kendo-icon-wrapper
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2617
|
+
size="xsmall"
|
|
2618
|
+
[name]="nextArrowClass()"
|
|
2619
|
+
[svgIcon]="nextSVGArrowClass()"
|
|
2560
2620
|
></kendo-icon-wrapper>
|
|
2561
|
-
|
|
2562
|
-
|
|
2621
|
+
</div>
|
|
2622
|
+
}
|
|
2623
|
+
`,
|
|
2563
2624
|
standalone: true,
|
|
2564
|
-
imports: [
|
|
2625
|
+
imports: [IconWrapperComponent]
|
|
2565
2626
|
}]
|
|
2566
2627
|
}], ctorParameters: () => [{ type: i1$1.DraggableDirective, decorators: [{
|
|
2567
2628
|
type: Host
|
|
@@ -2778,7 +2839,7 @@ class SplitterComponent {
|
|
|
2778
2839
|
this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
|
|
2779
2840
|
}
|
|
2780
2841
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2781
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2842
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
|
|
2782
2843
|
SplitterService,
|
|
2783
2844
|
LocalizationService,
|
|
2784
2845
|
{
|
|
@@ -2787,24 +2848,23 @@ class SplitterComponent {
|
|
|
2787
2848
|
}
|
|
2788
2849
|
], queries: [{ propertyName: "panes", predicate: SplitterPaneComponent }], viewQueries: [{ propertyName: "splitbars", predicate: SplitterBarComponent, descendants: true }], exportAs: ["kendoSplitter"], usesOnChanges: true, ngImport: i0, template: `
|
|
2789
2850
|
<ng-content select="kendo-splitter-pane"></ng-content>
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
let index = index;
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
[orientation]="orientation"
|
|
2800
|
-
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
2851
|
+
@for (
|
|
2852
|
+
pane of panes; track
|
|
2853
|
+
pane; let index = $index; let last = $last) {
|
|
2854
|
+
@if (!last) {
|
|
2855
|
+
<kendo-splitter-bar
|
|
2856
|
+
kendoDraggable
|
|
2857
|
+
[index]="index"
|
|
2858
|
+
[orientation]="orientation"
|
|
2859
|
+
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
2801
2860
|
[ngStyle]="{
|
|
2802
2861
|
width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
|
|
2803
2862
|
height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
|
|
2804
2863
|
}">
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2864
|
+
</kendo-splitter-bar>
|
|
2865
|
+
}
|
|
2866
|
+
}
|
|
2867
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2808
2868
|
}
|
|
2809
2869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, decorators: [{
|
|
2810
2870
|
type: Component,
|
|
@@ -2821,26 +2881,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2821
2881
|
],
|
|
2822
2882
|
template: `
|
|
2823
2883
|
<ng-content select="kendo-splitter-pane"></ng-content>
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
let index = index;
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
[orientation]="orientation"
|
|
2834
|
-
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
2884
|
+
@for (
|
|
2885
|
+
pane of panes; track
|
|
2886
|
+
pane; let index = $index; let last = $last) {
|
|
2887
|
+
@if (!last) {
|
|
2888
|
+
<kendo-splitter-bar
|
|
2889
|
+
kendoDraggable
|
|
2890
|
+
[index]="index"
|
|
2891
|
+
[orientation]="orientation"
|
|
2892
|
+
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
2835
2893
|
[ngStyle]="{
|
|
2836
2894
|
width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
|
|
2837
2895
|
height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
|
|
2838
2896
|
}">
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2897
|
+
</kendo-splitter-bar>
|
|
2898
|
+
}
|
|
2899
|
+
}
|
|
2900
|
+
`,
|
|
2842
2901
|
standalone: true,
|
|
2843
|
-
imports: [
|
|
2902
|
+
imports: [SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
|
|
2844
2903
|
}]
|
|
2845
2904
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: SplitterPaneComponent, decorators: [{
|
|
2846
2905
|
type: Optional
|
|
@@ -3156,7 +3215,7 @@ class SelectEvent extends PreventableEvent$1 {
|
|
|
3156
3215
|
*/
|
|
3157
3216
|
const isTabElement = (target) => {
|
|
3158
3217
|
const targetId = target.getAttribute('id');
|
|
3159
|
-
if (isPresent(targetId) || targetId
|
|
3218
|
+
if (isPresent(targetId) || targetId?.indexOf('k-tabstrip-tab-') >= 0) {
|
|
3160
3219
|
return true;
|
|
3161
3220
|
}
|
|
3162
3221
|
return false;
|
|
@@ -3858,28 +3917,33 @@ class TabComponent {
|
|
|
3858
3917
|
this.tabClose.emit(closeArgs);
|
|
3859
3918
|
}
|
|
3860
3919
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3920
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
|
|
3921
|
+
@if (!tab.tabTemplate) {
|
|
3922
|
+
@if (!tab.tabTitle) {
|
|
3923
|
+
<span class="k-link">
|
|
3924
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
3865
3925
|
</span>
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3926
|
+
}
|
|
3927
|
+
@if (tab.tabTitle) {
|
|
3928
|
+
<span class="k-link">
|
|
3929
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
3930
|
+
</ng-template>
|
|
3869
3931
|
</span>
|
|
3870
|
-
|
|
3932
|
+
}
|
|
3933
|
+
} @else {
|
|
3934
|
+
<ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
|
|
3935
|
+
</ng-template>
|
|
3936
|
+
}
|
|
3871
3937
|
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
</span>
|
|
3882
|
-
`, 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"] }] });
|
|
3938
|
+
@if (tabClosable) {
|
|
3939
|
+
<span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
|
|
3940
|
+
(click)="closeTab(index)" [title]="closeButtonTitle">
|
|
3941
|
+
<kendo-icon-wrapper
|
|
3942
|
+
[svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
|
|
3943
|
+
innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
|
|
3944
|
+
</span>
|
|
3945
|
+
}
|
|
3946
|
+
`, 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"] }] });
|
|
3883
3947
|
}
|
|
3884
3948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
|
|
3885
3949
|
type: Component,
|
|
@@ -3887,29 +3951,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3887
3951
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
3888
3952
|
selector: '[kendoTabStripTab]',
|
|
3889
3953
|
template: `
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
3954
|
+
@if (!tab.tabTemplate) {
|
|
3955
|
+
@if (!tab.tabTitle) {
|
|
3956
|
+
<span class="k-link">
|
|
3957
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
3893
3958
|
</span>
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
|
|
3959
|
+
}
|
|
3960
|
+
@if (tab.tabTitle) {
|
|
3961
|
+
<span class="k-link">
|
|
3962
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
3963
|
+
</ng-template>
|
|
3897
3964
|
</span>
|
|
3898
|
-
|
|
3965
|
+
}
|
|
3966
|
+
} @else {
|
|
3967
|
+
<ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
|
|
3968
|
+
</ng-template>
|
|
3969
|
+
}
|
|
3899
3970
|
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
</span>
|
|
3910
|
-
`,
|
|
3971
|
+
@if (tabClosable) {
|
|
3972
|
+
<span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
|
|
3973
|
+
(click)="closeTab(index)" [title]="closeButtonTitle">
|
|
3974
|
+
<kendo-icon-wrapper
|
|
3975
|
+
[svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
|
|
3976
|
+
innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
|
|
3977
|
+
</span>
|
|
3978
|
+
}
|
|
3979
|
+
`,
|
|
3911
3980
|
standalone: true,
|
|
3912
|
-
imports: [
|
|
3981
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
3913
3982
|
}]
|
|
3914
3983
|
}], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { tab: [{
|
|
3915
3984
|
type: Input
|
|
@@ -4492,7 +4561,7 @@ class TabStripComponent {
|
|
|
4492
4561
|
}
|
|
4493
4562
|
}
|
|
4494
4563
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
4495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
|
|
4496
4565
|
TabStripService,
|
|
4497
4566
|
ScrollService,
|
|
4498
4567
|
LocalizationService,
|
|
@@ -4502,67 +4571,69 @@ class TabStripComponent {
|
|
|
4502
4571
|
}
|
|
4503
4572
|
], queries: [{ propertyName: "tabs", predicate: TabStripTabComponent }], viewQueries: [{ propertyName: "tablist", first: true, predicate: ["tablist"], descendants: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true }, { propertyName: "tabHeaderContainers", predicate: ["tabHeaderContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoTabStrip"], usesOnChanges: true, ngImport: i0, template: `
|
|
4504
4573
|
<ng-container kendoTabStripLocalizedMessages
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
</ng-container>
|
|
4515
|
-
<ng-container *ngIf="!tabsAtBottom">
|
|
4516
|
-
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4517
|
-
<ng-container *ngIf="showContentArea">
|
|
4518
|
-
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4519
|
-
</ng-container>
|
|
4520
|
-
</ng-container>
|
|
4521
|
-
|
|
4522
|
-
<ng-container *ngIf="tabsAtBottom">
|
|
4523
|
-
<ng-container *ngIf="showContentArea">
|
|
4524
|
-
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4525
|
-
</ng-container>
|
|
4526
|
-
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4574
|
+
i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
|
|
4575
|
+
closeTitle="Close"
|
|
4576
|
+
|
|
4577
|
+
i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
|
|
4578
|
+
previousTabButton="Previous Tab"
|
|
4579
|
+
|
|
4580
|
+
i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
|
|
4581
|
+
nextTabButton="Next Tab"
|
|
4582
|
+
>
|
|
4527
4583
|
</ng-container>
|
|
4584
|
+
@if (!tabsAtBottom) {
|
|
4585
|
+
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4586
|
+
@if (showContentArea) {
|
|
4587
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4588
|
+
}
|
|
4589
|
+
}
|
|
4590
|
+
|
|
4591
|
+
@if (tabsAtBottom) {
|
|
4592
|
+
@if (showContentArea) {
|
|
4593
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4594
|
+
}
|
|
4595
|
+
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4596
|
+
}
|
|
4528
4597
|
<ng-template #heading>
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4598
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
4599
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position !== 'end') {
|
|
4600
|
+
<span
|
|
4601
|
+
role="button"
|
|
4602
|
+
#prevScrollButton
|
|
4603
|
+
kendoTabStripScrollableButton
|
|
4604
|
+
[scrollable]="scrollable"
|
|
4605
|
+
[tabPosition]="tabPosition"
|
|
4606
|
+
[prev]="true"
|
|
4607
|
+
[title]="localization.get('previousTabButton')"
|
|
4608
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4609
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4541
4610
|
[ngClass]="{
|
|
4542
4611
|
'k-button-sm': size === 'small',
|
|
4543
4612
|
'k-button-md': size === 'medium' || !size,
|
|
4544
4613
|
'k-button-lg': size === 'large'
|
|
4545
4614
|
}"
|
|
4546
|
-
|
|
4547
|
-
|
|
4548
|
-
|
|
4549
|
-
|
|
4550
|
-
|
|
4551
|
-
|
|
4552
|
-
|
|
4553
|
-
|
|
4554
|
-
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
|
|
4615
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4616
|
+
}
|
|
4617
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position === 'start') {
|
|
4618
|
+
<span
|
|
4619
|
+
role="button"
|
|
4620
|
+
#nextScrollButton
|
|
4621
|
+
kendoTabStripScrollableButton
|
|
4622
|
+
[scrollable]="scrollable"
|
|
4623
|
+
[tabPosition]="tabPosition"
|
|
4624
|
+
[prev]="false"
|
|
4625
|
+
[title]="localization.get('nextTabButton')"
|
|
4626
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4627
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4558
4628
|
[ngClass]="{
|
|
4559
4629
|
'k-button-sm': size === 'small',
|
|
4560
4630
|
'k-button-md': size === 'medium' || !size,
|
|
4561
4631
|
'k-button-lg': size === 'large'
|
|
4562
4632
|
}"
|
|
4563
|
-
|
|
4564
|
-
|
|
4565
|
-
|
|
4633
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4634
|
+
}
|
|
4635
|
+
<ul role="tablist" #tablist
|
|
4636
|
+
class="k-reset k-tabstrip-items"
|
|
4566
4637
|
[ngClass]="{
|
|
4567
4638
|
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
4568
4639
|
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
@@ -4571,86 +4642,93 @@ class TabStripComponent {
|
|
|
4571
4642
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
4572
4643
|
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
4573
4644
|
}"
|
|
4574
|
-
|
|
4575
|
-
|
|
4576
|
-
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4605
|
-
|
|
4606
|
-
|
|
4607
|
-
|
|
4645
|
+
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4646
|
+
>
|
|
4647
|
+
@for (tab of tabs; track tab; let i = $index) {
|
|
4648
|
+
<li
|
|
4649
|
+
#tabHeaderContainer
|
|
4650
|
+
kendoTabStripTab
|
|
4651
|
+
[class.k-first]="i === 0"
|
|
4652
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4653
|
+
[ngClass]="tab.cssClass"
|
|
4654
|
+
[ngStyle]="tab.cssStyle"
|
|
4655
|
+
[tab]="tab"
|
|
4656
|
+
[index]="i"
|
|
4657
|
+
role="tab"
|
|
4658
|
+
[tabStripClosable]="closable"
|
|
4659
|
+
[tabStripCloseIcon]="closeIcon"
|
|
4660
|
+
[customTabstripCloseIcon]="closeIconClass"
|
|
4661
|
+
[closeSVGIcon]="closeSVGIcon"
|
|
4662
|
+
(tabClose)="tabClose.emit($event)"
|
|
4663
|
+
(click)="onTabClick($event, i)"
|
|
4664
|
+
[id]="getTabId(i)"
|
|
4665
|
+
[attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
|
|
4666
|
+
}
|
|
4667
|
+
</ul>
|
|
4668
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
|
|
4669
|
+
<span
|
|
4670
|
+
role="button"
|
|
4671
|
+
#prevScrollButton
|
|
4672
|
+
kendoTabStripScrollableButton
|
|
4673
|
+
[scrollable]="scrollable"
|
|
4674
|
+
[tabPosition]="tabPosition"
|
|
4675
|
+
[prev]="true"
|
|
4676
|
+
[title]="localization.get('previousTabButton')"
|
|
4677
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4678
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4608
4679
|
[ngClass]="{
|
|
4609
4680
|
'k-button-sm': size === 'small',
|
|
4610
4681
|
'k-button-md': size === 'medium' || !size,
|
|
4611
4682
|
'k-button-lg': size === 'large'
|
|
4612
4683
|
}"
|
|
4613
|
-
|
|
4614
|
-
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
|
|
4623
|
-
|
|
4624
|
-
|
|
4684
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4685
|
+
}
|
|
4686
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position !== 'start') {
|
|
4687
|
+
<span
|
|
4688
|
+
role="button"
|
|
4689
|
+
#nextScrollButton
|
|
4690
|
+
kendoTabStripScrollableButton
|
|
4691
|
+
[scrollable]="scrollable"
|
|
4692
|
+
[tabPosition]="tabPosition"
|
|
4693
|
+
[prev]="false"
|
|
4694
|
+
[title]="localization.get('nextTabButton')"
|
|
4695
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4696
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4625
4697
|
[ngClass]="{
|
|
4626
4698
|
'k-button-sm': size === 'small',
|
|
4627
4699
|
'k-button-md': size === 'medium' || !size,
|
|
4628
4700
|
'k-button-lg': size === 'large'
|
|
4629
4701
|
}"
|
|
4630
|
-
|
|
4631
|
-
|
|
4702
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4703
|
+
}
|
|
4704
|
+
</div>
|
|
4632
4705
|
</ng-template>
|
|
4633
4706
|
<ng-template #content>
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4643
|
-
|
|
4644
|
-
|
|
4707
|
+
@for (tab of tabs; track tab; let i = $index) {
|
|
4708
|
+
@if (tab.selected || keepTabContent) {
|
|
4709
|
+
<div
|
|
4710
|
+
[@state]="tab.selected && animate ? 'active' : 'inactive'"
|
|
4711
|
+
[ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
|
|
4712
|
+
[tabIndex]="0"
|
|
4713
|
+
role="tabpanel"
|
|
4714
|
+
[id]="getTabPanelId(i)"
|
|
4715
|
+
[attr.aria-hidden]="!tab.selected"
|
|
4716
|
+
[attr.aria-labelledby]="getTabId(i)"
|
|
4717
|
+
[attr.aria-disabled]="tab.disabled"
|
|
4645
4718
|
>
|
|
4646
|
-
|
|
4647
|
-
|
|
4648
|
-
|
|
4649
|
-
|
|
4719
|
+
<ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
|
|
4720
|
+
</ng-template>
|
|
4721
|
+
</div>
|
|
4722
|
+
}
|
|
4723
|
+
}
|
|
4650
4724
|
</ng-template>
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
|
|
4725
|
+
@if (isScrollable) {
|
|
4726
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
4727
|
+
}
|
|
4728
|
+
@if (showLicenseWatermark) {
|
|
4729
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
4730
|
+
}
|
|
4731
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }], animations: [
|
|
4654
4732
|
trigger('state', [
|
|
4655
4733
|
state('active', style({ opacity: 1 })),
|
|
4656
4734
|
transition('* => active', [
|
|
@@ -4685,67 +4763,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
4685
4763
|
selector: 'kendo-tabstrip',
|
|
4686
4764
|
template: `
|
|
4687
4765
|
<ng-container kendoTabStripLocalizedMessages
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
</ng-container>
|
|
4698
|
-
<ng-container *ngIf="!tabsAtBottom">
|
|
4699
|
-
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4700
|
-
<ng-container *ngIf="showContentArea">
|
|
4701
|
-
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4702
|
-
</ng-container>
|
|
4703
|
-
</ng-container>
|
|
4704
|
-
|
|
4705
|
-
<ng-container *ngIf="tabsAtBottom">
|
|
4706
|
-
<ng-container *ngIf="showContentArea">
|
|
4707
|
-
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4708
|
-
</ng-container>
|
|
4709
|
-
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4766
|
+
i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
|
|
4767
|
+
closeTitle="Close"
|
|
4768
|
+
|
|
4769
|
+
i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
|
|
4770
|
+
previousTabButton="Previous Tab"
|
|
4771
|
+
|
|
4772
|
+
i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
|
|
4773
|
+
nextTabButton="Next Tab"
|
|
4774
|
+
>
|
|
4710
4775
|
</ng-container>
|
|
4776
|
+
@if (!tabsAtBottom) {
|
|
4777
|
+
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4778
|
+
@if (showContentArea) {
|
|
4779
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4780
|
+
}
|
|
4781
|
+
}
|
|
4782
|
+
|
|
4783
|
+
@if (tabsAtBottom) {
|
|
4784
|
+
@if (showContentArea) {
|
|
4785
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
4786
|
+
}
|
|
4787
|
+
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4788
|
+
}
|
|
4711
4789
|
<ng-template #heading>
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
4723
|
-
|
|
4790
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
4791
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position !== 'end') {
|
|
4792
|
+
<span
|
|
4793
|
+
role="button"
|
|
4794
|
+
#prevScrollButton
|
|
4795
|
+
kendoTabStripScrollableButton
|
|
4796
|
+
[scrollable]="scrollable"
|
|
4797
|
+
[tabPosition]="tabPosition"
|
|
4798
|
+
[prev]="true"
|
|
4799
|
+
[title]="localization.get('previousTabButton')"
|
|
4800
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4801
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4724
4802
|
[ngClass]="{
|
|
4725
4803
|
'k-button-sm': size === 'small',
|
|
4726
4804
|
'k-button-md': size === 'medium' || !size,
|
|
4727
4805
|
'k-button-lg': size === 'large'
|
|
4728
4806
|
}"
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4807
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4808
|
+
}
|
|
4809
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position === 'start') {
|
|
4810
|
+
<span
|
|
4811
|
+
role="button"
|
|
4812
|
+
#nextScrollButton
|
|
4813
|
+
kendoTabStripScrollableButton
|
|
4814
|
+
[scrollable]="scrollable"
|
|
4815
|
+
[tabPosition]="tabPosition"
|
|
4816
|
+
[prev]="false"
|
|
4817
|
+
[title]="localization.get('nextTabButton')"
|
|
4818
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4819
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4741
4820
|
[ngClass]="{
|
|
4742
4821
|
'k-button-sm': size === 'small',
|
|
4743
4822
|
'k-button-md': size === 'medium' || !size,
|
|
4744
4823
|
'k-button-lg': size === 'large'
|
|
4745
4824
|
}"
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4825
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4826
|
+
}
|
|
4827
|
+
<ul role="tablist" #tablist
|
|
4828
|
+
class="k-reset k-tabstrip-items"
|
|
4749
4829
|
[ngClass]="{
|
|
4750
4830
|
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
4751
4831
|
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
@@ -4754,88 +4834,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
4754
4834
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
4755
4835
|
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
4756
4836
|
}"
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4837
|
+
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4838
|
+
>
|
|
4839
|
+
@for (tab of tabs; track tab; let i = $index) {
|
|
4840
|
+
<li
|
|
4841
|
+
#tabHeaderContainer
|
|
4842
|
+
kendoTabStripTab
|
|
4843
|
+
[class.k-first]="i === 0"
|
|
4844
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4845
|
+
[ngClass]="tab.cssClass"
|
|
4846
|
+
[ngStyle]="tab.cssStyle"
|
|
4847
|
+
[tab]="tab"
|
|
4848
|
+
[index]="i"
|
|
4849
|
+
role="tab"
|
|
4850
|
+
[tabStripClosable]="closable"
|
|
4851
|
+
[tabStripCloseIcon]="closeIcon"
|
|
4852
|
+
[customTabstripCloseIcon]="closeIconClass"
|
|
4853
|
+
[closeSVGIcon]="closeSVGIcon"
|
|
4854
|
+
(tabClose)="tabClose.emit($event)"
|
|
4855
|
+
(click)="onTabClick($event, i)"
|
|
4856
|
+
[id]="getTabId(i)"
|
|
4857
|
+
[attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
|
|
4858
|
+
}
|
|
4859
|
+
</ul>
|
|
4860
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
|
|
4861
|
+
<span
|
|
4862
|
+
role="button"
|
|
4863
|
+
#prevScrollButton
|
|
4864
|
+
kendoTabStripScrollableButton
|
|
4865
|
+
[scrollable]="scrollable"
|
|
4866
|
+
[tabPosition]="tabPosition"
|
|
4867
|
+
[prev]="true"
|
|
4868
|
+
[title]="localization.get('previousTabButton')"
|
|
4869
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4870
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4791
4871
|
[ngClass]="{
|
|
4792
4872
|
'k-button-sm': size === 'small',
|
|
4793
4873
|
'k-button-md': size === 'medium' || !size,
|
|
4794
4874
|
'k-button-lg': size === 'large'
|
|
4795
4875
|
}"
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4876
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4877
|
+
}
|
|
4878
|
+
@if (hasScrollButtons.visible && hasScrollButtons.position !== 'start') {
|
|
4879
|
+
<span
|
|
4880
|
+
role="button"
|
|
4881
|
+
#nextScrollButton
|
|
4882
|
+
kendoTabStripScrollableButton
|
|
4883
|
+
[scrollable]="scrollable"
|
|
4884
|
+
[tabPosition]="tabPosition"
|
|
4885
|
+
[prev]="false"
|
|
4886
|
+
[title]="localization.get('nextTabButton')"
|
|
4887
|
+
(tabScroll)="tabScroll.emit($event)"
|
|
4888
|
+
class="k-icon-button k-button k-button-flat k-button-flat-base"
|
|
4808
4889
|
[ngClass]="{
|
|
4809
4890
|
'k-button-sm': size === 'small',
|
|
4810
4891
|
'k-button-md': size === 'medium' || !size,
|
|
4811
4892
|
'k-button-lg': size === 'large'
|
|
4812
4893
|
}"
|
|
4813
|
-
|
|
4814
|
-
|
|
4894
|
+
(onClick)="onScrollButtonClick($event)"></span>
|
|
4895
|
+
}
|
|
4896
|
+
</div>
|
|
4815
4897
|
</ng-template>
|
|
4816
4898
|
<ng-template #content>
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4899
|
+
@for (tab of tabs; track tab; let i = $index) {
|
|
4900
|
+
@if (tab.selected || keepTabContent) {
|
|
4901
|
+
<div
|
|
4902
|
+
[@state]="tab.selected && animate ? 'active' : 'inactive'"
|
|
4903
|
+
[ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
|
|
4904
|
+
[tabIndex]="0"
|
|
4905
|
+
role="tabpanel"
|
|
4906
|
+
[id]="getTabPanelId(i)"
|
|
4907
|
+
[attr.aria-hidden]="!tab.selected"
|
|
4908
|
+
[attr.aria-labelledby]="getTabId(i)"
|
|
4909
|
+
[attr.aria-disabled]="tab.disabled"
|
|
4828
4910
|
>
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4911
|
+
<ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
|
|
4912
|
+
</ng-template>
|
|
4913
|
+
</div>
|
|
4914
|
+
}
|
|
4915
|
+
}
|
|
4833
4916
|
</ng-template>
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4917
|
+
@if (isScrollable) {
|
|
4918
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
4919
|
+
}
|
|
4920
|
+
@if (showLicenseWatermark) {
|
|
4921
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
4922
|
+
}
|
|
4923
|
+
`,
|
|
4837
4924
|
standalone: true,
|
|
4838
|
-
imports: [LocalizedTabStripMessagesDirective,
|
|
4925
|
+
imports: [LocalizedTabStripMessagesDirective, NgTemplateOutlet, NgClass, TabStripScrollableButtonComponent, TabComponent, NgStyle, ResizeSensorComponent, WatermarkOverlayComponent]
|
|
4839
4926
|
}]
|
|
4840
4927
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TabStripService }, { type: ScrollService }, { type: i0.NgZone }], propDecorators: { height: [{
|
|
4841
4928
|
type: Input
|
|
@@ -5438,8 +5525,9 @@ class DrawerItemComponent {
|
|
|
5438
5525
|
return this.viewItem.item;
|
|
5439
5526
|
}
|
|
5440
5527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerItemComponent, deps: [{ token: DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
5441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5442
|
-
|
|
5528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerItemComponent, isStandalone: true, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
|
|
5529
|
+
@if (itemTemplate) {
|
|
5530
|
+
<ng-template
|
|
5443
5531
|
[ngTemplateOutlet]="itemTemplate"
|
|
5444
5532
|
[ngTemplateOutletContext]="{
|
|
5445
5533
|
$implicit: item,
|
|
@@ -5447,41 +5535,45 @@ class DrawerItemComponent {
|
|
|
5447
5535
|
hasChildren: viewItem.hasChildren,
|
|
5448
5536
|
level: viewItem.level
|
|
5449
5537
|
}">
|
|
5450
|
-
|
|
5451
|
-
|
|
5452
|
-
|
|
5453
|
-
|
|
5454
|
-
|
|
5455
|
-
|
|
5456
|
-
|
|
5457
|
-
|
|
5458
|
-
|
|
5459
|
-
[innerCssClass]="innerCssClasses"
|
|
5538
|
+
</ng-template>
|
|
5539
|
+
} @else {
|
|
5540
|
+
@if (expanded) {
|
|
5541
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
5542
|
+
<kendo-icon-wrapper
|
|
5543
|
+
[name]="iconClasses"
|
|
5544
|
+
[customFontClass]="customIconClasses"
|
|
5545
|
+
[svgIcon]="item.svgIcon"
|
|
5546
|
+
[innerCssClass]="innerCssClasses"
|
|
5460
5547
|
>
|
|
5461
|
-
|
|
5462
|
-
|
|
5463
|
-
|
|
5464
|
-
|
|
5465
|
-
|
|
5466
|
-
|
|
5467
|
-
|
|
5468
|
-
|
|
5469
|
-
|
|
5548
|
+
</kendo-icon-wrapper>
|
|
5549
|
+
}
|
|
5550
|
+
<span class="k-item-text">{{ item.text }}</span>
|
|
5551
|
+
@if (viewItem.hasChildren) {
|
|
5552
|
+
<span class="k-spacer"></span>
|
|
5553
|
+
}
|
|
5554
|
+
@if (viewItem.hasChildren) {
|
|
5555
|
+
<kendo-icon-wrapper
|
|
5556
|
+
[name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
|
|
5557
|
+
innerCssClass="k-drawer-toggle"
|
|
5558
|
+
[svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
|
|
5470
5559
|
>
|
|
5471
|
-
|
|
5472
|
-
|
|
5473
|
-
|
|
5474
|
-
|
|
5475
|
-
|
|
5476
|
-
|
|
5477
|
-
|
|
5478
|
-
|
|
5479
|
-
|
|
5560
|
+
</kendo-icon-wrapper>
|
|
5561
|
+
}
|
|
5562
|
+
}
|
|
5563
|
+
@if (mini && !expanded) {
|
|
5564
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
5565
|
+
<kendo-icon-wrapper
|
|
5566
|
+
[name]="iconClasses"
|
|
5567
|
+
[customFontClass]="customIconClasses"
|
|
5568
|
+
[svgIcon]="item.svgIcon"
|
|
5569
|
+
[innerCssClass]="innerCssClasses"
|
|
5480
5570
|
>
|
|
5481
|
-
|
|
5482
|
-
|
|
5483
|
-
|
|
5484
|
-
|
|
5571
|
+
</kendo-icon-wrapper>
|
|
5572
|
+
}
|
|
5573
|
+
}
|
|
5574
|
+
}
|
|
5575
|
+
|
|
5576
|
+
`, 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"] }] });
|
|
5485
5577
|
}
|
|
5486
5578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerItemComponent, decorators: [{
|
|
5487
5579
|
type: Component,
|
|
@@ -5489,7 +5581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5489
5581
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
5490
5582
|
selector: '[kendoDrawerItem]',
|
|
5491
5583
|
template: `
|
|
5492
|
-
|
|
5584
|
+
@if (itemTemplate) {
|
|
5585
|
+
<ng-template
|
|
5493
5586
|
[ngTemplateOutlet]="itemTemplate"
|
|
5494
5587
|
[ngTemplateOutletContext]="{
|
|
5495
5588
|
$implicit: item,
|
|
@@ -5497,43 +5590,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5497
5590
|
hasChildren: viewItem.hasChildren,
|
|
5498
5591
|
level: viewItem.level
|
|
5499
5592
|
}">
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
|
|
5503
|
-
|
|
5504
|
-
|
|
5505
|
-
|
|
5506
|
-
|
|
5507
|
-
|
|
5508
|
-
|
|
5509
|
-
[innerCssClass]="innerCssClasses"
|
|
5593
|
+
</ng-template>
|
|
5594
|
+
} @else {
|
|
5595
|
+
@if (expanded) {
|
|
5596
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
5597
|
+
<kendo-icon-wrapper
|
|
5598
|
+
[name]="iconClasses"
|
|
5599
|
+
[customFontClass]="customIconClasses"
|
|
5600
|
+
[svgIcon]="item.svgIcon"
|
|
5601
|
+
[innerCssClass]="innerCssClasses"
|
|
5510
5602
|
>
|
|
5511
|
-
|
|
5512
|
-
|
|
5513
|
-
|
|
5514
|
-
|
|
5515
|
-
|
|
5516
|
-
|
|
5517
|
-
|
|
5518
|
-
|
|
5519
|
-
|
|
5603
|
+
</kendo-icon-wrapper>
|
|
5604
|
+
}
|
|
5605
|
+
<span class="k-item-text">{{ item.text }}</span>
|
|
5606
|
+
@if (viewItem.hasChildren) {
|
|
5607
|
+
<span class="k-spacer"></span>
|
|
5608
|
+
}
|
|
5609
|
+
@if (viewItem.hasChildren) {
|
|
5610
|
+
<kendo-icon-wrapper
|
|
5611
|
+
[name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
|
|
5612
|
+
innerCssClass="k-drawer-toggle"
|
|
5613
|
+
[svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
|
|
5520
5614
|
>
|
|
5521
|
-
|
|
5522
|
-
|
|
5523
|
-
|
|
5524
|
-
|
|
5525
|
-
|
|
5526
|
-
|
|
5527
|
-
|
|
5528
|
-
|
|
5529
|
-
|
|
5615
|
+
</kendo-icon-wrapper>
|
|
5616
|
+
}
|
|
5617
|
+
}
|
|
5618
|
+
@if (mini && !expanded) {
|
|
5619
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
5620
|
+
<kendo-icon-wrapper
|
|
5621
|
+
[name]="iconClasses"
|
|
5622
|
+
[customFontClass]="customIconClasses"
|
|
5623
|
+
[svgIcon]="item.svgIcon"
|
|
5624
|
+
[innerCssClass]="innerCssClasses"
|
|
5530
5625
|
>
|
|
5531
|
-
|
|
5532
|
-
|
|
5533
|
-
|
|
5534
|
-
|
|
5626
|
+
</kendo-icon-wrapper>
|
|
5627
|
+
}
|
|
5628
|
+
}
|
|
5629
|
+
}
|
|
5630
|
+
|
|
5631
|
+
`,
|
|
5535
5632
|
standalone: true,
|
|
5536
|
-
imports: [
|
|
5633
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
5537
5634
|
}]
|
|
5538
5635
|
}], ctorParameters: () => [{ type: DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { viewItem: [{
|
|
5539
5636
|
type: Input
|
|
@@ -5665,7 +5762,7 @@ class DrawerListComponent {
|
|
|
5665
5762
|
}
|
|
5666
5763
|
}
|
|
5667
5764
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5765
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n @for (v of view; track identifyItem(idx, v); let idx = $index) {\n @if (!v.item.separator) {\n <li kendoDrawerItem\n class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n role=\"menuitem\"\n [viewItem]=\"v\"\n [index]=\"idx\"\n [mini]=\"mini\"\n [expanded]=\"expanded\"\n [itemTemplate]=\"itemTemplate\"\n [attr.data-kendo-drawer-index]=\"v.index\"\n [ngClass]=\"v.item.cssClass\"\n [ngStyle]=\"v.item.cssStyle\"\n [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n </li>\n }\n @if (v.item.separator) {\n <li\n role=\"separator\"\n class=\"k-drawer-item k-drawer-separator\"\n [ngClass]=\"v.item.cssClass\"\n [ngStyle]=\"v.item.cssStyle\">\n \n </li>\n }\n }\n ", isInline: true, dependencies: [{ kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5669
5766
|
}
|
|
5670
5767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerListComponent, decorators: [{
|
|
5671
5768
|
type: Component,
|
|
@@ -5673,32 +5770,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5673
5770
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
5674
5771
|
selector: '[kendoDrawerList]',
|
|
5675
5772
|
template: `
|
|
5676
|
-
|
|
5677
|
-
|
|
5678
|
-
|
|
5679
|
-
|
|
5680
|
-
|
|
5681
|
-
|
|
5682
|
-
|
|
5683
|
-
|
|
5684
|
-
|
|
5685
|
-
|
|
5686
|
-
|
|
5687
|
-
|
|
5688
|
-
|
|
5773
|
+
@for (v of view; track identifyItem(idx, v); let idx = $index) {
|
|
5774
|
+
@if (!v.item.separator) {
|
|
5775
|
+
<li kendoDrawerItem
|
|
5776
|
+
class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
|
|
5777
|
+
role="menuitem"
|
|
5778
|
+
[viewItem]="v"
|
|
5779
|
+
[index]="idx"
|
|
5780
|
+
[mini]="mini"
|
|
5781
|
+
[expanded]="expanded"
|
|
5782
|
+
[itemTemplate]="itemTemplate"
|
|
5783
|
+
[attr.${DRAWER_ITEM_INDEX}]="v.index"
|
|
5784
|
+
[ngClass]="v.item.cssClass"
|
|
5785
|
+
[ngStyle]="v.item.cssStyle"
|
|
5786
|
+
[tabindex]="v.index === 0 ? '0' : '-1'">
|
|
5689
5787
|
</li>
|
|
5690
|
-
|
|
5691
|
-
|
|
5692
|
-
|
|
5693
|
-
|
|
5694
|
-
|
|
5695
|
-
|
|
5696
|
-
|
|
5788
|
+
}
|
|
5789
|
+
@if (v.item.separator) {
|
|
5790
|
+
<li
|
|
5791
|
+
role="separator"
|
|
5792
|
+
class="k-drawer-item k-drawer-separator"
|
|
5793
|
+
[ngClass]="v.item.cssClass"
|
|
5794
|
+
[ngStyle]="v.item.cssStyle">
|
|
5795
|
+
|
|
5697
5796
|
</li>
|
|
5698
|
-
|
|
5699
|
-
|
|
5797
|
+
}
|
|
5798
|
+
}
|
|
5799
|
+
`,
|
|
5700
5800
|
standalone: true,
|
|
5701
|
-
imports: [
|
|
5801
|
+
imports: [DrawerItemComponent, NgClass, NgStyle]
|
|
5702
5802
|
}]
|
|
5703
5803
|
}], ctorParameters: () => [{ type: DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { itemTemplate: [{
|
|
5704
5804
|
type: Input
|
|
@@ -6008,7 +6108,7 @@ class DrawerComponent {
|
|
|
6008
6108
|
return player;
|
|
6009
6109
|
}
|
|
6010
6110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6011
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
|
|
6012
6112
|
LocalizationService,
|
|
6013
6113
|
DrawerService,
|
|
6014
6114
|
{
|
|
@@ -6016,35 +6116,42 @@ class DrawerComponent {
|
|
|
6016
6116
|
useValue: 'kendo.drawer'
|
|
6017
6117
|
}
|
|
6018
6118
|
], queries: [{ propertyName: "drawerTemplate", first: true, predicate: DrawerTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: DrawerHeaderTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: DrawerItemTemplateDirective, descendants: true }], exportAs: ["kendoDrawer"], usesOnChanges: true, ngImport: i0, template: `
|
|
6019
|
-
|
|
6020
|
-
|
|
6021
|
-
|
|
6022
|
-
|
|
6119
|
+
@if (expanded || mini) {
|
|
6120
|
+
<div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
|
|
6121
|
+
@if (!drawerTemplate) {
|
|
6122
|
+
@if (headerTemplate) {
|
|
6123
|
+
<ng-template
|
|
6124
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
6023
6125
|
</ng-template>
|
|
6024
|
-
|
|
6025
|
-
|
|
6026
|
-
|
|
6027
|
-
|
|
6028
|
-
|
|
6029
|
-
|
|
6030
|
-
|
|
6031
|
-
|
|
6032
|
-
|
|
6033
|
-
|
|
6034
|
-
|
|
6035
|
-
|
|
6036
|
-
<ng-template
|
|
6037
|
-
|
|
6126
|
+
}
|
|
6127
|
+
<ul kendoDrawerList
|
|
6128
|
+
role="menubar"
|
|
6129
|
+
aria-orientation="vertical"
|
|
6130
|
+
(select)="onSelect($event)"
|
|
6131
|
+
[mini]="mini"
|
|
6132
|
+
[expanded]="expanded"
|
|
6133
|
+
[view]="viewItems"
|
|
6134
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
6135
|
+
class="k-drawer-items">
|
|
6136
|
+
</ul>
|
|
6137
|
+
@if (footerTemplate) {
|
|
6138
|
+
<ng-template
|
|
6139
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
6038
6140
|
</ng-template>
|
|
6039
|
-
|
|
6040
|
-
|
|
6041
|
-
|
|
6141
|
+
}
|
|
6142
|
+
}
|
|
6143
|
+
@if (drawerTemplate) {
|
|
6144
|
+
<ng-template
|
|
6042
6145
|
[ngTemplateOutlet]="drawerTemplate?.templateRef">
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
|
|
6146
|
+
</ng-template>
|
|
6147
|
+
}
|
|
6148
|
+
</div>
|
|
6149
|
+
}
|
|
6150
|
+
|
|
6151
|
+
@if (showLicenseWatermark) {
|
|
6152
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
6153
|
+
}
|
|
6154
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
|
|
6048
6155
|
}
|
|
6049
6156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
6050
6157
|
type: Component,
|
|
@@ -6060,37 +6167,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
6060
6167
|
],
|
|
6061
6168
|
selector: 'kendo-drawer',
|
|
6062
6169
|
template: `
|
|
6063
|
-
|
|
6064
|
-
|
|
6065
|
-
|
|
6066
|
-
|
|
6170
|
+
@if (expanded || mini) {
|
|
6171
|
+
<div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
|
|
6172
|
+
@if (!drawerTemplate) {
|
|
6173
|
+
@if (headerTemplate) {
|
|
6174
|
+
<ng-template
|
|
6175
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef">
|
|
6067
6176
|
</ng-template>
|
|
6068
|
-
|
|
6069
|
-
|
|
6070
|
-
|
|
6071
|
-
|
|
6072
|
-
|
|
6073
|
-
|
|
6074
|
-
|
|
6075
|
-
|
|
6076
|
-
|
|
6077
|
-
|
|
6078
|
-
|
|
6079
|
-
|
|
6080
|
-
<ng-template
|
|
6081
|
-
|
|
6177
|
+
}
|
|
6178
|
+
<ul kendoDrawerList
|
|
6179
|
+
role="menubar"
|
|
6180
|
+
aria-orientation="vertical"
|
|
6181
|
+
(select)="onSelect($event)"
|
|
6182
|
+
[mini]="mini"
|
|
6183
|
+
[expanded]="expanded"
|
|
6184
|
+
[view]="viewItems"
|
|
6185
|
+
[itemTemplate]="itemTemplate?.templateRef"
|
|
6186
|
+
class="k-drawer-items">
|
|
6187
|
+
</ul>
|
|
6188
|
+
@if (footerTemplate) {
|
|
6189
|
+
<ng-template
|
|
6190
|
+
[ngTemplateOutlet]="footerTemplate?.templateRef">
|
|
6082
6191
|
</ng-template>
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
|
|
6192
|
+
}
|
|
6193
|
+
}
|
|
6194
|
+
@if (drawerTemplate) {
|
|
6195
|
+
<ng-template
|
|
6086
6196
|
[ngTemplateOutlet]="drawerTemplate?.templateRef">
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
|
|
6197
|
+
</ng-template>
|
|
6198
|
+
}
|
|
6199
|
+
</div>
|
|
6200
|
+
}
|
|
6201
|
+
|
|
6202
|
+
@if (showLicenseWatermark) {
|
|
6203
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
6204
|
+
}
|
|
6205
|
+
`,
|
|
6092
6206
|
standalone: true,
|
|
6093
|
-
imports: [
|
|
6207
|
+
imports: [NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
|
|
6094
6208
|
}]
|
|
6095
6209
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }], propDecorators: { hostClasses: [{
|
|
6096
6210
|
type: HostBinding,
|
|
@@ -6223,16 +6337,18 @@ class DrawerContainerComponent {
|
|
|
6223
6337
|
}
|
|
6224
6338
|
}
|
|
6225
6339
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6340
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerContainerComponent, isStandalone: true, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
|
|
6227
6341
|
LocalizationService,
|
|
6228
6342
|
{
|
|
6229
6343
|
provide: L10N_PREFIX,
|
|
6230
6344
|
useValue: 'kendo.drawer.container'
|
|
6231
6345
|
}
|
|
6232
6346
|
], queries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], ngImport: i0, template: `
|
|
6233
|
-
|
|
6347
|
+
@if (overlay) {
|
|
6348
|
+
<div class="k-overlay" (click)="closeDrawer()"></div>
|
|
6349
|
+
}
|
|
6234
6350
|
<ng-content></ng-content>
|
|
6235
|
-
|
|
6351
|
+
`, isInline: true });
|
|
6236
6352
|
}
|
|
6237
6353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
6238
6354
|
type: Component,
|
|
@@ -6246,11 +6362,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
6246
6362
|
}
|
|
6247
6363
|
],
|
|
6248
6364
|
template: `
|
|
6249
|
-
|
|
6365
|
+
@if (overlay) {
|
|
6366
|
+
<div class="k-overlay" (click)="closeDrawer()"></div>
|
|
6367
|
+
}
|
|
6250
6368
|
<ng-content></ng-content>
|
|
6251
|
-
|
|
6252
|
-
standalone: true
|
|
6253
|
-
imports: [NgIf]
|
|
6369
|
+
`,
|
|
6370
|
+
standalone: true
|
|
6254
6371
|
}]
|
|
6255
6372
|
}], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
|
|
6256
6373
|
type: HostBinding,
|
|
@@ -6807,65 +6924,80 @@ class StepperStepComponent {
|
|
|
6807
6924
|
}
|
|
6808
6925
|
}
|
|
6809
6926
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperStepComponent, deps: [{ token: StepperService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
6810
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperStepComponent, isStandalone: true, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
6811
6928
|
<a href='#' class='k-step-link' #stepLink
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
|
|
6815
|
-
|
|
6816
|
-
|
|
6817
|
-
|
|
6818
|
-
|
|
6819
|
-
|
|
6820
|
-
|
|
6929
|
+
[attr.tabindex]='tabIndexAttr'
|
|
6930
|
+
[attr.title]='step.label'
|
|
6931
|
+
[attr.aria-disabled]='step.disabled'
|
|
6932
|
+
[attr.aria-current]='index === current ? "step" : null'
|
|
6933
|
+
(focus)='onFocus()'
|
|
6934
|
+
>
|
|
6935
|
+
@if (stepTemplate) {
|
|
6936
|
+
<ng-template
|
|
6937
|
+
[ngTemplateOutlet]='stepTemplate'
|
|
6938
|
+
[ngTemplateOutletContext]='{ $implicit: step, index: index }'>
|
|
6821
6939
|
</ng-template>
|
|
6822
|
-
|
|
6823
|
-
|
|
6824
|
-
|
|
6825
|
-
|
|
6826
|
-
|
|
6827
|
-
|
|
6940
|
+
}
|
|
6941
|
+
|
|
6942
|
+
@if (!stepTemplate) {
|
|
6943
|
+
@if (showIndicator) {
|
|
6944
|
+
<span
|
|
6945
|
+
class='k-step-indicator'
|
|
6946
|
+
aria-hidden='true'
|
|
6947
|
+
[style.transition-duration.ms]='transitionDuration'
|
|
6828
6948
|
>
|
|
6829
|
-
|
|
6830
|
-
|
|
6831
|
-
|
|
6832
|
-
|
|
6833
|
-
|
|
6834
|
-
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
6846
|
-
|
|
6847
|
-
|
|
6848
|
-
|
|
6849
|
-
|
|
6850
|
-
|
|
6851
|
-
|
|
6852
|
-
|
|
6853
|
-
|
|
6854
|
-
|
|
6855
|
-
|
|
6856
|
-
|
|
6857
|
-
|
|
6858
|
-
|
|
6859
|
-
|
|
6860
|
-
|
|
6861
|
-
|
|
6862
|
-
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
|
|
6949
|
+
@if (indicatorTemplate) {
|
|
6950
|
+
<ng-template
|
|
6951
|
+
[ngTemplateOutlet]='indicatorTemplate'
|
|
6952
|
+
[ngTemplateOutletContext]='{ $implicit: step, index: index }'>
|
|
6953
|
+
</ng-template>
|
|
6954
|
+
}
|
|
6955
|
+
@if (!indicatorTemplate) {
|
|
6956
|
+
@if (showIndicatorIcon) {
|
|
6957
|
+
<kendo-icon-wrapper
|
|
6958
|
+
[name]='indicatorIconClass'
|
|
6959
|
+
[customFontClass]='customIndicatorIconClass'
|
|
6960
|
+
[svgIcon]='SVGIndicatorIcon'
|
|
6961
|
+
innerCssClass='k-step-indicator-icon'
|
|
6962
|
+
>
|
|
6963
|
+
</kendo-icon-wrapper>
|
|
6964
|
+
}
|
|
6965
|
+
@if (!showIndicatorIcon) {
|
|
6966
|
+
<span class='k-step-indicator-text'>{{ indicatorText }}</span>
|
|
6967
|
+
}
|
|
6968
|
+
}
|
|
6969
|
+
</span>
|
|
6970
|
+
}
|
|
6971
|
+
@if (showLabel) {
|
|
6972
|
+
<span class='k-step-label'>
|
|
6973
|
+
@if (labelTemplate) {
|
|
6974
|
+
<ng-template
|
|
6975
|
+
[ngTemplateOutlet]='labelTemplate'
|
|
6976
|
+
[ngTemplateOutletContext]='{ $implicit: step, index: index }'>
|
|
6977
|
+
</ng-template>
|
|
6978
|
+
}
|
|
6979
|
+
@if (!labelTemplate) {
|
|
6980
|
+
@if (showLabelText) {
|
|
6981
|
+
<span class='k-step-text'>{{ step.label }}</span>
|
|
6982
|
+
}
|
|
6983
|
+
@if (showLabelIcon) {
|
|
6984
|
+
<kendo-icon-wrapper
|
|
6985
|
+
aria-hidden='true'
|
|
6986
|
+
[name]='validationIconClasses'
|
|
6987
|
+
[customFontClass]='customValidationIconClasses'
|
|
6988
|
+
[svgIcon]='validationSVGIcon'
|
|
6989
|
+
>
|
|
6990
|
+
</kendo-icon-wrapper>
|
|
6991
|
+
}
|
|
6992
|
+
@if (step.optional) {
|
|
6993
|
+
<span class='k-step-label-optional'>({{optionalText}})</span>
|
|
6994
|
+
}
|
|
6995
|
+
}
|
|
6996
|
+
</span>
|
|
6997
|
+
}
|
|
6998
|
+
}
|
|
6867
6999
|
</a>
|
|
6868
|
-
|
|
7000
|
+
`, 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"] }] });
|
|
6869
7001
|
}
|
|
6870
7002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperStepComponent, decorators: [{
|
|
6871
7003
|
type: Component,
|
|
@@ -6874,65 +7006,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
6874
7006
|
selector: '[kendoStepperStep]',
|
|
6875
7007
|
template: `
|
|
6876
7008
|
<a href='#' class='k-step-link' #stepLink
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
7009
|
+
[attr.tabindex]='tabIndexAttr'
|
|
7010
|
+
[attr.title]='step.label'
|
|
7011
|
+
[attr.aria-disabled]='step.disabled'
|
|
7012
|
+
[attr.aria-current]='index === current ? "step" : null'
|
|
7013
|
+
(focus)='onFocus()'
|
|
7014
|
+
>
|
|
7015
|
+
@if (stepTemplate) {
|
|
7016
|
+
<ng-template
|
|
7017
|
+
[ngTemplateOutlet]='stepTemplate'
|
|
7018
|
+
[ngTemplateOutletContext]='{ $implicit: step, index: index }'>
|
|
6886
7019
|
</ng-template>
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
7020
|
+
}
|
|
7021
|
+
|
|
7022
|
+
@if (!stepTemplate) {
|
|
7023
|
+
@if (showIndicator) {
|
|
7024
|
+
<span
|
|
7025
|
+
class='k-step-indicator'
|
|
7026
|
+
aria-hidden='true'
|
|
7027
|
+
[style.transition-duration.ms]='transitionDuration'
|
|
6893
7028
|
>
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
|
|
6906
|
-
|
|
6907
|
-
|
|
6908
|
-
|
|
6909
|
-
|
|
6910
|
-
|
|
6911
|
-
|
|
6912
|
-
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
|
|
6925
|
-
|
|
6926
|
-
|
|
6927
|
-
|
|
6928
|
-
|
|
6929
|
-
|
|
6930
|
-
|
|
6931
|
-
|
|
7029
|
+
@if (indicatorTemplate) {
|
|
7030
|
+
<ng-template
|
|
7031
|
+
[ngTemplateOutlet]='indicatorTemplate'
|
|
7032
|
+
[ngTemplateOutletContext]='{ $implicit: step, index: index }'>
|
|
7033
|
+
</ng-template>
|
|
7034
|
+
}
|
|
7035
|
+
@if (!indicatorTemplate) {
|
|
7036
|
+
@if (showIndicatorIcon) {
|
|
7037
|
+
<kendo-icon-wrapper
|
|
7038
|
+
[name]='indicatorIconClass'
|
|
7039
|
+
[customFontClass]='customIndicatorIconClass'
|
|
7040
|
+
[svgIcon]='SVGIndicatorIcon'
|
|
7041
|
+
innerCssClass='k-step-indicator-icon'
|
|
7042
|
+
>
|
|
7043
|
+
</kendo-icon-wrapper>
|
|
7044
|
+
}
|
|
7045
|
+
@if (!showIndicatorIcon) {
|
|
7046
|
+
<span class='k-step-indicator-text'>{{ indicatorText }}</span>
|
|
7047
|
+
}
|
|
7048
|
+
}
|
|
7049
|
+
</span>
|
|
7050
|
+
}
|
|
7051
|
+
@if (showLabel) {
|
|
7052
|
+
<span class='k-step-label'>
|
|
7053
|
+
@if (labelTemplate) {
|
|
7054
|
+
<ng-template
|
|
7055
|
+
[ngTemplateOutlet]='labelTemplate'
|
|
7056
|
+
[ngTemplateOutletContext]='{ $implicit: step, index: index }'>
|
|
7057
|
+
</ng-template>
|
|
7058
|
+
}
|
|
7059
|
+
@if (!labelTemplate) {
|
|
7060
|
+
@if (showLabelText) {
|
|
7061
|
+
<span class='k-step-text'>{{ step.label }}</span>
|
|
7062
|
+
}
|
|
7063
|
+
@if (showLabelIcon) {
|
|
7064
|
+
<kendo-icon-wrapper
|
|
7065
|
+
aria-hidden='true'
|
|
7066
|
+
[name]='validationIconClasses'
|
|
7067
|
+
[customFontClass]='customValidationIconClasses'
|
|
7068
|
+
[svgIcon]='validationSVGIcon'
|
|
7069
|
+
>
|
|
7070
|
+
</kendo-icon-wrapper>
|
|
7071
|
+
}
|
|
7072
|
+
@if (step.optional) {
|
|
7073
|
+
<span class='k-step-label-optional'>({{optionalText}})</span>
|
|
7074
|
+
}
|
|
7075
|
+
}
|
|
7076
|
+
</span>
|
|
7077
|
+
}
|
|
7078
|
+
}
|
|
6932
7079
|
</a>
|
|
6933
|
-
|
|
7080
|
+
`,
|
|
6934
7081
|
standalone: true,
|
|
6935
|
-
imports: [
|
|
7082
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
6936
7083
|
}]
|
|
6937
7084
|
}], ctorParameters: () => [{ type: StepperService }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { step: [{
|
|
6938
7085
|
type: Input
|
|
@@ -7068,7 +7215,7 @@ class StepperListComponent {
|
|
|
7068
7215
|
}
|
|
7069
7216
|
}
|
|
7070
7217
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7218
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperListComponent, isStandalone: true, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n @for (step of steps; track step; let idx = $index) {\n <li kendoStepperStep\n [attr.data-kendo-stepper-index]='idx'\n [type]='stepType'\n [step]='step'\n [index]='idx'\n [current]='currentStep'\n [successIcon]='successIcon'\n [successSVGIcon]='successSVGIcon'\n [errorIcon]='errorIcon'\n [errorSVGIcon]='errorSVGIcon'\n [svgIcon]='svgIcon'\n [indicatorTemplate]='indicatorTemplate'\n [labelTemplate]='labelTemplate'\n [stepTemplate]='stepTemplate'\n class='k-step'\n [class.k-step-first]='idx === 0'\n [class.k-step-last]='idx === steps.length - 1'\n [class.k-step-done]='idx < currentStep'\n [class.k-step-current]='idx === currentStep'\n [class.k-step-optional]='step.optional'\n [class.k-disabled]='step.disabled'\n [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'\n [ngClass]='step.cssClass'\n [ngStyle]='step.cssStyle'\n [style.max-width.%] = 'maxStepWidth'\n [style.max-height.%] = 'maxStepHeight'\n >\n </li>\n }\n ", isInline: true, dependencies: [{ kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
7072
7219
|
}
|
|
7073
7220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperListComponent, decorators: [{
|
|
7074
7221
|
type: Component,
|
|
@@ -7076,39 +7223,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7076
7223
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
7077
7224
|
selector: '[kendoStepperList]',
|
|
7078
7225
|
template: `
|
|
7079
|
-
|
|
7080
|
-
|
|
7081
|
-
|
|
7082
|
-
|
|
7083
|
-
|
|
7084
|
-
|
|
7085
|
-
|
|
7086
|
-
|
|
7087
|
-
|
|
7088
|
-
|
|
7089
|
-
|
|
7090
|
-
|
|
7091
|
-
|
|
7092
|
-
|
|
7093
|
-
|
|
7094
|
-
|
|
7095
|
-
|
|
7096
|
-
|
|
7097
|
-
|
|
7098
|
-
|
|
7099
|
-
|
|
7100
|
-
|
|
7101
|
-
|
|
7102
|
-
|
|
7103
|
-
|
|
7104
|
-
|
|
7105
|
-
|
|
7226
|
+
@for (step of steps; track step; let idx = $index) {
|
|
7227
|
+
<li kendoStepperStep
|
|
7228
|
+
[attr.${STEPPER_STEP_INDEX}]='idx'
|
|
7229
|
+
[type]='stepType'
|
|
7230
|
+
[step]='step'
|
|
7231
|
+
[index]='idx'
|
|
7232
|
+
[current]='currentStep'
|
|
7233
|
+
[successIcon]='successIcon'
|
|
7234
|
+
[successSVGIcon]='successSVGIcon'
|
|
7235
|
+
[errorIcon]='errorIcon'
|
|
7236
|
+
[errorSVGIcon]='errorSVGIcon'
|
|
7237
|
+
[svgIcon]='svgIcon'
|
|
7238
|
+
[indicatorTemplate]='indicatorTemplate'
|
|
7239
|
+
[labelTemplate]='labelTemplate'
|
|
7240
|
+
[stepTemplate]='stepTemplate'
|
|
7241
|
+
class='k-step'
|
|
7242
|
+
[class.k-step-first]='idx === 0'
|
|
7243
|
+
[class.k-step-last]='idx === steps.length - 1'
|
|
7244
|
+
[class.k-step-done]='idx < currentStep'
|
|
7245
|
+
[class.k-step-current]='idx === currentStep'
|
|
7246
|
+
[class.k-step-optional]='step.optional'
|
|
7247
|
+
[class.k-disabled]='step.disabled'
|
|
7248
|
+
[class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'
|
|
7249
|
+
[ngClass]='step.cssClass'
|
|
7250
|
+
[ngStyle]='step.cssStyle'
|
|
7251
|
+
[style.max-width.%] = 'maxStepWidth'
|
|
7252
|
+
[style.max-height.%] = 'maxStepHeight'
|
|
7106
7253
|
>
|
|
7107
|
-
|
|
7108
|
-
|
|
7109
|
-
|
|
7254
|
+
</li>
|
|
7255
|
+
}
|
|
7256
|
+
`,
|
|
7110
7257
|
standalone: true,
|
|
7111
|
-
imports: [
|
|
7258
|
+
imports: [StepperStepComponent, NgClass, NgStyle]
|
|
7112
7259
|
}]
|
|
7113
7260
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: StepperService }, { type: i0.ElementRef }], propDecorators: { linear: [{
|
|
7114
7261
|
type: Input
|
|
@@ -7444,7 +7591,7 @@ class StepperComponent {
|
|
|
7444
7591
|
return this.orientation === 'horizontal';
|
|
7445
7592
|
}
|
|
7446
7593
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7447
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7594
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
|
|
7448
7595
|
LocalizationService,
|
|
7449
7596
|
StepperService,
|
|
7450
7597
|
{
|
|
@@ -7453,33 +7600,34 @@ class StepperComponent {
|
|
|
7453
7600
|
}
|
|
7454
7601
|
], queries: [{ propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true }, { propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true }], exportAs: ["kendoStepper"], usesOnChanges: true, ngImport: i0, template: `
|
|
7455
7602
|
<ng-container kendoStepperLocalizedMessages
|
|
7456
|
-
|
|
7457
|
-
|
|
7458
|
-
|
|
7603
|
+
i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
|
|
7604
|
+
optional="Optional"
|
|
7605
|
+
>
|
|
7459
7606
|
</ng-container>
|
|
7460
7607
|
<ol kendoStepperList
|
|
7461
|
-
|
|
7462
|
-
|
|
7463
|
-
|
|
7464
|
-
|
|
7465
|
-
|
|
7466
|
-
|
|
7467
|
-
|
|
7468
|
-
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7474
|
-
|
|
7475
|
-
|
|
7476
|
-
|
|
7477
|
-
|
|
7478
|
-
|
|
7479
|
-
|
|
7608
|
+
[stepType]='stepType'
|
|
7609
|
+
[linear]='linear'
|
|
7610
|
+
[orientation]='orientation'
|
|
7611
|
+
[steps]='steps'
|
|
7612
|
+
[currentStep]='currentStep'
|
|
7613
|
+
[successIcon]='successIcon'
|
|
7614
|
+
[successSVGIcon]='successSVGIcon'
|
|
7615
|
+
[errorIcon]='errorIcon'
|
|
7616
|
+
[errorSVGIcon]='errorSVGIcon'
|
|
7617
|
+
[svgIcon]="svgIcon"
|
|
7618
|
+
[indicatorTemplate]='indicatorTemplate?.templateRef'
|
|
7619
|
+
[labelTemplate]='labelTemplate?.templateRef'
|
|
7620
|
+
[stepTemplate]='stepTemplate?.templateRef'
|
|
7621
|
+
class='k-step-list'
|
|
7622
|
+
[class.k-step-list-horizontal]='isHorizontal'
|
|
7623
|
+
[class.k-step-list-vertical]='!isHorizontal'
|
|
7624
|
+
[ngStyle]='stepsListStyling'
|
|
7625
|
+
(listKeydown)="onListKeydown($event)"
|
|
7626
|
+
(listClick)="onListClick($event)">
|
|
7480
7627
|
</ol>
|
|
7481
|
-
|
|
7482
|
-
|
|
7628
|
+
|
|
7629
|
+
@if (steps.length > 0) {
|
|
7630
|
+
<kendo-progressbar
|
|
7483
7631
|
[attr.aria-hidden]='true'
|
|
7484
7632
|
[animation]='progressAnimation'
|
|
7485
7633
|
[max]='steps.length - 1'
|
|
@@ -7488,8 +7636,9 @@ class StepperComponent {
|
|
|
7488
7636
|
[reverse]='!isHorizontal'
|
|
7489
7637
|
[value]='currentStep'
|
|
7490
7638
|
[ngStyle]='progressBarStyling'>
|
|
7491
|
-
|
|
7492
|
-
|
|
7639
|
+
</kendo-progressbar>
|
|
7640
|
+
}
|
|
7641
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n [kendoStepperLocalizedMessages]\n " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] });
|
|
7493
7642
|
}
|
|
7494
7643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
|
|
7495
7644
|
type: Component,
|
|
@@ -7506,33 +7655,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7506
7655
|
selector: 'kendo-stepper',
|
|
7507
7656
|
template: `
|
|
7508
7657
|
<ng-container kendoStepperLocalizedMessages
|
|
7509
|
-
|
|
7510
|
-
|
|
7511
|
-
|
|
7658
|
+
i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
|
|
7659
|
+
optional="Optional"
|
|
7660
|
+
>
|
|
7512
7661
|
</ng-container>
|
|
7513
7662
|
<ol kendoStepperList
|
|
7514
|
-
|
|
7515
|
-
|
|
7516
|
-
|
|
7517
|
-
|
|
7518
|
-
|
|
7519
|
-
|
|
7520
|
-
|
|
7521
|
-
|
|
7522
|
-
|
|
7523
|
-
|
|
7524
|
-
|
|
7525
|
-
|
|
7526
|
-
|
|
7527
|
-
|
|
7528
|
-
|
|
7529
|
-
|
|
7530
|
-
|
|
7531
|
-
|
|
7532
|
-
|
|
7663
|
+
[stepType]='stepType'
|
|
7664
|
+
[linear]='linear'
|
|
7665
|
+
[orientation]='orientation'
|
|
7666
|
+
[steps]='steps'
|
|
7667
|
+
[currentStep]='currentStep'
|
|
7668
|
+
[successIcon]='successIcon'
|
|
7669
|
+
[successSVGIcon]='successSVGIcon'
|
|
7670
|
+
[errorIcon]='errorIcon'
|
|
7671
|
+
[errorSVGIcon]='errorSVGIcon'
|
|
7672
|
+
[svgIcon]="svgIcon"
|
|
7673
|
+
[indicatorTemplate]='indicatorTemplate?.templateRef'
|
|
7674
|
+
[labelTemplate]='labelTemplate?.templateRef'
|
|
7675
|
+
[stepTemplate]='stepTemplate?.templateRef'
|
|
7676
|
+
class='k-step-list'
|
|
7677
|
+
[class.k-step-list-horizontal]='isHorizontal'
|
|
7678
|
+
[class.k-step-list-vertical]='!isHorizontal'
|
|
7679
|
+
[ngStyle]='stepsListStyling'
|
|
7680
|
+
(listKeydown)="onListKeydown($event)"
|
|
7681
|
+
(listClick)="onListClick($event)">
|
|
7533
7682
|
</ol>
|
|
7534
|
-
|
|
7535
|
-
|
|
7683
|
+
|
|
7684
|
+
@if (steps.length > 0) {
|
|
7685
|
+
<kendo-progressbar
|
|
7536
7686
|
[attr.aria-hidden]='true'
|
|
7537
7687
|
[animation]='progressAnimation'
|
|
7538
7688
|
[max]='steps.length - 1'
|
|
@@ -7541,10 +7691,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7541
7691
|
[reverse]='!isHorizontal'
|
|
7542
7692
|
[value]='currentStep'
|
|
7543
7693
|
[ngStyle]='progressBarStyling'>
|
|
7544
|
-
|
|
7545
|
-
|
|
7694
|
+
</kendo-progressbar>
|
|
7695
|
+
}
|
|
7696
|
+
`,
|
|
7546
7697
|
standalone: true,
|
|
7547
|
-
imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle,
|
|
7698
|
+
imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent]
|
|
7548
7699
|
}]
|
|
7549
7700
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: StepperService }], propDecorators: { hostClasses: [{
|
|
7550
7701
|
type: HostBinding,
|
|
@@ -7983,7 +8134,7 @@ class AvatarComponent {
|
|
|
7983
8134
|
return this.localization.get(key);
|
|
7984
8135
|
}
|
|
7985
8136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7986
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
|
|
7987
8138
|
LocalizationService,
|
|
7988
8139
|
{
|
|
7989
8140
|
provide: L10N_PREFIX,
|
|
@@ -7991,35 +8142,37 @@ class AvatarComponent {
|
|
|
7991
8142
|
}
|
|
7992
8143
|
], ngImport: i0, template: `
|
|
7993
8144
|
<ng-container kendoAvatarLocalizedMessages
|
|
7994
|
-
|
|
7995
|
-
|
|
7996
|
-
|
|
7997
|
-
</ng-container>
|
|
7998
|
-
|
|
7999
|
-
<ng-content *ngIf="customAvatar"></ng-content>
|
|
8000
|
-
|
|
8001
|
-
<ng-container *ngIf="imageSrc">
|
|
8002
|
-
<span class="k-avatar-image">
|
|
8003
|
-
<img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
|
|
8004
|
-
</span>
|
|
8145
|
+
i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
|
|
8146
|
+
avatarAlt="Avatar"
|
|
8147
|
+
>
|
|
8005
8148
|
</ng-container>
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8019
|
-
|
|
8020
|
-
|
|
8021
|
-
|
|
8022
|
-
|
|
8149
|
+
|
|
8150
|
+
@if (customAvatar) {
|
|
8151
|
+
<ng-content></ng-content>
|
|
8152
|
+
}
|
|
8153
|
+
|
|
8154
|
+
@if (imageSrc) {
|
|
8155
|
+
<span class="k-avatar-image">
|
|
8156
|
+
<img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
|
|
8157
|
+
</span>
|
|
8158
|
+
}
|
|
8159
|
+
|
|
8160
|
+
@if (initials) {
|
|
8161
|
+
<span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
|
|
8162
|
+
}
|
|
8163
|
+
|
|
8164
|
+
@if (icon || iconClass || svgIcon) {
|
|
8165
|
+
<span class="k-avatar-icon">
|
|
8166
|
+
<kendo-icon-wrapper
|
|
8167
|
+
[ngStyle]="cssStyle"
|
|
8168
|
+
[name]="icon"
|
|
8169
|
+
[customFontClass]="iconClass"
|
|
8170
|
+
[svgIcon]="svgIcon"
|
|
8171
|
+
>
|
|
8172
|
+
</kendo-icon-wrapper>
|
|
8173
|
+
</span>
|
|
8174
|
+
}
|
|
8175
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
|
|
8023
8176
|
}
|
|
8024
8177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
8025
8178
|
type: Component,
|
|
@@ -8034,37 +8187,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
8034
8187
|
selector: 'kendo-avatar',
|
|
8035
8188
|
template: `
|
|
8036
8189
|
<ng-container kendoAvatarLocalizedMessages
|
|
8037
|
-
|
|
8038
|
-
|
|
8039
|
-
|
|
8040
|
-
</ng-container>
|
|
8041
|
-
|
|
8042
|
-
<ng-content *ngIf="customAvatar"></ng-content>
|
|
8043
|
-
|
|
8044
|
-
<ng-container *ngIf="imageSrc">
|
|
8045
|
-
<span class="k-avatar-image">
|
|
8046
|
-
<img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
|
|
8047
|
-
</span>
|
|
8048
|
-
</ng-container>
|
|
8049
|
-
|
|
8050
|
-
<ng-container *ngIf="initials">
|
|
8051
|
-
<span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
|
|
8052
|
-
</ng-container>
|
|
8053
|
-
|
|
8054
|
-
<ng-container *ngIf="icon || iconClass || svgIcon">
|
|
8055
|
-
<span class="k-avatar-icon">
|
|
8056
|
-
<kendo-icon-wrapper
|
|
8057
|
-
[ngStyle]="cssStyle"
|
|
8058
|
-
[name]="icon"
|
|
8059
|
-
[customFontClass]="iconClass"
|
|
8060
|
-
[svgIcon]="svgIcon"
|
|
8061
|
-
>
|
|
8062
|
-
</kendo-icon-wrapper>
|
|
8063
|
-
</span>
|
|
8190
|
+
i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
|
|
8191
|
+
avatarAlt="Avatar"
|
|
8192
|
+
>
|
|
8064
8193
|
</ng-container>
|
|
8065
|
-
|
|
8194
|
+
|
|
8195
|
+
@if (customAvatar) {
|
|
8196
|
+
<ng-content></ng-content>
|
|
8197
|
+
}
|
|
8198
|
+
|
|
8199
|
+
@if (imageSrc) {
|
|
8200
|
+
<span class="k-avatar-image">
|
|
8201
|
+
<img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
|
|
8202
|
+
</span>
|
|
8203
|
+
}
|
|
8204
|
+
|
|
8205
|
+
@if (initials) {
|
|
8206
|
+
<span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
|
|
8207
|
+
}
|
|
8208
|
+
|
|
8209
|
+
@if (icon || iconClass || svgIcon) {
|
|
8210
|
+
<span class="k-avatar-icon">
|
|
8211
|
+
<kendo-icon-wrapper
|
|
8212
|
+
[ngStyle]="cssStyle"
|
|
8213
|
+
[name]="icon"
|
|
8214
|
+
[customFontClass]="iconClass"
|
|
8215
|
+
[svgIcon]="svgIcon"
|
|
8216
|
+
>
|
|
8217
|
+
</kendo-icon-wrapper>
|
|
8218
|
+
</span>
|
|
8219
|
+
}
|
|
8220
|
+
`,
|
|
8066
8221
|
standalone: true,
|
|
8067
|
-
imports: [
|
|
8222
|
+
imports: [NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
|
|
8068
8223
|
}]
|
|
8069
8224
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
|
|
8070
8225
|
type: HostBinding,
|
|
@@ -8439,57 +8594,67 @@ class CardActionsComponent {
|
|
|
8439
8594
|
this.action.emit(action);
|
|
8440
8595
|
}
|
|
8441
8596
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8443
|
-
|
|
8444
|
-
|
|
8445
|
-
|
|
8597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardActionsComponent, isStandalone: true, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
|
|
8598
|
+
@if (!actionsArray && !actionsTemplate) {
|
|
8599
|
+
<ng-content></ng-content>
|
|
8600
|
+
}
|
|
8601
|
+
|
|
8602
|
+
@if (actionsArray) {
|
|
8603
|
+
@for (action of actionsArray; track action) {
|
|
8446
8604
|
<button
|
|
8447
|
-
|
|
8448
|
-
|
|
8449
|
-
|
|
8450
|
-
|
|
8451
|
-
|
|
8452
|
-
|
|
8453
|
-
|
|
8454
|
-
|
|
8455
|
-
|
|
8456
|
-
|
|
8457
|
-
|
|
8458
|
-
<span class="k-button-text">{{ action.text }}</span>
|
|
8605
|
+
type="button"
|
|
8606
|
+
class="k-button k-button-md k-rounded-md"
|
|
8607
|
+
[class.k-button-solid]="!action.flat"
|
|
8608
|
+
[class.k-button-flat]="action.flat"
|
|
8609
|
+
[class.k-button-solid-base]="!action.primary && !action.flat"
|
|
8610
|
+
[class.k-button-solid-primary]="action.primary && !action.flat"
|
|
8611
|
+
[class.k-button-flat-base]="!action.primary && action.flat"
|
|
8612
|
+
[class.k-button-flat-primary]="action.primary && action.flat"
|
|
8613
|
+
(click)="onClick(action)"
|
|
8614
|
+
>
|
|
8615
|
+
<span class="k-button-text">{{ action.text }}</span>
|
|
8459
8616
|
</button>
|
|
8460
|
-
|
|
8461
|
-
|
|
8462
|
-
|
|
8463
|
-
|
|
8617
|
+
}
|
|
8618
|
+
}
|
|
8619
|
+
|
|
8620
|
+
@if (actionsTemplate) {
|
|
8621
|
+
<ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
|
|
8622
|
+
}
|
|
8623
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
8464
8624
|
}
|
|
8465
8625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, decorators: [{
|
|
8466
8626
|
type: Component,
|
|
8467
8627
|
args: [{
|
|
8468
8628
|
selector: 'kendo-card-actions',
|
|
8469
8629
|
template: `
|
|
8470
|
-
|
|
8471
|
-
|
|
8472
|
-
|
|
8630
|
+
@if (!actionsArray && !actionsTemplate) {
|
|
8631
|
+
<ng-content></ng-content>
|
|
8632
|
+
}
|
|
8633
|
+
|
|
8634
|
+
@if (actionsArray) {
|
|
8635
|
+
@for (action of actionsArray; track action) {
|
|
8473
8636
|
<button
|
|
8474
|
-
|
|
8475
|
-
|
|
8476
|
-
|
|
8477
|
-
|
|
8478
|
-
|
|
8479
|
-
|
|
8480
|
-
|
|
8481
|
-
|
|
8482
|
-
|
|
8483
|
-
|
|
8484
|
-
|
|
8485
|
-
<span class="k-button-text">{{ action.text }}</span>
|
|
8637
|
+
type="button"
|
|
8638
|
+
class="k-button k-button-md k-rounded-md"
|
|
8639
|
+
[class.k-button-solid]="!action.flat"
|
|
8640
|
+
[class.k-button-flat]="action.flat"
|
|
8641
|
+
[class.k-button-solid-base]="!action.primary && !action.flat"
|
|
8642
|
+
[class.k-button-solid-primary]="action.primary && !action.flat"
|
|
8643
|
+
[class.k-button-flat-base]="!action.primary && action.flat"
|
|
8644
|
+
[class.k-button-flat-primary]="action.primary && action.flat"
|
|
8645
|
+
(click)="onClick(action)"
|
|
8646
|
+
>
|
|
8647
|
+
<span class="k-button-text">{{ action.text }}</span>
|
|
8486
8648
|
</button>
|
|
8487
|
-
|
|
8488
|
-
|
|
8489
|
-
|
|
8490
|
-
|
|
8649
|
+
}
|
|
8650
|
+
}
|
|
8651
|
+
|
|
8652
|
+
@if (actionsTemplate) {
|
|
8653
|
+
<ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
|
|
8654
|
+
}
|
|
8655
|
+
`,
|
|
8491
8656
|
standalone: true,
|
|
8492
|
-
imports: [
|
|
8657
|
+
imports: [NgTemplateOutlet]
|
|
8493
8658
|
}]
|
|
8494
8659
|
}], propDecorators: { hostClass: [{
|
|
8495
8660
|
type: HostBinding,
|
|
@@ -9087,7 +9252,7 @@ class ExpansionPanelComponent {
|
|
|
9087
9252
|
this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
|
|
9088
9253
|
}
|
|
9089
9254
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
9090
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
|
|
9091
9256
|
LocalizationService,
|
|
9092
9257
|
{
|
|
9093
9258
|
provide: L10N_PREFIX,
|
|
@@ -9095,42 +9260,47 @@ class ExpansionPanelComponent {
|
|
|
9095
9260
|
}
|
|
9096
9261
|
], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
|
|
9097
9262
|
<div
|
|
9098
|
-
|
|
9099
|
-
|
|
9100
|
-
|
|
9101
|
-
|
|
9102
|
-
|
|
9103
|
-
|
|
9104
|
-
|
|
9105
|
-
|
|
9106
|
-
|
|
9107
|
-
|
|
9108
|
-
|
|
9109
|
-
|
|
9110
|
-
|
|
9111
|
-
|
|
9112
|
-
|
|
9113
|
-
|
|
9114
|
-
|
|
9263
|
+
#header
|
|
9264
|
+
[class.k-expander-header]="true"
|
|
9265
|
+
[class.k-disabled]="disabled"
|
|
9266
|
+
[attr.aria-disabled]="disabled"
|
|
9267
|
+
[attr.aria-expanded]="expanded && !disabled"
|
|
9268
|
+
role="button"
|
|
9269
|
+
tabindex="0"
|
|
9270
|
+
[attr.aria-controls]="contentWrapperId"
|
|
9271
|
+
(click)="onHeaderClick($event)"
|
|
9272
|
+
>
|
|
9273
|
+
@if (!titleTemplate) {
|
|
9274
|
+
@if (title) {
|
|
9275
|
+
<div class="k-expander-title">{{ title }}</div>
|
|
9276
|
+
}
|
|
9277
|
+
<span class="k-spacer"></span>
|
|
9278
|
+
@if (subtitle) {
|
|
9279
|
+
<div class="k-expander-sub-title">
|
|
9280
|
+
{{ subtitle }}
|
|
9281
|
+
</div>
|
|
9282
|
+
}
|
|
9283
|
+
}
|
|
9284
|
+
@if (titleTemplate) {
|
|
9115
9285
|
<ng-template
|
|
9116
|
-
|
|
9117
|
-
[ngTemplateOutlet]="titleTemplate?.templateRef">
|
|
9286
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef">
|
|
9118
9287
|
</ng-template>
|
|
9119
|
-
|
|
9120
|
-
|
|
9121
|
-
|
|
9122
|
-
|
|
9123
|
-
|
|
9124
|
-
|
|
9125
|
-
|
|
9126
|
-
</
|
|
9288
|
+
}
|
|
9289
|
+
<span class="k-expander-indicator">
|
|
9290
|
+
<kendo-icon-wrapper
|
|
9291
|
+
[name]="expanderIndicatorClasses"
|
|
9292
|
+
[customFontClass]="customExpanderIndicatorClasses"
|
|
9293
|
+
[svgIcon]="expanderSvgIcon"
|
|
9294
|
+
>
|
|
9295
|
+
</kendo-icon-wrapper>
|
|
9296
|
+
</span>
|
|
9127
9297
|
</div>
|
|
9128
9298
|
<div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
|
|
9129
|
-
|
|
9130
|
-
|
|
9131
|
-
|
|
9299
|
+
<div class="k-expander-content" [attr.aria-hidden]="!expanded">
|
|
9300
|
+
<ng-content></ng-content>
|
|
9301
|
+
</div>
|
|
9132
9302
|
</div>
|
|
9133
|
-
|
|
9303
|
+
`, 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"] }] });
|
|
9134
9304
|
}
|
|
9135
9305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
|
|
9136
9306
|
type: Component,
|
|
@@ -9146,44 +9316,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
9146
9316
|
selector: 'kendo-expansionpanel',
|
|
9147
9317
|
template: `
|
|
9148
9318
|
<div
|
|
9149
|
-
|
|
9150
|
-
|
|
9151
|
-
|
|
9152
|
-
|
|
9153
|
-
|
|
9154
|
-
|
|
9155
|
-
|
|
9156
|
-
|
|
9157
|
-
|
|
9158
|
-
|
|
9159
|
-
|
|
9160
|
-
|
|
9161
|
-
|
|
9162
|
-
|
|
9163
|
-
|
|
9164
|
-
|
|
9165
|
-
|
|
9319
|
+
#header
|
|
9320
|
+
[class.k-expander-header]="true"
|
|
9321
|
+
[class.k-disabled]="disabled"
|
|
9322
|
+
[attr.aria-disabled]="disabled"
|
|
9323
|
+
[attr.aria-expanded]="expanded && !disabled"
|
|
9324
|
+
role="button"
|
|
9325
|
+
tabindex="0"
|
|
9326
|
+
[attr.aria-controls]="contentWrapperId"
|
|
9327
|
+
(click)="onHeaderClick($event)"
|
|
9328
|
+
>
|
|
9329
|
+
@if (!titleTemplate) {
|
|
9330
|
+
@if (title) {
|
|
9331
|
+
<div class="k-expander-title">{{ title }}</div>
|
|
9332
|
+
}
|
|
9333
|
+
<span class="k-spacer"></span>
|
|
9334
|
+
@if (subtitle) {
|
|
9335
|
+
<div class="k-expander-sub-title">
|
|
9336
|
+
{{ subtitle }}
|
|
9337
|
+
</div>
|
|
9338
|
+
}
|
|
9339
|
+
}
|
|
9340
|
+
@if (titleTemplate) {
|
|
9166
9341
|
<ng-template
|
|
9167
|
-
|
|
9168
|
-
[ngTemplateOutlet]="titleTemplate?.templateRef">
|
|
9342
|
+
[ngTemplateOutlet]="titleTemplate?.templateRef">
|
|
9169
9343
|
</ng-template>
|
|
9170
|
-
|
|
9171
|
-
|
|
9172
|
-
|
|
9173
|
-
|
|
9174
|
-
|
|
9175
|
-
|
|
9176
|
-
|
|
9177
|
-
</
|
|
9344
|
+
}
|
|
9345
|
+
<span class="k-expander-indicator">
|
|
9346
|
+
<kendo-icon-wrapper
|
|
9347
|
+
[name]="expanderIndicatorClasses"
|
|
9348
|
+
[customFontClass]="customExpanderIndicatorClasses"
|
|
9349
|
+
[svgIcon]="expanderSvgIcon"
|
|
9350
|
+
>
|
|
9351
|
+
</kendo-icon-wrapper>
|
|
9352
|
+
</span>
|
|
9178
9353
|
</div>
|
|
9179
9354
|
<div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
|
|
9180
|
-
|
|
9181
|
-
|
|
9182
|
-
|
|
9355
|
+
<div class="k-expander-content" [attr.aria-hidden]="!expanded">
|
|
9356
|
+
<ng-content></ng-content>
|
|
9357
|
+
</div>
|
|
9183
9358
|
</div>
|
|
9184
|
-
|
|
9359
|
+
`,
|
|
9185
9360
|
standalone: true,
|
|
9186
|
-
imports: [
|
|
9361
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
9187
9362
|
}]
|
|
9188
9363
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i1$2.AnimationBuilder }], propDecorators: { title: [{
|
|
9189
9364
|
type: Input
|
|
@@ -10384,43 +10559,49 @@ class TileLayoutItemComponent {
|
|
|
10384
10559
|
}
|
|
10385
10560
|
}
|
|
10386
10561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10388
|
-
|
|
10562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
|
|
10563
|
+
@if (title) {
|
|
10564
|
+
<kendo-tilelayout-item-header>
|
|
10389
10565
|
<h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
|
|
10390
|
-
|
|
10566
|
+
</kendo-tilelayout-item-header>
|
|
10567
|
+
}
|
|
10391
10568
|
<ng-content></ng-content>
|
|
10392
|
-
|
|
10569
|
+
@if (resizable) {
|
|
10570
|
+
@for (dir of resizeDirections; track dir) {
|
|
10393
10571
|
<div
|
|
10394
|
-
|
|
10395
|
-
|
|
10396
|
-
|
|
10397
|
-
|
|
10398
|
-
[resizeDirection]="dir">
|
|
10572
|
+
class="k-resize-handle k-cursor-{{dir}}-resize"
|
|
10573
|
+
kendoTileLayoutResizeHandle
|
|
10574
|
+
[rtl]="rtl"
|
|
10575
|
+
[resizeDirection]="dir">
|
|
10399
10576
|
</div>
|
|
10400
|
-
|
|
10401
|
-
|
|
10577
|
+
}
|
|
10578
|
+
}
|
|
10579
|
+
`, isInline: true, dependencies: [{ kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
|
|
10402
10580
|
}
|
|
10403
10581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
|
|
10404
10582
|
type: Component,
|
|
10405
10583
|
args: [{
|
|
10406
10584
|
selector: 'kendo-tilelayout-item',
|
|
10407
10585
|
template: `
|
|
10408
|
-
|
|
10586
|
+
@if (title) {
|
|
10587
|
+
<kendo-tilelayout-item-header>
|
|
10409
10588
|
<h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
|
|
10410
|
-
|
|
10589
|
+
</kendo-tilelayout-item-header>
|
|
10590
|
+
}
|
|
10411
10591
|
<ng-content></ng-content>
|
|
10412
|
-
|
|
10592
|
+
@if (resizable) {
|
|
10593
|
+
@for (dir of resizeDirections; track dir) {
|
|
10413
10594
|
<div
|
|
10414
|
-
|
|
10415
|
-
|
|
10416
|
-
|
|
10417
|
-
|
|
10418
|
-
[resizeDirection]="dir">
|
|
10595
|
+
class="k-resize-handle k-cursor-{{dir}}-resize"
|
|
10596
|
+
kendoTileLayoutResizeHandle
|
|
10597
|
+
[rtl]="rtl"
|
|
10598
|
+
[resizeDirection]="dir">
|
|
10419
10599
|
</div>
|
|
10420
|
-
|
|
10421
|
-
|
|
10600
|
+
}
|
|
10601
|
+
}
|
|
10602
|
+
`,
|
|
10422
10603
|
standalone: true,
|
|
10423
|
-
imports: [
|
|
10604
|
+
imports: [TileLayoutItemHeaderComponent, TileLayoutResizeHandleDirective]
|
|
10424
10605
|
}]
|
|
10425
10606
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: TileLayoutDraggingService }, { type: TileLayoutKeyboardNavigationService }], propDecorators: { title: [{
|
|
10426
10607
|
type: Input
|
|
@@ -10751,7 +10932,7 @@ class TileLayoutComponent {
|
|
|
10751
10932
|
}
|
|
10752
10933
|
};
|
|
10753
10934
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10754
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10935
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
|
|
10755
10936
|
LocalizationService,
|
|
10756
10937
|
TileLayoutDraggingService,
|
|
10757
10938
|
TileLayoutKeyboardNavigationService,
|
|
@@ -10762,16 +10943,18 @@ class TileLayoutComponent {
|
|
|
10762
10943
|
], queries: [{ propertyName: "items", predicate: TileLayoutItemComponent }], viewQueries: [{ propertyName: "hint", first: true, predicate: ["hint"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
10763
10944
|
<ng-content></ng-content>
|
|
10764
10945
|
<div #hint class="k-layout-item-hint"
|
|
10765
|
-
|
|
10766
|
-
|
|
10767
|
-
|
|
10768
|
-
|
|
10769
|
-
|
|
10770
|
-
|
|
10771
|
-
|
|
10946
|
+
[style.display]="'none'"
|
|
10947
|
+
[style.order]="targetOrder"
|
|
10948
|
+
[style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
|
|
10949
|
+
[style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
|
|
10950
|
+
[style.gridColumnStart]="currentColStart"
|
|
10951
|
+
[style.gridRowStart]="currentRowStart"
|
|
10952
|
+
[style.zIndex]="'1'">
|
|
10772
10953
|
</div>
|
|
10773
|
-
|
|
10774
|
-
|
|
10954
|
+
@if (showLicenseWatermark) {
|
|
10955
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
10956
|
+
}
|
|
10957
|
+
`, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
|
|
10775
10958
|
}
|
|
10776
10959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutComponent, decorators: [{
|
|
10777
10960
|
type: Component,
|
|
@@ -10789,18 +10972,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
10789
10972
|
template: `
|
|
10790
10973
|
<ng-content></ng-content>
|
|
10791
10974
|
<div #hint class="k-layout-item-hint"
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
|
|
10797
|
-
|
|
10798
|
-
|
|
10975
|
+
[style.display]="'none'"
|
|
10976
|
+
[style.order]="targetOrder"
|
|
10977
|
+
[style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
|
|
10978
|
+
[style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
|
|
10979
|
+
[style.gridColumnStart]="currentColStart"
|
|
10980
|
+
[style.gridRowStart]="currentRowStart"
|
|
10981
|
+
[style.zIndex]="'1'">
|
|
10799
10982
|
</div>
|
|
10800
|
-
|
|
10801
|
-
|
|
10983
|
+
@if (showLicenseWatermark) {
|
|
10984
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
10985
|
+
}
|
|
10986
|
+
`,
|
|
10802
10987
|
standalone: true,
|
|
10803
|
-
imports: [
|
|
10988
|
+
imports: [WatermarkOverlayComponent]
|
|
10804
10989
|
}]
|
|
10805
10990
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: TileLayoutDraggingService }, { type: TileLayoutKeyboardNavigationService }], propDecorators: { columns: [{
|
|
10806
10991
|
type: Input
|
|
@@ -11725,101 +11910,118 @@ class TimelineCardComponent {
|
|
|
11725
11910
|
}
|
|
11726
11911
|
}
|
|
11727
11912
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
11728
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
11913
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
|
|
11729
11914
|
<kendo-card
|
|
11730
|
-
|
|
11731
|
-
|
|
11732
|
-
|
|
11733
|
-
|
|
11734
|
-
|
|
11735
|
-
|
|
11736
|
-
|
|
11737
|
-
|
|
11738
|
-
|
|
11739
|
-
|
|
11740
|
-
|
|
11741
|
-
|
|
11915
|
+
[ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
|
|
11916
|
+
[width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
|
|
11917
|
+
class="k-card-with-callout k-card-vertical"
|
|
11918
|
+
(click)="toggle()"
|
|
11919
|
+
[attr.role]="role"
|
|
11920
|
+
[attr.aria-live]="ariaLive"
|
|
11921
|
+
[attr.aria-expanded]="ariaExpanded"
|
|
11922
|
+
[attr.tabindex]="tabIndex"
|
|
11923
|
+
>
|
|
11924
|
+
<span
|
|
11925
|
+
#callout
|
|
11926
|
+
class="k-timeline-card-callout k-card-callout"
|
|
11742
11927
|
[ngClass]="{
|
|
11743
11928
|
'k-callout-n': orientation === 'horizontal',
|
|
11744
11929
|
'k-callout-w': orientation === 'vertical' && !this.reversed,
|
|
11745
11930
|
'k-callout-e': orientation === 'vertical' && this.reversed
|
|
11746
11931
|
}"
|
|
11747
11932
|
>
|
|
11748
|
-
|
|
11749
|
-
|
|
11750
|
-
|
|
11751
|
-
|
|
11752
|
-
|
|
11753
|
-
|
|
11754
|
-
|
|
11933
|
+
</span>
|
|
11934
|
+
@if (event) {
|
|
11935
|
+
<div class="k-card-inner">
|
|
11936
|
+
<kendo-card-header>
|
|
11937
|
+
@if (headerTemplate) {
|
|
11938
|
+
<ng-template
|
|
11939
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef"
|
|
11940
|
+
[ngTemplateOutletContext]="{ $implicit: event, index: index}">
|
|
11755
11941
|
>
|
|
11756
|
-
|
|
11757
|
-
|
|
11758
|
-
|
|
11759
|
-
|
|
11760
|
-
|
|
11761
|
-
|
|
11762
|
-
|
|
11763
|
-
|
|
11764
|
-
|
|
11765
|
-
|
|
11766
|
-
|
|
11767
|
-
|
|
11768
|
-
|
|
11769
|
-
|
|
11770
|
-
|
|
11771
|
-
|
|
11772
|
-
|
|
11773
|
-
|
|
11774
|
-
|
|
11942
|
+
</ng-template>
|
|
11943
|
+
}
|
|
11944
|
+
@if (!headerTemplate) {
|
|
11945
|
+
<div kendoCardTitle>
|
|
11946
|
+
<span class="k-event-title">{{ event.title }}</span>
|
|
11947
|
+
@if (collapsible && orientation === 'vertical') {
|
|
11948
|
+
<button
|
|
11949
|
+
kendoButton
|
|
11950
|
+
[icon]="calloutFontIcon"
|
|
11951
|
+
[svgIcon]="calloutSvgIcon"
|
|
11952
|
+
class="k-event-collapse"
|
|
11953
|
+
fillMode="flat"
|
|
11954
|
+
[attr.aria-hidden]="true"
|
|
11955
|
+
tabindex="-1"
|
|
11956
|
+
type="button"
|
|
11957
|
+
></button>
|
|
11958
|
+
}
|
|
11959
|
+
</div>
|
|
11960
|
+
}
|
|
11961
|
+
@if (!headerTemplate) {
|
|
11962
|
+
<div kendoCardSubtitle >{{ event.subtitle }}</div>
|
|
11963
|
+
}
|
|
11964
|
+
</kendo-card-header>
|
|
11965
|
+
@if (event.description || event.images) {
|
|
11775
11966
|
<kendo-card-body
|
|
11776
|
-
|
|
11777
|
-
|
|
11778
|
-
|
|
11779
|
-
|
|
11780
|
-
|
|
11967
|
+
[@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
|
|
11968
|
+
(@toggle.start)="animationStart()"
|
|
11969
|
+
(@toggle.done)="animationDone($event)"
|
|
11970
|
+
>
|
|
11971
|
+
@if (bodyTemplate) {
|
|
11781
11972
|
<ng-template
|
|
11782
|
-
|
|
11783
|
-
|
|
11784
|
-
|
|
11785
|
-
>
|
|
11973
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
11974
|
+
[ngTemplateOutletContext]="{ $implicit: event, index: index}">
|
|
11975
|
+
>
|
|
11786
11976
|
</ng-template>
|
|
11787
|
-
|
|
11788
|
-
|
|
11789
|
-
|
|
11790
|
-
|
|
11791
|
-
|
|
11792
|
-
|
|
11793
|
-
|
|
11977
|
+
}
|
|
11978
|
+
@if (!bodyTemplate) {
|
|
11979
|
+
<div class="k-card-description">
|
|
11980
|
+
@if (event.description) {
|
|
11981
|
+
<p>{{ event.description }}</p>
|
|
11982
|
+
}
|
|
11983
|
+
@for (image of event.images; track image) {
|
|
11984
|
+
@if (image.alt) {
|
|
11985
|
+
<img kendoCardMedia [src]="image.src" [alt]="image.alt" />
|
|
11986
|
+
}
|
|
11987
|
+
@if (!image.alt) {
|
|
11988
|
+
<img kendoCardMedia [src]="image.src" />
|
|
11989
|
+
}
|
|
11990
|
+
}
|
|
11794
11991
|
</div>
|
|
11992
|
+
}
|
|
11795
11993
|
</kendo-card-body>
|
|
11796
|
-
|
|
11994
|
+
}
|
|
11995
|
+
@if (event.actions) {
|
|
11797
11996
|
<kendo-card-actions
|
|
11798
|
-
|
|
11799
|
-
|
|
11800
|
-
|
|
11997
|
+
[@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
|
|
11998
|
+
>
|
|
11999
|
+
@if (actionsTemplate) {
|
|
11801
12000
|
<ng-template
|
|
11802
|
-
|
|
11803
|
-
|
|
11804
|
-
|
|
11805
|
-
>
|
|
12001
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
12002
|
+
[ngTemplateOutletContext]="{ $implicit: event, index: index}">
|
|
12003
|
+
>
|
|
11806
12004
|
</ng-template>
|
|
11807
|
-
|
|
11808
|
-
|
|
11809
|
-
|
|
11810
|
-
|
|
11811
|
-
|
|
11812
|
-
|
|
11813
|
-
|
|
11814
|
-
|
|
12005
|
+
}
|
|
12006
|
+
@if (!actionsTemplate) {
|
|
12007
|
+
@for (action of event.actions; track action) {
|
|
12008
|
+
<a
|
|
12009
|
+
[href]="action.url"
|
|
12010
|
+
[target]="action.target === 'blank' ? '_blank' : '_self'"
|
|
12011
|
+
(click)="onActionClick($event)"
|
|
12012
|
+
class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
|
|
12013
|
+
role="button"
|
|
11815
12014
|
>
|
|
11816
|
-
|
|
11817
|
-
|
|
11818
|
-
|
|
12015
|
+
{{ action.text }}
|
|
12016
|
+
</a>
|
|
12017
|
+
}
|
|
12018
|
+
}
|
|
11819
12019
|
</kendo-card-actions>
|
|
12020
|
+
}
|
|
11820
12021
|
</div>
|
|
12022
|
+
}
|
|
11821
12023
|
</kendo-card>
|
|
11822
|
-
|
|
12024
|
+
`, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, 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"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
|
|
11823
12025
|
trigger('toggle', [
|
|
11824
12026
|
state('collapsed', style({
|
|
11825
12027
|
height: '0',
|
|
@@ -11862,101 +12064,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
11862
12064
|
selector: 'kendo-timeline-card',
|
|
11863
12065
|
template: `
|
|
11864
12066
|
<kendo-card
|
|
11865
|
-
|
|
11866
|
-
|
|
11867
|
-
|
|
11868
|
-
|
|
11869
|
-
|
|
11870
|
-
|
|
11871
|
-
|
|
11872
|
-
|
|
11873
|
-
|
|
11874
|
-
|
|
11875
|
-
|
|
11876
|
-
|
|
12067
|
+
[ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
|
|
12068
|
+
[width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
|
|
12069
|
+
class="k-card-with-callout k-card-vertical"
|
|
12070
|
+
(click)="toggle()"
|
|
12071
|
+
[attr.role]="role"
|
|
12072
|
+
[attr.aria-live]="ariaLive"
|
|
12073
|
+
[attr.aria-expanded]="ariaExpanded"
|
|
12074
|
+
[attr.tabindex]="tabIndex"
|
|
12075
|
+
>
|
|
12076
|
+
<span
|
|
12077
|
+
#callout
|
|
12078
|
+
class="k-timeline-card-callout k-card-callout"
|
|
11877
12079
|
[ngClass]="{
|
|
11878
12080
|
'k-callout-n': orientation === 'horizontal',
|
|
11879
12081
|
'k-callout-w': orientation === 'vertical' && !this.reversed,
|
|
11880
12082
|
'k-callout-e': orientation === 'vertical' && this.reversed
|
|
11881
12083
|
}"
|
|
11882
12084
|
>
|
|
11883
|
-
|
|
11884
|
-
|
|
11885
|
-
|
|
11886
|
-
|
|
11887
|
-
|
|
11888
|
-
|
|
11889
|
-
|
|
12085
|
+
</span>
|
|
12086
|
+
@if (event) {
|
|
12087
|
+
<div class="k-card-inner">
|
|
12088
|
+
<kendo-card-header>
|
|
12089
|
+
@if (headerTemplate) {
|
|
12090
|
+
<ng-template
|
|
12091
|
+
[ngTemplateOutlet]="headerTemplate?.templateRef"
|
|
12092
|
+
[ngTemplateOutletContext]="{ $implicit: event, index: index}">
|
|
11890
12093
|
>
|
|
11891
|
-
|
|
11892
|
-
|
|
11893
|
-
|
|
11894
|
-
|
|
11895
|
-
|
|
11896
|
-
|
|
11897
|
-
|
|
11898
|
-
|
|
11899
|
-
|
|
11900
|
-
|
|
11901
|
-
|
|
11902
|
-
|
|
11903
|
-
|
|
11904
|
-
|
|
11905
|
-
|
|
11906
|
-
|
|
11907
|
-
|
|
11908
|
-
|
|
11909
|
-
|
|
12094
|
+
</ng-template>
|
|
12095
|
+
}
|
|
12096
|
+
@if (!headerTemplate) {
|
|
12097
|
+
<div kendoCardTitle>
|
|
12098
|
+
<span class="k-event-title">{{ event.title }}</span>
|
|
12099
|
+
@if (collapsible && orientation === 'vertical') {
|
|
12100
|
+
<button
|
|
12101
|
+
kendoButton
|
|
12102
|
+
[icon]="calloutFontIcon"
|
|
12103
|
+
[svgIcon]="calloutSvgIcon"
|
|
12104
|
+
class="k-event-collapse"
|
|
12105
|
+
fillMode="flat"
|
|
12106
|
+
[attr.aria-hidden]="true"
|
|
12107
|
+
tabindex="-1"
|
|
12108
|
+
type="button"
|
|
12109
|
+
></button>
|
|
12110
|
+
}
|
|
12111
|
+
</div>
|
|
12112
|
+
}
|
|
12113
|
+
@if (!headerTemplate) {
|
|
12114
|
+
<div kendoCardSubtitle >{{ event.subtitle }}</div>
|
|
12115
|
+
}
|
|
12116
|
+
</kendo-card-header>
|
|
12117
|
+
@if (event.description || event.images) {
|
|
11910
12118
|
<kendo-card-body
|
|
11911
|
-
|
|
11912
|
-
|
|
11913
|
-
|
|
11914
|
-
|
|
11915
|
-
|
|
12119
|
+
[@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
|
|
12120
|
+
(@toggle.start)="animationStart()"
|
|
12121
|
+
(@toggle.done)="animationDone($event)"
|
|
12122
|
+
>
|
|
12123
|
+
@if (bodyTemplate) {
|
|
11916
12124
|
<ng-template
|
|
11917
|
-
|
|
11918
|
-
|
|
11919
|
-
|
|
11920
|
-
>
|
|
12125
|
+
[ngTemplateOutlet]="bodyTemplate?.templateRef"
|
|
12126
|
+
[ngTemplateOutletContext]="{ $implicit: event, index: index}">
|
|
12127
|
+
>
|
|
11921
12128
|
</ng-template>
|
|
11922
|
-
|
|
11923
|
-
|
|
11924
|
-
|
|
11925
|
-
|
|
11926
|
-
|
|
11927
|
-
|
|
11928
|
-
|
|
12129
|
+
}
|
|
12130
|
+
@if (!bodyTemplate) {
|
|
12131
|
+
<div class="k-card-description">
|
|
12132
|
+
@if (event.description) {
|
|
12133
|
+
<p>{{ event.description }}</p>
|
|
12134
|
+
}
|
|
12135
|
+
@for (image of event.images; track image) {
|
|
12136
|
+
@if (image.alt) {
|
|
12137
|
+
<img kendoCardMedia [src]="image.src" [alt]="image.alt" />
|
|
12138
|
+
}
|
|
12139
|
+
@if (!image.alt) {
|
|
12140
|
+
<img kendoCardMedia [src]="image.src" />
|
|
12141
|
+
}
|
|
12142
|
+
}
|
|
11929
12143
|
</div>
|
|
12144
|
+
}
|
|
11930
12145
|
</kendo-card-body>
|
|
11931
|
-
|
|
12146
|
+
}
|
|
12147
|
+
@if (event.actions) {
|
|
11932
12148
|
<kendo-card-actions
|
|
11933
|
-
|
|
11934
|
-
|
|
11935
|
-
|
|
12149
|
+
[@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
|
|
12150
|
+
>
|
|
12151
|
+
@if (actionsTemplate) {
|
|
11936
12152
|
<ng-template
|
|
11937
|
-
|
|
11938
|
-
|
|
11939
|
-
|
|
11940
|
-
>
|
|
12153
|
+
[ngTemplateOutlet]="actionsTemplate?.templateRef"
|
|
12154
|
+
[ngTemplateOutletContext]="{ $implicit: event, index: index}">
|
|
12155
|
+
>
|
|
11941
12156
|
</ng-template>
|
|
11942
|
-
|
|
11943
|
-
|
|
11944
|
-
|
|
11945
|
-
|
|
11946
|
-
|
|
11947
|
-
|
|
11948
|
-
|
|
11949
|
-
|
|
12157
|
+
}
|
|
12158
|
+
@if (!actionsTemplate) {
|
|
12159
|
+
@for (action of event.actions; track action) {
|
|
12160
|
+
<a
|
|
12161
|
+
[href]="action.url"
|
|
12162
|
+
[target]="action.target === 'blank' ? '_blank' : '_self'"
|
|
12163
|
+
(click)="onActionClick($event)"
|
|
12164
|
+
class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
|
|
12165
|
+
role="button"
|
|
11950
12166
|
>
|
|
11951
|
-
|
|
11952
|
-
|
|
11953
|
-
|
|
12167
|
+
{{ action.text }}
|
|
12168
|
+
</a>
|
|
12169
|
+
}
|
|
12170
|
+
}
|
|
11954
12171
|
</kendo-card-actions>
|
|
12172
|
+
}
|
|
11955
12173
|
</div>
|
|
12174
|
+
}
|
|
11956
12175
|
</kendo-card>
|
|
11957
|
-
|
|
12176
|
+
`,
|
|
11958
12177
|
standalone: true,
|
|
11959
|
-
imports: [CardComponent, NgStyle, NgClass,
|
|
12178
|
+
imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
|
|
11960
12179
|
}]
|
|
11961
12180
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimelineService }, { type: i0.Renderer2 }], propDecorators: { event: [{
|
|
11962
12181
|
type: Input
|
|
@@ -12464,105 +12683,112 @@ class TimelineHorizontalComponent {
|
|
|
12464
12683
|
this.cdr.markForCheck();
|
|
12465
12684
|
}
|
|
12466
12685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: TimelineService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
12467
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
12686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineHorizontalComponent, isStandalone: true, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
|
|
12468
12687
|
<div class="k-timeline-track-wrap" #track>
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
|
|
12476
|
-
|
|
12477
|
-
|
|
12478
|
-
|
|
12479
|
-
|
|
12480
|
-
|
|
12481
|
-
|
|
12482
|
-
|
|
12483
|
-
|
|
12484
|
-
|
|
12485
|
-
|
|
12486
|
-
|
|
12487
|
-
|
|
12488
|
-
|
|
12489
|
-
|
|
12490
|
-
|
|
12491
|
-
|
|
12492
|
-
|
|
12493
|
-
|
|
12494
|
-
|
|
12495
|
-
|
|
12496
|
-
|
|
12497
|
-
|
|
12498
|
-
|
|
12499
|
-
|
|
12500
|
-
|
|
12501
|
-
|
|
12502
|
-
|
|
12503
|
-
|
|
12504
|
-
|
|
12505
|
-
|
|
12506
|
-
|
|
12507
|
-
|
|
12508
|
-
|
|
12509
|
-
|
|
12510
|
-
|
|
12511
|
-
|
|
12512
|
-
|
|
12513
|
-
|
|
12514
|
-
|
|
12515
|
-
|
|
12516
|
-
|
|
12517
|
-
|
|
12518
|
-
|
|
12519
|
-
|
|
12520
|
-
|
|
12521
|
-
|
|
12522
|
-
|
|
12523
|
-
|
|
12524
|
-
|
|
12525
|
-
|
|
12526
|
-
|
|
12527
|
-
|
|
12528
|
-
</
|
|
12529
|
-
|
|
12530
|
-
|
|
12688
|
+
<button
|
|
12689
|
+
kendoButton
|
|
12690
|
+
[svgIcon]="svgLeftIcon"
|
|
12691
|
+
icon="caret-alt-left"
|
|
12692
|
+
class="k-timeline-arrow k-timeline-arrow-left"
|
|
12693
|
+
rounded="full"
|
|
12694
|
+
[title]="previousTitle"
|
|
12695
|
+
(click)="previousClick()"
|
|
12696
|
+
[disabled]="isFirstRange"
|
|
12697
|
+
tabindex="-1"
|
|
12698
|
+
type="button"
|
|
12699
|
+
></button>
|
|
12700
|
+
<button
|
|
12701
|
+
kendoButton
|
|
12702
|
+
[svgIcon]="svgRightIcon"
|
|
12703
|
+
icon="caret-alt-right"
|
|
12704
|
+
class="k-timeline-arrow k-timeline-arrow-right"
|
|
12705
|
+
rounded="full"
|
|
12706
|
+
[title]="nextTitle"
|
|
12707
|
+
(click)="nextClick()"
|
|
12708
|
+
[disabled]="isLastRange"
|
|
12709
|
+
tabindex="-1"
|
|
12710
|
+
type="button"
|
|
12711
|
+
></button>
|
|
12712
|
+
<div class="k-timeline-track">
|
|
12713
|
+
<ul class="k-timeline-scrollable-wrap"
|
|
12714
|
+
#scrollableTrack
|
|
12715
|
+
[attr.role]="'tablist'"
|
|
12716
|
+
[attr.tabindex]="'0'"
|
|
12717
|
+
[@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
|
|
12718
|
+
(@trackSlide.done)="onSlideDone()"
|
|
12719
|
+
(transitionend)="onTrackTransitionEnd()"
|
|
12720
|
+
>
|
|
12721
|
+
@for (event of trackItems; track event; let index = $index) {
|
|
12722
|
+
@if (event.isFlag) {
|
|
12723
|
+
<li
|
|
12724
|
+
#trackFlag
|
|
12725
|
+
class="k-timeline-flag-wrap k-timeline-track-item"
|
|
12726
|
+
[attr.role]="'none'"
|
|
12727
|
+
[attr.aria-hidden]="true"
|
|
12728
|
+
[ngStyle]="tabStyle()"
|
|
12729
|
+
>
|
|
12730
|
+
<span class="k-timeline-flag">{{ event.isFlag }}</span>
|
|
12731
|
+
</li>
|
|
12732
|
+
}
|
|
12733
|
+
@if (!event.isFlag) {
|
|
12734
|
+
<li
|
|
12735
|
+
#trackCircle
|
|
12736
|
+
class="k-timeline-track-item"
|
|
12737
|
+
[attr.role]="'tab'"
|
|
12738
|
+
(click)="navigateToEvent(index)"
|
|
12739
|
+
[ngStyle]="tabStyle()"
|
|
12740
|
+
>
|
|
12741
|
+
<div class="k-timeline-date-wrap">
|
|
12742
|
+
@if (showDateLabels) {
|
|
12743
|
+
<span class="k-timeline-date">
|
|
12744
|
+
{{ event.date | kendoDate: dateFormat }}
|
|
12745
|
+
</span>
|
|
12746
|
+
}
|
|
12747
|
+
</div>
|
|
12748
|
+
<span class="k-timeline-circle"></span>
|
|
12749
|
+
</li>
|
|
12750
|
+
}
|
|
12751
|
+
}
|
|
12752
|
+
</ul>
|
|
12753
|
+
</div>
|
|
12531
12754
|
</div>
|
|
12532
12755
|
<div class="k-timeline-events-list">
|
|
12756
|
+
@if (selectedEvent) {
|
|
12533
12757
|
<ul
|
|
12534
|
-
|
|
12535
|
-
|
|
12536
|
-
|
|
12537
|
-
|
|
12538
|
-
|
|
12539
|
-
|
|
12540
|
-
<li
|
|
12541
|
-
|
|
12542
|
-
|
|
12543
|
-
|
|
12544
|
-
|
|
12545
|
-
|
|
12546
|
-
|
|
12547
|
-
|
|
12548
|
-
|
|
12549
|
-
|
|
12550
|
-
|
|
12551
|
-
|
|
12552
|
-
|
|
12553
|
-
|
|
12554
|
-
|
|
12555
|
-
|
|
12556
|
-
|
|
12557
|
-
|
|
12558
|
-
|
|
12758
|
+
class="k-timeline-scrollable-wrap"
|
|
12759
|
+
[@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
|
|
12760
|
+
(@eventsSlide.done)="onSlideDone()"
|
|
12761
|
+
[ngStyle]="{'transform-origin': 'left top'}"
|
|
12762
|
+
>
|
|
12763
|
+
@for (event of eventsInInterval; track event; let index = $index) {
|
|
12764
|
+
<li
|
|
12765
|
+
#card
|
|
12766
|
+
class="k-timeline-event"
|
|
12767
|
+
(transitionend)="onTransitionEnd()"
|
|
12768
|
+
>
|
|
12769
|
+
<kendo-timeline-card
|
|
12770
|
+
[event]="selectedCardIndex === index ? selectedEvent : null"
|
|
12771
|
+
[expanded]="true"
|
|
12772
|
+
[collapsible]="collapsibleEvents"
|
|
12773
|
+
[calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
|
|
12774
|
+
[ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
|
|
12775
|
+
[tabIndex]="selectedCardIndex === index ? '0' : '-1'"
|
|
12776
|
+
[navigable]="navigable"
|
|
12777
|
+
[index]="selectedEventIndex"
|
|
12778
|
+
[headerTemplate]="headerTemplate"
|
|
12779
|
+
[bodyTemplate]="bodyTemplate"
|
|
12780
|
+
[actionsTemplate]="actionsTemplate"
|
|
12781
|
+
[eventHeight]="eventHeight"
|
|
12782
|
+
orientation="horizontal"
|
|
12559
12783
|
>
|
|
12560
|
-
|
|
12784
|
+
</kendo-timeline-card>
|
|
12561
12785
|
</li>
|
|
12786
|
+
}
|
|
12562
12787
|
</ul>
|
|
12563
|
-
|
|
12788
|
+
}
|
|
12789
|
+
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
|
|
12564
12790
|
</div>
|
|
12565
|
-
|
|
12791
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, 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"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
|
|
12566
12792
|
trigger('trackSlide', [
|
|
12567
12793
|
state('left', style({
|
|
12568
12794
|
transform: `translateX({{transformValue}}%)`,
|
|
@@ -12613,105 +12839,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
12613
12839
|
selector: 'kendo-timeline-horizontal',
|
|
12614
12840
|
template: `
|
|
12615
12841
|
<div class="k-timeline-track-wrap" #track>
|
|
12616
|
-
|
|
12617
|
-
|
|
12618
|
-
|
|
12619
|
-
|
|
12620
|
-
|
|
12621
|
-
|
|
12622
|
-
|
|
12623
|
-
|
|
12624
|
-
|
|
12625
|
-
|
|
12626
|
-
|
|
12627
|
-
|
|
12628
|
-
|
|
12629
|
-
|
|
12630
|
-
|
|
12631
|
-
|
|
12632
|
-
|
|
12633
|
-
|
|
12634
|
-
|
|
12635
|
-
|
|
12636
|
-
|
|
12637
|
-
|
|
12638
|
-
|
|
12639
|
-
|
|
12640
|
-
|
|
12641
|
-
|
|
12642
|
-
|
|
12643
|
-
|
|
12644
|
-
|
|
12645
|
-
|
|
12646
|
-
|
|
12647
|
-
|
|
12648
|
-
|
|
12649
|
-
|
|
12650
|
-
|
|
12651
|
-
|
|
12652
|
-
|
|
12653
|
-
|
|
12654
|
-
|
|
12655
|
-
|
|
12656
|
-
|
|
12657
|
-
|
|
12658
|
-
|
|
12659
|
-
|
|
12660
|
-
|
|
12661
|
-
|
|
12662
|
-
|
|
12663
|
-
|
|
12664
|
-
|
|
12665
|
-
|
|
12666
|
-
|
|
12667
|
-
|
|
12668
|
-
|
|
12669
|
-
|
|
12670
|
-
|
|
12671
|
-
|
|
12672
|
-
|
|
12673
|
-
|
|
12674
|
-
|
|
12675
|
-
</
|
|
12676
|
-
|
|
12677
|
-
|
|
12842
|
+
<button
|
|
12843
|
+
kendoButton
|
|
12844
|
+
[svgIcon]="svgLeftIcon"
|
|
12845
|
+
icon="caret-alt-left"
|
|
12846
|
+
class="k-timeline-arrow k-timeline-arrow-left"
|
|
12847
|
+
rounded="full"
|
|
12848
|
+
[title]="previousTitle"
|
|
12849
|
+
(click)="previousClick()"
|
|
12850
|
+
[disabled]="isFirstRange"
|
|
12851
|
+
tabindex="-1"
|
|
12852
|
+
type="button"
|
|
12853
|
+
></button>
|
|
12854
|
+
<button
|
|
12855
|
+
kendoButton
|
|
12856
|
+
[svgIcon]="svgRightIcon"
|
|
12857
|
+
icon="caret-alt-right"
|
|
12858
|
+
class="k-timeline-arrow k-timeline-arrow-right"
|
|
12859
|
+
rounded="full"
|
|
12860
|
+
[title]="nextTitle"
|
|
12861
|
+
(click)="nextClick()"
|
|
12862
|
+
[disabled]="isLastRange"
|
|
12863
|
+
tabindex="-1"
|
|
12864
|
+
type="button"
|
|
12865
|
+
></button>
|
|
12866
|
+
<div class="k-timeline-track">
|
|
12867
|
+
<ul class="k-timeline-scrollable-wrap"
|
|
12868
|
+
#scrollableTrack
|
|
12869
|
+
[attr.role]="'tablist'"
|
|
12870
|
+
[attr.tabindex]="'0'"
|
|
12871
|
+
[@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
|
|
12872
|
+
(@trackSlide.done)="onSlideDone()"
|
|
12873
|
+
(transitionend)="onTrackTransitionEnd()"
|
|
12874
|
+
>
|
|
12875
|
+
@for (event of trackItems; track event; let index = $index) {
|
|
12876
|
+
@if (event.isFlag) {
|
|
12877
|
+
<li
|
|
12878
|
+
#trackFlag
|
|
12879
|
+
class="k-timeline-flag-wrap k-timeline-track-item"
|
|
12880
|
+
[attr.role]="'none'"
|
|
12881
|
+
[attr.aria-hidden]="true"
|
|
12882
|
+
[ngStyle]="tabStyle()"
|
|
12883
|
+
>
|
|
12884
|
+
<span class="k-timeline-flag">{{ event.isFlag }}</span>
|
|
12885
|
+
</li>
|
|
12886
|
+
}
|
|
12887
|
+
@if (!event.isFlag) {
|
|
12888
|
+
<li
|
|
12889
|
+
#trackCircle
|
|
12890
|
+
class="k-timeline-track-item"
|
|
12891
|
+
[attr.role]="'tab'"
|
|
12892
|
+
(click)="navigateToEvent(index)"
|
|
12893
|
+
[ngStyle]="tabStyle()"
|
|
12894
|
+
>
|
|
12895
|
+
<div class="k-timeline-date-wrap">
|
|
12896
|
+
@if (showDateLabels) {
|
|
12897
|
+
<span class="k-timeline-date">
|
|
12898
|
+
{{ event.date | kendoDate: dateFormat }}
|
|
12899
|
+
</span>
|
|
12900
|
+
}
|
|
12901
|
+
</div>
|
|
12902
|
+
<span class="k-timeline-circle"></span>
|
|
12903
|
+
</li>
|
|
12904
|
+
}
|
|
12905
|
+
}
|
|
12906
|
+
</ul>
|
|
12907
|
+
</div>
|
|
12678
12908
|
</div>
|
|
12679
12909
|
<div class="k-timeline-events-list">
|
|
12910
|
+
@if (selectedEvent) {
|
|
12680
12911
|
<ul
|
|
12681
|
-
|
|
12682
|
-
|
|
12683
|
-
|
|
12684
|
-
|
|
12685
|
-
|
|
12686
|
-
|
|
12687
|
-
<li
|
|
12688
|
-
|
|
12689
|
-
|
|
12690
|
-
|
|
12691
|
-
|
|
12692
|
-
|
|
12693
|
-
|
|
12694
|
-
|
|
12695
|
-
|
|
12696
|
-
|
|
12697
|
-
|
|
12698
|
-
|
|
12699
|
-
|
|
12700
|
-
|
|
12701
|
-
|
|
12702
|
-
|
|
12703
|
-
|
|
12704
|
-
|
|
12705
|
-
|
|
12912
|
+
class="k-timeline-scrollable-wrap"
|
|
12913
|
+
[@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
|
|
12914
|
+
(@eventsSlide.done)="onSlideDone()"
|
|
12915
|
+
[ngStyle]="{'transform-origin': 'left top'}"
|
|
12916
|
+
>
|
|
12917
|
+
@for (event of eventsInInterval; track event; let index = $index) {
|
|
12918
|
+
<li
|
|
12919
|
+
#card
|
|
12920
|
+
class="k-timeline-event"
|
|
12921
|
+
(transitionend)="onTransitionEnd()"
|
|
12922
|
+
>
|
|
12923
|
+
<kendo-timeline-card
|
|
12924
|
+
[event]="selectedCardIndex === index ? selectedEvent : null"
|
|
12925
|
+
[expanded]="true"
|
|
12926
|
+
[collapsible]="collapsibleEvents"
|
|
12927
|
+
[calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
|
|
12928
|
+
[ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
|
|
12929
|
+
[tabIndex]="selectedCardIndex === index ? '0' : '-1'"
|
|
12930
|
+
[navigable]="navigable"
|
|
12931
|
+
[index]="selectedEventIndex"
|
|
12932
|
+
[headerTemplate]="headerTemplate"
|
|
12933
|
+
[bodyTemplate]="bodyTemplate"
|
|
12934
|
+
[actionsTemplate]="actionsTemplate"
|
|
12935
|
+
[eventHeight]="eventHeight"
|
|
12936
|
+
orientation="horizontal"
|
|
12706
12937
|
>
|
|
12707
|
-
|
|
12938
|
+
</kendo-timeline-card>
|
|
12708
12939
|
</li>
|
|
12940
|
+
}
|
|
12709
12941
|
</ul>
|
|
12710
|
-
|
|
12942
|
+
}
|
|
12943
|
+
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
|
|
12711
12944
|
</div>
|
|
12712
|
-
|
|
12945
|
+
`,
|
|
12713
12946
|
standalone: true,
|
|
12714
|
-
imports: [ButtonComponent,
|
|
12947
|
+
imports: [ButtonComponent, NgStyle, TimelineCardComponent, DatePipe, ResizeSensorComponent]
|
|
12715
12948
|
}]
|
|
12716
12949
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: TimelineService }, { type: i1.LocalizationService }], propDecorators: { events: [{
|
|
12717
12950
|
type: Input
|
|
@@ -12822,40 +13055,46 @@ class TimelineVerticalComponent {
|
|
|
12822
13055
|
this.renderer.setAttribute(cardElement, 'aria-describedby', dateLabelId);
|
|
12823
13056
|
}
|
|
12824
13057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
12825
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
12826
|
-
|
|
12827
|
-
|
|
12828
|
-
|
|
12829
|
-
|
|
13058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineVerticalComponent, isStandalone: true, selector: "kendo-timeline-vertical", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventWidth: "eventWidth", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "cards", predicate: ["card"], descendants: true }, { propertyName: "dateElementRefs", predicate: ["dateWrap"], descendants: true }, { propertyName: "innerDateElementRefs", predicate: ["innerDate"], descendants: true }], exportAs: ["kendoTimelineVertical"], ngImport: i0, template: `
|
|
13059
|
+
@if (events && events.length > 0) {
|
|
13060
|
+
<ul>
|
|
13061
|
+
@for (event of events; track event; let i = $index) {
|
|
13062
|
+
@if (event.flag) {
|
|
13063
|
+
<li class="k-timeline-flag-wrap">
|
|
13064
|
+
<span class="k-timeline-flag">{{ event.flag }}</span>
|
|
12830
13065
|
</li>
|
|
12831
|
-
|
|
12832
|
-
|
|
12833
|
-
|
|
12834
|
-
|
|
12835
|
-
|
|
12836
|
-
|
|
12837
|
-
|
|
12838
|
-
|
|
12839
|
-
|
|
12840
|
-
|
|
12841
|
-
|
|
12842
|
-
|
|
12843
|
-
|
|
12844
|
-
|
|
12845
|
-
|
|
12846
|
-
|
|
12847
|
-
|
|
12848
|
-
|
|
12849
|
-
|
|
12850
|
-
|
|
12851
|
-
|
|
12852
|
-
|
|
12853
|
-
|
|
12854
|
-
|
|
12855
|
-
|
|
12856
|
-
|
|
12857
|
-
|
|
12858
|
-
|
|
13066
|
+
}
|
|
13067
|
+
<li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
|
|
13068
|
+
<div class="k-timeline-date-wrap" #dateWrap>
|
|
13069
|
+
@if (showDateLabels) {
|
|
13070
|
+
<span class="k-timeline-date" #innerDate>
|
|
13071
|
+
{{ event.date | kendoDate: dateFormat }}
|
|
13072
|
+
</span>
|
|
13073
|
+
}
|
|
13074
|
+
</div>
|
|
13075
|
+
<span class="k-timeline-circle"></span>
|
|
13076
|
+
<kendo-timeline-card
|
|
13077
|
+
#card
|
|
13078
|
+
[event]="event"
|
|
13079
|
+
[expanded]="event.expanded || !collapsibleEvents"
|
|
13080
|
+
[collapsible]="collapsibleEvents"
|
|
13081
|
+
[reversed]="alterMode && i % 2 === 0"
|
|
13082
|
+
[tabIndex]="'0'"
|
|
13083
|
+
[navigable]="navigable"
|
|
13084
|
+
[animationDuration]="animationDuration"
|
|
13085
|
+
[headerTemplate]="headerTemplate"
|
|
13086
|
+
[bodyTemplate]="bodyTemplate"
|
|
13087
|
+
[actionsTemplate]="actionsTemplate"
|
|
13088
|
+
[index]="i"
|
|
13089
|
+
[eventWidth]="eventWidth"
|
|
13090
|
+
orientation="vertical"
|
|
13091
|
+
>
|
|
13092
|
+
</kendo-timeline-card>
|
|
13093
|
+
</li>
|
|
13094
|
+
}
|
|
13095
|
+
</ul>
|
|
13096
|
+
}
|
|
13097
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
|
|
12859
13098
|
}
|
|
12860
13099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
|
|
12861
13100
|
type: Component,
|
|
@@ -12864,41 +13103,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
12864
13103
|
exportAs: 'kendoTimelineVertical',
|
|
12865
13104
|
selector: 'kendo-timeline-vertical',
|
|
12866
13105
|
template: `
|
|
12867
|
-
|
|
12868
|
-
|
|
12869
|
-
|
|
12870
|
-
|
|
13106
|
+
@if (events && events.length > 0) {
|
|
13107
|
+
<ul>
|
|
13108
|
+
@for (event of events; track event; let i = $index) {
|
|
13109
|
+
@if (event.flag) {
|
|
13110
|
+
<li class="k-timeline-flag-wrap">
|
|
13111
|
+
<span class="k-timeline-flag">{{ event.flag }}</span>
|
|
12871
13112
|
</li>
|
|
12872
|
-
|
|
12873
|
-
|
|
12874
|
-
|
|
12875
|
-
|
|
12876
|
-
|
|
12877
|
-
|
|
12878
|
-
|
|
12879
|
-
|
|
12880
|
-
|
|
12881
|
-
|
|
12882
|
-
|
|
12883
|
-
|
|
12884
|
-
|
|
12885
|
-
|
|
12886
|
-
|
|
12887
|
-
|
|
12888
|
-
|
|
12889
|
-
|
|
12890
|
-
|
|
12891
|
-
|
|
12892
|
-
|
|
12893
|
-
|
|
12894
|
-
|
|
12895
|
-
|
|
12896
|
-
|
|
12897
|
-
|
|
12898
|
-
|
|
12899
|
-
|
|
13113
|
+
}
|
|
13114
|
+
<li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
|
|
13115
|
+
<div class="k-timeline-date-wrap" #dateWrap>
|
|
13116
|
+
@if (showDateLabels) {
|
|
13117
|
+
<span class="k-timeline-date" #innerDate>
|
|
13118
|
+
{{ event.date | kendoDate: dateFormat }}
|
|
13119
|
+
</span>
|
|
13120
|
+
}
|
|
13121
|
+
</div>
|
|
13122
|
+
<span class="k-timeline-circle"></span>
|
|
13123
|
+
<kendo-timeline-card
|
|
13124
|
+
#card
|
|
13125
|
+
[event]="event"
|
|
13126
|
+
[expanded]="event.expanded || !collapsibleEvents"
|
|
13127
|
+
[collapsible]="collapsibleEvents"
|
|
13128
|
+
[reversed]="alterMode && i % 2 === 0"
|
|
13129
|
+
[tabIndex]="'0'"
|
|
13130
|
+
[navigable]="navigable"
|
|
13131
|
+
[animationDuration]="animationDuration"
|
|
13132
|
+
[headerTemplate]="headerTemplate"
|
|
13133
|
+
[bodyTemplate]="bodyTemplate"
|
|
13134
|
+
[actionsTemplate]="actionsTemplate"
|
|
13135
|
+
[index]="i"
|
|
13136
|
+
[eventWidth]="eventWidth"
|
|
13137
|
+
orientation="vertical"
|
|
13138
|
+
>
|
|
13139
|
+
</kendo-timeline-card>
|
|
13140
|
+
</li>
|
|
13141
|
+
}
|
|
13142
|
+
</ul>
|
|
13143
|
+
}
|
|
13144
|
+
`,
|
|
12900
13145
|
standalone: true,
|
|
12901
|
-
imports: [
|
|
13146
|
+
imports: [NgClass, TimelineCardComponent, DatePipe]
|
|
12902
13147
|
}]
|
|
12903
13148
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { events: [{
|
|
12904
13149
|
type: Input
|
|
@@ -13240,7 +13485,7 @@ class TimelineComponent {
|
|
|
13240
13485
|
}));
|
|
13241
13486
|
}
|
|
13242
13487
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, deps: [{ token: TimelineService }], target: i0.ɵɵFactoryTarget.Component });
|
|
13243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13488
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", eventWidth: "eventWidth", eventHeight: "eventHeight", dateFormat: "dateFormat" }, outputs: { onToggle: "onToggle", onActionClick: "onActionClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-timeline": "this.hostClass", "class.k-timeline-vertical": "this.verticalClass", "class.k-timeline-horizontal": "this.horizontalClass", "class.k-timeline-alternating": "this.alternatingClass", "class.k-timeline-collapsible": "this.collapsibleClass" } }, providers: [
|
|
13244
13489
|
TimelineService,
|
|
13245
13490
|
LocalizationService,
|
|
13246
13491
|
{
|
|
@@ -13249,17 +13494,17 @@ class TimelineComponent {
|
|
|
13249
13494
|
}
|
|
13250
13495
|
], queries: [{ propertyName: "cardHeaderTemplate", predicate: TimelineCardHeaderTemplateDirective }, { propertyName: "cardBodyTemplate", predicate: TimelineCardBodyTemplateDirective }, { propertyName: "cardActionsTemplate", predicate: TimelineCardActionsTemplateDirective }], viewQueries: [{ propertyName: "timelineHorizontal", first: true, predicate: TimelineHorizontalComponent, descendants: true }, { propertyName: "timelineVertical", first: true, predicate: TimelineVerticalComponent, descendants: true }], exportAs: ["kendoTimeline"], ngImport: i0, template: `
|
|
13251
13496
|
<ng-container kendoTimelineLocalizedMessages
|
|
13252
|
-
|
|
13253
|
-
|
|
13254
|
-
|
|
13497
|
+
i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
|
|
13498
|
+
previous="previous"
|
|
13499
|
+
>
|
|
13255
13500
|
</ng-container>
|
|
13256
13501
|
<ng-container kendoTimelineLocalizedMessages
|
|
13257
|
-
|
|
13258
|
-
|
|
13259
|
-
|
|
13502
|
+
i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
|
|
13503
|
+
next="next"
|
|
13504
|
+
>
|
|
13260
13505
|
</ng-container>
|
|
13261
|
-
|
|
13262
|
-
|
|
13506
|
+
@if (orientation === 'vertical') {
|
|
13507
|
+
<kendo-timeline-vertical
|
|
13263
13508
|
[events]="events"
|
|
13264
13509
|
[alterMode]="alterMode"
|
|
13265
13510
|
[collapsibleEvents]="collapsibleEvents"
|
|
@@ -13271,10 +13516,11 @@ class TimelineComponent {
|
|
|
13271
13516
|
[headerTemplate]="headerTemplate"
|
|
13272
13517
|
[bodyTemplate]="bodyTemplate"
|
|
13273
13518
|
[actionsTemplate]="actionsTemplate"
|
|
13274
|
-
|
|
13275
|
-
|
|
13276
|
-
|
|
13277
|
-
|
|
13519
|
+
>
|
|
13520
|
+
</kendo-timeline-vertical>
|
|
13521
|
+
}
|
|
13522
|
+
@if (orientation === 'horizontal') {
|
|
13523
|
+
<kendo-timeline-horizontal
|
|
13278
13524
|
[events]="events"
|
|
13279
13525
|
[collapsibleEvents]="false"
|
|
13280
13526
|
[navigable]="navigable"
|
|
@@ -13285,9 +13531,10 @@ class TimelineComponent {
|
|
|
13285
13531
|
[headerTemplate]="headerTemplate"
|
|
13286
13532
|
[bodyTemplate]="bodyTemplate"
|
|
13287
13533
|
[actionsTemplate]="actionsTemplate"
|
|
13288
|
-
|
|
13289
|
-
|
|
13290
|
-
|
|
13534
|
+
>
|
|
13535
|
+
</kendo-timeline-horizontal>
|
|
13536
|
+
}
|
|
13537
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
|
|
13291
13538
|
}
|
|
13292
13539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
13293
13540
|
type: Component,
|
|
@@ -13304,17 +13551,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13304
13551
|
selector: 'kendo-timeline',
|
|
13305
13552
|
template: `
|
|
13306
13553
|
<ng-container kendoTimelineLocalizedMessages
|
|
13307
|
-
|
|
13308
|
-
|
|
13309
|
-
|
|
13554
|
+
i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
|
|
13555
|
+
previous="previous"
|
|
13556
|
+
>
|
|
13310
13557
|
</ng-container>
|
|
13311
13558
|
<ng-container kendoTimelineLocalizedMessages
|
|
13312
|
-
|
|
13313
|
-
|
|
13314
|
-
|
|
13559
|
+
i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
|
|
13560
|
+
next="next"
|
|
13561
|
+
>
|
|
13315
13562
|
</ng-container>
|
|
13316
|
-
|
|
13317
|
-
|
|
13563
|
+
@if (orientation === 'vertical') {
|
|
13564
|
+
<kendo-timeline-vertical
|
|
13318
13565
|
[events]="events"
|
|
13319
13566
|
[alterMode]="alterMode"
|
|
13320
13567
|
[collapsibleEvents]="collapsibleEvents"
|
|
@@ -13326,10 +13573,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13326
13573
|
[headerTemplate]="headerTemplate"
|
|
13327
13574
|
[bodyTemplate]="bodyTemplate"
|
|
13328
13575
|
[actionsTemplate]="actionsTemplate"
|
|
13329
|
-
|
|
13330
|
-
|
|
13331
|
-
|
|
13332
|
-
|
|
13576
|
+
>
|
|
13577
|
+
</kendo-timeline-vertical>
|
|
13578
|
+
}
|
|
13579
|
+
@if (orientation === 'horizontal') {
|
|
13580
|
+
<kendo-timeline-horizontal
|
|
13333
13581
|
[events]="events"
|
|
13334
13582
|
[collapsibleEvents]="false"
|
|
13335
13583
|
[navigable]="navigable"
|
|
@@ -13340,11 +13588,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13340
13588
|
[headerTemplate]="headerTemplate"
|
|
13341
13589
|
[bodyTemplate]="bodyTemplate"
|
|
13342
13590
|
[actionsTemplate]="actionsTemplate"
|
|
13343
|
-
|
|
13344
|
-
|
|
13345
|
-
|
|
13591
|
+
>
|
|
13592
|
+
</kendo-timeline-horizontal>
|
|
13593
|
+
}
|
|
13594
|
+
`,
|
|
13346
13595
|
standalone: true,
|
|
13347
|
-
imports: [LocalizedTimelineMessagesDirective,
|
|
13596
|
+
imports: [LocalizedTimelineMessagesDirective, TimelineVerticalComponent, TimelineHorizontalComponent]
|
|
13348
13597
|
}]
|
|
13349
13598
|
}], ctorParameters: () => [{ type: TimelineService }], propDecorators: { events: [{
|
|
13350
13599
|
type: Input
|