Skip to content

Commit 2bdcfc9

Browse files
damyanpetevdamyanpetev
authored
feat(igc-ts): update igniteui packages to latest (#1566)
* feat(ig-ts): update igniteui-webcomponents packages to latest * feat(igc-ts): update dock-manager to latest
1 parent 2bd3393 commit 2bdcfc9

12 files changed

Lines changed: 155 additions & 190 deletions

File tree

‎packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 129 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import { html, css, LitElement } from 'lit';
2-
import { customElement } from 'lit/decorators.js';
2+
import { customElement, state } from 'lit/decorators.js';
33
import {
4+
defineComponents,
45
IgcDockManagerComponent,
5-
IgcDockManagerPaneType,
6-
IgcSplitPaneOrientation,
6+
IgcDockManagerLayout,
77
} from 'igniteui-dockmanager';
8-
import { defineCustomElements } from 'igniteui-dockmanager/loader';
98

10-
defineCustomElements();
9+
defineComponents(IgcDockManagerComponent);
1110

1211
@customElement('app-$(path)')
1312
export default class $(ClassName) extends LitElement {
1413
static styles = css`
15-
:host, igc-dockmanager {
14+
:host {
1615
height: 100%;
1716
margin: 0px;
18-
padding-left: 275px;
1917
width: calc(100% - 275px);
2018
}
2119
@@ -27,42 +25,134 @@ export default class $(ClassName) extends LitElement {
2725
flex-direction: column;
2826
/* background: orange; */
2927
}
30-
31-
.dockManagerFull {
32-
padding: 0rem;
33-
margin: 0rem;
34-
height: 100%;
35-
width: 100%;
36-
display: flex;
37-
flex-direction: column;
38-
overflow: hidden;
39-
}
40-
41-
.dockManagerFrame {
42-
padding: 0rem;
43-
margin: 0rem;
44-
height: 100%;
45-
width: 100%;
46-
display: flex;
47-
flex-direction: column;
48-
overflow: hidden;
49-
}
50-
51-
.employeesDetailsRow {
52-
height: 4rem;
53-
display: flex;
54-
flex-direction: row;
55-
padding-left: 0.5rem;
56-
padding-right: 0.5rem;
57-
padding-top: 0.5rem;
58-
padding-bottom: 0.5rem;
59-
align-items: center;
60-
}
6128
`;
6229

30+
@state()
31+
private layout: IgcDockManagerLayout = {
32+
rootPane: {
33+
type: 'splitPane',
34+
orientation: 'horizontal',
35+
panes: [
36+
{
37+
type: 'splitPane',
38+
orientation: 'vertical',
39+
panes: [
40+
{
41+
type: 'contentPane',
42+
contentId: 'content1',
43+
header: 'Content Pane 1',
44+
},
45+
{
46+
type: 'contentPane',
47+
contentId: 'content2',
48+
header: 'Unpinned Pane 1',
49+
isPinned: false,
50+
},
51+
],
52+
},
53+
{
54+
type: 'splitPane',
55+
orientation: 'vertical',
56+
size: 200,
57+
panes: [
58+
{
59+
type: 'documentHost',
60+
size: 200,
61+
rootPane: {
62+
type: 'splitPane',
63+
orientation: 'horizontal',
64+
panes: [
65+
{
66+
type: 'tabGroupPane',
67+
panes: [
68+
{
69+
type: 'contentPane',
70+
header: 'Document 1',
71+
contentId: 'content3',
72+
},
73+
{
74+
type: 'contentPane',
75+
header: 'Document 2',
76+
contentId: 'content4',
77+
},
78+
],
79+
},
80+
],
81+
},
82+
},
83+
{
84+
type: 'contentPane',
85+
contentId: 'content5',
86+
header: 'Unpinned Pane 2',
87+
isPinned: false,
88+
},
89+
],
90+
},
91+
{
92+
type: 'splitPane',
93+
orientation: 'vertical',
94+
panes: [
95+
{
96+
type: 'tabGroupPane',
97+
size: 200,
98+
panes: [
99+
{
100+
type: 'contentPane',
101+
contentId: 'content6',
102+
header: 'Tab 1',
103+
},
104+
{
105+
type: 'contentPane',
106+
contentId: 'content7',
107+
header: 'Tab 2',
108+
},
109+
{
110+
type: 'contentPane',
111+
contentId: 'content8',
112+
header: 'Tab 3',
113+
},
114+
{
115+
type: 'contentPane',
116+
contentId: 'content9',
117+
header: 'Tab 4',
118+
},
119+
{
120+
type: 'contentPane',
121+
contentId: 'content10',
122+
header: 'Tab 5',
123+
},
124+
],
125+
},
126+
{
127+
type: 'contentPane',
128+
contentId: 'content11',
129+
header: 'Content Pane 2',
130+
},
131+
],
132+
},
133+
],
134+
},
135+
floatingPanes: [
136+
{
137+
type: 'splitPane',
138+
orientation: 'horizontal',
139+
floatingHeight: 150,
140+
floatingWidth: 250,
141+
floatingLocation: { x: 300, y: 200 },
142+
panes: [
143+
{
144+
type: 'contentPane',
145+
contentId: 'content12',
146+
header: 'Floating Pane',
147+
},
148+
],
149+
},
150+
],
151+
};
152+
63153
render() {
64154
return html`
65-
<igc-dockmanager id="dockManager">
155+
<igc-dockmanager .layout=${this.layout}>
66156
<div slot="content1" class="dockManagerContent">Content 1</div>
67157
<div slot="content2" class="dockManagerContent">Content 2</div>
68158
<div slot="content3" class="dockManagerContent">Content 3</div>
@@ -78,129 +168,4 @@ export default class $(ClassName) extends LitElement {
78168
</igc-dockmanager>
79169
`;
80170
}
81-
82-
firstUpdated() {
83-
const dockManager = this.shadowRoot?.getElementById('dockManager') as IgcDockManagerComponent;
84-
dockManager.layout = {
85-
rootPane: {
86-
type: IgcDockManagerPaneType.splitPane,
87-
orientation: IgcSplitPaneOrientation.horizontal,
88-
panes: [
89-
{
90-
type: IgcDockManagerPaneType.splitPane,
91-
orientation: IgcSplitPaneOrientation.vertical,
92-
panes: [
93-
{
94-
type: IgcDockManagerPaneType.contentPane,
95-
contentId: 'content1',
96-
header: 'Content Pane 1',
97-
},
98-
{
99-
type: IgcDockManagerPaneType.contentPane,
100-
contentId: 'content2',
101-
header: 'Unpinned Pane 1',
102-
isPinned: false,
103-
},
104-
],
105-
},
106-
{
107-
type: IgcDockManagerPaneType.splitPane,
108-
orientation: IgcSplitPaneOrientation.vertical,
109-
size: 200,
110-
panes: [
111-
{
112-
type: IgcDockManagerPaneType.documentHost,
113-
size: 200,
114-
rootPane: {
115-
type: IgcDockManagerPaneType.splitPane,
116-
orientation: IgcSplitPaneOrientation.horizontal,
117-
panes: [
118-
{
119-
type: IgcDockManagerPaneType.tabGroupPane,
120-
panes: [
121-
{
122-
type: IgcDockManagerPaneType.contentPane,
123-
header: 'Document 1',
124-
contentId: 'content3',
125-
},
126-
{
127-
type: IgcDockManagerPaneType.contentPane,
128-
header: 'Document 2',
129-
contentId: 'content4',
130-
},
131-
],
132-
},
133-
],
134-
},
135-
},
136-
{
137-
type: IgcDockManagerPaneType.contentPane,
138-
contentId: 'content5',
139-
header: 'Unpinned Pane 2',
140-
isPinned: false,
141-
},
142-
],
143-
},
144-
{
145-
type: IgcDockManagerPaneType.splitPane,
146-
orientation: IgcSplitPaneOrientation.vertical,
147-
panes: [
148-
{
149-
type: IgcDockManagerPaneType.tabGroupPane,
150-
size: 200,
151-
panes: [
152-
{
153-
type: IgcDockManagerPaneType.contentPane,
154-
contentId: 'content6',
155-
header: 'Tab 1',
156-
},
157-
{
158-
type: IgcDockManagerPaneType.contentPane,
159-
contentId: 'content7',
160-
header: 'Tab 2',
161-
},
162-
{
163-
type: IgcDockManagerPaneType.contentPane,
164-
contentId: 'content8',
165-
header: 'Tab 3',
166-
},
167-
{
168-
type: IgcDockManagerPaneType.contentPane,
169-
contentId: 'content9',
170-
header: 'Tab 4',
171-
},
172-
{
173-
type: IgcDockManagerPaneType.contentPane,
174-
contentId: 'content10',
175-
header: 'Tab 5',
176-
},
177-
],
178-
},
179-
{
180-
type: IgcDockManagerPaneType.contentPane,
181-
contentId: 'content11',
182-
header: 'Content Pane 2',
183-
},
184-
],
185-
},
186-
],
187-
},
188-
floatingPanes: [
189-
{
190-
type: IgcDockManagerPaneType.splitPane,
191-
orientation: IgcSplitPaneOrientation.horizontal,
192-
floatingHeight: 150,
193-
floatingWidth: 250,
194-
floatingLocation: { x: 300, y: 200 },
195-
panes: [
196-
{
197-
type: IgcDockManagerPaneType.contentPane,
198-
contentId: 'content12',
199-
header: 'Floating Pane',
200-
},
201-
],
202-
},
203-
],
204-
};
205-
}
206171
}

‎packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate {
1010
this.projectType = "igc-ts";
1111
this.name = "Dock Manager";
1212
this.description = "Dock Manager with most functionalities and docking options";
13-
this.packages = ["igniteui-dockmanager@~1.14.4"];
13+
this.packages = ["igniteui-dockmanager@^2.1.0"];
1414
}
1515
}
1616
module.exports = new IgcDockManagerTemplate();

‎packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate {
1111
this.name = "Financial Chart";
1212
this.description = "IgcFinancialChart";
1313
this.packages = [
14-
"igniteui-webcomponents-core@~6.0.0",
15-
"igniteui-webcomponents-charts@~6.0.0"
14+
"igniteui-webcomponents-core@~7.0.0",
15+
"igniteui-webcomponents-charts@~7.0.0"
1616
];
1717
}
1818
}

‎packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate {
1010
this.projectType = "igc-ts";
1111
this.name = "Grid";
1212
this.description = "IgcGrid with local data";
13-
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
13+
this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ];
1414
}
1515
}
1616
module.exports = new IgcGridTemplate();

‎packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate {
1010
this.projectType = "igc-ts";
1111
this.name = "Grid Editing";
1212
this.description = "IgcGrid with editing enabled";
13-
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
13+
this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ];
1414
}
1515
}
1616
module.exports = new IgcGridEditingTemplate();

‎packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class IgcGridSummariesTemplate extends IgniteUIForWebComponentsTemplate {
1010
this.projectType = "igc-ts";
1111
this.name = "Grid Summaries";
1212
this.description = "IgcGrid with column summaries";
13-
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
13+
this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ];
1414
}
1515
}
1616
module.exports = new IgcGridSummariesTemplate();

‎packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ class IgcLinearGaugeTemplate extends IgniteUIForWebComponentsTemplate {
1111
this.name = "Linear Gauge";
1212
this.description = "IgcLinearGauge";
1313
this.packages = [
14-
"igniteui-webcomponents-core@~6.0.0",
15-
"igniteui-webcomponents-gauges@~6.0.0"
14+
"igniteui-webcomponents-core@~7.0.0",
15+
"igniteui-webcomponents-gauges@~7.0.0"
1616
];
1717
}
1818
}

‎packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ class IgcLinearProgressComponent extends IgniteUIForWebComponentsTemplate {
1111
this.name = "Linear Progress";
1212
this.description = "Basic Linear Progress";
1313
this.packages = [
14-
"igniteui-webcomponents-core@~6.0.0",
15-
"igniteui-webcomponents-charts@~6.0.0"
14+
"igniteui-webcomponents-core@~7.0.0",
15+
"igniteui-webcomponents-charts@~7.0.0"
1616
];
1717
}
1818
}

0 commit comments

Comments
 (0)