@syncfusion/ej2-angular-layouts 26.2.10 → 27.1.48

package/CHANGELOG.md

@@ -2,28 +2,6 @@
 
 ## [Unreleased]
 
-### DashboardLayout
-
-#### Bug Fixes
-
-- `#I591785` - The issue with the draggableHandle property when dynamically updating panel contents in the Dashboard Layout component has been resolved.
-
-## 26.1.38 (2024-06-19)
-
-### DashboardLayout
-
-#### Bug Fixes
-
-- `#I599650` - The issue with the type of the element parameter in the Dashboard Layout constructor has been resolved.
-
-## 26.1.35 (2024-06-11)
-
-### DashboardLayout
-
-#### Bug Fixes
-
-- `#I590397` - Resolved the issue where two panels occupy the same cell when dragging panels in the Dashboard Layout.
-
 ## 25.1.35 (2024-03-15)
 
 ### Timeline

package/README.md

@@ -14,7 +14,7 @@ The layout package contains cards, avatars, splitter, timeline and Dashboard Lay
 
 ![Layout](https://ej2.syncfusion.com/products/images/layout/readme.png)
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm).
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can [purchase](https://www.syncfusion.com/sales/products/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm).
 
 > A free [community license](https://www.syncfusion.com/products/communitylicense/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
@@ -32,23 +32,23 @@ Following list of components are available in the package
 
 * [Angular Card](https://www.syncfusion.com/angular-ui-components/angular-card?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) - Container used to display content in specific structure.
   * [Getting Started](https://ej2.syncfusion.com/angular/documentation/card/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm)
-  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/basic)
+  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/basic)
 
 * [Angular Avatar](https://www.syncfusion.com/angular-ui-components/angular-avatar?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) - Used to add images or initials or icons in different shapes and sizes to your application.
   * [Getting Started](https://ej2.syncfusion.com/angular/documentation/avatar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm)
-  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/avatar/default)
+  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/avatar/default)
 
 * [Angular Splitter](https://www.syncfusion.com/angular-ui-components/angular-splitter?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) - Used to construct a different layout using its multiple and nested panes with resizable.
   * [Getting Started](https://ej2.syncfusion.com/angular/documentation/splitter/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm)
-  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/splitter/default)
+  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/splitter/default)
 
 * [Angular Timeline](https://www.syncfusion.com/angular-ui-components/angular-timeline?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) - Used to build timelines to showcases user activities, tracking progress, narrating historical timelines, and more.
   * [Getting Started](https://ej2.syncfusion.com/angular/documentation/timeline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm)
-  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/timeline/default) 
+  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/timeline/default) 
 
 * [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm) - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
   * [Getting Started](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm)
-  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/dashboard-layout/default)
+  * [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/dashboard-layout/default)
 
 ## Supported Frameworks
 
@@ -63,31 +63,31 @@ These components are available in following list of:
 ## Use Case samples
 
 * IT Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm))
-* Swipeable Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/swipeable.html))
-* Flip Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/flip.html))
-* Tile View ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/tile.html))
-* Contact Application ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/avatar/listview.html))
-* Avatar Badge ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/avatar/badge.html))
-* Avatar Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/avatar/card.html))
-* SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/dashboard-layout/analytics-dashboard.html))
+* Swipeable Card ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/swipeable))
+* Flip Card ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/flip))
+* Tile View ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/tile))
+* Contact Application ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/avatar/list-view))
+* Avatar Badge ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/avatar/badge))
+* Avatar Card ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/avatar/card))
+* SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/dashboard-layout/analytics-dashboard))
 
 ## Key Features
 
 * Card
 
-  * [Header](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/basic) - Header supports to include title, subtitle along with image.
+  * [Header](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/basic) - Header supports to include title, subtitle along with image.
 
-  * [Images and Title](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/reveal) - Support to include images with customizable caption positions in it.
+  * [Images and Title](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/reveal) - Support to include images with customizable caption positions in it.
 
-  * [Action Buttons](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/vertical) - Supports to add buttons within the card either in vertical or horizontal alignment.
+  * [Action Buttons](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/vertical) - Supports to add buttons within the card either in vertical or horizontal alignment.
 
-  * [Horizontal Card](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/card/horizontal) - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.
+  * [Horizontal Card](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/card/horizontal) - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.
 
 * Avatar
 
-  * [Types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/avatar/default) - Provided `2` types of avatars such as `default` and `circle`.
+  * [Types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/avatar/default) - Provided `2` types of avatars such as `default` and `circle`.
 
-  * [Sizes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/avatar/types) - Supports `7` different sizes to adapt the various application scenario.
+  * [Sizes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/avatar/types) - Supports `7` different sizes to adapt the various application scenario.
 
         * xsmall
         * small
@@ -97,37 +97,37 @@ These components are available in following list of:
 
 * Splitter
 
-  * [Multiple Panes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/splitter/default) - Provided an option to configure more than two panes.
+  * [Multiple Panes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/splitter/default) - Provided an option to configure more than two panes.
 
-  * [Resizable Panes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/splitter/code-editor-layout) - Supports resizable to adjust its pane size dynamically.
+  * [Resizable Panes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/splitter/code-editor-layout) - Supports resizable to adjust its pane size dynamically.
 
-  * [Orientation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/splitter/default) - The panes can orient either `horizontally` or `vertically`.
+  * [Orientation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/splitter/default) - The panes can orient either `horizontally` or `vertically`.
 
-  * [Integration](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/splitter/accordion-navigation-menu) - Other Angular UI components can be integrated within panes.
+  * [Integration](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/splitter/accordion-navigation-menu) - Other Angular UI components can be integrated within panes.
 
-  * [Nested Panes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/splitter/code-editor-layout) - Another splitter can be integrated within panes to create a complex layout.
+  * [Nested Panes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/splitter/code-editor-layout) - Another splitter can be integrated within panes to create a complex layout.
 
 * Timeline
 
-  * [Orientation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/timeline/api) - Display items in a horizontal or vertical orientation.
+  * [Orientation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/timeline/api) - Display items in a horizontal or vertical orientation.
 
-  * [Opposite content](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/timeline/api) -  Display additional information opposite to the item content.
+  * [Opposite content](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/timeline/api) -  Display additional information opposite to the item content.
   
-  * [Items alignment](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/timeline/api) - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.
+  * [Items alignment](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/timeline/api) - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.
   
-  * [Reverse timeline](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/timeline/api) - Shows the timeline items in the reverse order.
+  * [Reverse timeline](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/timeline/api) - Shows the timeline items in the reverse order.
   
-  * [Templates](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/timeline/template) - Customize the default appearance, including styling the dot item, templated content, and more.
+  * [Templates](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/timeline/template) - Customize the default appearance, including styling the dot item, templated content, and more.
 
 * Dashboard Layout
     
-  * [Drag and Drop](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/dashboard-layout/properties.html) - Allows drag and drop of panels at the desired location within the dashboard.
+  * [Drag and Drop](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/dashboard-layout/properties) - Allows drag and drop of panels at the desired location within the dashboard.
 
-  * [Floating](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/dashboard-layout/properties.html) - Floats the panels upward when the dragging option is enabled.
+  * [Floating](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/dashboard-layout/properties) - Floats the panels upward when the dragging option is enabled.
 
-  * [Resizing](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/dashboard-layout/properties.html) - Support to resize the panels in any direction as per the requirement.
+  * [Resizing](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/dashboard-layout/properties) - Support to resize the panels in any direction as per the requirement.
 
-  * [MediaQuery](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/material/dashboard-layout/default.html) - Allows the panels to be stacked when the specified resolution is met.
+  * [MediaQuery](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-layout-npm#/fluent2/dashboard-layout/default) - Allows the panels to be stacked when the specified resolution is met.
 
 ## Support
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-angular-layouts@*",
-  "_id": "@syncfusion/ej2-angular-layouts@26.2.5",
+  "_id": "@syncfusion/ej2-angular-layouts@21.4.6",
   "_inBundle": false,
-  "_integrity": "sha512-5YB0syW+SrNZYXcCY+EWlS7d8cI70gA7U7J6YMPoHYS0JHmrM+FSMtq/k5/GTp/U1pVAl0M4hlRO+H3aoAGmHA==",
+  "_integrity": "sha512-g+bjX1iODaGbWmfImDIsxtCAr7PJXmcX2+qsUQyBgQG2nz6PgJ1tXGDCkufXOVk8CrCwN33sLDBBt2CKV65bBQ==",
   "_location": "/@syncfusion/ej2-angular-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-angular-hotfix/@syncfusion/ej2-angular-layouts/-/ej2-angular-layouts-26.2.5.tgz",
-  "_shasum": "77af5ef8814db77c777429378db4d6a73aa3c4fe",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-angular-release/@syncfusion/ej2-angular-layouts/-/ej2-angular-layouts-21.4.6.tgz",
+  "_shasum": "bf98bf12b9cc0db81fbd59fe6f2099a6b53957b6",
   "_spec": "@syncfusion/ej2-angular-layouts@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/ivypackages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/ivypackages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-angular-base": "~26.2.10",
-    "@syncfusion/ej2-base": "~26.2.10",
-    "@syncfusion/ej2-layouts": "26.2.10",
+    "@syncfusion/ej2-angular-base": "~27.1.48",
+    "@syncfusion/ej2-base": "~27.1.48",
+    "@syncfusion/ej2-layouts": "27.1.48",
     "tslib": "^2.3.0"
   },
   "deprecated": false,
@@ -78,5 +78,5 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "typings": "syncfusion-ej2-angular-layouts.d.ts",
-  "version": "26.2.10"
+  "version": "27.1.48"
 }

package/schematics/collection.json

@@ -1,10 +1,11 @@
 {
-  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {
-    "ng-add": {
-      "description": "Adds Essential JS 2 specific Angular package to an application",
-      "factory": "./ng-add",
-      "schema": "./ng-add/schema.json"
-    }
-  }
-}
+                "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
+                "schematics": {
+                  "ng-add": {
+                    "description": "Adds Essential JS 2 specific Angular package to an application",
+                    "factory": "./ng-add",
+                    "schema": "./ng-add/schema.json"
+                  }
+                }
+              }
+              

package/schematics/ng-add/index.d.ts

@@ -0,0 +1,3 @@
+import { OptionsSchema } from './schema';
+import { Rule } from '@angular-devkit/schematics';
+export default function (options: OptionsSchema): Rule;

package/schematics/ng-add/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lib_details_1 = require("./../utils/lib-details");
+const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
+function default_1(options) {
+    const libOptions = Object.assign({}, { 'pkgName': lib_details_1.pkgName, 'pkgVer': lib_details_1.pkgVer, 'moduleName': lib_details_1.moduleName, 'themeVer': lib_details_1.themeVer });
+    return schematics_1.install(options, libOptions);
+}
+exports.default = default_1;

package/schematics/ng-add/index.ts

@@ -1,10 +1,10 @@
-import { pkgName, pkgVer, moduleName, themeVer } from './../utils/lib-details';
-import { install } from '@syncfusion/ej2-angular-base/schematics';
-import { OptionsSchema, LibOptionsSchema } from './schema';
-import { Rule } from '@angular-devkit/schematics';
-
-export default function (options: OptionsSchema): Rule {
-	const libOptions: LibOptionsSchema = Object.assign({},
-		{ 'pkgName': pkgName, 'pkgVer': pkgVer, 'moduleName': moduleName, 'themeVer': themeVer });
-	return install(options, libOptions);
-}
+import { pkgName, pkgVer, moduleName, themeVer } from './../utils/lib-details';
+import { install } from '@syncfusion/ej2-angular-base/schematics';
+import { OptionsSchema, LibOptionsSchema } from './schema';
+import { Rule } from '@angular-devkit/schematics';
+
+export default function (options: OptionsSchema): Rule {
+	const libOptions: LibOptionsSchema = Object.assign({},
+		{ 'pkgName': pkgName, 'pkgVer': pkgVer, 'moduleName': moduleName, 'themeVer': themeVer });
+	return install(options, libOptions);
+}

package/schematics/ng-add/schema.d.ts

@@ -0,0 +1,13 @@
+export interface OptionsSchema {
+    skipPackageJson: boolean;
+    modules: string;
+    modulePath: string;
+    theme: 'material' | 'fabric' | 'bootstrap' | 'highcontrast';
+    project?: string;
+}
+export interface LibOptionsSchema {
+    pkgName: string;
+    pkgVer: string;
+    moduleName: string;
+    themeVer: string;
+}

package/schematics/ng-add/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/ng-add/schema.json

@@ -1,34 +1,34 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "ngAdd",
-  "title": "Add Essential JS 2 Angular packages",
-  "type": "object",
-  "properties": {
-    "skipPackageJson": {
-      "type": "boolean",
-      "default": false,
-      "description": "Do not add add Essential JS 2 Angular packages dependencies to package.json (e.g., --skipPackageJson)"
-    },
-    "modules": {
-      "type": "string",
-      "default": "",
-      "description": "Add only specific Essential JS 2 modules to the app.module file (eg: --modules=slider, grid)"
-    },
-    "modulePath": {
-      "type": "string",
-      "default": "",
-      "description": "Used to specify the path of the module file where the EJ2 module needs to be imported"
-    },
-    "theme": {
-      "enum": [
-        "material",
-        "fabric",
-        "bootstrap",
-        "highcontrast"
-      ],
-      "default": "material",
-      "description": "Used to change the theme that needs to be imported"
-    }
-  },
-  "required": []
-}
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ngAdd",
+  "title": "Add Essential JS 2 Angular packages",
+  "type": "object",
+  "properties": {
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add add Essential JS 2 Angular packages dependencies to package.json (e.g., --skipPackageJson)"
+    },
+    "modules": {
+      "type": "string",
+      "default": "",
+      "description": "Add only specific Essential JS 2 modules to the app.module file (eg: --modules=slider, grid)"
+    },
+    "modulePath": {
+      "type": "string",
+      "default": "",
+      "description": "Used to specify the path of the module file where the EJ2 module needs to be imported"
+    },
+    "theme": {
+      "enum": [
+        "material",
+        "fabric",
+        "bootstrap",
+        "highcontrast"
+      ],
+      "default": "material",
+      "description": "Used to change the theme that needs to be imported"
+    }
+  },
+  "required": []
+}

package/schematics/ng-add/schema.ts

@@ -1,30 +1,30 @@
-export interface OptionsSchema {
-    // Whether to skip package.json install.
-    skipPackageJson: boolean;
-
-    // Used to specify required module names
-    modules: string;
-
-    // Used to specify custom module path
-    modulePath: string;
-
-    // Used to specify theme name
-    theme:  'material' | 'fabric' | 'bootstrap' | 'highcontrast';
-
-    // Name of the project to target.
-    project?: string;
-}
-
-export interface LibOptionsSchema {
-    // Package name
-    pkgName: string;
-
-    // Package version
-    pkgVer: string;
-
-    // Library base module name
-    moduleName: string;
-
-    // Theme version
-    themeVer: string;
-}
+export interface OptionsSchema {
+    // Whether to skip package.json install.
+    skipPackageJson: boolean;
+
+    // Used to specify required module names
+    modules: string;
+
+    // Used to specify custom module path
+    modulePath: string;
+
+    // Used to specify theme name
+    theme:  'material' | 'fabric' | 'bootstrap' | 'highcontrast';
+
+    // Name of the project to target.
+    project?: string;
+}
+
+export interface LibOptionsSchema {
+    // Package name
+    pkgName: string;
+
+    // Package version
+    pkgVer: string;
+
+    // Library base module name
+    moduleName: string;
+
+    // Theme version
+    themeVer: string;
+}

package/schematics/tsconfig.json

@@ -1,25 +1,25 @@
-{
-    "compilerOptions": {
-        "lib": ["es2017", "dom"],
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "noEmitOnError": false,
-        "skipDefaultLibCheck": true,
-        "skipLibCheck": true,
-        "sourceMap": true,
-        "target": "es6",
-        "declaration": true,
-        "types": [
-            "jasmine",
-            "node"
-        ]
-    },
-    "exclude": [
-        "node_modules",
-        "src",
-        "src/**/*.ts",
-        "spec",
-        "spec/**/*.ts",
-        "@typings"
-    ]
-}
+{
+    "compilerOptions": {
+        "lib": ["es2017", "dom"],
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "noEmitOnError": false,
+        "skipDefaultLibCheck": true,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "target": "es6",
+        "declaration": true,
+        "types": [
+            "jasmine",
+            "node"
+        ]
+    },
+    "exclude": [
+        "node_modules",
+        "src",
+        "src/**/*.ts",
+        "spec",
+        "spec/**/*.ts",
+        "@typings"
+    ]
+}

package/schematics/utils/lib-details.d.ts

@@ -0,0 +1,4 @@
+export declare const pkgName = "@syncfusion/ej2-angular-layouts";
+export declare const pkgVer = "^21.4.6";
+export declare const moduleName = "SplitterModule, DashboardLayoutModule, TimelineModule";
+export declare const themeVer = "~21.4.6";

package/schematics/utils/lib-details.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pkgName = '@syncfusion/ej2-angular-layouts';
+exports.pkgVer = '^27.1.48';
+exports.moduleName = 'SplitterModule, DashboardLayoutModule, TimelineModule';
+exports.themeVer = '~27.1.48';

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-layouts';
-export const pkgVer = '^26.2.5';
+export const pkgVer = '^27.1.48';
 export const moduleName = 'SplitterModule, DashboardLayoutModule, TimelineModule';
-export const themeVer = '~26.2.5';
+export const themeVer = '~27.1.48';

package/styles/avatar/bootstrap5.3.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/avatar/bootstrap5.3.css';

package/styles/avatar/bootstrap5.3.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/bootstrap5.3.scss';

package/styles/bootstrap-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap-dark-lite.css';

package/styles/bootstrap-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/bootstrap-dark-lite.scss';

package/styles/bootstrap-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap-lite.css';

package/styles/bootstrap-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/bootstrap-lite.scss';

package/styles/bootstrap4-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap4-lite.css';

package/styles/bootstrap4-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/bootstrap4-lite.scss';

package/styles/bootstrap5-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap5-dark-lite.css';

package/styles/bootstrap5-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/bootstrap5-dark-lite.scss';

package/styles/bootstrap5-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap5-lite.css';

package/styles/bootstrap5-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/bootstrap5-lite.scss';

package/styles/bootstrap5.3-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap5.3-lite.css';

package/styles/bootstrap5.3-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/bootstrap5.3-lite.scss';

package/styles/bootstrap5.3.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/bootstrap5.3.css';

package/styles/bootstrap5.3.scss

@@ -0,0 +1,5 @@
+@import 'avatar/bootstrap5.3.scss';
+@import 'card/bootstrap5.3.scss';
+@import 'splitter/bootstrap5.3.scss';
+@import 'dashboard-layout/bootstrap5.3.scss';
+@import 'timeline/bootstrap5.3.scss';

package/styles/card/bootstrap5.3.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/card/bootstrap5.3.css';

package/styles/card/bootstrap5.3.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/card/bootstrap5.3.scss';

package/styles/dashboard-layout/bootstrap5.3.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/dashboard-layout/bootstrap5.3.css';

package/styles/dashboard-layout/bootstrap5.3.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/dashboard-layout/bootstrap5.3.scss';

package/styles/fabric-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/fabric-dark-lite.css';

package/styles/fabric-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/fabric-dark-lite.scss';

package/styles/fabric-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/fabric-lite.css';

package/styles/fabric-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/fabric-lite.scss';

package/styles/fluent-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/fluent-dark-lite.css';

package/styles/fluent-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/fluent-dark-lite.scss';

package/styles/fluent-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/fluent-lite.css';

package/styles/fluent-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/fluent-lite.scss';

package/styles/fluent2-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/fluent2-lite.css';

package/styles/fluent2-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/fluent2-lite.scss';

package/styles/highcontrast-light-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/highcontrast-light-lite.css';

package/styles/highcontrast-light-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/highcontrast-light-lite.scss';

package/styles/highcontrast-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/highcontrast-lite.css';

package/styles/highcontrast-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/highcontrast-lite.scss';

package/styles/material-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/material-dark-lite.css';

package/styles/material-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/material-dark-lite.scss';

package/styles/material-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/material-lite.css';

package/styles/material-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/material-lite.scss';

package/styles/material3-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/material3-dark-lite.css';

package/styles/material3-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/material3-dark-lite.scss';

package/styles/material3-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/material3-lite.css';

package/styles/material3-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/material3-lite.scss';

package/styles/splitter/bootstrap5.3.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/splitter/bootstrap5.3.css';

package/styles/splitter/bootstrap5.3.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/splitter/bootstrap5.3.scss';

package/styles/tailwind-dark-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/tailwind-dark-lite.css';

package/styles/tailwind-dark-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/tailwind-dark-lite.scss';

package/styles/tailwind-lite.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/tailwind-lite.css';

package/styles/tailwind-lite.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/tailwind-lite.scss';

package/styles/timeline/bootstrap5.3.css

@@ -0,0 +1 @@
+@import '@syncfusion/ej2-layouts/styles/timeline/bootstrap5.3.css';

package/styles/timeline/bootstrap5.3.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/timeline/bootstrap5.3.scss';