@progress/kendo-angular-layout 17.0.0-develop.3 → 17.0.0-develop.31
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 +99 -64
- 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 +262 -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 +109 -68
- 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 -18
- 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/{esm2020 → esm2022}/tilelayout/tilelayout-item-header.component.mjs +11 -9
- package/{esm2020 → esm2022}/tilelayout/tilelayout-item.component.mjs +78 -48
- package/{esm2020 → esm2022}/tilelayout/tilelayout-resize-handle.directive.mjs +7 -3
- package/{esm2020 → esm2022}/tilelayout/tilelayout.component.mjs +101 -88
- 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 +75 -46
- 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 +2668 -1733
- 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 +23 -4
- 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 -1
- 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 +1 -1
- 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/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
|
@@ -30,88 +30,12 @@ import * as i3 from "./tabstrip-scroll.service";
|
|
|
30
30
|
* Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
|
|
31
31
|
*/
|
|
32
32
|
export class TabStripComponent {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
this.ngZone = ngZone;
|
|
40
|
-
/**
|
|
41
|
-
* Enables the tab animation.
|
|
42
|
-
*
|
|
43
|
-
* @default true
|
|
44
|
-
*/
|
|
45
|
-
this.animate = true;
|
|
46
|
-
/**
|
|
47
|
-
* Sets the position of the tabs. Defaults to `top`.
|
|
48
|
-
*
|
|
49
|
-
* @default 'top'
|
|
50
|
-
*/
|
|
51
|
-
this.tabPosition = 'top';
|
|
52
|
-
/**
|
|
53
|
-
* When set to `true`, the component renders all tabs and they are persisted in the DOM.
|
|
54
|
-
* By default, `keepTabContent` is `false`.
|
|
55
|
-
*
|
|
56
|
-
* @default false
|
|
57
|
-
*/
|
|
58
|
-
this.keepTabContent = false;
|
|
59
|
-
/**
|
|
60
|
-
* When set to `true`, a close button will be rendered inside each tab.
|
|
61
|
-
* By default, `closable` is `false`.
|
|
62
|
-
*
|
|
63
|
-
* @default false
|
|
64
|
-
*/
|
|
65
|
-
this.closable = false;
|
|
66
|
-
/**
|
|
67
|
-
* Defines the name for an existing font icon in the Kendo UI theme for the close icon.
|
|
68
|
-
*/
|
|
69
|
-
this.closeIcon = 'x';
|
|
70
|
-
/**
|
|
71
|
-
* Determines whether the content associated with each tab will be rendered.
|
|
72
|
-
*
|
|
73
|
-
* @default true
|
|
74
|
-
*/
|
|
75
|
-
this.showContentArea = true;
|
|
76
|
-
/**
|
|
77
|
-
* Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
|
|
78
|
-
* The event data contains the index of the selected tab and its title.
|
|
79
|
-
*/
|
|
80
|
-
this.tabSelect = new EventEmitter();
|
|
81
|
-
/**
|
|
82
|
-
* Fires each time the user closes a tab.
|
|
83
|
-
* The event data contains the index of the closed tab and its instance.
|
|
84
|
-
*/
|
|
85
|
-
this.tabClose = new EventEmitter();
|
|
86
|
-
/**
|
|
87
|
-
* Fires each time the user scrolls the TabStrip list.
|
|
88
|
-
* The event is preventable.
|
|
89
|
-
*/
|
|
90
|
-
this.tabScroll = new EventEmitter();
|
|
91
|
-
this.hostClasses = true;
|
|
92
|
-
/**
|
|
93
|
-
* A query list of all declared tabs.
|
|
94
|
-
*/
|
|
95
|
-
this.tabs = new QueryList();
|
|
96
|
-
/**
|
|
97
|
-
* @hidden
|
|
98
|
-
*/
|
|
99
|
-
this.showLicenseWatermark = false;
|
|
100
|
-
this._scrollableSettings = normalizeScrollableSettings(false);
|
|
101
|
-
this.subscriptions = new Subscription();
|
|
102
|
-
this.subscriptionsArePresent = false;
|
|
103
|
-
this.tabStripId = guid();
|
|
104
|
-
const isValid = validatePackage(packageMetadata);
|
|
105
|
-
this.showLicenseWatermark = shouldShowValidationUI(isValid);
|
|
106
|
-
this.tabstripService.owner = this;
|
|
107
|
-
this.scrollService.owner = this;
|
|
108
|
-
this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
|
|
109
|
-
if (this.hasScrollButtons) {
|
|
110
|
-
const action = activeButtonSettings.active ? 'remove' : 'add';
|
|
111
|
-
this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
|
|
112
|
-
}
|
|
113
|
-
}));
|
|
114
|
-
}
|
|
33
|
+
localization;
|
|
34
|
+
renderer;
|
|
35
|
+
wrapper;
|
|
36
|
+
tabstripService;
|
|
37
|
+
scrollService;
|
|
38
|
+
ngZone;
|
|
115
39
|
/**
|
|
116
40
|
* Sets the height of the TabStrip.
|
|
117
41
|
*/
|
|
@@ -122,6 +46,38 @@ export class TabStripComponent {
|
|
|
122
46
|
get height() {
|
|
123
47
|
return this._height;
|
|
124
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* Enables the tab animation.
|
|
51
|
+
*
|
|
52
|
+
* @default true
|
|
53
|
+
*/
|
|
54
|
+
animate = true;
|
|
55
|
+
/**
|
|
56
|
+
* Sets the alignment of the tabs.
|
|
57
|
+
*
|
|
58
|
+
* @default: 'start'
|
|
59
|
+
*/
|
|
60
|
+
tabAlignment = 'start';
|
|
61
|
+
/**
|
|
62
|
+
* Sets the position of the tabs. Defaults to `top`.
|
|
63
|
+
*
|
|
64
|
+
* @default 'top'
|
|
65
|
+
*/
|
|
66
|
+
tabPosition = 'top';
|
|
67
|
+
/**
|
|
68
|
+
* When set to `true`, the component renders all tabs and they are persisted in the DOM.
|
|
69
|
+
* By default, `keepTabContent` is `false`.
|
|
70
|
+
*
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
73
|
+
keepTabContent = false;
|
|
74
|
+
/**
|
|
75
|
+
* When set to `true`, a close button will be rendered inside each tab.
|
|
76
|
+
* By default, `closable` is `false`.
|
|
77
|
+
*
|
|
78
|
+
* @default false
|
|
79
|
+
*/
|
|
80
|
+
closable = false;
|
|
125
81
|
/**
|
|
126
82
|
* Enables the scrolling of the tab list. When set to `true` and the total size of all tabs
|
|
127
83
|
* is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list.
|
|
@@ -140,6 +96,14 @@ export class TabStripComponent {
|
|
|
140
96
|
get scrollable() {
|
|
141
97
|
return this._scrollableSettings;
|
|
142
98
|
}
|
|
99
|
+
/**
|
|
100
|
+
* Defines the name for an existing font icon in the Kendo UI theme for the close icon.
|
|
101
|
+
*/
|
|
102
|
+
closeIcon = 'x';
|
|
103
|
+
/**
|
|
104
|
+
* Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button.
|
|
105
|
+
*/
|
|
106
|
+
closeIconClass;
|
|
143
107
|
/**
|
|
144
108
|
* Defines an SVGIcon to be rendered for the close icon.
|
|
145
109
|
* The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
|
@@ -153,6 +117,28 @@ export class TabStripComponent {
|
|
|
153
117
|
get closeSVGIcon() {
|
|
154
118
|
return this._closeSVGIcon;
|
|
155
119
|
}
|
|
120
|
+
/**
|
|
121
|
+
* Determines whether the content associated with each tab will be rendered.
|
|
122
|
+
*
|
|
123
|
+
* @default true
|
|
124
|
+
*/
|
|
125
|
+
showContentArea = true;
|
|
126
|
+
/**
|
|
127
|
+
* Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
|
|
128
|
+
* The event data contains the index of the selected tab and its title.
|
|
129
|
+
*/
|
|
130
|
+
tabSelect = new EventEmitter();
|
|
131
|
+
/**
|
|
132
|
+
* Fires each time the user closes a tab.
|
|
133
|
+
* The event data contains the index of the closed tab and its instance.
|
|
134
|
+
*/
|
|
135
|
+
tabClose = new EventEmitter();
|
|
136
|
+
/**
|
|
137
|
+
* Fires each time the user scrolls the TabStrip list.
|
|
138
|
+
* The event is preventable.
|
|
139
|
+
*/
|
|
140
|
+
tabScroll = new EventEmitter();
|
|
141
|
+
hostClasses = true;
|
|
156
142
|
get tabsAtTop() {
|
|
157
143
|
return this.tabPosition === 'top';
|
|
158
144
|
}
|
|
@@ -171,6 +157,60 @@ export class TabStripComponent {
|
|
|
171
157
|
get tabStripScrollable() {
|
|
172
158
|
return this._scrollableSettings.enabled;
|
|
173
159
|
}
|
|
160
|
+
/**
|
|
161
|
+
* A query list of all declared tabs.
|
|
162
|
+
*/
|
|
163
|
+
tabs = new QueryList();
|
|
164
|
+
/**
|
|
165
|
+
* @hidden
|
|
166
|
+
*/
|
|
167
|
+
tablist;
|
|
168
|
+
/**
|
|
169
|
+
* @hidden
|
|
170
|
+
*/
|
|
171
|
+
tabHeaderContainers;
|
|
172
|
+
/**
|
|
173
|
+
* @hidden
|
|
174
|
+
*/
|
|
175
|
+
prevScrollButton;
|
|
176
|
+
/**
|
|
177
|
+
* @hidden
|
|
178
|
+
*/
|
|
179
|
+
nextScrollButton;
|
|
180
|
+
/**
|
|
181
|
+
* @hidden
|
|
182
|
+
*/
|
|
183
|
+
localizationChangeSubscription;
|
|
184
|
+
/**
|
|
185
|
+
* @hidden
|
|
186
|
+
*/
|
|
187
|
+
showLicenseWatermark = false;
|
|
188
|
+
_height;
|
|
189
|
+
_scrollableSettings = normalizeScrollableSettings(false);
|
|
190
|
+
subscriptions = new Subscription();
|
|
191
|
+
subscriptionsArePresent = false;
|
|
192
|
+
_closeSVGIcon;
|
|
193
|
+
tabStripId = guid();
|
|
194
|
+
tabsChangesSub;
|
|
195
|
+
activeStateChangeSub;
|
|
196
|
+
constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
|
|
197
|
+
this.localization = localization;
|
|
198
|
+
this.renderer = renderer;
|
|
199
|
+
this.wrapper = wrapper;
|
|
200
|
+
this.tabstripService = tabstripService;
|
|
201
|
+
this.scrollService = scrollService;
|
|
202
|
+
this.ngZone = ngZone;
|
|
203
|
+
const isValid = validatePackage(packageMetadata);
|
|
204
|
+
this.showLicenseWatermark = shouldShowValidationUI(isValid);
|
|
205
|
+
this.tabstripService.owner = this;
|
|
206
|
+
this.scrollService.owner = this;
|
|
207
|
+
this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
|
|
208
|
+
if (this.hasScrollButtons) {
|
|
209
|
+
const action = activeButtonSettings.active ? 'remove' : 'add';
|
|
210
|
+
this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
|
|
211
|
+
}
|
|
212
|
+
}));
|
|
213
|
+
}
|
|
174
214
|
ngAfterViewInit() {
|
|
175
215
|
if (!isDocumentAvailable()) {
|
|
176
216
|
return;
|
|
@@ -380,17 +420,16 @@ export class TabStripComponent {
|
|
|
380
420
|
}));
|
|
381
421
|
});
|
|
382
422
|
}
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
}
|
|
393
|
-
], 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: `
|
|
423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
424
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "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" } }, providers: [
|
|
425
|
+
TabStripService,
|
|
426
|
+
ScrollService,
|
|
427
|
+
LocalizationService,
|
|
428
|
+
{
|
|
429
|
+
provide: L10N_PREFIX,
|
|
430
|
+
useValue: 'kendo.tabstrip'
|
|
431
|
+
}
|
|
432
|
+
], 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: `
|
|
394
433
|
<ng-container kendoTabStripLocalizedMessages
|
|
395
434
|
i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
|
|
396
435
|
closeTitle="Close"
|
|
@@ -427,7 +466,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
427
466
|
[prev]="true"
|
|
428
467
|
[title]="localization.get('previousTabButton')"
|
|
429
468
|
(tabScroll)="tabScroll.emit($event)"
|
|
430
|
-
class="k-icon-button k-button k-button-md k-
|
|
469
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
431
470
|
(onClick)="onScrollButtonClick($event)">
|
|
432
471
|
</span>
|
|
433
472
|
<ul role="tablist" #tablist
|
|
@@ -445,6 +484,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
445
484
|
<li
|
|
446
485
|
#tabHeaderContainer
|
|
447
486
|
kendoTabStripTab
|
|
487
|
+
[class.k-first]="i === 0"
|
|
488
|
+
[class.k-last]="i === tabs.length - 1"
|
|
448
489
|
[ngClass]="tab.cssClass"
|
|
449
490
|
[ngStyle]="tab.cssStyle"
|
|
450
491
|
[tab]="tab"
|
|
@@ -470,7 +511,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
470
511
|
[prev]="false"
|
|
471
512
|
[title]="localization.get('nextTabButton')"
|
|
472
513
|
(tabScroll)="tabScroll.emit($event)"
|
|
473
|
-
class="k-icon-button k-button k-button-md k-
|
|
514
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
474
515
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
475
516
|
</div>
|
|
476
517
|
</ng-template>
|
|
@@ -495,15 +536,16 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
495
536
|
<kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
|
|
496
537
|
<div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
|
|
497
538
|
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }], animations: [
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
539
|
+
trigger('state', [
|
|
540
|
+
state('active', style({ opacity: 1 })),
|
|
541
|
+
transition('* => active', [
|
|
542
|
+
style({ opacity: 0 }),
|
|
543
|
+
animate('400ms ease-in')
|
|
544
|
+
])
|
|
503
545
|
])
|
|
504
|
-
])
|
|
505
|
-
|
|
506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
546
|
+
] });
|
|
547
|
+
}
|
|
548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, decorators: [{
|
|
507
549
|
type: Component,
|
|
508
550
|
args: [{
|
|
509
551
|
animations: [
|
|
@@ -563,7 +605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
563
605
|
[prev]="true"
|
|
564
606
|
[title]="localization.get('previousTabButton')"
|
|
565
607
|
(tabScroll)="tabScroll.emit($event)"
|
|
566
|
-
class="k-icon-button k-button k-button-md k-
|
|
608
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
567
609
|
(onClick)="onScrollButtonClick($event)">
|
|
568
610
|
</span>
|
|
569
611
|
<ul role="tablist" #tablist
|
|
@@ -581,6 +623,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
581
623
|
<li
|
|
582
624
|
#tabHeaderContainer
|
|
583
625
|
kendoTabStripTab
|
|
626
|
+
[class.k-first]="i === 0"
|
|
627
|
+
[class.k-last]="i === tabs.length - 1"
|
|
584
628
|
[ngClass]="tab.cssClass"
|
|
585
629
|
[ngStyle]="tab.cssStyle"
|
|
586
630
|
[tab]="tab"
|
|
@@ -606,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
606
650
|
[prev]="false"
|
|
607
651
|
[title]="localization.get('nextTabButton')"
|
|
608
652
|
(tabScroll)="tabScroll.emit($event)"
|
|
609
|
-
class="k-icon-button k-button k-button-md k-
|
|
653
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
610
654
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
611
655
|
</div>
|
|
612
656
|
</ng-template>
|
|
@@ -667,7 +711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
667
711
|
args: ['class.k-tabstrip']
|
|
668
712
|
}, {
|
|
669
713
|
type: HostBinding,
|
|
670
|
-
args: ['class.k-
|
|
714
|
+
args: ['class.k-header']
|
|
671
715
|
}], tabsAtTop: [{
|
|
672
716
|
type: HostBinding,
|
|
673
717
|
args: ['class.k-tabstrip-top']
|
|
@@ -14,6 +14,9 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
16
16
|
export class TabStripService {
|
|
17
|
+
localization;
|
|
18
|
+
ngZone;
|
|
19
|
+
owner;
|
|
17
20
|
constructor(localization, ngZone) {
|
|
18
21
|
this.localization = localization;
|
|
19
22
|
this.ngZone = ngZone;
|
|
@@ -143,9 +146,9 @@ export class TabStripService {
|
|
|
143
146
|
}
|
|
144
147
|
return selectedIndex + 1;
|
|
145
148
|
}
|
|
149
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
150
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService });
|
|
146
151
|
}
|
|
147
|
-
|
|
148
|
-
TabStripService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService });
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, decorators: [{
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, decorators: [{
|
|
150
153
|
type: Injectable
|
|
151
154
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; } });
|
|
@@ -22,11 +22,11 @@ import * as i5 from "./tabstrip/localization/custom-messages.component";
|
|
|
22
22
|
* - `TabTitleDirective`—The tab title directive used on the `<ng-template>` tag.
|
|
23
23
|
*/
|
|
24
24
|
export class TabStripModule {
|
|
25
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
26
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent], exports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent] });
|
|
27
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent] });
|
|
25
28
|
}
|
|
26
|
-
|
|
27
|
-
TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent], exports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent] });
|
|
28
|
-
TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i5.TabStripCustomMessagesComponent] });
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, decorators: [{
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, decorators: [{
|
|
30
30
|
type: NgModule,
|
|
31
31
|
args: [{
|
|
32
32
|
exports: [...KENDO_TABSTRIP],
|
|
@@ -16,21 +16,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
16
16
|
* @hidden
|
|
17
17
|
*/
|
|
18
18
|
export class TileLayoutDraggingService {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
this.lastDragCursorOffset = {
|
|
29
|
-
x: 0,
|
|
30
|
-
y: 0
|
|
31
|
-
};
|
|
32
|
-
this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
|
|
33
|
-
}
|
|
19
|
+
zone;
|
|
20
|
+
renderer;
|
|
21
|
+
cdr;
|
|
22
|
+
localization;
|
|
23
|
+
reorderable = new BehaviorSubject(null);
|
|
24
|
+
resizable = new BehaviorSubject(null);
|
|
25
|
+
reorder = new Subject();
|
|
26
|
+
resize = new Subject();
|
|
27
|
+
tileLayoutSettings;
|
|
34
28
|
get colStart() {
|
|
35
29
|
return this.currentColStart;
|
|
36
30
|
}
|
|
@@ -43,6 +37,33 @@ export class TileLayoutDraggingService {
|
|
|
43
37
|
get order() {
|
|
44
38
|
return this.targetOrder;
|
|
45
39
|
}
|
|
40
|
+
draggedItem;
|
|
41
|
+
draggedItemWrapper;
|
|
42
|
+
reordering;
|
|
43
|
+
resizing;
|
|
44
|
+
offset;
|
|
45
|
+
targetSize;
|
|
46
|
+
cellSize;
|
|
47
|
+
targetOrder;
|
|
48
|
+
currentColStart;
|
|
49
|
+
currentRowStart;
|
|
50
|
+
startingPoint;
|
|
51
|
+
currentResizingColSpan;
|
|
52
|
+
currentResizingRowSpan;
|
|
53
|
+
direction;
|
|
54
|
+
lastDragCursorOffset = {
|
|
55
|
+
x: 0,
|
|
56
|
+
y: 0
|
|
57
|
+
};
|
|
58
|
+
localizationSubscription;
|
|
59
|
+
rtl;
|
|
60
|
+
constructor(zone, renderer, cdr, localization) {
|
|
61
|
+
this.zone = zone;
|
|
62
|
+
this.renderer = renderer;
|
|
63
|
+
this.cdr = cdr;
|
|
64
|
+
this.localization = localization;
|
|
65
|
+
this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
|
|
66
|
+
}
|
|
46
67
|
ngOnDestroy() {
|
|
47
68
|
this.localizationSubscription.unsubscribe();
|
|
48
69
|
}
|
|
@@ -396,9 +417,9 @@ export class TileLayoutDraggingService {
|
|
|
396
417
|
const hintHeight = totalHintCellsHeight + totalHintGapsHeight - HINT_BORDERS_HEIGHT;
|
|
397
418
|
return hintHeight;
|
|
398
419
|
}
|
|
420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutDraggingService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
421
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutDraggingService });
|
|
399
422
|
}
|
|
400
|
-
|
|
401
|
-
TileLayoutDraggingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService });
|
|
402
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService, decorators: [{
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutDraggingService, decorators: [{
|
|
403
424
|
type: Injectable
|
|
404
425
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; } });
|
|
@@ -15,11 +15,16 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
15
15
|
* @hidden
|
|
16
16
|
*/
|
|
17
17
|
export class TileLayoutKeyboardNavigationService {
|
|
18
|
+
zone;
|
|
19
|
+
renderer;
|
|
20
|
+
localization;
|
|
21
|
+
navigable = new BehaviorSubject(false);
|
|
22
|
+
localizationSubscription;
|
|
23
|
+
rtl;
|
|
18
24
|
constructor(zone, renderer, localization) {
|
|
19
25
|
this.zone = zone;
|
|
20
26
|
this.renderer = renderer;
|
|
21
27
|
this.localization = localization;
|
|
22
|
-
this.navigable = new BehaviorSubject(false);
|
|
23
28
|
this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
|
|
24
29
|
}
|
|
25
30
|
ngOnDestroy() {
|
|
@@ -138,9 +143,9 @@ export class TileLayoutKeyboardNavigationService {
|
|
|
138
143
|
targetTile(focusedTile, items, offset) {
|
|
139
144
|
return items.find(item => item.order === focusedTile.order + offset);
|
|
140
145
|
}
|
|
146
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutKeyboardNavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
147
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutKeyboardNavigationService });
|
|
141
148
|
}
|
|
142
|
-
|
|
143
|
-
TileLayoutKeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService });
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService, decorators: [{
|
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutKeyboardNavigationService, decorators: [{
|
|
145
150
|
type: Injectable
|
|
146
151
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });
|
|
@@ -8,6 +8,14 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
|
|
|
8
8
|
* positions of the items is changed via the UI. If you prevent the event, the change is canceled ([see example]({% slug reordering_tilelayout %}#toc-handling-the-reorder-event)).
|
|
9
9
|
*/
|
|
10
10
|
export class TileLayoutReorderEvent extends PreventableEvent {
|
|
11
|
+
item;
|
|
12
|
+
items;
|
|
13
|
+
newIndex;
|
|
14
|
+
oldIndex;
|
|
15
|
+
newCol;
|
|
16
|
+
oldCol;
|
|
17
|
+
newRow;
|
|
18
|
+
oldRow;
|
|
11
19
|
/**
|
|
12
20
|
* Constructs the event arguments for the `reorder` event.
|
|
13
21
|
* @param item - The TileLayoutItem being reordered.
|
|
@@ -8,6 +8,12 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
|
|
|
8
8
|
* is changed from the UI. If you cancel the event, the change is prevented ([see example]({% slug resizing_tilelayout %}#toc-handling-the-resize-event)).
|
|
9
9
|
*/
|
|
10
10
|
export class TileLayoutResizeEvent extends PreventableEvent {
|
|
11
|
+
item;
|
|
12
|
+
items;
|
|
13
|
+
newRowSpan;
|
|
14
|
+
oldRowSpan;
|
|
15
|
+
newColSpan;
|
|
16
|
+
oldColSpan;
|
|
11
17
|
/**
|
|
12
18
|
* Constructs the event arguments for the `resize` event.
|
|
13
19
|
* @param item - The TileLayoutItem being resized
|
|
@@ -8,16 +8,14 @@ import * as i0 from "@angular/core";
|
|
|
8
8
|
* Holds the main content of the TileLayoutItem component.
|
|
9
9
|
*/
|
|
10
10
|
export class TileLayoutItemBodyComponent {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
TileLayoutItemBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
-
TileLayoutItemBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutItemBodyComponent, isStandalone: true, selector: "kendo-tilelayout-item-body", host: { properties: { "class.k-tilelayout-item-body": "this.hostClass", "class.k-card-body": "this.hostClass", "style.min-height": "this.minHeight" } }, ngImport: i0, template: `
|
|
11
|
+
hostClass = true;
|
|
12
|
+
minHeight = 0;
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TileLayoutItemBodyComponent, isStandalone: true, selector: "kendo-tilelayout-item-body", host: { properties: { "class.k-tilelayout-item-body": "this.hostClass", "class.k-card-body": "this.hostClass", "style.min-height": "this.minHeight" } }, ngImport: i0, template: `
|
|
18
15
|
<ng-content></ng-content>
|
|
19
16
|
`, isInline: true });
|
|
20
|
-
|
|
17
|
+
}
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
|
|
21
19
|
type: Component,
|
|
22
20
|
args: [{
|
|
23
21
|
selector: 'kendo-tilelayout-item-body',
|
|
@@ -9,11 +9,9 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
* This is the area which can be dragged to reorder the items if reordering is enabled for this item.
|
|
10
10
|
*/
|
|
11
11
|
export class TileLayoutItemHeaderComponent {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
this.hostClass = true;
|
|
16
|
-
}
|
|
12
|
+
hostEl;
|
|
13
|
+
renderer;
|
|
14
|
+
hostClass = true;
|
|
17
15
|
/**
|
|
18
16
|
* @hidden
|
|
19
17
|
*/
|
|
@@ -28,12 +26,16 @@ export class TileLayoutItemHeaderComponent {
|
|
|
28
26
|
this.renderer.removeClass(hostElement, 'k-touch-action-none');
|
|
29
27
|
}
|
|
30
28
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
constructor(hostEl, renderer) {
|
|
30
|
+
this.hostEl = hostEl;
|
|
31
|
+
this.renderer = renderer;
|
|
32
|
+
}
|
|
33
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TileLayoutItemHeaderComponent, isStandalone: true, selector: "kendo-tilelayout-item-header", inputs: { reorderable: "reorderable" }, host: { properties: { "class.k-tilelayout-item-header": "this.hostClass", "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
|
|
34
35
|
<ng-content></ng-content>
|
|
35
36
|
`, isInline: true });
|
|
36
|
-
|
|
37
|
+
}
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemHeaderComponent, decorators: [{
|
|
37
39
|
type: Component,
|
|
38
40
|
args: [{
|
|
39
41
|
selector: 'kendo-tilelayout-item-header',
|