diff --git a/browser/public/index.html b/browser/public/index.html
index e2c3eb276..fc7edbbbb 100644
--- a/browser/public/index.html
+++ b/browser/public/index.html
@@ -966,6 +966,7 @@
─Hiding Panes
─Overview
─Proximity Dock
+ ─Split Pane Fixed Size
─Styling
─Toggle Inner Dock
─Updating Panes
diff --git a/package-lock.json b/package-lock.json
index bb4c5768f..ace86ee78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
"@webcomponents/webcomponentsjs": "2.3.0",
"core-js": "^3.6.5",
"file-saver": "^2.0.2",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents": "5.1.2",
"igniteui-webcomponents-charts": "5.1.0",
"igniteui-webcomponents-core": "5.1.0",
@@ -4177,16 +4177,6 @@
"node": ">=8"
}
},
- "node_modules/bindings": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
- "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
- "dev": true,
- "optional": true,
- "dependencies": {
- "file-uri-to-path": "1.0.0"
- }
- },
"node_modules/blocking-elements": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/blocking-elements/-/blocking-elements-0.1.1.tgz",
@@ -6916,13 +6906,6 @@
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
- "node_modules/file-uri-to-path": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
- "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
- "dev": true,
- "optional": true
- },
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -7648,20 +7631,6 @@
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
"dev": true
},
- "node_modules/fsevents": {
- "version": "2.3.3",
- "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
- "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
- "dev": true,
- "hasInstallScript": true,
- "optional": true,
- "os": [
- "darwin"
- ],
- "engines": {
- "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
- }
- },
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -7942,25 +7911,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/glob-watcher/node_modules/fsevents": {
- "version": "1.2.13",
- "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
- "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
- "deprecated": "The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2",
- "dev": true,
- "hasInstallScript": true,
- "optional": true,
- "os": [
- "darwin"
- ],
- "dependencies": {
- "bindings": "^1.5.0",
- "nan": "^2.12.1"
- },
- "engines": {
- "node": ">= 4.0"
- }
- },
"node_modules/glob-watcher/node_modules/glob-parent": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -8770,9 +8720,9 @@
}
},
"node_modules/igniteui-dockmanager": {
- "version": "1.15.2",
- "resolved": "https://registry.npmjs.org/igniteui-dockmanager/-/igniteui-dockmanager-1.15.2.tgz",
- "integrity": "sha512-FtcWCbHhWfTuVZ1ltaiZstu88/O6NYny6BzkgVNELoLa/oqHCktjL6JoMTOC4a/QwDpoP3AMi+UmbvkQrE0fRQ==",
+ "version": "1.16.0-beta.5",
+ "resolved": "https://registry.npmjs.org/igniteui-dockmanager/-/igniteui-dockmanager-1.16.0-beta.5.tgz",
+ "integrity": "sha512-3a6UPb5edtIoEcIRhfpnrmrD1z9gub6FUoQPFxpSlc0nOZgN/Ci4aySlxYMPIahG+mbQ2z65axv2gryGTzpqRQ==",
"dependencies": {
"igniteui-trial-watermark": "^1.0.3"
}
@@ -10687,13 +10637,6 @@
"integrity": "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==",
"dev": true
},
- "node_modules/nan": {
- "version": "2.19.0",
- "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
- "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==",
- "dev": true,
- "optional": true
- },
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
diff --git a/package.json b/package.json
index 1f6bcba37..c612659e6 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
"@webcomponents/webcomponentsjs": "2.3.0",
"core-js": "^3.6.5",
"file-saver": "^2.0.2",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents": "5.1.2",
"igniteui-webcomponents-charts": "5.1.0",
"igniteui-webcomponents-core": "5.1.0",
diff --git a/samples/layouts/dock-manager/add-content-runtime/package.json b/samples/layouts/dock-manager/add-content-runtime/package.json
index 0e62202d2..330895480 100644
--- a/samples/layouts/dock-manager/add-content-runtime/package.json
+++ b/samples/layouts/dock-manager/add-content-runtime/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/contained-in-boundaries/package.json b/samples/layouts/dock-manager/contained-in-boundaries/package.json
index ea302ad75..bf46fd67d 100644
--- a/samples/layouts/dock-manager/contained-in-boundaries/package.json
+++ b/samples/layouts/dock-manager/contained-in-boundaries/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/customize-buttons/package.json b/samples/layouts/dock-manager/customize-buttons/package.json
index e2dded034..763d0ae91 100644
--- a/samples/layouts/dock-manager/customize-buttons/package.json
+++ b/samples/layouts/dock-manager/customize-buttons/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/embedding-frames/package.json b/samples/layouts/dock-manager/embedding-frames/package.json
index 27c582f4c..f0545fe21 100644
--- a/samples/layouts/dock-manager/embedding-frames/package.json
+++ b/samples/layouts/dock-manager/embedding-frames/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents-core": "5.1.0",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
diff --git a/samples/layouts/dock-manager/focus-panes/package.json b/samples/layouts/dock-manager/focus-panes/package.json
index 0e62202d2..330895480 100644
--- a/samples/layouts/dock-manager/focus-panes/package.json
+++ b/samples/layouts/dock-manager/focus-panes/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/hide-pane-headers/package.json b/samples/layouts/dock-manager/hide-pane-headers/package.json
index 0e62202d2..330895480 100644
--- a/samples/layouts/dock-manager/hide-pane-headers/package.json
+++ b/samples/layouts/dock-manager/hide-pane-headers/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/hiding-panes/package.json b/samples/layouts/dock-manager/hiding-panes/package.json
index 6990bff70..35af18ae9 100644
--- a/samples/layouts/dock-manager/hiding-panes/package.json
+++ b/samples/layouts/dock-manager/hiding-panes/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents-core": "5.1.0",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
diff --git a/samples/layouts/dock-manager/overview/package.json b/samples/layouts/dock-manager/overview/package.json
index 0218b1c80..bfcda370e 100644
--- a/samples/layouts/dock-manager/overview/package.json
+++ b/samples/layouts/dock-manager/overview/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents-core": "5.1.0",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
diff --git a/samples/layouts/dock-manager/proximity-dock/package.json b/samples/layouts/dock-manager/proximity-dock/package.json
index 953331cde..45efe3d07 100644
--- a/samples/layouts/dock-manager/proximity-dock/package.json
+++ b/samples/layouts/dock-manager/proximity-dock/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/.prettierrc b/samples/layouts/dock-manager/split-pane-fixed-size/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/ReadMe.md b/samples/layouts/dock-manager/split-pane-fixed-size/ReadMe.md
new file mode 100644
index 000000000..73a5aaa36
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Split Pane Fixed Size feature using [Dock Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/dock-manager/split-pane-fixed-size
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/index.html b/samples/layouts/dock-manager/split-pane-fixed-size/index.html
new file mode 100644
index 000000000..c67c38b88
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/index.html
@@ -0,0 +1,30 @@
+
+
+
+ DockManagerSplitPaneFixedSize
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Relative size: 400
+ Relative size: 200
+ Fixed size: 400 px
+ Fixed size: 200 px
+ Floating pane
+
+
+
+
+
+ <% if (false) { %><% } %>
+
+
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/package.json b/samples/layouts/dock-manager/split-pane-fixed-size/package.json
new file mode 100644
index 000000000..dc80fc489
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/package.json
@@ -0,0 +1,58 @@
+{
+ "name": "wc-dock-manager-split-pane-fixed-size",
+ "version": "1.0.0",
+ "description": "This project provides example of Dock Manager Split Pane Fixed Size using IgniteUI for Web Components",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "npm run build:prod",
+ "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start": "npm run serve:dev",
+ "build:legacy": "npm run build:prod:legacy",
+ "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start:legacy": "npm run serve:dev:legacy"
+ },
+ "author": "Infragistics",
+ "dependencies": {
+ "@webcomponents/custom-elements": "^1.4.1",
+ "@webcomponents/template": "^1.4.2",
+ "babel-runtime": "^6.26.0",
+ "core-js": "^3.6.5",
+ "igniteui-dockmanager": "1.16.0-beta.5",
+ "lit-html": "^3.2.0",
+ "tslib": "^2.0.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.8.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.10.0",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-typescript": "^7.8.3",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^1.0.0",
+ "csv-loader": "^3.0.2",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "parcel-bundler": "^1.6.1",
+ "source-map": "^0.7.3",
+ "style-loader": "^0.22.1",
+ "tsconfig-paths-webpack-plugin": "^4.0.0",
+ "typescript": "^4.4.4",
+ "webpack": "^5.96.1",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.11.1",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ },
+ "license": "",
+ "homepage": "."
+}
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/sandbox.config.json b/samples/layouts/dock-manager/split-pane-fixed-size/sandbox.config.json
new file mode 100644
index 000000000..5c5b54fe2
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "parcel"
+}
+
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/src/DockManagerStyles.css b/samples/layouts/dock-manager/split-pane-fixed-size/src/DockManagerStyles.css
new file mode 100644
index 000000000..f73747ac5
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/src/DockManagerStyles.css
@@ -0,0 +1,9 @@
+
+igc-dockmanager > div {
+ padding: 0.5rem;
+ height: calc(100% - 1rem);
+ width: calc(100% - 1rem);
+ display: flex;
+ flex-direction: column;
+ /* background: orange; */
+}
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/src/index.css b/samples/layouts/dock-manager/split-pane-fixed-size/src/index.css
new file mode 100644
index 000000000..0fe936871
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/src/index.ts b/samples/layouts/dock-manager/split-pane-fixed-size/src/index.ts
new file mode 100644
index 000000000..5382983e6
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/src/index.ts
@@ -0,0 +1,85 @@
+import './DockManagerStyles.css'
+import { defineCustomElements } from 'igniteui-dockmanager/loader';
+import {
+ IgcDockManagerPaneType,
+ IgcSplitPaneOrientation,
+ IgcDockManagerComponent
+} from 'igniteui-dockmanager';
+
+defineCustomElements();
+
+export class DockManagerSplitPaneFixedSize {
+ private dockManager: IgcDockManagerComponent;
+
+ constructor() {
+ this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
+ this.dockManager.dir = 'ltr';
+
+ this.dockManager.layout = {
+ rootPane: {
+ type: IgcDockManagerPaneType.splitPane,
+ orientation: IgcSplitPaneOrientation.vertical,
+ useFixedSize: true,
+ panes: [
+ {
+ type: IgcDockManagerPaneType.splitPane,
+ orientation: IgcSplitPaneOrientation.horizontal,
+ size: 300, // Size will be applied in pixels
+ panes: [
+ {
+ type: IgcDockManagerPaneType.contentPane,
+ contentId: 'content1',
+ header: 'Pane 1',
+ size: 400 // Size will be relative to siblings
+ },
+ {
+ type: IgcDockManagerPaneType.contentPane,
+ contentId: 'content2',
+ header: 'Pane 2',
+ size: 200 // Size will be relative to siblings
+ }
+ ]
+ },
+ {
+ type: IgcDockManagerPaneType.splitPane,
+ orientation: IgcSplitPaneOrientation.horizontal,
+ size: 200, // Size will be applied in pixels
+ useFixedSize: true,
+ panes: [
+ {
+ type: IgcDockManagerPaneType.contentPane,
+ contentId: 'content3',
+ header: 'Pane 3',
+ size: 400 // Size will be applied in pixels
+ },
+ {
+ type: IgcDockManagerPaneType.contentPane,
+ contentId: 'content4',
+ header: 'Pane 4',
+ size: 200 // Size will be applied in pixels
+ }
+ ]
+ }
+ ]
+ },
+ floatingPanes: [
+ {
+ type: IgcDockManagerPaneType.splitPane,
+ orientation: IgcSplitPaneOrientation.horizontal,
+ floatingLocation: { x: 250, y: 100 },
+ floatingWidth: 250,
+ floatingHeight: 150,
+ panes: [
+ {
+ type: IgcDockManagerPaneType.contentPane,
+ contentId: "content5",
+ header: "Pane 5"
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
+
+new DockManagerSplitPaneFixedSize();
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/tsconfig.json b/samples/layouts/dock-manager/split-pane-fixed-size/tsconfig.json
new file mode 100644
index 000000000..de23257dd
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js b/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/dock-manager/split-pane-fixed-size/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+ const nodeEnv = process.env.NODE_ENV || 'development';
+ const isProd = nodeEnv === 'production';
+ const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+ console.log(">> webpack nodeEnv=" + nodeEnv);
+ console.log(">> webpack isProd=" + isProd);
+ console.log(">> webpack isLegacy=" + isLegacy);
+ const presets = [
+ ["@babel/preset-env", {
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "targets": {
+ "browsers": isLegacy ? ["defaults"] : [
+ "last 2 Chrome versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 2 Firefox versions",
+ "last 2 Edge versions"]
+ }
+ }],
+ "@babel/preset-typescript"
+ ];
+
+ return {
+ entry: isLegacy ? [
+ path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+ path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+ path.resolve(__dirname, 'src')
+ ] : path.resolve(__dirname, 'src'),
+ devtool: isProd ? false : 'source-map',
+ output: {
+ filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+ globalObject: 'this',
+ path: path.resolve(__dirname, 'dist'),
+ },
+
+ resolve: {
+ mainFields: ['esm2015', 'module', 'main'],
+ extensions: ['.ts', '.js', '.json'],
+ plugins: [new TsconfigPathsPlugin({
+ configFile: './tsconfig.json',
+ extensions: ['.ts', '.js'],
+ mainFields: ['esm2015', 'module', 'main']
+ })]
+ },
+
+ module: {
+ rules: [
+ { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+ { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+ { test: /\.xml$/, use: ['xml-loader'] },
+ { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+ {
+ test: /worker\.(ts|js)$/,
+ use: [
+ { loader: 'worker-loader' },
+ {
+ loader: 'babel-loader', options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ },
+ exclude:
+ function (modulePath) {
+ return /node_modules/.test(modulePath) &&
+ !/igniteui-webcomponents/.test(modulePath) &&
+ !/lit-html/.test(modulePath);
+ }
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+ }),
+ new HtmlWebpackPlugin({
+ title: 'for-cs',
+ template: 'index.html'
+ }),
+ new ForkTsCheckerWebpackPlugin()
+ ]
+ };
+};
diff --git a/samples/layouts/dock-manager/styling/package.json b/samples/layouts/dock-manager/styling/package.json
index 6406fd3a4..60dc91542 100644
--- a/samples/layouts/dock-manager/styling/package.json
+++ b/samples/layouts/dock-manager/styling/package.json
@@ -24,7 +24,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents": "5.1.2",
"igniteui-webcomponents-core": "5.1.0",
"lit-html": "^3.2.0",
diff --git a/samples/layouts/dock-manager/toggle-inner-dock/package.json b/samples/layouts/dock-manager/toggle-inner-dock/package.json
index f03b4cc69..37a9aaa5f 100644
--- a/samples/layouts/dock-manager/toggle-inner-dock/package.json
+++ b/samples/layouts/dock-manager/toggle-inner-dock/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"lit-html": "^3.2.0",
"tslib": "^2.0.0"
},
diff --git a/samples/layouts/dock-manager/updating-panes/package.json b/samples/layouts/dock-manager/updating-panes/package.json
index 8b37b826a..481cc4ca0 100644
--- a/samples/layouts/dock-manager/updating-panes/package.json
+++ b/samples/layouts/dock-manager/updating-panes/package.json
@@ -23,7 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
- "igniteui-dockmanager": "1.15.2",
+ "igniteui-dockmanager": "1.16.0-beta.5",
"igniteui-webcomponents-charts": "5.1.0",
"igniteui-webcomponents-core": "5.1.0",
"igniteui-webcomponents-gauges": "5.1.0",