@progress/kendo-angular-layout 19.1.2-develop.4 → 19.1.2-develop.5
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/avatar/avatar.component.d.ts +43 -47
- package/avatar/l10n/custom-messages.component.d.ts +9 -1
- package/avatar/l10n/messages.d.ts +1 -1
- package/avatar/models/fill.d.ts +1 -1
- package/avatar/models/rounded.d.ts +1 -1
- package/avatar/models/size.d.ts +1 -1
- package/avatar/models/theme-color.d.ts +1 -1
- package/avatar.module.d.ts +14 -2
- package/card/card-actions.component.d.ts +16 -15
- package/card/card-body.component.d.ts +9 -1
- package/card/card-footer.component.d.ts +9 -1
- package/card/card-header.component.d.ts +10 -1
- package/card/card.component.d.ts +19 -6
- package/card/directives/card-media.directive.d.ts +10 -1
- package/card/directives/card-separator.directive.d.ts +10 -4
- package/card/directives/card-subtitle.directive.d.ts +8 -1
- package/card/directives/card-title.directive.d.ts +8 -1
- package/card/models/actions-layout.d.ts +1 -8
- package/card/models/card-action.d.ts +4 -4
- package/card.module.d.ts +14 -2
- package/codemods/utils.js +0 -3
- package/common/orientation.d.ts +1 -1
- package/common/preventable-event.d.ts +3 -6
- package/directives.d.ts +13 -13
- package/drawer/drawer-container.component.d.ts +13 -1
- package/drawer/drawer-content.component.d.ts +9 -1
- package/drawer/drawer.component.d.ts +48 -47
- package/drawer/events/select-event.d.ts +5 -5
- package/drawer/models/drawer-animation.interface.d.ts +1 -2
- package/drawer/models/drawer-item-expand.interface.d.ts +1 -1
- package/drawer/models/drawer-item.interface.d.ts +15 -17
- package/drawer/models/mode.d.ts +4 -3
- package/drawer/models/position.d.ts +1 -6
- package/drawer/template-directives/drawer-template.directive.d.ts +18 -5
- package/drawer/template-directives/footer-template.directive.d.ts +11 -3
- package/drawer/template-directives/header-template.directive.d.ts +11 -3
- package/drawer/template-directives/item-template.directive.d.ts +19 -3
- package/drawer.module.d.ts +14 -2
- package/esm2022/avatar/avatar.component.mjs +43 -47
- package/esm2022/avatar/l10n/custom-messages.component.mjs +9 -1
- package/esm2022/avatar/l10n/messages.mjs +1 -1
- package/esm2022/avatar.module.mjs +14 -2
- package/esm2022/card/card-actions.component.mjs +16 -15
- package/esm2022/card/card-body.component.mjs +9 -1
- package/esm2022/card/card-footer.component.mjs +9 -1
- package/esm2022/card/card-header.component.mjs +10 -1
- package/esm2022/card/card.component.mjs +19 -6
- package/esm2022/card/directives/card-media.directive.mjs +10 -1
- package/esm2022/card/directives/card-separator.directive.mjs +10 -4
- package/esm2022/card/directives/card-subtitle.directive.mjs +8 -1
- package/esm2022/card/directives/card-title.directive.mjs +8 -1
- package/esm2022/card/models/card-action.mjs +4 -4
- package/esm2022/card.module.mjs +14 -2
- package/esm2022/common/preventable-event.mjs +3 -6
- package/esm2022/directives.mjs +13 -13
- package/esm2022/drawer/drawer-container.component.mjs +13 -1
- package/esm2022/drawer/drawer-content.component.mjs +9 -1
- package/esm2022/drawer/drawer.component.mjs +48 -47
- package/esm2022/drawer/events/select-event.mjs +5 -5
- package/esm2022/drawer/template-directives/drawer-template.directive.mjs +18 -5
- package/esm2022/drawer/template-directives/footer-template.directive.mjs +11 -3
- package/esm2022/drawer/template-directives/header-template.directive.mjs +11 -3
- package/esm2022/drawer/template-directives/item-template.directive.mjs +19 -3
- package/esm2022/drawer.module.mjs +14 -2
- package/esm2022/expansionpanel/events/action-event.mjs +2 -2
- package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +12 -3
- package/esm2022/expansionpanel/expansionpanel.component.mjs +20 -27
- package/esm2022/expansionpanel.module.mjs +14 -2
- package/esm2022/gridlayout.module.mjs +14 -2
- package/esm2022/layout.module.mjs +10 -21
- package/esm2022/layouts/grid-layout.component.mjs +24 -17
- package/esm2022/layouts/gridlayout-item.component.mjs +16 -4
- package/esm2022/layouts/stack-layout.component.mjs +15 -6
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/panelbar/events/collapse-event.mjs +2 -2
- package/esm2022/panelbar/events/expand-event.mjs +2 -2
- package/esm2022/panelbar/events/item-click-event.mjs +3 -3
- package/esm2022/panelbar/events/select-event.mjs +2 -2
- package/esm2022/panelbar/events/state-change-event.mjs +2 -2
- package/esm2022/panelbar/panelbar-content.directive.mjs +12 -1
- package/esm2022/panelbar/panelbar-expand-mode.mjs +3 -4
- package/esm2022/panelbar/panelbar-item-template.directive.mjs +12 -1
- package/esm2022/panelbar/panelbar-item-title.directive.mjs +12 -19
- package/esm2022/panelbar/panelbar-item.component.mjs +26 -11
- package/esm2022/panelbar/panelbar.component.mjs +40 -17
- package/esm2022/panelbar.module.mjs +13 -8
- package/esm2022/splitter/splitter-pane.component.mjs +40 -20
- package/esm2022/splitter/splitter.component.mjs +25 -41
- package/esm2022/splitter.module.mjs +13 -5
- package/esm2022/stacklayout.module.mjs +14 -2
- package/esm2022/stepper/events/activate-event.mjs +5 -5
- package/esm2022/stepper/localization/custom-messages.component.mjs +9 -1
- package/esm2022/stepper/localization/messages.mjs +1 -1
- package/esm2022/stepper/stepper.component.mjs +32 -39
- package/esm2022/stepper/stepper.service.mjs +4 -4
- package/esm2022/stepper/template-directives/indicator-template.directive.mjs +10 -1
- package/esm2022/stepper/template-directives/label-template.directive.mjs +10 -1
- package/esm2022/stepper/template-directives/step-template.directive.mjs +12 -1
- package/esm2022/stepper.module.mjs +14 -2
- package/esm2022/tabstrip/directives/tab-content.directive.mjs +12 -24
- package/esm2022/tabstrip/directives/tab-title.directive.mjs +10 -29
- package/esm2022/tabstrip/events/select-event.mjs +3 -1
- package/esm2022/tabstrip/events/tabclose-event.mjs +2 -1
- package/esm2022/tabstrip/events/tabscroll-event.mjs +2 -2
- package/esm2022/tabstrip/localization/custom-messages.component.mjs +11 -2
- package/esm2022/tabstrip/localization/messages.mjs +3 -3
- package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +30 -17
- package/esm2022/tabstrip/tabstrip.component.mjs +49 -37
- package/esm2022/tabstrip.module.mjs +13 -7
- package/esm2022/tilelayout/reorder-event.mjs +3 -2
- package/esm2022/tilelayout/resize-event.mjs +3 -2
- package/esm2022/tilelayout/tilelayout-item-body.component.mjs +10 -1
- package/esm2022/tilelayout/tilelayout-item-header.component.mjs +12 -2
- package/esm2022/tilelayout/tilelayout-item.component.mjs +20 -10
- package/esm2022/tilelayout/tilelayout.component.mjs +31 -26
- package/esm2022/tilelayout.module.mjs +13 -7
- package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +11 -2
- package/esm2022/timeline/templates/timeline-card-body.directive.mjs +11 -2
- package/esm2022/timeline/templates/timeline-card-header.directive.mjs +12 -2
- package/esm2022/timeline/timeline.component.mjs +3 -0
- package/esm2022/timeline.module.mjs +13 -4
- package/expansionpanel/events/action-event.d.ts +3 -3
- package/expansionpanel/expansionpanel-title.directive.d.ts +12 -3
- package/expansionpanel/expansionpanel.component.d.ts +20 -27
- package/expansionpanel.module.d.ts +14 -2
- package/fesm2022/progress-kendo-angular-layout.mjs +1072 -641
- package/gridlayout.module.d.ts +14 -2
- package/layout.module.d.ts +10 -21
- package/layouts/grid-layout.component.d.ts +24 -17
- package/layouts/gridlayout-item.component.d.ts +16 -4
- package/layouts/models/gridlayout-gap-settings.d.ts +3 -3
- package/layouts/models/gridlayout-row-col-size.d.ts +4 -4
- package/layouts/models/layout-align-settings.d.ts +3 -3
- package/layouts/models/layout-horizontal-align.d.ts +1 -1
- package/layouts/models/layout-vertical-align.d.ts +1 -1
- package/layouts/stack-layout.component.d.ts +15 -6
- package/package.json +9 -9
- package/panelbar/events/collapse-event.d.ts +2 -2
- package/panelbar/events/expand-event.d.ts +2 -2
- package/panelbar/events/item-click-event.d.ts +3 -3
- package/panelbar/events/select-event.d.ts +2 -2
- package/panelbar/events/state-change-event.d.ts +2 -2
- package/panelbar/panelbar-content.directive.d.ts +12 -1
- package/panelbar/panelbar-expand-mode.d.ts +3 -4
- package/panelbar/panelbar-item-model.d.ts +6 -6
- package/panelbar/panelbar-item-template.directive.d.ts +12 -1
- package/panelbar/panelbar-item-title.directive.d.ts +12 -19
- package/panelbar/panelbar-item.component.d.ts +24 -9
- package/panelbar/panelbar.component.d.ts +40 -17
- package/panelbar.module.d.ts +13 -8
- package/splitter/splitter-pane.component.d.ts +40 -20
- package/splitter/splitter.component.d.ts +24 -40
- package/splitter.module.d.ts +13 -5
- package/stacklayout.module.d.ts +14 -2
- package/stepper/events/activate-event.d.ts +5 -5
- package/stepper/localization/custom-messages.component.d.ts +9 -1
- package/stepper/localization/messages.d.ts +1 -1
- package/stepper/models/orientation.d.ts +1 -3
- package/stepper/models/step-predicate.d.ts +5 -6
- package/stepper/models/step-type.d.ts +1 -4
- package/stepper/models/stepper-step.interface.d.ts +12 -12
- package/stepper/stepper.component.d.ts +32 -39
- package/stepper/template-directives/indicator-template.directive.d.ts +10 -1
- package/stepper/template-directives/label-template.directive.d.ts +10 -1
- package/stepper/template-directives/step-template.directive.d.ts +12 -1
- package/stepper.module.d.ts +14 -2
- package/tabstrip/directives/tab-content.directive.d.ts +12 -24
- package/tabstrip/directives/tab-title.directive.d.ts +10 -29
- package/tabstrip/events/select-event.d.ts +3 -1
- package/tabstrip/events/tabclose-event.d.ts +2 -1
- package/tabstrip/events/tabscroll-event.d.ts +2 -2
- package/tabstrip/localization/custom-messages.component.d.ts +11 -2
- package/tabstrip/localization/messages.d.ts +3 -3
- package/tabstrip/models/scroll-buttons-visibility.d.ts +1 -1
- package/tabstrip/models/scrollable-settings.d.ts +17 -22
- package/tabstrip/models/size.d.ts +1 -1
- package/tabstrip/models/tab-alignment.d.ts +1 -1
- package/tabstrip/models/tab-position.d.ts +1 -1
- package/tabstrip/models/tabstrip-tab.component.d.ts +30 -17
- package/tabstrip/tabstrip.component.d.ts +41 -29
- package/tabstrip.module.d.ts +13 -7
- package/tilelayout/models/flowmode.type.d.ts +7 -8
- package/tilelayout/models/gap.interface.d.ts +3 -5
- package/tilelayout/reorder-event.d.ts +3 -2
- package/tilelayout/resize-event.d.ts +3 -2
- package/tilelayout/tilelayout-item-body.component.d.ts +10 -1
- package/tilelayout/tilelayout-item-header.component.d.ts +12 -2
- package/tilelayout/tilelayout-item.component.d.ts +20 -10
- package/tilelayout/tilelayout.component.d.ts +31 -26
- package/tilelayout.module.d.ts +13 -7
- package/timeline/events/navigation-direction.d.ts +6 -0
- package/timeline/models/anchor-target.d.ts +6 -0
- package/timeline/templates/timeline-card-actions.directive.d.ts +11 -2
- package/timeline/templates/timeline-card-body.directive.d.ts +11 -2
- package/timeline/templates/timeline-card-header.directive.d.ts +12 -2
- package/timeline/timeline.component.d.ts +3 -0
- package/timeline.module.d.ts +13 -4
package/directives.d.ts
CHANGED
@@ -47,54 +47,54 @@ import { TimelineCardBodyTemplateDirective } from "./timeline/templates/timeline
|
|
47
47
|
import { TimelineCardHeaderTemplateDirective } from "./timeline/templates/timeline-card-header.directive";
|
48
48
|
import { TimelineComponent } from "./timeline/timeline.component";
|
49
49
|
/**
|
50
|
-
*
|
50
|
+
* Use the `KENDO_AVATAR` utility array to add all Avatar-related components and directives to a standalone Angular component.
|
51
51
|
*/
|
52
52
|
export declare const KENDO_AVATAR: readonly [typeof AvatarComponent, typeof AvatarCustomMessagesComponent];
|
53
53
|
/**
|
54
|
-
*
|
54
|
+
* Use the `KENDO_CARD` utility array to add all Card-related components and directives to a standalone Angular component.
|
55
55
|
*/
|
56
56
|
export declare const KENDO_CARD: readonly [typeof CardComponent, typeof CardActionsComponent, typeof CardBodyComponent, typeof CardFooterComponent, typeof CardHeaderComponent, typeof CardMediaDirective, typeof CardSeparatorDirective, typeof CardSubtitleDirective, typeof CardTitleDirective];
|
57
57
|
/**
|
58
|
-
*
|
58
|
+
* Use the `KENDO_DRAWER` utility array to add all Drawer-related components and directives to a standalone Angular component.
|
59
59
|
*/
|
60
60
|
export declare const KENDO_DRAWER: readonly [typeof DrawerComponent, typeof DrawerContainerComponent, typeof DrawerContentComponent, typeof DrawerTemplateDirective, typeof DrawerFooterTemplateDirective, typeof DrawerHeaderTemplateDirective, typeof DrawerItemTemplateDirective];
|
61
61
|
/**
|
62
|
-
*
|
62
|
+
* Use the `KENDO_EXPANSIONPANEL` utility array to add all ExpansionPanel-related components and directives to a standalone Angular component.
|
63
63
|
*/
|
64
64
|
export declare const KENDO_EXPANSIONPANEL: readonly [typeof ExpansionPanelComponent, typeof ExpansionPanelTitleDirective];
|
65
65
|
/**
|
66
|
-
*
|
66
|
+
* Use the `KENDO_GRIDLAYOUT` utility array to add all GridLayout-related components and directives to a standalone Angular component.
|
67
67
|
*/
|
68
68
|
export declare const KENDO_GRIDLAYOUT: readonly [typeof GridLayoutComponent, typeof GridLayoutItemComponent];
|
69
69
|
/**
|
70
|
-
*
|
70
|
+
* Use the `KENDO_PANELBAR` utility array to add all PanelBar-related components and directives to a standalone Angular component.
|
71
71
|
*/
|
72
72
|
export declare const KENDO_PANELBAR: readonly [typeof PanelBarComponent, typeof PanelBarItemComponent, typeof PanelBarContentDirective, typeof PanelBarItemTemplateDirective, typeof PanelBarItemTitleDirective];
|
73
73
|
/**
|
74
|
-
*
|
74
|
+
* Use the `KENDO_SPLITTER` utility array to add all Splitter-related components and directives to a standalone Angular component.
|
75
75
|
*/
|
76
76
|
export declare const KENDO_SPLITTER: readonly [typeof SplitterComponent, typeof SplitterPaneComponent];
|
77
77
|
/**
|
78
|
-
*
|
78
|
+
* Use the `KENDO_STACKLAYOUT` utility array to add all StackLayout-related components and directives to a standalone Angular component.
|
79
79
|
*/
|
80
80
|
export declare const KENDO_STACKLAYOUT: readonly [typeof StackLayoutComponent];
|
81
81
|
/**
|
82
|
-
*
|
82
|
+
* Use the `KENDO_STEPPER` utility array to add all Stepper-related components and directives to a standalone Angular component.
|
83
83
|
*/
|
84
84
|
export declare const KENDO_STEPPER: readonly [typeof StepperComponent, typeof StepperCustomMessagesComponent, typeof StepperIndicatorTemplateDirective, typeof StepperLabelTemplateDirective, typeof StepperStepTemplateDirective];
|
85
85
|
/**
|
86
|
-
*
|
86
|
+
* Use the `KENDO_TABSTRIP` utility array to add all TabStrip-related components and directives to a standalone Angular component.
|
87
87
|
*/
|
88
88
|
export declare const KENDO_TABSTRIP: readonly [typeof TabStripComponent, typeof TabStripTabComponent, typeof TabContentDirective, typeof TabTitleDirective, typeof TabStripCustomMessagesComponent];
|
89
89
|
/**
|
90
|
-
*
|
90
|
+
* Use the `KENDO_TILELAYOUT` utility array to add all TileLayout-related components and directives to a standalone Angular component.
|
91
91
|
*/
|
92
92
|
export declare const KENDO_TILELAYOUT: readonly [typeof TileLayoutComponent, typeof TileLayoutItemBodyComponent, typeof TileLayoutItemComponent, typeof TileLayoutItemHeaderComponent];
|
93
93
|
/**
|
94
|
-
*
|
94
|
+
* Use the `KENDO_TIMELINE` utility array to add all Timeline-related components and directives to a standalone Angular component.
|
95
95
|
*/
|
96
96
|
export declare const KENDO_TIMELINE: readonly [typeof TimelineComponent, typeof TimelineCustomMessagesComponent, typeof TimelineCardActionsTemplateDirective, typeof TimelineCardBodyTemplateDirective, typeof TimelineCardHeaderTemplateDirective];
|
97
97
|
/**
|
98
|
-
*
|
98
|
+
* Use the `KENDO_LAYOUT` utility array to add all `@progress/kendo-angular-layout`-related components and directives to a standalone Angular component.
|
99
99
|
*/
|
100
100
|
export declare const KENDO_LAYOUT: readonly [typeof AvatarComponent, typeof AvatarCustomMessagesComponent, typeof CardComponent, typeof CardActionsComponent, typeof CardBodyComponent, typeof CardFooterComponent, typeof CardHeaderComponent, typeof CardMediaDirective, typeof CardSeparatorDirective, typeof CardSubtitleDirective, typeof CardTitleDirective, typeof DrawerComponent, typeof DrawerContainerComponent, typeof DrawerContentComponent, typeof DrawerTemplateDirective, typeof DrawerFooterTemplateDirective, typeof DrawerHeaderTemplateDirective, typeof DrawerItemTemplateDirective, typeof ExpansionPanelComponent, typeof ExpansionPanelTitleDirective, typeof GridLayoutComponent, typeof GridLayoutItemComponent, typeof PanelBarComponent, typeof PanelBarItemComponent, typeof PanelBarContentDirective, typeof PanelBarItemTemplateDirective, typeof PanelBarItemTitleDirective, typeof SplitterComponent, typeof SplitterPaneComponent, typeof StackLayoutComponent, typeof StepperComponent, typeof StepperCustomMessagesComponent, typeof StepperIndicatorTemplateDirective, typeof StepperLabelTemplateDirective, typeof StepperStepTemplateDirective, typeof TabStripComponent, typeof TabStripTabComponent, typeof TabContentDirective, typeof TabTitleDirective, typeof TabStripCustomMessagesComponent, typeof TileLayoutComponent, typeof TileLayoutItemBodyComponent, typeof TileLayoutItemComponent, typeof TileLayoutItemHeaderComponent, typeof TimelineComponent, typeof TimelineCustomMessagesComponent, typeof TimelineCardActionsTemplateDirective, typeof TimelineCardBodyTemplateDirective, typeof TimelineCardHeaderTemplateDirective];
|
@@ -6,7 +6,19 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
6
6
|
import { DrawerComponent } from './drawer.component';
|
7
7
|
import * as i0 from "@angular/core";
|
8
8
|
/**
|
9
|
-
* Serves as a container for the [
|
9
|
+
* Serves as a container for the [Drawer component]({% slug overview_drawer %}) and its content.
|
10
|
+
*
|
11
|
+
* @example
|
12
|
+
* ```html
|
13
|
+
* <kendo-drawer-container>
|
14
|
+
* <kendo-drawer [items]="items"></kendo-drawer>
|
15
|
+
* <kendo-drawer-content>
|
16
|
+
* <h1>Main Content</h1>
|
17
|
+
* </kendo-drawer-content>
|
18
|
+
* </kendo-drawer-container>
|
19
|
+
* ```
|
20
|
+
* @remarks
|
21
|
+
* Supported children components are: {@link DrawerComponent}, {@link DrawerContentComponent}.
|
10
22
|
*/
|
11
23
|
export declare class DrawerContainerComponent {
|
12
24
|
private localizationService;
|
@@ -4,7 +4,15 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import * as i0 from "@angular/core";
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Defines the content of the Drawer component.
|
8
|
+
*
|
9
|
+
* @example
|
10
|
+
* ```html
|
11
|
+
* <kendo-drawer-content>
|
12
|
+
* <h1>Main Content Area</h1>
|
13
|
+
* <p>Your application content goes here.</p>
|
14
|
+
* </kendo-drawer-content>
|
15
|
+
* ```
|
8
16
|
*/
|
9
17
|
export declare class DrawerContentComponent {
|
10
18
|
hostClasses: boolean;
|
@@ -15,32 +15,31 @@ import { DrawerItemExpandedFn } from './models/drawer-item-expand.interface';
|
|
15
15
|
import * as i0 from "@angular/core";
|
16
16
|
/**
|
17
17
|
* Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
|
18
|
+
* Provides a dismissible or permanently visible panel for navigation in responsive web applications.
|
18
19
|
*
|
19
20
|
* @example
|
20
|
-
* ```
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
26
|
-
*
|
27
|
-
*
|
28
|
-
*
|
29
|
-
*
|
30
|
-
*
|
31
|
-
*
|
32
|
-
*
|
33
|
-
*
|
34
|
-
*
|
21
|
+
* ```typescript
|
22
|
+
* @Component({
|
23
|
+
* selector: 'my-app',
|
24
|
+
* template: `
|
25
|
+
* <kendo-drawer-container>
|
26
|
+
* <kendo-drawer #drawer
|
27
|
+
* [items]="items"
|
28
|
+
* mode="overlay"
|
29
|
+
* [(expanded)]="expanded">
|
30
|
+
* </kendo-drawer>
|
31
|
+
* <kendo-drawer-content>
|
32
|
+
* <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
|
33
|
+
* </kendo-drawer-content>
|
34
|
+
* </kendo-drawer-container>
|
35
|
+
* `
|
35
36
|
* })
|
36
37
|
* class AppComponent {
|
37
|
-
*
|
38
|
-
*
|
39
|
-
*
|
40
|
-
*
|
41
|
-
*
|
42
|
-
* { text: 'Date', icon: 'k-i-calendar' }
|
43
|
-
* ];
|
38
|
+
* public expanded = false;
|
39
|
+
* public items = [
|
40
|
+
* { text: 'Inbox', icon: 'inbox' },
|
41
|
+
* { text: 'Notifications', icon: 'bell' }
|
42
|
+
* ];
|
44
43
|
* }
|
45
44
|
* ```
|
46
45
|
*/
|
@@ -55,52 +54,58 @@ export declare class DrawerComponent implements OnDestroy {
|
|
55
54
|
get overlayTransofrmStyles(): string;
|
56
55
|
get flexStyles(): number;
|
57
56
|
/**
|
58
|
-
* Specifies the mode in which the Drawer
|
57
|
+
* Specifies the mode in which the Drawer displays.
|
59
58
|
*
|
60
|
-
*
|
61
|
-
* * (Default) `overlay`
|
62
|
-
* * `push`
|
59
|
+
* @default 'overlay'
|
63
60
|
*/
|
64
61
|
mode: DrawerMode;
|
65
62
|
/**
|
66
63
|
* Specifies the position of the Drawer
|
67
64
|
* ([see example]({% slug positioning_drawer %})).
|
68
65
|
*
|
69
|
-
*
|
70
|
-
* * (Default) `start`
|
71
|
-
* * `end`
|
66
|
+
* @default 'start'
|
72
67
|
*/
|
73
68
|
position: DrawerPosition;
|
74
69
|
/**
|
75
|
-
* Enables the mini (compact) view of the Drawer which
|
70
|
+
* Enables the mini (compact) view of the Drawer which displays when the component is collapsed
|
76
71
|
* ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
|
72
|
+
*
|
73
|
+
* @default false
|
77
74
|
*/
|
78
75
|
mini: boolean;
|
79
76
|
/**
|
80
77
|
* Specifies the state of the Drawer.
|
78
|
+
*
|
79
|
+
* @default false
|
81
80
|
*/
|
82
81
|
expanded: boolean;
|
83
82
|
/**
|
84
83
|
* Defines the width of the Drawer when it is expanded.
|
85
|
-
*
|
84
|
+
*
|
85
|
+
* @default 240
|
86
86
|
*/
|
87
87
|
width: number;
|
88
88
|
/**
|
89
|
-
* Defines the width of the Drawer when the mini view is enabled
|
90
|
-
*
|
89
|
+
* Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
|
90
|
+
*
|
91
|
+
* @default 50
|
91
92
|
*/
|
92
93
|
miniWidth: number;
|
93
94
|
/**
|
94
|
-
* Specifies if the Drawer
|
95
|
-
*
|
95
|
+
* Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
|
96
|
+
*
|
97
|
+
* @default true
|
96
98
|
*/
|
97
99
|
autoCollapse: boolean;
|
98
100
|
/**
|
99
|
-
*
|
101
|
+
* Defines the collection of items that render in the Drawer.
|
102
|
+
*
|
103
|
+
* @default []
|
100
104
|
*/
|
101
105
|
items: any[];
|
102
106
|
/**
|
103
107
|
* Defines a callback function which determines if an item should be expanded.
|
108
|
+
* This is useful for hierarchical data structures where the expansion state of an item depends on its parent or other items.
|
104
109
|
*/
|
105
110
|
set isItemExpanded(fn: DrawerItemExpandedFn);
|
106
111
|
get isItemExpanded(): DrawerItemExpandedFn;
|
@@ -109,16 +114,10 @@ export declare class DrawerComponent implements OnDestroy {
|
|
109
114
|
*/
|
110
115
|
direction: string;
|
111
116
|
/**
|
112
|
-
* Specifies the animation settings of the Drawer
|
117
|
+
* Specifies the animation settings of the Drawer
|
113
118
|
* ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
|
114
119
|
*
|
115
|
-
*
|
116
|
-
* * Boolean
|
117
|
-
* * (Default) `true`
|
118
|
-
* * `false`
|
119
|
-
* * `DrawerAnimation`
|
120
|
-
* * (Default) `type?: 'slide'`
|
121
|
-
* * `duration`—Accepts a number in milliseconds. Defaults to `300ms`.
|
120
|
+
* @default { type: 'slide', duration: 200 }
|
122
121
|
*/
|
123
122
|
animation?: boolean | DrawerAnimation;
|
124
123
|
/**
|
@@ -130,11 +129,12 @@ export declare class DrawerComponent implements OnDestroy {
|
|
130
129
|
*/
|
131
130
|
collapse: EventEmitter<any>;
|
132
131
|
/**
|
133
|
-
* Fires when
|
132
|
+
* Fires when an item in the Drawer is selected.
|
133
|
+
* This event is preventable.
|
134
134
|
*/
|
135
135
|
select: EventEmitter<DrawerSelectEvent>;
|
136
136
|
/**
|
137
|
-
* Fires when the `expanded` property of the component
|
137
|
+
* Fires when the `expanded` property of the component is updated.
|
138
138
|
* Used to provide a two-way binding for the `expanded` property.
|
139
139
|
*/
|
140
140
|
expandedChange: EventEmitter<boolean>;
|
@@ -175,8 +175,9 @@ export declare class DrawerComponent implements OnDestroy {
|
|
175
175
|
get drawerWidth(): number;
|
176
176
|
/**
|
177
177
|
* Toggles the visibility of the Drawer.
|
178
|
+
* If the `expanded` parameter is not provided, the Drawer will toggle between expanded and collapsed states.
|
178
179
|
*
|
179
|
-
* @param expanded
|
180
|
+
* @param expanded Specifies if the Drawer will be expanded or collapsed.
|
180
181
|
*/
|
181
182
|
toggle(expanded?: boolean): void;
|
182
183
|
/**
|
@@ -5,23 +5,23 @@
|
|
5
5
|
import { PreventableEvent } from '@progress/kendo-angular-common';
|
6
6
|
import { DrawerComponent } from './../drawer.component';
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the arguments for the `select` event of the Drawer.
|
9
9
|
*/
|
10
10
|
export declare class DrawerSelectEvent extends PreventableEvent {
|
11
11
|
/**
|
12
|
-
*
|
12
|
+
* Defines the index of the selected item in the `items` collection.
|
13
13
|
*/
|
14
14
|
index: number;
|
15
15
|
/**
|
16
|
-
*
|
16
|
+
* Defines the selected Drawer item.
|
17
17
|
*/
|
18
18
|
item: any;
|
19
19
|
/**
|
20
|
-
*
|
20
|
+
* Defines the DOM event that triggered the selection.
|
21
21
|
*/
|
22
22
|
originalEvent: any;
|
23
23
|
/**
|
24
|
-
*
|
24
|
+
* Defines the Drawer that triggered the event.
|
25
25
|
*/
|
26
26
|
sender: DrawerComponent;
|
27
27
|
/**
|
@@ -3,9 +3,8 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the animation settings of the Drawer
|
7
7
|
* ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
|
8
|
-
*
|
9
8
|
*/
|
10
9
|
export interface DrawerAnimation {
|
11
10
|
/**
|
@@ -3,6 +3,6 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the callback that the [`isItemExpanded`]({% slug api_layout_drawercomponent %}#toc-isItemExpanded) property uses ([see example]({% slug hierarchical_drawer %})).
|
7
7
|
*/
|
8
8
|
export type DrawerItemExpandedFn = (item: any) => boolean;
|
@@ -4,45 +4,41 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { SVGIcon } from "@progress/kendo-svg-icons";
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Defines an interface for the Drawer items.
|
8
8
|
*/
|
9
9
|
export interface DrawerItem {
|
10
10
|
/**
|
11
|
-
*
|
12
|
-
* Supports the type of values that
|
11
|
+
* Defines the CSS classes that render on the item element of the Drawer.
|
12
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
13
13
|
*/
|
14
14
|
cssClass?: any;
|
15
15
|
/**
|
16
|
-
*
|
17
|
-
* Supports the type of values that
|
16
|
+
* Defines the CSS styles that render on the item element of the Drawer.
|
17
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
18
18
|
*/
|
19
19
|
cssStyle?: any;
|
20
20
|
/**
|
21
21
|
* Specifies if the Drawer item is disabled.
|
22
|
+
*
|
22
23
|
*/
|
23
24
|
disabled?: boolean;
|
24
25
|
/**
|
25
26
|
* Defines the name for an existing icon in a Kendo UI theme.
|
26
|
-
* The icon
|
27
|
-
*
|
28
|
-
* NOTE: The icon input will no longer require the `k-i-` prefix in the icon name. Please provide only the name of the icon.
|
29
|
-
* To ensure backward compatibility, both syntaxes will be supported for a period of time, but the `k-i-` prefix is deprecated and
|
30
|
-
* you can expect it to be dropped in a future major version of the package.
|
27
|
+
* The icon renders inside the Drawer item by the `kendo-icon` element.
|
31
28
|
*/
|
32
29
|
icon?: string;
|
33
30
|
/**
|
34
|
-
* Defines a CSS class
|
35
|
-
*
|
36
|
-
* Allows the usage of custom icons.
|
31
|
+
* Defines a CSS class or multiple classes separated by spaces.
|
32
|
+
* You can apply these classes to a `span` element inside the Drawer item to use custom icons.
|
37
33
|
*/
|
38
34
|
iconClass?: string;
|
39
35
|
/**
|
40
|
-
* Defines an SVG icon to
|
41
|
-
*
|
36
|
+
* Defines an SVG icon to render inside the Drawer Item.
|
37
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
42
38
|
*/
|
43
39
|
svgIcon?: SVGIcon;
|
44
40
|
/**
|
45
|
-
* Specifies the id of the Drawer item.
|
41
|
+
* Specifies the `id` of the Drawer item.
|
46
42
|
*/
|
47
43
|
id?: number | string;
|
48
44
|
/**
|
@@ -51,11 +47,13 @@ export interface DrawerItem {
|
|
51
47
|
parentId?: number | string;
|
52
48
|
/**
|
53
49
|
* Specifies if the Drawer item is initially selected.
|
50
|
+
*
|
54
51
|
*/
|
55
52
|
selected?: boolean;
|
56
53
|
/**
|
57
54
|
* Specifies if this is a separator item.
|
58
|
-
* If set to `true`, only the `cssClass` and `cssStyle` fields
|
55
|
+
* If set to `true`, only the `cssClass` and `cssStyle` fields render.
|
56
|
+
*
|
59
57
|
*/
|
60
58
|
separator?: boolean;
|
61
59
|
/**
|
package/drawer/models/mode.d.ts
CHANGED
@@ -3,8 +3,9 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
7
|
-
* The
|
8
|
-
*
|
6
|
+
* Defines the way the Drawer interacts with the associated content.
|
7
|
+
* The supported modes are:
|
8
|
+
* - `overlay`—The Drawer overlaps the associated content with an overlay effect.
|
9
|
+
* - `push`—The Drawer renders next to the associated content and shrinks it.
|
9
10
|
*/
|
10
11
|
export type DrawerMode = 'overlay' | 'push';
|
@@ -3,11 +3,6 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
7
|
-
* ([see example]({% slug positioning_drawer %})).
|
8
|
-
*
|
9
|
-
* The possible values are:
|
10
|
-
* * (Default) `start`
|
11
|
-
* * `end`
|
6
|
+
* Defines the position of the Drawer ([see example]({% slug positioning_drawer %})).
|
12
7
|
*/
|
13
8
|
export type DrawerPosition = 'start' | 'end';
|
@@ -5,11 +5,24 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
9
|
-
* To define the template, nest an `<ng-template>` tag
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
8
|
+
* Defines a template that specifies the content of the Drawer.
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoDrawerTemplate` directive inside the `<kendo-drawer>` tag.
|
10
|
+
* Using this template directive overrides all other templates, for example, `kendoDrawerHeaderTemplate` and `kendoDrawerItemTemplate`.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
* ```html
|
14
|
+
* <kendo-drawer>
|
15
|
+
* <ng-template kendoDrawerTemplate>
|
16
|
+
* <div class="custom-drawer-content">
|
17
|
+
* <h3>Custom Drawer</h3>
|
18
|
+
* <ul>
|
19
|
+
* <li>Custom Item 1</li>
|
20
|
+
* <li>Custom Item 2</li>
|
21
|
+
* </ul>
|
22
|
+
* </div>
|
23
|
+
* </ng-template>
|
24
|
+
* </kendo-drawer>
|
25
|
+
* ```
|
13
26
|
*/
|
14
27
|
export declare class DrawerTemplateDirective {
|
15
28
|
templateRef: TemplateRef<any>;
|
@@ -5,9 +5,17 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
9
|
-
* To define the template, nest an `<ng-template>` tag
|
10
|
-
*
|
8
|
+
* Defines a template that specifies the footer content of the Drawer.
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoDrawerFooterTemplate` directive inside the `<kendo-drawer>` tag.
|
10
|
+
*
|
11
|
+
* @example
|
12
|
+
* ```html
|
13
|
+
* <kendo-drawer>
|
14
|
+
* <ng-template kendoDrawerFooterTemplate>
|
15
|
+
* <p>© 2023 Company Name</p>
|
16
|
+
* </ng-template>
|
17
|
+
* </kendo-drawer>
|
18
|
+
* ```
|
11
19
|
*/
|
12
20
|
export declare class DrawerFooterTemplateDirective {
|
13
21
|
templateRef: TemplateRef<any>;
|
@@ -5,9 +5,17 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
9
|
-
* To define the template, nest an `<ng-template>` tag
|
10
|
-
*
|
8
|
+
* Defines a template that specifies the header content of the Drawer.
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoDrawerHeaderTemplate` directive inside the `<kendo-drawer>` tag.
|
10
|
+
*
|
11
|
+
* @example
|
12
|
+
* ```html
|
13
|
+
* <kendo-drawer>
|
14
|
+
* <ng-template kendoDrawerHeaderTemplate>
|
15
|
+
* <h3>Navigation Menu</h3>
|
16
|
+
* </ng-template>
|
17
|
+
* </kendo-drawer>
|
18
|
+
* ```
|
11
19
|
*/
|
12
20
|
export declare class DrawerHeaderTemplateDirective {
|
13
21
|
templateRef: TemplateRef<any>;
|
@@ -5,9 +5,25 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
9
|
-
* To define the template, nest an `<ng-template>` tag
|
10
|
-
*
|
8
|
+
* Defines a template that specifies the item content of the Drawer.
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoDrawerItemTemplate` directive inside the `<kendo-drawer>` tag.
|
10
|
+
*
|
11
|
+
* The `let-item` context variable provides access to the item data.
|
12
|
+
*
|
13
|
+
* For the Hierarchical Drawer, the `kendoDrawerItemTemplate` directive provides additional context fields:
|
14
|
+
*
|
15
|
+
* * `level`—A number that indicates the nesting level of the current item. Use the `let-level="level"` syntax to access the nesting level.
|
16
|
+
* * `hasChildren`—A boolean that indicates whether the current item has nested items. Use the `let-hasChildren="hasChildren"` syntax to access the value.
|
17
|
+
* * `isItemExpanded`—A boolean that holds information about the expanded state of the current item, which indicates whether its children are visible or not. Use the `let-isItemExpanded="isItemExpanded"` syntax to access the value of the expanded state.
|
18
|
+
*
|
19
|
+
* @example
|
20
|
+
* ```html
|
21
|
+
* <kendo-drawer>
|
22
|
+
* <ng-template kendoDrawerItemTemplate let-item>
|
23
|
+
* <span class="custom-item">{{ item.text }}</span>
|
24
|
+
* </ng-template>
|
25
|
+
* </kendo-drawer>
|
26
|
+
* ```
|
11
27
|
*/
|
12
28
|
export declare class DrawerItemTemplateDirective {
|
13
29
|
templateRef: TemplateRef<any>;
|
package/drawer.module.d.ts
CHANGED
@@ -11,8 +11,20 @@ import * as i5 from "./drawer/template-directives/footer-template.directive";
|
|
11
11
|
import * as i6 from "./drawer/template-directives/header-template.directive";
|
12
12
|
import * as i7 from "./drawer/template-directives/item-template.directive";
|
13
13
|
/**
|
14
|
-
*
|
15
|
-
*
|
14
|
+
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Drawer component.
|
15
|
+
*
|
16
|
+
* Use this module to add the Drawer component to your NgModule-based Angular application.
|
17
|
+
*
|
18
|
+
* @example
|
19
|
+
* ```typescript
|
20
|
+
* import { DrawerModule } from '@progress/kendo-angular-layout';
|
21
|
+
* import { NgModule } from '@angular/core';
|
22
|
+
*
|
23
|
+
* @NgModule({
|
24
|
+
* imports: [DrawerModule]
|
25
|
+
* })
|
26
|
+
* export class AppModule { }
|
27
|
+
* ```
|
16
28
|
*/
|
17
29
|
export declare class DrawerModule {
|
18
30
|
static ɵfac: i0.ɵɵFactoryDeclaration<DrawerModule, never>;
|