Skip to content

feat(igc-ts): update igniteui packages to latest #1597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
damyanpetev merged 4 commits into from
Apr 2, 2026
Merged

feat(igc-ts): update igniteui packages to latest #1597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55a3754
feat(ig-ts): update igniteui-webcomponents packages to latest
damyanpetev Mar 26, 2026
a0edd28
feat(igc-ts): update dock-manager to latest
damyanpetev Mar 26, 2026
22b26e5
Merge branch 'master' into dpetev/update-wc-latest
damyanpetev Apr 2, 2026
a5e4147
chore: update base project and drop extra packages on progress
damyanpetev Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
293 changes: 129 additions & 164 deletions ...plates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import { html, css, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { customElement, state } from 'lit/decorators.js';
import {
defineComponents,
IgcDockManagerComponent,
IgcDockManagerPaneType,
IgcSplitPaneOrientation,
IgcDockManagerLayout,
} from 'igniteui-dockmanager';
import { defineCustomElements } from 'igniteui-dockmanager/loader';

defineCustomElements();
defineComponents(IgcDockManagerComponent);

@customElement('app-$(path)')
export default class $(ClassName) extends LitElement {
static styles = css`
:host, igc-dockmanager {
:host {
height: 100%;
margin: 0px;
padding-left: 275px;
width: calc(100% - 275px);
Comment thread
damyanpetev marked this conversation as resolved.
}

Expand All @@ -27,42 +25,134 @@ export default class $(ClassName) extends LitElement {
flex-direction: column;
/* background: orange; */
}

.dockManagerFull {
padding: 0rem;
margin: 0rem;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}

.dockManagerFrame {
padding: 0rem;
margin: 0rem;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}

.employeesDetailsRow {
height: 4rem;
display: flex;
flex-direction: row;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
align-items: center;
}
`;

@state()
private layout: IgcDockManagerLayout = {
rootPane: {
type: 'splitPane',
orientation: 'horizontal',
panes: [
{
type: 'splitPane',
orientation: 'vertical',
panes: [
{
type: 'contentPane',
contentId: 'content1',
header: 'Content Pane 1',
},
{
type: 'contentPane',
contentId: 'content2',
header: 'Unpinned Pane 1',
isPinned: false,
},
],
},
{
type: 'splitPane',
orientation: 'vertical',
size: 200,
panes: [
{
type: 'documentHost',
size: 200,
rootPane: {
type: 'splitPane',
orientation: 'horizontal',
panes: [
{
type: 'tabGroupPane',
panes: [
{
type: 'contentPane',
header: 'Document 1',
contentId: 'content3',
},
{
type: 'contentPane',
header: 'Document 2',
contentId: 'content4',
},
],
},
],
},
},
{
type: 'contentPane',
contentId: 'content5',
header: 'Unpinned Pane 2',
isPinned: false,
},
],
},
{
type: 'splitPane',
orientation: 'vertical',
panes: [
{
type: 'tabGroupPane',
size: 200,
panes: [
{
type: 'contentPane',
contentId: 'content6',
header: 'Tab 1',
},
{
type: 'contentPane',
contentId: 'content7',
header: 'Tab 2',
},
{
type: 'contentPane',
contentId: 'content8',
header: 'Tab 3',
},
{
type: 'contentPane',
contentId: 'content9',
header: 'Tab 4',
},
{
type: 'contentPane',
contentId: 'content10',
header: 'Tab 5',
},
],
},
{
type: 'contentPane',
contentId: 'content11',
header: 'Content Pane 2',
},
],
},
],
},
floatingPanes: [
{
type: 'splitPane',
orientation: 'horizontal',
floatingHeight: 150,
floatingWidth: 250,
floatingLocation: { x: 300, y: 200 },
panes: [
{
type: 'contentPane',
contentId: 'content12',
header: 'Floating Pane',
},
],
},
],
};

render() {
return html`
<igc-dockmanager id="dockManager">
<igc-dockmanager .layout=${this.layout}>
<div slot="content1" class="dockManagerContent">Content 1</div>
<div slot="content2" class="dockManagerContent">Content 2</div>
<div slot="content3" class="dockManagerContent">Content 3</div>
Expand All @@ -78,129 +168,4 @@ export default class $(ClassName) extends LitElement {
</igc-dockmanager>
`;
}

firstUpdated() {
const dockManager = this.shadowRoot?.getElementById('dockManager') as IgcDockManagerComponent;
dockManager.layout = {
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: [
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: [
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content1',
header: 'Content Pane 1',
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content2',
header: 'Unpinned Pane 1',
isPinned: false,
},
],
},
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 200,
panes: [
{
type: IgcDockManagerPaneType.documentHost,
size: 200,
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: [
{
type: IgcDockManagerPaneType.tabGroupPane,
panes: [
{
type: IgcDockManagerPaneType.contentPane,
header: 'Document 1',
contentId: 'content3',
},
{
type: IgcDockManagerPaneType.contentPane,
header: 'Document 2',
contentId: 'content4',
},
],
},
],
},
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content5',
header: 'Unpinned Pane 2',
isPinned: false,
},
],
},
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: [
{
type: IgcDockManagerPaneType.tabGroupPane,
size: 200,
panes: [
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content6',
header: 'Tab 1',
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content7',
header: 'Tab 2',
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content8',
header: 'Tab 3',
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content9',
header: 'Tab 4',
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content10',
header: 'Tab 5',
},
],
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content11',
header: 'Content Pane 2',
},
],
},
],
},
floatingPanes: [
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
floatingHeight: 150,
floatingWidth: 250,
floatingLocation: { x: 300, y: 200 },
panes: [
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content12',
header: 'Floating Pane',
},
],
},
],
};
}
}
2 changes: 1 addition & 1 deletion packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate {
this.projectType = "igc-ts";
this.name = "Dock Manager";
this.description = "Dock Manager with most functionalities and docking options";
this.packages = ["igniteui-dockmanager@~1.14.4"];
this.packages = ["igniteui-dockmanager@^2.1.0"];

Copilot AI Apr 2, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dock-manager template pins igniteui-dockmanager with ^2.1.0, which permits future major upgrades and can break generated projects. Most Ignite UI template packages here use ~ pins; consider switching this to ~2.1.0 for consistency and safer updates.

Suggested change
this.packages = ["igniteui-dockmanager@^2.1.0"];
this.packages = ["igniteui-dockmanager@~2.1.0"];

Copilot uses AI. Check for mistakes.
}
}
module.exports = new IgcDockManagerTemplate();
4 changes: 2 additions & 2 deletions packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate {
this.name = "Financial Chart";
this.description = "IgcFinancialChart";
this.packages = [
"igniteui-webcomponents-core@~6.0.0",
"igniteui-webcomponents-charts@~6.0.0"
"igniteui-webcomponents-core@~7.0.0",
"igniteui-webcomponents-charts@~7.0.0"
];
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate {
this.projectType = "igc-ts";
this.name = "Grid";
this.description = "IgcGrid with local data";
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ];
}
}
module.exports = new IgcGridTemplate();
2 changes: 1 addition & 1 deletion packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate {
this.projectType = "igc-ts";
this.name = "Grid Editing";
this.description = "IgcGrid with editing enabled";
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ];
}
}
module.exports = new IgcGridEditingTemplate();
2 changes: 1 addition & 1 deletion packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class IgcGridSummariesTemplate extends IgniteUIForWebComponentsTemplate {
this.projectType = "igc-ts";
this.name = "Grid Summaries";
this.description = "IgcGrid with column summaries";
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
this.packages = [ "igniteui-webcomponents-grids@~7.0.0" ];
}
}
module.exports = new IgcGridSummariesTemplate();
4 changes: 2 additions & 2 deletions packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ class IgcLinearGaugeTemplate extends IgniteUIForWebComponentsTemplate {
this.name = "Linear Gauge";
this.description = "IgcLinearGauge";
this.packages = [
"igniteui-webcomponents-core@~6.0.0",
"igniteui-webcomponents-gauges@~6.0.0"
"igniteui-webcomponents-core@~7.0.0",
"igniteui-webcomponents-gauges@~7.0.0"
];
}
}
Expand Down
5 changes: 1 addition & 4 deletions packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@ class IgcLinearProgressComponent extends IgniteUIForWebComponentsTemplate {
this.projectType = "igc-ts";
this.name = "Linear Progress";
this.description = "Basic Linear Progress";
this.packages = [
"igniteui-webcomponents-core@~6.0.0",
"igniteui-webcomponents-charts@~6.0.0"
];
this.packages = [];
}
}
module.exports = new IgcLinearProgressComponent();
Loading
Loading