@progress/kendo-angular-layout 21.4.1-develop.1 → 22.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/avatar/l10n/messages.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-layout.mjs +290 -290
- package/package.json +12 -20
- package/stepper/localization/messages.d.ts +1 -1
- package/tabstrip/localization/messages.d.ts +1 -1
- package/timeline/localization/messages.d.ts +1 -1
- package/esm2022/avatar/avatar.component.mjs +0 -406
- package/esm2022/avatar/l10n/custom-messages.component.mjs +0 -53
- package/esm2022/avatar/l10n/localized-messages.directive.mjs +0 -40
- package/esm2022/avatar/l10n/messages.mjs +0 -27
- package/esm2022/avatar/models/fill.mjs +0 -5
- package/esm2022/avatar/models/models.mjs +0 -9
- package/esm2022/avatar/models/rounded.mjs +0 -5
- package/esm2022/avatar/models/shape.mjs +0 -5
- package/esm2022/avatar/models/size.mjs +0 -5
- package/esm2022/avatar/models/theme-color.mjs +0 -5
- package/esm2022/avatar.module.mjs +0 -38
- package/esm2022/card/card-actions.component.mjs +0 -177
- package/esm2022/card/card-body.component.mjs +0 -37
- package/esm2022/card/card-footer.component.mjs +0 -37
- package/esm2022/card/card-header.component.mjs +0 -38
- package/esm2022/card/card.component.mjs +0 -118
- package/esm2022/card/directives/card-media.directive.mjs +0 -33
- package/esm2022/card/directives/card-separator.directive.mjs +0 -61
- package/esm2022/card/directives/card-subtitle.directive.mjs +0 -31
- package/esm2022/card/directives/card-title.directive.mjs +0 -31
- package/esm2022/card/models/actions-layout.mjs +0 -5
- package/esm2022/card/models/card-action.mjs +0 -21
- package/esm2022/card.module.mjs +0 -45
- package/esm2022/common/direction.mjs +0 -5
- package/esm2022/common/dom-queries.mjs +0 -47
- package/esm2022/common/orientation.mjs +0 -5
- package/esm2022/common/preventable-event.mjs +0 -31
- package/esm2022/common/styling-classes.mjs +0 -5
- package/esm2022/common/util.mjs +0 -85
- package/esm2022/directives.mjs +0 -174
- package/esm2022/drawer/animations.mjs +0 -146
- package/esm2022/drawer/drawer-container.component.mjs +0 -135
- package/esm2022/drawer/drawer-content.component.mjs +0 -39
- package/esm2022/drawer/drawer.component.mjs +0 -471
- package/esm2022/drawer/drawer.service.mjs +0 -105
- package/esm2022/drawer/events/drawer-list-select.event.mjs +0 -29
- package/esm2022/drawer/events/select-event.mjs +0 -33
- package/esm2022/drawer/item.component.mjs +0 -210
- package/esm2022/drawer/list.component.mjs +0 -165
- package/esm2022/drawer/models/constants.mjs +0 -8
- package/esm2022/drawer/models/drawer-animation.interface.mjs +0 -5
- package/esm2022/drawer/models/drawer-item-expand.interface.mjs +0 -5
- package/esm2022/drawer/models/drawer-item.interface.mjs +0 -5
- package/esm2022/drawer/models/drawer-view-item.interface.mjs +0 -5
- package/esm2022/drawer/models/mode.mjs +0 -5
- package/esm2022/drawer/models/position.mjs +0 -5
- package/esm2022/drawer/template-directives/drawer-template.directive.mjs +0 -43
- package/esm2022/drawer/template-directives/footer-template.directive.mjs +0 -36
- package/esm2022/drawer/template-directives/header-template.directive.mjs +0 -36
- package/esm2022/drawer/template-directives/item-template.directive.mjs +0 -44
- package/esm2022/drawer/template-directives.mjs +0 -8
- package/esm2022/drawer/types.mjs +0 -5
- package/esm2022/drawer/util.mjs +0 -16
- package/esm2022/drawer.module.mjs +0 -43
- package/esm2022/expansionpanel/animations.mjs +0 -23
- package/esm2022/expansionpanel/events/action-event.mjs +0 -21
- package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +0 -38
- package/esm2022/expansionpanel/expansionpanel.component.mjs +0 -515
- package/esm2022/expansionpanel.module.mjs +0 -38
- package/esm2022/gridlayout.module.mjs +0 -38
- package/esm2022/index.mjs +0 -89
- package/esm2022/layout.module.mjs +0 -89
- package/esm2022/layouts/grid-layout.component.mjs +0 -179
- package/esm2022/layouts/gridlayout-item.component.mjs +0 -82
- package/esm2022/layouts/models/gridlayout-gap-settings.mjs +0 -5
- package/esm2022/layouts/models/gridlayout-row-col-size.mjs +0 -5
- package/esm2022/layouts/models/layout-align-settings.mjs +0 -5
- package/esm2022/layouts/models/layout-horizontal-align.mjs +0 -5
- package/esm2022/layouts/models/layout-vertical-align.mjs +0 -5
- package/esm2022/layouts/models.mjs +0 -10
- package/esm2022/layouts/stack-layout.component.mjs +0 -161
- package/esm2022/layouts/util.mjs +0 -101
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/panelbar/events/collapse-event.mjs +0 -14
- package/esm2022/panelbar/events/expand-event.mjs +0 -14
- package/esm2022/panelbar/events/item-click-event.mjs +0 -17
- package/esm2022/panelbar/events/select-event.mjs +0 -14
- package/esm2022/panelbar/events/state-change-event.mjs +0 -13
- package/esm2022/panelbar/events.mjs +0 -9
- package/esm2022/panelbar/panelbar-content.directive.mjs +0 -36
- package/esm2022/panelbar/panelbar-expand-mode.mjs +0 -29
- package/esm2022/panelbar/panelbar-item-model.mjs +0 -5
- package/esm2022/panelbar/panelbar-item-template.directive.mjs +0 -37
- package/esm2022/panelbar/panelbar-item-title.directive.mjs +0 -42
- package/esm2022/panelbar/panelbar-item.component.mjs +0 -722
- package/esm2022/panelbar/panelbar.component.mjs +0 -705
- package/esm2022/panelbar/panelbar.service.mjs +0 -53
- package/esm2022/panelbar.module.mjs +0 -41
- package/esm2022/progress-kendo-angular-layout.mjs +0 -8
- package/esm2022/splitter/splitter-bar.component.mjs +0 -338
- package/esm2022/splitter/splitter-pane.component.mjs +0 -324
- package/esm2022/splitter/splitter.component.mjs +0 -301
- package/esm2022/splitter/splitter.service.mjs +0 -205
- package/esm2022/splitter/util.mjs +0 -34
- package/esm2022/splitter.module.mjs +0 -38
- package/esm2022/stacklayout.module.mjs +0 -37
- package/esm2022/stepper/events/activate-event.mjs +0 -33
- package/esm2022/stepper/list.component.mjs +0 -185
- package/esm2022/stepper/localization/custom-messages.component.mjs +0 -52
- package/esm2022/stepper/localization/localized-messages.directive.mjs +0 -41
- package/esm2022/stepper/localization/messages.mjs +0 -27
- package/esm2022/stepper/models/constants.mjs +0 -8
- package/esm2022/stepper/models/orientation.mjs +0 -5
- package/esm2022/stepper/models/step-predicate.mjs +0 -5
- package/esm2022/stepper/models/step-type.mjs +0 -5
- package/esm2022/stepper/models/stepper-step.interface.mjs +0 -5
- package/esm2022/stepper/step.component.mjs +0 -396
- package/esm2022/stepper/stepper.component.mjs +0 -423
- package/esm2022/stepper/stepper.service.mjs +0 -186
- package/esm2022/stepper/template-directives/indicator-template.directive.mjs +0 -37
- package/esm2022/stepper/template-directives/label-template.directive.mjs +0 -37
- package/esm2022/stepper/template-directives/step-template.directive.mjs +0 -39
- package/esm2022/stepper/template-directives.mjs +0 -7
- package/esm2022/stepper/types.mjs +0 -5
- package/esm2022/stepper.module.mjs +0 -41
- package/esm2022/tabstrip/constants.mjs +0 -29
- package/esm2022/tabstrip/directives/tab-content.directive.mjs +0 -39
- package/esm2022/tabstrip/directives/tab-title.directive.mjs +0 -37
- package/esm2022/tabstrip/directives/tab.directive.mjs +0 -24
- package/esm2022/tabstrip/events/select-event.mjs +0 -25
- package/esm2022/tabstrip/events/tabclose-event.mjs +0 -23
- package/esm2022/tabstrip/events/tabscroll-event.mjs +0 -23
- package/esm2022/tabstrip/events.mjs +0 -7
- package/esm2022/tabstrip/localization/custom-messages.component.mjs +0 -53
- package/esm2022/tabstrip/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/tabstrip/localization/messages.mjs +0 -39
- package/esm2022/tabstrip/models/button-state-change.mjs +0 -5
- package/esm2022/tabstrip/models/scroll-button-type.mjs +0 -5
- package/esm2022/tabstrip/models/scroll-buttons-visibility.mjs +0 -5
- package/esm2022/tabstrip/models/scrollable-settings.mjs +0 -23
- package/esm2022/tabstrip/models/size.mjs +0 -5
- package/esm2022/tabstrip/models/tab-alignment.mjs +0 -5
- package/esm2022/tabstrip/models/tab-position.mjs +0 -5
- package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +0 -130
- package/esm2022/tabstrip/rendering/tab.component.mjs +0 -182
- package/esm2022/tabstrip/scrollable-button.component.mjs +0 -182
- package/esm2022/tabstrip/tabstrip-scroll.service.mjs +0 -176
- package/esm2022/tabstrip/tabstrip.component.mjs +0 -954
- package/esm2022/tabstrip/tabstrip.service.mjs +0 -155
- package/esm2022/tabstrip/util.mjs +0 -120
- package/esm2022/tabstrip.module.mjs +0 -41
- package/esm2022/tilelayout/constants.mjs +0 -70
- package/esm2022/tilelayout/dragging-service.mjs +0 -421
- package/esm2022/tilelayout/keyboard-navigation.service.mjs +0 -189
- package/esm2022/tilelayout/models/dragging-config.interface.mjs +0 -5
- package/esm2022/tilelayout/models/flowmode.type.mjs +0 -5
- package/esm2022/tilelayout/models/gap.interface.mjs +0 -5
- package/esm2022/tilelayout/models/navigation.interface.mjs +0 -5
- package/esm2022/tilelayout/reorder-event.mjs +0 -43
- package/esm2022/tilelayout/resize-event.mjs +0 -37
- package/esm2022/tilelayout/tilelayout-item-body.component.mjs +0 -45
- package/esm2022/tilelayout/tilelayout-item-header.component.mjs +0 -43
- package/esm2022/tilelayout/tilelayout-item.component.mjs +0 -322
- package/esm2022/tilelayout/tilelayout-resize-handle.directive.mjs +0 -61
- package/esm2022/tilelayout/tilelayout.component.mjs +0 -388
- package/esm2022/tilelayout/util.mjs +0 -138
- package/esm2022/tilelayout.module.mjs +0 -40
- package/esm2022/timeline/events/navigation-direction.mjs +0 -5
- package/esm2022/timeline/localization/custom-messages.component.mjs +0 -43
- package/esm2022/timeline/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/timeline/localization/messages.mjs +0 -33
- package/esm2022/timeline/models/anchor-target.mjs +0 -5
- package/esm2022/timeline/models/default-model-fields.mjs +0 -16
- package/esm2022/timeline/models/events-order.mjs +0 -5
- package/esm2022/timeline/models/model-fields.mjs +0 -5
- package/esm2022/timeline/models/timeline-event.mjs +0 -5
- package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +0 -40
- package/esm2022/timeline/templates/timeline-card-body.directive.mjs +0 -40
- package/esm2022/timeline/templates/timeline-card-header.directive.mjs +0 -41
- package/esm2022/timeline/timeline-card.component.mjs +0 -451
- package/esm2022/timeline/timeline-horizontal.component.mjs +0 -781
- package/esm2022/timeline/timeline-vertical.component.mjs +0 -203
- package/esm2022/timeline/timeline.component.mjs +0 -491
- package/esm2022/timeline/timeline.service.mjs +0 -32
- package/esm2022/timeline/util.mjs +0 -26
- package/esm2022/timeline.module.mjs +0 -41
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { KENDO_LAYOUT } from './directives';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "./avatar/avatar.component";
|
|
9
|
-
import * as i2 from "./avatar/l10n/custom-messages.component";
|
|
10
|
-
import * as i3 from "./card/card.component";
|
|
11
|
-
import * as i4 from "./card/card-actions.component";
|
|
12
|
-
import * as i5 from "./card/card-body.component";
|
|
13
|
-
import * as i6 from "./card/card-footer.component";
|
|
14
|
-
import * as i7 from "./card/card-header.component";
|
|
15
|
-
import * as i8 from "./card/directives/card-media.directive";
|
|
16
|
-
import * as i9 from "./card/directives/card-separator.directive";
|
|
17
|
-
import * as i10 from "./card/directives/card-subtitle.directive";
|
|
18
|
-
import * as i11 from "./card/directives/card-title.directive";
|
|
19
|
-
import * as i12 from "./drawer/drawer.component";
|
|
20
|
-
import * as i13 from "./drawer/drawer-container.component";
|
|
21
|
-
import * as i14 from "./drawer/drawer-content.component";
|
|
22
|
-
import * as i15 from "./drawer/template-directives/drawer-template.directive";
|
|
23
|
-
import * as i16 from "./drawer/template-directives/footer-template.directive";
|
|
24
|
-
import * as i17 from "./drawer/template-directives/header-template.directive";
|
|
25
|
-
import * as i18 from "./drawer/template-directives/item-template.directive";
|
|
26
|
-
import * as i19 from "./expansionpanel/expansionpanel.component";
|
|
27
|
-
import * as i20 from "./expansionpanel/expansionpanel-title.directive";
|
|
28
|
-
import * as i21 from "./layouts/grid-layout.component";
|
|
29
|
-
import * as i22 from "./layouts/gridlayout-item.component";
|
|
30
|
-
import * as i23 from "./panelbar/panelbar.component";
|
|
31
|
-
import * as i24 from "./panelbar/panelbar-item.component";
|
|
32
|
-
import * as i25 from "./panelbar/panelbar-content.directive";
|
|
33
|
-
import * as i26 from "./panelbar/panelbar-item-template.directive";
|
|
34
|
-
import * as i27 from "./panelbar/panelbar-item-title.directive";
|
|
35
|
-
import * as i28 from "./splitter/splitter.component";
|
|
36
|
-
import * as i29 from "./splitter/splitter-pane.component";
|
|
37
|
-
import * as i30 from "./layouts/stack-layout.component";
|
|
38
|
-
import * as i31 from "./stepper/stepper.component";
|
|
39
|
-
import * as i32 from "./stepper/localization/custom-messages.component";
|
|
40
|
-
import * as i33 from "./stepper/template-directives/indicator-template.directive";
|
|
41
|
-
import * as i34 from "./stepper/template-directives/label-template.directive";
|
|
42
|
-
import * as i35 from "./stepper/template-directives/step-template.directive";
|
|
43
|
-
import * as i36 from "./tabstrip/tabstrip.component";
|
|
44
|
-
import * as i37 from "./tabstrip/models/tabstrip-tab.component";
|
|
45
|
-
import * as i38 from "./tabstrip/directives/tab-content.directive";
|
|
46
|
-
import * as i39 from "./tabstrip/directives/tab-title.directive";
|
|
47
|
-
import * as i40 from "./tabstrip/localization/custom-messages.component";
|
|
48
|
-
import * as i41 from "./tilelayout/tilelayout.component";
|
|
49
|
-
import * as i42 from "./tilelayout/tilelayout-item-body.component";
|
|
50
|
-
import * as i43 from "./tilelayout/tilelayout-item.component";
|
|
51
|
-
import * as i44 from "./tilelayout/tilelayout-item-header.component";
|
|
52
|
-
import * as i45 from "./timeline/timeline.component";
|
|
53
|
-
import * as i46 from "./timeline/localization/custom-messages.component";
|
|
54
|
-
import * as i47 from "./timeline/templates/timeline-card-actions.directive";
|
|
55
|
-
import * as i48 from "./timeline/templates/timeline-card-body.directive";
|
|
56
|
-
import * as i49 from "./timeline/templates/timeline-card-header.directive";
|
|
57
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
58
|
-
/**
|
|
59
|
-
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Layout components.
|
|
60
|
-
*
|
|
61
|
-
* Use this module to add all Layout package components to your NgModule-based Angular application.
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```typescript
|
|
65
|
-
* import { LayoutModule } from '@progress/kendo-angular-layout';
|
|
66
|
-
* import { NgModule } from '@angular/core';
|
|
67
|
-
* import { BrowserModule } from '@angular/platform-browser';
|
|
68
|
-
* import { AppComponent } from './app.component';
|
|
69
|
-
*
|
|
70
|
-
* @NgModule({
|
|
71
|
-
* declarations: [AppComponent],
|
|
72
|
-
* imports: [BrowserModule, LayoutModule],
|
|
73
|
-
* bootstrap: [AppComponent]
|
|
74
|
-
* })
|
|
75
|
-
* export class AppModule { }
|
|
76
|
-
* ```
|
|
77
|
-
*/
|
|
78
|
-
export class LayoutModule {
|
|
79
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
80
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", 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] });
|
|
81
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", 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] });
|
|
82
|
-
}
|
|
83
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutModule, decorators: [{
|
|
84
|
-
type: NgModule,
|
|
85
|
-
args: [{
|
|
86
|
-
exports: [...KENDO_LAYOUT],
|
|
87
|
-
imports: [...KENDO_LAYOUT]
|
|
88
|
-
}]
|
|
89
|
-
}] });
|
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, Input, Renderer2, ElementRef, isDevMode } from '@angular/core';
|
|
6
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
7
|
-
import { packageMetadata } from '../package-metadata';
|
|
8
|
-
import { ALIGN_PREFIX, generateGapStyle, generateGridStyle, GRID_JUSTIFY_PREFIX, normalizeGap, VERTICAL_SUFFIX, validateGridLayoutRowsCols } from './util';
|
|
9
|
-
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
10
|
-
import { isPresent } from '../common/util';
|
|
11
|
-
import { isChanged } from '@progress/kendo-angular-common';
|
|
12
|
-
import * as i0 from "@angular/core";
|
|
13
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
14
|
-
/**
|
|
15
|
-
* Represents the Kendo UI GridLayout component for Angular.
|
|
16
|
-
* Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview]({% slug overview_gridlayout %})).
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```html
|
|
20
|
-
* <kendo-gridlayout [rows]="[100, 200]" [cols]="['1fr', '2fr']" [gap]="10">
|
|
21
|
-
* <kendo-gridlayout-item [row]="1" [col]="1">
|
|
22
|
-
* <p>Item 1</p>
|
|
23
|
-
* </kendo-gridlayout-item>
|
|
24
|
-
* <kendo-gridlayout-item [row]="1" [col]="2">
|
|
25
|
-
* <p>Item 2</p>
|
|
26
|
-
* </kendo-gridlayout-item>
|
|
27
|
-
* </kendo-gridlayout>
|
|
28
|
-
* ```
|
|
29
|
-
*
|
|
30
|
-
* @remarks
|
|
31
|
-
* Supported children components are: {@link GridLayoutItemComponent}.
|
|
32
|
-
*/
|
|
33
|
-
export class GridLayoutComponent {
|
|
34
|
-
renderer;
|
|
35
|
-
element;
|
|
36
|
-
localization;
|
|
37
|
-
hostClass = true;
|
|
38
|
-
get dir() {
|
|
39
|
-
return this.direction;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Specifies the number of rows and their height
|
|
43
|
-
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
|
|
44
|
-
*
|
|
45
|
-
* You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row.
|
|
46
|
-
* For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
|
|
47
|
-
*/
|
|
48
|
-
rows;
|
|
49
|
-
/**
|
|
50
|
-
* Specifies the number of columns and their widths
|
|
51
|
-
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
|
|
52
|
-
*
|
|
53
|
-
* You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column.
|
|
54
|
-
* For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
|
|
55
|
-
*/
|
|
56
|
-
cols;
|
|
57
|
-
/**
|
|
58
|
-
* Specifies the gaps between the elements ([see example](slug:layout_gridlayout#toc-gap)).
|
|
59
|
-
*
|
|
60
|
-
* @default 0
|
|
61
|
-
*/
|
|
62
|
-
gap = 0;
|
|
63
|
-
/**
|
|
64
|
-
* Specifies the horizontal and vertical alignment of the inner GridLayout elements
|
|
65
|
-
* ([see example]({% slug layout_gridlayout %}#toc-alignment)).
|
|
66
|
-
*/
|
|
67
|
-
set align(align) {
|
|
68
|
-
this._align = Object.assign({}, this._align, align);
|
|
69
|
-
this.handleAlignClasses();
|
|
70
|
-
}
|
|
71
|
-
get align() {
|
|
72
|
-
return this._align;
|
|
73
|
-
}
|
|
74
|
-
_align = {
|
|
75
|
-
horizontal: 'stretch',
|
|
76
|
-
vertical: 'stretch'
|
|
77
|
-
};
|
|
78
|
-
justifyClass;
|
|
79
|
-
alignClass;
|
|
80
|
-
constructor(renderer, element, localization) {
|
|
81
|
-
this.renderer = renderer;
|
|
82
|
-
this.element = element;
|
|
83
|
-
this.localization = localization;
|
|
84
|
-
validatePackage(packageMetadata);
|
|
85
|
-
}
|
|
86
|
-
ngAfterViewInit() {
|
|
87
|
-
this.handleAlignClasses();
|
|
88
|
-
this.handleGridTemplateStyling('rows');
|
|
89
|
-
this.handleGridTemplateStyling('cols');
|
|
90
|
-
this.setGap();
|
|
91
|
-
}
|
|
92
|
-
ngOnChanges(changes) {
|
|
93
|
-
if (isChanged('gap', changes)) {
|
|
94
|
-
this.setGap();
|
|
95
|
-
}
|
|
96
|
-
if (isChanged('rows', changes)) {
|
|
97
|
-
this.handleGridTemplateStyling('rows');
|
|
98
|
-
}
|
|
99
|
-
if (isChanged('cols', changes)) {
|
|
100
|
-
this.handleGridTemplateStyling('cols');
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
handleAlignClasses() {
|
|
104
|
-
const elem = this.element.nativeElement;
|
|
105
|
-
if (isPresent(this.justifyClass)) {
|
|
106
|
-
this.renderer.removeClass(elem, this.justifyClass);
|
|
107
|
-
}
|
|
108
|
-
if (isPresent(this.alignClass)) {
|
|
109
|
-
this.renderer.removeClass(elem, this.alignClass);
|
|
110
|
-
}
|
|
111
|
-
this.justifyClass = `${GRID_JUSTIFY_PREFIX}-${this.align.horizontal}`;
|
|
112
|
-
this.alignClass = `${ALIGN_PREFIX}-${VERTICAL_SUFFIX[this.align.vertical]}`;
|
|
113
|
-
this.renderer.addClass(elem, this.justifyClass);
|
|
114
|
-
this.renderer.addClass(elem, this.alignClass);
|
|
115
|
-
}
|
|
116
|
-
setGap() {
|
|
117
|
-
const parsedGap = normalizeGap(this.gap);
|
|
118
|
-
const gapStyle = generateGapStyle(parsedGap);
|
|
119
|
-
this.renderer.setStyle(this.element.nativeElement, 'gap', gapStyle);
|
|
120
|
-
}
|
|
121
|
-
handleGridTemplateStyling(type) {
|
|
122
|
-
if (!isPresent(this[type])) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
const isValid = validateGridLayoutRowsCols(this[type]);
|
|
126
|
-
if (!isValid && isDevMode()) {
|
|
127
|
-
const valueType = type === 'rows' ? 'GridLayoutRowSize' : 'GridLayoutColSize';
|
|
128
|
-
throw new Error(`The provided ${type} value contains invalid elements. The array supports values of type number, string or ${valueType}.`);
|
|
129
|
-
}
|
|
130
|
-
const gridTemplateStyle = type === 'rows' ? 'grid-template-rows' : 'grid-template-columns';
|
|
131
|
-
const gridStyle = generateGridStyle(this[type], type);
|
|
132
|
-
this.renderer.setStyle(this.element.nativeElement, gridTemplateStyle, gridStyle.join(' '));
|
|
133
|
-
}
|
|
134
|
-
get direction() {
|
|
135
|
-
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
136
|
-
}
|
|
137
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
138
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: [
|
|
139
|
-
LocalizationService,
|
|
140
|
-
{
|
|
141
|
-
provide: L10N_PREFIX,
|
|
142
|
-
useValue: 'kendo.gridlayout'
|
|
143
|
-
}
|
|
144
|
-
], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
|
|
145
|
-
<ng-content></ng-content>
|
|
146
|
-
`, isInline: true });
|
|
147
|
-
}
|
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutComponent, decorators: [{
|
|
149
|
-
type: Component,
|
|
150
|
-
args: [{
|
|
151
|
-
exportAs: 'kendoGridLayout',
|
|
152
|
-
selector: 'kendo-gridlayout',
|
|
153
|
-
providers: [
|
|
154
|
-
LocalizationService,
|
|
155
|
-
{
|
|
156
|
-
provide: L10N_PREFIX,
|
|
157
|
-
useValue: 'kendo.gridlayout'
|
|
158
|
-
}
|
|
159
|
-
],
|
|
160
|
-
template: `
|
|
161
|
-
<ng-content></ng-content>
|
|
162
|
-
`,
|
|
163
|
-
standalone: true
|
|
164
|
-
}]
|
|
165
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
|
|
166
|
-
type: HostBinding,
|
|
167
|
-
args: ['class.k-grid-layout']
|
|
168
|
-
}], dir: [{
|
|
169
|
-
type: HostBinding,
|
|
170
|
-
args: ['attr.dir']
|
|
171
|
-
}], rows: [{
|
|
172
|
-
type: Input
|
|
173
|
-
}], cols: [{
|
|
174
|
-
type: Input
|
|
175
|
-
}], gap: [{
|
|
176
|
-
type: Input
|
|
177
|
-
}], align: [{
|
|
178
|
-
type: Input
|
|
179
|
-
}] } });
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, Input, Renderer2, ElementRef } from '@angular/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* Represents the GridLayout item component. Defines the positioning and spanning of individual items within a GridLayout.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```html
|
|
12
|
-
* <kendo-gridlayout-item [row]="1" [col]="2" [rowSpan]="2" [colSpan]="1">
|
|
13
|
-
* <div>Grid item content</div>
|
|
14
|
-
* </kendo-gridlayout-item>
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
export class GridLayoutItemComponent {
|
|
18
|
-
renderer;
|
|
19
|
-
element;
|
|
20
|
-
/**
|
|
21
|
-
* Sets the row of the item in the GridLayout
|
|
22
|
-
* ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
23
|
-
*/
|
|
24
|
-
row;
|
|
25
|
-
/**
|
|
26
|
-
* Sets the column of the item in the GridLayout
|
|
27
|
-
* ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
28
|
-
*/
|
|
29
|
-
col;
|
|
30
|
-
/**
|
|
31
|
-
* Specifies how many rows the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
32
|
-
*
|
|
33
|
-
* @default 1
|
|
34
|
-
*/
|
|
35
|
-
rowSpan;
|
|
36
|
-
/**
|
|
37
|
-
* Specifies how many columns the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
|
38
|
-
*
|
|
39
|
-
* @default 1
|
|
40
|
-
*/
|
|
41
|
-
colSpan;
|
|
42
|
-
constructor(renderer, element) {
|
|
43
|
-
this.renderer = renderer;
|
|
44
|
-
this.element = element;
|
|
45
|
-
}
|
|
46
|
-
ngOnInit() {
|
|
47
|
-
this.setItemStyle();
|
|
48
|
-
}
|
|
49
|
-
ngOnChanges() {
|
|
50
|
-
this.setItemStyle();
|
|
51
|
-
}
|
|
52
|
-
setItemStyle() {
|
|
53
|
-
const row = this.row || 'auto';
|
|
54
|
-
const col = this.col || 'auto';
|
|
55
|
-
const rowSpan = this.rowSpan ? `span ${this.rowSpan}` : 'auto';
|
|
56
|
-
const colSpan = this.colSpan ? `span ${this.colSpan}` : 'auto';
|
|
57
|
-
const gridAreaStyle = `${row} / ${col} / ${rowSpan} / ${colSpan}`;
|
|
58
|
-
this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
|
|
59
|
-
}
|
|
60
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GridLayoutItemComponent, isStandalone: true, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
|
|
62
|
-
<ng-content></ng-content>
|
|
63
|
-
`, isInline: true });
|
|
64
|
-
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
|
|
66
|
-
type: Component,
|
|
67
|
-
args: [{
|
|
68
|
-
selector: 'kendo-gridlayout-item',
|
|
69
|
-
template: `
|
|
70
|
-
<ng-content></ng-content>
|
|
71
|
-
`,
|
|
72
|
-
standalone: true
|
|
73
|
-
}]
|
|
74
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { row: [{
|
|
75
|
-
type: Input
|
|
76
|
-
}], col: [{
|
|
77
|
-
type: Input
|
|
78
|
-
}], rowSpan: [{
|
|
79
|
-
type: Input
|
|
80
|
-
}], colSpan: [{
|
|
81
|
-
type: Input
|
|
82
|
-
}] } });
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export * from './models/layout-align-settings';
|
|
6
|
-
export * from './models/layout-horizontal-align';
|
|
7
|
-
export * from './models/layout-vertical-align';
|
|
8
|
-
export * from './models/gridlayout-gap-settings';
|
|
9
|
-
export * from './models/gridlayout-row-col-size';
|
|
10
|
-
export * from '../common/orientation';
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, Input, Renderer2, ElementRef } from '@angular/core';
|
|
6
|
-
import { VERTICAL_SUFFIX, ALIGN_PREFIX, JUSTIFY_PREFIX } from './util';
|
|
7
|
-
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { isNumber, isPresent } from '../common/util';
|
|
9
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
|
-
import { packageMetadata } from '../package-metadata';
|
|
11
|
-
import { isChanged } from '@progress/kendo-angular-common';
|
|
12
|
-
import * as i0 from "@angular/core";
|
|
13
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
14
|
-
/**
|
|
15
|
-
* Represents the Kendo UI StackLayout component for Angular.
|
|
16
|
-
* Arranges child components in a single row or column with customizable alignment and spacing ([see overview]({% slug overview_stacklayout %})).
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```html
|
|
20
|
-
* <kendo-stacklayout orientation="horizontal" [gap]="16">
|
|
21
|
-
* <button class="k-button">Button 1</button>
|
|
22
|
-
* <button class="k-button">Button 2</button>
|
|
23
|
-
* <button class="k-button">Button 3</button>
|
|
24
|
-
* </kendo-stacklayout>
|
|
25
|
-
* ```
|
|
26
|
-
*/
|
|
27
|
-
export class StackLayoutComponent {
|
|
28
|
-
renderer;
|
|
29
|
-
element;
|
|
30
|
-
localization;
|
|
31
|
-
hostClass = true;
|
|
32
|
-
get horizontalClass() {
|
|
33
|
-
return this.orientation === 'horizontal';
|
|
34
|
-
}
|
|
35
|
-
get verticalClass() {
|
|
36
|
-
return this.orientation === 'vertical';
|
|
37
|
-
}
|
|
38
|
-
get dir() {
|
|
39
|
-
return this.direction;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Specifies the horizontal and vertical alignment of the inner StackLayout elements
|
|
43
|
-
* ([see example]({% slug layout_stacklayout %}#toc-alignment)).
|
|
44
|
-
*/
|
|
45
|
-
set align(align) {
|
|
46
|
-
this._align = Object.assign({}, this._align, align);
|
|
47
|
-
this.handleAlignClasses();
|
|
48
|
-
}
|
|
49
|
-
get align() {
|
|
50
|
-
return this._align;
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* Specifies the gap between the inner StackLayout elements ([see example](slug:layout_stacklayout#toc-gap)).
|
|
54
|
-
*
|
|
55
|
-
* @default 0
|
|
56
|
-
*/
|
|
57
|
-
gap = 0;
|
|
58
|
-
/**
|
|
59
|
-
* Specifies the orientation of the StackLayout
|
|
60
|
-
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
|
|
61
|
-
*
|
|
62
|
-
* @default 'horizontal'
|
|
63
|
-
*/
|
|
64
|
-
orientation = 'horizontal';
|
|
65
|
-
_align = {
|
|
66
|
-
horizontal: 'stretch',
|
|
67
|
-
vertical: 'stretch'
|
|
68
|
-
};
|
|
69
|
-
justifyClass;
|
|
70
|
-
alignClass;
|
|
71
|
-
constructor(renderer, element, localization) {
|
|
72
|
-
this.renderer = renderer;
|
|
73
|
-
this.element = element;
|
|
74
|
-
this.localization = localization;
|
|
75
|
-
validatePackage(packageMetadata);
|
|
76
|
-
}
|
|
77
|
-
ngAfterViewInit() {
|
|
78
|
-
this.handleAlignClasses();
|
|
79
|
-
this.setGap();
|
|
80
|
-
}
|
|
81
|
-
ngOnChanges(changes) {
|
|
82
|
-
if (isChanged('gap', changes)) {
|
|
83
|
-
this.setGap();
|
|
84
|
-
}
|
|
85
|
-
if (isChanged('orientation', changes)) {
|
|
86
|
-
this.handleAlignClasses();
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
handleAlignClasses() {
|
|
90
|
-
const elem = this.element.nativeElement;
|
|
91
|
-
if (isPresent(this.justifyClass)) {
|
|
92
|
-
this.renderer.removeClass(elem, this.justifyClass);
|
|
93
|
-
}
|
|
94
|
-
if (isPresent(this.alignClass)) {
|
|
95
|
-
this.renderer.removeClass(elem, this.alignClass);
|
|
96
|
-
}
|
|
97
|
-
if (this.orientation === 'horizontal') {
|
|
98
|
-
this.justifyClass = `${JUSTIFY_PREFIX}-${this.align.horizontal}`;
|
|
99
|
-
this.alignClass = `${ALIGN_PREFIX}-${VERTICAL_SUFFIX[this.align.vertical]}`;
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
this.justifyClass = `${JUSTIFY_PREFIX}-${VERTICAL_SUFFIX[this.align.vertical]}`;
|
|
103
|
-
this.alignClass = `${ALIGN_PREFIX}-${this.align.horizontal}`;
|
|
104
|
-
}
|
|
105
|
-
this.renderer.addClass(elem, this.justifyClass);
|
|
106
|
-
this.renderer.addClass(elem, this.alignClass);
|
|
107
|
-
}
|
|
108
|
-
setGap() {
|
|
109
|
-
const parsedGap = isNumber(this.gap) ? `${this.gap}px` : this.gap;
|
|
110
|
-
this.renderer.setStyle(this.element.nativeElement, 'gap', parsedGap);
|
|
111
|
-
}
|
|
112
|
-
get direction() {
|
|
113
|
-
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
114
|
-
}
|
|
115
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: [
|
|
117
|
-
LocalizationService,
|
|
118
|
-
{
|
|
119
|
-
provide: L10N_PREFIX,
|
|
120
|
-
useValue: 'kendo.stacklayout'
|
|
121
|
-
}
|
|
122
|
-
], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
|
|
123
|
-
<ng-content></ng-content>
|
|
124
|
-
`, isInline: true });
|
|
125
|
-
}
|
|
126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackLayoutComponent, decorators: [{
|
|
127
|
-
type: Component,
|
|
128
|
-
args: [{
|
|
129
|
-
exportAs: 'kendoStackLayout',
|
|
130
|
-
selector: 'kendo-stacklayout',
|
|
131
|
-
providers: [
|
|
132
|
-
LocalizationService,
|
|
133
|
-
{
|
|
134
|
-
provide: L10N_PREFIX,
|
|
135
|
-
useValue: 'kendo.stacklayout'
|
|
136
|
-
}
|
|
137
|
-
],
|
|
138
|
-
template: `
|
|
139
|
-
<ng-content></ng-content>
|
|
140
|
-
`,
|
|
141
|
-
standalone: true
|
|
142
|
-
}]
|
|
143
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
|
|
144
|
-
type: HostBinding,
|
|
145
|
-
args: ['class.k-stack-layout']
|
|
146
|
-
}], horizontalClass: [{
|
|
147
|
-
type: HostBinding,
|
|
148
|
-
args: ['class.k-hstack']
|
|
149
|
-
}], verticalClass: [{
|
|
150
|
-
type: HostBinding,
|
|
151
|
-
args: ['class.k-vstack']
|
|
152
|
-
}], dir: [{
|
|
153
|
-
type: HostBinding,
|
|
154
|
-
args: ['attr.dir']
|
|
155
|
-
}], align: [{
|
|
156
|
-
type: Input
|
|
157
|
-
}], gap: [{
|
|
158
|
-
type: Input
|
|
159
|
-
}], orientation: [{
|
|
160
|
-
type: Input
|
|
161
|
-
}] } });
|
package/esm2022/layouts/util.mjs
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export const VERTICAL_SUFFIX = {
|
|
9
|
-
top: 'start',
|
|
10
|
-
middle: 'center',
|
|
11
|
-
bottom: 'end',
|
|
12
|
-
stretch: 'stretch'
|
|
13
|
-
};
|
|
14
|
-
/**
|
|
15
|
-
* @hidden
|
|
16
|
-
*/
|
|
17
|
-
export const JUSTIFY_PREFIX = `k-justify-content`;
|
|
18
|
-
/**
|
|
19
|
-
* @hidden
|
|
20
|
-
*/
|
|
21
|
-
export const GRID_JUSTIFY_PREFIX = `k-justify-items`;
|
|
22
|
-
/**
|
|
23
|
-
* @hidden
|
|
24
|
-
*/
|
|
25
|
-
export const ALIGN_PREFIX = `k-align-items`;
|
|
26
|
-
/**
|
|
27
|
-
* @hidden
|
|
28
|
-
*/
|
|
29
|
-
export const normalizeGap = (gap) => {
|
|
30
|
-
if (typeof gap === 'number' || typeof gap === 'string') {
|
|
31
|
-
return { cols: gap, rows: gap };
|
|
32
|
-
}
|
|
33
|
-
else {
|
|
34
|
-
const parsedGap = {};
|
|
35
|
-
parsedGap.rows = gap.rows ? gap.rows : 0;
|
|
36
|
-
parsedGap.cols = gap.cols ? gap.cols : 0;
|
|
37
|
-
return parsedGap;
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
export const generateGapStyle = (gap) => {
|
|
44
|
-
if (gap.rows === gap.cols) {
|
|
45
|
-
return typeof gap.rows === 'number' ? `${gap.rows}px` : gap.rows;
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
const rowStyle = `${typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows}`;
|
|
49
|
-
const colStyle = `${typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols}`;
|
|
50
|
-
return `${rowStyle} ${colStyle}`;
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
/**
|
|
54
|
-
* @hidden
|
|
55
|
-
*/
|
|
56
|
-
export const generateGridStyle = (items, itemType) => {
|
|
57
|
-
const styling = [];
|
|
58
|
-
items.forEach((item) => {
|
|
59
|
-
if (typeof item === 'number') {
|
|
60
|
-
styling.push(`${item}px`);
|
|
61
|
-
}
|
|
62
|
-
else if (typeof item === 'string') {
|
|
63
|
-
styling.push(item);
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
if (itemType === 'rows') {
|
|
67
|
-
const rowHeight = item.height;
|
|
68
|
-
if (rowHeight) {
|
|
69
|
-
styling.push(typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight);
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
styling.push('0px');
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
const colWidth = item.width;
|
|
77
|
-
if (colWidth) {
|
|
78
|
-
styling.push(typeof colWidth === 'number' ? `${colWidth}px` : colWidth);
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
styling.push('0px');
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
return styling;
|
|
87
|
-
};
|
|
88
|
-
/**
|
|
89
|
-
* @hidden
|
|
90
|
-
*/
|
|
91
|
-
export const validateGridLayoutRowsCols = (arr) => {
|
|
92
|
-
for (const el of arr) {
|
|
93
|
-
const isNum = typeof el === 'number';
|
|
94
|
-
const isStr = typeof el === 'string';
|
|
95
|
-
const isObject = typeof el === 'object' && el !== null;
|
|
96
|
-
if (!isNum && !isStr && !isObject) {
|
|
97
|
-
return false;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
return true;
|
|
101
|
-
};
|