@progress/kendo-angular-layout 19.1.2-develop.4 → 19.1.2-develop.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/avatar/avatar.component.d.ts +43 -47
- package/avatar/l10n/custom-messages.component.d.ts +9 -1
- package/avatar/l10n/messages.d.ts +1 -1
- package/avatar/models/fill.d.ts +1 -1
- package/avatar/models/rounded.d.ts +1 -1
- package/avatar/models/size.d.ts +1 -1
- package/avatar/models/theme-color.d.ts +1 -1
- package/avatar.module.d.ts +14 -2
- package/card/card-actions.component.d.ts +16 -15
- package/card/card-body.component.d.ts +9 -1
- package/card/card-footer.component.d.ts +9 -1
- package/card/card-header.component.d.ts +10 -1
- package/card/card.component.d.ts +19 -6
- package/card/directives/card-media.directive.d.ts +10 -1
- package/card/directives/card-separator.directive.d.ts +10 -4
- package/card/directives/card-subtitle.directive.d.ts +8 -1
- package/card/directives/card-title.directive.d.ts +8 -1
- package/card/models/actions-layout.d.ts +1 -8
- package/card/models/card-action.d.ts +4 -4
- package/card.module.d.ts +14 -2
- package/codemods/utils.js +0 -3
- package/common/orientation.d.ts +1 -1
- package/common/preventable-event.d.ts +3 -6
- package/directives.d.ts +13 -13
- package/drawer/drawer-container.component.d.ts +13 -1
- package/drawer/drawer-content.component.d.ts +9 -1
- package/drawer/drawer.component.d.ts +48 -47
- package/drawer/events/select-event.d.ts +5 -5
- package/drawer/models/drawer-animation.interface.d.ts +1 -2
- package/drawer/models/drawer-item-expand.interface.d.ts +1 -1
- package/drawer/models/drawer-item.interface.d.ts +15 -17
- package/drawer/models/mode.d.ts +4 -3
- package/drawer/models/position.d.ts +1 -6
- package/drawer/template-directives/drawer-template.directive.d.ts +18 -5
- package/drawer/template-directives/footer-template.directive.d.ts +11 -3
- package/drawer/template-directives/header-template.directive.d.ts +11 -3
- package/drawer/template-directives/item-template.directive.d.ts +19 -3
- package/drawer.module.d.ts +14 -2
- package/esm2022/avatar/avatar.component.mjs +43 -47
- package/esm2022/avatar/l10n/custom-messages.component.mjs +9 -1
- package/esm2022/avatar/l10n/messages.mjs +1 -1
- package/esm2022/avatar.module.mjs +14 -2
- package/esm2022/card/card-actions.component.mjs +16 -15
- package/esm2022/card/card-body.component.mjs +9 -1
- package/esm2022/card/card-footer.component.mjs +9 -1
- package/esm2022/card/card-header.component.mjs +10 -1
- package/esm2022/card/card.component.mjs +19 -6
- package/esm2022/card/directives/card-media.directive.mjs +10 -1
- package/esm2022/card/directives/card-separator.directive.mjs +10 -4
- package/esm2022/card/directives/card-subtitle.directive.mjs +8 -1
- package/esm2022/card/directives/card-title.directive.mjs +8 -1
- package/esm2022/card/models/card-action.mjs +4 -4
- package/esm2022/card.module.mjs +14 -2
- package/esm2022/common/preventable-event.mjs +3 -6
- package/esm2022/directives.mjs +13 -13
- package/esm2022/drawer/drawer-container.component.mjs +13 -1
- package/esm2022/drawer/drawer-content.component.mjs +9 -1
- package/esm2022/drawer/drawer.component.mjs +48 -47
- package/esm2022/drawer/events/select-event.mjs +5 -5
- package/esm2022/drawer/template-directives/drawer-template.directive.mjs +18 -5
- package/esm2022/drawer/template-directives/footer-template.directive.mjs +11 -3
- package/esm2022/drawer/template-directives/header-template.directive.mjs +11 -3
- package/esm2022/drawer/template-directives/item-template.directive.mjs +19 -3
- package/esm2022/drawer.module.mjs +14 -2
- package/esm2022/expansionpanel/events/action-event.mjs +2 -2
- package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +12 -3
- package/esm2022/expansionpanel/expansionpanel.component.mjs +20 -27
- package/esm2022/expansionpanel.module.mjs +14 -2
- package/esm2022/gridlayout.module.mjs +14 -2
- package/esm2022/layout.module.mjs +10 -21
- package/esm2022/layouts/grid-layout.component.mjs +24 -17
- package/esm2022/layouts/gridlayout-item.component.mjs +16 -4
- package/esm2022/layouts/stack-layout.component.mjs +15 -6
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/panelbar/events/collapse-event.mjs +2 -2
- package/esm2022/panelbar/events/expand-event.mjs +2 -2
- package/esm2022/panelbar/events/item-click-event.mjs +3 -3
- package/esm2022/panelbar/events/select-event.mjs +2 -2
- package/esm2022/panelbar/events/state-change-event.mjs +2 -2
- package/esm2022/panelbar/panelbar-content.directive.mjs +12 -1
- package/esm2022/panelbar/panelbar-expand-mode.mjs +3 -4
- package/esm2022/panelbar/panelbar-item-template.directive.mjs +12 -1
- package/esm2022/panelbar/panelbar-item-title.directive.mjs +12 -19
- package/esm2022/panelbar/panelbar-item.component.mjs +26 -11
- package/esm2022/panelbar/panelbar.component.mjs +40 -17
- package/esm2022/panelbar.module.mjs +13 -8
- package/esm2022/splitter/splitter-pane.component.mjs +40 -20
- package/esm2022/splitter/splitter.component.mjs +25 -41
- package/esm2022/splitter.module.mjs +13 -5
- package/esm2022/stacklayout.module.mjs +14 -2
- package/esm2022/stepper/events/activate-event.mjs +5 -5
- package/esm2022/stepper/localization/custom-messages.component.mjs +9 -1
- package/esm2022/stepper/localization/messages.mjs +1 -1
- package/esm2022/stepper/stepper.component.mjs +32 -39
- package/esm2022/stepper/stepper.service.mjs +4 -4
- package/esm2022/stepper/template-directives/indicator-template.directive.mjs +10 -1
- package/esm2022/stepper/template-directives/label-template.directive.mjs +10 -1
- package/esm2022/stepper/template-directives/step-template.directive.mjs +12 -1
- package/esm2022/stepper.module.mjs +14 -2
- package/esm2022/tabstrip/directives/tab-content.directive.mjs +12 -24
- package/esm2022/tabstrip/directives/tab-title.directive.mjs +10 -29
- package/esm2022/tabstrip/events/select-event.mjs +3 -1
- package/esm2022/tabstrip/events/tabclose-event.mjs +2 -1
- package/esm2022/tabstrip/events/tabscroll-event.mjs +2 -2
- package/esm2022/tabstrip/localization/custom-messages.component.mjs +11 -2
- package/esm2022/tabstrip/localization/messages.mjs +3 -3
- package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +30 -17
- package/esm2022/tabstrip/tabstrip.component.mjs +49 -37
- package/esm2022/tabstrip.module.mjs +13 -7
- package/esm2022/tilelayout/reorder-event.mjs +3 -2
- package/esm2022/tilelayout/resize-event.mjs +3 -2
- package/esm2022/tilelayout/tilelayout-item-body.component.mjs +10 -1
- package/esm2022/tilelayout/tilelayout-item-header.component.mjs +12 -2
- package/esm2022/tilelayout/tilelayout-item.component.mjs +20 -10
- package/esm2022/tilelayout/tilelayout.component.mjs +31 -26
- package/esm2022/tilelayout.module.mjs +13 -7
- package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +11 -2
- package/esm2022/timeline/templates/timeline-card-body.directive.mjs +11 -2
- package/esm2022/timeline/templates/timeline-card-header.directive.mjs +12 -2
- package/esm2022/timeline/timeline.component.mjs +3 -0
- package/esm2022/timeline.module.mjs +13 -4
- package/expansionpanel/events/action-event.d.ts +3 -3
- package/expansionpanel/expansionpanel-title.directive.d.ts +12 -3
- package/expansionpanel/expansionpanel.component.d.ts +20 -27
- package/expansionpanel.module.d.ts +14 -2
- package/fesm2022/progress-kendo-angular-layout.mjs +1072 -641
- package/gridlayout.module.d.ts +14 -2
- package/layout.module.d.ts +10 -21
- package/layouts/grid-layout.component.d.ts +24 -17
- package/layouts/gridlayout-item.component.d.ts +16 -4
- package/layouts/models/gridlayout-gap-settings.d.ts +3 -3
- package/layouts/models/gridlayout-row-col-size.d.ts +4 -4
- package/layouts/models/layout-align-settings.d.ts +3 -3
- package/layouts/models/layout-horizontal-align.d.ts +1 -1
- package/layouts/models/layout-vertical-align.d.ts +1 -1
- package/layouts/stack-layout.component.d.ts +15 -6
- package/package.json +9 -9
- package/panelbar/events/collapse-event.d.ts +2 -2
- package/panelbar/events/expand-event.d.ts +2 -2
- package/panelbar/events/item-click-event.d.ts +3 -3
- package/panelbar/events/select-event.d.ts +2 -2
- package/panelbar/events/state-change-event.d.ts +2 -2
- package/panelbar/panelbar-content.directive.d.ts +12 -1
- package/panelbar/panelbar-expand-mode.d.ts +3 -4
- package/panelbar/panelbar-item-model.d.ts +6 -6
- package/panelbar/panelbar-item-template.directive.d.ts +12 -1
- package/panelbar/panelbar-item-title.directive.d.ts +12 -19
- package/panelbar/panelbar-item.component.d.ts +24 -9
- package/panelbar/panelbar.component.d.ts +40 -17
- package/panelbar.module.d.ts +13 -8
- package/splitter/splitter-pane.component.d.ts +40 -20
- package/splitter/splitter.component.d.ts +24 -40
- package/splitter.module.d.ts +13 -5
- package/stacklayout.module.d.ts +14 -2
- package/stepper/events/activate-event.d.ts +5 -5
- package/stepper/localization/custom-messages.component.d.ts +9 -1
- package/stepper/localization/messages.d.ts +1 -1
- package/stepper/models/orientation.d.ts +1 -3
- package/stepper/models/step-predicate.d.ts +5 -6
- package/stepper/models/step-type.d.ts +1 -4
- package/stepper/models/stepper-step.interface.d.ts +12 -12
- package/stepper/stepper.component.d.ts +32 -39
- package/stepper/template-directives/indicator-template.directive.d.ts +10 -1
- package/stepper/template-directives/label-template.directive.d.ts +10 -1
- package/stepper/template-directives/step-template.directive.d.ts +12 -1
- package/stepper.module.d.ts +14 -2
- package/tabstrip/directives/tab-content.directive.d.ts +12 -24
- package/tabstrip/directives/tab-title.directive.d.ts +10 -29
- package/tabstrip/events/select-event.d.ts +3 -1
- package/tabstrip/events/tabclose-event.d.ts +2 -1
- package/tabstrip/events/tabscroll-event.d.ts +2 -2
- package/tabstrip/localization/custom-messages.component.d.ts +11 -2
- package/tabstrip/localization/messages.d.ts +3 -3
- package/tabstrip/models/scroll-buttons-visibility.d.ts +1 -1
- package/tabstrip/models/scrollable-settings.d.ts +17 -22
- package/tabstrip/models/size.d.ts +1 -1
- package/tabstrip/models/tab-alignment.d.ts +1 -1
- package/tabstrip/models/tab-position.d.ts +1 -1
- package/tabstrip/models/tabstrip-tab.component.d.ts +30 -17
- package/tabstrip/tabstrip.component.d.ts +41 -29
- package/tabstrip.module.d.ts +13 -7
- package/tilelayout/models/flowmode.type.d.ts +7 -8
- package/tilelayout/models/gap.interface.d.ts +3 -5
- package/tilelayout/reorder-event.d.ts +3 -2
- package/tilelayout/resize-event.d.ts +3 -2
- package/tilelayout/tilelayout-item-body.component.d.ts +10 -1
- package/tilelayout/tilelayout-item-header.component.d.ts +12 -2
- package/tilelayout/tilelayout-item.component.d.ts +20 -10
- package/tilelayout/tilelayout.component.d.ts +31 -26
- package/tilelayout.module.d.ts +13 -7
- package/timeline/events/navigation-direction.d.ts +6 -0
- package/timeline/models/anchor-target.d.ts +6 -0
- package/timeline/templates/timeline-card-actions.directive.d.ts +11 -2
- package/timeline/templates/timeline-card-body.directive.d.ts +11 -2
- package/timeline/templates/timeline-card-header.directive.d.ts +12 -2
- package/timeline/timeline.component.d.ts +3 -0
- package/timeline.module.d.ts +13 -4
package/gridlayout.module.d.ts
CHANGED
@@ -6,8 +6,20 @@ import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "./layouts/grid-layout.component";
|
7
7
|
import * as i2 from "./layouts/gridlayout-item.component";
|
8
8
|
/**
|
9
|
-
*
|
10
|
-
*
|
9
|
+
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the GridLayout component.
|
10
|
+
*
|
11
|
+
* Use this module to add the GridLayout component to your NgModule-based Angular application.
|
12
|
+
*
|
13
|
+
* @example
|
14
|
+
* ```typescript
|
15
|
+
* import { GridLayoutModule } from '@progress/kendo-angular-layout';
|
16
|
+
* import { NgModule } from '@angular/core';
|
17
|
+
*
|
18
|
+
* @NgModule({
|
19
|
+
* imports: [GridLayoutModule]
|
20
|
+
* })
|
21
|
+
* export class AppModule { }
|
22
|
+
* ```
|
11
23
|
*/
|
12
24
|
export declare class GridLayoutModule {
|
13
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<GridLayoutModule, never>;
|
package/layout.module.d.ts
CHANGED
@@ -53,34 +53,23 @@ import * as i47 from "./timeline/templates/timeline-card-actions.directive";
|
|
53
53
|
import * as i48 from "./timeline/templates/timeline-card-body.directive";
|
54
54
|
import * as i49 from "./timeline/templates/timeline-card-header.directive";
|
55
55
|
/**
|
56
|
-
*
|
57
|
-
* definition for the Layout components.
|
56
|
+
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Layout components.
|
58
57
|
*
|
59
|
-
*
|
58
|
+
* Use this module to add all Layout package components to your NgModule-based Angular application.
|
60
59
|
*
|
61
|
-
*
|
62
|
-
*
|
60
|
+
* @example
|
61
|
+
* ```typescript
|
63
62
|
* import { LayoutModule } from '@progress/kendo-angular-layout';
|
64
|
-
*
|
65
|
-
* // The browser platform with a compiler
|
66
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
67
|
-
*
|
68
63
|
* import { NgModule } from '@angular/core';
|
69
|
-
*
|
70
|
-
* // Import the app component
|
64
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
71
65
|
* import { AppComponent } from './app.component';
|
72
66
|
*
|
73
|
-
*
|
74
|
-
*
|
75
|
-
*
|
76
|
-
*
|
77
|
-
* bootstrap: [AppComponent]
|
67
|
+
* @NgModule({
|
68
|
+
* declarations: [AppComponent],
|
69
|
+
* imports: [BrowserModule, LayoutModule],
|
70
|
+
* bootstrap: [AppComponent]
|
78
71
|
* })
|
79
|
-
* export class AppModule {}
|
80
|
-
*
|
81
|
-
* // Compile and launch the module
|
82
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
83
|
-
*
|
72
|
+
* export class AppModule { }
|
84
73
|
* ```
|
85
74
|
*/
|
86
75
|
export declare class LayoutModule {
|
@@ -7,7 +7,23 @@ import { GridLayoutGapSettings, AlignSettings } from './models';
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
8
8
|
import * as i0 from "@angular/core";
|
9
9
|
/**
|
10
|
-
* Represents the
|
10
|
+
* Represents the Kendo UI GridLayout component for Angular.
|
11
|
+
* Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview]({% slug overview_gridlayout %})).
|
12
|
+
*
|
13
|
+
* @example
|
14
|
+
* ```html
|
15
|
+
* <kendo-gridlayout [rows]="[100, 200]" [cols]="['1fr', '2fr']" [gap]="10">
|
16
|
+
* <kendo-gridlayout-item [row]="1" [col]="1">
|
17
|
+
* <p>Item 1</p>
|
18
|
+
* </kendo-gridlayout-item>
|
19
|
+
* <kendo-gridlayout-item [row]="1" [col]="2">
|
20
|
+
* <p>Item 2</p>
|
21
|
+
* </kendo-gridlayout-item>
|
22
|
+
* </kendo-gridlayout>
|
23
|
+
* ```
|
24
|
+
*
|
25
|
+
* @remarks
|
26
|
+
* Supported children components are: {@link GridLayoutItemComponent}.
|
11
27
|
*/
|
12
28
|
export declare class GridLayoutComponent implements AfterViewInit, OnChanges {
|
13
29
|
private renderer;
|
@@ -19,31 +35,22 @@ export declare class GridLayoutComponent implements AfterViewInit, OnChanges {
|
|
19
35
|
* Specifies the number of rows and their height
|
20
36
|
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
|
21
37
|
*
|
22
|
-
*
|
23
|
-
*
|
24
|
-
* The number of elements in the array defines the number of rows.
|
25
|
-
* Each array element defines the size of the corresponding row. The possible array values are:
|
26
|
-
* * `number` - Defines the size in pixels.
|
27
|
-
* * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
|
28
|
-
* * [GridLayoutRowSize]({% slug api_layout_gridlayoutrowsize %}) - Configuration object, which accepts a `height` key.
|
38
|
+
* 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.
|
39
|
+
* For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
|
29
40
|
*/
|
30
41
|
rows: Array<any>;
|
31
42
|
/**
|
32
43
|
* Specifies the number of columns and their widths
|
33
44
|
* ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
|
34
45
|
*
|
35
|
-
*
|
36
|
-
*
|
37
|
-
* The number of elements in the array defines the number of columns.
|
38
|
-
* Each array element defines the size of the corresponding column. The possible array values are:
|
39
|
-
* * `number` - Defines the size in pixels.
|
40
|
-
* * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
|
41
|
-
* * [GridLayoutColSize]({% slug api_layout_gridlayoutcolsize %}) - Configuration object, which accepts a `width` key.
|
46
|
+
* 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.
|
47
|
+
* For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
|
42
48
|
*/
|
43
49
|
cols: Array<any>;
|
44
50
|
/**
|
45
|
-
* Specifies the gaps between the elements
|
46
|
-
*
|
51
|
+
* Specifies the gaps between the elements ([see example](slug:layout_gridlayout#toc-gap)).
|
52
|
+
*
|
53
|
+
* @default 0
|
47
54
|
*/
|
48
55
|
gap: number | string | GridLayoutGapSettings;
|
49
56
|
/**
|
@@ -4,6 +4,16 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { Renderer2, ElementRef, OnChanges } from '@angular/core';
|
6
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
|
+
*/
|
7
17
|
export declare class GridLayoutItemComponent implements OnChanges {
|
8
18
|
private renderer;
|
9
19
|
private element;
|
@@ -18,13 +28,15 @@ export declare class GridLayoutItemComponent implements OnChanges {
|
|
18
28
|
*/
|
19
29
|
col: number;
|
20
30
|
/**
|
21
|
-
*
|
22
|
-
*
|
31
|
+
* Specifies how many rows the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
32
|
+
*
|
33
|
+
* @default 1
|
23
34
|
*/
|
24
35
|
rowSpan: number;
|
25
36
|
/**
|
26
|
-
*
|
27
|
-
*
|
37
|
+
* Specifies how many columns the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
|
38
|
+
*
|
39
|
+
* @default 1
|
28
40
|
*/
|
29
41
|
colSpan: number;
|
30
42
|
constructor(renderer: Renderer2, element: ElementRef);
|
@@ -3,15 +3,15 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the gaps between the elements of the GridLayout.
|
7
7
|
*/
|
8
8
|
export interface GridLayoutGapSettings {
|
9
9
|
/**
|
10
|
-
*
|
10
|
+
* Specifies the row gap between the elements.
|
11
11
|
*/
|
12
12
|
rows?: number | string;
|
13
13
|
/**
|
14
|
-
*
|
14
|
+
* Specifies the column gap between the elements.
|
15
15
|
*/
|
16
16
|
cols?: number | string;
|
17
17
|
}
|
@@ -3,20 +3,20 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the size of the GridLayout row.
|
7
7
|
*/
|
8
8
|
export interface GridLayoutRowSize {
|
9
9
|
/**
|
10
|
-
*
|
10
|
+
* Specifies the height of the row.
|
11
11
|
*/
|
12
12
|
height?: number | string;
|
13
13
|
}
|
14
14
|
/**
|
15
|
-
*
|
15
|
+
* Defines the size of the GridLayout column.
|
16
16
|
*/
|
17
17
|
export interface GridLayoutColSize {
|
18
18
|
/**
|
19
|
-
*
|
19
|
+
* Specifies the width of the column.
|
20
20
|
*/
|
21
21
|
width?: number | string;
|
22
22
|
}
|
@@ -4,15 +4,15 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { VerticalAlign, HorizontalAlign } from '../models';
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Defines the possible align options of the StackLayout and GridLayout components.
|
8
8
|
*/
|
9
9
|
export interface AlignSettings {
|
10
10
|
/**
|
11
|
-
*
|
11
|
+
* Specifies the horizontal alignment of the inner GridLayout and StackLayout elements.
|
12
12
|
*/
|
13
13
|
horizontal?: HorizontalAlign;
|
14
14
|
/**
|
15
|
-
*
|
15
|
+
* Specifies the vertical alignment of the inner GridLayout and StackLayout elements.
|
16
16
|
*/
|
17
17
|
vertical?: VerticalAlign;
|
18
18
|
}
|
@@ -3,6 +3,6 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the possible horizontal alignment options of the StackLayout and GridLayout.
|
7
7
|
*/
|
8
8
|
export type HorizontalAlign = 'start' | 'center' | 'end' | 'stretch';
|
@@ -3,6 +3,6 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the possible vertical alignment options of the StackLayout and GridLayout.
|
7
7
|
*/
|
8
8
|
export type VerticalAlign = 'top' | 'middle' | 'bottom' | 'stretch';
|
@@ -7,7 +7,17 @@ import { AlignSettings, Orientation } from './models';
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
8
8
|
import * as i0 from "@angular/core";
|
9
9
|
/**
|
10
|
-
* Represents the
|
10
|
+
* Represents the Kendo UI StackLayout component for Angular.
|
11
|
+
* Arranges child components in a single row or column with customizable alignment and spacing ([see overview]({% slug overview_stacklayout %})).
|
12
|
+
*
|
13
|
+
* @example
|
14
|
+
* ```html
|
15
|
+
* <kendo-stacklayout orientation="horizontal" [gap]="16">
|
16
|
+
* <button class="k-button">Button 1</button>
|
17
|
+
* <button class="k-button">Button 2</button>
|
18
|
+
* <button class="k-button">Button 3</button>
|
19
|
+
* </kendo-stacklayout>
|
20
|
+
* ```
|
11
21
|
*/
|
12
22
|
export declare class StackLayoutComponent implements AfterViewInit, OnChanges {
|
13
23
|
private renderer;
|
@@ -24,17 +34,16 @@ export declare class StackLayoutComponent implements AfterViewInit, OnChanges {
|
|
24
34
|
set align(align: AlignSettings);
|
25
35
|
get align(): AlignSettings;
|
26
36
|
/**
|
27
|
-
* Specifies the gap between the inner StackLayout elements
|
28
|
-
*
|
37
|
+
* Specifies the gap between the inner StackLayout elements ([see example](slug:layout_stacklayout#toc-gap)).
|
38
|
+
*
|
39
|
+
* @default 0
|
29
40
|
*/
|
30
41
|
gap: number | string;
|
31
42
|
/**
|
32
43
|
* Specifies the orientation of the StackLayout
|
33
44
|
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
|
34
45
|
*
|
35
|
-
*
|
36
|
-
* (Default) `horizontal`
|
37
|
-
* `vertical`
|
46
|
+
* @default 'horizontal'
|
38
47
|
*/
|
39
48
|
orientation: Orientation;
|
40
49
|
private _align;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@progress/kendo-angular-layout",
|
3
|
-
"version": "19.1.2-develop.
|
3
|
+
"version": "19.1.2-develop.6",
|
4
4
|
"description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
6
6
|
"author": "Progress",
|
@@ -50,7 +50,7 @@
|
|
50
50
|
"package": {
|
51
51
|
"productName": "Kendo UI for Angular",
|
52
52
|
"productCode": "KENDOUIANGULAR",
|
53
|
-
"publishDate":
|
53
|
+
"publishDate": 1750433648,
|
54
54
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
|
55
55
|
}
|
56
56
|
},
|
@@ -60,17 +60,17 @@
|
|
60
60
|
"@angular/core": "16 - 20",
|
61
61
|
"@angular/platform-browser": "16 - 20",
|
62
62
|
"@progress/kendo-licensing": "^1.5.0",
|
63
|
-
"@progress/kendo-angular-common": "19.1.2-develop.
|
64
|
-
"@progress/kendo-angular-l10n": "19.1.2-develop.
|
65
|
-
"@progress/kendo-angular-progressbar": "19.1.2-develop.
|
66
|
-
"@progress/kendo-angular-icons": "19.1.2-develop.
|
67
|
-
"@progress/kendo-angular-buttons": "19.1.2-develop.
|
68
|
-
"@progress/kendo-angular-intl": "19.1.2-develop.
|
63
|
+
"@progress/kendo-angular-common": "19.1.2-develop.6",
|
64
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.6",
|
65
|
+
"@progress/kendo-angular-progressbar": "19.1.2-develop.6",
|
66
|
+
"@progress/kendo-angular-icons": "19.1.2-develop.6",
|
67
|
+
"@progress/kendo-angular-buttons": "19.1.2-develop.6",
|
68
|
+
"@progress/kendo-angular-intl": "19.1.2-develop.6",
|
69
69
|
"rxjs": "^6.5.3 || ^7.0.0"
|
70
70
|
},
|
71
71
|
"dependencies": {
|
72
72
|
"tslib": "^2.3.1",
|
73
|
-
"@progress/kendo-angular-schematics": "19.1.2-develop.
|
73
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.6",
|
74
74
|
"@progress/kendo-draggable": "^3.0.2",
|
75
75
|
"node-html-parser": "^7.0.1"
|
76
76
|
},
|
@@ -5,11 +5,11 @@
|
|
5
5
|
import { PreventableEvent } from '../../common/preventable-event';
|
6
6
|
import { PanelBarItemModel } from '../panelbar-item-model';
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the arguments for the `collapse` event of the PanelBar.
|
9
9
|
*/
|
10
10
|
export declare class PanelBarCollapseEvent extends PreventableEvent {
|
11
11
|
/**
|
12
|
-
*
|
12
|
+
* Defines the item that will be collapsed.
|
13
13
|
*/
|
14
14
|
item: PanelBarItemModel;
|
15
15
|
}
|
@@ -5,11 +5,11 @@
|
|
5
5
|
import { PreventableEvent } from '../../common/preventable-event';
|
6
6
|
import { PanelBarItemModel } from '../panelbar-item-model';
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the arguments for the `expand` event of the PanelBar.
|
9
9
|
*/
|
10
10
|
export declare class PanelBarExpandEvent extends PreventableEvent {
|
11
11
|
/**
|
12
|
-
*
|
12
|
+
* Defines the item that will be expanded.
|
13
13
|
*/
|
14
14
|
item: PanelBarItemModel;
|
15
15
|
}
|
@@ -4,15 +4,15 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { PanelBarItemModel } from '../panelbar-item-model';
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Defines the arguments for the `itemClick` event of the PanelBar.
|
8
8
|
*/
|
9
9
|
export declare class PanelBarItemClickEvent {
|
10
10
|
/**
|
11
|
-
*
|
11
|
+
* Defines the clicked item.
|
12
12
|
*/
|
13
13
|
item: PanelBarItemModel;
|
14
14
|
/**
|
15
|
-
*
|
15
|
+
* Defines the DOM event that triggered the `itemClick` event.
|
16
16
|
*/
|
17
17
|
originalEvent: any;
|
18
18
|
}
|
@@ -5,11 +5,11 @@
|
|
5
5
|
import { PreventableEvent } from '../../common/preventable-event';
|
6
6
|
import { PanelBarItemModel } from '../panelbar-item-model';
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the arguments for the `select` event of the PanelBar.
|
9
9
|
*/
|
10
10
|
export declare class PanelBarSelectEvent extends PreventableEvent {
|
11
11
|
/**
|
12
|
-
*
|
12
|
+
* Defines the item that will be selected.
|
13
13
|
*/
|
14
14
|
item: PanelBarItemModel;
|
15
15
|
}
|
@@ -4,11 +4,11 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { PanelBarItemModel } from '../panelbar-item-model';
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Defines the arguments for the `stateChange` event of the PanelBar.
|
8
8
|
*/
|
9
9
|
export declare class PanelBarStateChangeEvent {
|
10
10
|
/**
|
11
|
-
*
|
11
|
+
* Defines a collection of all modified items.
|
12
12
|
*/
|
13
13
|
items: Array<PanelBarItemModel>;
|
14
14
|
}
|
@@ -5,8 +5,19 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the content template of the declaratively initialized PanelBar items.
|
9
|
+
* To define the content template, nest an `<ng-template>` tag
|
10
|
+
* with the `kendoPanelBarContent` directive inside the `<kendo-panelbar-item>` tag.
|
9
11
|
* The content can be expanded or collapsed through the item.
|
12
|
+
*
|
13
|
+
* @example
|
14
|
+
* ```html
|
15
|
+
* <kendo-panelbar-item title="Item">
|
16
|
+
* <div kendoPanelBarContent>
|
17
|
+
* <p>Item content goes here</p>
|
18
|
+
* </div>
|
19
|
+
* </kendo-panelbar-item>
|
20
|
+
* ```
|
10
21
|
*/
|
11
22
|
export declare class PanelBarContentDirective {
|
12
23
|
templateRef: TemplateRef<any>;
|
@@ -3,13 +3,12 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
7
|
-
* By default, the expand mode is set to `multiple`.
|
6
|
+
* Defines the expand modes of the PanelBar.
|
8
7
|
*/
|
9
8
|
export declare enum PanelBarExpandMode {
|
10
9
|
/**
|
11
10
|
* Allows you to expand only one item at a time.
|
12
|
-
* When you expand an item, the item that was previously expanded is
|
11
|
+
* When you expand an item, the item that was previously expanded is collapsed.
|
13
12
|
*/
|
14
13
|
Single = 0,
|
15
14
|
/**
|
@@ -23,7 +22,7 @@ export declare enum PanelBarExpandMode {
|
|
23
22
|
*/
|
24
23
|
Multiple = 2,
|
25
24
|
/**
|
26
|
-
*
|
25
|
+
* The default expand mode set to `multiple`.
|
27
26
|
*/
|
28
27
|
Default = 2
|
29
28
|
}
|
@@ -4,7 +4,7 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { SVGIcon } from "@progress/kendo-svg-icons";
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Defines the items model of the PanelBar. These are the interface fields that the PanelBar items use.
|
8
8
|
*/
|
9
9
|
export interface PanelBarItemModel {
|
10
10
|
/**
|
@@ -16,20 +16,20 @@ export interface PanelBarItemModel {
|
|
16
16
|
*/
|
17
17
|
id: string;
|
18
18
|
/**
|
19
|
-
* Defines the icon that
|
19
|
+
* Defines the icon that renders next to the title.
|
20
20
|
*/
|
21
21
|
icon: string;
|
22
22
|
/**
|
23
|
-
* Defines the icon that
|
23
|
+
* Defines the icon that renders next to the title by using a custom CSS class.
|
24
24
|
*/
|
25
25
|
iconClass: string;
|
26
26
|
/**
|
27
|
-
* Defines an
|
28
|
-
*
|
27
|
+
* Defines an SVG icon to render.
|
28
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
29
29
|
*/
|
30
30
|
svgIcon?: SVGIcon;
|
31
31
|
/**
|
32
|
-
* Defines the location of the image that
|
32
|
+
* Defines the location of the image that displays next to the title.
|
33
33
|
*/
|
34
34
|
imageUrl: string;
|
35
35
|
/**
|
@@ -5,7 +5,18 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the template directive of the PanelBar which helps to customize the item content.
|
9
|
+
* To define the template, nest an `<ng-template>` tag
|
10
|
+
* with the `kendoPanelBarItemTemplate` directive inside the `<kendo-panelbar>` tag.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
* ```html
|
14
|
+
* <kendo-panelbar>
|
15
|
+
* <ng-template kendoPanelBarItemTemplate let-dataItem>
|
16
|
+
* <span>{{ dataItem.title }}</span>
|
17
|
+
* </ng-template>
|
18
|
+
* </kendo-panelbar>
|
19
|
+
* ```
|
9
20
|
*/
|
10
21
|
export declare class PanelBarItemTemplateDirective {
|
11
22
|
templateRef: TemplateRef<any>;
|
@@ -5,29 +5,22 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Defines the template directive of the PanelBar which helps to customize the item title
|
9
9
|
* ([more information and example]({% slug templates_panelbar %}#toc-customizing-the-appearance-of-the-title)).
|
10
|
+
* To define the template, nest an `<ng-template>` tag
|
11
|
+
* with the `kendoPanelBarItemTitle` directive inside the `<kendo-panelbar-item>` tag.
|
10
12
|
*
|
11
|
-
*
|
13
|
+
* The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title]({% slug api_layout_panelbaritemcomponent %}#toc-title) option.
|
12
14
|
*
|
13
15
|
* @example
|
14
|
-
* ```
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
* Item Title
|
23
|
-
* </ng-template>
|
24
|
-
* </kendo-panelbar-item>
|
25
|
-
* </kendo-panelbar>
|
26
|
-
* `
|
27
|
-
* })
|
28
|
-
*
|
29
|
-
* class AppComponent {}
|
30
|
-
*
|
16
|
+
* ```html
|
17
|
+
* <kendo-panelbar>
|
18
|
+
* <kendo-panelbar-item [expanded]="true">
|
19
|
+
* <ng-template kendoPanelBarItemTitle>
|
20
|
+
* Item Title
|
21
|
+
* </ng-template>
|
22
|
+
* </kendo-panelbar-item>
|
23
|
+
* </kendo-panelbar>
|
31
24
|
* ```
|
32
25
|
*/
|
33
26
|
export declare class PanelBarItemTitleDirective {
|
@@ -11,7 +11,14 @@ import { Subscription } from 'rxjs';
|
|
11
11
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
12
12
|
import * as i0 from "@angular/core";
|
13
13
|
/**
|
14
|
-
* Represents the items of the PanelBar.
|
14
|
+
* Represents the PanelBar item component for Angular. Defines the items of the PanelBar.
|
15
|
+
*
|
16
|
+
* @example
|
17
|
+
* ```html
|
18
|
+
* <kendo-panelbar-item title="Item 1" [expanded]="true">
|
19
|
+
* <kendo-panelbar-item title="Sub Item 1"></kendo-panelbar-item>
|
20
|
+
* </kendo-panelbar-item>
|
21
|
+
* ```
|
15
22
|
*/
|
16
23
|
export declare class PanelBarItemComponent implements OnInit, AfterContentChecked, AfterViewChecked, OnDestroy {
|
17
24
|
parent: PanelBarItemComponent;
|
@@ -28,27 +35,35 @@ export declare class PanelBarItemComponent implements OnInit, AfterContentChecke
|
|
28
35
|
*/
|
29
36
|
id: string;
|
30
37
|
/**
|
31
|
-
* Defines the icon that
|
38
|
+
* Defines the icon that renders next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
|
39
|
+
*
|
40
|
+
* @default ''
|
32
41
|
*/
|
33
42
|
icon: string;
|
34
43
|
/**
|
35
|
-
* Defines
|
44
|
+
* Defines the icon that renders next to the title by using a custom CSS class
|
36
45
|
* ([see example]({% slug items_panelbar %}#toc-title-icons)).
|
46
|
+
*
|
47
|
+
* @default ''
|
37
48
|
*/
|
38
49
|
iconClass: string;
|
39
50
|
/**
|
40
|
-
* Defines an
|
41
|
-
*
|
51
|
+
* Defines an SVG icon to render.
|
52
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
42
53
|
*/
|
43
54
|
set svgIcon(icon: SVGIcon);
|
44
55
|
get svgIcon(): SVGIcon;
|
45
56
|
/**
|
46
|
-
* Defines the location of the image that
|
57
|
+
* Defines the location of the image that displays next to the title
|
47
58
|
* ([see example]({% slug items_panelbar %}#toc-title-images)).
|
59
|
+
*
|
60
|
+
* @default ''
|
48
61
|
*/
|
49
62
|
imageUrl: string;
|
50
63
|
/**
|
51
64
|
* When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
|
65
|
+
*
|
66
|
+
* @default false
|
52
67
|
*/
|
53
68
|
disabled: boolean;
|
54
69
|
/**
|
@@ -58,13 +73,13 @@ export declare class PanelBarItemComponent implements OnInit, AfterContentChecke
|
|
58
73
|
get expanded(): boolean;
|
59
74
|
/**
|
60
75
|
* Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
|
76
|
+
*
|
77
|
+
* @default false
|
61
78
|
*/
|
62
79
|
selected: boolean;
|
63
80
|
/**
|
64
81
|
* Sets the content of the PanelBar item.
|
65
|
-
*
|
66
|
-
* [items]({% slug api_layout_panelbarcomponent %}#toc-items)
|
67
|
-
* property of the PanelBar is set.
|
82
|
+
* It is used when the [`items`]({% slug api_layout_panelbarcomponent %}#toc-items) property of the PanelBar is set.
|
68
83
|
*/
|
69
84
|
content: any;
|
70
85
|
/**
|