@progress/kendo-angular-layout 17.0.0-develop.4 → 17.0.0-develop.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -27
- package/avatar/avatar.component.d.ts +1 -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/shape.d.ts +2 -2
- package/avatar/models/size.d.ts +1 -1
- package/avatar/models/theme-color.d.ts +1 -1
- package/card/card-actions.component.d.ts +1 -1
- package/card/card.component.d.ts +1 -1
- package/card/directives/card-separator.directive.d.ts +1 -1
- package/card/models/actions-layout.d.ts +1 -1
- package/common/direction.d.ts +1 -1
- package/common/orientation.d.ts +1 -1
- package/drawer/drawer.component.d.ts +1 -1
- package/drawer/item.component.d.ts +1 -1
- package/drawer/list.component.d.ts +1 -1
- package/drawer/models/drawer-item-expand.interface.d.ts +1 -1
- package/drawer/models/mode.d.ts +1 -1
- package/drawer/models/position.d.ts +1 -1
- package/{esm2020 → esm2022}/avatar/avatar.component.mjs +61 -25
- package/{esm2020 → esm2022}/avatar/l10n/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/avatar/l10n/localized-messages.directive.mjs +9 -8
- package/{esm2020 → esm2022}/avatar/l10n/messages.mjs +7 -3
- package/{esm2020 → esm2022}/avatar.module.mjs +4 -4
- package/{esm2020 → esm2022}/card/card-actions.component.mjs +37 -31
- package/{esm2020 → esm2022}/card/card-body.component.mjs +5 -7
- package/{esm2020 → esm2022}/card/card-footer.component.mjs +5 -7
- package/{esm2020 → esm2022}/card/card-header.component.mjs +5 -7
- package/{esm2020 → esm2022}/card/card.component.mjs +40 -34
- package/{esm2020 → esm2022}/card/directives/card-media.directive.mjs +4 -6
- package/{esm2020 → esm2022}/card/directives/card-separator.directive.mjs +16 -14
- package/{esm2020 → esm2022}/card/directives/card-subtitle.directive.mjs +4 -6
- package/{esm2020 → esm2022}/card/directives/card-title.directive.mjs +4 -6
- package/{esm2020 → esm2022}/card/models/card-action.mjs +12 -0
- package/{esm2020 → esm2022}/card.module.mjs +4 -4
- package/{esm2020 → esm2022}/common/preventable-event.mjs +7 -7
- package/{esm2020 → esm2022}/drawer/drawer-container.component.mjs +28 -18
- package/{esm2020 → esm2022}/drawer/drawer-content.component.mjs +6 -7
- package/{esm2020 → esm2022}/drawer/drawer.component.mjs +132 -106
- package/{esm2020 → esm2022}/drawer/drawer.service.mjs +10 -10
- package/{esm2020 → esm2022}/drawer/events/drawer-list-select.event.mjs +12 -0
- package/{esm2020 → esm2022}/drawer/events/select-event.mjs +16 -0
- package/{esm2020 → esm2022}/drawer/item.component.mjs +22 -11
- package/{esm2020 → esm2022}/drawer/list.component.mjs +14 -6
- package/{esm2020 → esm2022}/drawer/template-directives/drawer-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/drawer/template-directives/footer-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/drawer/template-directives/header-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/drawer/template-directives/item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/drawer.module.mjs +4 -4
- package/{esm2020 → esm2022}/expansionpanel/events/action-event.mjs +4 -0
- package/{esm2020 → esm2022}/expansionpanel/expansionpanel-title.directive.mjs +4 -3
- package/{esm2020 → esm2022}/expansionpanel/expansionpanel.component.mjs +103 -81
- package/{esm2020 → esm2022}/expansionpanel.module.mjs +4 -4
- package/{esm2020 → esm2022}/gridlayout.module.mjs +4 -4
- package/{esm2020 → esm2022}/layout.module.mjs +4 -4
- package/{esm2020 → esm2022}/layouts/grid-layout.component.mjs +57 -26
- package/{esm2020 → esm2022}/layouts/gridlayout-item.component.mjs +26 -4
- package/{esm2020 → esm2022}/layouts/stack-layout.component.mjs +40 -35
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/panelbar/events/collapse-event.mjs +4 -0
- package/{esm2020 → esm2022}/panelbar/events/expand-event.mjs +4 -0
- package/{esm2020 → esm2022}/panelbar/events/item-click-event.mjs +8 -0
- package/{esm2020 → esm2022}/panelbar/events/select-event.mjs +4 -0
- package/{esm2020 → esm2022}/panelbar/events/state-change-event.mjs +4 -0
- package/{esm2020 → esm2022}/panelbar/panelbar-content.directive.mjs +4 -3
- package/{esm2020 → esm2022}/panelbar/panelbar-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/panelbar/panelbar-item-title.directive.mjs +4 -3
- package/{esm2020 → esm2022}/panelbar/panelbar-item.component.mjs +101 -66
- package/{esm2020 → esm2022}/panelbar/panelbar.component.mjs +109 -98
- package/{esm2020 → esm2022}/panelbar/panelbar.service.mjs +23 -13
- package/{esm2020 → esm2022}/panelbar.module.mjs +4 -4
- package/{esm2020 → esm2022}/splitter/splitter-bar.component.mjs +68 -28
- package/esm2022/splitter/splitter-pane.component.mjs +267 -0
- package/{esm2020 → esm2022}/splitter/splitter.component.mjs +98 -40
- package/{esm2020 → esm2022}/splitter/splitter.service.mjs +69 -28
- package/{esm2020 → esm2022}/splitter.module.mjs +4 -4
- package/{esm2020 → esm2022}/stacklayout.module.mjs +4 -4
- package/{esm2020 → esm2022}/stepper/events/activate-event.mjs +16 -0
- package/{esm2020 → esm2022}/stepper/list.component.mjs +23 -5
- package/{esm2020 → esm2022}/stepper/localization/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/stepper/localization/localized-messages.directive.mjs +9 -8
- package/{esm2020 → esm2022}/stepper/localization/messages.mjs +7 -3
- package/{esm2020 → esm2022}/stepper/step.component.mjs +25 -8
- package/{esm2020 → esm2022}/stepper/stepper.component.mjs +111 -70
- package/{esm2020 → esm2022}/stepper/stepper.service.mjs +30 -9
- package/{esm2020 → esm2022}/stepper/template-directives/indicator-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/stepper/template-directives/label-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/stepper/template-directives/step-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/stepper.module.mjs +4 -4
- package/{esm2020 → esm2022}/tabstrip/directives/tab-content.directive.mjs +4 -3
- package/{esm2020 → esm2022}/tabstrip/directives/tab-title.directive.mjs +4 -3
- package/{esm2020 → esm2022}/tabstrip/directives/tab.directive.mjs +4 -3
- package/{esm2020 → esm2022}/tabstrip/events/select-event.mjs +2 -0
- package/{esm2020 → esm2022}/tabstrip/events/tabclose-event.mjs +2 -0
- package/{esm2020 → esm2022}/tabstrip/events/tabscroll-event.mjs +4 -0
- package/{esm2020 → esm2022}/tabstrip/localization/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/tabstrip/localization/localized-messages.directive.mjs +9 -8
- package/{esm2020 → esm2022}/tabstrip/localization/messages.mjs +15 -3
- package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +117 -0
- package/{esm2020 → esm2022}/tabstrip/rendering/tab.component.mjs +25 -17
- package/{esm2020 → esm2022}/tabstrip/scrollable-button.component.mjs +33 -27
- package/{esm2020 → esm2022}/tabstrip/tabstrip-scroll.service.mjs +11 -9
- package/{esm2020 → esm2022}/tabstrip/tabstrip.component.mjs +150 -106
- package/{esm2020 → esm2022}/tabstrip/tabstrip.service.mjs +6 -3
- package/{esm2020 → esm2022}/tabstrip.module.mjs +4 -4
- package/{esm2020 → esm2022}/tilelayout/dragging-service.mjs +39 -24
- package/{esm2020 → esm2022}/tilelayout/keyboard-navigation.service.mjs +9 -4
- package/{esm2020 → esm2022}/tilelayout/reorder-event.mjs +8 -0
- package/{esm2020 → esm2022}/tilelayout/resize-event.mjs +6 -0
- package/{esm2020 → esm2022}/tilelayout/tilelayout-item-body.component.mjs +6 -8
- package/esm2022/tilelayout/tilelayout-item-header.component.mjs +33 -0
- package/{esm2020 → esm2022}/tilelayout/tilelayout-item.component.mjs +85 -58
- package/{esm2020 → esm2022}/tilelayout/tilelayout-resize-handle.directive.mjs +7 -3
- package/{esm2020 → esm2022}/tilelayout/tilelayout.component.mjs +103 -93
- package/{esm2020 → esm2022}/tilelayout.module.mjs +4 -4
- package/{esm2020 → esm2022}/timeline/localization/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/timeline/localization/localized-messages.directive.mjs +9 -8
- package/{esm2020 → esm2022}/timeline/localization/messages.mjs +11 -3
- package/{esm2020 → esm2022}/timeline/templates/timeline-card-actions.directive.mjs +4 -3
- package/{esm2020 → esm2022}/timeline/templates/timeline-card-body.directive.mjs +4 -3
- package/{esm2020 → esm2022}/timeline/templates/timeline-card-header.directive.mjs +4 -3
- package/{esm2020 → esm2022}/timeline/timeline-card.component.mjs +49 -34
- package/{esm2020 → esm2022}/timeline/timeline-horizontal.component.mjs +85 -55
- package/{esm2020 → esm2022}/timeline/timeline-vertical.component.mjs +20 -6
- package/{esm2020 → esm2022}/timeline/timeline.component.mjs +108 -68
- package/{esm2020 → esm2022}/timeline/timeline.service.mjs +4 -3
- package/{esm2020 → esm2022}/timeline.module.mjs +4 -4
- package/expansionpanel/events/action-event.d.ts +1 -1
- package/expansionpanel/expansionpanel.component.d.ts +1 -1
- package/{fesm2020 → fesm2022}/progress-kendo-angular-layout.mjs +2687 -1781
- package/layouts/grid-layout.component.d.ts +1 -1
- package/layouts/gridlayout-item.component.d.ts +1 -1
- 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 +1 -1
- package/package.json +16 -22
- package/panelbar/panelbar-item.component.d.ts +1 -1
- package/panelbar/panelbar.component.d.ts +1 -1
- package/splitter/splitter-bar.component.d.ts +13 -1
- package/splitter/splitter-pane.component.d.ts +26 -6
- package/splitter/splitter.component.d.ts +12 -4
- package/splitter/splitter.service.d.ts +7 -2
- package/stepper/list.component.d.ts +1 -1
- package/stepper/localization/messages.d.ts +1 -1
- package/stepper/models/orientation.d.ts +1 -1
- package/stepper/models/step-predicate.d.ts +1 -1
- package/stepper/models/step-type.d.ts +1 -1
- package/stepper/step.component.d.ts +1 -1
- package/stepper/stepper.component.d.ts +1 -1
- package/tabstrip/localization/messages.d.ts +1 -1
- package/tabstrip/models/button-state-change.d.ts +1 -1
- package/tabstrip/models/scroll-button-type.d.ts +1 -1
- package/tabstrip/models/scroll-buttons-visibility.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 +1 -1
- package/tabstrip/rendering/tab.component.d.ts +1 -1
- package/tabstrip/scrollable-button.component.d.ts +1 -1
- package/tabstrip/tabstrip.component.d.ts +3 -1
- package/tilelayout/models/flowmode.type.d.ts +1 -1
- package/tilelayout/tilelayout-item-header.component.d.ts +1 -9
- package/tilelayout/tilelayout-item.component.d.ts +1 -1
- package/tilelayout/tilelayout-resize-handle.directive.d.ts +1 -1
- package/tilelayout/tilelayout.component.d.ts +1 -1
- package/timeline/events/navigation-direction.d.ts +1 -1
- package/timeline/localization/messages.d.ts +1 -1
- package/timeline/models/anchor-target.d.ts +1 -1
- package/timeline/timeline-card.component.d.ts +1 -1
- package/timeline/timeline-horizontal.component.d.ts +2 -2
- package/timeline/timeline-vertical.component.d.ts +1 -1
- package/timeline/timeline.component.d.ts +1 -1
- package/esm2020/splitter/splitter-pane.component.mjs +0 -222
- package/esm2020/tabstrip/models/tabstrip-tab.component.mjs +0 -78
- package/esm2020/tilelayout/tilelayout-item-header.component.mjs +0 -53
- package/fesm2015/progress-kendo-angular-layout.mjs +0 -12374
- /package/{esm2020 → esm2022}/avatar/models/fill.mjs +0 -0
- /package/{esm2020 → esm2022}/avatar/models/models.mjs +0 -0
- /package/{esm2020 → esm2022}/avatar/models/rounded.mjs +0 -0
- /package/{esm2020 → esm2022}/avatar/models/shape.mjs +0 -0
- /package/{esm2020 → esm2022}/avatar/models/size.mjs +0 -0
- /package/{esm2020 → esm2022}/avatar/models/theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/card/models/actions-layout.mjs +0 -0
- /package/{esm2020 → esm2022}/common/direction.mjs +0 -0
- /package/{esm2020 → esm2022}/common/dom-queries.mjs +0 -0
- /package/{esm2020 → esm2022}/common/orientation.mjs +0 -0
- /package/{esm2020 → esm2022}/common/styling-classes.mjs +0 -0
- /package/{esm2020 → esm2022}/common/util.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/animations.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/drawer-animation.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/drawer-item-expand.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/drawer-item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/drawer-view-item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/mode.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/models/position.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/template-directives.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/types.mjs +0 -0
- /package/{esm2020 → esm2022}/drawer/util.mjs +0 -0
- /package/{esm2020 → esm2022}/expansionpanel/animations.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/models/gridlayout-gap-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/models/gridlayout-row-col-size.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/models/layout-align-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/models/layout-horizontal-align.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/models/layout-vertical-align.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/models.mjs +0 -0
- /package/{esm2020 → esm2022}/layouts/util.mjs +0 -0
- /package/{esm2020 → esm2022}/panelbar/events.mjs +0 -0
- /package/{esm2020 → esm2022}/panelbar/panelbar-expand-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/panelbar/panelbar-item-model.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-layout.mjs +0 -0
- /package/{esm2020 → esm2022}/splitter/util.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/models/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/models/orientation.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/models/step-predicate.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/models/step-type.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/models/stepper-step.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/template-directives.mjs +0 -0
- /package/{esm2020 → esm2022}/stepper/types.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/events.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/models/button-state-change.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/models/scroll-button-type.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/models/scroll-buttons-visibility.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/models/scrollable-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/models/tab-alignment.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/models/tab-position.mjs +0 -0
- /package/{esm2020 → esm2022}/tabstrip/util.mjs +0 -0
- /package/{esm2020 → esm2022}/tilelayout/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/tilelayout/models/dragging-config.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/tilelayout/models/flowmode.type.mjs +0 -0
- /package/{esm2020 → esm2022}/tilelayout/models/gap.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/tilelayout/models/navigation.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/tilelayout/util.mjs +0 -0
- /package/{esm2020 → esm2022}/timeline/events/navigation-direction.mjs +0 -0
- /package/{esm2020 → esm2022}/timeline/models/anchor-target.mjs +0 -0
- /package/{esm2020 → esm2022}/timeline/models/default-model-fields.mjs +0 -0
- /package/{esm2020 → esm2022}/timeline/models/model-fields.mjs +0 -0
- /package/{esm2020 → esm2022}/timeline/models/timeline-event.mjs +0 -0
- /package/{esm2020 → esm2022}/timeline/util.mjs +0 -0
|
@@ -15,7 +15,7 @@ import { validatePackage } from '@progress/kendo-licensing';
|
|
|
15
15
|
import { packageMetadata } from '../package-metadata';
|
|
16
16
|
import { ExpansionPanelActionEvent } from './events/action-event';
|
|
17
17
|
import { take } from 'rxjs/operators';
|
|
18
|
-
import {
|
|
18
|
+
import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
|
|
19
19
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
20
20
|
import { NgIf, NgTemplateOutlet } from '@angular/common';
|
|
21
21
|
import * as i0 from "@angular/core";
|
|
@@ -40,74 +40,28 @@ const CONTENT_HIDDEN_CLASS = 'k-hidden';
|
|
|
40
40
|
* ```
|
|
41
41
|
*/
|
|
42
42
|
export class ExpansionPanelComponent {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
this.disabled = false;
|
|
66
|
-
/**
|
|
67
|
-
* Specifies the animation settings of the ExpansionPanel
|
|
68
|
-
* ([see example]({% slug animations_expansionpanel %})).
|
|
69
|
-
*
|
|
70
|
-
* The possible values are:
|
|
71
|
-
* * Boolean
|
|
72
|
-
* * (Default) `true` Numeric values represent duration. Default duration is 200ms.
|
|
73
|
-
* * false
|
|
74
|
-
* * Number
|
|
75
|
-
*/
|
|
76
|
-
this.animation = true;
|
|
77
|
-
/**
|
|
78
|
-
* Fires when the `expanded` property of the component is updated.
|
|
79
|
-
* Used to provide a two-way binding for the `expanded` property
|
|
80
|
-
* ([see example](slug:events_expansionpanel)).
|
|
81
|
-
*/
|
|
82
|
-
this.expandedChange = new EventEmitter();
|
|
83
|
-
/**
|
|
84
|
-
* Fires when the expanded state of the ExpansionPanel is about to change. This event is preventable
|
|
85
|
-
* ([see example](slug:events_expansionpanel)).
|
|
86
|
-
*/
|
|
87
|
-
this.action = new EventEmitter();
|
|
88
|
-
/**
|
|
89
|
-
* Fires when the ExpansionPanel is expanded. If there is animation it will fire when the animation is complete
|
|
90
|
-
* ([see example](slug:events_expansionpanel)).
|
|
91
|
-
*/
|
|
92
|
-
this.expand = new EventEmitter();
|
|
93
|
-
/**
|
|
94
|
-
* Fires when the ExpansionPanel is collapsed. If there is animation it will fire when the animation is complete
|
|
95
|
-
* ([see example](slug:events_expansionpanel)).
|
|
96
|
-
*/
|
|
97
|
-
this.collapse = new EventEmitter();
|
|
98
|
-
this.hostClass = true;
|
|
99
|
-
/**
|
|
100
|
-
* @hidden
|
|
101
|
-
*/
|
|
102
|
-
this.focused = false;
|
|
103
|
-
this.animationEnd = new EventEmitter();
|
|
104
|
-
this.subscriptions = new Subscription();
|
|
105
|
-
this._expanded = false;
|
|
106
|
-
this._svgExpandIcon = caretAltDownIcon;
|
|
107
|
-
this._svgCollapseIcon = caretAltUpIcon;
|
|
108
|
-
validatePackage(packageMetadata);
|
|
109
|
-
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
110
|
-
}
|
|
43
|
+
renderer;
|
|
44
|
+
hostElement;
|
|
45
|
+
ngZone;
|
|
46
|
+
localizationService;
|
|
47
|
+
builder;
|
|
48
|
+
/**
|
|
49
|
+
* Specifies the primary text in the header of the ExpansionPanel
|
|
50
|
+
* ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
|
|
51
|
+
*/
|
|
52
|
+
title = '';
|
|
53
|
+
/**
|
|
54
|
+
* Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon
|
|
55
|
+
* ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
|
|
56
|
+
*/
|
|
57
|
+
subtitle = '';
|
|
58
|
+
/**
|
|
59
|
+
* Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed
|
|
60
|
+
* ([see example]({% slug disabled_expansionpanel %})).
|
|
61
|
+
*
|
|
62
|
+
* @default false
|
|
63
|
+
*/
|
|
64
|
+
disabled = false;
|
|
111
65
|
/**
|
|
112
66
|
* Specifies whether the ExpansionPanel is expanded. The property supports two-way binding.
|
|
113
67
|
* ([see example]({% slug interaction_expansionpanel %}#toc-setting-the-initial-state)).
|
|
@@ -155,9 +109,77 @@ export class ExpansionPanelComponent {
|
|
|
155
109
|
get svgCollapseIcon() {
|
|
156
110
|
return this._svgCollapseIcon;
|
|
157
111
|
}
|
|
112
|
+
/**
|
|
113
|
+
* Sets a custom icon via css class(es), for the collapsed state of the component
|
|
114
|
+
* ([see example]({% slug icons_expansionpanel %}#toc-icons)).
|
|
115
|
+
*/
|
|
116
|
+
expandIcon;
|
|
117
|
+
/**
|
|
118
|
+
* Sets a custom icon via css class(es), for the expanded state of the component
|
|
119
|
+
* ([see example]({% slug icons_expansionpanel %}#toc-icons)).
|
|
120
|
+
*/
|
|
121
|
+
collapseIcon;
|
|
122
|
+
/**
|
|
123
|
+
* Specifies the animation settings of the ExpansionPanel
|
|
124
|
+
* ([see example]({% slug animations_expansionpanel %})).
|
|
125
|
+
*
|
|
126
|
+
* The possible values are:
|
|
127
|
+
* * Boolean
|
|
128
|
+
* * (Default) `true` Numeric values represent duration. Default duration is 200ms.
|
|
129
|
+
* * false
|
|
130
|
+
* * Number
|
|
131
|
+
*/
|
|
132
|
+
animation = true;
|
|
133
|
+
/**
|
|
134
|
+
* Fires when the `expanded` property of the component is updated.
|
|
135
|
+
* Used to provide a two-way binding for the `expanded` property
|
|
136
|
+
* ([see example](slug:events_expansionpanel)).
|
|
137
|
+
*/
|
|
138
|
+
expandedChange = new EventEmitter();
|
|
139
|
+
/**
|
|
140
|
+
* Fires when the expanded state of the ExpansionPanel is about to change. This event is preventable
|
|
141
|
+
* ([see example](slug:events_expansionpanel)).
|
|
142
|
+
*/
|
|
143
|
+
action = new EventEmitter();
|
|
144
|
+
/**
|
|
145
|
+
* Fires when the ExpansionPanel is expanded. If there is animation it will fire when the animation is complete
|
|
146
|
+
* ([see example](slug:events_expansionpanel)).
|
|
147
|
+
*/
|
|
148
|
+
expand = new EventEmitter();
|
|
149
|
+
/**
|
|
150
|
+
* Fires when the ExpansionPanel is collapsed. If there is animation it will fire when the animation is complete
|
|
151
|
+
* ([see example](slug:events_expansionpanel)).
|
|
152
|
+
*/
|
|
153
|
+
collapse = new EventEmitter();
|
|
154
|
+
/**
|
|
155
|
+
* @hidden
|
|
156
|
+
*/
|
|
157
|
+
titleTemplate;
|
|
158
|
+
content;
|
|
159
|
+
header;
|
|
160
|
+
hostClass = true;
|
|
158
161
|
get expandedClass() {
|
|
159
162
|
return this.expanded && !this.disabled;
|
|
160
163
|
}
|
|
164
|
+
direction;
|
|
165
|
+
/**
|
|
166
|
+
* @hidden
|
|
167
|
+
*/
|
|
168
|
+
focused = false;
|
|
169
|
+
animationEnd = new EventEmitter();
|
|
170
|
+
subscriptions = new Subscription();
|
|
171
|
+
_expanded = false;
|
|
172
|
+
_svgExpandIcon = chevronDownIcon;
|
|
173
|
+
_svgCollapseIcon = chevronUpIcon;
|
|
174
|
+
constructor(renderer, hostElement, ngZone, localizationService, builder) {
|
|
175
|
+
this.renderer = renderer;
|
|
176
|
+
this.hostElement = hostElement;
|
|
177
|
+
this.ngZone = ngZone;
|
|
178
|
+
this.localizationService = localizationService;
|
|
179
|
+
this.builder = builder;
|
|
180
|
+
validatePackage(packageMetadata);
|
|
181
|
+
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
182
|
+
}
|
|
161
183
|
ngOnInit() {
|
|
162
184
|
this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
|
|
163
185
|
this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
|
|
@@ -240,10 +262,10 @@ export class ExpansionPanelComponent {
|
|
|
240
262
|
*/
|
|
241
263
|
get expanderIndicatorClasses() {
|
|
242
264
|
if (this.expanded) {
|
|
243
|
-
return !this.collapseIcon ? `
|
|
265
|
+
return !this.collapseIcon ? `chevron-up` : '';
|
|
244
266
|
}
|
|
245
267
|
else {
|
|
246
|
-
return !this.expandIcon ? `
|
|
268
|
+
return !this.expandIcon ? `chevron-down` : '';
|
|
247
269
|
}
|
|
248
270
|
}
|
|
249
271
|
/**
|
|
@@ -338,15 +360,14 @@ export class ExpansionPanelComponent {
|
|
|
338
360
|
removeContentHiddenClass() {
|
|
339
361
|
this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
|
|
340
362
|
}
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
}
|
|
349
|
-
], 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: `
|
|
363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
|
|
365
|
+
LocalizationService,
|
|
366
|
+
{
|
|
367
|
+
provide: L10N_PREFIX,
|
|
368
|
+
useValue: 'kendo.expansionpanel'
|
|
369
|
+
}
|
|
370
|
+
], 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: `
|
|
350
371
|
<div
|
|
351
372
|
#header
|
|
352
373
|
[class.k-expander-header]="true"
|
|
@@ -384,7 +405,8 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
384
405
|
</div>
|
|
385
406
|
</div>
|
|
386
407
|
`, 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"] }] });
|
|
387
|
-
|
|
408
|
+
}
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
|
|
388
410
|
type: Component,
|
|
389
411
|
args: [{
|
|
390
412
|
exportAs: 'kendoExpansionPanel',
|
|
@@ -13,11 +13,11 @@ import * as i2 from "./expansionpanel/expansionpanel-title.directive";
|
|
|
13
13
|
* definition for the ExpansionPanel component.
|
|
14
14
|
*/
|
|
15
15
|
export class ExpansionPanelModule {
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
17
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, imports: [i1.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective], exports: [i1.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective] });
|
|
18
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, imports: [i1.ExpansionPanelComponent] });
|
|
16
19
|
}
|
|
17
|
-
|
|
18
|
-
ExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelModule, imports: [i1.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective], exports: [i1.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective] });
|
|
19
|
-
ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelModule, imports: [i1.ExpansionPanelComponent] });
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelModule, decorators: [{
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, decorators: [{
|
|
21
21
|
type: NgModule,
|
|
22
22
|
args: [{
|
|
23
23
|
exports: [...KENDO_EXPANSIONPANEL],
|
|
@@ -13,11 +13,11 @@ import * as i2 from "./layouts/gridlayout-item.component";
|
|
|
13
13
|
* definition for the GridLayout component.
|
|
14
14
|
*/
|
|
15
15
|
export class GridLayoutModule {
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
17
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, imports: [i1.GridLayoutComponent, i2.GridLayoutItemComponent], exports: [i1.GridLayoutComponent, i2.GridLayoutItemComponent] });
|
|
18
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule });
|
|
16
19
|
}
|
|
17
|
-
|
|
18
|
-
GridLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutModule, imports: [i1.GridLayoutComponent, i2.GridLayoutItemComponent], exports: [i1.GridLayoutComponent, i2.GridLayoutItemComponent] });
|
|
19
|
-
GridLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutModule, imports: [KENDO_GRIDLAYOUT] });
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutModule, decorators: [{
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, decorators: [{
|
|
21
21
|
type: NgModule,
|
|
22
22
|
args: [{
|
|
23
23
|
exports: [...KENDO_GRIDLAYOUT],
|
|
@@ -87,11 +87,11 @@ import * as i49 from "./timeline/templates/timeline-card-header.directive";
|
|
|
87
87
|
* ```
|
|
88
88
|
*/
|
|
89
89
|
export class LayoutModule {
|
|
90
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
91
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LayoutModule, imports: [i1.AvatarComponent, i2.AvatarCustomMessagesComponent, i3.CardComponent, i4.CardActionsComponent, i5.CardBodyComponent, i6.CardFooterComponent, i7.CardHeaderComponent, i8.CardMediaDirective, i9.CardSeparatorDirective, i10.CardSubtitleDirective, i11.CardTitleDirective, i12.DrawerComponent, i13.DrawerContainerComponent, i14.DrawerContentComponent, i15.DrawerTemplateDirective, i16.DrawerFooterTemplateDirective, i17.DrawerHeaderTemplateDirective, i18.DrawerItemTemplateDirective, i19.ExpansionPanelComponent, i20.ExpansionPanelTitleDirective, i21.GridLayoutComponent, i22.GridLayoutItemComponent, i23.PanelBarComponent, i24.PanelBarItemComponent, i25.PanelBarContentDirective, i26.PanelBarItemTemplateDirective, i27.PanelBarItemTitleDirective, i28.SplitterComponent, i29.SplitterPaneComponent, i30.StackLayoutComponent, i31.StepperComponent, i32.StepperCustomMessagesComponent, i33.StepperIndicatorTemplateDirective, i34.StepperLabelTemplateDirective, i35.StepperStepTemplateDirective, i36.TabStripComponent, i37.TabStripTabComponent, i38.TabContentDirective, i39.TabTitleDirective, i40.TabStripCustomMessagesComponent, i41.TileLayoutComponent, i42.TileLayoutItemBodyComponent, i43.TileLayoutItemComponent, i44.TileLayoutItemHeaderComponent, i45.TimelineComponent, i46.TimelineCustomMessagesComponent, i47.TimelineCardActionsTemplateDirective, i48.TimelineCardBodyTemplateDirective, i49.TimelineCardHeaderTemplateDirective], exports: [i1.AvatarComponent, i2.AvatarCustomMessagesComponent, i3.CardComponent, i4.CardActionsComponent, i5.CardBodyComponent, i6.CardFooterComponent, i7.CardHeaderComponent, i8.CardMediaDirective, i9.CardSeparatorDirective, i10.CardSubtitleDirective, i11.CardTitleDirective, i12.DrawerComponent, i13.DrawerContainerComponent, i14.DrawerContentComponent, i15.DrawerTemplateDirective, i16.DrawerFooterTemplateDirective, i17.DrawerHeaderTemplateDirective, i18.DrawerItemTemplateDirective, i19.ExpansionPanelComponent, i20.ExpansionPanelTitleDirective, i21.GridLayoutComponent, i22.GridLayoutItemComponent, i23.PanelBarComponent, i24.PanelBarItemComponent, i25.PanelBarContentDirective, i26.PanelBarItemTemplateDirective, i27.PanelBarItemTitleDirective, i28.SplitterComponent, i29.SplitterPaneComponent, i30.StackLayoutComponent, i31.StepperComponent, i32.StepperCustomMessagesComponent, i33.StepperIndicatorTemplateDirective, i34.StepperLabelTemplateDirective, i35.StepperStepTemplateDirective, i36.TabStripComponent, i37.TabStripTabComponent, i38.TabContentDirective, i39.TabTitleDirective, i40.TabStripCustomMessagesComponent, i41.TileLayoutComponent, i42.TileLayoutItemBodyComponent, i43.TileLayoutItemComponent, i44.TileLayoutItemHeaderComponent, i45.TimelineComponent, i46.TimelineCustomMessagesComponent, i47.TimelineCardActionsTemplateDirective, i48.TimelineCardBodyTemplateDirective, i49.TimelineCardHeaderTemplateDirective] });
|
|
92
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutModule, imports: [i1.AvatarComponent, i12.DrawerComponent, i19.ExpansionPanelComponent, i23.PanelBarComponent, i24.PanelBarItemComponent, i28.SplitterComponent, i31.StepperComponent, i36.TabStripComponent, i41.TileLayoutComponent, i45.TimelineComponent] });
|
|
90
93
|
}
|
|
91
|
-
|
|
92
|
-
LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, imports: [i1.AvatarComponent, i2.AvatarCustomMessagesComponent, i3.CardComponent, i4.CardActionsComponent, i5.CardBodyComponent, i6.CardFooterComponent, i7.CardHeaderComponent, i8.CardMediaDirective, i9.CardSeparatorDirective, i10.CardSubtitleDirective, i11.CardTitleDirective, i12.DrawerComponent, i13.DrawerContainerComponent, i14.DrawerContentComponent, i15.DrawerTemplateDirective, i16.DrawerFooterTemplateDirective, i17.DrawerHeaderTemplateDirective, i18.DrawerItemTemplateDirective, i19.ExpansionPanelComponent, i20.ExpansionPanelTitleDirective, i21.GridLayoutComponent, i22.GridLayoutItemComponent, i23.PanelBarComponent, i24.PanelBarItemComponent, i25.PanelBarContentDirective, i26.PanelBarItemTemplateDirective, i27.PanelBarItemTitleDirective, i28.SplitterComponent, i29.SplitterPaneComponent, i30.StackLayoutComponent, i31.StepperComponent, i32.StepperCustomMessagesComponent, i33.StepperIndicatorTemplateDirective, i34.StepperLabelTemplateDirective, i35.StepperStepTemplateDirective, i36.TabStripComponent, i37.TabStripTabComponent, i38.TabContentDirective, i39.TabTitleDirective, i40.TabStripCustomMessagesComponent, i41.TileLayoutComponent, i42.TileLayoutItemBodyComponent, i43.TileLayoutItemComponent, i44.TileLayoutItemHeaderComponent, i45.TimelineComponent, i46.TimelineCustomMessagesComponent, i47.TimelineCardActionsTemplateDirective, i48.TimelineCardBodyTemplateDirective, i49.TimelineCardHeaderTemplateDirective], exports: [i1.AvatarComponent, i2.AvatarCustomMessagesComponent, i3.CardComponent, i4.CardActionsComponent, i5.CardBodyComponent, i6.CardFooterComponent, i7.CardHeaderComponent, i8.CardMediaDirective, i9.CardSeparatorDirective, i10.CardSubtitleDirective, i11.CardTitleDirective, i12.DrawerComponent, i13.DrawerContainerComponent, i14.DrawerContentComponent, i15.DrawerTemplateDirective, i16.DrawerFooterTemplateDirective, i17.DrawerHeaderTemplateDirective, i18.DrawerItemTemplateDirective, i19.ExpansionPanelComponent, i20.ExpansionPanelTitleDirective, i21.GridLayoutComponent, i22.GridLayoutItemComponent, i23.PanelBarComponent, i24.PanelBarItemComponent, i25.PanelBarContentDirective, i26.PanelBarItemTemplateDirective, i27.PanelBarItemTitleDirective, i28.SplitterComponent, i29.SplitterPaneComponent, i30.StackLayoutComponent, i31.StepperComponent, i32.StepperCustomMessagesComponent, i33.StepperIndicatorTemplateDirective, i34.StepperLabelTemplateDirective, i35.StepperStepTemplateDirective, i36.TabStripComponent, i37.TabStripTabComponent, i38.TabContentDirective, i39.TabTitleDirective, i40.TabStripCustomMessagesComponent, i41.TileLayoutComponent, i42.TileLayoutItemBodyComponent, i43.TileLayoutItemComponent, i44.TileLayoutItemHeaderComponent, i45.TimelineComponent, i46.TimelineCustomMessagesComponent, i47.TimelineCardActionsTemplateDirective, i48.TimelineCardBodyTemplateDirective, i49.TimelineCardHeaderTemplateDirective] });
|
|
93
|
-
LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, imports: [i1.AvatarComponent, i2.AvatarCustomMessagesComponent, i3.CardComponent, i4.CardActionsComponent, i5.CardBodyComponent, i6.CardFooterComponent, i7.CardHeaderComponent, i12.DrawerComponent, i13.DrawerContainerComponent, i14.DrawerContentComponent, i19.ExpansionPanelComponent, i21.GridLayoutComponent, i22.GridLayoutItemComponent, i23.PanelBarComponent, i24.PanelBarItemComponent, i28.SplitterComponent, i29.SplitterPaneComponent, i30.StackLayoutComponent, i31.StepperComponent, i32.StepperCustomMessagesComponent, i36.TabStripComponent, i37.TabStripTabComponent, i40.TabStripCustomMessagesComponent, i41.TileLayoutComponent, i42.TileLayoutItemBodyComponent, i43.TileLayoutItemComponent, i44.TileLayoutItemHeaderComponent, i45.TimelineComponent, i46.TimelineCustomMessagesComponent] });
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, decorators: [{
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutModule, decorators: [{
|
|
95
95
|
type: NgModule,
|
|
96
96
|
args: [{
|
|
97
97
|
exports: [...KENDO_LAYOUT],
|
|
@@ -15,25 +15,44 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
15
15
|
* Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
|
|
16
16
|
*/
|
|
17
17
|
export class GridLayoutComponent {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
this.hostClass = true;
|
|
23
|
-
/**
|
|
24
|
-
* Specifies the gaps between the elements. The default value is `0`
|
|
25
|
-
* ([see example](slug:layout_gridlayout#toc-gap)).
|
|
26
|
-
*/
|
|
27
|
-
this.gap = 0;
|
|
28
|
-
this._align = {
|
|
29
|
-
horizontal: 'stretch',
|
|
30
|
-
vertical: 'stretch'
|
|
31
|
-
};
|
|
32
|
-
validatePackage(packageMetadata);
|
|
33
|
-
}
|
|
18
|
+
renderer;
|
|
19
|
+
element;
|
|
20
|
+
localization;
|
|
21
|
+
hostClass = true;
|
|
34
22
|
get dir() {
|
|
35
23
|
return this.direction;
|
|
36
24
|
}
|
|
25
|
+
/**
|
|
26
|
+
* Specifies the number of rows and their height
|
|
27
|
+
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
|
|
28
|
+
*
|
|
29
|
+
* Accepts an array, which serves two purposes:
|
|
30
|
+
*
|
|
31
|
+
* The number of elements in the array defines the number of rows.
|
|
32
|
+
* Each array element defines the size of the corresponding row. The possible array values are:
|
|
33
|
+
* * `number` - Defines the size in pixels.
|
|
34
|
+
* * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
|
|
35
|
+
* * [GridLayoutRowSize]({% slug api_layout_gridlayoutrowsize %}) - Configuration object, which accepts a `height` key.
|
|
36
|
+
*/
|
|
37
|
+
rows;
|
|
38
|
+
/**
|
|
39
|
+
* Specifies the number of columns and their widths
|
|
40
|
+
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
|
|
41
|
+
*
|
|
42
|
+
* Accepts an array, which serves two purposes:
|
|
43
|
+
*
|
|
44
|
+
* The number of elements in the array defines the number of columns.
|
|
45
|
+
* Each array element defines the size of the corresponding column. The possible array values are:
|
|
46
|
+
* * `number` - Defines the size in pixels.
|
|
47
|
+
* * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
|
|
48
|
+
* * [GridLayoutColSize]({% slug api_layout_gridlayoutcolsize %}) - Configuration object, which accepts a `width` key.
|
|
49
|
+
*/
|
|
50
|
+
cols;
|
|
51
|
+
/**
|
|
52
|
+
* Specifies the gaps between the elements. The default value is `0`
|
|
53
|
+
* ([see example](slug:layout_gridlayout#toc-gap)).
|
|
54
|
+
*/
|
|
55
|
+
gap = 0;
|
|
37
56
|
/**
|
|
38
57
|
* Specifies the horizontal and vertical alignment of the inner GridLayout elements
|
|
39
58
|
* ([see example]({% slug layout_gridlayout %}#toc-alignment)).
|
|
@@ -45,6 +64,18 @@ export class GridLayoutComponent {
|
|
|
45
64
|
get align() {
|
|
46
65
|
return this._align;
|
|
47
66
|
}
|
|
67
|
+
_align = {
|
|
68
|
+
horizontal: 'stretch',
|
|
69
|
+
vertical: 'stretch'
|
|
70
|
+
};
|
|
71
|
+
justifyClass;
|
|
72
|
+
alignClass;
|
|
73
|
+
constructor(renderer, element, localization) {
|
|
74
|
+
this.renderer = renderer;
|
|
75
|
+
this.element = element;
|
|
76
|
+
this.localization = localization;
|
|
77
|
+
validatePackage(packageMetadata);
|
|
78
|
+
}
|
|
48
79
|
ngAfterViewInit() {
|
|
49
80
|
this.handleAlignClasses();
|
|
50
81
|
this.handleGridTemplateStyling('rows');
|
|
@@ -96,18 +127,18 @@ export class GridLayoutComponent {
|
|
|
96
127
|
get direction() {
|
|
97
128
|
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
98
129
|
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
|
|
130
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
131
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridLayoutComponent, isStandalone: true, selector: "kendo-gridlayout", inputs: { rows: "rows", cols: "cols", gap: "gap", align: "align" }, host: { properties: { "class.k-grid-layout": "this.hostClass", "attr.dir": "this.dir" } }, providers: [
|
|
132
|
+
LocalizationService,
|
|
133
|
+
{
|
|
134
|
+
provide: L10N_PREFIX,
|
|
135
|
+
useValue: 'kendo.gridlayout'
|
|
136
|
+
}
|
|
137
|
+
], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
|
|
108
138
|
<ng-content></ng-content>
|
|
109
139
|
`, isInline: true });
|
|
110
|
-
|
|
140
|
+
}
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutComponent, decorators: [{
|
|
111
142
|
type: Component,
|
|
112
143
|
args: [{
|
|
113
144
|
exportAs: 'kendoGridLayout',
|
|
@@ -5,6 +5,28 @@
|
|
|
5
5
|
import { Component, Input, Renderer2, ElementRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
export class GridLayoutItemComponent {
|
|
8
|
+
renderer;
|
|
9
|
+
element;
|
|
10
|
+
/**
|
|
11
|
+
* Sets the row of the item in the GridLayout
|
|
12
|
+
* ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
13
|
+
*/
|
|
14
|
+
row;
|
|
15
|
+
/**
|
|
16
|
+
* Sets the column of the item in the GridLayout
|
|
17
|
+
* ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
18
|
+
*/
|
|
19
|
+
col;
|
|
20
|
+
/**
|
|
21
|
+
* Determines how many rows will the item span. The default size is one row
|
|
22
|
+
* ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
23
|
+
*/
|
|
24
|
+
rowSpan;
|
|
25
|
+
/**
|
|
26
|
+
* Determines how many columns will the item span. The default size is one column
|
|
27
|
+
* ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
28
|
+
*/
|
|
29
|
+
colSpan;
|
|
8
30
|
constructor(renderer, element) {
|
|
9
31
|
this.renderer = renderer;
|
|
10
32
|
this.element = element;
|
|
@@ -23,12 +45,12 @@ export class GridLayoutItemComponent {
|
|
|
23
45
|
const gridAreaStyle = `${row} / ${col} / ${rowSpan} / ${colSpan}`;
|
|
24
46
|
this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
|
|
25
47
|
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
GridLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridLayoutItemComponent, isStandalone: true, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
49
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridLayoutItemComponent, isStandalone: true, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
|
|
29
50
|
<ng-content></ng-content>
|
|
30
51
|
`, isInline: true });
|
|
31
|
-
|
|
52
|
+
}
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
|
|
32
54
|
type: Component,
|
|
33
55
|
args: [{
|
|
34
56
|
selector: 'kendo-gridlayout-item',
|
|
@@ -15,31 +15,10 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
15
15
|
* Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
|
|
16
16
|
*/
|
|
17
17
|
export class StackLayoutComponent {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
this.hostClass = true;
|
|
23
|
-
/**
|
|
24
|
-
* Specifies the gap between the inner StackLayout elements. The default value is `0`
|
|
25
|
-
* ([see example](slug:layout_stacklayout#toc-gap)).
|
|
26
|
-
*/
|
|
27
|
-
this.gap = 0;
|
|
28
|
-
/**
|
|
29
|
-
* Specifies the orientation of the StackLayout
|
|
30
|
-
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
|
|
31
|
-
*
|
|
32
|
-
* The possible values are:
|
|
33
|
-
* (Default) `horizontal`
|
|
34
|
-
* `vertical`
|
|
35
|
-
*/
|
|
36
|
-
this.orientation = 'horizontal';
|
|
37
|
-
this._align = {
|
|
38
|
-
horizontal: 'stretch',
|
|
39
|
-
vertical: 'stretch'
|
|
40
|
-
};
|
|
41
|
-
validatePackage(packageMetadata);
|
|
42
|
-
}
|
|
18
|
+
renderer;
|
|
19
|
+
element;
|
|
20
|
+
localization;
|
|
21
|
+
hostClass = true;
|
|
43
22
|
get horizontalClass() {
|
|
44
23
|
return this.orientation === 'horizontal';
|
|
45
24
|
}
|
|
@@ -60,6 +39,32 @@ export class StackLayoutComponent {
|
|
|
60
39
|
get align() {
|
|
61
40
|
return this._align;
|
|
62
41
|
}
|
|
42
|
+
/**
|
|
43
|
+
* Specifies the gap between the inner StackLayout elements. The default value is `0`
|
|
44
|
+
* ([see example](slug:layout_stacklayout#toc-gap)).
|
|
45
|
+
*/
|
|
46
|
+
gap = 0;
|
|
47
|
+
/**
|
|
48
|
+
* Specifies the orientation of the StackLayout
|
|
49
|
+
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
|
|
50
|
+
*
|
|
51
|
+
* The possible values are:
|
|
52
|
+
* (Default) `horizontal`
|
|
53
|
+
* `vertical`
|
|
54
|
+
*/
|
|
55
|
+
orientation = 'horizontal';
|
|
56
|
+
_align = {
|
|
57
|
+
horizontal: 'stretch',
|
|
58
|
+
vertical: 'stretch'
|
|
59
|
+
};
|
|
60
|
+
justifyClass;
|
|
61
|
+
alignClass;
|
|
62
|
+
constructor(renderer, element, localization) {
|
|
63
|
+
this.renderer = renderer;
|
|
64
|
+
this.element = element;
|
|
65
|
+
this.localization = localization;
|
|
66
|
+
validatePackage(packageMetadata);
|
|
67
|
+
}
|
|
63
68
|
ngAfterViewInit() {
|
|
64
69
|
this.handleAlignClasses();
|
|
65
70
|
this.setGap();
|
|
@@ -98,18 +103,18 @@ export class StackLayoutComponent {
|
|
|
98
103
|
get direction() {
|
|
99
104
|
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
100
105
|
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StackLayoutComponent, isStandalone: true, selector: "kendo-stacklayout", inputs: { align: "align", gap: "gap", orientation: "orientation" }, host: { properties: { "class.k-stack-layout": "this.hostClass", "class.k-hstack": "this.horizontalClass", "class.k-vstack": "this.verticalClass", "attr.dir": "this.dir" } }, providers: [
|
|
108
|
+
LocalizationService,
|
|
109
|
+
{
|
|
110
|
+
provide: L10N_PREFIX,
|
|
111
|
+
useValue: 'kendo.stacklayout'
|
|
112
|
+
}
|
|
113
|
+
], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
|
|
110
114
|
<ng-content></ng-content>
|
|
111
115
|
`, isInline: true });
|
|
112
|
-
|
|
116
|
+
}
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutComponent, decorators: [{
|
|
113
118
|
type: Component,
|
|
114
119
|
args: [{
|
|
115
120
|
exportAs: 'kendoStackLayout',
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-layout',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.0-develop.
|
|
12
|
+
publishDate: 1730818262,
|
|
13
|
+
version: '17.0.0-develop.41',
|
|
14
14
|
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'
|
|
15
15
|
};
|
|
@@ -9,13 +9,14 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
* The content can be expanded or collapsed through the item.
|
|
10
10
|
*/
|
|
11
11
|
export class PanelBarContentDirective {
|
|
12
|
+
templateRef;
|
|
12
13
|
constructor(templateRef) {
|
|
13
14
|
this.templateRef = templateRef;
|
|
14
15
|
}
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
17
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarContentDirective, isStandalone: true, selector: "[kendoPanelBarContent]", ngImport: i0 });
|
|
15
18
|
}
|
|
16
|
-
|
|
17
|
-
PanelBarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarContentDirective, isStandalone: true, selector: "[kendoPanelBarContent]", ngImport: i0 });
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarContentDirective, decorators: [{
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarContentDirective, decorators: [{
|
|
19
20
|
type: Directive,
|
|
20
21
|
args: [{
|
|
21
22
|
selector: "[kendoPanelBarContent]",
|